@tapcart/mobile-components 0.7.85 → 0.7.87

package/dist/components/ui/animate-container.d.ts

@@ -1,14 +1,20 @@
 import React from "react";
-type AnimationType = "slideUp";
+type AnimationType = "slide" | "fade";
+interface AnimationConfig {
+    enter: string;
+    exit: string;
+    isHeight: boolean;
+}
+export declare const Animations: Record<AnimationType, AnimationConfig>;
 interface AnimateContainerProps {
-    show: boolean;
     children: React.ReactNode;
-    type: AnimationType;
+    animations: AnimationConfig[];
     duration?: number;
     className?: string;
-    skipInitAnimation?: boolean;
+    isLoading?: boolean;
+    hasData?: boolean;
 }
-export declare function AnimateContainer({ show, children, type, duration, className, skipInitAnimation, }: AnimateContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function AnimateContainer({ children, animations, duration, className, isLoading, hasData, }: AnimateContainerProps): import("react/jsx-runtime").JSX.Element;
 export declare function SlideUp(props: Omit<AnimateContainerProps, "type">): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=animate-container.d.ts.map

package/dist/components/ui/animate-container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"animate-container.d.ts","sourceRoot":"","sources":["../../../components/ui/animate-container.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAG1D,KAAK,aAAa,GAAG,SAAS,CAAA;AAgB9B,UAAU,qBAAqB;IAC7B,IAAI,EAAE,OAAO,CAAA;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,IAAI,EAAE,aAAa,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAA;CAC5B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,QAAc,EACd,SAAS,EACT,iBAAyB,GAC1B,EAAE,qBAAqB,2CAkCvB;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,qBAAqB,EAAE,MAAM,CAAC,2CAEjE"}
+{"version":3,"file":"animate-container.d.ts","sourceRoot":"","sources":["../../../components/ui/animate-container.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAG1D,KAAK,aAAa,GAAG,OAAO,GAAG,MAAM,CAAA;AAErC,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,aAAa,EAAE,eAAe,CAW7D,CAAA;AAED,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,UAAU,EAAE,eAAe,EAAE,CAAA;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,UAAU,EACV,QAAc,EACd,SAAS,EACT,SAAS,EACT,OAAO,GACR,EAAE,qBAAqB,2CAyCvB;AAGD,wBAAgB,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,qBAAqB,EAAE,MAAM,CAAC,2CAEjE"}

package/dist/components/ui/animate-container.js

@@ -2,29 +2,44 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from "react";
 import { cn } from "../../lib/utils";
-const ANIMATIONS = {
-    slideUp: {
+export const Animations = {
+    slide: {
         enter: "animate-slide-down",
         exit: "animate-slide-up",
-        needsHeight: true,
+        isHeight: true,
+    },
+    fade: {
+        enter: "animate-fadeIn",
+        exit: "animate-fadeOut",
+        isHeight: false,
     },
 };
-export function AnimateContainer({ show, children, type, duration = 300, className, skipInitAnimation = false, }) {
+export function AnimateContainer({ children, animations, duration = 300, className, isLoading, hasData, }) {
     const contentRef = useRef(null);
-    const prevHeight = useRef(0);
-    const [shouldAnimate, setShouldAnimate] = useState(!skipInitAnimation);
-    const animation = ANIMATIONS[type];
+    const [prevData, setPrevData] = useState(hasData !== null && hasData !== void 0 ? hasData : false);
+    const [shouldAnimate, setShouldAnimate] = useState(false);
     useEffect(() => {
-        if (contentRef.current && animation.needsHeight) {
+        if (contentRef.current &&
+            (animations === null || animations === void 0 ? void 0 : animations.some((animation) => animation.isHeight))) {
             contentRef.current.style.setProperty("--content-height", `${contentRef.current.scrollHeight}px`);
-            if (!skipInitAnimation || prevHeight.current !== 0) {
-                prevHeight.current = contentRef.current.scrollHeight;
-                setShouldAnimate(true);
-            }
         }
-    }, [show, skipInitAnimation, animation.needsHeight]);
-    return (_jsx("div", Object.assign({ ref: contentRef, className: cn("overflow-hidden", shouldAnimate && (show ? animation.enter : animation.exit), className), style: { animationDuration: `${duration}ms` } }, { children: children })));
+        if (isLoading)
+            return;
+        if (prevData !== hasData) {
+            setShouldAnimate(true);
+            setPrevData(hasData !== null && hasData !== void 0 ? hasData : false);
+        }
+    }, [hasData, isLoading, animations, prevData]);
+    const getAnimationClasses = () => {
+        if (!shouldAnimate)
+            return "";
+        return animations
+            .map((animation) => (hasData ? animation.enter : animation.exit))
+            .join(" ");
+    };
+    return (_jsx("div", Object.assign({ ref: contentRef, className: cn("overflow-hidden", getAnimationClasses(), className), style: { animationDuration: `${duration}ms` } }, { children: children })));
 }
+// TO REMOVE
 export function SlideUp(props) {
-    return _jsx(AnimateContainer, Object.assign({}, props, { type: "slideUp" }));
+    return _jsx(AnimateContainer, Object.assign({}, props, { animations: [Animations.slide] }));
 }

package/dist/components/ui/radio-group.js

@@ -24,7 +24,7 @@ const RadioGroup = React.forwardRef((_a, ref) => {
     return (_jsx(RadioGroupPrimitive.Root, Object.assign({ className: cn("grid gap-4", className) }, props, { ref: ref })));
 });
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-const radiogroupItemVariants = cva("grid grid-cols-[auto,auto,1fr] gap-2 items-start group", {
+const radiogroupItemVariants = cva("grid grid-cols-[auto,auto,1fr] gap-2 items-center group", {
     variants: {
         variant: {
             default: "",
@@ -36,12 +36,12 @@ const radiogroupItemVariants = cva("grid grid-cols-[auto,auto,1fr] gap-2 items-s
         variant: "default",
     },
 });
-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 })), numberAmount ? (_jsx(Text, Object.assign({ type: "body-primary", className: "text-textColors-secondaryColor group-disabled:text-stateColors-disabled" }, { children: `(${numberAmount})` }))) : null] })), subtext ? (_jsx(Text, Object.assign({ type: "body-secondary", className: "group-disabled:text-stateColors-disabled mt-2" }, { children: subtext }))) : null] })));
+const RadioGroupItemLabels = ({ key, label, numberAmount, subtext, }) => (_jsxs("div", Object.assign({ className: "col-span-2" }, { children: [_jsxs("div", Object.assign({ className: "flex flex-row items-center" }, { children: [_jsx(Text, Object.assign({ type: "body-primary", className: "group-disabled:text-stateColors-disabled mr-2" }, { children: label })), numberAmount ? (_jsx(Text, Object.assign({ type: "body-primary", className: "text-textColors-secondaryColor group-disabled:text-stateColors-disabled" }, { children: `(${numberAmount})` }))) : null] })), subtext ? (_jsx(Text, Object.assign({ type: "body-secondary", className: "group-disabled:text-stateColors-disabled mt-1" }, { children: subtext }))) : null] })));
 const RadioGroupItem = React.forwardRef((_a, ref) => {
     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"]);
     const { onTap, ref: tapRef } = useTap();
     const mergedRef = useMergeRefs(ref, tapRef);
-    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" }), _jsx(RadioGroupItemLabels, { label: label, numberAmount: numberAmount, subtext: subtext }, key)] })) : (_jsx(RadioGroupPrimitive.Item, Object.assign({ ref: mergedRef, value: value, onSelect: onSelect, checked: selected, onClick: onTap(onClick), className: cn("flex items-center justify-center active:opacity-70", 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" }), _jsx(RadioGroupItemLabels, { label: label, numberAmount: numberAmount, subtext: subtext }, key)] }))) : (_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" }) })), _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" }) }))] })), _jsx(RadioGroupItemLabels, { label: label, numberAmount: numberAmount, subtext: subtext }, key)] }))) }))) })));
+    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" }), _jsx(RadioGroupItemLabels, { label: label, numberAmount: numberAmount, subtext: subtext }, key)] })) : (_jsx(RadioGroupPrimitive.Item, Object.assign({ ref: mergedRef, value: value, onSelect: onSelect, checked: selected, onClick: onTap(onClick), className: cn("flex items-center justify-center active:opacity-70", className) }, props, { children: selected || variant === "selected" ? (_jsxs("div", Object.assign({ className: "grid grid-cols-[auto,auto,1fr] gap-2 items-center group" }, { children: [_jsx(Icon, { name: "circle-dot-filled", size: "md", className: "text-coreColors-brandColorPrimary z-10" }), _jsx(RadioGroupItemLabels, { label: label, numberAmount: numberAmount, subtext: subtext }, key)] }))) : (_jsxs("div", Object.assign({ className: "grid grid-cols-[auto,auto,1fr] gap-2 items-center 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" }) })), _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" }) }))] })), _jsx(RadioGroupItemLabels, { label: label, numberAmount: numberAmount, subtext: subtext }, key)] }))) }))) })));
 });
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 export { RadioGroup, RadioGroupItem, radiogroupItemVariants };

package/dist/styles.css

@@ -902,6 +902,12 @@ video {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
+.line-clamp-3 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
 .block {
   display: block;
 }
@@ -1224,6 +1230,12 @@ video {
 .animate-bounce {
   animation: bounce 1s infinite;
 }
+.animate-fadeIn {
+  animation: fadeIn .3s ease-in-out;
+}
+.animate-fadeOut {
+  animation: fadeOut .3s ease-in-out;
+}
 @keyframes pulse {
 
   50% {
@@ -1244,7 +1256,7 @@ video {
   }
 }
 .animate-slide-down {
-  animation: slide-down 0.2s ease-out;
+  animation: slide-down 0.3s ease-in-out;
 }
 @keyframes slide-up {
 
@@ -1257,7 +1269,7 @@ video {
   }
 }
 .animate-slide-up {
-  animation: slide-up 0.2s ease-out;
+  animation: slide-up 0.3s ease-in-out;
 }
 @keyframes spin {
 
@@ -2214,6 +2226,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));
   }
 }
+.fade-in {
+  --tw-enter-opacity: 0;
+}
 .duration-150 {
   animation-duration: 150ms;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.7.85",
+  "version": "0.7.87",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",