@tapcart/mobile-components 0.2.8 → 0.2.10
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.
- package/dist/components/ThemeProvider.d.ts +3 -0
- package/dist/components/ThemeProvider.d.ts.map +1 -0
- package/dist/components/ThemeProvider.js +18 -0
- package/dist/components/ThemeToggle.d.ts +2 -0
- package/dist/components/ThemeToggle.d.ts.map +1 -0
- package/dist/components/ThemeToggle.js +8 -0
- package/dist/components/hooks/use-infinite-scroll.d.ts.map +1 -1
- package/dist/components/hooks/use-infinite-scroll.js +3 -2
- package/dist/components/ui/button.js +3 -3
- package/dist/components/ui/checkbox.js +1 -1
- package/dist/components/ui/drawer.js +2 -2
- package/dist/components/ui/price.js +2 -2
- package/dist/components/ui/product-card.d.ts +16 -51
- package/dist/components/ui/product-card.d.ts.map +1 -1
- package/dist/components/ui/product-card.js +34 -126
- package/dist/components/ui/product-grid.js +2 -2
- package/dist/components/ui/radio-group.d.ts.map +1 -1
- package/dist/components/ui/radio-group.js +3 -7
- package/dist/components/ui/selectors.js +1 -1
- package/dist/components/ui/tabs.js +1 -1
- package/dist/components/ui/use-toast.d.ts +1 -1
- package/dist/styles.css +17 -24
- package/package.json +2 -1
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,18 @@
|
|
|
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 }), void 0);
|
|
18
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["../../components/ThemeToggle.tsx"],"names":[],"mappings":"AAOA,wBAAgB,WAAW,4CAc1B"}
|
|
@@ -0,0 +1,8 @@
|
|
|
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" }, void 0), _jsx("div", { className: "absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" }, void 0), _jsx("span", Object.assign({ className: "sr-only" }, { children: "Toggle theme" }), void 0)] }), void 0));
|
|
8
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-infinite-scroll.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-infinite-scroll.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"use-infinite-scroll.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-infinite-scroll.ts"],"names":[],"mappings":"AAOA,UAAU,OAAO;IACf,MAAM,EAAE,MAAM,CAAA;CAEf;AAED,UAAU,QAAQ;IAChB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,UAAU,sBAAsB;IAC9B,WAAW,EAAE,QAAQ,EAAE,CAAA;IACvB,gBAAgB,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAA;IACpD,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CACpC;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;CACpB;AAED,QAAA,MAAM,iBAAiB,uDAIpB,sBAAsB,KAAG,uBAkD3B,CAAA;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAA"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use client";
|
|
1
2
|
import { useCallback, useEffect } from "react";
|
|
2
3
|
import useSWRInfinite from "swr/infinite";
|
|
3
4
|
import { useInView } from "react-intersection-observer";
|
|
@@ -13,7 +14,7 @@ const useInfiniteScroll = ({ initialData, loadMoreProducts, queryVariables, }) =
|
|
|
13
14
|
return Object.assign(Object.assign({}, queryVariables), { cursorBlob: previousPageData.cursorBlob });
|
|
14
15
|
};
|
|
15
16
|
const { data, error, size, setSize } = useSWRInfinite(getKey, loadMoreProducts, {
|
|
16
|
-
// @ts-
|
|
17
|
+
// @ts-expect-error
|
|
17
18
|
fallbackData: [initialData],
|
|
18
19
|
revalidateFirstPage: false,
|
|
19
20
|
initialSize: 1,
|
|
@@ -42,7 +43,7 @@ const useInfiniteScroll = ({ initialData, loadMoreProducts, queryVariables, }) =
|
|
|
42
43
|
isEmpty,
|
|
43
44
|
isReachingEnd,
|
|
44
45
|
ref,
|
|
45
|
-
products: data ? data.flatMap((page) => page.products) : [],
|
|
46
|
+
products: data ? data.flatMap((page) => page === null || page === void 0 ? void 0 : page.products) : [],
|
|
46
47
|
};
|
|
47
48
|
};
|
|
48
49
|
export { useInfiniteScroll };
|
|
@@ -17,13 +17,13 @@ import { IconLoader2 } from "@tabler/icons-react";
|
|
|
17
17
|
import { cn } from "../../lib/utils";
|
|
18
18
|
import { Icon } from "./icon";
|
|
19
19
|
import { Text } from "./text";
|
|
20
|
-
const buttonVariants = cva("w-full flex rounded items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:bg-stateColors-disabled disabled:pointer-events-none ring-offset-background overflow-elipse whitespace-nowrap truncate", {
|
|
20
|
+
const buttonVariants = cva("w-full flex rounded items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:bg-stateColors-disabled disabled:outline-stateColors-disabled disabled:pointer-events-none ring-offset-background overflow-elipse whitespace-nowrap truncate", {
|
|
21
21
|
variants: {
|
|
22
22
|
size: {
|
|
23
23
|
default: "py-3 px-4",
|
|
24
24
|
sm: "px-3 rounded-md",
|
|
25
25
|
lg: "px-8 rounded-md",
|
|
26
|
-
icon: "p-
|
|
26
|
+
icon: "p-3 w-auto",
|
|
27
27
|
content: "py-3 px-4 w-auto",
|
|
28
28
|
},
|
|
29
29
|
variant: {
|
|
@@ -47,7 +47,7 @@ const Button = React.forwardRef((_a, ref) => {
|
|
|
47
47
|
var { className, variant, size, asChild = false, loading, icon } = _a, props = __rest(_a, ["className", "variant", "size", "asChild", "loading", "icon"]);
|
|
48
48
|
const Comp = asChild ? Slot : "button";
|
|
49
49
|
const IconButton = () => !loading && size === "icon" && icon ? (_jsx(Icon, { name: icon, size: "sm" }, void 0)) : null;
|
|
50
|
-
const BasicButton = () => (_jsxs(_Fragment, { children: [icon ? (_jsx(Icon, { name: icon, size: variant === "quickadd" ? "xs" : "sm", className: "mr-2" }, void 0)) : null, !loading ? _jsx(Text, Object.assign({ type: "body-primary" }, { children: props.children }), void 0) : _jsx(_Fragment, {}, void 0)] }, void 0));
|
|
50
|
+
const BasicButton = () => (_jsxs(_Fragment, { children: [icon ? (_jsx(Icon, { name: icon, size: variant === "quickadd" ? "xs" : "sm", className: "mr-2" }, void 0)) : null, !loading ? _jsx(Text, Object.assign({ type: "body-primary", className: "truncate" }, { children: props.children }), void 0) : _jsx(_Fragment, {}, void 0)] }, void 0));
|
|
51
51
|
return (_jsx(Comp, Object.assign({ className: cn(buttonVariants({ variant, size, className }), {
|
|
52
52
|
"pointer-events-none": loading,
|
|
53
53
|
}), ref: ref }, props, { children: loading ? (_jsx(IconLoader2, { className: "h-4 w-4 animate-spin" }, void 0)) : size === "icon" ? (_jsx(IconButton, {}, void 0)) : (_jsx(BasicButton, {}, void 0)) }), void 0));
|
|
@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
14
14
|
import * as React from "react";
|
|
15
15
|
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
|
|
16
16
|
import { cva } from "class-variance-authority";
|
|
17
|
-
import { cn } from "
|
|
17
|
+
import { cn } from "@/lib/utils";
|
|
18
18
|
import { Text } from "./text";
|
|
19
19
|
const Check = ({ className }) => (_jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", className: className }, { children: [_jsx("g", Object.assign({ clipPath: "url(#clip0_1465_24)" }, { children: _jsx("path", { d: "M5.667 21H5.66695C4.98414 21 4.32733 20.7382 3.83183 20.2684C3.33941 19.8015 3.04358 19.1646 3.00429 18.4875L3 18.3202V5.667C3 4.24616 4.11102 3.08465 5.51221 3.0043L5.67982 3H18.333C19.7538 3 20.9153 4.11101 20.9957 5.51219L21 5.67983V18.333C21 19.7538 19.889 20.9153 18.4878 20.9957L18.3202 21H5.667ZM16.4141 8.58593L16.414 8.58579C16.0389 8.21085 15.5303 8.00021 15 8.00021C14.4697 8.00021 13.9611 8.21085 13.586 8.58579L10.9998 11.1712L10.4138 10.5856L10.392 10.5638L10.3689 10.5434L10.2749 10.4604L10.2505 10.4388L10.2247 10.4189C9.82271 10.1081 9.31749 9.96192 8.81164 10.0101C8.3058 10.0583 7.83726 10.2972 7.50119 10.6783C7.16512 11.0595 6.98673 11.5542 7.00224 12.0621C7.01775 12.57 7.226 13.053 7.58469 13.4129L7.58589 13.4141L9.58589 15.4141L9.60784 15.4361L9.63111 15.4566L9.72511 15.5396L9.74895 15.5607L9.77407 15.5801C10.1589 15.8786 10.6394 16.0265 11.1254 15.9959C11.6115 15.9654 12.0697 15.7585 12.4141 15.4141L12.4141 15.4141L16.4141 11.4141L16.4361 11.3922L16.4566 11.3689L16.5396 11.2749L16.5607 11.2511L16.5801 11.2259C16.8786 10.8411 17.0265 10.3606 16.9959 9.87457C16.9654 9.38851 16.7585 8.93031 16.4141 8.58593Z", fill: "currentColor", stroke: "currentColor", strokeWidth: "2" }, void 0) }), void 0), _jsx("defs", { children: _jsx("clipPath", Object.assign({ id: "clip0_1465_24" }, { children: _jsx("rect", { width: "24", height: "24", fill: "white" }, void 0) }), void 0) }, void 0)] }), void 0));
|
|
20
20
|
const Unchecked = ({ className }) => (_jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", className: className }, { children: [_jsx("g", Object.assign({ clipPath: "url(#clip0_1465_32)" }, { children: _jsx("path", { d: "M3 5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, void 0) }), void 0), _jsx("defs", { children: _jsx("clipPath", Object.assign({ id: "clip0_1465_32" }, { children: _jsx("rect", { width: "24", height: "24", fill: "white" }, void 0) }), void 0) }, void 0)] }), void 0));
|
|
@@ -13,8 +13,8 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
13
13
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
14
|
import * as React from "react";
|
|
15
15
|
import { Drawer as DrawerPrimitive } from "vaul";
|
|
16
|
-
import { cn } from "
|
|
17
|
-
import { Icon } from "
|
|
16
|
+
import { cn } from "@/lib/utils";
|
|
17
|
+
import { Icon } from "@/components/ui/icon";
|
|
18
18
|
const DrawerTrigger = DrawerPrimitive.Trigger;
|
|
19
19
|
const DrawerPortal = DrawerPrimitive.Portal;
|
|
20
20
|
const DrawerClose = DrawerPrimitive.Close;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { Money } from "
|
|
3
|
-
import { Text } from "
|
|
2
|
+
import { Money } from "@/components/ui/money";
|
|
3
|
+
import { Text } from "@/components/ui/text";
|
|
4
4
|
function Price({ price, priceHigh, priceRanges = false, isSale = false, compareAtPrice, compareAtPriceHigh, currency = "USD", locale = "en-US", }) {
|
|
5
5
|
return (_jsx(_Fragment, { children: priceRanges ? (_jsx(_Fragment, { children: isSale && compareAtPrice !== undefined && compareAtPriceHigh !== undefined ? (_jsxs("div", Object.assign({ className: "flex flex-wrap" }, { children: [_jsx(Text, Object.assign({ className: "text-textColors-salePriceText flex-shrink-0" }, { children: _jsxs("span", Object.assign({ className: "mr-2" }, { children: [_jsx(Money, { price: price, currency: currency, locale: locale }, void 0), " - ", priceHigh !== undefined &&
|
|
6
6
|
_jsx(Money, { price: priceHigh, currency: currency, locale: locale }, void 0)] }), void 0) }), void 0), _jsxs(Text, Object.assign({ className: "line-through text-textColors-strikethroughPriceText flex-shrink-0" }, { children: [_jsx(Money, { price: compareAtPrice, currency: currency, locale: locale }, void 0), " - ", _jsx(Money, { price: compareAtPriceHigh, currency: currency, locale: locale }, void 0)] }), void 0)] }), void 0)) : (_jsxs(Text, Object.assign({ className: "text-textColors-priceText" }, { children: [_jsx(Money, { price: price, currency: currency, locale: locale }, void 0), " - ", priceHigh !== undefined &&
|
|
@@ -1,67 +1,32 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
export declare type Config = {
|
|
3
|
-
gridLayout?: string;
|
|
4
|
-
productImage?: {
|
|
5
|
-
enabled: boolean;
|
|
6
|
-
cornerRadius: number;
|
|
7
|
-
aspectRatio: "1:1" | "2:3" | "4:5";
|
|
8
|
-
scaling: "fill" | "fit";
|
|
9
|
-
};
|
|
10
|
-
price?: {
|
|
11
|
-
enabled: boolean;
|
|
12
|
-
fontSize: number;
|
|
13
|
-
textAlignment: string;
|
|
14
|
-
currency: string;
|
|
15
|
-
locale: string;
|
|
16
|
-
};
|
|
17
|
-
productTitle?: {
|
|
18
|
-
enabled: boolean;
|
|
19
|
-
fontSize: number;
|
|
20
|
-
uppercase: boolean;
|
|
21
|
-
textAlignment: string;
|
|
22
|
-
wrapText: boolean;
|
|
23
|
-
};
|
|
24
|
-
quickAdd?: {
|
|
25
|
-
enabled: boolean;
|
|
26
|
-
fontSize: number;
|
|
27
|
-
uppercase: boolean;
|
|
28
|
-
textAlignment: string;
|
|
29
|
-
cornerRadius: number;
|
|
30
|
-
quickAdd: (event: React.MouseEvent<HTMLButtonElement>, product: ProductCardProps["product"]) => void;
|
|
31
|
-
};
|
|
32
|
-
badge?: {
|
|
33
|
-
text: string;
|
|
34
|
-
verticalPosition: "top" | "bottom" | "below";
|
|
35
|
-
horizontalPosition: "left" | "right" | "full-width";
|
|
36
|
-
icon: string;
|
|
37
|
-
};
|
|
38
|
-
favoritesIcon?: {
|
|
39
|
-
enabled: boolean;
|
|
40
|
-
layoutType: "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "default";
|
|
41
|
-
showBackground: boolean;
|
|
42
|
-
cornerRadius: number;
|
|
43
|
-
icon: string;
|
|
44
|
-
size: "small" | "large" | null | undefined;
|
|
45
|
-
};
|
|
46
|
-
};
|
|
47
2
|
declare type ProductCardProps = {
|
|
48
|
-
config: Config;
|
|
49
3
|
product: {
|
|
50
4
|
variants: {
|
|
51
5
|
compare_at_price: number | undefined;
|
|
52
6
|
price: number;
|
|
53
7
|
}[];
|
|
54
8
|
images: {
|
|
55
|
-
|
|
9
|
+
src: string;
|
|
56
10
|
}[];
|
|
57
11
|
title: string;
|
|
58
12
|
tags: string[];
|
|
59
|
-
availableForSale: boolean;
|
|
60
|
-
openProduct: (event: React.MouseEvent<HTMLDivElement>, product: ProductCardProps["product"]) => void;
|
|
61
13
|
};
|
|
14
|
+
className: string;
|
|
15
|
+
scaling: "fit" | "fill";
|
|
16
|
+
isQuickAddProductEnabled: boolean;
|
|
62
17
|
isLoading: boolean;
|
|
63
|
-
|
|
64
|
-
|
|
18
|
+
badge?: {
|
|
19
|
+
text: string;
|
|
20
|
+
variant: "secondary" | "default" | "destructive" | "outline" | null | undefined;
|
|
21
|
+
className?: string;
|
|
22
|
+
position: "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
|
|
23
|
+
};
|
|
24
|
+
icon?: {
|
|
25
|
+
name: string;
|
|
26
|
+
position: "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
|
|
27
|
+
};
|
|
28
|
+
quickAdd: (event: React.MouseEvent<HTMLButtonElement>, product: ProductCardProps["product"]) => void;
|
|
29
|
+
openProduct: (event: React.MouseEvent<HTMLDivElement>, product: ProductCardProps["product"]) => void;
|
|
65
30
|
};
|
|
66
31
|
declare const ProductCard: React.FC<ProductCardProps>;
|
|
67
32
|
export { ProductCard };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"product-card.d.ts","sourceRoot":"","sources":["../../../components/ui/product-card.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"product-card.d.ts","sourceRoot":"","sources":["../../../components/ui/product-card.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,aAAK,gBAAgB,GAAG;IACtB,OAAO,EAAE;QACP,QAAQ,EAAE;YAAE,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,EAAE,CAAC;QACpE,MAAM,EAAE;YAAE,GAAG,EAAE,MAAM,CAAA;SAAE,EAAE,CAAC;QAC1B,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,EAAE,CAAC;KAChB,CAAC;IACF,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,KAAK,GAAG,MAAM,CAAC;IACxB,wBAAwB,EAAE,OAAO,CAAC;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,WAAW,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,GAAG,IAAI,GAAG,SAAS,CAAC;QAChF,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,SAAS,GAAG,UAAU,GAAG,YAAY,GAAG,aAAa,CAAC;KACjE,CAAC;IACF,IAAI,CAAC,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,SAAS,GAAG,UAAU,GAAG,YAAY,GAAG,aAAa,CAAC;KACjE,CAAA;IACD,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAAE,OAAO,EAAE,gBAAgB,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC;IACrG,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,EAAE,OAAO,EAAE,gBAAgB,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC;CACtG,CAAC;AAuBF,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAkE3C,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
|
|
@@ -1,132 +1,40 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { Badge } from "
|
|
4
|
-
import { Button } from "
|
|
5
|
-
import { Text } from "
|
|
6
|
-
import
|
|
7
|
-
import {
|
|
8
|
-
import { Skeleton } from "
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
left: "left-0",
|
|
33
|
-
right: "right-0",
|
|
34
|
-
"full-width": "",
|
|
35
|
-
},
|
|
36
|
-
verticalPosition: {
|
|
37
|
-
top: "top-0 mt-2",
|
|
38
|
-
bottom: "bottom-0 mb-2",
|
|
39
|
-
},
|
|
40
|
-
},
|
|
41
|
-
});
|
|
42
|
-
const favoriteVariants = cva("absolute ", {
|
|
43
|
-
variants: {
|
|
44
|
-
iconPosition: {
|
|
45
|
-
topLeft: "top-0 left-2 mt-2",
|
|
46
|
-
topRight: "top-0 right-2 mt-2",
|
|
47
|
-
bottomLeft: "bottom-0 left-2 mb-2",
|
|
48
|
-
bottomRight: "bottom-0 right-2 mb-2",
|
|
49
|
-
default: "",
|
|
50
|
-
},
|
|
51
|
-
badgeHorizontalPosition: {
|
|
52
|
-
left: "",
|
|
53
|
-
right: "",
|
|
54
|
-
"full-width": "",
|
|
55
|
-
},
|
|
56
|
-
badgeVerticalPosition: {
|
|
57
|
-
top: "",
|
|
58
|
-
bottom: "",
|
|
59
|
-
below: "",
|
|
60
|
-
},
|
|
61
|
-
},
|
|
62
|
-
compoundVariants: [
|
|
63
|
-
{
|
|
64
|
-
iconPosition: "topLeft",
|
|
65
|
-
badgeHorizontalPosition: ["left", "full-width"],
|
|
66
|
-
badgeVerticalPosition: "top",
|
|
67
|
-
class: "top-10",
|
|
68
|
-
},
|
|
69
|
-
{
|
|
70
|
-
iconPosition: "topRight",
|
|
71
|
-
badgeHorizontalPosition: ["right", "full-width"],
|
|
72
|
-
badgeVerticalPosition: "top",
|
|
73
|
-
class: "top-10",
|
|
74
|
-
},
|
|
75
|
-
{
|
|
76
|
-
iconPosition: "bottomLeft",
|
|
77
|
-
badgeHorizontalPosition: ["left", "full-width"],
|
|
78
|
-
badgeVerticalPosition: "bottom",
|
|
79
|
-
class: "bottom-10",
|
|
80
|
-
},
|
|
81
|
-
{
|
|
82
|
-
iconPosition: "bottomRight",
|
|
83
|
-
badgeHorizontalPosition: ["right", "full-width"],
|
|
84
|
-
badgeVerticalPosition: "bottom",
|
|
85
|
-
class: "bottom-10",
|
|
86
|
-
},
|
|
87
|
-
],
|
|
88
|
-
defaultVariants: {
|
|
89
|
-
iconPosition: "default",
|
|
90
|
-
},
|
|
91
|
-
});
|
|
92
|
-
const ProductCard = ({ config, product, isLoading, favorited, onFavoriteClick, }) => {
|
|
93
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
94
|
-
const { variants: [variant], images: [{ url }], title, tags, } = product;
|
|
95
|
-
const [isSelected, setIsSelected] = React.useState(false);
|
|
96
|
-
const handleFavoriteClick = () => {
|
|
97
|
-
setIsSelected((prevState) => !prevState);
|
|
98
|
-
};
|
|
99
|
-
const iconPosition = ((_a = config.favoritesIcon) === null || _a === void 0 ? void 0 : _a.layoutType) || "default";
|
|
3
|
+
import { Badge } from "@/components/ui/badge";
|
|
4
|
+
import { Button } from "@/components/ui/button";
|
|
5
|
+
import { Text } from "@/components/ui/text";
|
|
6
|
+
import { Price } from "@/components/ui/price";
|
|
7
|
+
import { Icon } from "@/components/ui/icon";
|
|
8
|
+
import { Skeleton } from "@/components/ui/skeleton";
|
|
9
|
+
const positionClasses = {
|
|
10
|
+
topLeft: "absolute top-0 left-0 mt-2",
|
|
11
|
+
topRight: "absolute top-0 right-0 mt-2",
|
|
12
|
+
bottomLeft: "absolute bottom-0 left-0 mb-2",
|
|
13
|
+
bottomRight: "absolute bottom-0 right-0 mb-2",
|
|
14
|
+
};
|
|
15
|
+
var BadgeAlignment;
|
|
16
|
+
(function (BadgeAlignment) {
|
|
17
|
+
BadgeAlignment["Left"] = "left";
|
|
18
|
+
BadgeAlignment["Right"] = "right";
|
|
19
|
+
BadgeAlignment["FullWidth"] = "full-width";
|
|
20
|
+
})(BadgeAlignment || (BadgeAlignment = {}));
|
|
21
|
+
const badgeAlignmentClasses = {
|
|
22
|
+
topLeft: BadgeAlignment.Left,
|
|
23
|
+
topRight: BadgeAlignment.Right,
|
|
24
|
+
bottomLeft: BadgeAlignment.Left,
|
|
25
|
+
bottomRight: BadgeAlignment.Right,
|
|
26
|
+
};
|
|
27
|
+
const ProductCard = ({ product, scaling, className, badge, icon, quickAdd, openProduct, isQuickAddProductEnabled, isLoading, }) => {
|
|
28
|
+
const { variants: [variant], images: [{ src }], title } = product;
|
|
29
|
+
const badgePosition = (badge === null || badge === void 0 ? void 0 : badge.position) || "topRight";
|
|
30
|
+
const iconPosition = (icon === null || icon === void 0 ? void 0 : icon.position) || "bottomRight";
|
|
31
|
+
const scalingClass = scaling === "fit" ? "object-contain" : "object-cover";
|
|
100
32
|
if (isLoading) {
|
|
101
|
-
return (_jsxs("div", Object.assign({ className: "w-1/2
|
|
33
|
+
return (_jsxs("div", Object.assign({ className: "w-1/2" }, { children: [_jsx(Skeleton, { className: "w-full h-64" }, void 0), _jsx(Skeleton, { className: "h-6 w-1/2 mt-2" }, void 0), _jsx(Skeleton, { className: "h-6 w-3/4 mt-2" }, void 0)] }), void 0));
|
|
102
34
|
}
|
|
103
|
-
return (
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
aspectRatio: (_c = config.productImage) === null || _c === void 0 ? void 0 : _c.aspectRatio,
|
|
108
|
-
scaling: config.productImage.scaling,
|
|
109
|
-
})), src: url, onClick: (e) => product.openProduct(e, product) }, void 0), config.badge &&
|
|
110
|
-
tags.includes(config.badge.text) &&
|
|
111
|
-
config.badge.verticalPosition !== "below" && (_jsx(Badge, Object.assign({ size: "plp-layout", className: cn(badgeVariants({
|
|
112
|
-
verticalPosition: config.badge.verticalPosition,
|
|
113
|
-
horizontalPosition: config.badge.horizontalPosition,
|
|
114
|
-
})), alignment: config.badge.horizontalPosition, icon: config.badge.icon }, { children: config.badge.text }), void 0)), ((_d = config.favoritesIcon) === null || _d === void 0 ? void 0 : _d.enabled) && iconPosition !== "default" && (_jsx(Favorite, { className: cn(favoriteVariants({
|
|
115
|
-
iconPosition,
|
|
116
|
-
badgeHorizontalPosition: (_e = config === null || config === void 0 ? void 0 : config.badge) === null || _e === void 0 ? void 0 : _e.horizontalPosition,
|
|
117
|
-
badgeVerticalPosition: (_f = config === null || config === void 0 ? void 0 : config.badge) === null || _f === void 0 ? void 0 : _f.verticalPosition,
|
|
118
|
-
})), selected: favorited, onClick: onFavoriteClick || handleFavoriteClick }, void 0))] }), void 0)), ((_g = config.quickAdd) === null || _g === void 0 ? void 0 : _g.enabled) && (_jsx(Button, Object.assign({ className: "outline-0", style: {
|
|
119
|
-
borderBottomLeftRadius: `${config.quickAdd.cornerRadius}px`,
|
|
120
|
-
borderBottomRightRadius: `${config.quickAdd.cornerRadius}px`,
|
|
121
|
-
}, variant: "quickadd", size: "default", onClick: (e) => {
|
|
122
|
-
var _a;
|
|
123
|
-
e.stopPropagation();
|
|
124
|
-
(_a = config.quickAdd) === null || _a === void 0 ? void 0 : _a.quickAdd(e, product);
|
|
125
|
-
} }, { children: "+ Quick add" }), void 0)), _jsxs("div", Object.assign({ className: "mt-2 w-full flex-col justify-start items-start gap-1 inline-flex" }, { children: [config.badge &&
|
|
126
|
-
tags.includes(config.badge.text) &&
|
|
127
|
-
config.badge.verticalPosition === "below" && (_jsx("div", Object.assign({ className: `w-full flex ${config.badge.horizontalPosition === "right"
|
|
128
|
-
? "justify-end"
|
|
129
|
-
: "justify-start"}` }, { children: _jsx(Badge, Object.assign({ size: "plp-layout", alignment: config.badge.horizontalPosition, icon: config.badge.icon, className: "rounded" }, { children: config.badge.text }), void 0) }), void 0)), _jsxs("div", Object.assign({ className: "flex w-full justify-between items-center gap-2" }, { children: [((_h = config.price) === null || _h === void 0 ? void 0 : _h.enabled) && (_jsx(Price, { price: variant.price, isSale: !!variant.compare_at_price, compareAtPrice: variant.compare_at_price, currency: config.price.currency, locale: config.price.locale }, void 0)), _jsx("div", Object.assign({ className: "w-8 h-8 flex items-center justify-center" }, { children: ((_j = config.favoritesIcon) === null || _j === void 0 ? void 0 : _j.enabled) &&
|
|
130
|
-
config.favoritesIcon.layoutType === "default" && (_jsx(Favorite, { selected: isSelected, onClick: handleFavoriteClick, size: "small" }, void 0)) }), void 0)] }), void 0), ((_k = config.productTitle) === null || _k === void 0 ? void 0 : _k.enabled) && (_jsx("div", { children: _jsx(Text, Object.assign({ type: "body-secondary", className: "text-textColors-productTitle" }, { children: title }), void 0) }, void 0))] }), void 0)] }, void 0) }, void 0));
|
|
35
|
+
return (_jsxs("div", Object.assign({ className: "w-1/2" }, { children: [_jsxs("div", Object.assign({ className: "relative" }, { children: [_jsx("img", { className: `w-full h-full ${scalingClass} ${isQuickAddProductEnabled ? "rounded-t-lg rounded-b-none" : "rounded-lg"}`, src: src }, void 0), badge && (_jsx(Badge, Object.assign({ size: "plp-layout", icon: "currency-dollar", className: positionClasses[badgePosition], alignment: badgeAlignmentClasses[badgePosition] }, { children: badge.text }), void 0)), icon && (_jsx(Icon, { name: "HeartFilled", className: positionClasses[iconPosition], color: "stateColors-favorites" }, void 0))] }), void 0), isQuickAddProductEnabled && (_jsx(Button, Object.assign({ variant: "quickadd", size: "sm", onClick: (e) => {
|
|
36
|
+
e.stopPropagation();
|
|
37
|
+
quickAdd(e, product);
|
|
38
|
+
} }, { children: "+ Quick add" }), void 0)), _jsx(Price, { price: variant.price, isSale: !!variant.compare_at_price, compareAtPrice: variant.compare_at_price, currency: "USD", locale: "en-US" }, void 0), _jsx(Text, Object.assign({ className: "text-textColors-productTitle" }, { children: title }), void 0)] }), void 0));
|
|
131
39
|
};
|
|
132
40
|
export { ProductCard };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useInfiniteScroll } from "
|
|
3
|
+
import { useInfiniteScroll } from "@/components/hooks/use-infinite-scroll";
|
|
4
4
|
import { ProductCard } from "./product-card";
|
|
5
5
|
const Loader = () => (_jsx("div", Object.assign({ className: "grid-cols-2 lg:grid-cols-3" }, { children: Array(4)
|
|
6
6
|
.fill(0)
|
|
@@ -16,7 +16,7 @@ function ProductGrid({ loadMoreProducts, initialData, queryVariables, config, })
|
|
|
16
16
|
if (isLoadingInitialData)
|
|
17
17
|
return _jsx(Loader, {}, void 0);
|
|
18
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-
|
|
19
|
+
// @ts-expect-error
|
|
20
20
|
product: product, config: config, isLoading: false }, product.handle))) }), void 0), isLoadingMore ? _jsx(Loader, {}, void 0) : _jsx("div", { ref: ref }, void 0)] }, void 0));
|
|
21
21
|
}
|
|
22
22
|
export { ProductGrid };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../components/ui/radio-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAElE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,UAAU,+JAWd,CAAA;AAGF,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,QAAA,MAAM,sBAAsB;;mFAc3B,CAAA;
|
|
1
|
+
{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../components/ui/radio-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAElE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,UAAU,+JAWd,CAAA;AAGF,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,QAAA,MAAM,sBAAsB;;mFAc3B,CAAA;AAuCD,QAAA,MAAM,cAAc;;8HA6FnB,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,sBAAsB,EAAE,CAAA"}
|
|
@@ -14,12 +14,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
|
14
14
|
import * as React from "react";
|
|
15
15
|
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
|
|
16
16
|
import { cva } from "class-variance-authority";
|
|
17
|
-
import { cn } from "
|
|
17
|
+
import { cn } from "@/lib/utils";
|
|
18
18
|
import { Icon } from "./icon";
|
|
19
19
|
import { Text } from "./text";
|
|
20
20
|
const RadioGroup = React.forwardRef((_a, ref) => {
|
|
21
21
|
var { className } = _a, props = __rest(_a, ["className"]);
|
|
22
|
-
return (_jsx(RadioGroupPrimitive.Root, Object.assign({ className: cn("grid gap-
|
|
22
|
+
return (_jsx(RadioGroupPrimitive.Root, Object.assign({ className: cn("grid gap-4", className) }, props, { ref: ref }), void 0));
|
|
23
23
|
});
|
|
24
24
|
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
|
|
25
25
|
const radiogroupItemVariants = cva("grid grid-cols-[auto,auto,1fr] gap-2 items-start group", {
|
|
@@ -34,11 +34,7 @@ const radiogroupItemVariants = cva("grid grid-cols-[auto,auto,1fr] gap-2 items-s
|
|
|
34
34
|
variant: "default",
|
|
35
35
|
},
|
|
36
36
|
});
|
|
37
|
-
const RadioGroupItemLabels = ({ key, label, numberAmount, subtext }) => (_jsxs("div", Object.assign({ className: "col-span-2" }, { children: [_jsxs("div", Object.assign({ className: "flex flex-row items-start
|
|
38
|
-
_jsx(Text, Object.assign({ type: "body-primary", className: "text-textColors-secondaryColor group-disabled:text-stateColors-disabled" }, { children: `(${numberAmount})` }), void 0)
|
|
39
|
-
: null] }), void 0), subtext ?
|
|
40
|
-
_jsx(Text, Object.assign({ type: "body-secondary", className: "group-disabled:text-stateColors-disabled" }, { children: subtext }), void 0)
|
|
41
|
-
: null] }), void 0));
|
|
37
|
+
const RadioGroupItemLabels = ({ key, label, numberAmount, subtext, }) => (_jsxs("div", Object.assign({ className: "col-span-2" }, { children: [_jsxs("div", Object.assign({ className: "flex flex-row items-start" }, { children: [_jsx(Text, Object.assign({ type: "body-primary", className: "group-disabled:text-stateColors-disabled mr-2" }, { children: label }), void 0), numberAmount ? (_jsx(Text, Object.assign({ type: "body-primary", className: "text-textColors-secondaryColor group-disabled:text-stateColors-disabled" }, { children: `(${numberAmount})` }), void 0)) : null] }), void 0), subtext ? (_jsx(Text, Object.assign({ type: "body-secondary", className: "group-disabled:text-stateColors-disabled mt-2" }, { children: subtext }), void 0)) : null] }), void 0));
|
|
42
38
|
const RadioGroupItem = React.forwardRef((_a, ref) => {
|
|
43
39
|
var { value, label = "", subtext, numberAmount = 0, onSelect, onClick, selected = false, className, variant = "default", key } = _a, props = __rest(_a, ["value", "label", "subtext", "numberAmount", "onSelect", "onClick", "selected", "className", "variant", "key"]);
|
|
44
40
|
return (_jsx("div", Object.assign({ className: cn(radiogroupItemVariants({ variant }), className) }, { children: variant === "deactivated" ? (_jsxs(_Fragment, { children: [_jsx(Icon, { name: "circle-off", size: "md", className: "text-stateColors-disabled" }, void 0), _jsx(RadioGroupItemLabels, { label: label, numberAmount: numberAmount, subtext: subtext }, key)] }, void 0)) : (_jsx(RadioGroupPrimitive.Item, Object.assign({ ref: ref, value: value, onSelect: onSelect, checked: selected, onClick: onClick, className: cn("flex items-center justify-center", className) }, props, { children: selected || variant === "selected" ? (_jsxs("div", Object.assign({ className: "grid grid-cols-[auto,auto,1fr] gap-2 items-start group" }, { children: [_jsx(Icon, { name: "circle-dot-filled", size: "md", className: "text-coreColors-brandColorPrimary z-10" }, void 0), _jsx(RadioGroupItemLabels, { label: label, numberAmount: numberAmount, subtext: subtext }, key)] }), void 0)) : (_jsxs("div", Object.assign({ className: "grid grid-cols-[auto,auto,1fr] gap-2 items-start group" }, { children: [_jsxs("div", Object.assign({ className: "grid" }, { children: [_jsx(RadioGroupPrimitive.Indicator, Object.assign({ className: "flex items-center justify-center col-start-1 row-start-1" }, { children: _jsx(Icon, { name: "circle-dot-filled", size: "md", className: "text-coreColors-brandColorPrimary z-10" }, void 0) }), void 0), _jsx("div", Object.assign({ className: "flex items-center justify-center col-start-1 row-start-1" }, { children: _jsx(Icon, { name: "circle", size: "md", className: "col-start-1 row-start-1 text-coreColors-secondaryIcon items-center z-1" }, void 0) }), void 0)] }), void 0), _jsx(RadioGroupItemLabels, { label: label, numberAmount: numberAmount, subtext: subtext }, key)] }), void 0)) }), void 0)) }), void 0));
|
|
@@ -13,7 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
13
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
14
|
import * as React from "react";
|
|
15
15
|
import { cva } from "class-variance-authority";
|
|
16
|
-
import { cn } from "
|
|
16
|
+
import { cn } from "@/lib/utils";
|
|
17
17
|
import { Text } from "./text";
|
|
18
18
|
const selectorsVariants = cva("flex py-2 px-4 whitespace-nowrap bg-coreColors-pageColor flex-row justify-center outline outline-1 rounded text-textColors-primaryColor outline-coreColors-dividingLines items-center", {
|
|
19
19
|
variants: {
|
|
@@ -13,7 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
13
13
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
14
14
|
import * as React from "react";
|
|
15
15
|
import { cva } from "class-variance-authority";
|
|
16
|
-
import { cn } from "
|
|
16
|
+
import { cn } from "@/lib/utils";
|
|
17
17
|
import { Text } from "./text";
|
|
18
18
|
const tabVariants = cva("flex items-center justify-center px-4 py-2 w-full", {
|
|
19
19
|
variants: {
|
package/dist/styles.css
CHANGED
|
@@ -667,9 +667,6 @@ video {
|
|
|
667
667
|
.bottom-0 {
|
|
668
668
|
bottom: 0px;
|
|
669
669
|
}
|
|
670
|
-
.bottom-10 {
|
|
671
|
-
bottom: 2.5rem;
|
|
672
|
-
}
|
|
673
670
|
.end-4 {
|
|
674
671
|
inset-inline-end: 1rem;
|
|
675
672
|
}
|
|
@@ -679,9 +676,6 @@ video {
|
|
|
679
676
|
.left-1\/2 {
|
|
680
677
|
left: 50%;
|
|
681
678
|
}
|
|
682
|
-
.left-2 {
|
|
683
|
-
left: 0.5rem;
|
|
684
|
-
}
|
|
685
679
|
.left-\[50\%\] {
|
|
686
680
|
left: 50%;
|
|
687
681
|
}
|
|
@@ -700,9 +694,6 @@ video {
|
|
|
700
694
|
.top-1\/2 {
|
|
701
695
|
top: 50%;
|
|
702
696
|
}
|
|
703
|
-
.top-10 {
|
|
704
|
-
top: 2.5rem;
|
|
705
|
-
}
|
|
706
697
|
.top-2 {
|
|
707
698
|
top: 0.5rem;
|
|
708
699
|
}
|
|
@@ -791,9 +782,6 @@ video {
|
|
|
791
782
|
.aspect-\[2\/3\] {
|
|
792
783
|
aspect-ratio: 2/3;
|
|
793
784
|
}
|
|
794
|
-
.aspect-\[4\/5\] {
|
|
795
|
-
aspect-ratio: 4/5;
|
|
796
|
-
}
|
|
797
785
|
.aspect-square {
|
|
798
786
|
aspect-ratio: 1 / 1;
|
|
799
787
|
}
|
|
@@ -872,6 +860,9 @@ video {
|
|
|
872
860
|
.w-2\.5 {
|
|
873
861
|
width: 0.625rem;
|
|
874
862
|
}
|
|
863
|
+
.w-3\/4 {
|
|
864
|
+
width: 75%;
|
|
865
|
+
}
|
|
875
866
|
.w-4 {
|
|
876
867
|
width: 1rem;
|
|
877
868
|
}
|
|
@@ -1009,12 +1000,6 @@ video {
|
|
|
1009
1000
|
.items-center {
|
|
1010
1001
|
align-items: center;
|
|
1011
1002
|
}
|
|
1012
|
-
.justify-start {
|
|
1013
|
-
justify-content: flex-start;
|
|
1014
|
-
}
|
|
1015
|
-
.justify-end {
|
|
1016
|
-
justify-content: flex-end;
|
|
1017
|
-
}
|
|
1018
1003
|
.justify-center {
|
|
1019
1004
|
justify-content: center;
|
|
1020
1005
|
}
|
|
@@ -1085,6 +1070,9 @@ video {
|
|
|
1085
1070
|
.rounded-full {
|
|
1086
1071
|
border-radius: 9999px;
|
|
1087
1072
|
}
|
|
1073
|
+
.rounded-lg {
|
|
1074
|
+
border-radius: var(--radius);
|
|
1075
|
+
}
|
|
1088
1076
|
.rounded-md {
|
|
1089
1077
|
border-radius: calc(var(--radius) - 2px);
|
|
1090
1078
|
}
|
|
@@ -1098,10 +1086,18 @@ video {
|
|
|
1098
1086
|
border-bottom-right-radius: var(--radius);
|
|
1099
1087
|
border-bottom-left-radius: var(--radius);
|
|
1100
1088
|
}
|
|
1089
|
+
.rounded-b-none {
|
|
1090
|
+
border-bottom-right-radius: 0px;
|
|
1091
|
+
border-bottom-left-radius: 0px;
|
|
1092
|
+
}
|
|
1101
1093
|
.rounded-t-2xl {
|
|
1102
1094
|
border-top-left-radius: 1rem;
|
|
1103
1095
|
border-top-right-radius: 1rem;
|
|
1104
1096
|
}
|
|
1097
|
+
.rounded-t-lg {
|
|
1098
|
+
border-top-left-radius: var(--radius);
|
|
1099
|
+
border-top-right-radius: var(--radius);
|
|
1100
|
+
}
|
|
1105
1101
|
.rounded-bl {
|
|
1106
1102
|
border-bottom-left-radius: 0.25rem;
|
|
1107
1103
|
}
|
|
@@ -1372,9 +1368,6 @@ video {
|
|
|
1372
1368
|
.font-semibold {
|
|
1373
1369
|
font-weight: 600;
|
|
1374
1370
|
}
|
|
1375
|
-
.uppercase {
|
|
1376
|
-
text-transform: uppercase;
|
|
1377
|
-
}
|
|
1378
1371
|
.leading-\[130\%\] {
|
|
1379
1372
|
line-height: 130%;
|
|
1380
1373
|
}
|
|
@@ -1564,9 +1557,6 @@ video {
|
|
|
1564
1557
|
.outline {
|
|
1565
1558
|
outline-style: solid;
|
|
1566
1559
|
}
|
|
1567
|
-
.outline-0 {
|
|
1568
|
-
outline-width: 0px;
|
|
1569
|
-
}
|
|
1570
1560
|
.outline-1 {
|
|
1571
1561
|
outline-width: 1px;
|
|
1572
1562
|
}
|
|
@@ -1787,6 +1777,9 @@ video {
|
|
|
1787
1777
|
.disabled\:opacity-50:disabled {
|
|
1788
1778
|
opacity: 0.5;
|
|
1789
1779
|
}
|
|
1780
|
+
.disabled\:outline-stateColors-disabled:disabled {
|
|
1781
|
+
outline-color: var(--stateColors-disabled);
|
|
1782
|
+
}
|
|
1790
1783
|
.group:hover .group-hover\:opacity-100 {
|
|
1791
1784
|
opacity: 1;
|
|
1792
1785
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tapcart/mobile-components",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.10",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"style": "dist/styles.css",
|
|
@@ -41,6 +41,7 @@
|
|
|
41
41
|
"@radix-ui/react-alert-dialog": "^1.0.5",
|
|
42
42
|
"@radix-ui/react-aspect-ratio": "^1.0.3",
|
|
43
43
|
"@radix-ui/react-checkbox": "^1.0.4",
|
|
44
|
+
"@radix-ui/react-dropdown-menu": "^2.1.1",
|
|
44
45
|
"@radix-ui/react-dialog": "^1.0.5",
|
|
45
46
|
"@radix-ui/react-label": "^2.0.2",
|
|
46
47
|
"@radix-ui/react-radio-group": "^1.1.3",
|