@tapcart/mobile-components 0.6.1 → 0.6.3

package/dist/styles.css

@@ -673,6 +673,9 @@ video {
 .relative {
   position: relative;
 }
+.sticky {
+  position: sticky;
+}
 .inset-0 {
   inset: 0px;
 }
@@ -707,9 +710,15 @@ video {
 .bottom-\[18px\] {
   bottom: 18px;
 }
+.bottom-\[30px\] {
+  bottom: 30px;
+}
 .bottom-\[58px\] {
   bottom: 58px;
 }
+.bottom-\[70px\] {
+  bottom: 70px;
+}
 .end-4 {
   inset-inline-end: 1rem;
 }
@@ -722,6 +731,9 @@ video {
 .left-2 {
   left: 0.5rem;
 }
+.left-4 {
+  left: 1rem;
+}
 .left-6 {
   left: 1.5rem;
 }
@@ -734,6 +746,9 @@ video {
 .right-2 {
   right: 0.5rem;
 }
+.right-4 {
+  right: 1rem;
+}
 .start-10 {
   inset-inline-start: 2.5rem;
 }
@@ -752,6 +767,12 @@ video {
 .top-2 {
   top: 0.5rem;
 }
+.top-4 {
+  top: 1rem;
+}
+.top-\[16px\] {
+  top: 16px;
+}
 .top-\[18px\] {
   top: 18px;
 }
@@ -779,6 +800,9 @@ video {
 .m-2 {
   margin: 0.5rem;
 }
+.m-auto {
+  margin: auto;
+}
 .mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -820,12 +844,21 @@ video {
 .mb-6 {
   margin-bottom: 1.5rem;
 }
+.ml-1 {
+  margin-left: 0.25rem;
+}
 .ml-2 {
   margin-left: 0.5rem;
 }
 .ml-4 {
   margin-left: 1rem;
 }
+.mr-0 {
+  margin-right: 0px;
+}
+.mr-0\.5 {
+  margin-right: 0.125rem;
+}
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -952,6 +985,9 @@ video {
 .h-full {
   height: 100%;
 }
+.max-h-\[200px\] {
+  max-height: 200px;
+}
 .max-h-\[240px\] {
   max-height: 240px;
 }
@@ -973,9 +1009,6 @@ video {
 .w-10 {
   width: 2.5rem;
 }
-.w-12 {
-  width: 3rem;
-}
 .w-14 {
   width: 3.5rem;
 }
@@ -1089,10 +1122,22 @@ video {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.translate-y-0 {
+  --tw-translate-y: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.translate-y-\[-10px\] {
+  --tw-translate-y: -10px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .translate-y-\[-50\%\] {
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.rotate-180 {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .rotate-45 {
   --tw-rotate: 45deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1374,6 +1419,9 @@ video {
 .border-t {
   border-top-width: 1px;
 }
+.border-t-\[0px\] {
+  border-top-width: 0px;
+}
 .border-t-\[1px\] {
   border-top-width: 1px;
 }
@@ -1426,6 +1474,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(97 46 255 / var(--tw-bg-opacity));
 }
+.bg-\[rgba\(255\2c 255\2c 255\2c 0\.5\)\] {
+  background-color: rgba(255,255,255,0.5);
+}
 .bg-background {
   background-color: hsl(var(--background));
 }
@@ -1511,6 +1562,10 @@ video {
 .fill-current {
   fill: currentColor;
 }
+.object-contain {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -1521,6 +1576,9 @@ video {
 .p-1 {
   padding: 0.25rem;
 }
+.p-1\.5 {
+  padding: 0.375rem;
+}
 .p-2 {
   padding: 0.5rem;
 }
@@ -1637,6 +1695,9 @@ video {
 .pt-12 {
   padding-top: 3rem;
 }
+.pt-2 {
+  padding-top: 0.5rem;
+}
 .pt-4 {
   padding-top: 1rem;
 }
@@ -1661,9 +1722,6 @@ video {
 .align-top {
   vertical-align: top;
 }
-.font-fontMedium {
-  font-family: var(--fontMedium);
-}
 .font-fontRegular {
   font-family: var(--fontRegular);
 }
@@ -1681,6 +1739,9 @@ video {
 .text-\[12px\] {
   font-size: 12px;
 }
+.text-\[14px\] {
+  font-size: 14px;
+}
 .text-\[15px\] {
   font-size: 15px;
 }
@@ -1718,6 +1779,9 @@ video {
 .uppercase {
   text-transform: uppercase;
 }
+.lowercase {
+  text-transform: lowercase;
+}
 .capitalize {
   text-transform: capitalize;
 }
@@ -2017,6 +2081,9 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.duration-150 {
+  transition-duration: 150ms;
+}
 .duration-200 {
   transition-duration: 200ms;
 }
@@ -2043,6 +2110,9 @@ video {
     transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
   }
 }
+.duration-150 {
+  animation-duration: 150ms;
+}
 .duration-200 {
   animation-duration: 200ms;
 }
@@ -2092,6 +2162,14 @@ body::-webkit-scrollbar {
   font-weight: 500;
 }
 
+.placeholder\:text-coreColors-brandColorPrimary::-moz-placeholder {
+  color: var(--coreColors-brandColorPrimary);
+}
+
+.placeholder\:text-coreColors-brandColorPrimary::placeholder {
+  color: var(--coreColors-brandColorPrimary);
+}
+
 .placeholder\:text-stateColors-error::-moz-placeholder {
   color: var(--stateColors-error);
 }
@@ -2108,6 +2186,10 @@ body::-webkit-scrollbar {
   color: var(--textColors-secondaryColor, #727272ff);
 }
 
+.last\:border-b-0:last-child {
+  border-bottom-width: 0px;
+}
+
 .placeholder-shown\:\!truncate:-moz-placeholder-shown {
   overflow: hidden !important;
   text-overflow: ellipsis !important;
@@ -2189,6 +2271,10 @@ body::-webkit-scrollbar {
   text-decoration-line: line-through !important;
 }
 
+.hover\:line-through:hover {
+  text-decoration-line: line-through;
+}
+
 .focus\:border-coreColors-brandColorPrimary:focus {
   border-color: var(--coreColors-brandColorPrimary);
 }
@@ -2253,6 +2339,10 @@ body::-webkit-scrollbar {
   --tw-ring-offset-color: hsl(var(--background));
 }
 
+.active\:bg-black\/10:active {
+  background-color: rgb(0 0 0 / 0.1);
+}
+
 .active\:text-coreColors-brandColorPrimary:active {
   color: var(--coreColors-brandColorPrimary);
 }
@@ -2614,6 +2704,13 @@ body::-webkit-scrollbar {
   text-decoration-line: line-through !important;
 }
 
+.\[\&\>span\]\:line-clamp-1>span {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+
 .\[\&\[data-state\=open\]\]\:outline-coreColors-brandColorPrimary[data-state=open] {
   outline-color: var(--coreColors-brandColorPrimary);
 }
@@ -2667,7 +2764,3 @@ body::-webkit-scrollbar {
 .\[\&_p\]\:text-stateColors-disabled p {
   color: var(--stateColors-disabled);
 }
-
-.active\:\[\&_svg\]\:text-stateColors-favorites svg:active {
-  color: var(--stateColors-favorites);
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",
@@ -51,6 +51,7 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-scroll-area": "^1.0.5",
+    "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
@@ -73,4 +74,4 @@
     "tailwindcss-animate": "^1.0.6",
     "vaul": "^0.9.1"
   }
-}
+}

package/dist/components/ThemeProvider.d.ts

@@ -1,3 +0,0 @@
-import { ThemeProviderProps } from "next-themes/dist/types";
-export declare function ThemeProvider({ children, ...props }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/components/ThemeProvider.d.ts.map

@@ -1 +0,0 @@
-{"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"}

package/dist/components/ThemeProvider.js

@@ -1,18 +0,0 @@
-"use client";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ThemeProvider as NextThemesProvider } from "next-themes";
-export function ThemeProvider(_a) {
-    var { children } = _a, props = __rest(_a, ["children"]);
-    return _jsx(NextThemesProvider, Object.assign({}, props, { children: children }));
-}

package/dist/components/ThemeToggle.d.ts

@@ -1,2 +0,0 @@
-export declare function ThemeToggle(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ThemeToggle.d.ts.map

package/dist/components/ThemeToggle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["../../components/ThemeToggle.tsx"],"names":[],"mappings":"AAOA,wBAAgB,WAAW,4CAc1B"}

package/dist/components/ThemeToggle.js

@@ -1,8 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useTheme } from "next-themes";
-import { Button } from "../components/ui/button";
-export function ThemeToggle() {
-    const { setTheme, theme } = useTheme();
-    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" }))] })));
-}

package/dist/components/ui/input.d.ts

@@ -1,17 +0,0 @@
-import * as React from "react";
-import { type VariantProps } from "class-variance-authority";
-declare const inputVariants: (props?: ({
-    error?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange">, VariantProps<typeof inputVariants> {
-    id: string;
-    label?: string;
-    icon?: string;
-    asChild?: boolean;
-    value: string;
-    placeholder: string;
-    onChange: (_: string) => void;
-}
-declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
-export { Input };
-//# sourceMappingURL=input.d.ts.map

package/dist/components/ui/input.d.ts.map

@@ -1 +0,0 @@
-{"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"}

package/dist/components/ui/input.js

@@ -1,35 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva } from "class-variance-authority";
-import { cn } from "../../lib/utils";
-import { Icon } from "./icon";
-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", {
-    variants: {
-        error: {
-            true: "border-stateColors-error text-stateColors-error placeholder:text-stateColors-error focus:border-stateColors-error [&+label]:text-stateColors-error",
-            false: "",
-        },
-    },
-    defaultVariants: {
-        error: false,
-    },
-});
-const Input = React.forwardRef((_a, ref) => {
-    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"]);
-    const Comp = asChild ? Slot : "div";
-    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] })));
-});
-Input.displayName = "Input";
-export { Input };

package/dist/components/ui/product-grid.d.ts

@@ -1,15 +0,0 @@
-type Product = any;
-interface PageData {
-    products: Product[];
-    cursorBlob?: string;
-    filtersData: any;
-}
-interface ProductGridItemsProps {
-    initialData: PageData;
-    loadMoreProducts: (params: any) => Promise<PageData>;
-    queryVariables: Record<string, any>;
-    config: Record<string, any>;
-}
-declare function ProductGrid({ loadMoreProducts, initialData, queryVariables, config, }: ProductGridItemsProps): import("react/jsx-runtime").JSX.Element;
-export { ProductGrid };
-//# sourceMappingURL=product-grid.d.ts.map

package/dist/components/ui/product-grid.d.ts.map

@@ -1 +0,0 @@
-{"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"}

package/dist/components/ui/product-grid.js

@@ -1,22 +0,0 @@
-"use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useInfiniteScroll } from "../hooks/use-infinite-scroll";
-import { ProductCard } from "./product-card";
-const Loader = () => (_jsx("div", Object.assign({ className: "grid-cols-2 lg:grid-cols-3" }, { children: Array(4)
-        .fill(0)
-        .map((_, index) => (_jsx("div", { className: "aspect-[2/3] animate-pulse bg-neutral-100 dark:bg-neutral-900" }, index))) })));
-function ProductGrid({ loadMoreProducts, initialData, queryVariables, config, }) {
-    const { data, error, isLoadingInitialData, isLoadingMore, isEmpty, isReachingEnd, ref, products, } = useInfiniteScroll({
-        initialData,
-        loadMoreProducts,
-        queryVariables,
-    });
-    if (error)
-        return _jsx("div", { children: "Failed to load data" });
-    if (isLoadingInitialData)
-        return _jsx(Loader, {});
-    return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: "grid-cols-2 lg:grid-cols-3" }, { children: products.map((product, i) => (_jsx(ProductCard, { 
-                    // @ts-expect-error
-                    product: product, config: config, isLoading: false }, product.handle))) })), isLoadingMore ? _jsx(Loader, {}) : _jsx("div", { ref: ref })] }));
-}
-export { ProductGrid };