@tapcart/mobile-components 0.5.8 → 0.6.0

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.
@@ -0,0 +1,15 @@
1
+ import { Collection, Product } from "app-studio-types";
2
+ interface UseRecommendationProps {
3
+ queryVariables: Record<string, any>;
4
+ apiURL: string;
5
+ }
6
+ interface UseRecommendationReturn {
7
+ products: Product[];
8
+ collections: Collection[];
9
+ searches: string[];
10
+ isLoading: boolean;
11
+ error: any;
12
+ }
13
+ declare const useRecommendations: ({ queryVariables, apiURL }: UseRecommendationProps) => UseRecommendationReturn;
14
+ export { useRecommendations };
15
+ //# sourceMappingURL=use-recommendations.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-recommendations.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-recommendations.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAKtD,UAAU,sBAAsB;IAC9B,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACnC,MAAM,EAAE,MAAM,CAAA;CACf;AAED,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,WAAW,EAAE,UAAU,EAAE,CAAA;IACzB,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,GAAG,CAAA;CACX;AAOD,QAAA,MAAM,kBAAkB,+BAGrB,sBAAsB,KAAG,uBAsC3B,CAAA;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAA"}
@@ -0,0 +1,35 @@
1
+ "use client";
2
+ import { useSearchParams } from "next/navigation";
3
+ import useSWR from "swr";
4
+ const constructURL = (apiURL) => {
5
+ const url = new URL(apiURL);
6
+ return url.toString();
7
+ };
8
+ const useRecommendations = ({ queryVariables, apiURL }) => {
9
+ const searchParams = useSearchParams();
10
+ const recommendation = searchParams.get('recommendation');
11
+ const shouldFetch = recommendation && recommendation.trim().length > 0;
12
+ //To remove when pageState data is available to block tempaltes
13
+ const fetcher = (body) => fetch(constructURL(apiURL), {
14
+ method: "POST",
15
+ body: JSON.stringify(body),
16
+ }).then((res) => res.json());
17
+ const { data, error, isLoading } = useSWR(shouldFetch
18
+ ? {
19
+ appId: queryVariables.appId,
20
+ query: recommendation,
21
+ language: queryVariables.language,
22
+ }
23
+ : null, fetcher, {
24
+ revalidateOnFocus: false,
25
+ revalidateOnReconnect: false,
26
+ });
27
+ return {
28
+ products: data === null || data === void 0 ? void 0 : data.products,
29
+ collections: data === null || data === void 0 ? void 0 : data.collections,
30
+ searches: data === null || data === void 0 ? void 0 : data.searches,
31
+ isLoading: isLoading,
32
+ error: error
33
+ };
34
+ };
35
+ export { useRecommendations };
@@ -1 +1 @@
1
- {"version":3,"file":"product-card.d.ts","sourceRoot":"","sources":["../../../components/ui/product-card.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"product-card.d.ts","sourceRoot":"","sources":["../../../components/ui/product-card.tsx"],"names":[],"mappings":"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"}
@@ -16,7 +16,7 @@ const productCardBadgeVariants = cva("absolute truncate", {
16
16
  variants: {
17
17
  horizontalPosition: {
18
18
  start: "left-0",
19
- end: "right-0",
19
+ end: "",
20
20
  center: "",
21
21
  },
22
22
  verticalPosition: {
@@ -135,7 +135,7 @@ const productCardFavoriteVariants = cva("absolute ", {
135
135
  },
136
136
  });
137
137
  const ProductCard = ({ config, tapcartData, product, isLoading, favorited, onFavoriteClick, onQuickAdd, openProduct, className, }) => {
138
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23;
138
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24;
139
139
  const { variants, images, title, tags } = product;
140
140
  // Select the variant that has the lowest price that is available or just the lowest price if none are available
141
141
  let searchVariants = variants.filter((variant) => variant.available);
@@ -219,32 +219,32 @@ const ProductCard = ({ config, tapcartData, product, isLoading, favorited, onFav
219
219
  onFavoriteClick === null || onFavoriteClick === void 0 ? void 0 : onFavoriteClick(e, product);
220
220
  }, icon: ((_q = (_p = config.favoritesIcon) === null || _p === void 0 ? void 0 : _p.icon) === null || _q === void 0 ? void 0 : _q.type) === "internal"
221
221
  ? (_s = (_r = config.favoritesIcon) === null || _r === void 0 ? void 0 : _r.icon) === null || _s === void 0 ? void 0 : _s.url
222
- : undefined, layoutType: (_t = config.favoritesIcon) === null || _t === void 0 ? void 0 : _t.layoutType, showBackground: (_u = config.favoritesIcon) === null || _u === void 0 ? void 0 : _u.showBackground }))] }))), ((_v = config.quickAdd) === null || _v === void 0 ? void 0 : _v.enabled) && (_jsx(Button, Object.assign({ className: "outline-0", style: {
222
+ : undefined, layoutType: (_t = config.favoritesIcon) === null || _t === void 0 ? void 0 : _t.layoutType, showBackground: (_u = config.favoritesIcon) === null || _u === void 0 ? void 0 : _u.showBackground, cornerRadius: (_v = config.favoritesIcon) === null || _v === void 0 ? void 0 : _v.cornerRadius }))] }))), ((_w = config.quickAdd) === null || _w === void 0 ? void 0 : _w.enabled) && (_jsx(Button, Object.assign({ className: "outline-0", style: {
223
223
  borderBottomLeftRadius: `${config.quickAdd.cornerRadius}px`,
224
224
  borderBottomRightRadius: `${config.quickAdd.cornerRadius}px`,
225
- }, labelClassName: cn("outline-0 w-full", { uppercase: (_w = config.quickAdd) === null || _w === void 0 ? void 0 : _w.uppercase }, { "text-left": ((_x = config.quickAdd) === null || _x === void 0 ? void 0 : _x.textAlignment) === "left" }, { "text-right": ((_y = config.quickAdd) === null || _y === void 0 ? void 0 : _y.textAlignment) === "right" }, { "text-center": ((_z = config.quickAdd) === null || _z === void 0 ? void 0 : _z.textAlignment) === "center" }), labelStyle: { fontSize: (_0 = config.quickAdd) === null || _0 === void 0 ? void 0 : _0.fontSize }, variant: "quickadd", size: "default", disabled: product.availableForSale === false, onClick: (e) => {
225
+ }, labelClassName: cn("outline-0 w-full", { uppercase: (_x = config.quickAdd) === null || _x === void 0 ? void 0 : _x.uppercase }, { "text-left": ((_y = config.quickAdd) === null || _y === void 0 ? void 0 : _y.textAlignment) === "left" }, { "text-right": ((_z = config.quickAdd) === null || _z === void 0 ? void 0 : _z.textAlignment) === "right" }, { "text-center": ((_0 = config.quickAdd) === null || _0 === void 0 ? void 0 : _0.textAlignment) === "center" }), labelStyle: { fontSize: (_1 = config.quickAdd) === null || _1 === void 0 ? void 0 : _1.fontSize }, variant: "quickadd", size: "default", disabled: product.availableForSale === false, onClick: (e) => {
226
226
  e.stopPropagation();
227
227
  onQuickAdd === null || onQuickAdd === void 0 ? void 0 : onQuickAdd(e, product);
228
228
  } }, { children: _jsxs("div", Object.assign({ className: "flex items-center justify-center gap-2" }, { children: [_jsx(Icon, { name: product.availableForSale ? "plus" : "shopping-cart-off", size: "xs" }), product.availableForSale ? "Quick Add" : "Sold Out"] })) }))), _jsxs("div", Object.assign({ className: "w-full flex-col justify-start items-start gap-0 inline-flex" }, { children: [belowBadge && (_jsx("div", Object.assign({ className: cn("mt-2 w-full flex justify-start", {
229
229
  "justify-end": belowBadge.horizontalPosition === "end",
230
- }) }, { children: _jsx(Badge, Object.assign({ size: "plp-layout", alignment: belowBadge.horizontalPosition, icon: belowBadge.image, className: cn("truncate", { rounded: belowBadge.cornerRadius === "rounded" }, { "rounded-none": belowBadge.cornerRadius === "square" }) }, { children: belowBadge.text })) }))), ((_1 = config.productTitle) === null || _1 === void 0 ? void 0 : _1.enabled) && (_jsx("div", Object.assign({ className: "mt-2 w-full" }, { children: _jsx(Text, Object.assign({ type: "body-secondary", className: cn({ uppercase: (_2 = config.productTitle) === null || _2 === void 0 ? void 0 : _2.uppercase }, {
231
- "text-left": ((_3 = config.productTitle) === null || _3 === void 0 ? void 0 : _3.textAlignment) === "left",
230
+ }) }, { children: _jsx(Badge, Object.assign({ size: "plp-layout", alignment: belowBadge.horizontalPosition, icon: belowBadge.image, className: cn("truncate", { rounded: belowBadge.cornerRadius === "rounded" }, { "rounded-none": belowBadge.cornerRadius === "square" }) }, { children: belowBadge.text })) }))), ((_2 = config.productTitle) === null || _2 === void 0 ? void 0 : _2.enabled) && (_jsx("div", Object.assign({ className: "mt-2 w-full" }, { children: _jsx(Text, Object.assign({ type: "body-secondary", className: cn({ uppercase: (_3 = config.productTitle) === null || _3 === void 0 ? void 0 : _3.uppercase }, {
231
+ "text-left": ((_4 = config.productTitle) === null || _4 === void 0 ? void 0 : _4.textAlignment) === "left",
232
232
  }, {
233
- "text-right": ((_4 = config.productTitle) === null || _4 === void 0 ? void 0 : _4.textAlignment) === "right",
233
+ "text-right": ((_5 = config.productTitle) === null || _5 === void 0 ? void 0 : _5.textAlignment) === "right",
234
234
  }, {
235
- "text-center": ((_5 = config.productTitle) === null || _5 === void 0 ? void 0 : _5.textAlignment) === "center",
235
+ "text-center": ((_6 = config.productTitle) === null || _6 === void 0 ? void 0 : _6.textAlignment) === "center",
236
236
  }, {
237
- "line-clamp-2": (_6 = config.productTitle) === null || _6 === void 0 ? void 0 : _6.wrapText,
238
- "line-clamp-1": !((_7 = config.productTitle) === null || _7 === void 0 ? void 0 : _7.wrapText),
239
- }, "text-textColors-productTitle"), style: { fontSize: (_8 = config.productTitle) === null || _8 === void 0 ? void 0 : _8.fontSize } }, { children: title })) }))), _jsxs("div", Object.assign({ className: cn("flex flex-row w-full gap-2 mt-1 justify-end items-center", { "justify-start": ((_9 = config.price) === null || _9 === void 0 ? void 0 : _9.textAlignment) === "left" }, { "justify-end": ((_10 = config.price) === null || _10 === void 0 ? void 0 : _10.textAlignment) === "right" }, { "justify-center": ((_11 = config.price) === null || _11 === void 0 ? void 0 : _11.textAlignment) === "center" }) }, { children: [((_12 = config.price) === null || _12 === void 0 ? void 0 : _12.enabled) && (_jsx(Price, { price: parseFloat(variant.price.amount), isSale: !!variant.compareAtPrice &&
237
+ "line-clamp-2": (_7 = config.productTitle) === null || _7 === void 0 ? void 0 : _7.wrapText,
238
+ "line-clamp-1": !((_8 = config.productTitle) === null || _8 === void 0 ? void 0 : _8.wrapText),
239
+ }, "text-textColors-productTitle"), style: { fontSize: (_9 = config.productTitle) === null || _9 === void 0 ? void 0 : _9.fontSize } }, { children: title })) }))), _jsxs("div", Object.assign({ className: cn("flex flex-row w-full gap-2 mt-1 justify-end items-center", { "justify-start": ((_10 = config.price) === null || _10 === void 0 ? void 0 : _10.textAlignment) === "left" }, { "justify-end": ((_11 = config.price) === null || _11 === void 0 ? void 0 : _11.textAlignment) === "right" }, { "justify-center": ((_12 = config.price) === null || _12 === void 0 ? void 0 : _12.textAlignment) === "center" }) }, { children: [((_13 = config.price) === null || _13 === void 0 ? void 0 : _13.enabled) && (_jsx(Price, { price: parseFloat(variant.price.amount), isSale: !!variant.compareAtPrice &&
240
240
  variant.compareAtPrice &&
241
- parseFloat((_13 = variant.compareAtPrice) === null || _13 === void 0 ? void 0 : _13.amount) >
241
+ parseFloat((_14 = variant.compareAtPrice) === null || _14 === void 0 ? void 0 : _14.amount) >
242
242
  parseFloat(variant.price.amount), compareAtPrice: variant.compareAtPrice &&
243
- parseFloat((_14 = variant.compareAtPrice) === null || _14 === void 0 ? void 0 : _14.amount), currency: tapcartData.currency.code, locale: tapcartData.currency.locale, fontSize: (_15 = config.price) === null || _15 === void 0 ? void 0 : _15.fontSize })), ((_16 = config.favoritesIcon) === null || _16 === void 0 ? void 0 : _16.enabled) &&
243
+ parseFloat((_15 = variant.compareAtPrice) === null || _15 === void 0 ? void 0 : _15.amount), currency: tapcartData.currency.code, locale: tapcartData.currency.locale, fontSize: (_16 = config.price) === null || _16 === void 0 ? void 0 : _16.fontSize })), ((_17 = config.favoritesIcon) === null || _17 === void 0 ? void 0 : _17.enabled) &&
244
244
  config.favoritesIcon.layoutType === "below-image-on-right" && (_jsx("div", Object.assign({ className: "w-8 h-8 flex items-center justify-center" }, { children: _jsx(Favorite, { selected: favorited, onClick: (e) => {
245
245
  onFavoriteClick === null || onFavoriteClick === void 0 ? void 0 : onFavoriteClick(e, product);
246
- }, size: "small", icon: ((_18 = (_17 = config.favoritesIcon) === null || _17 === void 0 ? void 0 : _17.icon) === null || _18 === void 0 ? void 0 : _18.type) === "internal"
247
- ? (_20 = (_19 = config.favoritesIcon) === null || _19 === void 0 ? void 0 : _19.icon) === null || _20 === void 0 ? void 0 : _20.url
248
- : undefined, cornerRadius: (_21 = config.favoritesIcon) === null || _21 === void 0 ? void 0 : _21.cornerRadius, layoutType: (_22 = config.favoritesIcon) === null || _22 === void 0 ? void 0 : _22.layoutType, showBackground: (_23 = config.favoritesIcon) === null || _23 === void 0 ? void 0 : _23.showBackground }) })))] }))] }))] })) })));
246
+ }, size: "small", icon: ((_19 = (_18 = config.favoritesIcon) === null || _18 === void 0 ? void 0 : _18.icon) === null || _19 === void 0 ? void 0 : _19.type) === "internal"
247
+ ? (_21 = (_20 = config.favoritesIcon) === null || _20 === void 0 ? void 0 : _20.icon) === null || _21 === void 0 ? void 0 : _21.url
248
+ : undefined, cornerRadius: (_22 = config.favoritesIcon) === null || _22 === void 0 ? void 0 : _22.cornerRadius, layoutType: (_23 = config.favoritesIcon) === null || _23 === void 0 ? void 0 : _23.layoutType, showBackground: (_24 = config.favoritesIcon) === null || _24 === void 0 ? void 0 : _24.showBackground }) })))] }))] }))] })) })));
249
249
  };
