@latte-macchiat-io/latte-vanilla-components 0.0.310 → 0.0.311

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.310",
+  "version": "0.0.311",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/Carousel/index.tsx

@@ -11,6 +11,7 @@ import {
   carouselItem,
   carouselNav,
   carouselNavButton,
+  CarouselNavVariants,
   carouselRecipe,
   carouselSlide,
   type CarouselVariants,
@@ -23,7 +24,8 @@ import { useWindowSize } from '../../utils/useWindowSize';
 import { Icon } from '../Icon';
 
 export type CarouselProps = React.HTMLAttributes<HTMLDivElement> &
-  CarouselVariants & {
+  CarouselVariants &
+  CarouselNavVariants & {
     gap?: number;
     data: ReactNode[];
     itemsPerView?: number;
@@ -44,6 +46,8 @@ export const Carousel = ({
   gap = 16,
   isFullWidth,
   className,
+  navPositionVertical,
+  navPositionHorizontal,
 }: CarouselProps) => {
   const { width: windowWidth } = useWindowSize();
   const [currentIndex, setCurrentIndex] = useState(0);
@@ -171,7 +175,7 @@ export const Carousel = ({
       </div>
 
       {showNavButtons && (
-        <div className={carouselNav}>
+        <div className={carouselNav({ navPositionHorizontal, navPositionVertical })}>
           <button type="button" className={carouselNavButton} onClick={handlePrevious} disabled={currentIndex === 0} aria-label="Previous slide">
             <Icon icon="arrowBack" />
           </button>

package/src/components/Carousel/styles.css.ts

@@ -48,6 +48,7 @@ export const carouselRecipe = recipe(
           },
         },
       },
+      navPosition: {},
     },
 
     defaultVariants: {
@@ -94,21 +95,56 @@ globalStyle(`${carouselItem} > div`, {
   },
 });
 
-export const carouselNav = style(
+export const carouselNav = recipe(
   {
-    left: 0,
-    right: 0,
-    bottom: 0,
-    zIndex: 30,
-    width: '100%',
-    display: 'flex',
-    position: 'absolute',
-    pointerEvents: 'none',
-    justifyContent: 'flex-end',
+    base: {
+      zIndex: 30,
+      width: '100%',
+      display: 'flex',
+      position: 'absolute',
+      pointerEvents: 'none',
+      justifyContent: 'flex-end',
 
-    gap: themeContract.space.sm,
-    padding: themeContract.space.md,
-    maxWidth: themeContract.maxWidth,
+      gap: themeContract.space.sm,
+      padding: themeContract.space.md,
+      maxWidth: themeContract.maxWidth,
+    },
+
+    variants: {
+      navPositionHorizontal: {
+        left: {
+          left: 0,
+        },
+        right: {
+          right: 0,
+        },
+        spaceBetween: {
+          left: 0,
+          right: 0,
+        },
+        center: {
+          left: 'auto',
+          right: 'auto',
+        },
+      },
+
+      navPositionVertical: {
+        top: {
+          top: 0,
+        },
+        center: {
+          top: '50%',
+        },
+        bottom: {
+          top: '100%',
+        },
+      },
+    },
+
+    defaultVariants: {
+      navPositionHorizontal: 'spaceBetween',
+      navPositionVertical: 'center',
+    },
   },
   'carousel-nav'
 );
@@ -198,3 +234,4 @@ export const carouselBulletActive = style(
 );
 
 export type CarouselVariants = RecipeVariants<typeof carouselRecipe>;
+export type CarouselNavVariants = RecipeVariants<typeof carouselNav>;

package/src/components/Carousel/theme.ts

@@ -1,13 +1,5 @@
 const themeCarouselBase = {
   carousel: {
-    gap: {
-      mobile: '15',
-      sm: '15',
-      md: '30',
-      lg: '30',
-      xl: '50',
-      '2xl': '50',
-    },
     nav: {
       borderRadius: '1000px',
       width: {