react-gm3carousel - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

dist/index.d.ts

 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 
-declare const GM3Carousel: ({ className, slides, perPage, speedS, withDualSmallItems, smallItemClassName, bigItemClassName, isPaused, pauseOnMouseEnter, isVertical, slideWrapperClassName, }: {
+declare const GM3Carousel: ({ className, slides, perPage, speedS, withDualSmallItems, smallItemClassName, bigItemClassName, isPaused, pauseOnMouseEnter, isVertical, slideWrapperClassName, gap, }: {
     className?: string;
@@ -19,4 +19,5 @@ slides: {
     slideWrapperClassName?: string;
+    gap?: number;
 }) => react_jsx_runtime.JSX.Element;
 
 export { GM3Carousel };

dist/index.js

@@ -84,3 +84,4 @@ "use strict";
   isVertical = false,
-  slideWrapperClassName = "duration-500"
+  slideWrapperClassName = "gm3c-duration-500",
+  gap = 16
 }) => {
@@ -90,3 +91,3 @@ const [t, setT] = (0, import_react2.useState)(false), slidesSlice = useLoopData_default(
     perPage + 2 + (withDualSmallItems ? 2 : 0),
-    speedS + 4,
+    speedS + 0.5,
     isPaused || pauseOnMouseEnter && t
@@ -97,6 +98,7 @@ );
     __spreadProps(__spreadValues({
+      style: { gap },
       className: (0, import_tailwind_merge.twMerge)(
-        "flex h-full w-full gap-4",
+        "gm3c-flex gm3c-h-full gm3c-w-full",
         className,
-        isVertical ? "flex-col" : "flex-row"
+        isVertical ? "gm3c-flex-col" : "gm3c-flex-row"
       )
@@ -110,16 +112,16 @@ }, pauseOnMouseEnter && {
           if (idx === 0)
-            return "flex-[0]";
+            return "gm3c-flex-[0]";
           if (idx === slidesSlice.length - 1)
-            return "flex-[0]";
+            return "gm3c-flex-[0]";
           if (idx === 1)
-            return (0, import_tailwind_merge.twMerge)("flex-[0.33]", smallItemClassName);
+            return (0, import_tailwind_merge.twMerge)("gm3c-flex-[0.33]", smallItemClassName);
           if (idx === slidesSlice.length - 2)
-            return (0, import_tailwind_merge.twMerge)("flex-[0.33]", smallItemClassName);
+            return (0, import_tailwind_merge.twMerge)("gm3c-flex-[0.33]", smallItemClassName);
           if (withDualSmallItems) {
             if (idx === 2)
-              return (0, import_tailwind_merge.twMerge)("flex-[0.33]", smallItemClassName);
+              return (0, import_tailwind_merge.twMerge)("gm3c-flex-[0.33]", smallItemClassName);
             if (idx === slidesSlice.length - 3)
-              return (0, import_tailwind_merge.twMerge)("flex-[0.33]", smallItemClassName);
+              return (0, import_tailwind_merge.twMerge)("gm3c-flex-[0.33]", smallItemClassName);
           }
-          return (0, import_tailwind_merge.twMerge)("flex-1", bigItemClassName);
+          return (0, import_tailwind_merge.twMerge)("gm3c-flex-1", bigItemClassName);
         })(), isActive = (() => {
@@ -141,2 +143,14 @@ if (idx === 0)
           return true;
+        })(), style = (() => {
+          if (isVertical) {
+            if (idx === slidesSlice.length - 1)
+              return { marginBottom: -gap };
+            if (idx === 0)
+              return { marginTop: -gap };
+            return;
+          }
+          if (idx === slidesSlice.length - 1)
+            return { marginLeft: -gap };
+          if (idx === 0)
+            return { marginRight: -gap };
         })();
@@ -147,3 +161,3 @@ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             className: (0, import_tailwind_merge.twMerge)(
-              "relative overflow-hidden rounded-[30px] transition-all duration-[4ss] ease-linear",
+              "gm3c-relative gm3c-overflow-hidden gm3c-rounded-[30px] gm3c-transition-all gm3c-duration-500 gm3c-ease-linear",
               variant,
@@ -153,2 +167,3 @@ slideWrapperClassName
             "data-active": isActive,
+            style,
             children: slide.content
@@ -155,0 +170,0 @@ },

package.json

 {
   "name": "react-gm3carousel",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Google Material 3 Carousel in React",
@@ -25,2 +25,3 @@ "scripts": {
     "autoprefixer": "^10.4.19",
+    "cssnano": "^6.1.2",
     "ladle": "^0.0.0",
@@ -27,0 +28,0 @@ "postcss": "^8.4.38",

No alert changes

Improved metrics

Total package byte prevSize

38763

increased by2.93%

Worsened metrics

Dev dependency count

12

increased by9.09%

Lines of code

581

decreased by-0.34%

No dependency changes