@latte-macchiat-io/latte-vanilla-components 0.0.332 → 0.0.333

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/Carousel/index.tsx +6 -3
  3. package/src/components/Carousel/styles.css.ts +17 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@latte-macchiat-io/latte-vanilla-components",
3
- "version": "0.0.332",
3
+ "version": "0.0.333",
4
4
  "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
5
5
  "type": "module",
6
6
  "main": "./src/index.ts",
package/src/components/Carousel/index.tsx CHANGED
@@ -8,10 +8,11 @@ import {
8
8
  carouselBulletActive,
9
9
  carouselBullets,
10
10
  carouselContent,
11
+ type CarouselContentVariants,
11
12
  carouselItem,
12
13
  carouselNav,
13
14
  carouselNavButton,
14
- CarouselNavVariants,
15
+ type CarouselNavVariants,
15
16
  carouselRecipe,
16
17
  carouselSlide,
17
18
  type CarouselVariants,
@@ -25,7 +26,8 @@ import { Icon } from '../Icon';
25
26
 
26
27
  export type CarouselProps = React.HTMLAttributes<HTMLDivElement> &
27
28
  CarouselVariants &
28
- CarouselNavVariants & {
29
+ CarouselNavVariants &
30
+ CarouselContentVariants & {
29
31
  gap?: number;
30
32
  data: ReactNode[];
31
33
  itemsPerView?: number;
@@ -38,6 +40,7 @@ export type CarouselProps = React.HTMLAttributes<HTMLDivElement> &
38
40
 
39
41
  export const Carousel = ({
40
42
  data,
43
+ overflow,
41
44
  itemsPerView = 1,
42
45
  showNavButtons = false,
43
46
  showBullets = false,
@@ -158,7 +161,7 @@ export const Carousel = ({
158
161
 
159
162
  return (
160
163
  <div className={clsx(carouselRecipe({ isFullWidth }), className)}>
161
- <div ref={carouselRef} className={carouselContent}>
164
+ <div ref={carouselRef} className={carouselContent({ overflow })}>
162
165
  <div
163
166
  ref={slideRef}
164
167
  className={carouselSlide}
package/src/components/Carousel/styles.css.ts CHANGED
@@ -56,11 +56,23 @@ export const carouselRecipe = recipe(
56
56
  'carousel'
57
57
  );
58
58
 
59
- export const carouselContent = style(
59
+ export const carouselContent = recipe(
60
60
  {
61
- width: '100%',
62
- overflow: 'hidden',
63
- position: 'relative',
61
+ base: {
62
+ width: '100%',
63
+ position: 'relative',
64
+ },
65
+
66
+ variants: {
67
+ overflow: {
68
+ hidden: { overflow: 'hidden' },
69
+ visible: { overflow: 'visible' },
70
+ },
71
+ },
72
+
73
+ defaultVariants: {
74
+ overflow: 'hidden',
75
+ },
64
76
  },
65
77
  'carousel-content'
66
78
  );
@@ -254,4 +266,5 @@ export const carouselBulletActive = style(
254
266
  );
255
267
 
256
268
  export type CarouselVariants = RecipeVariants<typeof carouselRecipe>;
269
+ export type CarouselContentVariants = RecipeVariants<typeof carouselContent>;
257
270
  export type CarouselNavVariants = RecipeVariants<typeof carouselNav>;