@tapcart/mobile-components 0.6.4 → 0.6.6

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 (38) hide show
  1. package/dist/components/hooks/use-click-outside.d.ts +8 -0
  2. package/dist/components/hooks/use-click-outside.d.ts.map +1 -0
  3. package/dist/components/hooks/use-click-outside.js +46 -0
  4. package/dist/components/hooks/use-products.d.ts +5 -0
  5. package/dist/components/hooks/use-products.d.ts.map +1 -1
  6. package/dist/components/hooks/use-products.js +9 -3
  7. package/dist/components/hooks/use-pull-to-refresh.d.ts +9 -0
  8. package/dist/components/hooks/use-pull-to-refresh.d.ts.map +1 -0
  9. package/dist/components/hooks/use-pull-to-refresh.js +88 -0
  10. package/dist/components/hooks/use-scroll-direction.d.ts.map +1 -1
  11. package/dist/components/hooks/use-scroll-direction.js +1 -1
  12. package/dist/components/ui/favorite/favorite.d.ts +16 -0
  13. package/dist/components/ui/favorite/favorite.d.ts.map +1 -0
  14. package/dist/components/ui/favorite/favorite.js +156 -0
  15. package/dist/components/ui/favorite/favorite.spec.d.ts +2 -0
  16. package/dist/components/ui/favorite/favorite.spec.d.ts.map +1 -0
  17. package/dist/components/ui/favorite/favorite.spec.js +6 -0
  18. package/dist/components/ui/favorite/index.d.ts +2 -0
  19. package/dist/components/ui/favorite/index.d.ts.map +1 -0
  20. package/dist/components/ui/favorite/index.js +1 -0
  21. package/dist/components/ui/favorite.js +1 -1
  22. package/dist/components/ui/icon.js +2 -2
  23. package/dist/components/ui/select.d.ts +39 -0
  24. package/dist/components/ui/select.d.ts.map +1 -0
  25. package/dist/components/ui/select.js +87 -0
  26. package/package.json +1 -1
  27. package/dist/components/ThemeProvider.d.ts +0 -3
  28. package/dist/components/ThemeProvider.d.ts.map +0 -1
  29. package/dist/components/ThemeProvider.js +0 -18
  30. package/dist/components/ThemeToggle.d.ts +0 -2
  31. package/dist/components/ThemeToggle.d.ts.map +0 -1
  32. package/dist/components/ThemeToggle.js +0 -8
  33. package/dist/components/ui/input.d.ts +0 -17
  34. package/dist/components/ui/input.d.ts.map +0 -1
  35. package/dist/components/ui/input.js +0 -35
  36. package/dist/components/ui/product-grid.d.ts +0 -15
  37. package/dist/components/ui/product-grid.d.ts.map +0 -1
  38. package/dist/components/ui/product-grid.js +0 -22
@@ -0,0 +1,8 @@
1
+ import { RefObject } from "react";
2
+ type Handler = () => void;
3
+ interface UseClickOutsideOptions {
4
+ enabled?: boolean;
5
+ }
6
+ declare function useClickOutside<T extends HTMLElement = HTMLElement>(handler: Handler, options?: UseClickOutsideOptions): RefObject<T>;
7
+ export default useClickOutside;
8
+ //# 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":"AAAA,OAAO,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAA;AAEpD,KAAK,OAAO,GAAG,MAAM,IAAI,CAAA;AAEzB,UAAU,sBAAsB;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,iBAAS,eAAe,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAC1D,OAAO,EAAE,OAAO,EAChB,OAAO,GAAE,sBAA2B,GACnC,SAAS,CAAC,CAAC,CAAC,CAqDd;AAED,eAAe,eAAe,CAAA"}
@@ -0,0 +1,46 @@
1
+ import { useEffect, useRef } from "react";
2
+ function useClickOutside(handler, options = {}) {
3
+ const { enabled = true } = options;
4
+ const ref = useRef(null);
5
+ const touchStartRef = useRef(null);
6
+ useEffect(() => {
7
+ if (!enabled)
8
+ return;
9
+ const handleOutsideInteraction = (event) => {
10
+ if (!ref.current || ref.current.contains(event.target))
11
+ return;
12
+ handler();
13
+ };
14
+ const handleTouchStart = (event) => {
15
+ touchStartRef.current = {
16
+ x: event.touches[0].clientX,
17
+ y: event.touches[0].clientY,
18
+ };
19
+ };
20
+ const handleTouchEnd = (event) => {
21
+ if (!touchStartRef.current)
22
+ return;
23
+ const touchEnd = {
24
+ x: event.changedTouches[0].clientX,
25
+ y: event.changedTouches[0].clientY,
26
+ };
27
+ const distance = Math.sqrt(Math.pow(touchEnd.x - touchStartRef.current.x, 2) +
28
+ Math.pow(touchEnd.y - touchStartRef.current.y, 2));
29
+ if (distance < 10) {
30
+ // Treat as a tap if the finger didn't move much
31
+ handleOutsideInteraction(event);
32
+ }
33
+ touchStartRef.current = null;
34
+ };
35
+ document.addEventListener("mousedown", handleOutsideInteraction);
36
+ document.addEventListener("touchstart", handleTouchStart);
37
+ document.addEventListener("touchend", handleTouchEnd);
38
+ return () => {
39
+ document.removeEventListener("mousedown", handleOutsideInteraction);
40
+ document.removeEventListener("touchstart", handleTouchStart);
41
+ document.removeEventListener("touchend", handleTouchEnd);
42
+ };
43
+ }, [handler, enabled]);
44
+ return ref;
45
+ }
46
+ export default useClickOutside;
@@ -1,10 +1,15 @@
1
1
  import { Product } from "app-studio-types";