250
250
  export { ProductCard };
package/dist/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  export { cn, cva, getColor } from "./lib/utils";
2
2
  export * from "./components/hooks/use-infinite-scroll";
3
+ export * from "./components/hooks/use-recommendations";
3
4
  export * from "./components/hooks/use-products";
4
5
  export * from "./components/hooks/use-scroll-direction";
5
6
  export * from "./components/ui/accordion";
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAC/C,cAAc,wCAAwC,CAAA;AACtD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yCAAyC,CAAA;AACvD,cAAc,2BAA2B,CAAA;AACzC,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,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,0BAA0B,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAC/C,cAAc,wCAAwC,CAAA;AACtD,cAAc,wCAAwC,CAAA;AACtD,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yCAAyC,CAAA;AACvD,cAAc,2BAA2B,CAAA;AACzC,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,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,0BAA0B,CAAA"}
package/dist/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  // component exports
2
2
  export { cn, cva, getColor } from "./lib/utils";
3
3
  export * from "./components/hooks/use-infinite-scroll";
4
+ export * from "./components/hooks/use-recommendations";
4
5
  export * from "./components/hooks/use-products";
5
6
  export * from "./components/hooks/use-scroll-direction";
6
7
  export * from "./components/ui/accordion";
package/dist/styles.css CHANGED
@@ -701,6 +701,9 @@ video {
701
701
  .bottom-2 {
702
702
  bottom: 0.5rem;
703
703
  }
704
+ .bottom-6 {
705
+ bottom: 1.5rem;
706
+ }
704
707
  .bottom-\[18px\] {
705
708
  bottom: 18px;
706
709
  }
@@ -719,6 +722,9 @@ video {
719
722
  .left-2 {
720
723
  left: 0.5rem;
721
724
  }
725
+ .left-6 {
726
+ left: 1.5rem;
727
+ }
722
728
  .left-\[50\%\] {
723
729
  left: 50%;
724
730
  }
@@ -770,10 +776,17 @@ video {
770
776
  .row-start-1 {
771
777
  grid-row-start: 1;
772
778
  }
779
+ .m-2 {
780
+ margin: 0.5rem;
781
+ }
773
782
  .mx-1 {
774
783
  margin-left: 0.25rem;
775
784
  margin-right: 0.25rem;
776
785
  }
786
+ .mx-2 {
787
+ margin-left: 0.5rem;
788
+ margin-right: 0.5rem;
789
+ }
777
790
  .mx-4 {
778
791
  margin-left: 1rem;
779
792
  margin-right: 1rem;
@@ -790,6 +803,10 @@ video {
790
803
  margin-top: 0.75rem;
791
804
  margin-bottom: 0.75rem;
792
805
  }
806
+ .my-4 {
807
+ margin-top: 1rem;
808
+ margin-bottom: 1rem;
809
+ }
793
810
  .my-auto {
794
811
  margin-top: auto;
795
812
  margin-bottom: auto;
@@ -806,12 +823,18 @@ video {
806
823
  .ml-2 {
807
824
  margin-left: 0.5rem;
808
825
  }
826
+ .ml-4 {
827
+ margin-left: 1rem;
828
+ }
809
829
  .ml-auto {
810
830
  margin-left: auto;
811
831
  }
812
832
  .mr-2 {
813
833
  margin-right: 0.5rem;
814
834
  }
835
+ .mr-4 {
836
+ margin-right: 1rem;
837
+ }
815
838
  .mr-auto {
816
839
  margin-right: auto;
817
840
  }
@@ -890,6 +913,9 @@ video {
890
913
  .h-4 {
891
914
  height: 1rem;
892
915
  }
916
+ .h-48 {
917
+ height: 12rem;
918
+ }
893
919
  .h-5 {
894
920
  height: 1.25rem;
895
921
  }
@@ -911,6 +937,9 @@ video {
911
937
  .h-\[1px\] {
912
938
  height: 1px;
913
939
  }
940
+ .h-\[200px\] {
941
+ height: 200px;
942
+ }
914
943
  .h-\[22px\] {
915
944
  height: 22px;
916
945
  }
@@ -980,12 +1009,18 @@ video {
980
1009
  .w-8 {
981
1010
  width: 2rem;
982
1011
  }
1012
+ .w-\[140px\] {
1013
+ width: 140px;
1014
+ }
983
1015
  .w-\[1px\] {
984
1016
  width: 1px;
985
1017
  }
986
1018
  .w-\[22px\] {
987
1019
  width: 22px;
988
1020
  }
1021
+ .w-\[327px\] {
1022
+ width: 327px;
1023
+ }
989
1024
  .w-\[40px\] {
990
1025
  width: 40px;
991
1026
  }
@@ -1002,6 +1037,9 @@ video {
1002
1037
  .min-w-0 {
1003
1038
  min-width: 0px;
1004
1039
  }
1040
+ .min-w-\[148px\] {
1041
+ min-width: 148px;
1042
+ }
1005
1043
  .min-w-\[8rem\] {
1006
1044
  min-width: 8rem;
1007
1045
  }
@@ -1182,6 +1220,9 @@ video {
1182
1220
  .gap-4 {
1183
1221
  gap: 1rem;
1184
1222
  }
1223
+ .gap-\[7px\] {
1224
+ gap: 7px;
1225
+ }
1185
1226
  .gap-x-2 {
1186
1227
  -moz-column-gap: 0.5rem;
1187
1228
  column-gap: 0.5rem;
@@ -1196,6 +1237,21 @@ video {
1196
1237
  .gap-y-4 {
1197
1238
  row-gap: 1rem;
1198
1239
  }
1240
+ .space-x-1 > :not([hidden]) ~ :not([hidden]) {
1241
+ --tw-space-x-reverse: 0;
1242
+ margin-right: calc(0.25rem * var(--tw-space-x-reverse));
1243
+ margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
1244
+ }
1245
+ .space-x-2 > :not([hidden]) ~ :not([hidden]) {
1246
+ --tw-space-x-reverse: 0;
1247
+ margin-right: calc(0.5rem * var(--tw-space-x-reverse));
1248
+ margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
1249
+ }
1250
+ .space-x-4 > :not([hidden]) ~ :not([hidden]) {
1251
+ --tw-space-x-reverse: 0;
1252
+ margin-right: calc(1rem * var(--tw-space-x-reverse));
1253
+ margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
1254
+ }
1199
1255
  .space-y-1 > :not([hidden]) ~ :not([hidden]) {
1200
1256
  --tw-space-y-reverse: 0;
1201
1257
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1212,6 +1268,9 @@ video {
1212
1268
  .self-center {
1213
1269
  align-self: center;
1214
1270
  }
1271
+ .self-stretch {
1272
+ align-self: stretch;
1273
+ }
1215
1274
  .overflow-hidden {
1216
1275
  overflow: hidden;
1217
1276
  }
@@ -1318,6 +1377,10 @@ video {
1318
1377
  .\!border-stateColors-error {
1319
1378
  border-color: var(--stateColors-error) !important;
1320
1379
  }
1380
+ .border-\[\#E3E3E3\] {
1381
+ --tw-border-opacity: 1;
1382
+ border-color: rgb(227 227 227 / var(--tw-border-opacity));
1383
+ }
1321
1384
  .border-black {
1322
1385
  --tw-border-opacity: 1;
1323
1386
  border-color: rgb(0 0 0 / var(--tw-border-opacity));
@@ -1334,6 +1397,10 @@ video {
1334
1397
  .border-coreColors-dividingLines {
1335
1398
  border-color: var(--coreColors-dividingLines);
1336
1399
  }
1400
+ .border-gray-300 {
1401
+ --tw-border-opacity: 1;
1402
+ border-color: rgb(209 213 219 / var(--tw-border-opacity));
1403
+ }
1337
1404
  .border-input {
1338
1405
  border-color: hsl(var(--input));
1339
1406
  }
@@ -1356,6 +1423,10 @@ video {
1356
1423
  .bg-background {
1357
1424
  background-color: hsl(var(--background));
1358
1425
  }
1426
+ .bg-black {
1427
+ --tw-bg-opacity: 1;
1428
+ background-color: rgb(0 0 0 / var(--tw-bg-opacity));
1429
+ }
1359
1430
  .bg-black\/80 {
1360
1431
  background-color: rgb(0 0 0 / 0.8);
1361
1432
  }
@@ -1383,6 +1454,14 @@ video {
1383
1454
  .bg-coreColors-pageColor {
1384
1455
  background-color: var(--coreColors-pageColor);
1385
1456
  }
1457
+ .bg-gray-100 {
1458
+ --tw-bg-opacity: 1;
1459
+ background-color: rgb(243 244 246 / var(--tw-bg-opacity));
1460
+ }
1461
+ .bg-gray-300 {
1462
+ --tw-bg-opacity: 1;
1463
+ background-color: rgb(209 213 219 / var(--tw-bg-opacity));
1464
+ }
1386
1465
  .bg-productBadging-fill {
1387
1466
  background-color: var(--productBadging-fill);
1388
1467
  }
@@ -1426,6 +1505,10 @@ video {
1426
1505
  .fill-current {
1427
1506
  fill: currentColor;
1428
1507
  }
1508
+ .object-cover {
1509
+ -o-object-fit: cover;
1510
+ object-fit: cover;
1511
+ }
1429
1512
  .p-0 {
1430
1513
  padding: 0px;
1431
1514
  }
@@ -1447,6 +1530,10 @@ video {
1447
1530
  .p-\[1px\] {
1448
1531
  padding: 1px;
1449
1532
  }
1533
+ .\!px-0 {
1534
+ padding-left: 0px !important;
1535
+ padding-right: 0px !important;
1536
+ }
1450
1537
  .px-1 {
1451
1538
  padding-left: 0.25rem;
1452
1539
  padding-right: 0.25rem;
@@ -1528,6 +1615,9 @@ video {
1528
1615
  .pr-4 {
1529
1616
  padding-right: 1rem;
1530
1617
  }
1618
+ .pr-6 {
1619
+ padding-right: 1.5rem;
1620
+ }
1531
1621
  .pt-0 {
1532
1622
  padding-top: 0px;
1533
1623
  }
@@ -1564,6 +1654,14 @@ video {
1564
1654
  .font-fontRegular {
1565
1655
  font-family: var(--fontRegular);
1566
1656
  }
1657
+ .text-2xl {
1658
+ font-size: 1.5rem;
1659
+ line-height: 2rem;
1660
+ }
1661
+ .text-5xl {
1662
+ font-size: 3rem;
1663
+ line-height: 1;
1664
+ }
1567
1665
  .text-\[10px\] {
1568
1666
  font-size: 10px;
1569
1667
  }
@@ -1579,6 +1677,10 @@ video {
1579
1677
  .text-\[23px\] {
1580
1678
  font-size: 23px;
1581
1679
  }
1680
+ .text-base {
1681
+ font-size: 1rem;
1682
+ line-height: 1.5rem;
1683
+ }
1582
1684
  .text-lg {
1583
1685
  font-size: 1.125rem;
1584
1686
  line-height: 1.75rem;
@@ -1603,6 +1705,9 @@ video {
1603
1705
  .uppercase {
1604
1706
  text-transform: uppercase;
1605
1707
  }
1708
+ .capitalize {
1709
+ text-transform: capitalize;
1710
+ }
1606
1711
  .leading-\[130\%\] {
1607
1712
  line-height: 130%;
1608
1713
  }
@@ -1618,6 +1723,13 @@ video {
1618
1723
  .leading-none {
1619
1724
  line-height: 1;
1620
1725
  }
1726
+ .leading-tight {
1727
+ line-height: 1.25;
1728
+ }
1729
+ .text-\[\#727272\] {
1730
+ --tw-text-opacity: 1;
1731
+ color: rgb(114 114 114 / var(--tw-text-opacity));
1732
+ }
1621
1733
  .text-black {
1622
1734
  --tw-text-opacity: 1;
1623
1735
  color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -1706,6 +1818,10 @@ video {
1706
1818
  .text-foreground\/50 {
1707
1819
  color: hsl(var(--foreground) / 0.5);
1708
1820
  }
1821
+ .text-gray-700 {
1822
+ --tw-text-opacity: 1;
1823
+ color: rgb(55 65 81 / var(--tw-text-opacity));
1824
+ }
1709
1825
  .text-muted-foreground {
1710
1826
  color: hsl(var(--muted-foreground));
1711
1827
  }
@@ -1760,6 +1876,10 @@ video {
1760
1876
  .text-textColors-strikethroughPriceText {
1761
1877
  color: var(--textColors-strikethroughPriceText);
1762
1878
  }
1879
+ .text-white {
1880
+ --tw-text-opacity: 1;
1881
+ color: rgb(255 255 255 / var(--tw-text-opacity));
1882
+ }
1763
1883
  .line-through {
1764
1884
  text-decoration-line: line-through;
1765
1885
  }
@@ -1785,6 +1905,16 @@ video {
1785
1905
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
1786
1906
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1787
1907
  }
1908
+ .shadow-md {
1909
+ --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
1910
+ --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
1911
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1912
+ }
1913
+ .shadow-none {
1914
+ --tw-shadow: 0 0 #0000;
1915
+ --tw-shadow-colored: 0 0 #0000;
1916
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1917
+ }
1788
1918
  .shadow-primary {
1789
1919
  --tw-shadow: calc(var(--buttonColors-primaryShadowEnabled) * 0px) calc(var(--buttonColors-primaryShadowEnabled) * 5px) calc(var(--buttonColors-primaryShadowEnabled) * 25px) calc(var(--buttonColors-primaryShadowEnabled)* 0px) rgb(0, 0, 0, 0.10);;
1790
1920
  --tw-shadow-colored: calc(var(--buttonColors-primaryShadowEnabled) * 0px) calc(var(--buttonColors-primaryShadowEnabled) * 5px) calc(var(--buttonColors-primaryShadowEnabled) * 25px) calc(var(--buttonColors-primaryShadowEnabled)* 0px) rgb(0, 0, 0, 0.10);;
@@ -1990,6 +2120,11 @@ body::-webkit-scrollbar {
1990
2120
  border-color: var(--stateColors-error) !important;
1991
2121
  }
1992
2122
 
2123
+ .focus-within\:border-black:focus-within {
2124
+ --tw-border-opacity: 1;
2125
+ border-color: rgb(0 0 0 / var(--tw-border-opacity));
2126
+ }
2127
+
1993
2128
  .focus-within\:border-coreColors-brandColorPrimary:focus-within {
1994
2129
  border-color: var(--coreColors-brandColorPrimary);
1995
2130
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tapcart/mobile-components",
3
- "version": "0.5.8",
3
+ "version": "0.6.0",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "style": "dist/styles.css",