@modul/mbui 0.0.27 → 0.0.28-beta-pv-53383-07e6b5b9

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.
@@ -0,0 +1,16 @@
1
+ import * as React from "react";
2
+ import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
3
+ declare type CarouselApi = UseEmblaCarouselType[1];
4
+ declare type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
5
+ declare type CarouselOptions = UseCarouselParameters[0];
6
+ declare type CarouselPlugin = UseCarouselParameters[1];
7
+ export declare type CarouselProps = {
8
+ opts?: CarouselOptions;
9
+ plugins?: CarouselPlugin;
10
+ orientation?: "horizontal" | "vertical";
11
+ setApi?: (api: CarouselApi) => void;
12
+ };
13
+ export declare const Carousel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & CarouselProps & React.RefAttributes<HTMLDivElement>>;
14
+ export declare const CarouselContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
15
+ export declare const CarouselItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
16
+ export {};
@@ -0,0 +1,144 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.CarouselItem = exports.CarouselContent = exports.Carousel = void 0;
4
+ const tslib_1 = require("tslib");
5
+ const React = (0, tslib_1.__importStar)(require("react"));
6
+ const embla_carousel_react_1 = (0, tslib_1.__importDefault)(require("embla-carousel-react"));
7
+ const utils_1 = require("../@/lib/utils");
8
+ const CarouselContext = React.createContext(null);
9
+ function useCarousel() {
10
+ const context = React.useContext(CarouselContext);
11
+ if (!context) {
12
+ throw new Error("useCarousel must be used within a <Carousel />");
13
+ }
14
+ return context;
15
+ }
16
+ exports.Carousel = React.forwardRef(({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
17
+ const [carouselRef, api] = (0, embla_carousel_react_1.default)({
18
+ ...opts,
19
+ axis: orientation === "horizontal" ? "x" : "y",
20
+ }, plugins);
21
+ const [canScrollPrev, setCanScrollPrev] = React.useState(false);
22
+ const [canScrollNext, setCanScrollNext] = React.useState(false);
23
+ const onSelect = React.useCallback((api) => {
24
+ if (!api) {
25
+ return;
26
+ }
27
+ setCanScrollPrev(api.canScrollPrev());
28
+ setCanScrollNext(api.canScrollNext());
29
+ }, []);
30
+ const scrollPrev = React.useCallback(() => {
31
+ api?.scrollPrev();
32
+ }, [api]);
33
+ const scrollNext = React.useCallback(() => {
34
+ api?.scrollNext();
35
+ }, [api]);
36
+ const handleKeyDown = React.useCallback((event) => {
37
+ if (event.key === "ArrowLeft") {
38
+ event.preventDefault();
39
+ scrollPrev();
40
+ }
41
+ else if (event.key === "ArrowRight") {
42
+ event.preventDefault();
43
+ scrollNext();
44
+ }
45
+ }, [scrollPrev, scrollNext]);
46
+ React.useEffect(() => {
47
+ if (!api || !setApi) {
48
+ return;
49
+ }
50
+ setApi(api);
51
+ }, [api, setApi]);
52
+ React.useEffect(() => {
53
+ if (!api) {
54
+ return;
55
+ }
56
+ onSelect(api);
57
+ api.on("reInit", onSelect);
58
+ api.on("select", onSelect);
59
+ return () => {
60
+ api?.off("select", onSelect);
61
+ };
62
+ }, [api, onSelect]);
63
+ return (React.createElement(CarouselContext.Provider, { value: {
64
+ carouselRef,
65
+ api: api,
66
+ opts,
67
+ orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
68
+ scrollPrev,
69
+ scrollNext,
70
+ canScrollPrev,
71
+ canScrollNext,
72
+ } },
73
+ React.createElement("div", { ref: ref, onKeyDownCapture: handleKeyDown, className: (0, utils_1.cn)("relative", className), role: "region", "aria-roledescription": "carousel", ...props }, children)));
74
+ });
75
+ exports.Carousel.displayName = "Carousel";
76
+ exports.CarouselContent = React.forwardRef(({ className, ...props }, ref) => {
77
+ const { carouselRef, orientation } = useCarousel();
78
+ return (React.createElement("div", { ref: carouselRef, className: "overflow-hidden" },
79
+ React.createElement("div", { ref: ref, className: (0, utils_1.cn)("flex", { "flex-col": orientation !== "horizontal" }, className), ...props })));
80
+ });
81
+ exports.CarouselContent.displayName = "CarouselContent";
82
+ exports.CarouselItem = React.forwardRef(({ className, ...props }, ref) => {
83
+ const { orientation } = useCarousel();
84
+ return (React.createElement("div", { ref: ref, role: "group", "aria-roledescription": "slide", className: (0, utils_1.cn)("min-w-0 shrink-0 grow-0", className), ...props }));
85
+ });
86
+ exports.CarouselItem.displayName = "CarouselItem";
87
+ // const CarouselPrevious = React.forwardRef<
88
+ // HTMLButtonElement,
89
+ // React.ComponentProps<typeof Button>
90
+ // >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
91
+ // const { orientation, scrollPrev, canScrollPrev } = useCarousel()
92
+ //
93
+ // return (
94
+ // <Button
95
+ // ref={ref}
96
+ // variant={variant}
97
+ // size={size}
98
+ // className={cn(
99
+ // "absolute h-8 w-8 rounded-full",
100
+ // orientation === "horizontal"
101
+ // ? "-left-12 top-1/2 -translate-y-1/2"
102
+ // : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
103
+ // className
104
+ // )}
105
+ // disabled={!canScrollPrev}
106
+ // onClick={scrollPrev}
107
+ // {...props}
108
+ // >
109
+ // <ArrowLeft className="w-4 h-4" />
110
+ // <span className="sr-only">Previous slide</span>
111
+ // </Button>
112
+ // )
113
+ // })
114
+ // CarouselPrevious.displayName = "CarouselPrevious"
115
+ //
116
+ // const CarouselNext = React.forwardRef<
117
+ // HTMLButtonElement,
118
+ // React.ComponentProps<typeof Button>
119
+ // >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
120
+ // const { orientation, scrollNext, canScrollNext } = useCarousel()
121
+ //
122
+ // return (
123
+ // <Button
124
+ // ref={ref}
125
+ // variant={variant}
126
+ // size={size}
127
+ // className={cn(
128
+ // "absolute h-8 w-8 rounded-full",
129
+ // orientation === "horizontal"
130
+ // ? "-right-12 top-1/2 -translate-y-1/2"
131
+ // : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
132
+ // className
133
+ // )}
134
+ // disabled={!canScrollNext}
135
+ // onClick={scrollNext}
136
+ // {...props}
137
+ // >
138
+ // <ArrowRight className="w-4 h-4" />
139
+ // <span className="sr-only">Next slide</span>
140
+ // </Button>
141
+ // )
142
+ // })
143
+ // CarouselNext.displayName = "CarouselNext"
144
+ //# sourceMappingURL=Carousel.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../../src/Carousel/Carousel.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1 @@
1
+ export { Carousel, CarouselContent, CarouselItem, type CarouselProps, } from "./Carousel";
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.CarouselItem = exports.CarouselContent = exports.Carousel = void 0;
4
+ var Carousel_1 = require("./Carousel");
5
+ Object.defineProperty(exports, "Carousel", { enumerable: true, get: function () { return Carousel_1.Carousel; } });
6
+ Object.defineProperty(exports, "CarouselContent", { enumerable: true, get: function () { return Carousel_1.CarouselContent; } });
7
+ Object.defineProperty(exports, "CarouselItem", { enumerable: true, get: function () { return Carousel_1.CarouselItem; } });
8
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Carousel/index.ts"],"names":[],"mappings":";;;AAAA,uCAOmB;AANlB,oGAAA,QAAQ,OAAA;AACR,2GAAA,eAAe,OAAA;AACf,wGAAA,YAAY,OAAA"}
package/dist/index.d.ts CHANGED
@@ -32,4 +32,5 @@ import { Toaster, toast } from './Toaster';
32
32
  import { Checkbox } from './Checkbox';
33
33
  import { Swipe2Show } from './Swipe2Show';
34
34
  import { Skeleton } from './Skeleton';
35
- export { Tabs, Slider, Popover, Logo, InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator, Collapsible, CollapsibleTrigger, CollapsibleContent, AccountCollapsible, AccountCollapsibleHeader, AccountCollapsibleTrigger, AccountCollapsibleContent, AccountCollapsibleContentItem, Button, buttonVariants, InputField, InputLabel, Audio, cn, Icon, Drawer, DrawerTrigger, DrawerTitle, DrawerClose, DrawerContent, BottomNavigation, BottomNavigationList, BottomNavigationListItem, BottomNavigationLink, Page, Chip, Progress, Alert, Switch, Label, Textarea, SelectAccountCard, SelectAccount, SelectAsync, Select, Form, FormLabel, FormField, FormItem, FormControl, FormDescription, FormMessage, Calendar, DatePicker, InputMask, AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, MessageTyping, FavoritePaymentsList, FavoritePaymentsItem, FarvoritePaymentDescription, farvoriteLinkClasses, Badge, badgeVariants, DigitKeyPad, ButtonWidget, Toaster, toast, Checkbox, Swipe2Show, Skeleton, };
35
+ import { Carousel, CarouselContent, CarouselItem } from './Carousel';
36
+ export { Tabs, Slider, Popover, Logo, InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator, Collapsible, CollapsibleTrigger, CollapsibleContent, AccountCollapsible, AccountCollapsibleHeader, AccountCollapsibleTrigger, AccountCollapsibleContent, AccountCollapsibleContentItem, Button, buttonVariants, InputField, InputLabel, Audio, cn, Icon, Drawer, DrawerTrigger, DrawerTitle, DrawerClose, DrawerContent, BottomNavigation, BottomNavigationList, BottomNavigationListItem, BottomNavigationLink, Page, Chip, Progress, Alert, Switch, Label, Textarea, SelectAccountCard, SelectAccount, SelectAsync, Select, Form, FormLabel, FormField, FormItem, FormControl, FormDescription, FormMessage, Calendar, DatePicker, InputMask, AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, MessageTyping, FavoritePaymentsList, FavoritePaymentsItem, FarvoritePaymentDescription, farvoriteLinkClasses, Badge, badgeVariants, DigitKeyPad, ButtonWidget, Toaster, toast, Checkbox, Swipe2Show, Skeleton, Carousel, CarouselContent, CarouselItem, };
package/dist/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.FormMessage = exports.FormDescription = exports.FormControl = exports.FormItem = exports.FormField = exports.FormLabel = exports.Form = exports.Select = exports.SelectAsync = exports.SelectAccount = exports.SelectAccountCard = exports.Textarea = exports.Label = exports.Switch = exports.Alert = exports.Progress = exports.Chip = exports.Page = exports.BottomNavigationLink = exports.BottomNavigationListItem = exports.BottomNavigationList = exports.BottomNavigation = exports.DrawerContent = exports.DrawerClose = exports.DrawerTitle = exports.DrawerTrigger = exports.Drawer = exports.Icon = exports.cn = exports.Audio = exports.InputLabel = exports.InputField = exports.buttonVariants = exports.Button = exports.AccountCollapsibleContentItem = exports.AccountCollapsibleContent = exports.AccountCollapsibleTrigger = exports.AccountCollapsibleHeader = exports.AccountCollapsible = exports.CollapsibleContent = exports.CollapsibleTrigger = exports.Collapsible = exports.InputOTPSeparator = exports.InputOTPSlot = exports.InputOTPGroup = exports.InputOTP = exports.Logo = exports.Popover = exports.Slider = exports.Tabs = void 0;
4
- exports.Skeleton = exports.Swipe2Show = exports.Checkbox = exports.toast = exports.Toaster = exports.ButtonWidget = exports.DigitKeyPad = exports.badgeVariants = exports.Badge = exports.farvoriteLinkClasses = exports.FarvoritePaymentDescription = exports.FavoritePaymentsItem = exports.FavoritePaymentsList = exports.MessageTyping = exports.AlertDialogCancel = exports.AlertDialogAction = exports.AlertDialogDescription = exports.AlertDialogTitle = exports.AlertDialogFooter = exports.AlertDialogHeader = exports.AlertDialogContent = exports.AlertDialogTrigger = exports.AlertDialog = exports.InputMask = exports.DatePicker = exports.Calendar = void 0;
4
+ exports.CarouselItem = exports.CarouselContent = exports.Carousel = exports.Skeleton = exports.Swipe2Show = exports.Checkbox = exports.toast = exports.Toaster = exports.ButtonWidget = exports.DigitKeyPad = exports.badgeVariants = exports.Badge = exports.farvoriteLinkClasses = exports.FarvoritePaymentDescription = exports.FavoritePaymentsItem = exports.FavoritePaymentsList = exports.MessageTyping = exports.AlertDialogCancel = exports.AlertDialogAction = exports.AlertDialogDescription = exports.AlertDialogTitle = exports.AlertDialogFooter = exports.AlertDialogHeader = exports.AlertDialogContent = exports.AlertDialogTrigger = exports.AlertDialog = exports.InputMask = exports.DatePicker = exports.Calendar = void 0;
5
5
  const tslib_1 = require("tslib");
6
6
  const Tabs_1 = require("./Tabs");
7
7
  Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return Tabs_1.Tabs; } });
