@tapcart/mobile-components 0.1.42 → 0.1.43

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

@@ -0,0 +1,25 @@
+import { type VariantProps } from "class-variance-authority";
+import React from "react";
+declare const chipVariants: (props?: ({
+    variant?: "secondary" | "primary" | null | undefined;
+    direction?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+type ChipProps = React.ComponentPropsWithoutRef<'div'> & VariantProps<typeof chipVariants> & {
+    icon?: React.ElementType;
+    iconPosition?: 'left' | 'right';
+    onClose?: () => void;
+};
+declare const Chip: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & VariantProps<(props?: ({
+    variant?: "secondary" | "primary" | null | undefined;
+    direction?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & {
+    icon?: React.ElementType<any> | undefined;
+    iconPosition?: "left" | "right" | undefined;
+    onClose?: (() => void) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+type MultipleChipsProps = {
+    children: React.ReactElement<ChipProps>[];
+};
+declare const MultipleChips: React.FC<MultipleChipsProps>;
+export { Chip, MultipleChips };
+//# sourceMappingURL=chip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../components/ui/chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,QAAA,MAAM,YAAY;;;mFAkBjB,CAAC;AAEF,KAAK,SAAS,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,GAAG;IAC3F,IAAI,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,QAAA,MAAM,IAAI;;;;;;qBAHQ,IAAI;wCA0BrB,CAAC;AAGF,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC;CAC3C,CAAC;AAEF,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAa/C,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/ui/chip.js

@@ -0,0 +1,47 @@
+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 { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+import React, { useState } from "react";
+const chipVariants = cva("inline-flex items-center justify-center rounded-[4px] border border-dividingLines text-sm font-medium transition-colors", {
+    variants: {
+        variant: {
+            primary: "bg-coreColors-pageColor text-textColors-primaryColor",
+            secondary: "bg-coreColors-pageColor text-textColors-secondaryColor",
+        },
+        direction: {
+            horizontal: "flex-row",
+            vertical: "flex-col",
+        },
+    },
+    defaultVariants: {
+        variant: "primary",
+        direction: "horizontal",
+    },
+});
+const Chip = React.forwardRef((_a, ref) => {
+    var { className, variant, direction, children, icon: Icon, iconPosition = 'left', onClose } = _a, props = __rest(_a, ["className", "variant", "direction", "children", "icon", "iconPosition", "onClose"]);
+    const [visible, setVisible] = useState(true);
+    if (!visible)
+        return null;
+    const handleIconClick = () => {
+        setVisible(false);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    };
+    return (_jsxs("div", Object.assign({ ref: ref, className: cn(chipVariants({ variant, direction }), "p-2 space-x-2", className) }, props, { children: [Icon && iconPosition === 'left' && _jsx(Icon, { className: "mr-2 h-4 w-4 cursor-pointer", onClick: handleIconClick }), children, Icon && iconPosition === 'right' && _jsx(Icon, { className: "ml-2 h-4 w-4 cursor-pointer", onClick: handleIconClick })] })));
+});
+Chip.displayName = 'Chip';
+const MultipleChips = ({ children }) => {
+    return (_jsxs("div", Object.assign({ className: "relative mt-2 mb-4" }, { children: [_jsx("div", Object.assign({ className: "flex space-x-2 overflow-x-auto no-scrollbar" }, { children: children.map((chip, index) => (_jsx("div", Object.assign({ className: "shrink-0" }, { children: chip }), index))) })), _jsx("div", { className: "fade-right" })] })));
+};
+export { Chip, MultipleChips };

package/dist/globals.css

@@ -647,6 +647,12 @@ video {
 .pointer-events-auto {
   pointer-events: auto;
 }
+.\!visible {
+  visibility: visible !important;
+}
+.visible {
+  visibility: visible;
+}
 .fixed {
   position: fixed;
 }
@@ -708,6 +714,15 @@ video {
 .-mt-4 {
   margin-top: -1rem;
 }
+.mb-4 {
+  margin-bottom: 1rem;
+}
+.ml-2 {
+  margin-left: 0.5rem;
+}
+.mr-2 {
+  margin-right: 0.5rem;
+}
 .mt-2 {
   margin-top: 0.5rem;
 }
@@ -886,6 +901,9 @@ video {
 .grid-cols-4 {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
+.flex-row {
+  flex-direction: row;
+}
 .flex-col {
   flex-direction: column;
 }
@@ -914,6 +932,11 @@ video {
 .gap-y-\[7px\] {
   row-gap: 7px;
 }
+.space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
 .space-x-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1rem * var(--tw-space-x-reverse));
@@ -927,6 +950,9 @@ video {
 .overflow-hidden {
   overflow: hidden;
 }
+.overflow-x-auto {
+  overflow-x: auto;
+}
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -938,6 +964,9 @@ video {
 .rounded {
   border-radius: 0.25rem;
 }
+.rounded-\[4px\] {
+  border-radius: 4px;
+}
 .rounded-\[inherit\] {
   border-radius: inherit;
 }
@@ -1007,6 +1036,9 @@ video {
 .bg-buttonColors-secondaryFill {
   background-color: var(--buttonColors-secondaryFill);
 }
+.bg-coreColors-pageColor {
+  background-color: var(--coreColors-pageColor);
+}
 .bg-destructive {
   background-color: hsl(var(--destructive));
 }
@@ -1035,6 +1067,9 @@ video {
 .p-1 {
   padding: 0.25rem;
 }
+.p-2 {
+  padding: 0.5rem;
+}
 .p-4 {
   padding: 1rem;
 }
@@ -1188,6 +1223,12 @@ video {
 .text-secondary-foreground {
   color: hsl(var(--secondary-foreground));
 }
+.text-textColors-primaryColor {
+  color: var(--textColors-primaryColor);
+}
+.text-textColors-secondaryColor {
+  color: var(--textColors-secondaryColor);
+}
 .underline-offset-4 {
   text-underline-offset: 4px;
 }
@@ -1257,7 +1298,14 @@ video {
   animation-duration: 200ms;
 }
 /* Hide scrollbar for Chrome, Safari and Opera */
+.no-scrollbar *::-webkit-scrollbar {
+    display: none;
+  }
 /* Hide scrollbar for IE, Edge and Firefox */
+.no-scrollbar * {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
 .container {
     padding-right: 16px;
     padding-left: 16px;

package/dist/index.d.ts

@@ -19,6 +19,7 @@ export * from "./components/ui/switch";
 export * from "./components/ui/scroll-area";
 export * from "./components/ui/toast";
 export * from "./components/ui/toaster";
+export * from "./components/ui/chip";
 export * from "./components/ui/use-toast";
 export * from "./components/ThemeToggle";
 export { ThemeProvider } from "./components/ThemeProvider";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.tsx"],"names":[],"mappings":"AAGA,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,2BAA2B,CAAA;AACzC,cAAc,0BAA0B,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.tsx"],"names":[],"mappings":"AAGA,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,0BAA0B,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAA"}

package/dist/index.js

@@ -20,6 +20,7 @@ export * from "./components/ui/switch";
 export * from "./components/ui/scroll-area";
 export * from "./components/ui/toast";
 export * from "./components/ui/toaster";
+export * from "./components/ui/chip";
 export * from "./components/ui/use-toast";
 export * from "./components/ThemeToggle";
 export { ThemeProvider } from "./components/ThemeProvider";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.1.42",
+  "version": "0.1.43",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
@@ -15,7 +15,6 @@
   "scripts": {
     "lint": "eslint \"**/*.ts*\"",
     "ui:add": "pnpm dlx shadcn-ui@latest add",
-    "build:styles": "postcss styles/globals.css -o dist/styles.css",
     "build:ts": "tsc -p tsconfig.json",
     "build": "pnpm run build:ts && pnpm run build:styles",
     "build:sdk": "tsc && node scripts/build-css.js"

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

@@ -1,32 +0,0 @@
-/// <reference types="react" />
-type ProductCardProps = {
-    product: {
-        variants: {
-            compare_at_price: number | null;
-            price: number;
-        }[];
-        images: {
-            src: string;
-        }[];
-        title: string;
-        tags: string[];
-    };
-    className?: string;
-    quickAdd: (e: React.MouseEvent<HTMLButtonElement>, product: any) => void;
-    openProduct: (e: React.MouseEvent<HTMLDivElement>, product: any) => void;
-    imageRatio: "1:1" | "2:3" | "4:5";
-    imageFit: "fit" | "fill";
-    theme: {
-        textColors: {
-            priceProduct: string;
-            productTitle: string;
-        };
-        font: {
-            productTitle: string;
-            productPrice: string;
-        };
-    };
-};
-declare const ProductCard: React.FC<ProductCardProps>;
-export default ProductCard;
-//# sourceMappingURL=product-card.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"product-card.d.ts","sourceRoot":"","sources":["../../../components/ui/product-card.tsx"],"names":[],"mappings":";AAGA,KAAK,gBAAgB,GAAG;IACtB,OAAO,EAAE;QACP,QAAQ,EAAE;YAAE,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,EAAE,CAAC;QAC/D,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,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACzE,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACzE,UAAU,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IAClC,QAAQ,EAAE,KAAK,GAAG,MAAM,CAAC;IACzB,KAAK,EAAE;QACL,UAAU,EAAE;YACV,YAAY,EAAE,MAAM,CAAC;YACrB,YAAY,EAAE,MAAM,CAAC;SACtB,CAAC;QACF,IAAI,EAAE;YACJ,YAAY,EAAE,MAAM,CAAC;YACrB,YAAY,EAAE,MAAM,CAAC;SACtB,CAAC;KACH,CAAC;CACH,CAAC;AAEF,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA0E3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -1,22 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, AspectRatio, Text, Badge, Loading } from "@tapcart/mobile-components";
-import { useEffect, useState } from "react";
-const ProductCard = ({ product, className, quickAdd, openProduct, imageRatio, imageFit, theme, }) => {
-    const [loading, setLoading] = useState(true);
-    useEffect(() => {
-        // Simulate loading
-        const timer = setTimeout(() => setLoading(false), 1000);
-        return () => clearTimeout(timer);
-    }, []);
-    const variant = product.variants[0];
-    const aspectRatio = {
-        "1:1": 1,
-        "2:3": 2 / 3,
-        "4:5": 4 / 5,
-    }[imageRatio];
-    if (loading) {
-        return _jsx(Loading, {});
-    }
-    return (_jsxs("div", Object.assign({ className: `${className}`, onClick: (e) => openProduct(e, product) }, { children: [_jsxs(AspectRatio, Object.assign({ ratio: aspectRatio }, { children: [_jsx("img", { className: `w-full h-full object-${imageFit} rounded-t-lg`, src: product.images[0].src, alt: product.title }), product.tags.includes("SUMMER") && (_jsx(Badge, Object.assign({ variant: "secondary", className: "absolute bottom-[15px] rounded-none bg-[#e2fe9f] pointer-events-none" }, { children: "SUMMER" })))] })), _jsx(Button, Object.assign({ variant: "quickadd", size: "sm", onClick: (e) => quickAdd(e, product) }, { children: "+ Quick add" })), _jsx(Text, Object.assign({ className: `text-xs mt-[8px] ${theme.font.productTitle}`, style: { color: theme.textColors.productTitle } }, { children: product.title })), _jsxs("div", Object.assign({ className: "flex mt-[4px]" }, { children: [variant.compare_at_price && (_jsxs(Text, Object.assign({ className: `text-sm mr-[8px] line-through text-red-500 ${theme.font.productPrice}` }, { children: ["$", variant.compare_at_price] }))), _jsxs(Text, Object.assign({ className: `text-sm ${theme.font.productPrice}`, style: { color: theme.textColors.priceProduct } }, { children: ["$", variant.price] }))] }))] })));
-};
-export default ProductCard;