@pindoba/core-carousel 0.0.0-alpha-20260617191010
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/LICENSE +12 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.js +4 -0
- package/dist/src/connect-carousel-item.d.ts +7 -0
- package/dist/src/connect-carousel-item.d.ts.map +1 -0
- package/dist/src/connect-carousel-item.js +32 -0
- package/dist/src/connect-carousel-item.js.map +1 -0
- package/dist/src/connect-carousel.d.ts +17 -0
- package/dist/src/connect-carousel.d.ts.map +1 -0
- package/dist/src/connect-carousel.js +133 -0
- package/dist/src/connect-carousel.js.map +1 -0
- package/dist/src/create-carousel.d.ts +16 -0
- package/dist/src/create-carousel.d.ts.map +1 -0
- package/dist/src/create-carousel.js +479 -0
- package/dist/src/create-carousel.js.map +1 -0
- package/dist/src/snap-math.d.ts +64 -0
- package/dist/src/snap-math.d.ts.map +1 -0
- package/dist/src/snap-math.js +81 -0
- package/dist/src/snap-math.js.map +1 -0
- package/dist/src/types.d.ts +313 -0
- package/dist/src/types.d.ts.map +1 -0
- package/dist/src/types.js +1 -0
- package/package.json +38 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
Copyright 2025 Eduardo Lopes
|
|
2
|
+
|
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
4
|
+
|
|
5
|
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
6
|
+
|
|
7
|
+
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
|
|
8
|
+
INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
|
|
9
|
+
PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
|
|
10
|
+
FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
|
|
11
|
+
OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
|
|
12
|
+
DEALINGS IN THE SOFTWARE.
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { CarouselAlign, CarouselApi, CarouselBaseProps, CarouselConfig, CarouselControlButtonProps, CarouselIndicatorItem, CarouselIndicatorProps, CarouselItemApi, CarouselItemBaseProps, CarouselItemData, CarouselItemRootProps, CarouselItemValue, CarouselOrientation, CarouselPassThrough, CarouselRootProps, CarouselSize, CarouselSlidesPerView, CarouselSlotPassThrough, CarouselSlotProps, CarouselSlots, ConnectCarouselItemOptions, ConnectCarouselOptions, ElementAttributes, HeadlessCarousel, PanelFeedback, PanelRadius, ScrollToIndexOptions } from "./src/types.js";
|
|
2
|
+
import { createCarousel } from "./src/create-carousel.js";
|
|
3
|
+
import { carouselDefaults, connectCarousel } from "./src/connect-carousel.js";
|
|
4
|
+
import { connectCarouselItem } from "./src/connect-carousel-item.js";
|
|
5
|
+
export { type CarouselAlign, type CarouselApi, type CarouselBaseProps, type CarouselConfig, type CarouselControlButtonProps, type CarouselIndicatorItem, type CarouselIndicatorProps, type CarouselItemApi, type CarouselItemBaseProps, type CarouselItemData, type CarouselItemRootProps, type CarouselItemValue, type CarouselOrientation, type CarouselPassThrough, type CarouselRootProps, type CarouselSize, type CarouselSlidesPerView, type CarouselSlotPassThrough, type CarouselSlotProps, type CarouselSlots, type ConnectCarouselItemOptions, type ConnectCarouselOptions, type ElementAttributes, type HeadlessCarousel, type PanelFeedback, type PanelRadius, type ScrollToIndexOptions, carouselDefaults, connectCarousel, connectCarouselItem, createCarousel };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { createCarousel } from "./src/create-carousel.js";
|
|
2
|
+
import { carouselDefaults, connectCarousel } from "./src/connect-carousel.js";
|
|
3
|
+
import { connectCarouselItem } from "./src/connect-carousel-item.js";
|
|
4
|
+
export { carouselDefaults, connectCarousel, connectCarouselItem, createCarousel };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { CarouselItemApi, ConnectCarouselItemOptions } from "./types.js";
|
|
2
|
+
|
|
3
|
+
//#region src/connect-carousel-item.d.ts
|
|
4
|
+
declare function connectCarouselItem(options?: ConnectCarouselItemOptions): CarouselItemApi;
|
|
5
|
+
//#endregion
|
|
6
|
+
export { connectCarouselItem };
|
|
7
|
+
//# sourceMappingURL=connect-carousel-item.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"connect-carousel-item.d.ts","names":[],"sources":["../../src/connect-carousel-item.ts"],"mappings":";;;iBAQgB,mBAAA,CACd,OAAA,GAAS,0BAAA,GACR,eAAe"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { css } from "@pindoba/styled-system/css";
|
|
2
|
+
import { carouselStyles } from "@pindoba/styles-carousel";
|
|
3
|
+
//#region src/connect-carousel-item.ts
|
|
4
|
+
function connectCarouselItem(options = {}) {
|
|
5
|
+
const { value, label, align, size, slidesPerView, orientation = "horizontal", passThrough, class: className, ...rest } = options;
|
|
6
|
+
const raw = carouselStyles.raw({
|
|
7
|
+
...size != null ? { size } : {},
|
|
8
|
+
...slidesPerView != null ? { slidesPerView } : {},
|
|
9
|
+
...align != null ? { align } : {},
|
|
10
|
+
orientation
|
|
11
|
+
});
|
|
12
|
+
const userClass = className != null ? String(className) : void 0;
|
|
13
|
+
const generatedClass = css(raw.item, passThrough?.item?.style);
|
|
14
|
+
return {
|
|
15
|
+
itemProps: {
|
|
16
|
+
...rest,
|
|
17
|
+
...passThrough?.item?.props,
|
|
18
|
+
"data-component": "carousel-item",
|
|
19
|
+
"data-orientation": orientation,
|
|
20
|
+
...value != null ? { "data-value": value } : {},
|
|
21
|
+
role: "group",
|
|
22
|
+
"aria-roledescription": "slide",
|
|
23
|
+
...label ? { "aria-label": label } : {},
|
|
24
|
+
class: userClass ? `${generatedClass} ${userClass}` : generatedClass
|
|
25
|
+
},
|
|
26
|
+
element: "div"
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
//#endregion
|
|
30
|
+
export { connectCarouselItem };
|
|
31
|
+
|
|
32
|
+
//# sourceMappingURL=connect-carousel-item.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"connect-carousel-item.js","names":[],"sources":["../../src/connect-carousel-item.ts"],"sourcesContent":["import { css } from \"@pindoba/styled-system/css\";\nimport { carouselStyles } from \"@pindoba/styles-carousel\";\nimport type {\n ConnectCarouselItemOptions,\n CarouselItemApi,\n CarouselItemRootProps,\n} from \"./types.js\";\n\nexport function connectCarouselItem(\n options: ConnectCarouselItemOptions = {},\n): CarouselItemApi {\n const {\n value,\n label,\n align,\n size,\n slidesPerView,\n orientation = \"horizontal\",\n passThrough,\n class: className,\n ...rest\n } = options;\n\n // When size/slidesPerView are undefined, item inherits from the root via\n // CSS custom properties (set on the root by the parent recipe).\n const raw = carouselStyles.raw({\n ...(size != null ? { size } : {}),\n ...(slidesPerView != null ? { slidesPerView } : {}),\n ...(align != null ? { align } : {}),\n orientation,\n });\n\n const userClass = className != null ? String(className) : undefined;\n const generatedClass = css(raw.item, passThrough?.item?.style);\n\n const itemProps: CarouselItemRootProps = {\n ...rest,\n ...passThrough?.item?.props,\n \"data-component\": \"carousel-item\",\n \"data-orientation\": orientation,\n ...(value != null ? { \"data-value\": value } : {}),\n role: \"group\",\n \"aria-roledescription\": \"slide\",\n ...(label ? { \"aria-label\": label } : {}),\n class: userClass ? `${generatedClass} ${userClass}` : generatedClass,\n };\n\n return {\n itemProps,\n element: \"div\",\n };\n}\n"],"mappings":";;;AAQA,SAAgB,oBACd,UAAsC,CAAC,GACtB;CACjB,MAAM,EACJ,OACA,OACA,OACA,MACA,eACA,cAAc,cACd,aACA,OAAO,WACP,GAAG,SACD;CAIJ,MAAM,MAAM,eAAe,IAAI;EAC7B,GAAI,QAAQ,OAAO,EAAE,KAAK,IAAI,CAAC;EAC/B,GAAI,iBAAiB,OAAO,EAAE,cAAc,IAAI,CAAC;EACjD,GAAI,SAAS,OAAO,EAAE,MAAM,IAAI,CAAC;EACjC;CACF,CAAC;CAED,MAAM,YAAY,aAAa,OAAO,OAAO,SAAS,IAAI,KAAA;CAC1D,MAAM,iBAAiB,IAAI,IAAI,MAAM,aAAa,MAAM,KAAK;CAc7D,OAAO;EACL,WAAA;GAZA,GAAG;GACH,GAAG,aAAa,MAAM;GACtB,kBAAkB;GAClB,oBAAoB;GACpB,GAAI,SAAS,OAAO,EAAE,cAAc,MAAM,IAAI,CAAC;GAC/C,MAAM;GACN,wBAAwB;GACxB,GAAI,QAAQ,EAAE,cAAc,MAAM,IAAI,CAAC;GACvC,OAAO,YAAY,GAAG,eAAe,GAAG,cAAc;EAI9C;EACR,SAAS;CACX;AACF"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { CarouselApi, ConnectCarouselOptions } from "./types.js";
|
|
2
|
+
|
|
3
|
+
//#region src/connect-carousel.d.ts
|
|
4
|
+
declare const carouselDefaults: {
|
|
5
|
+
readonly orientation: "horizontal";
|
|
6
|
+
readonly size: "md";
|
|
7
|
+
readonly slidesPerView: 1;
|
|
8
|
+
readonly align: "start";
|
|
9
|
+
readonly controls: false;
|
|
10
|
+
readonly indicators: false;
|
|
11
|
+
readonly loop: false;
|
|
12
|
+
readonly autoplay: false;
|
|
13
|
+
};
|
|
14
|
+
declare function connectCarousel(options?: ConnectCarouselOptions): CarouselApi;
|
|
15
|
+
//#endregion
|
|
16
|
+
export { carouselDefaults, connectCarousel };
|
|
17
|
+
//# sourceMappingURL=connect-carousel.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"connect-carousel.d.ts","names":[],"sources":["../../src/connect-carousel.ts"],"mappings":";;;cAYa,gBAAA;EAAA;;;;;;;;;iBAWG,eAAA,CACd,OAAA,GAAS,sBAAA,GACR,WAAW"}
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
import { css } from "@pindoba/styled-system/css";
|
|
2
|
+
import { carouselStyles } from "@pindoba/styles-carousel";
|
|
3
|
+
//#region src/connect-carousel.ts
|
|
4
|
+
const carouselDefaults = {
|
|
5
|
+
orientation: "horizontal",
|
|
6
|
+
size: "md",
|
|
7
|
+
slidesPerView: 1,
|
|
8
|
+
align: "start",
|
|
9
|
+
controls: false,
|
|
10
|
+
indicators: false,
|
|
11
|
+
loop: false,
|
|
12
|
+
autoplay: false
|
|
13
|
+
};
|
|
14
|
+
function connectCarousel(options = {}) {
|
|
15
|
+
const { orientation = carouselDefaults.orientation, size = carouselDefaults.size, slidesPerView = carouselDefaults.slidesPerView, align = carouselDefaults.align, feedback, label, controls: _controls, indicators: _indicators, loop = carouselDefaults.loop, autoplay = carouselDefaults.autoplay, inertOffscreenSlides = false, items, radius: _radius, currentIndex = 0, atScrollStart = false, atScrollEnd = false, itemCount, passThrough, class: className, ...rest } = options;
|
|
16
|
+
const autoplayMs = typeof autoplay === "number" && autoplay > 0 ? autoplay : 0;
|
|
17
|
+
const raw = carouselStyles.raw({
|
|
18
|
+
orientation,
|
|
19
|
+
size,
|
|
20
|
+
slidesPerView,
|
|
21
|
+
align
|
|
22
|
+
});
|
|
23
|
+
const userClass = className != null ? String(className) : void 0;
|
|
24
|
+
const generatedRoot = css(raw.root, { colorPalette: feedback ?? "neutral" }, passThrough?.root?.style);
|
|
25
|
+
const rootProps = {
|
|
26
|
+
...rest,
|
|
27
|
+
...passThrough?.root?.props,
|
|
28
|
+
"data-component": "carousel",
|
|
29
|
+
"data-carousel-root": "",
|
|
30
|
+
"data-orientation": orientation,
|
|
31
|
+
"data-align": align,
|
|
32
|
+
"data-loop": loop ? "true" : "false",
|
|
33
|
+
"data-autoplay": autoplayMs ? String(autoplayMs) : "",
|
|
34
|
+
"data-carousel-inert": inertOffscreenSlides ? "true" : "false",
|
|
35
|
+
class: userClass ? `${generatedRoot} ${userClass}` : generatedRoot
|
|
36
|
+
};
|
|
37
|
+
const viewportWrapperProps = {
|
|
38
|
+
class: css(raw.viewportWrapper),
|
|
39
|
+
"data-carousel-viewport-wrapper": ""
|
|
40
|
+
};
|
|
41
|
+
const viewportProps = {
|
|
42
|
+
...passThrough?.viewport?.props,
|
|
43
|
+
class: css(raw.viewport, passThrough?.viewport?.style),
|
|
44
|
+
role: "region",
|
|
45
|
+
"aria-roledescription": "carousel",
|
|
46
|
+
...label ? { "aria-label": label } : {},
|
|
47
|
+
tabindex: 0,
|
|
48
|
+
"data-orientation": orientation,
|
|
49
|
+
"data-carousel-viewport": ""
|
|
50
|
+
};
|
|
51
|
+
const trackProps = {
|
|
52
|
+
...passThrough?.track?.props,
|
|
53
|
+
class: css(raw.track, passThrough?.track?.style),
|
|
54
|
+
"data-orientation": orientation,
|
|
55
|
+
"data-carousel-track": ""
|
|
56
|
+
};
|
|
57
|
+
const controlsProps = {
|
|
58
|
+
...passThrough?.controls?.props,
|
|
59
|
+
class: css(raw.controls, passThrough?.controls?.style),
|
|
60
|
+
"data-carousel-controls": ""
|
|
61
|
+
};
|
|
62
|
+
const prevButtonProps = {
|
|
63
|
+
...passThrough?.prevButton?.props,
|
|
64
|
+
class: css(raw.prevButton, passThrough?.prevButton?.style),
|
|
65
|
+
emphasis: "secondary",
|
|
66
|
+
shape: "circle",
|
|
67
|
+
size: "sm",
|
|
68
|
+
type: "button",
|
|
69
|
+
"aria-label": "Previous slide",
|
|
70
|
+
"data-carousel-prev": "",
|
|
71
|
+
disabled: atScrollStart && !loop
|
|
72
|
+
};
|
|
73
|
+
const nextButtonProps = {
|
|
74
|
+
...passThrough?.nextButton?.props,
|
|
75
|
+
class: css(raw.nextButton, passThrough?.nextButton?.style),
|
|
76
|
+
emphasis: "secondary",
|
|
77
|
+
shape: "circle",
|
|
78
|
+
size: "sm",
|
|
79
|
+
type: "button",
|
|
80
|
+
"aria-label": "Next slide",
|
|
81
|
+
"data-carousel-next": "",
|
|
82
|
+
disabled: atScrollEnd && !loop
|
|
83
|
+
};
|
|
84
|
+
const indicatorsProps = {
|
|
85
|
+
...passThrough?.indicators?.props,
|
|
86
|
+
class: css(raw.indicators, passThrough?.indicators?.style),
|
|
87
|
+
role: "tablist",
|
|
88
|
+
"aria-label": label ? `${label} pagination` : "Carousel pagination",
|
|
89
|
+
"data-carousel-indicators": ""
|
|
90
|
+
};
|
|
91
|
+
const indicatorCount = itemCount != null ? Math.max(0, Math.floor(itemCount)) : items?.length ?? 0;
|
|
92
|
+
const indicatorClass = css(raw.indicator, passThrough?.indicator?.style);
|
|
93
|
+
return {
|
|
94
|
+
rootProps,
|
|
95
|
+
viewportWrapperProps,
|
|
96
|
+
viewportProps,
|
|
97
|
+
trackProps,
|
|
98
|
+
controlsProps,
|
|
99
|
+
prevButtonProps,
|
|
100
|
+
nextButtonProps,
|
|
101
|
+
indicatorsProps,
|
|
102
|
+
items: Array.from({ length: indicatorCount }, (_unused, i) => {
|
|
103
|
+
const active = i === currentIndex;
|
|
104
|
+
return {
|
|
105
|
+
id: items?.[i]?.value ?? String(i),
|
|
106
|
+
indicatorProps: {
|
|
107
|
+
...passThrough?.indicator?.props,
|
|
108
|
+
class: indicatorClass,
|
|
109
|
+
type: "button",
|
|
110
|
+
role: "tab",
|
|
111
|
+
"aria-label": `Go to slide ${i + 1}`,
|
|
112
|
+
"aria-current": active ? "true" : "false",
|
|
113
|
+
"data-active": active ? "true" : "false",
|
|
114
|
+
"data-carousel-indicator": "",
|
|
115
|
+
"data-index": String(i)
|
|
116
|
+
}
|
|
117
|
+
};
|
|
118
|
+
}),
|
|
119
|
+
liveRegionProps: {
|
|
120
|
+
...passThrough?.liveRegion?.props,
|
|
121
|
+
class: css(raw.liveRegion, passThrough?.liveRegion?.style),
|
|
122
|
+
role: "status",
|
|
123
|
+
"aria-live": "polite",
|
|
124
|
+
"aria-atomic": "true",
|
|
125
|
+
"data-carousel-live": ""
|
|
126
|
+
},
|
|
127
|
+
element: "div"
|
|
128
|
+
};
|
|
129
|
+
}
|
|
130
|
+
//#endregion
|
|
131
|
+
export { carouselDefaults, connectCarousel };
|
|
132
|
+
|
|
133
|
+
//# sourceMappingURL=connect-carousel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"connect-carousel.js","names":[],"sources":["../../src/connect-carousel.ts"],"sourcesContent":["import { css } from \"@pindoba/styled-system/css\";\nimport { carouselStyles } from \"@pindoba/styles-carousel\";\nimport type {\n ConnectCarouselOptions,\n CarouselApi,\n CarouselBaseProps,\n CarouselRootProps,\n CarouselSlotProps,\n CarouselControlButtonProps,\n CarouselIndicatorItem,\n} from \"./types.js\";\n\nexport const carouselDefaults = {\n orientation: \"horizontal\",\n size: \"md\",\n slidesPerView: 1,\n align: \"start\",\n controls: false,\n indicators: false,\n loop: false,\n autoplay: false,\n} as const satisfies Partial<CarouselBaseProps>;\n\nexport function connectCarousel(\n options: ConnectCarouselOptions = {},\n): CarouselApi {\n const {\n orientation = carouselDefaults.orientation,\n size = carouselDefaults.size,\n slidesPerView = carouselDefaults.slidesPerView,\n align = carouselDefaults.align,\n feedback,\n label,\n // Consumed by the framework layer, not on root:\n controls: _controls,\n indicators: _indicators,\n loop = carouselDefaults.loop,\n autoplay = carouselDefaults.autoplay,\n inertOffscreenSlides = false,\n items,\n radius: _radius,\n currentIndex = 0,\n atScrollStart = false,\n atScrollEnd = false,\n itemCount,\n passThrough,\n class: className,\n ...rest\n } = options;\n\n // Coerce autoplay → ms attr value. CarouselBaseProps allows boolean or number;\n // boolean true means \"use default ms\" (caller's create-carousel picks the\n // actual interval); number > 0 means explicit ms. Surface 0 / \"\" otherwise\n // so the data attr remains consistent with what the boot script expects.\n const autoplayMs =\n typeof autoplay === \"number\" && autoplay > 0 ? autoplay : 0;\n\n const raw = carouselStyles.raw({ orientation, size, slidesPerView, align });\n\n const userClass = className != null ? String(className) : undefined;\n const generatedRoot = css(\n raw.root,\n { colorPalette: feedback ?? \"neutral\" },\n passThrough?.root?.style,\n );\n\n const rootProps: CarouselRootProps = {\n ...rest,\n ...passThrough?.root?.props,\n \"data-component\": \"carousel\",\n \"data-carousel-root\": \"\",\n \"data-orientation\": orientation,\n \"data-align\": align,\n \"data-loop\": loop ? \"true\" : \"false\",\n \"data-autoplay\": autoplayMs ? String(autoplayMs) : \"\",\n \"data-carousel-inert\": inertOffscreenSlides ? \"true\" : \"false\",\n class: userClass ? `${generatedRoot} ${userClass}` : generatedRoot,\n };\n\n const viewportWrapperProps: CarouselSlotProps = {\n class: css(raw.viewportWrapper),\n \"data-carousel-viewport-wrapper\": \"\",\n };\n\n const viewportProps: CarouselSlotProps = {\n ...passThrough?.viewport?.props,\n class: css(raw.viewport, passThrough?.viewport?.style),\n role: \"region\",\n \"aria-roledescription\": \"carousel\",\n ...(label ? { \"aria-label\": label } : {}),\n tabindex: 0,\n \"data-orientation\": orientation,\n \"data-carousel-viewport\": \"\",\n };\n\n const trackProps: CarouselSlotProps = {\n ...passThrough?.track?.props,\n class: css(raw.track, passThrough?.track?.style),\n \"data-orientation\": orientation,\n \"data-carousel-track\": \"\",\n };\n\n const controlsProps: CarouselSlotProps = {\n ...passThrough?.controls?.props,\n class: css(raw.controls, passThrough?.controls?.style),\n \"data-carousel-controls\": \"\",\n };\n\n const prevButtonProps: CarouselControlButtonProps = {\n ...passThrough?.prevButton?.props,\n class: css(raw.prevButton, passThrough?.prevButton?.style),\n emphasis: \"secondary\",\n shape: \"circle\",\n size: \"sm\",\n type: \"button\",\n \"aria-label\": \"Previous slide\",\n \"data-carousel-prev\": \"\",\n // Prev is unreachable only when parked at the start with no wrap-around.\n disabled: atScrollStart && !loop,\n };\n\n const nextButtonProps: CarouselControlButtonProps = {\n ...passThrough?.nextButton?.props,\n class: css(raw.nextButton, passThrough?.nextButton?.style),\n emphasis: \"secondary\",\n shape: \"circle\",\n size: \"sm\",\n type: \"button\",\n \"aria-label\": \"Next slide\",\n \"data-carousel-next\": \"\",\n // Next is unreachable only when parked at the end with no wrap-around.\n disabled: atScrollEnd && !loop,\n };\n\n const indicatorsProps: CarouselSlotProps = {\n ...passThrough?.indicators?.props,\n class: css(raw.indicators, passThrough?.indicators?.style),\n role: \"tablist\",\n \"aria-label\": label ? `${label} pagination` : \"Carousel pagination\",\n \"data-carousel-indicators\": \"\",\n };\n\n // One pre-computed bag per indicator dot. The count derives from itemCount\n // (preferred) or items.length; the active mirrors key off currentIndex.\n const indicatorCount =\n itemCount != null\n ? Math.max(0, Math.floor(itemCount))\n : (items?.length ?? 0);\n const indicatorClass = css(raw.indicator, passThrough?.indicator?.style);\n const indicatorItems: CarouselIndicatorItem[] = Array.from(\n { length: indicatorCount },\n (_unused, i) => {\n const active = i === currentIndex;\n return {\n id: items?.[i]?.value ?? String(i),\n indicatorProps: {\n ...passThrough?.indicator?.props,\n class: indicatorClass,\n type: \"button\",\n role: \"tab\",\n \"aria-label\": `Go to slide ${i + 1}`,\n \"aria-current\": active ? \"true\" : \"false\",\n \"data-active\": active ? \"true\" : \"false\",\n \"data-carousel-indicator\": \"\",\n \"data-index\": String(i),\n },\n };\n },\n );\n\n const liveRegionProps: CarouselSlotProps = {\n ...passThrough?.liveRegion?.props,\n class: css(raw.liveRegion, passThrough?.liveRegion?.style),\n role: \"status\",\n \"aria-live\": \"polite\",\n \"aria-atomic\": \"true\",\n \"data-carousel-live\": \"\",\n };\n\n return {\n rootProps,\n viewportWrapperProps,\n viewportProps,\n trackProps,\n controlsProps,\n prevButtonProps,\n nextButtonProps,\n indicatorsProps,\n items: indicatorItems,\n liveRegionProps,\n element: \"div\",\n };\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { CarouselConfig, HeadlessCarousel } from "./types.js";
|
|
2
|
+
|
|
3
|
+
//#region src/create-carousel.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* Headless carousel factory. Owns all DOM-side behaviour (scroll-tracking,
|
|
6
|
+
* keyboard, autoplay, programmatic scrollTo) so framework components can
|
|
7
|
+
* remain purely presentational. The carousel never traps the page's vertical
|
|
8
|
+
* scroll: a horizontal viewport lets a vertical wheel chain to the page
|
|
9
|
+
* natively (its CSS `overscroll-behavior` contains only the x axis), and a
|
|
10
|
+
* vertical viewport — whose scroll axis IS the page's — forwards the wheel to
|
|
11
|
+
* the page explicitly (it's navigated via controls / drag / keyboard / touch).
|
|
12
|
+
*/
|
|
13
|
+
declare function createCarousel(config?: CarouselConfig): HeadlessCarousel;
|
|
14
|
+
//#endregion
|
|
15
|
+
export { createCarousel };
|
|
16
|
+
//# sourceMappingURL=create-carousel.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"create-carousel.d.ts","names":[],"sources":["../../src/create-carousel.ts"],"mappings":";;;;;AA0BA;;;;;;;iBAAgB,cAAA,CAAe,MAAA,GAAQ,cAAA,GAAsB,gBAAgB"}
|