@@ -113,4 +113,8 @@ const Swipe2Show_1 = require("./Swipe2Show");
113
113
  Object.defineProperty(exports, "Swipe2Show", { enumerable: true, get: function () { return Swipe2Show_1.Swipe2Show; } });
114
114
  const Skeleton_1 = require("./Skeleton");
115
115
  Object.defineProperty(exports, "Skeleton", { enumerable: true, get: function () { return Skeleton_1.Skeleton; } });
116
+ const Carousel_1 = require("./Carousel");
117
+ Object.defineProperty(exports, "Carousel", { enumerable: true, get: function () { return Carousel_1.Carousel; } });
118
+ Object.defineProperty(exports, "CarouselContent", { enumerable: true, get: function () { return Carousel_1.CarouselContent; } });
119
+ Object.defineProperty(exports, "CarouselItem", { enumerable: true, get: function () { return Carousel_1.CarouselItem; } });
116
120
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@modul/mbui",
3
- "version": "0.0.27",
3
+ "version": "0.0.28-beta-pv-53383-07e6b5b9",
4
4
  "packageManager": "yarn@3.5.1",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
@@ -39,6 +39,7 @@
39
39
  "@types/lodash": "4.17.5",
40
40
  "class-variance-authority": "^0.7.0",
41
41
  "clsx": "^2.1.1",