2
2
  type URL = string;
3
+ type MetafieldInput = {
4
+ namespace: string;
5
+ key: string;
6
+ };
3
7
  type UseProductsProps = {
4
8
  productIds: string[];
5
9
  productHandles: string[];
6
10
  baseURL: URL;
7
11
  fetcher?: (url: string) => Promise<any>;
12
+ metafields?: MetafieldInput[];
8
13
  };
9
14
  type UseProductsReturn = {
10
15
  products: Product[];
@@ -1 +1 @@
1
- {"version":3,"file":"use-products.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-products.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAE1C,KAAK,GAAG,GAAG,MAAM,CAAA;AACjB,KAAK,gBAAgB,GAAG;IACtB,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB,cAAc,EAAE,MAAM,EAAE,CAAA;IACxB,OAAO,EAAE,GAAG,CAAA;IACZ,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAA;CACxC,CAAA;AACD,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,KAAK,EAAE,GAAG,CAAA;IACV,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,GAAG,iBAAiB,CAqB7E"}
1
+ {"version":3,"file":"use-products.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-products.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAE1C,KAAK,GAAG,GAAG,MAAM,CAAA;AACjB,KAAK,cAAc,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAA;AACxD,KAAK,gBAAgB,GAAG;IACtB,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB,cAAc,EAAE,MAAM,EAAE,CAAA;IACxB,OAAO,EAAE,GAAG,CAAA;IACZ,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAA;IACvC,UAAU,CAAC,EAAE,cAAc,EAAE,CAAA;CAC9B,CAAA;AACD,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,KAAK,EAAE,GAAG,CAAA;IACV,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,GAAG,iBAAiB,CA8B7E"}
@@ -2,13 +2,19 @@ import useSWR from "swr";
2
2
  export function useProducts(props) {
3
3
  let url = null;
4
4
  if (props) {
5
- const { baseURL, productIds, productHandles } = props;
5
+ const { baseURL, productIds, productHandles, metafields } = props;
6
+ let queryParams = new URLSearchParams();
6
7
  if ((productIds === null || productIds === void 0 ? void 0 : productIds.length) > 0) {
7
- url = `${baseURL}/products/by-ids?ids=${productIds.join(",")}`;
8
+ queryParams.set("ids", productIds.join(","));
8
9
  }
9
10
  else if ((productHandles === null || productHandles === void 0 ? void 0 : productHandles.length) > 0) {
10
- url = `${baseURL}/products/by-ids?handles=${productHandles.join(",")}`;
11
+ queryParams.set("handles", productHandles.join(","));
11
12
  }
13
+ if (metafields && metafields.length > 0) {
14
+ const metafieldStrings = metafields.map((m) => `${m.namespace}.${m.key}`);
15
+ queryParams.set("metafields", metafieldStrings.join(","));
16
+ }
17
+ url = `${baseURL}/products/by-ids?${queryParams.toString()}`;
12
18
  }
13
19
  const fetcher = (props === null || props === void 0 ? void 0 : props.fetcher) || ((url) => fetch(url).then((res) => res.json()));
14
20
  const { data, error } = useSWR(url, fetcher);
@@ -0,0 +1,9 @@
1
+ import React from "react";
2
+ declare function usePullToRefresh(ref: React.RefObject<HTMLDivElement>, onTrigger: () => Promise<void>): boolean;
3
+ interface PullToRefreshProps {
4
+ onRefresh: () => Promise<void>;
5
+ children: React.ReactNode;
6
+ }
7
+ declare const PullToRefresh: React.FC<PullToRefreshProps>;
8
+ export { usePullToRefresh, PullToRefresh };
9
+ //# sourceMappingURL=use-pull-to-refresh.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-pull-to-refresh.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-pull-to-refresh.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAKvE,iBAAS,gBAAgB,CACvB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EACpC,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,WAuF/B;AAED,UAAU,kBAAkB;IAC1B,SAAS,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiB/C,CAAA;AAED,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,CAAA"}
@@ -0,0 +1,88 @@
1
+ "use client";
2
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
3
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4
+ return new (P || (P = Promise))(function (resolve, reject) {
5
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
6
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
7
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
8
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
9
+ });
10
+ };
11
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
12
+ import { useEffect, useState, useCallback, useRef } from "react";
13
+ import { Icon } from "../ui/icon";
14
+ const TRIGGER_THRESHOLD = 250;
15
+ function usePullToRefresh(ref, onTrigger) {
16
+ const [loading, setLoading] = useState(false);
17
+ const handleTouchStartRef = useRef();
18
+ const handleTouchMoveRef = useRef();
19
+ const handleTouchEndRef = useRef();
20
+ const onTransitionEndRef = useRef();
21
+ const appr = useCallback((x) => {
22
+ const MAX = 128;
23
+ const k = 0.4;
24
+ return MAX * (1 - Math.exp((-k * x) / MAX));
25
+ }, []);
26
+ const handleTouchStart = useCallback((startEvent) => {
27
+ const el = ref.current;
28
+ if (!el)
29
+ return;
30
+ const initialY = startEvent.touches[0].clientY;
31
+ handleTouchMoveRef.current = (moveEvent) => {
32
+ const el = ref.current;
33
+ if (!el)
34
+ return;
35
+ const currentY = moveEvent.touches[0].clientY;
36
+ const dy = currentY - initialY;
37
+ if (dy < 0)
38
+ return;
39
+ el.style.transform = `translateY(${appr(dy)}px)`;
40
+ };
41
+ handleTouchEndRef.current = (endEvent) => __awaiter(this, void 0, void 0, function* () {
42
+ const el = ref.current;
43
+ if (!el)
44
+ return;
45
+ el.style.transform = "translateY(0)";
46
+ el.style.transition = "transform 0.2s";
47
+ const y = endEvent.changedTouches[0].clientY;
48
+ const dy = y - initialY;
49
+ if (dy > TRIGGER_THRESHOLD &&
50
+ document.documentElement.scrollTop <= 20) {
51
+ setLoading(true);
52
+ const delay = new Promise((resolve) => setTimeout(resolve, 500)); // Wait for half a second to show the loading spinner
53
+ yield Promise.all([onTrigger(), delay]);
54
+ setLoading(false);
55
+ }
56
+ el.addEventListener("transitionend", onTransitionEndRef.current);
57
+ el.removeEventListener("touchmove", handleTouchMoveRef.current);
58
+ el.removeEventListener("touchend", handleTouchEndRef.current);
59
+ });
60
+ el.addEventListener("touchmove", handleTouchMoveRef.current);
61
+ el.addEventListener("touchend", handleTouchEndRef.current);
62
+ }, [appr, onTrigger, ref]);
63
+ const onTransitionEnd = useCallback(() => {
64
+ const el = ref.current;
65
+ if (!el)
66
+ return;
67
+ el.style.transition = "";
68
+ el.removeEventListener("transitionend", onTransitionEndRef.current);
69
+ }, [ref]);
70
+ handleTouchStartRef.current = handleTouchStart;
71
+ onTransitionEndRef.current = onTransitionEnd;
72
+ useEffect(() => {
73
+ const el = ref.current;
74
+ if (!el)
75
+ return;
76
+ el.addEventListener("touchstart", handleTouchStartRef.current);
77
+ return () => {
78
+ el.removeEventListener("touchstart", handleTouchStartRef.current);
79
+ };
80
+ }, [ref]);
81
+ return loading;
82
+ }
83
+ const PullToRefresh = ({ onRefresh, children, }) => {
84
+ const ref = useRef(null);
85
+ const loading = usePullToRefresh(ref, onRefresh);
86
+ return (_jsxs("div", Object.assign({ ref: ref, className: "relative" }, { children: [loading && (_jsx("div", Object.assign({ className: "flex w-full justify-center my-4 h-10" }, { children: _jsx(Icon, { name: "loader", className: "animate-spin" }) }))), children] })));
87
+ };
88
+ export { usePullToRefresh, PullToRefresh };
@@ -1 +1 @@
1
- {"version":3,"file":"use-scroll-direction.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-scroll-direction.ts"],"names":[],"mappings":"AAGA,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,kBAAkB,CAAC,SAAS,GAAE,MAAU,GAAG,UAAU,CAqD7D;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAA"}
1
+ {"version":3,"file":"use-scroll-direction.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-scroll-direction.ts"],"names":[],"mappings":"AAGA,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,kBAAkB,CAAC,SAAS,GAAE,MAAY,GAAG,UAAU,CAqD/D;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAA"}
@@ -1,6 +1,6 @@
1
1
  "use client";
