@latte-macchiat-io/latte-vanilla-components 0.0.331 → 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 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@latte-macchiat-io/latte-vanilla-components",
3
- "version": "0.0.331",
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,10 +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
- 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
+ },
63
76
  },
64
77
  'carousel-content'
65
78
  );
@@ -253,4 +266,5 @@ export const carouselBulletActive = style(
253
266
  );
254
267
 
255
268
  export type CarouselVariants = RecipeVariants<typeof carouselRecipe>;
269
+ export type CarouselContentVariants = RecipeVariants<typeof carouselContent>;
256
270
  export type CarouselNavVariants = RecipeVariants<typeof carouselNav>;