42
+ "embla-carousel-react": "^8.3.1",
42
43
  "input-otp": "1.2.4",
43
44
  "lodash": "4.17.5",
44
45
  "react-day-picker": "^9.0.8",
@@ -0,0 +1,248 @@
1
+ import * as React from "react"
2
+ import useEmblaCarousel, {
3
+ type UseEmblaCarouselType,
4
+ } from "embla-carousel-react"
5
+
6
+ import { cn } from '../@/lib/utils'
7
+
8
+ type CarouselApi = UseEmblaCarouselType[1]
9
+ type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
10
+ type CarouselOptions = UseCarouselParameters[0]
11
+ type CarouselPlugin = UseCarouselParameters[1]
12
+
13
+ export type CarouselProps = {
14
+ opts?: CarouselOptions
15
+ plugins?: CarouselPlugin
16
+ orientation?: "horizontal" | "vertical"
17
+ setApi?: (api: CarouselApi) => void
18
+ }
19
+
20
+ type CarouselContextProps = {
21
+ carouselRef: ReturnType<typeof useEmblaCarousel>[0]
22
+ api: ReturnType<typeof useEmblaCarousel>[1]
23
+ scrollPrev: () => void
24
+ scrollNext: () => void
25
+ canScrollPrev: boolean
26
+ canScrollNext: boolean
27
+ } & CarouselProps
28
+
29
+ const CarouselContext = React.createContext<CarouselContextProps | null>(null)
30
+
31
+ function useCarousel() {
32
+ const context = React.useContext(CarouselContext)
33
+
34
+ if (!context) {
35
+ throw new Error("useCarousel must be used within a <Carousel />")
36
+ }
37
+
38
+ return context
39
+ }
40
+
41
+ export const Carousel = React.forwardRef<
42
+ HTMLDivElement,
43
+ React.HTMLAttributes<HTMLDivElement> & CarouselProps
44
+ >(
45
+ (
46
+ {
47
+ orientation = "horizontal",
48
+ opts,
49
+ setApi,
50
+ plugins,
51
+ className,
52
+ children,
53
+ ...props
54
+ },
55
+ ref
56
+ ) => {
57
+ const [carouselRef, api] = useEmblaCarousel(
58
+ {
59
+ ...opts,
60
+ axis: orientation === "horizontal" ? "x" : "y",
61
+ },
62
+ plugins
63
+ )
64
+ const [canScrollPrev, setCanScrollPrev] = React.useState(false)
65
+ const [canScrollNext, setCanScrollNext] = React.useState(false)
66
+
67
+ const onSelect = React.useCallback((api: CarouselApi) => {
68
+ if (!api) {
69
+ return
70
+ }
71
+
72
+ setCanScrollPrev(api.canScrollPrev())
73
+ setCanScrollNext(api.canScrollNext())
74
+ }, [])
75
+
76
+ const scrollPrev = React.useCallback(() => {
77
+ api?.scrollPrev()
78
+ }, [api])
79
+
80
+ const scrollNext = React.useCallback(() => {
81
+ api?.scrollNext()
82
+ }, [api])
83
+
84
+ const handleKeyDown = React.useCallback(
85
+ (event: React.KeyboardEvent<HTMLDivElement>) => {
86
+ if (event.key === "ArrowLeft") {
87
+ event.preventDefault()
88
+ scrollPrev()
89
+ } else if (event.key === "ArrowRight") {
90
+ event.preventDefault()
91
+ scrollNext()
92
+ }
93
+ },
94
+ [scrollPrev, scrollNext]
95
+ )
96
+
97
+ React.useEffect(() => {
98
+ if (!api || !setApi) {
99
+ return
100
+ }
101
+
102
+ setApi(api)
103
+ }, [api, setApi])
104
+
105
+ React.useEffect(() => {
106
+ if (!api) {
107
+ return
108
+ }
109
+
110
+ onSelect(api)
111
+ api.on("reInit", onSelect)
112
+ api.on("select", onSelect)
113
+
114
+ return () => {
115
+ api?.off("select", onSelect)
116
+ }
117
+ }, [api, onSelect])
118
+
119
+ return (
120
+ <CarouselContext.Provider
121
+ value={{
122
+ carouselRef,
123
+ api: api,
124
+ opts,
125
+ orientation:
126
+ orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
127
+ scrollPrev,
128
+ scrollNext,
129
+ canScrollPrev,
130
+ canScrollNext,
131
+ }}
132
+ >
133
+ <div
134
+ ref={ref}
135
+ onKeyDownCapture={handleKeyDown}
136
+ className={cn("relative", className)}
137
+ role="region"
138
+ aria-roledescription="carousel"
139
+ {...props}
140
+ >
141
+ {children}
142
+ </div>
143
+ </CarouselContext.Provider>
144
+ )
145
+ }
146
+ )
147
+ Carousel.displayName = "Carousel"
148
+
149
+ export const CarouselContent = React.forwardRef<
150
+ HTMLDivElement,
151
+ React.HTMLAttributes<HTMLDivElement>
152
+ >(({ className, ...props }, ref) => {
153
+ const { carouselRef, orientation } = useCarousel()
154
+
155
+ return (
156
+ <div ref={carouselRef} className="overflow-hidden">
157
+ <div
158
+ ref={ref}
159
+ className={cn(
160
+ "flex",
161
+ {"flex-col": orientation !== "horizontal"},
162
+ className
163
+ )}
164
+ {...props}
165
+ />
166
+ </div>
167
+ )
168
+ })
169
+ CarouselContent.displayName = "CarouselContent"
170
+
171
+ export const CarouselItem = React.forwardRef<
172
+ HTMLDivElement,
173
+ React.HTMLAttributes<HTMLDivElement>
174
+ >(({ className, ...props }, ref) => {
175
+ const { orientation } = useCarousel()
176
+
177
+ return (
178
+ <div
179
+ ref={ref}
180
+ role="group"
181
+ aria-roledescription="slide"
182
+ className={cn(
183
+ "min-w-0 shrink-0 grow-0",
184
+ className
185
+ )}
186
+ {...props}
187
+ />
188
+ )
189
+ })
190
+ CarouselItem.displayName = "CarouselItem"
191
+
192
+ // const CarouselPrevious = React.forwardRef<
193
+ // HTMLButtonElement,
194
+ // React.ComponentProps<typeof Button>
195
+ // >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
196
+ // const { orientation, scrollPrev, canScrollPrev } = useCarousel()
197
+ //
198
+ // return (
199
+ // <Button
200
+ // ref={ref}
201
+ // variant={variant}
202
+ // size={size}
203
+ // className={cn(
204
+ // "absolute h-8 w-8 rounded-full",
205
+ // orientation === "horizontal"
206
+ // ? "-left-12 top-1/2 -translate-y-1/2"
207
+ // : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
208
+ // className
209
+ // )}
210
+ // disabled={!canScrollPrev}
211
+ // onClick={scrollPrev}
212
+ // {...props}
213
+ // >
214
+ // <ArrowLeft className="w-4 h-4" />
215
+ // <span className="sr-only">Previous slide</span>
216
+ // </Button>
217
+ // )
218
+ // })
219
+ // CarouselPrevious.displayName = "CarouselPrevious"
220
+ //
221
+ // const CarouselNext = React.forwardRef<
222
+ // HTMLButtonElement,
223
+ // React.ComponentProps<typeof Button>
224
+ // >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
225
+ // const { orientation, scrollNext, canScrollNext } = useCarousel()
226
+ //
227
+ // return (
228
+ // <Button
229
+ // ref={ref}
230
+ // variant={variant}
231
+ // size={size}
232
+ // className={cn(
233
+ // "absolute h-8 w-8 rounded-full",
234
+ // orientation === "horizontal"
235
+ // ? "-right-12 top-1/2 -translate-y-1/2"
236
+ // : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
237
+ // className
238
+ // )}
239
+ // disabled={!canScrollNext}
240
+ // onClick={scrollNext}
241
+ // {...props}
242
+ // >
243
+ // <ArrowRight className="w-4 h-4" />
244
+ // <span className="sr-only">Next slide</span>
245
+ // </Button>
246
+ // )
247
+ // })
248
+ // CarouselNext.displayName = "CarouselNext"
@@ -0,0 +1,8 @@
1
+ export {
2
+ Carousel,
3
+ CarouselContent,
4
+ CarouselItem,
5
+ type CarouselProps,
6
+ // CarouselPrevious,
7
+ // CarouselNext,
8
+ } from "./Carousel"
package/src/index.ts CHANGED
@@ -53,6 +53,11 @@ import { Toaster, toast } from './Toaster'
53
53
  import { Checkbox } from './Checkbox'
54
54
  import { Swipe2Show } from './Swipe2Show'
55
55
  import { Skeleton } from './Skeleton'
56
+ import {
57
+ Carousel,
58
+ CarouselContent,
59
+ CarouselItem,
60
+ } from './Carousel'
56
61
 
57
62
  export {
58
63
  Tabs,
@@ -131,4 +136,7 @@ export {
131
136
  Checkbox,
132
137
  Swipe2Show,
133
138
  Skeleton,
139
+ Carousel,
140
+ CarouselContent,
141
+ CarouselItem,
134
142
  }