2
2
  import { useState, useEffect, useRef, useTransition } from "react";
3
- function useScrollDirection(threshold = 5) {
3
+ function useScrollDirection(threshold = 100) {
4
4
  const [scrollData, setScrollData] = useState({
5
5
  direction: null,
6
6
  scrollY: 0,
@@ -0,0 +1,16 @@
1
+ import * as React from "react";
2
+ import { type VariantProps } from "class-variance-authority";
3
+ declare const favoriteVariants: (props?: ({
4
+ size?: "small" | "large" | null | undefined;
5
+ showBackground?: boolean | null | undefined;
6
+ } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
7
+ export interface FavoriteProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof favoriteVariants> {
8
+ selected?: boolean;
9
+ onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
10
+ icon?: string;
11
+ showBackground?: boolean;
12
+ isAnimated?: boolean;
13
+ }
14
+ declare const Favorite: React.ForwardRefExoticComponent<FavoriteProps & React.RefAttributes<HTMLButtonElement>>;
15
+ export { Favorite, favoriteVariants };
16
+ //# sourceMappingURL=favorite.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"favorite.d.ts","sourceRoot":"","sources":["../../../../components/ui/favorite/favorite.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,gBAAgB;;;mFAkBrB,CAAA;AAED,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AA+ND,QAAA,MAAM,QAAQ,yFAiCb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}
@@ -0,0 +1,156 @@
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 { cva } from "class-variance-authority";
15
+ import { Icon } from "../icon";
16
+ const favoriteVariants = cva("flex p-2 gap-2 rounded-[4px] shadow-buttonColors-primaryShadow active:[&_svg]:text-stateColors-favorites", {
17
+ variants: {
18
+ size: {
19
+ small: "p-2",
20
+ large: "p-3",
21
+ },
22
+ showBackground: {
23
+ true: "bg-coreColors-inputBackground",
24
+ false: "",
25
+ },
26
+ },
27
+ defaultVariants: {
28
+ size: "small",
29
+ showBackground: true,
30
+ },
31
+ });
32
+ const AnimatedHeart = ({ selected, onClick, }) => (_jsxs("div", Object.assign({ onClick: onClick }, { children: [_jsx("style", { children: `* {
33
+ box-sizing: border-box;
34
+ }
35
+
36
+
37
+ svg {
38
+ height: 24px;
39
+ overflow: visible;
40
+ cursor: pointer;
41
+ }
42
+
43
+ label {
44
+ transform: translateX(-2px);
45
+ }
46
+
47
+ input[type="checkbox"] {
48
+ display: none;
49
+ }
50
+
51
+ input[type="checkbox"] + label {
52
+ width: 20px;
53
+ height: 20px;
54
+ position: relative;
55
+ display: grid;
56
+ place-content: center;
57
+ #center-heart {
58
+ #inner {
59
+ fill: ${selected ? "#d91e18ff" : "transparent"};
60
+ transition: 0.2s ease;
61
+ }
62
+ #outer {
63
+ fill: ${selected ? "#d91e18ff" : "white"};
64
+ transition: 0.2s ease;
65
+ }
66
+ }
67
+ #left-hearts > *,
68
+ #right-hearts > * {
69
+ opacity: 0;
70
+ transition: 0.2s ease;
71
+ }
72
+ }
73
+
74
+ input[type="checkbox"]:checked + label {
75
+ cursor: pointer;
76
+ &::before,
77
+ &::after {
78
+ content: "";
79
+ display: grid;
80
+ border-radius: 100%;
81
+ position: absolute;
82
+ outline: 2px solid #d91e18ff;
83
+ height: 24px;
84
+ width: 24px;
85
+ animation: scalePulse 0.5s cubic-bezier(0.12, 0.84, 0.5, 0.44) forwards;
86
+ }
87
+ &::after {
88
+ opacity: 1;
89
+ transform: scale(0);
90
+ animation-delay: 0.2s;
91
+ }
92
+ #center-heart {
93
+ #inner {
94
+ fill: #d91e18ff;
95
+ }
96
+ #outer {
97
+ fill: #d91e18ff;
98
+ }
99
+ }
100
+ #left-hearts > *,
101
+ #right-hearts > * {
102
+ transform-origin: center center;
103
+ animation: floatingHearts 0.65s cubic-bezier(0.12, 0.84, 0.5, 0.44) forwards;
104
+ }
105
+ #right-hearts {
106
+ g:first-child {
107
+ animation-delay: 0.3s;
108
+ }
109
+ g:last-child {
110
+ animation-delay: 0.1s;
111
+ }
112
+ }
113
+ #left-hearts {
114
+ g:first-child {
115
+ animation-delay: 0.2s;
116
+ }
117
+ g:last-child {
118
+ animation-delay: 0.5s;
119
+ }
120
+ }
121
+ @keyframes floatingHearts {
122
+ 0% {
123
+ opacity: 0;
124
+ transform: translateY(10px);
125
+ }
126
+
127
+ 50% {
128
+ opacity: 0.5;
129
+ }
130
+
131
+ 100% {
132
+ opacity: 0;
133
+ transform: translateY(-50px);
134
+ }
135
+ }
136
+
137
+ @keyframes scalePulse {
138
+ from {
139
+ transform: scale(0);
140
+ }
141
+
142
+ to {
143
+ transform: scale(1.1);
144
+ opacity: 0;
145
+ }
146
+ }
147
+ }` }), _jsx("input", { type: "checkbox", id: "like", name: "like", checked: selected, readOnly: true }), _jsx("label", Object.assign({ htmlFor: "like" }, { children: _jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 189.2 87.507", style: { overflow: "visible" } }, { children: _jsxs("g", Object.assign({ id: "hearts", transform: "translate(-787.902 -454.998)" }, { children: [_jsxs("g", Object.assign({ id: "right-hearts" }, { children: [_jsxs("g", Object.assign({ id: "Group_4", "data-name": "Group 4", opacity: "0.484" }, { children: [_jsx("path", { id: "Path_8", "data-name": "Path 8", d: "M36.508,16.436c-3.141,6.041-11.545,14.257-16.3,18.634a1.342,1.342,0,0,1-1.8,0C13.633,30.693,5.229,22.477,2.087,16.436c-6.9-13.29,10.5-22.151,17.21-8.86C26.01-5.715,43.409,3.146,36.508,16.436Z", transform: "translate(936.502 486.145)", fill: "#fff" }), _jsx("path", { id: "Path_9", "data-name": "Path 9", d: "M19.311,37.916a3.836,3.836,0,0,1-2.575-.99l-.013-.012C11.871,32.47,3.229,24.051-.131,17.589A15.428,15.428,0,0,1-2,10.374,12.021,12.021,0,0,1-.282,4.2,11.848,11.848,0,0,1,16.364.456a13.647,13.647,0,0,1,2.934,2.6,13.649,13.649,0,0,1,2.934-2.6A11.848,11.848,0,0,1,38.879,4.2,12.02,12.02,0,0,1,40.6,10.374a15.428,15.428,0,0,1-1.87,7.214A52.812,52.812,0,0,1,30.8,28.07c-3.2,3.482-6.607,6.728-8.9,8.839l-.018.017a3.836,3.836,0,0,1-2.571.99ZM9.864,3.5A6.907,6.907,0,0,0,3.991,6.8c-1.423,2.342-1.311,5.357.315,8.489,1.013,1.948,4.482,7.467,15,17.213,2.172-2.025,5.076-4.836,7.815-7.813a48.2,48.2,0,0,0,7.166-9.4c1.626-3.131,1.738-6.146.315-8.488a6.848,6.848,0,0,0-9.644-2.149A10.185,10.185,0,0,0,21.529,8.7L19.3,13.121,17.066,8.7a10.185,10.185,0,0,0-3.432-4.057A6.906,6.906,0,0,0,9.864,3.5Z", transform: "translate(936.502 486.145)", fill: "#fff" })] })), _jsxs("g", Object.assign({ id: "Group_5", "data-name": "Group 5", opacity: "0.484" }, { children: [_jsx("path", { id: "Path_10", "data-name": "Path 10", d: "M36.508,16.436c-3.141,6.041-11.545,14.257-16.3,18.634a1.342,1.342,0,0,1-1.8,0C13.633,30.693,5.229,22.477,2.087,16.436c-6.9-13.29,10.5-22.151,17.21-8.86C26.01-5.715,43.409,3.146,36.508,16.436Z", transform: "translate(906.04 497.584)", fill: "#d91e18ff" }), _jsx("path", { id: "Path_11", "data-name": "Path 11", d: "M19.311,37.916a3.836,3.836,0,0,1-2.575-.99l-.013-.012C11.871,32.47,3.229,24.051-.131,17.589A15.428,15.428,0,0,1-2,10.374,12.021,12.021,0,0,1-.282,4.2,11.848,11.848,0,0,1,16.364.456a13.647,13.647,0,0,1,2.934,2.6,13.649,13.649,0,0,1,2.934-2.6A11.848,11.848,0,0,1,38.879,4.2,12.02,12.02,0,0,1,40.6,10.374a15.428,15.428,0,0,1-1.87,7.214A52.812,52.812,0,0,1,30.8,28.07c-3.2,3.482-6.607,6.728-8.9,8.839l-.018.017a3.836,3.836,0,0,1-2.571.99ZM9.864,3.5A6.907,6.907,0,0,0,3.991,6.8c-1.423,2.342-1.311,5.357.315,8.489,1.013,1.948,4.482,7.467,15,17.213,2.172-2.025,5.076-4.836,7.815-7.813a48.2,48.2,0,0,0,7.166-9.4c1.626-3.131,1.738-6.146.315-8.488a6.848,6.848,0,0,0-9.644-2.149A10.185,10.185,0,0,0,21.529,8.7L19.3,13.121,17.066,8.7a10.185,10.185,0,0,0-3.432-4.057A6.906,6.906,0,0,0,9.864,3.5Z", transform: "translate(906.04 497.584)", fill: "#d91e18ff" })] }))] })), _jsxs("g", Object.assign({ id: "left-hearts" }, { children: [_jsxs("g", Object.assign({ id: "Group_6", "data-name": "Group 6", opacity: "0.484" }, { children: [_jsx("path", { id: "Path_12", "data-name": "Path 12", d: "M36.508,16.436c-3.141,6.041-11.545,14.257-16.3,18.634a1.342,1.342,0,0,1-1.8,0C13.633,30.693,5.229,22.477,2.087,16.436c-6.9-13.29,10.5-22.151,17.21-8.86C26.01-5.715,43.409,3.146,36.508,16.436Z", transform: "translate(827.502 483.705)", fill: "#fff" }), _jsx("path", { id: "Path_13", "data-name": "Path 13", d: "M19.311,37.916a3.836,3.836,0,0,1-2.575-.99l-.013-.012C11.871,32.47,3.229,24.051-.131,17.589A15.428,15.428,0,0,1-2,10.374,12.021,12.021,0,0,1-.282,4.2,11.848,11.848,0,0,1,16.364.456a13.647,13.647,0,0,1,2.934,2.6,13.649,13.649,0,0,1,2.934-2.6A11.848,11.848,0,0,1,38.879,4.2,12.02,12.02,0,0,1,40.6,10.374a15.428,15.428,0,0,1-1.87,7.214A52.812,52.812,0,0,1,30.8,28.07c-3.2,3.482-6.607,6.728-8.9,8.839l-.018.017a3.836,3.836,0,0,1-2.571.99ZM9.864,3.5A6.907,6.907,0,0,0,3.991,6.8c-1.423,2.342-1.311,5.357.315,8.489,1.013,1.948,4.482,7.467,15,17.213,2.172-2.025,5.076-4.836,7.815-7.813a48.2,48.2,0,0,0,7.166-9.4c1.626-3.131,1.738-6.146.315-8.488a6.848,6.848,0,0,0-9.644-2.149A10.185,10.185,0,0,0,21.529,8.7L19.3,13.121,17.066,8.7a10.185,10.185,0,0,0-3.432-4.057A6.906,6.906,0,0,0,9.864,3.5Z", transform: "translate(827.502 483.705)", fill: "#fff" })] })), _jsxs("g", Object.assign({ id: "Group_7", "data-name": "Group 7", opacity: "0.484" }, { children: [_jsx("path", { id: "Path_14", "data-name": "Path 14", d: "M36.508,16.436c-3.141,6.041-11.545,14.257-16.3,18.634a1.342,1.342,0,0,1-1.8,0C13.633,30.693,5.229,22.477,2.087,16.436c-6.9-13.29,10.5-22.151,17.21-8.86C26.01-5.715,43.409,3.146,36.508,16.436Z", transform: "translate(789.902 456.497)", fill: "#d91e18ff" }), _jsx("path", { id: "Path_15", "data-name": "Path 15", d: "M19.311,37.916a3.836,3.836,0,0,1-2.575-.99l-.013-.012C11.871,32.47,3.229,24.051-.131,17.589A15.428,15.428,0,0,1-2,10.374,12.021,12.021,0,0,1-.282,4.2,11.848,11.848,0,0,1,16.364.456a13.647,13.647,0,0,1,2.934,2.6,13.649,13.649,0,0,1,2.934-2.6A11.848,11.848,0,0,1,38.879,4.2,12.02,12.02,0,0,1,40.6,10.374a15.428,15.428,0,0,1-1.87,7.214A52.812,52.812,0,0,1,30.8,28.07c-3.2,3.482-6.607,6.728-8.9,8.839l-.018.017a3.836,3.836,0,0,1-2.571.99ZM9.864,3.5A6.907,6.907,0,0,0,3.991,6.8c-1.423,2.342-1.311,5.357.315,8.489,1.013,1.948,4.482,7.467,15,17.213,2.172-2.025,5.076-4.836,7.815-7.813a48.2,48.2,0,0,0,7.166-9.4c1.626-3.131,1.738-6.146.315-8.488a6.848,6.848,0,0,0-9.644-2.149A10.185,10.185,0,0,0,21.529,8.7L19.3,13.121,17.066,8.7a10.185,10.185,0,0,0-3.432-4.057A6.906,6.906,0,0,0,9.864,3.5Z", transform: "translate(789.902 456.497)", fill: "#d91e18ff" })] }))] })), _jsxs("g", Object.assign({ id: "center-heart" }, { children: [_jsx("path", { id: "inner", "data-name": "Path 16", d: "M68.82,30.286C62.86,41.748,46.92,57.336,37.9,65.639a2.547,2.547,0,0,1-3.413,0c-9.068-8.3-25.012-23.892-30.972-35.353C-9.578,5.07,23.432-11.741,36.167,13.475,48.9-11.741,81.912,5.07,68.82,30.286Z", transform: "translate(853.502 473.705)", fill: "#d91e18ff" }), _jsx("path", { id: "outer", "data-name": "Path 17", d: "M36.192,68.8a5.038,5.038,0,0,1-3.382-1.3l-.013-.012C28.5,63.55,22.1,57.47,16,50.84,8.968,43.21,4.022,36.682,1.3,31.439A27.058,27.058,0,0,1-2,18.8,20.564,20.564,0,0,1,.934,8.233,20.236,20.236,0,0,1,29.375,1.847a24.62,24.62,0,0,1,6.792,6.728,24.623,24.623,0,0,1,6.791-6.728A20.236,20.236,0,0,1,71.4,8.233,20.562,20.562,0,0,1,74.336,18.8a27.059,27.059,0,0,1-3.3,12.641c-2.723,5.236-7.666,11.763-14.693,19.4C50.32,57.389,43.909,63.5,39.592,67.478l-.018.017A5.038,5.038,0,0,1,36.192,68.8Zm-.029-5.01a.047.047,0,0,0,.057,0c4.247-3.912,10.543-9.916,16.446-16.332C59.4,40.14,64.084,33.976,66.6,29.132a22.135,22.135,0,0,0,2.734-10.306A15.233,15.233,0,0,0,45.688,6.037,21.52,21.52,0,0,0,38.4,14.6l-2.232,4.418L33.935,14.6a21.521,21.521,0,0,0-7.289-8.566A15.231,15.231,0,0,0,3,18.827,22.133,22.133,0,0,0,5.732,29.134c2.522,4.85,7.213,11.014,13.941,18.319,5.982,6.495,12.268,12.465,16.491,16.333Z", transform: "translate(853.502 473.705)", fill: "#d91e18ff" })] }))] })) })) }))] })));
148
+ const Favorite = React.forwardRef((_a, ref) => {
149
+ var { className, size = "small",
150
+ // selected = false,
151
+ onClick, icon = "heart-filled", showBackground = true, isAnimated = true } = _a, props = __rest(_a, ["className", "size", "onClick", "icon", "showBackground", "isAnimated"]);
152
+ const [selected, setSelected] = React.useState(false);
153
+ return (_jsx("div", { children: isAnimated ? (_jsx(AnimatedHeart, { selected: selected, onClick: () => setSelected(true) })) : (_jsx(Icon, { name: icon, color: selected ? "stateColors-favorites" : "stateColors-disabled", size: size === "small" ? "xs" : "sm", onClick: onClick })) }));
154
+ });
155
+ Favorite.displayName = "Favorite";
156
+ export { Favorite, favoriteVariants };
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=favorite.spec.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"favorite.spec.d.ts","sourceRoot":"","sources":["../../../../components/ui/favorite/favorite.spec.tsx"],"names":[],"mappings":""}
@@ -0,0 +1,6 @@
1
+ describe('favorite', () => {
2
+ it('works', () => {
3
+ // test here
4
+ });
5
+ });
6
+ export {};
@@ -0,0 +1,2 @@
1
+ export * from "./favorite";
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/ui/favorite/index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}
@@ -0,0 +1 @@
1
+ export * from "./favorite";
@@ -46,7 +46,7 @@ const Favorite = React.forwardRef((_a, ref) => {
46
46
  layoutType,
47
47
  }), className), style: {
48
48
  borderRadius: `${cornerRadius}px`,
49
- } }, props, { children: _jsx(Icon, { url: iconUrl, color: selected ? "stateColors-favorites" : "stateColors-disabled", size: size === "small" ? "xs" : "sm", fillColor: favoriteFillColor }) })));
49
+ } }, props, { children: _jsx(Icon, { url: iconUrl, color: selected ? "stateColors-favorites" : "stateColors-disabled", size: size === "small" ? "xs" : "sm", fillColor: selected ? favoriteFillColor : "" }) })));
50
50
  });
