react-gm3carousel
Advanced tools
Comparing version 0.0.4 to 0.0.6
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, withSmallItemsMaxSize, slideWrapperClassName, }: { | ||
declare const GM3Carousel: ({ className, slides, perPage, speedS, withDualSmallItems, smallItemClassName, bigItemClassName, isPaused, pauseOnMouseEnter, isVertical, slideWrapperClassName, }: { | ||
className?: string; | ||
@@ -18,3 +18,2 @@ slides: { | ||
isVertical?: boolean; | ||
withSmallItemsMaxSize?: boolean; | ||
slideWrapperClassName?: string; | ||
@@ -21,0 +20,0 @@ }) => react_jsx_runtime.JSX.Element; |
@@ -84,3 +84,2 @@ "use strict"; | ||
isVertical = false, | ||
withSmallItemsMaxSize = true, | ||
slideWrapperClassName = "duration-500" | ||
@@ -91,3 +90,3 @@ }) => { | ||
perPage + 2 + (withDualSmallItems ? 2 : 0), | ||
speedS + 0.5, | ||
speedS + 4, | ||
isPaused || pauseOnMouseEnter && t | ||
@@ -109,3 +108,2 @@ ); | ||
const variant = (() => { | ||
const maxSize = withSmallItemsMaxSize ? "grow-[40px]" : ""; | ||
if (idx === 0) | ||
@@ -116,12 +114,28 @@ return "flex-[0]"; | ||
if (idx === 1) | ||
return (0, import_tailwind_merge.twMerge)("flex-[0.33]", maxSize, smallItemClassName); | ||
return (0, import_tailwind_merge.twMerge)("flex-[0.33]", smallItemClassName); | ||
if (idx === slidesSlice.length - 2) | ||
return (0, import_tailwind_merge.twMerge)("flex-[0.33]", maxSize, smallItemClassName); | ||
return (0, import_tailwind_merge.twMerge)("flex-[0.33]", smallItemClassName); | ||
if (withDualSmallItems) { | ||
if (idx === 2) | ||
return (0, import_tailwind_merge.twMerge)("flex-[0.33]", maxSize, smallItemClassName); | ||
return (0, import_tailwind_merge.twMerge)("flex-[0.33]", smallItemClassName); | ||
if (idx === slidesSlice.length - 3) | ||
return (0, import_tailwind_merge.twMerge)("flex-[0.33]", maxSize, smallItemClassName); | ||
return (0, import_tailwind_merge.twMerge)("flex-[0.33]", smallItemClassName); | ||
} | ||
return (0, import_tailwind_merge.twMerge)("flex-1", bigItemClassName); | ||
})(), isActive = (() => { | ||
if (idx === 0) | ||
return; | ||
if (idx === slidesSlice.length - 1) | ||
return; | ||
if (idx === 1) | ||
return; | ||
if (idx === slidesSlice.length - 2) | ||
return; | ||
if (withDualSmallItems) { | ||
if (idx === 2) | ||
return; | ||
if (idx === slidesSlice.length - 3) | ||
return; | ||
} | ||
return true; | ||
})(); | ||
@@ -132,6 +146,7 @@ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)( | ||
className: (0, import_tailwind_merge.twMerge)( | ||
"relative overflow-hidden rounded-[30px] transition-all duration-500 ease-linear", | ||
"relative overflow-hidden rounded-[30px] transition-all duration-[4ss] ease-linear", | ||
variant, | ||
slideWrapperClassName | ||
), | ||
"data-active": isActive, | ||
children: slide.content | ||
@@ -138,0 +153,0 @@ }, |
{ | ||
"name": "react-gm3carousel", | ||
"version": "0.0.4", | ||
"version": "0.0.6", | ||
"description": "Google Material 3 Carousel in React", | ||
@@ -25,2 +25,3 @@ "scripts": { | ||
"autoprefixer": "^10.4.19", | ||
"ladle": "^0.0.0", | ||
"postcss": "^8.4.38", | ||
@@ -27,0 +28,0 @@ "react": "^18.2.0", |
@@ -74,5 +74,2 @@ # Google Material Design v3 Carousel for React! | ||
// sets a width of 40px of the small previews/items as stated by Google Material Design | ||
withSmallItemsMaxSize?: boolean; | ||
slideWrapperClassName?: string; | ||
@@ -79,0 +76,0 @@ } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
37524
583
11
87