@modul/mbui 0.0.27-beta-pv-53383-2a4c8397 → 0.0.27-beta-pv-53476-4c001a9d
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.
- package/dist/Input/Input.js +1 -1
- package/dist/Input/Input.js.map +1 -1
- package/dist/index.d.ts +1 -2
- package/dist/index.js +1 -5
- package/dist/index.js.map +1 -1
- package/package.json +11 -12
- package/src/Input/Input.tsx +1 -1
- package/src/index.ts +0 -8
- package/dist/Carousel/Carousel.d.ts +0 -16
- package/dist/Carousel/Carousel.js +0 -144
- package/dist/Carousel/Carousel.js.map +0 -1
- package/dist/Carousel/index.d.ts +0 -1
- package/dist/Carousel/index.js +0 -8
- package/dist/Carousel/index.js.map +0 -1
- package/src/Carousel/Carousel.tsx +0 -249
- package/src/Carousel/index.ts +0 -7
package/dist/Input/Input.js
CHANGED
|
@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
|
|
|
5
5
|
const React = (0, tslib_1.__importStar)(require("react"));
|
|
6
6
|
const utils_1 = require("../@/lib/utils");
|
|
7
7
|
const InputLabel = React.forwardRef(({ className, children, ...props }) => {
|
|
8
|
-
return (React.createElement("label", { className: (0, utils_1.cn)('mb-[4px]
|
|
8
|
+
return (React.createElement("label", { className: (0, utils_1.cn)('mb-[4px] text-[12px] text-light leading-[1.16] focus:text-primary focus-visible:text-primary', className), ...props }, children));
|
|
9
9
|
});
|
|
10
10
|
exports.InputLabel = InputLabel;
|
|
11
11
|
InputLabel.displayName = 'InputLabel';
|
package/dist/Input/Input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/Input/Input.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,0CAAmC;AAEnC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAClC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACrC,OAAO,CACN,+BACC,SAAS,EAAE,IAAA,UAAE,EAAC,
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/Input/Input.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,0CAAmC;AAEnC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAClC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACrC,OAAO,CACN,+BACC,SAAS,EAAE,IAAA,UAAE,EAAC,8FAA8F,EAAE,SAAS,CAAC,KACpH,KAAK,IAER,QAAQ,CACF,CACR,CAAA;AACF,CAAC,CACD,CAAA;AAoBoB,gCAAU;AAlB/B,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAErC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAgE,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzI,OAAO,CACN,+BACC,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,IAAA,UAAE,EACZ,2VAA2V,EAC3V,SAAS,CACT,EACD,GAAG,EAAE,GAAG,KACJ,KAAK,GACR,CACF,CAAA;AACF,CAAC,CAAC,CAAA;AAIO,gCAAU;AAFnB,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA"}
|
package/dist/index.d.ts
CHANGED
|
@@ -32,5 +32,4 @@ import { Toaster, toast } from './Toaster';
|
|
|
32
32
|
import { Checkbox } from './Checkbox';
|
|
33
33
|
import { Swipe2Show } from './Swipe2Show';
|
|
34
34
|
import { Skeleton } from './Skeleton';
|
|
35
|
-
|
|
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, };
|
|
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, };
|
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.
|
|
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;
|
|
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,8 +113,4 @@ 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; } });
|
|
120
116
|
//# 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":";;;;;AAAA,iCAA6B;
|
|
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-beta-pv-
|
|
3
|
+
"version": "0.0.27-beta-pv-53476-4c001a9d",
|
|
4
4
|
"packageManager": "yarn@3.5.1",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -39,7 +39,6 @@
|
|
|
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",
|
|
43
42
|
"input-otp": "1.2.4",
|
|
44
43
|
"lodash": "4.17.5",
|
|
45
44
|
"react-day-picker": "^9.0.8",
|
|
@@ -59,15 +58,15 @@
|
|
|
59
58
|
"@babel/preset-env": "^7.9.5",
|
|
60
59
|
"@babel/preset-react": "^7.9.4",
|
|
61
60
|
"@babel/preset-typescript": "^7.21.5",
|
|
62
|
-
"@chromatic-com/storybook": "^
|
|
63
|
-
"@storybook/addon-essentials": "^8.
|
|
64
|
-
"@storybook/addon-interactions": "^8.
|
|
65
|
-
"@storybook/addon-links": "^8.
|
|
61
|
+
"@chromatic-com/storybook": "^3.2.2",
|
|
62
|
+
"@storybook/addon-essentials": "^8.4.1",
|
|
63
|
+
"@storybook/addon-interactions": "^8.4.1",
|
|
64
|
+
"@storybook/addon-links": "^8.4.1",
|
|
66
65
|
"@storybook/addon-webpack5-compiler-babel": "^3.0.3",
|
|
67
|
-
"@storybook/blocks": "^8.
|
|
68
|
-
"@storybook/react": "^8.
|
|
69
|
-
"@storybook/react-webpack5": "^8.
|
|
70
|
-
"@storybook/test": "^8.
|
|
66
|
+
"@storybook/blocks": "^8.4.1",
|
|
67
|
+
"@storybook/react": "^8.4.1",
|
|
68
|
+
"@storybook/react-webpack5": "^8.4.1",
|
|
69
|
+
"@storybook/test": "^8.4.1",
|
|
71
70
|
"@svgr/cli": "8.1.0",
|
|
72
71
|
"@tailwindcss/forms": "^0.5.7",
|
|
73
72
|
"@types/node": "18.11.9",
|
|
@@ -94,7 +93,7 @@
|
|
|
94
93
|
"eslint-plugin-prettier": "4.2.1",
|
|
95
94
|
"eslint-plugin-react": "7.31.10",
|
|
96
95
|
"eslint-plugin-react-hooks": "4.6.0",
|
|
97
|
-
"eslint-plugin-storybook": "^0.
|
|
96
|
+
"eslint-plugin-storybook": "^0.10.2",
|
|
98
97
|
"glob": "^10.2.4",
|
|
99
98
|
"html-webpack-plugin": "5.5.1",
|
|
100
99
|
"image-minimizer-webpack-plugin": "^4.0.2",
|
|
@@ -110,7 +109,7 @@
|
|
|
110
109
|
"prettier": "2.7.1",
|
|
111
110
|
"react": "18.2.0",
|
|
112
111
|
"react-dom": "^18.2.0",
|
|
113
|
-
"storybook": "^8.
|
|
112
|
+
"storybook": "^8.4.1",
|
|
114
113
|
"style-loader": "^3.3.3",
|
|
115
114
|
"terser-webpack-plugin": "^5.3.10",
|
|
116
115
|
"ts-loader": "^9.4.2",
|
package/src/Input/Input.tsx
CHANGED
|
@@ -5,7 +5,7 @@ const InputLabel = React.forwardRef<HTMLLabelElement, React.LabelHTMLAttributes<
|
|
|
5
5
|
({ className, children, ...props }) => {
|
|
6
6
|
return (
|
|
7
7
|
<label
|
|
8
|
-
className={cn('mb-[4px]
|
|
8
|
+
className={cn('mb-[4px] text-[12px] text-light leading-[1.16] focus:text-primary focus-visible:text-primary', className)}
|
|
9
9
|
{...props}
|
|
10
10
|
>
|
|
11
11
|
{children}
|
package/src/index.ts
CHANGED
|
@@ -53,11 +53,6 @@ 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'
|
|
61
56
|
|
|
62
57
|
export {
|
|
63
58
|
Tabs,
|
|
@@ -136,7 +131,4 @@ export {
|
|
|
136
131
|
Checkbox,
|
|
137
132
|
Swipe2Show,
|
|
138
133
|
Skeleton,
|
|
139
|
-
Carousel,
|
|
140
|
-
CarouselContent,
|
|
141
|
-
CarouselItem,
|
|
142
134
|
}
|
|
@@ -1,16 +0,0 @@
|
|
|
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
|
-
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 {};
|
|
@@ -1,144 +0,0 @@
|
|
|
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", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", 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 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", 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="h-4 w-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="h-4 w-4" />
|
|
139
|
-
// <span className="sr-only">Next slide</span>
|
|
140
|
-
// </Button>
|
|
141
|
-
// )
|
|
142
|
-
// })
|
|
143
|
-
// CarouselNext.displayName = "CarouselNext"
|
|
144
|
-
//# sourceMappingURL=Carousel.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../../src/Carousel/Carousel.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,6FAE6B;AAE7B,0CAAmC;AAuBnC,MAAM,eAAe,GAAG,KAAK,CAAC,aAAa,CAA8B,IAAI,CAAC,CAAA;AAE9E,SAAS,WAAW;IACnB,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAA;IAEjD,IAAI,CAAC,OAAO,EAAE;QACb,MAAM,IAAI,KAAK,CAAC,gDAAgD,CAAC,CAAA;KACjE;IAED,OAAO,OAAO,CAAA;AACf,CAAC;AAEY,QAAA,QAAQ,GAAG,KAAK,CAAC,UAAU,CAIvC,CACC,EACC,WAAW,GAAG,YAAY,EAC1B,IAAI,EACJ,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACR,EACD,GAAG,EACF,EAAE;IACH,MAAM,CAAC,WAAW,EAAE,GAAG,CAAC,GAAG,IAAA,8BAAgB,EAC1C;QACC,GAAG,IAAI;QACP,IAAI,EAAE,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;KAC9C,EACD,OAAO,CACP,CAAA;IACD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC/D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE/D,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,GAAgB,EAAE,EAAE;QACvD,IAAI,CAAC,GAAG,EAAE;YACT,OAAM;SACN;QAED,gBAAgB,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC,CAAA;QACrC,gBAAgB,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC,CAAA;IACtC,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,GAAG,EAAE,UAAU,EAAE,CAAA;IAClB,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;IAET,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,GAAG,EAAE,UAAU,EAAE,CAAA;IAClB,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;IAET,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CACtC,CAAC,KAA0C,EAAE,EAAE;QAC9C,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;YAC9B,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,UAAU,EAAE,CAAA;SACZ;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,EAAE;YACtC,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,UAAU,EAAE,CAAA;SACZ;IACF,CAAC,EACD,CAAC,UAAU,EAAE,UAAU,CAAC,CACxB,CAAA;IAED,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACpB,IAAI,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE;YACpB,OAAM;SACN;QAED,MAAM,CAAC,GAAG,CAAC,CAAA;IACZ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAA;IAEjB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACpB,IAAI,CAAC,GAAG,EAAE;YACT,OAAM;SACN;QAED,QAAQ,CAAC,GAAG,CAAC,CAAA;QACb,GAAG,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;QAC1B,GAAG,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;QAE1B,OAAO,GAAG,EAAE;YACX,GAAG,EAAE,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;QAC7B,CAAC,CAAA;IACF,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEnB,OAAO,CACN,oBAAC,eAAe,CAAC,QAAQ,IACxB,KAAK,EAAE;YACN,WAAW;YACX,GAAG,EAAE,GAAG;YACR,IAAI;YACJ,WAAW,EACV,WAAW,IAAI,CAAC,IAAI,EAAE,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC;YAChE,UAAU;YACV,UAAU;YACV,aAAa;YACb,aAAa;SACb;QAED,6BACC,GAAG,EAAE,GAAG,EACR,gBAAgB,EAAE,aAAa,EAC/B,SAAS,EAAE,IAAA,UAAE,EAAC,UAAU,EAAE,SAAS,CAAC,EACpC,IAAI,EAAC,QAAQ,0BACQ,UAAU,KAC3B,KAAK,IAER,QAAQ,CACJ,CACoB,CAC3B,CAAA;AACF,CAAC,CACD,CAAA;AACD,gBAAQ,CAAC,WAAW,GAAG,UAAU,CAAA;AAEpB,QAAA,eAAe,GAAG,KAAK,CAAC,UAAU,CAG7C,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAClC,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,WAAW,EAAE,CAAA;IAElD,OAAO,CACN,6BAAK,GAAG,EAAE,WAAW,EAAE,SAAS,EAAC,iBAAiB;QACjD,6BACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,UAAE,EACZ,MAAM,EACN,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB,EACzD,SAAS,CACT,KACG,KAAK,GACR,CACG,CACN,CAAA;AACF,CAAC,CAAC,CAAA;AACF,uBAAe,CAAC,WAAW,GAAG,iBAAiB,CAAA;AAElC,QAAA,YAAY,GAAG,KAAK,CAAC,UAAU,CAG1C,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAClC,MAAM,EAAE,WAAW,EAAE,GAAG,WAAW,EAAE,CAAA;IAErC,OAAO,CACN,6BACC,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,0BACS,OAAO,EAC5B,SAAS,EAAE,IAAA,UAAE,EACZ,oCAAoC,EACpC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAC9C,SAAS,CACT,KACG,KAAK,GACR,CACF,CAAA;AACF,CAAC,CAAC,CAAA;AACF,oBAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAEzC,6CAA6C;AAC7C,sBAAsB;AACtB,uCAAuC;AACvC,4EAA4E;AAC5E,oEAAoE;AACpE,EAAE;AACF,YAAY;AACZ,YAAY;AACZ,eAAe;AACf,uBAAuB;AACvB,iBAAiB;AACjB,oBAAoB;AACpB,wCAAwC;AACxC,mCAAmC;AACnC,6CAA6C;AAC7C,wDAAwD;AACxD,gBAAgB;AAChB,QAAQ;AACR,+BAA+B;AAC/B,0BAA0B;AAC1B,gBAAgB;AAChB,MAAM;AACN,uCAAuC;AACvC,qDAAqD;AACrD,cAAc;AACd,KAAK;AACL,KAAK;AACL,oDAAoD;AACpD,EAAE;AACF,yCAAyC;AACzC,sBAAsB;AACtB,uCAAuC;AACvC,4EAA4E;AAC5E,oEAAoE;AACpE,EAAE;AACF,YAAY;AACZ,YAAY;AACZ,eAAe;AACf,uBAAuB;AACvB,iBAAiB;AACjB,oBAAoB;AACpB,uCAAuC;AACvC,mCAAmC;AACnC,8CAA8C;AAC9C,2DAA2D;AAC3D,gBAAgB;AAChB,QAAQ;AACR,+BAA+B;AAC/B,0BAA0B;AAC1B,gBAAgB;AAChB,MAAM;AACN,wCAAwC;AACxC,iDAAiD;AACjD,cAAc;AACd,KAAK;AACL,KAAK;AACL,4CAA4C"}
|
package/dist/Carousel/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Carousel, CarouselContent, CarouselItem, } from "./Carousel";
|
package/dist/Carousel/index.js
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
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
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Carousel/index.ts"],"names":[],"mappings":";;;AAAA,uCAMmB;AALlB,oGAAA,QAAQ,OAAA;AACR,2GAAA,eAAe,OAAA;AACf,wGAAA,YAAY,OAAA"}
|
|
@@ -1,249 +0,0 @@
|
|
|
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
|
-
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
|
-
orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
|
|
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 basis-full",
|
|
184
|
-
orientation === "horizontal" ? "pl-4" : "pt-4",
|
|
185
|
-
className
|
|
186
|
-
)}
|
|
187
|
-
{...props}
|
|
188
|
-
/>
|
|
189
|
-
)
|
|
190
|
-
})
|
|
191
|
-
CarouselItem.displayName = "CarouselItem"
|
|
192
|
-
|
|
193
|
-
// const CarouselPrevious = React.forwardRef<
|
|
194
|
-
// HTMLButtonElement,
|
|
195
|
-
// React.ComponentProps<typeof Button>
|
|
196
|
-
// >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
|
|
197
|
-
// const { orientation, scrollPrev, canScrollPrev } = useCarousel()
|
|
198
|
-
//
|
|
199
|
-
// return (
|
|
200
|
-
// <Button
|
|
201
|
-
// ref={ref}
|
|
202
|
-
// variant={variant}
|
|
203
|
-
// size={size}
|
|
204
|
-
// className={cn(
|
|
205
|
-
// "absolute h-8 w-8 rounded-full",
|
|
206
|
-
// orientation === "horizontal"
|
|
207
|
-
// ? "-left-12 top-1/2 -translate-y-1/2"
|
|
208
|
-
// : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
|
|
209
|
-
// className
|
|
210
|
-
// )}
|
|
211
|
-
// disabled={!canScrollPrev}
|
|
212
|
-
// onClick={scrollPrev}
|
|
213
|
-
// {...props}
|
|
214
|
-
// >
|
|
215
|
-
// <ArrowLeft className="h-4 w-4" />
|
|
216
|
-
// <span className="sr-only">Previous slide</span>
|
|
217
|
-
// </Button>
|
|
218
|
-
// )
|
|
219
|
-
// })
|
|
220
|
-
// CarouselPrevious.displayName = "CarouselPrevious"
|
|
221
|
-
//
|
|
222
|
-
// const CarouselNext = React.forwardRef<
|
|
223
|
-
// HTMLButtonElement,
|
|
224
|
-
// React.ComponentProps<typeof Button>
|
|
225
|
-
// >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
|
|
226
|
-
// const { orientation, scrollNext, canScrollNext } = useCarousel()
|
|
227
|
-
//
|
|
228
|
-
// return (
|
|
229
|
-
// <Button
|
|
230
|
-
// ref={ref}
|
|
231
|
-
// variant={variant}
|
|
232
|
-
// size={size}
|
|
233
|
-
// className={cn(
|
|
234
|
-
// "absolute h-8 w-8 rounded-full",
|
|
235
|
-
// orientation === "horizontal"
|
|
236
|
-
// ? "-right-12 top-1/2 -translate-y-1/2"
|
|
237
|
-
// : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
|
|
238
|
-
// className
|
|
239
|
-
// )}
|
|
240
|
-
// disabled={!canScrollNext}
|
|
241
|
-
// onClick={scrollNext}
|
|
242
|
-
// {...props}
|
|
243
|
-
// >
|
|
244
|
-
// <ArrowRight className="h-4 w-4" />
|
|
245
|
-
// <span className="sr-only">Next slide</span>
|
|
246
|
-
// </Button>
|
|
247
|
-
// )
|
|
248
|
-
// })
|
|
249
|
-
// CarouselNext.displayName = "CarouselNext"
|