51
51
  Favorite.displayName = "Favorite";
52
52
  export { Favorite, favoriteVariants };
@@ -93,8 +93,8 @@ const CustomIcon = ({ url, size, strokeColor, fillColor }) => {
93
93
  const paths = svg.querySelectorAll("path");
94
94
  paths.forEach((path) => {
95
95
  path.setAttribute("stroke-width", strokeWidthMapping[size].toString());
96
- fillColor && path.setAttribute("fill", `var(--${fillColor})`);
97
- strokeColor && path.setAttribute("stroke", `var(--${strokeColor})`);
96
+ fillColor && path.setAttribute("fill", fillColor);
97
+ strokeColor && path.setAttribute("stroke", strokeColor);
98
98
  });
99
99
  } }));
100
100
  };
@@ -0,0 +1,39 @@
1
+ import * as React from "react";
2
+ interface SelectProps<T> {
3
+ children: React.ReactElement<{
4
+ value: T;
5
+ onSelect?: () => void;
6
+ isTrigger?: boolean;
7
+ isSelected?: boolean;
8
+ children: ({ isTrigger }: {
9
+ isTrigger: boolean;
10
+ }) => React.ReactNode;
11
+ }>[];
12
+ defaultValue?: T;
13
+ onChange?: (value: T) => void;
14
+ onOpenChange?: (isOpen: boolean) => void;
15
+ onCreateNew?: () => void;
16
+ }
17
+ declare const Select: React.ForwardRefExoticComponent<SelectProps<unknown> & React.RefAttributes<HTMLDivElement>>;
18
+ interface SelectTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
19
+ isTrigger?: boolean;
20
+ children: React.ReactNode;
21
+ }
22
+ declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
23
+ interface SelectContentProps {
24
+ children: React.ReactNode;
25
+ isOpen: boolean;
26
+ className?: string;
27
+ }
28
+ declare const SelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
29
+ interface SelectItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
30
+ onSelect?: () => void;
31
+ isSelected?: boolean;
32
+ isTrigger?: boolean;
33
+ children: React.ReactNode | (({ isTrigger }: {
34
+ isTrigger: boolean;
35
+ }) => React.ReactNode);
36
+ }
37
+ declare const SelectItem: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
38
+ export { Select, SelectTrigger, SelectContent, SelectItem };
39
+ //# sourceMappingURL=select.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../components/ui/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,UAAU,WAAW,CAAC,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;QAC3B,KAAK,EAAE,CAAC,CAAA;QACR,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;QACrB,SAAS,CAAC,EAAE,OAAO,CAAA;QACnB,UAAU,CAAC,EAAE,OAAO,CAAA;QACpB,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,EAAE;YAAE,SAAS,EAAE,OAAO,CAAA;SAAE,KAAK,KAAK,CAAC,SAAS,CAAA;KACrE,CAAC,EAAE,CAAA;IACJ,YAAY,CAAC,EAAE,CAAC,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAA;IAC7B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;CACzB;AAED,QAAA,MAAM,MAAM,6FAwGX,CAAA;AAID,UAAU,kBACR,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,aAAa,8FAiBlB,CAAA;AAGD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,MAAM,EAAE,OAAO,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,aAAa,2FAiBlB,CAAA;AAGD,UAAU,eACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,EACJ,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE;QAAE,SAAS,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAA;CACjE;AAED,QAAA,MAAM,UAAU,wFAmBf,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,CAAA"}
@@ -0,0 +1,87 @@
1
+ "use client";
2
+ var __rest = (this && this.__rest) || function (s, e) {
3
+ var t = {};
4
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
5
+ t[p] = s[p];
6
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
7
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
8
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
9
+ t[p[i]] = s[p[i]];
10
+ }
11
+ return t;
12
+ };
13
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
14
+ import * as React from "react";
15
+ import { ChevronDown } from "lucide-react";
16
+ import { cn } from "../../lib/utils";
17
+ import { CreateNew, Wishlist } from "./wishlist";
18
+ const Select = React.forwardRef(({ children, defaultValue, onChange, onOpenChange, onCreateNew, }, ref) => {
19
+ const [isOpen, setIsOpen] = React.useState(false);
20
+ const [selectedValue, setSelectedValue] = React.useState(defaultValue);
21
+ const triggerRef = React.useRef(null);
22
+ const contentRef = React.useRef(null);
23
+ // useEffect for click outside listener
24
+ React.useEffect(() => {
25
+ const handleClickOutside = (event) => {
26
+ if (isOpen &&
27
+ triggerRef.current &&
28
+ contentRef.current &&
29
+ !triggerRef.current.contains(event.target) &&
30
+ !contentRef.current.contains(event.target)) {
31
+ setIsOpen(false);
32
+ onOpenChange && onOpenChange(false);
33
+ }
34
+ };
35
+ document.addEventListener("mousedown", handleClickOutside);
36
+ return () => {
37
+ document.removeEventListener("mousedown", handleClickOutside);
38
+ };
39
+ }, [isOpen, onOpenChange]);
40
+ const handleSelect = (value) => {
41
+ setSelectedValue(value);
42
+ setIsOpen(false);
43
+ onChange && onChange(value);
44
+ onOpenChange && onOpenChange(false);
45
+ };
46
+ const handleToggle = () => {
47
+ const newIsOpen = !isOpen;
48
+ setIsOpen(newIsOpen);
49
+ onOpenChange && onOpenChange(newIsOpen);
50
+ };
51
+ const handleCreateNew = () => {
52
+ onCreateNew && onCreateNew();
53
+ setIsOpen(false);
54
+ onOpenChange && onOpenChange(false);
55
+ };
56
+ const selectedChild = React.Children.toArray(children).find((child) => React.isValidElement(child) && child.props.value === selectedValue);
57
+ return (_jsxs("div", Object.assign({ className: "relative", ref: ref }, { children: [_jsxs(SelectTrigger, Object.assign({ ref: triggerRef, onClick: handleToggle }, { children: [_jsx(SelectItem, Object.assign({ isTrigger: true }, { children: selectedChild ? (selectedChild.props.children({ isTrigger: true })) : (_jsx(Wishlist, { name: "My Favorites", isTrigger: true })) })), _jsx(ChevronDown, { className: cn("h-4 w-4 opacity-50 mr-4 transition-transform duration-200 ease-in-out", isOpen && "transform rotate-180") })] })), _jsxs(SelectContent, Object.assign({ isOpen: isOpen, ref: contentRef }, { children: [React.Children.map(children, (child) => React.isValidElement(child)
58
+ ? React.cloneElement(child, {
59
+ onSelect: () => handleSelect(child.props.value),
60
+ isSelected: child.props.value === selectedValue,
61
+ }, child.props.children({ isTrigger: false }))
62
+ : child), _jsx("div", Object.assign({ className: "sticky bottom-0 bg-coreColors-inputBackground border-t border-coreColors-dividingLines" }, { children: _jsx(CreateNew, { onClick: handleCreateNew }) }))] }))] })));
63
+ });
64
+ Select.displayName = "Select";
65
+ const SelectTrigger = React.forwardRef((_a, ref) => {
66
+ var { className, children, isTrigger = false } = _a, props = __rest(_a, ["className", "children", "isTrigger"]);
67
+ return (_jsx("button", Object.assign({ ref: ref, className: cn("flex w-full items-center justify-between rounded-md border border-coreColors-brandColorPrimary bg-coreColors-inputBackground text-sm placeholder:text-coreColors-brandColorPrimary disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className), style: {
68
+ WebkitTapHighlightColor: "transparent",
69
+ } }, props, { children: children })));
70
+ });
71
+ SelectTrigger.displayName = "SelectTrigger";
72
+ const SelectContent = React.forwardRef((_a, ref) => {
73
+ var { className, children, isOpen } = _a, props = __rest(_a, ["className", "children", "isOpen"]);
74
+ return (_jsx("div", Object.assign({ ref: ref, className: cn("mt-1 absolute z-50 w-full max-h-[200px] overflow-y-auto rounded-md bg-coreColors-inputBackground shadow-md border border-coreColors-brandColorPrimary", "transition-all duration-300 ease-in-out", isOpen
75
+ ? "opacity-100 translate-y-0"
76
+ : "opacity-0 translate-y-[-10px] pointer-events-none", className) }, props, { children: children })));
77
+ });
78
+ SelectContent.displayName = "SelectContent";
79
+ const SelectItem = React.forwardRef((_a, ref) => {
80
+ var { className, children, onSelect, isSelected, isTrigger } = _a, props = __rest(_a, ["className", "children", "onSelect", "isSelected", "isTrigger"]);
81
+ return (_jsx("div", Object.assign({ ref: ref, className: cn("relative flex w-full cursor-pointer select-none items-center text-sm outline-none", !isTrigger &&
82
+ "border-b border-coreColors-dividingLines last:border-b-0", isSelected && "bg-stateColors-skeleton", className), onClick: onSelect }, props, { children: typeof children === "function"
83
+ ? children({ isTrigger: isTrigger || false })
84
+ : children })));
85
+ });
86
+ SelectItem.displayName = "SelectItem";
87
+ export { Select, SelectTrigger, SelectContent, SelectItem };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tapcart/mobile-components",
3
- "version": "0.6.4",
3
+ "version": "0.6.6",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "style": "dist/styles.css",
@@ -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,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 };