@alto-avios/alto-ui 3.5.2-alpha.1 → 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.d.ts +2 -0
- package/dist/components/Carousel/Carousel.js +63 -43
- 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,
|
|
@@ -62,6 +62,7 @@ export interface CarouselBaseProps {
|
|
|
62
62
|
arrowSize?: 'sm' | 'md' | 'lg';
|
|
63
63
|
/**
|
|
64
64
|
* Whether to hide navigation buttons when disabled
|
|
65
|
+
* Note: Navigation buttons are automatically hidden when all items fit on one page
|
|
65
66
|
* @default false
|
|
66
67
|
*/
|
|
67
68
|
hideDisabledArrow?: boolean;
|
|
@@ -87,6 +88,7 @@ export interface CarouselBaseProps {
|
|
|
87
88
|
dotsVariant?: 'standard' | 'transparent';
|
|
88
89
|
/**
|
|
89
90
|
* Whether to hide pagination dots
|
|
91
|
+
* Note: Dots are automatically hidden when there's only one page
|
|
90
92
|
* @default false
|
|
91
93
|
*/
|
|
92
94
|
hideDots?: boolean;
|
|
@@ -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,
|
|
@@ -133,6 +143,7 @@ const Carousel = ({
|
|
|
133
143
|
const resolvedArrowSize = resolveResponsiveProp(arrowSize, breakpoint) ?? "md";
|
|
134
144
|
const safeItemsPerPage = Math.max(1, resolvedItemsPerPage);
|
|
135
145
|
const totalPages = Math.ceil(totalItems / safeItemsPerPage);
|
|
146
|
+
const shouldShowDots = !hideDots && totalPages > 1;
|
|
136
147
|
const carouselRef = useRef(null);
|
|
137
148
|
const ariaCarouselRef = useRef(null);
|
|
138
149
|
const [currentPage, setCurrentPage] = useState(0);
|
|
@@ -143,6 +154,9 @@ const Carousel = ({
|
|
|
143
154
|
const [isTransitioning, setIsTransitioning] = useState(false);
|
|
144
155
|
const [dragStartPosition, setDragStartPosition] = useState(null);
|
|
145
156
|
const dragThreshold = 5;
|
|
157
|
+
const getClassNameWithDefault = (customClassName, defaultClassName) => {
|
|
158
|
+
return customClassName || defaultClassName;
|
|
159
|
+
};
|
|
146
160
|
const getCarouselWrapperClasses = () => {
|
|
147
161
|
const classes = [styles.carouselWrapper];
|
|
148
162
|
if (!Number.isInteger(safeItemsPerPage)) {
|
|
@@ -151,10 +165,15 @@ const Carousel = ({
|
|
|
151
165
|
if (resolvedScrollPadding) {
|
|
152
166
|
classes.push(styles.hasScrollPadding);
|
|
153
167
|
}
|
|
154
|
-
if (carouselWrapperClassName) {
|
|
168
|
+
if (carouselWrapperClassName && carouselWrapperClassName.trim()) {
|
|
155
169
|
classes.push(carouselWrapperClassName);
|
|
170
|
+
} else {
|
|
171
|
+
classes.push(styles.defaultCarouselWrapper);
|
|
156
172
|
}
|
|
157
|
-
|
|
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;
|
|
158
177
|
};
|
|
159
178
|
const getCssVariables = () => {
|
|
160
179
|
const cssVars2 = {};
|
|
@@ -186,15 +205,15 @@ const Carousel = ({
|
|
|
186
205
|
}
|
|
187
206
|
setIsTransitioning(true);
|
|
188
207
|
setPrevPage(currentPage);
|
|
189
|
-
|
|
208
|
+
if (nativeTab) {
|
|
209
|
+
nativeTab.click();
|
|
210
|
+
}
|
|
190
211
|
setTimeout(() => {
|
|
191
|
-
|
|
192
|
-
nativeTab.click();
|
|
193
|
-
}
|
|
212
|
+
setCurrentPage(index);
|
|
194
213
|
setTimeout(() => {
|
|
195
214
|
setIsTransitioning(false);
|
|
196
|
-
},
|
|
197
|
-
},
|
|
215
|
+
}, 500);
|
|
216
|
+
}, 50);
|
|
198
217
|
};
|
|
199
218
|
useEffect(() => {
|
|
200
219
|
if (!carouselRef.current || !mouseDragging) return;
|
|
@@ -336,7 +355,8 @@ const Carousel = ({
|
|
|
336
355
|
}
|
|
337
356
|
}
|
|
338
357
|
} : {};
|
|
339
|
-
const
|
|
358
|
+
const shouldShowArrows = totalPages > 1;
|
|
359
|
+
const arrowsVisible = shouldShowArrows && (!showArrowsOnHover || isHovered || isFocused);
|
|
340
360
|
const cssVars = getCssVariables();
|
|
341
361
|
const {
|
|
342
362
|
focusProps,
|
|
@@ -404,12 +424,12 @@ const Carousel = ({
|
|
|
404
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);
|
|
405
425
|
}) }),
|
|
406
426
|
/* @__PURE__ */ jsxs("div", { className: `${styles.controls} ${showArrowsOnHover ? styles.showOnHover : ""}`, children: [
|
|
407
|
-
/* @__PURE__ */ jsx(CarouselButton, { dir: "prev", variant: arrowStyleVariant, size: resolvedArrowSize, focusStyle, iconType, hideDisabledArrow, className: `${prevArrowClassName} ${!arrowsVisible ? styles.hidden : ""}` }),
|
|
408
|
-
/* @__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 : ""}` })
|
|
409
429
|
] }),
|
|
410
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) }) }),
|
|
411
|
-
autoPlay && /* @__PURE__ */ jsx("div", { className: `${styles.autoplayControlWrapper} ${autoplayControlClassName
|
|
412
|
-
|
|
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 })
|
|
413
433
|
] }) });
|
|
414
434
|
};
|
|
415
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",
|