@alto-avios/alto-ui 3.5.2-alpha.2 → 3.6.0-alpha.0
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/assets/Badge.css +1 -1
- package/dist/assets/Carousel.css +1 -1
- package/dist/assets/CarouselDots.css +1 -1
- package/dist/components/Badge/Badge.js +12 -12
- package/dist/components/Carousel/Carousel.js +54 -36
- package/dist/components/Carousel/Carousel.js.map +1 -1
- package/dist/components/Carousel/CarouselButton/CarouselButton.d.ts +1 -6
- package/dist/components/Carousel/CarouselButton/CarouselButton.js +1 -2
- package/dist/components/Carousel/CarouselButton/CarouselButton.js.map +1 -1
- package/dist/components/Carousel/CarouselControls.d.ts +7 -0
- package/dist/components/Carousel/CarouselControls.js +305 -0
- package/dist/components/Carousel/CarouselControls.js.map +1 -0
- package/dist/components/Carousel/CarouselDots/CarouselDots.d.ts +0 -1
- package/dist/components/Carousel/CarouselDots/CarouselDots.js +22 -27
- package/dist/components/Carousel/CarouselDots/CarouselDots.js.map +1 -1
- package/package.json +2 -2
package/dist/assets/Badge.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._badge_12fsq_1{align-items:center;border-radius:var(--alto-tag-radius);display:inline-flex;flex-shrink:0;font-family:var(--alto-sem-text-label-font-family);font-style:normal;font-weight:var(--alto-sem-text-label-font-weight);justify-content:center;overflow:hidden;text-align:center;text-overflow:ellipsis}._md_12fsq_15{font-size:var(--alto-sem-text-label-md-font-size);gap:var(--alto-sem-space-2xs);height:26px;letter-spacing:var(--alto-sem-text-label-md-letter-spacing);line-height:var(--alto-sem-text-label-md-line-height);padding:0 var(--alto-sem-space-xs)}._sm_12fsq_24{font-size:var(--alto-sem-text-label-xs-font-size);gap:var(--alto-sem-space-4xs);height:20px;letter-spacing:var(--alto-sem-text-label-xs-letter-spacing);line-height:var(--alto-sem-text-label-xs-line-height);padding:0 var(--alto-sem-space-2xs)}._neutral_12fsq_33{background:var(--alto-sem-color-bg-inverse-subtle-default);color:var(--alto-sem-color-fg-inverse-on-subtle)}._critical_12fsq_38{background:var(--alto-sem-color-bg-critical-subtle-default);color:var(--alto-sem-color-fg-critical-on-subtle)}._warning_12fsq_43{background:var(--alto-sem-color-bg-warning-subtle-default);color:var(--alto-sem-color-fg-warning-on-subtle)}._caution_12fsq_48{background:var(--alto-sem-color-bg-caution-subtle-default);color:var(--alto-sem-color-fg-caution-on-subtle)}._success_12fsq_53{background:var(--alto-sem-color-bg-success-subtle-default);color:var(--alto-sem-color-fg-success-on-subtle)}._info_12fsq_58{background:var(--alto-sem-color-bg-information-subtle-default);color:var(--alto-sem-color-fg-information-on-subtle)}._brand_12fsq_63{background:var(--alto-sem-color-bg-accent-subtle-default);color:var(--alto-sem-color-fg-accent-on-subtle)}._sale_12fsq_68{background:var(--alto-sem-color-bg-sale-vibrant-default);color:var(--alto-sem-color-fg-sale-on-vibrant)}._white_12fsq_73{background:var(--alto-sem-color-bg-white-vibrant-default);color:var(--alto-sem-color-fg-white-on-vibrant)}
|
package/dist/assets/Carousel.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._carouselWrapper_1oy48_2{box-sizing:border-box;margin:0;max-width:100%;padding:0;position:relative;width:100%}._carouselWrapper_1oy48_2,._carouselWrapper_1oy48_2._showPartialItems_1oy48_14,._carouselWrapper_1oy48_2._showPartialItems_1oy48_14 ._carousel_1oy48_2{overflow-x:visible;overflow-y:hidden}._carouselWrapper_1oy48_2._hasScrollPadding_1oy48_25,._carouselWrapper_1oy48_2._hasScrollPadding_1oy48_25 ._carousel_1oy48_2{overflow-x:visible!important;overflow-y:hidden!important}._carousel_1oy48_2{overflow-x:visible;position:relative;width:100%}._carousel_1oy48_2,._scroller_1oy48_43{box-sizing:border-box;overflow-y:hidden}._scroller_1oy48_43{display:grid;grid-auto-columns:100%;grid-auto-flow:column;overflow-x:auto;-ms-overflow-style:none;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;height:auto;padding:0 1px;transition:all .3s ease}._scroller_1oy48_43:focus{outline-offset:-2px;outline-width:2px}._scroller_1oy48_43::-webkit-scrollbar{display:none}._carouselWrapper_1oy48_2 [data-dragging=true] ._scroller_1oy48_43{cursor:grabbing;scroll-behavior:auto;touch-action:pan-x}._carouselWrapper_1oy48_2 ._scroller_1oy48_43:hover{cursor:grab;touch-action:pan-x}._item_1oy48_85{box-sizing:border-box;height:auto;max-width:100%;min-height:100%;overflow-y:hidden;scroll-snap-align:start;scroll-snap-stop:always}._carouselWrapper_1oy48_2 ._carousel_1oy48_2 ._scroller_1oy48_43 ._item_1oy48_85>*{display:block;height:auto;width:100%}[data-scroll-padding=true],[data-scroll-padding=true] ._carousel_1oy48_2,[data-scroll-padding=true] ._scroller_1oy48_43{overflow-x:visible!important;overflow-y:hidden!important}[data-scroll-padding=true] ._item_1oy48_85{scroll-snap-align:start}._slideLeft_1oy48_123{animation:_slideLeftAnimation_1oy48_1 1s cubic-bezier(.25,0,.85,.1)}._slideRight_1oy48_127{animation:_slideRightAnimation_1oy48_1 1s cubic-bezier(.25,0,.85,.1)}@keyframes _slideLeftAnimation_1oy48_1{0%{transform:translate(0)}to{transform:translate(0)}}@keyframes _slideRightAnimation_1oy48_1{0%{transform:translate(0)}to{transform:translate(0)}}._controls_1oy48_150{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1}._defaultPrevButton_1oy48_161{left:10px}._defaultNextButton_1oy48_169,._defaultPrevButton_1oy48_161{position:absolute;top:50%;transform:translateY(-50%);z-index:5}._defaultNextButton_1oy48_169{right:10px}._defaultDotsContainer_1oy48_178{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._defaultCarouselWrapper_1oy48_189{margin:0 auto;max-width:800px;width:360px}._defaultAutoplayControl_1oy48_196{pointer-events:auto;position:absolute;right:16px;top:16px;z-index:10}._showOnHover_1oy48_205 ._arrowContainer_1oy48_205{opacity:0;transition:opacity .3s ease}._carouselWrapper_1oy48_2 [data-arrows-visible=true] ._showOnHover_1oy48_205 ._arrowContainer_1oy48_205{opacity:1}._hidden_1oy48_215{opacity:0;transition:opacity .3s ease,visibility .3s ease;visibility:hidden}._dotsContainerWrapper_1oy48_224{pointer-events:auto;z-index:2}._dotsContainer_1oy48_224{position:relative}@media (max-width:768px){._carouselWrapper_1oy48_2 ._dotsContainerWrapper_1oy48_224{cursor:pointer}._carouselWrapper_1oy48_2 ._dotsContainerWrapper_1oy48_224:active{opacity:.8}}._hiddenTabs_1oy48_246{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}._tapEnabled_1oy48_259{cursor:pointer;touch-action:manipulation}._autoplayControlWrapper_1oy48_274{align-items:center;display:flex;justify-content:center;pointer-events:auto;position:absolute;right:16px;top:16px;z-index:10}._carouselDefault_1oy48_288{height:100%;overflow-x:hidden;width:361px}._carouselDefault_1oy48_288 ._prevButton_1oy48_293{left:10px;position:absolute;top:50%;transform:translateY(-50%);z-index:5}._carouselDefault_1oy48_288 ._nextButton_1oy48_300{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:5}._carouselDefault_1oy48_288 ._dotsContainer_1oy48_224{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._carouselWithAutoPlay_1oy48_318{position:relative;width:100%}._carouselWithAutoPlay_1oy48_318 ._prevButton_1oy48_293{left:10px;position:absolute;top:50%;transform:translateY(-50%);z-index:5}._carouselWithAutoPlay_1oy48_318 ._nextButton_1oy48_300{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:5}._carouselWithAutoPlay_1oy48_318 ._dotsContainer_1oy48_224{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._carouselWithAutoPlay_1oy48_318 ._autoplayControl_1oy48_274{pointer-events:auto!important;position:absolute!important;right:16px!important;top:16px!important;z-index:20!important}._carouselWithScrollPeek_1oy48_354{position:relative}._carouselWithScrollPeek_1oy48_354,._carouselWithScrollPeek_1oy48_354 ._carousel_1oy48_2{overflow-x:visible!important;overflow-y:hidden!important}._carouselWithScrollPeek_1oy48_354 ._prevButton_1oy48_293{left:16px;position:absolute;top:50%;transform:translateY(-50%);z-index:10}._carouselWithScrollPeek_1oy48_354 ._nextButton_1oy48_300{position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:10}._carouselWithScrollPeek_1oy48_354 ._dotsContainer_1oy48_224{bottom:20px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._carouselWithFractionalItems_1oy48_388{position:relative}._carouselWithFractionalItems_1oy48_388,._carouselWithFractionalItems_1oy48_388 ._carousel_1oy48_2{overflow-x:visible!important;overflow-y:hidden!important}._carouselWithFractionalItems_1oy48_388 ._prevButton_1oy48_293{left:16px;position:absolute;top:50%;transform:translateY(-50%);z-index:10}._carouselWithFractionalItems_1oy48_388 ._nextButton_1oy48_300{position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:10}._carouselWithFractionalItems_1oy48_388 ._dotsContainer_1oy48_224{bottom:20px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._paginationDotsDefault_1oy48_422{position:relative;width:100%}._paginationDotsDefault_1oy48_422 ._prevButton_1oy48_293{left:10px;position:absolute;top:50%;transform:translateY(-50%);z-index:5}._paginationDotsDefault_1oy48_422 ._nextButton_1oy48_300{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:5}._paginationDotsDefault_1oy48_422 ._dotsContainer_1oy48_224{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._hoverArrowsDefault_1oy48_451{height:100%;overflow-x:hidden;width:361px}._hoverArrowsDefault_1oy48_451 ._prevButton_1oy48_293{left:10px;opacity:0;position:absolute;top:50%;transform:translateY(-50%);transition:opacity .3s ease;z-index:5}._hoverArrowsDefault_1oy48_451 ._nextButton_1oy48_300{opacity:0;position:absolute;right:10px;top:50%;transform:translateY(-50%);transition:opacity .3s ease;z-index:5}._hoverArrowsDefault_1oy48_451:focus-within ._nextButton_1oy48_300,._hoverArrowsDefault_1oy48_451:focus-within ._prevButton_1oy48_293,._hoverArrowsDefault_1oy48_451:hover ._nextButton_1oy48_300,._hoverArrowsDefault_1oy48_451:hover ._prevButton_1oy48_293{opacity:1}._hoverArrowsDefault_1oy48_451 ._dotsContainer_1oy48_224{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._tabsContainer_1aqyc_1{margin:0 auto;min-height:30px;width:auto}._tabsContainer_1aqyc_1,._tabs_1aqyc_1{align-items:center;display:flex;justify-content:center;position:relative}._tabs_1aqyc_1{background-color:var(--alto-sem-color-bg-white-vibrant-default);border-radius:var(--alto-sem-radius-circle);padding:var(--alto-sem-space-2xs) var(--alto-sem-space-xs)}._tabs_1aqyc_1._transparent_1aqyc_21{background-color:transparent}._dotsScroller_1aqyc_25{align-items:center;display:flex;flex-wrap:wrap;gap:var(--alto-sem-space-2xs);justify-content:center;position:relative;white-space:nowrap}._tab_1aqyc_1{background-color:#0000004d;border:none;border-radius:var(--alto-sem-radius-circle);cursor:pointer;display:block;flex-shrink:0;margin:0;padding:0}._tab_1aqyc_1:hover,._tab_1aqyc_1[data-hovered=true]{transform:scale(1.1)}._tab_1aqyc_1._activeTab_1aqyc_52{background-color:var(--alto-sem-color-fg-primary)}._tabs_1aqyc_1[data-focused=true] ._tab_1aqyc_1._activeTab_1aqyc_52{background-color:var(--alto-sem-color-border-accent)}._tabMd_1aqyc_61{height:8px;width:8px}._tabLg_1aqyc_66{height:12px;width:12px}._tabsContainer_1aqyc_1[data-transitioning=true] ._tab_1aqyc_1{pointer-events:none;transition:none!important}._tabsContainer_1aqyc_1[data-transitioning=true] ._dotsScroller_1aqyc_25{transition:none!important}
|
|
@@ -2,18 +2,18 @@ import { jsxs, jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { c as cva } from "../../index-Bi3v_EjJ.js";
|
|
3
3
|
import { Icon } from "../Icon/Icon.js";
|
|
4
4
|
import { focusStyleVariants } from "../../utils/focus/focusStyles.js";
|
|
5
|
-
import '../../assets/Badge.css';const badge$1 = "
|
|
6
|
-
const md = "
|
|
7
|
-
const sm = "
|
|
8
|
-
const neutral = "
|
|
9
|
-
const critical = "
|
|
10
|
-
const warning = "
|
|
11
|
-
const caution = "
|
|
12
|
-
const success = "
|
|
13
|
-
const info = "
|
|
14
|
-
const brand = "
|
|
15
|
-
const sale = "
|
|
16
|
-
const white = "
|
|
5
|
+
import '../../assets/Badge.css';const badge$1 = "_badge_12fsq_1";
|
|
6
|
+
const md = "_md_12fsq_15";
|
|
7
|
+
const sm = "_sm_12fsq_24";
|
|
8
|
+
const neutral = "_neutral_12fsq_33";
|
|
9
|
+
const critical = "_critical_12fsq_38";
|
|
10
|
+
const warning = "_warning_12fsq_43";
|
|
11
|
+
const caution = "_caution_12fsq_48";
|
|
12
|
+
const success = "_success_12fsq_53";
|
|
13
|
+
const info = "_info_12fsq_58";
|
|
14
|
+
const brand = "_brand_12fsq_63";
|
|
15
|
+
const sale = "_sale_12fsq_68";
|
|
16
|
+
const white = "_white_12fsq_73";
|
|
17
17
|
const styles = {
|
|
18
18
|
badge: badge$1,
|
|
19
19
|
md,
|
|
@@ -9,36 +9,41 @@ import { focusStyleVariants } from "../../utils/focus/focusStyles.js";
|
|
|
9
9
|
import { useFocusRing } from "@react-aria/focus";
|
|
10
10
|
import { resolveResponsiveProp } from "../../utils/breakpoint/responsive.js";
|
|
11
11
|
import { useBreakpoint } from "../../utils/breakpoint/hooks/useBreakpoint.js";
|
|
12
|
-
import '../../assets/Carousel.css';const carouselWrapper = "
|
|
13
|
-
const showPartialItems = "
|
|
14
|
-
const carousel$1 = "
|
|
15
|
-
const hasScrollPadding = "
|
|
16
|
-
const scroller = "
|
|
17
|
-
const item = "
|
|
18
|
-
const slideLeft = "
|
|
19
|
-
const slideLeftAnimation = "
|
|
20
|
-
const slideRight = "
|
|
21
|
-
const slideRightAnimation = "
|
|
22
|
-
const controls = "
|
|
23
|
-
const
|
|
24
|
-
const
|
|
25
|
-
const
|
|
26
|
-
const
|
|
27
|
-
const
|
|
28
|
-
const
|
|
29
|
-
const
|
|
30
|
-
const
|
|
31
|
-
const
|
|
32
|
-
const
|
|
33
|
-
const
|
|
34
|
-
const
|
|
35
|
-
const
|
|
36
|
-
const
|
|
37
|
-
const
|
|
38
|
-
const
|
|
39
|
-
const
|
|
40
|
-
const
|
|
41
|
-
const
|
|
12
|
+
import '../../assets/Carousel.css';const carouselWrapper = "_carouselWrapper_1oy48_2";
|
|
13
|
+
const showPartialItems = "_showPartialItems_1oy48_14";
|
|
14
|
+
const carousel$1 = "_carousel_1oy48_2";
|
|
15
|
+
const hasScrollPadding = "_hasScrollPadding_1oy48_25";
|
|
16
|
+
const scroller = "_scroller_1oy48_43";
|
|
17
|
+
const item = "_item_1oy48_85";
|
|
18
|
+
const slideLeft = "_slideLeft_1oy48_123";
|
|
19
|
+
const slideLeftAnimation = "_slideLeftAnimation_1oy48_1";
|
|
20
|
+
const slideRight = "_slideRight_1oy48_127";
|
|
21
|
+
const slideRightAnimation = "_slideRightAnimation_1oy48_1";
|
|
22
|
+
const controls = "_controls_1oy48_150";
|
|
23
|
+
const defaultPrevButton = "_defaultPrevButton_1oy48_161";
|
|
24
|
+
const defaultNextButton = "_defaultNextButton_1oy48_169";
|
|
25
|
+
const defaultDotsContainer = "_defaultDotsContainer_1oy48_178";
|
|
26
|
+
const defaultCarouselWrapper = "_defaultCarouselWrapper_1oy48_189";
|
|
27
|
+
const defaultAutoplayControl = "_defaultAutoplayControl_1oy48_196";
|
|
28
|
+
const showOnHover = "_showOnHover_1oy48_205";
|
|
29
|
+
const arrowContainer = "_arrowContainer_1oy48_205";
|
|
30
|
+
const hidden = "_hidden_1oy48_215";
|
|
31
|
+
const dotsContainerWrapper = "_dotsContainerWrapper_1oy48_224";
|
|
32
|
+
const dotsContainer = "_dotsContainer_1oy48_224";
|
|
33
|
+
const hiddenTabs = "_hiddenTabs_1oy48_246";
|
|
34
|
+
const tapEnabled = "_tapEnabled_1oy48_259";
|
|
35
|
+
const infinite = "_infinite_1oy48_265";
|
|
36
|
+
const native = "_native_1oy48_270";
|
|
37
|
+
const autoplayControlWrapper = "_autoplayControlWrapper_1oy48_274";
|
|
38
|
+
const carouselDefault = "_carouselDefault_1oy48_288";
|
|
39
|
+
const prevButton = "_prevButton_1oy48_293";
|
|
40
|
+
const nextButton = "_nextButton_1oy48_300";
|
|
41
|
+
const carouselWithAutoPlay = "_carouselWithAutoPlay_1oy48_318";
|
|
42
|
+
const autoplayControl = "_autoplayControl_1oy48_274";
|
|
43
|
+
const carouselWithScrollPeek = "_carouselWithScrollPeek_1oy48_354";
|
|
44
|
+
const carouselWithFractionalItems = "_carouselWithFractionalItems_1oy48_388";
|
|
45
|
+
const paginationDotsDefault = "_paginationDotsDefault_1oy48_422";
|
|
46
|
+
const hoverArrowsDefault = "_hoverArrowsDefault_1oy48_451";
|
|
42
47
|
const styles = {
|
|
43
48
|
carouselWrapper,
|
|
44
49
|
showPartialItems,
|
|
@@ -51,6 +56,11 @@ const styles = {
|
|
|
51
56
|
slideRight,
|
|
52
57
|
slideRightAnimation,
|
|
53
58
|
controls,
|
|
59
|
+
defaultPrevButton,
|
|
60
|
+
defaultNextButton,
|
|
61
|
+
defaultDotsContainer,
|
|
62
|
+
defaultCarouselWrapper,
|
|
63
|
+
defaultAutoplayControl,
|
|
54
64
|
showOnHover,
|
|
55
65
|
arrowContainer,
|
|
56
66
|
hidden,
|
|
@@ -144,6 +154,9 @@ const Carousel = ({
|
|
|
144
154
|
const [isTransitioning, setIsTransitioning] = useState(false);
|
|
145
155
|
const [dragStartPosition, setDragStartPosition] = useState(null);
|
|
146
156
|
const dragThreshold = 5;
|
|
157
|
+
const getClassNameWithDefault = (customClassName, defaultClassName) => {
|
|
158
|
+
return customClassName || defaultClassName;
|
|
159
|
+
};
|
|
147
160
|
const getCarouselWrapperClasses = () => {
|
|
148
161
|
const classes = [styles.carouselWrapper];
|
|
149
162
|
if (!Number.isInteger(safeItemsPerPage)) {
|
|
@@ -152,10 +165,15 @@ const Carousel = ({
|
|
|
152
165
|
if (resolvedScrollPadding) {
|
|
153
166
|
classes.push(styles.hasScrollPadding);
|
|
154
167
|
}
|
|
155
|
-
if (carouselWrapperClassName) {
|
|
168
|
+
if (carouselWrapperClassName && carouselWrapperClassName.trim()) {
|
|
156
169
|
classes.push(carouselWrapperClassName);
|
|
170
|
+
} else {
|
|
171
|
+
classes.push(styles.defaultCarouselWrapper);
|
|
157
172
|
}
|
|
158
|
-
|
|
173
|
+
const finalClasses = classes.join(" ");
|
|
174
|
+
console.log("Carousel wrapper classes:", finalClasses);
|
|
175
|
+
console.log("Default wrapper class from styles:", styles.defaultCarouselWrapper);
|
|
176
|
+
return finalClasses;
|
|
159
177
|
};
|
|
160
178
|
const getCssVariables = () => {
|
|
161
179
|
const cssVars2 = {};
|
|
@@ -406,12 +424,12 @@ const Carousel = ({
|
|
|
406
424
|
return /* @__PURE__ */ jsx(CarouselItem, { className: itemClasses, "data-is-active": isActiveItem ? "true" : void 0, "data-item-index": index, "aria-label": `Slide ${index + 1} of ${totalItems}`, children: child }, index);
|
|
407
425
|
}) }),
|
|
408
426
|
/* @__PURE__ */ jsxs("div", { className: `${styles.controls} ${showArrowsOnHover ? styles.showOnHover : ""}`, children: [
|
|
409
|
-
/* @__PURE__ */ jsx(CarouselButton, { dir: "prev", variant: arrowStyleVariant, size: resolvedArrowSize, focusStyle, iconType, hideDisabledArrow, className: `${prevArrowClassName} ${!arrowsVisible ? styles.hidden : ""}` }),
|
|
410
|
-
/* @__PURE__ */ jsx(CarouselButton, { dir: "next", variant: arrowStyleVariant, size: resolvedArrowSize, focusStyle, iconType, hideDisabledArrow, className: `${nextArrowClassName} ${!arrowsVisible ? styles.hidden : ""}` })
|
|
427
|
+
/* @__PURE__ */ jsx(CarouselButton, { dir: "prev", variant: arrowStyleVariant, size: resolvedArrowSize, focusStyle, iconType, hideDisabledArrow, className: `${getClassNameWithDefault(prevArrowClassName, styles.defaultPrevButton)} ${!arrowsVisible ? styles.hidden : ""}` }),
|
|
428
|
+
/* @__PURE__ */ jsx(CarouselButton, { dir: "next", variant: arrowStyleVariant, size: resolvedArrowSize, focusStyle, iconType, hideDisabledArrow, className: `${getClassNameWithDefault(nextArrowClassName, styles.defaultNextButton)} ${!arrowsVisible ? styles.hidden : ""}` })
|
|
411
429
|
] }),
|
|
412
430
|
/* @__PURE__ */ jsx("div", { className: styles.hiddenTabs, children: /* @__PURE__ */ jsx(CarouselTabs, { children: (page) => /* @__PURE__ */ jsx(CarouselTab, { index: page.index, "data-index": page.index, "data-slide-tab": "true", tabIndex: -1 }, page.index) }) }),
|
|
413
|
-
autoPlay && /* @__PURE__ */ jsx("div", { className: `${styles.autoplayControlWrapper} ${autoplayControlClassName
|
|
414
|
-
shouldShowDots && /* @__PURE__ */ jsx(CarouselDots, { totalItems: totalPages, currentPage, onDotClick: (index) => navigateToSlide(index), focusStyle, dotsSize, variant: dotsVariant, className:
|
|
431
|
+
autoPlay && /* @__PURE__ */ jsx("div", { className: `${styles.autoplayControlWrapper} ${getClassNameWithDefault(autoplayControlClassName, styles.defaultAutoplayControl)}`, children: /* @__PURE__ */ jsx(AutoplayControl, { variant: autoPlayStyleVariant, size: autoPlayControlSize, className: "" }) }),
|
|
432
|
+
shouldShowDots && /* @__PURE__ */ jsx(CarouselDots, { totalItems: totalPages, currentPage, onDotClick: (index) => navigateToSlide(index), focusStyle, dotsSize, variant: dotsVariant, className: getClassNameWithDefault(dotsContainerClassName, styles.defaultDotsContainer), dotsWrapperClassName, dotClassName, activeDotClassName, isTransitioning })
|
|
415
433
|
] }) });
|
|
416
434
|
};
|
|
417
435
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Carousel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -31,11 +31,6 @@ export interface CarouselButtonProps {
|
|
|
31
31
|
* Additional CSS class name for the button content
|
|
32
32
|
*/
|
|
33
33
|
buttonClassName?: string;
|
|
34
|
-
/**
|
|
35
|
-
* Whether the button should be full height of the container
|
|
36
|
-
* @default false
|
|
37
|
-
*/
|
|
38
|
-
fullHeight?: boolean;
|
|
39
34
|
/**
|
|
40
35
|
* Custom click handler for implementing custom navigation behavior
|
|
41
36
|
*/
|
|
@@ -45,5 +40,5 @@ export interface CarouselButtonProps {
|
|
|
45
40
|
*/
|
|
46
41
|
iconType?: 'chevron';
|
|
47
42
|
}
|
|
48
|
-
export declare const CarouselButton: ({ dir, variant, size, focusStyle, hideDisabledArrow, iconType, className, buttonClassName,
|
|
43
|
+
export declare const CarouselButton: ({ dir, variant, size, focusStyle, hideDisabledArrow, iconType, className, buttonClassName, onClick, }: CarouselButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
49
44
|
export default CarouselButton;
|
|
@@ -38,7 +38,6 @@ const CarouselButton = ({
|
|
|
38
38
|
iconType = "chevron",
|
|
39
39
|
className = "",
|
|
40
40
|
buttonClassName = "",
|
|
41
|
-
fullHeight: fullHeight2 = false,
|
|
42
41
|
onClick
|
|
43
42
|
}) => {
|
|
44
43
|
const {
|
|
@@ -52,7 +51,7 @@ const CarouselButton = ({
|
|
|
52
51
|
const [isDisabled, setIsDisabled] = useState(false);
|
|
53
52
|
const [shouldShowFocusRing, setShouldShowFocusRing] = useState(false);
|
|
54
53
|
const variantStyleClass = variant ? styles[variant] : "";
|
|
55
|
-
const shouldBeFullHeight =
|
|
54
|
+
const shouldBeFullHeight = variant === "gradient";
|
|
56
55
|
const buttonRef = useRef(null);
|
|
57
56
|
useEffect(() => {
|
|
58
57
|
const element = buttonRef.current;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CarouselButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { ArgTypes } from '@storybook/react';
|
|
2
|
+
import { CarouselProps } from './Carousel';
|
|
3
|
+
/**
|
|
4
|
+
* Shared argTypes configuration for all Carousel stories
|
|
5
|
+
* This ensures consistent controls across all story files
|
|
6
|
+
*/
|
|
7
|
+
export declare const carouselArgTypes: ArgTypes<CarouselProps>;
|
|
@@ -0,0 +1,305 @@
|
|
|
1
|
+
const carouselArgTypes = {
|
|
2
|
+
// Accessibility Controls
|
|
3
|
+
"aria-label": {
|
|
4
|
+
control: "text",
|
|
5
|
+
description: "Accessible name for the carousel - describes the purpose or content for screen readers",
|
|
6
|
+
table: {
|
|
7
|
+
category: "Accessibility",
|
|
8
|
+
type: { summary: "string" }
|
|
9
|
+
}
|
|
10
|
+
},
|
|
11
|
+
"aria-describedby": {
|
|
12
|
+
control: "text",
|
|
13
|
+
description: "ID of element that describes the carousel",
|
|
14
|
+
table: {
|
|
15
|
+
category: "Accessibility",
|
|
16
|
+
type: { summary: "string" }
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
// Core Configuration
|
|
20
|
+
looping: {
|
|
21
|
+
control: { type: "radio" },
|
|
22
|
+
options: ["off", "infinite", "backToStart"],
|
|
23
|
+
description: 'Looping behavior: "infinite" for continuous cycling, "backToStart" for jumping back to start, "off" to disable looping',
|
|
24
|
+
defaultValue: "off",
|
|
25
|
+
table: {
|
|
26
|
+
category: "Core Configuration",
|
|
27
|
+
type: { summary: '"infinite" | "backToStart" | "off"' },
|
|
28
|
+
defaultValue: { summary: '"off"' }
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
itemsPerPage: {
|
|
32
|
+
control: { type: "number", min: 1, max: 10, step: 0.25 },
|
|
33
|
+
description: "Number of items to display per page (minimum: 1). Decimal values (e.g., 2.25) can be used to show partial items for peek effects",
|
|
34
|
+
defaultValue: 1,
|
|
35
|
+
table: {
|
|
36
|
+
category: "Core Configuration",
|
|
37
|
+
type: { summary: "number | ResponsiveValue<number>" },
|
|
38
|
+
defaultValue: { summary: "1" }
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
spaceBetweenItems: {
|
|
42
|
+
control: { type: "number", min: 0, max: 100 },
|
|
43
|
+
description: "Space between carousel items in pixels. Works with both scroll padding and fractional items",
|
|
44
|
+
defaultValue: 0,
|
|
45
|
+
table: {
|
|
46
|
+
category: "Core Configuration",
|
|
47
|
+
type: { summary: "number | ResponsiveValue<number>" },
|
|
48
|
+
defaultValue: { summary: "0" }
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
scrollPadding: {
|
|
52
|
+
control: "text",
|
|
53
|
+
description: 'Amount of padding to add to create a "peek" effect. Accepts any valid CSS dimension (px, rem, em, %) - e.g., "15%", "20px", "2rem"',
|
|
54
|
+
table: {
|
|
55
|
+
category: "Core Configuration",
|
|
56
|
+
type: { summary: "string | ResponsiveValue<string>" },
|
|
57
|
+
defaultValue: { summary: "undefined" }
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
mouseDragging: {
|
|
61
|
+
control: "boolean",
|
|
62
|
+
description: "Whether to enable mouse dragging for the carousel",
|
|
63
|
+
defaultValue: true,
|
|
64
|
+
table: {
|
|
65
|
+
category: "Core Configuration",
|
|
66
|
+
type: { summary: "boolean" },
|
|
67
|
+
defaultValue: { summary: "true" }
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
// Button and Controls
|
|
71
|
+
iconType: {
|
|
72
|
+
table: {
|
|
73
|
+
disable: true
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
arrowStyleVariant: {
|
|
77
|
+
control: { type: "select" },
|
|
78
|
+
options: ["neutral", "white", "shapeFlat", "shapeElevated", "gradient"],
|
|
79
|
+
description: "Style variant for navigation arrow buttons",
|
|
80
|
+
defaultValue: "neutral",
|
|
81
|
+
table: {
|
|
82
|
+
category: "Button and Controls",
|
|
83
|
+
type: {
|
|
84
|
+
summary: '"neutral" | "white" | "shapeFlat" | "shapeElevated" | "gradient"'
|
|
85
|
+
},
|
|
86
|
+
defaultValue: { summary: '"neutral"' }
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
arrowSize: {
|
|
90
|
+
control: { type: "select" },
|
|
91
|
+
options: ["sm", "md", "lg"],
|
|
92
|
+
description: "Size of navigation buttons",
|
|
93
|
+
defaultValue: "md",
|
|
94
|
+
table: {
|
|
95
|
+
category: "Button and Controls",
|
|
96
|
+
type: {
|
|
97
|
+
summary: '"sm" | "md" | "lg" | ResponsiveValue<"sm" | "md" | "lg">'
|
|
98
|
+
},
|
|
99
|
+
defaultValue: { summary: '"md"' }
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
hideDisabledArrow: {
|
|
103
|
+
control: "boolean",
|
|
104
|
+
description: "Whether to hide navigation buttons when they are disabled (e.g., at first/last slide when looping is off)",
|
|
105
|
+
defaultValue: false,
|
|
106
|
+
table: {
|
|
107
|
+
category: "Button and Controls",
|
|
108
|
+
type: { summary: "boolean" },
|
|
109
|
+
defaultValue: { summary: "false" }
|
|
110
|
+
}
|
|
111
|
+
},
|
|
112
|
+
showArrowsOnHover: {
|
|
113
|
+
control: "boolean",
|
|
114
|
+
description: "Whether to show arrows only when hovering over the carousel or when it has focus",
|
|
115
|
+
defaultValue: false,
|
|
116
|
+
table: {
|
|
117
|
+
category: "Button and Controls",
|
|
118
|
+
type: { summary: "boolean | ResponsiveValue<boolean>" },
|
|
119
|
+
defaultValue: { summary: "false" }
|
|
120
|
+
}
|
|
121
|
+
},
|
|
122
|
+
focusStyle: {
|
|
123
|
+
control: { type: "radio" },
|
|
124
|
+
options: ["default", "white"],
|
|
125
|
+
description: 'Focus style for interactive elements - use "white" for dark backgrounds',
|
|
126
|
+
defaultValue: "default",
|
|
127
|
+
table: {
|
|
128
|
+
category: "Button and Controls",
|
|
129
|
+
type: { summary: '"default" | "white"' },
|
|
130
|
+
defaultValue: { summary: '"default"' }
|
|
131
|
+
}
|
|
132
|
+
},
|
|
133
|
+
// Dots/Pagination
|
|
134
|
+
hideDots: {
|
|
135
|
+
control: "boolean",
|
|
136
|
+
description: "Whether to hide pagination dots. Typically set to true when using scroll peek since dots become redundant",
|
|
137
|
+
defaultValue: false,
|
|
138
|
+
table: {
|
|
139
|
+
category: "Dots/Pagination",
|
|
140
|
+
type: { summary: "boolean" },
|
|
141
|
+
defaultValue: { summary: "false" }
|
|
142
|
+
}
|
|
143
|
+
},
|
|
144
|
+
dotsSize: {
|
|
145
|
+
control: { type: "radio" },
|
|
146
|
+
options: ["md", "lg"],
|
|
147
|
+
description: "Size of pagination dots when visible",
|
|
148
|
+
defaultValue: "md",
|
|
149
|
+
table: {
|
|
150
|
+
category: "Dots/Pagination",
|
|
151
|
+
type: { summary: '"md" | "lg"' },
|
|
152
|
+
defaultValue: { summary: '"md"' }
|
|
153
|
+
}
|
|
154
|
+
},
|
|
155
|
+
dotsVariant: {
|
|
156
|
+
control: { type: "radio" },
|
|
157
|
+
options: ["standard", "transparent"],
|
|
158
|
+
description: "Visual style of pagination dots",
|
|
159
|
+
defaultValue: "standard",
|
|
160
|
+
table: {
|
|
161
|
+
category: "Dots/Pagination",
|
|
162
|
+
type: { summary: '"standard" | "transparent"' },
|
|
163
|
+
defaultValue: { summary: '"standard"' }
|
|
164
|
+
}
|
|
165
|
+
},
|
|
166
|
+
// Autoplay
|
|
167
|
+
autoPlay: {
|
|
168
|
+
control: "boolean",
|
|
169
|
+
description: "Whether the autoplay is enabled",
|
|
170
|
+
defaultValue: false,
|
|
171
|
+
table: {
|
|
172
|
+
category: "Autoplay",
|
|
173
|
+
type: { summary: "boolean" },
|
|
174
|
+
defaultValue: { summary: "false" }
|
|
175
|
+
}
|
|
176
|
+
},
|
|
177
|
+
autoPlayInterval: {
|
|
178
|
+
control: { type: "number", min: 1e3, max: 1e4, step: 500 },
|
|
179
|
+
description: "Interval in milliseconds between slides during autoplay",
|
|
180
|
+
defaultValue: 2e3,
|
|
181
|
+
table: {
|
|
182
|
+
category: "Autoplay",
|
|
183
|
+
type: { summary: "number" },
|
|
184
|
+
defaultValue: { summary: "2000" }
|
|
185
|
+
}
|
|
186
|
+
},
|
|
187
|
+
autoPlayStyleVariant: {
|
|
188
|
+
control: { type: "select" },
|
|
189
|
+
options: ["neutralVibrant", "neutralSubtle", "whiteVibrant", "whiteSubtle"],
|
|
190
|
+
description: "Style variant for autoplay control button",
|
|
191
|
+
defaultValue: "neutralVibrant",
|
|
192
|
+
table: {
|
|
193
|
+
category: "Autoplay",
|
|
194
|
+
type: {
|
|
195
|
+
summary: '"neutralVibrant" | "neutralSubtle" | "whiteVibrant" | "whiteSubtle"'
|
|
196
|
+
},
|
|
197
|
+
defaultValue: { summary: '"neutralVibrant"' }
|
|
198
|
+
}
|
|
199
|
+
},
|
|
200
|
+
autoPlayControlSize: {
|
|
201
|
+
control: { type: "radio" },
|
|
202
|
+
options: ["sm", "md"],
|
|
203
|
+
description: "Size of autoplay control button",
|
|
204
|
+
defaultValue: "md",
|
|
205
|
+
table: {
|
|
206
|
+
category: "Autoplay",
|
|
207
|
+
type: { summary: '"sm" | "md"' },
|
|
208
|
+
defaultValue: { summary: '"md"' }
|
|
209
|
+
}
|
|
210
|
+
},
|
|
211
|
+
// Custom Styling & Positioning
|
|
212
|
+
carouselWrapperClassName: {
|
|
213
|
+
control: "text",
|
|
214
|
+
description: 'Custom class name for the outermost wrapper to allow custom styles - use your preferred naming convention (helper: "defaultCarouselWrapper")',
|
|
215
|
+
table: {
|
|
216
|
+
category: "Custom Styling & Positioning",
|
|
217
|
+
type: { summary: "string" }
|
|
218
|
+
}
|
|
219
|
+
},
|
|
220
|
+
prevArrowClassName: {
|
|
221
|
+
control: "text",
|
|
222
|
+
description: 'Custom class name for the previous button to allow custom styles - use your preferred naming convention (helper: "defaultPrevButton")',
|
|
223
|
+
table: {
|
|
224
|
+
category: "Custom Styling & Positioning",
|
|
225
|
+
type: { summary: "string" }
|
|
226
|
+
}
|
|
227
|
+
},
|
|
228
|
+
nextArrowClassName: {
|
|
229
|
+
control: "text",
|
|
230
|
+
description: 'Custom class name for the next button to allow custom styles - use your preferred naming convention (helper: "defaultNextButton")',
|
|
231
|
+
table: {
|
|
232
|
+
category: "Custom Styling & Positioning",
|
|
233
|
+
type: { summary: "string" }
|
|
234
|
+
}
|
|
235
|
+
},
|
|
236
|
+
autoplayControlClassName: {
|
|
237
|
+
control: "text",
|
|
238
|
+
description: 'Custom class name for the autoplay control to allow custom styles - use your preferred naming convention (helper: "autoplayControl")',
|
|
239
|
+
table: {
|
|
240
|
+
category: "Custom Styling & Positioning",
|
|
241
|
+
type: { summary: "string" }
|
|
242
|
+
}
|
|
243
|
+
},
|
|
244
|
+
dotsContainerClassName: {
|
|
245
|
+
control: "text",
|
|
246
|
+
description: 'Custom class name for the dots container to allow custom styles - use your preferred naming convention (helper: "defaultDotsContainer")',
|
|
247
|
+
table: {
|
|
248
|
+
category: "Custom Styling & Positioning",
|
|
249
|
+
type: { summary: "string" }
|
|
250
|
+
}
|
|
251
|
+
},
|
|
252
|
+
dotsWrapperClassName: {
|
|
253
|
+
control: "text",
|
|
254
|
+
description: "Custom class name for the dots wrapper to allow custom styles - use your preferred naming convention",
|
|
255
|
+
table: {
|
|
256
|
+
category: "Custom Styling & Positioning",
|
|
257
|
+
type: { summary: "string" }
|
|
258
|
+
}
|
|
259
|
+
},
|
|
260
|
+
dotClassName: {
|
|
261
|
+
control: "text",
|
|
262
|
+
description: "Custom class name for individual dots to allow custom styles - use your preferred naming convention",
|
|
263
|
+
table: {
|
|
264
|
+
category: "Custom Styling & Positioning",
|
|
265
|
+
type: { summary: "string" }
|
|
266
|
+
}
|
|
267
|
+
},
|
|
268
|
+
activeDotClassName: {
|
|
269
|
+
control: "text",
|
|
270
|
+
description: "Custom class name for the active dot to allow custom styles - use your preferred naming convention",
|
|
271
|
+
table: {
|
|
272
|
+
category: "Custom Styling & Positioning",
|
|
273
|
+
type: { summary: "string" }
|
|
274
|
+
}
|
|
275
|
+
},
|
|
276
|
+
itemWrapperClassName: {
|
|
277
|
+
control: "text",
|
|
278
|
+
description: "Custom class name for individual carousel item wrappers to allow custom styles - use your preferred naming convention",
|
|
279
|
+
table: {
|
|
280
|
+
category: "Custom Styling & Positioning",
|
|
281
|
+
type: { summary: "string" }
|
|
282
|
+
}
|
|
283
|
+
},
|
|
284
|
+
activeItemClassName: {
|
|
285
|
+
control: "text",
|
|
286
|
+
description: "Custom class name for the currently active/visible carousel item to allow custom styles - use your preferred naming convention",
|
|
287
|
+
table: {
|
|
288
|
+
category: "Custom Styling & Positioning",
|
|
289
|
+
type: { summary: "string" }
|
|
290
|
+
}
|
|
291
|
+
},
|
|
292
|
+
// Content (disable control)
|
|
293
|
+
children: {
|
|
294
|
+
control: { type: "object" },
|
|
295
|
+
description: "Content to be displayed in the carousel",
|
|
296
|
+
table: {
|
|
297
|
+
category: "Content",
|
|
298
|
+
disable: true
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
};
|
|
302
|
+
export {
|
|
303
|
+
carouselArgTypes
|
|
304
|
+
};
|
|
305
|
+
//# sourceMappingURL=CarouselControls.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CarouselControls.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -3,14 +3,14 @@ import { useRef } from "react";
|
|
|
3
3
|
import { useFocusRing } from "@react-aria/focus";
|
|
4
4
|
import { useHover } from "@react-aria/interactions";
|
|
5
5
|
import { focusStyleVariants } from "../../../utils/focus/focusStyles.js";
|
|
6
|
-
import '../../../assets/CarouselDots.css';const tabsContainer = "
|
|
7
|
-
const tabs = "
|
|
8
|
-
const transparent = "
|
|
9
|
-
const dotsScroller = "
|
|
10
|
-
const tab = "
|
|
11
|
-
const activeTab = "
|
|
12
|
-
const tabMd = "
|
|
13
|
-
const tabLg = "
|
|
6
|
+
import '../../../assets/CarouselDots.css';const tabsContainer = "_tabsContainer_1aqyc_1";
|
|
7
|
+
const tabs = "_tabs_1aqyc_1";
|
|
8
|
+
const transparent = "_transparent_1aqyc_21";
|
|
9
|
+
const dotsScroller = "_dotsScroller_1aqyc_25";
|
|
10
|
+
const tab = "_tab_1aqyc_1";
|
|
11
|
+
const activeTab = "_activeTab_1aqyc_52";
|
|
12
|
+
const tabMd = "_tabMd_1aqyc_61";
|
|
13
|
+
const tabLg = "_tabLg_1aqyc_66";
|
|
14
14
|
const styles = {
|
|
15
15
|
tabsContainer,
|
|
16
16
|
tabs,
|
|
@@ -26,8 +26,6 @@ const CarouselDots = ({
|
|
|
26
26
|
currentPage,
|
|
27
27
|
onDotClick,
|
|
28
28
|
dotsSize = "md",
|
|
29
|
-
tabSize,
|
|
30
|
-
// For backward compatibility
|
|
31
29
|
variant = "standard",
|
|
32
30
|
focusStyle = "default",
|
|
33
31
|
className = "",
|
|
@@ -38,7 +36,6 @@ const CarouselDots = ({
|
|
|
38
36
|
}) => {
|
|
39
37
|
const tabsRef = useRef(null);
|
|
40
38
|
const wrapperRef = useRef(null);
|
|
41
|
-
const effectiveDotsSize = dotsSize || tabSize || "md";
|
|
42
39
|
const {
|
|
43
40
|
isFocusVisible,
|
|
44
41
|
focusProps
|
|
@@ -112,29 +109,28 @@ const CarouselDots = ({
|
|
|
112
109
|
const getContainerAriaLabel = () => {
|
|
113
110
|
return `Slide pagination, ${totalItems} slides, currently on slide ${currentPage + 1}`;
|
|
114
111
|
};
|
|
115
|
-
|
|
112
|
+
const getDotClasses = (index) => {
|
|
113
|
+
const isActive = index === currentPage;
|
|
114
|
+
const classes = [
|
|
115
|
+
styles.tab,
|
|
116
|
+
styles[dotsSize === "lg" ? "tabLg" : "tabMd"],
|
|
117
|
+
// Use CSS classes for sizing
|
|
118
|
+
isActive ? styles.activeTab : "",
|
|
119
|
+
dotClassName || "",
|
|
120
|
+
isActive && activeDotClassName ? activeDotClassName : ""
|
|
121
|
+
].filter(Boolean);
|
|
122
|
+
return classes.join(" ");
|
|
123
|
+
};
|
|
124
|
+
return /* @__PURE__ */ jsx("div", { className: getContainerClasses(), ref: wrapperRef, "data-dot-size": dotsSize, "data-transitioning": isTransitioning ? "true" : void 0, children: /* @__PURE__ */ jsx("div", { className: getDotsWrapperClasses(), ref: tabsRef, tabIndex: 0, role: "tablist", "aria-label": getContainerAriaLabel(), onKeyDown: handleKeyDown, "data-focused": isFocusVisible ? true : void 0, "data-focus-visible": isFocusVisible ? true : void 0, "data-hovered": isHovered ? true : void 0, "aria-activedescendant": `dot-${currentPage}`, ...focusProps, ...hoverProps, children: /* @__PURE__ */ jsx("div", { className: styles.dotsScroller, children: Array.from({
|
|
116
125
|
length: totalItems
|
|
117
126
|
}, (_, index) => {
|
|
118
127
|
const isActive = index === currentPage;
|
|
119
|
-
const baseStyle = {
|
|
120
|
-
width: effectiveDotsSize === "lg" ? "12px" : "8px",
|
|
121
|
-
height: effectiveDotsSize === "lg" ? "12px" : "8px",
|
|
122
|
-
borderRadius: "50%",
|
|
123
|
-
backgroundColor: isActive ? "var(--alto-sem-color-fg-primary)" : "rgba(0, 0, 0, 0.3)",
|
|
124
|
-
border: "none",
|
|
125
|
-
padding: 0,
|
|
126
|
-
cursor: isTransitioning ? "default" : "pointer",
|
|
127
|
-
display: "block",
|
|
128
|
-
flexShrink: 0,
|
|
129
|
-
margin: 0,
|
|
130
|
-
transition: "none"
|
|
131
|
-
};
|
|
132
128
|
return /* @__PURE__ */ jsx(
|
|
133
129
|
"button",
|
|
134
130
|
{
|
|
135
131
|
id: `dot-${index}`,
|
|
136
132
|
type: "button",
|
|
137
|
-
className:
|
|
133
|
+
className: getDotClasses(index),
|
|
138
134
|
onClick: () => handleDotClick(index),
|
|
139
135
|
onKeyDown: (e) => handleDotKeyDown(e, index),
|
|
140
136
|
"aria-label": getDotAriaLabel(index),
|
|
@@ -144,7 +140,6 @@ const CarouselDots = ({
|
|
|
144
140
|
"data-tab-index": index,
|
|
145
141
|
tabIndex: -1,
|
|
146
142
|
disabled: isTransitioning,
|
|
147
|
-
style: baseStyle,
|
|
148
143
|
"aria-hidden": "true"
|
|
149
144
|
},
|
|
150
145
|
index
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselDots.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"CarouselDots.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alto-avios/alto-ui",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.6.0-alpha.0",
|
|
4
4
|
"description": "A react component library for Alto Design System",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Ian Caldwell IAGL",
|
|
@@ -109,7 +109,7 @@
|
|
|
109
109
|
"wait-on": "^8.0.1"
|
|
110
110
|
},
|
|
111
111
|
"peerDependencies": {
|
|
112
|
-
"@alto-avios/alto-tokens": "^3.2.
|
|
112
|
+
"@alto-avios/alto-tokens": "^3.2.1",
|
|
113
113
|
"react": "^18.0.0"
|
|
114
114
|
},
|
|
115
115
|
"main": "dist/index.js",
|