@alto-avios/alto-ui 3.4.0-alpha.4 → 3.4.0-alpha.6

package/README.md

@@ -73,6 +73,14 @@ We need to create static storybook files for our public domain site to use. Run
 
 `npm run build:storybook`
 
+## Run Chromatic (Dev)
+
+Run the following command to analyze our code and send to chromatic
+
+`npx chromatic --project-token <YOUR_PROJECT_TOKEN>`
+
+Project Token can be found in the chromatic dashboard
+
 ## For Application using our package
 
 ### Install Package in Applications

package/dist/assets/Carousel.css

@@ -1 +1 @@
-._carouselWrapper_mtbhv_1{max-width:100%;overflow:hidden;position:relative;width:100%}._showPartialItems_mtbhv_9,._showPartialItems_mtbhv_9 ._carousel_mtbhv_1{overflow:visible}._carousel_mtbhv_1{overflow:hidden;position:relative;width:100%}._scroller_mtbhv_23{display:flex;overflow-x:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;transition:all .3s ease}[data-dragging=true] ._scroller_mtbhv_23{cursor:grabbing;scroll-behavior:auto}._scroller_mtbhv_23:hover{cursor:grab}._item_mtbhv_43{box-sizing:border-box;flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}div[style*=--items-per-page] ._item_mtbhv_43{flex:0 0 auto;flex-basis:calc(100%/var(--items-per-page))}div[style*=--space-between-items] ._item_mtbhv_43{margin-right:var(--space-between-items)}div[style*=--space-between-items] ._item_mtbhv_43:last-child{margin-right:0}div[style*=--scroll-padding] ._scroller_mtbhv_23{padding-left:var(--scroll-padding);padding-right:var(--scroll-padding);scroll-padding-left:var(--scroll-padding);scroll-padding-right:var(--scroll-padding)}._slideLeft_mtbhv_73{animation:_slideLeftAnimation_mtbhv_1 .4s ease-out}._slideRight_mtbhv_77{animation:_slideRightAnimation_mtbhv_1 .4s ease-out}@keyframes _slideLeftAnimation_mtbhv_1{0%{transform:translate(5%)}to{transform:translate(0)}}@keyframes _slideRightAnimation_mtbhv_1{0%{transform:translate(-5%)}to{transform:translate(0)}}._controls_mtbhv_100{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1}._dotsContainerWrapper_mtbhv_111{pointer-events:auto;z-index:2}._dotsContainer_mtbhv_111{position:relative}@media (max-width:768px){._dotsContainerWrapper_mtbhv_111{cursor:pointer}._dotsContainerWrapper_mtbhv_111:active{opacity:.8}}._hiddenTabs_mtbhv_133{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_mtbhv_146{cursor:pointer;touch-action:manipulation}._autoplayControlWrapper_mtbhv_161{align-items:center;display:flex;justify-content:center;pointer-events:auto;position:absolute;right:16px;top:16px;z-index:10}
+._carouselWrapper_1hn3p_2{max-width:100%;overflow:hidden;position:relative;width:100%}._showPartialItems_1hn3p_10,._showPartialItems_1hn3p_10 ._carousel_1hn3p_2{overflow:visible}._hasScrollPadding_1hn3p_19,._hasScrollPadding_1hn3p_19 ._carousel_1hn3p_2{overflow:visible!important}._carousel_1hn3p_2{overflow:hidden;position:relative;width:100%}._scroller_1hn3p_33{display:flex;overflow-x:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;border-radius:var(--alto-sem-radius-md);height:auto;transition:all .3s ease}._scroller_1hn3p_33:focus{outline-offset:-2px;outline-width:2px}[data-dragging=true] ._scroller_1hn3p_33{cursor:grabbing;scroll-behavior:auto}._scroller_1hn3p_33:hover{cursor:grab}._item_1hn3p_60{box-sizing:border-box;flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}div[style*=--items-per-page] ._item_1hn3p_60{flex:0 0 auto;width:calc(100%/var(--items-per-page))}div[style*=--space-between-items] ._item_1hn3p_60{margin-right:var(--space-between-items)}div[style*=--space-between-items] ._item_1hn3p_60:last-child{margin-right:0}[data-scroll-padding=true],[data-scroll-padding=true] ._carousel_1hn3p_2,[data-scroll-padding=true] ._scroller_1hn3p_33{overflow:visible!important}[data-scroll-padding=true] ._item_1hn3p_60{scroll-snap-align:start}._slideLeft_1hn3p_99{animation:_slideLeftAnimation_1hn3p_1 1s cubic-bezier(.25,0,.85,.1)}._slideRight_1hn3p_103{animation:_slideRightAnimation_1hn3p_1 1s cubic-bezier(.25,0,.85,.1)}@keyframes _slideLeftAnimation_1hn3p_1{0%{transform:translate(0)}to{transform:translate(0)}}@keyframes _slideRightAnimation_1hn3p_1{0%{transform:translate(0)}to{transform:translate(0)}}._controls_1hn3p_126{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1}._showOnHover_1hn3p_137 ._arrowContainer_1hn3p_137{opacity:0;transition:opacity .3s ease}[data-arrows-visible=true] ._showOnHover_1hn3p_137 ._arrowContainer_1hn3p_137{opacity:1}._hidden_1hn3p_147{opacity:0;transition:opacity .3s ease,visibility .3s ease;visibility:hidden}._dotsContainerWrapper_1hn3p_156{pointer-events:auto;z-index:2}._dotsContainer_1hn3p_156{position:relative}@media (max-width:768px){._dotsContainerWrapper_1hn3p_156{cursor:pointer}._dotsContainerWrapper_1hn3p_156:active{opacity:.8}}._hiddenTabs_1hn3p_178{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_1hn3p_191{cursor:pointer;touch-action:manipulation}._autoplayControlWrapper_1hn3p_206{align-items:center;display:flex;justify-content:center;pointer-events:auto;position:absolute;right:16px;top:16px;z-index:10}._carouselDefault_1hn3p_220{height:100%;overflow-x:hidden;width:361px}._carouselDefault_1hn3p_220 ._prevButton_1hn3p_225{left:10px;position:absolute;top:50%;transform:translateY(-50%);z-index:5}._carouselDefault_1hn3p_220 ._nextButton_1hn3p_232{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:5}._carouselDefault_1hn3p_220 ._dotsContainer_1hn3p_156{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._carouselWithAutoPlay_1hn3p_250{position:relative;width:100%}._carouselWithAutoPlay_1hn3p_250 ._prevButton_1hn3p_225{left:10px;position:absolute;top:50%;transform:translateY(-50%);z-index:5}._carouselWithAutoPlay_1hn3p_250 ._nextButton_1hn3p_232{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:5}._carouselWithAutoPlay_1hn3p_250 ._dotsContainer_1hn3p_156{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._carouselWithAutoPlay_1hn3p_250 ._autoplayControl_1hn3p_206{pointer-events:auto!important;position:absolute!important;right:16px!important;top:16px!important;z-index:20!important}._carouselWithScrollPeek_1hn3p_286{overflow:visible!important;position:relative}._carouselWithScrollPeek_1hn3p_286 ._carousel_1hn3p_2{overflow:visible!important}._carouselWithScrollPeek_1hn3p_286 ._prevButton_1hn3p_225{left:16px;position:absolute;top:50%;transform:translateY(-50%);z-index:10}._carouselWithScrollPeek_1hn3p_286 ._nextButton_1hn3p_232{position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:10}._carouselWithScrollPeek_1hn3p_286 ._dotsContainer_1hn3p_156{bottom:20px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._carouselWithFractionalItems_1hn3p_318{overflow:visible!important;position:relative}._carouselWithFractionalItems_1hn3p_318 ._carousel_1hn3p_2{overflow:visible!important}._carouselWithFractionalItems_1hn3p_318 ._prevButton_1hn3p_225{left:16px;position:absolute;top:50%;transform:translateY(-50%);z-index:10}._carouselWithFractionalItems_1hn3p_318 ._nextButton_1hn3p_232{position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:10}._carouselWithFractionalItems_1hn3p_318 ._dotsContainer_1hn3p_156{bottom:20px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._paginationDotsDefault_1hn3p_350{position:relative;width:100%}._paginationDotsDefault_1hn3p_350 ._prevButton_1hn3p_225{left:10px;position:absolute;top:50%;transform:translateY(-50%);z-index:5}._paginationDotsDefault_1hn3p_350 ._nextButton_1hn3p_232{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:5}._paginationDotsDefault_1hn3p_350 ._dotsContainer_1hn3p_156{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}._hoverArrowsDefault_1hn3p_379{height:100%;overflow-x:hidden;width:361px}._hoverArrowsDefault_1hn3p_379 ._prevButton_1hn3p_225{left:10px;opacity:0;position:absolute;top:50%;transform:translateY(-50%);transition:opacity .3s ease;z-index:5}._hoverArrowsDefault_1hn3p_379 ._nextButton_1hn3p_232{opacity:0;position:absolute;right:10px;top:50%;transform:translateY(-50%);transition:opacity .3s ease;z-index:5}._hoverArrowsDefault_1hn3p_379:focus-within ._nextButton_1hn3p_232,._hoverArrowsDefault_1hn3p_379:focus-within ._prevButton_1hn3p_225,._hoverArrowsDefault_1hn3p_379:hover ._nextButton_1hn3p_232,._hoverArrowsDefault_1hn3p_379:hover ._prevButton_1hn3p_225{opacity:1}._hoverArrowsDefault_1hn3p_379 ._dotsContainer_1hn3p_156{bottom:12px;display:flex;justify-content:center;left:0;position:absolute;right:0;z-index:5}

package/dist/assets/CarouselButton.css

@@ -1 +1 @@
-._arrowContainer_ny9r1_1{background:none;border:none;padding:0;pointer-events:auto;position:relative;z-index:2}._iconButton_ny9r1_10{align-items:center;display:flex;justify-content:center}._hideWhenDisabled_ny9r1_16[aria-disabled=true]{display:none}._neutral_ny9r1_22 ._iconButton_ny9r1_10[data-focused=true],._neutral_ny9r1_22 ._iconButton_ny9r1_10[data-parent-hovered=true]{background-color:var(--alto-sem-color-overlay-state-darken-invert-hover)}:not([aria-disabled]) ._neutral_ny9r1_22 ._iconButton_ny9r1_10[data-parent-pressed=true]{background-color:var(--alto-sem-color-overlay-state-darken-invert-active)}._white_ny9r1_32 ._iconButton_ny9r1_10{background-color:transparent;border:none;border-radius:0}._white_ny9r1_32:not([aria-disabled]) ._iconButton_ny9r1_10[data-focused=true],._white_ny9r1_32:not([aria-disabled]) ._iconButton_ny9r1_10[data-parent-hovered=true]{background-color:var(--alto-sem-color-overlay-state-lighten-hover)}._white_ny9r1_32:not([aria-disabled]) ._iconButton_ny9r1_10[data-parent-pressed=true]{background-color:var(--alto-sem-color-overlay-state-lighten-active)}._shapeFlat_ny9r1_48:not([aria-disabled]) ._iconButton_ny9r1_10{background-color:var(--alto-sem-color-bg-white-vibrant-default)}._shapeFlat_ny9r1_48:not([aria-disabled]) ._iconButton_ny9r1_10[data-focused=true],._shapeFlat_ny9r1_48:not([aria-disabled]) ._iconButton_ny9r1_10[data-parent-hovered=true]{background-color:var(--alto-sem-color-bg-white-vibrant-hover)}._shapeFlat_ny9r1_48:not([aria-disabled]) ._iconButton_ny9r1_10[data-parent-pressed=true]{background-color:var(--alto-sem-color-bg-white-vibrant-active)}._shapeElevated_ny9r1_62:not([aria-disabled]) ._iconButton_ny9r1_10{background-color:var(--alto-sem-color-bg-white-vibrant-default);box-shadow:0 11.4px 9.12px #2f2a850d,0 2.59px 4.4px #2f2a850d,0 6.99px 18.18px #2f2a8514}._shapeElevated_ny9r1_62:not([aria-disabled]) ._iconButton_ny9r1_10[data-focused=true],._shapeElevated_ny9r1_62:not([aria-disabled]) ._iconButton_ny9r1_10[data-parent-hovered=true]{background-color:var(--alto-sem-color-bg-white-vibrant-hover)}._shapeElevated_ny9r1_62:not([aria-disabled]) ._iconButton_ny9r1_10[data-parent-pressed=true]{background-color:var(--alto-sem-color-bg-white-vibrant-active)}._gradient_ny9r1_80:not([aria-disabled]) ._iconButton_ny9r1_10{background:linear-gradient(90deg,#fefefe 50%,#fff0);border:none;border-radius:0}._gradient_ny9r1_80._next_ny9r1_86:not([aria-disabled]) ._iconButton_ny9r1_10{background:linear-gradient(90deg,#fff0,#fefefe 50%)}._gradient_ny9r1_80:not([aria-disabled]) ._iconButton_ny9r1_10[data-focused=true],._gradient_ny9r1_80:not([aria-disabled]) ._iconButton_ny9r1_10[data-parent-hovered=true]{background:linear-gradient(90deg,#fefefe 50%,#fff0);color:var(--alto-sem-color-fg-accent-primary)}._gradient_ny9r1_80._next_ny9r1_86:not([aria-disabled]) ._iconButton_ny9r1_10[data-focused=true],._gradient_ny9r1_80._next_ny9r1_86:not([aria-disabled]) ._iconButton_ny9r1_10[data-parent-hovered=true]{background:linear-gradient(90deg,#fff0,#fefefe 50%);color:var(--alto-sem-color-fg-accent-primary)}._gradient_ny9r1_80:not([aria-disabled]) ._iconButton_ny9r1_10[data-parent-pressed=true]{background-color:var(--alto-sem-color-overlay-state-lighten-active)}._gradient_ny9r1_80:not([aria-disabled]) ._iconButton_ny9r1_10[data-focused],._white_ny9r1_32:not([aria-disabled]) ._iconButton_ny9r1_10{outline-offset:var(--alto-sem-border-width-none)}[aria-disabled] ._iconButton_ny9r1_10{background-color:var(--alto-sem-color-fg-disabled-primary);cursor:not-allowed;opacity:var(--alto-sem-opacity-30)}
+._arrowContainer_v9ex2_1{background:none;border:none;padding:0;pointer-events:auto;position:relative;z-index:2}._iconButton_v9ex2_10{align-items:center;display:flex;justify-content:center}._hideWhenDisabled_v9ex2_16[aria-disabled=true]{display:none}._neutral_v9ex2_22 ._iconButton_v9ex2_10[data-focused=true],._neutral_v9ex2_22 ._iconButton_v9ex2_10[data-parent-hovered=true]{background-color:var(--alto-sem-color-overlay-state-darken-invert-hover)}:not([aria-disabled]) ._neutral_v9ex2_22 ._iconButton_v9ex2_10[data-parent-pressed=true]{background-color:var(--alto-sem-color-overlay-state-darken-invert-active)}._white_v9ex2_32 ._iconButton_v9ex2_10{background-color:transparent;border:none;border-radius:0}._white_v9ex2_32:not([aria-disabled]) ._iconButton_v9ex2_10[data-focused=true],._white_v9ex2_32:not([aria-disabled]) ._iconButton_v9ex2_10[data-parent-hovered=true]{background-color:var(--alto-sem-color-overlay-state-lighten-hover)}._white_v9ex2_32:not([aria-disabled]) ._iconButton_v9ex2_10[data-parent-pressed=true]{background-color:var(--alto-sem-color-overlay-state-lighten-active)}._shapeFlat_v9ex2_48:not([aria-disabled]) ._iconButton_v9ex2_10{background-color:var(--alto-sem-color-bg-white-vibrant-default)}._shapeFlat_v9ex2_48:not([aria-disabled]) ._iconButton_v9ex2_10[data-parent-pressed=true]{background-color:var(--alto-sem-color-bg-white-vibrant-active)}._shapeElevated_v9ex2_57:not([aria-disabled]) ._iconButton_v9ex2_10{background-color:var(--alto-sem-color-bg-white-vibrant-default);box-shadow:0 11.4px 9.12px #2f2a850d,0 2.59px 4.4px #2f2a850d,0 6.99px 18.18px #2f2a8514}._shapeElevated_v9ex2_57:not([aria-disabled]) ._iconButton_v9ex2_10[data-focused=true],._shapeElevated_v9ex2_57:not([aria-disabled]) ._iconButton_v9ex2_10[data-parent-hovered=true]{background-color:var(--alto-sem-color-bg-white-vibrant-hover)}._shapeElevated_v9ex2_57:not([aria-disabled]) ._iconButton_v9ex2_10[data-parent-pressed=true]{background-color:var(--alto-sem-color-bg-white-vibrant-active)}._gradient_v9ex2_75:not([aria-disabled]) ._iconButton_v9ex2_10{background:linear-gradient(90deg,#fefefe 50%,#fff0);border:none;border-radius:0}._gradient_v9ex2_75._next_v9ex2_81:not([aria-disabled]) ._iconButton_v9ex2_10{background:linear-gradient(90deg,#fff0,#fefefe 50%)}._gradient_v9ex2_75:not([aria-disabled]) ._iconButton_v9ex2_10[data-focused=true],._gradient_v9ex2_75:not([aria-disabled]) ._iconButton_v9ex2_10[data-parent-hovered=true]{background:linear-gradient(90deg,#fefefe 50%,#fff0);color:var(--alto-sem-color-fg-accent-primary)}._gradient_v9ex2_75._next_v9ex2_81:not([aria-disabled]) ._iconButton_v9ex2_10[data-focused=true],._gradient_v9ex2_75._next_v9ex2_81:not([aria-disabled]) ._iconButton_v9ex2_10[data-parent-hovered=true]{background:linear-gradient(90deg,#fff0,#fefefe 50%);color:var(--alto-sem-color-fg-accent-primary)}._gradient_v9ex2_75:not([aria-disabled]) ._iconButton_v9ex2_10[data-parent-pressed=true]{background-color:var(--alto-sem-color-overlay-state-lighten-active)}._gradient_v9ex2_75:not([aria-disabled]) ._iconButton_v9ex2_10[data-focused],._white_v9ex2_32:not([aria-disabled]) ._iconButton_v9ex2_10{outline-offset:var(--alto-sem-border-width-none)}[aria-disabled] ._iconButton_v9ex2_10{background-color:var(--alto-sem-color-fg-disabled-primary);cursor:not-allowed;opacity:var(--alto-sem-opacity-30)}._fullHeight_v9ex2_114{align-items:center;bottom:0;cursor:pointer;display:flex;height:100%;top:0;transform:none}._fullHeight_v9ex2_114._prev_v9ex2_124{justify-content:flex-start;left:0}._fullHeight_v9ex2_114._next_v9ex2_81{justify-content:flex-end;right:0}._fullHeight_v9ex2_114 ._iconButton_v9ex2_10{box-shadow:none!important;outline:none!important;position:relative;z-index:2}._fullHeight_v9ex2_114 ._iconButton_v9ex2_10:focus,._fullHeight_v9ex2_114 ._iconButton_v9ex2_10:focus-visible,._fullHeight_v9ex2_114 ._iconButton_v9ex2_10[data-focused=true]{border:none!important;box-shadow:none!important;outline:none!important}

package/dist/assets/CarouselDots.css

@@ -1 +1 @@
-._tabsContainer_1yet6_1{margin:0 auto;min-height:30px;width:240px}._tabsContainer_1yet6_1,._tabs_1yet6_1{align-items:center;display:flex;justify-content:center;overflow:hidden;position:relative}._tabs_1yet6_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_1yet6_1[data-focused=true]{outline:2px solid var(--alto-sem-color-border-accent);outline-offset:1px}._tabs_1yet6_1._transparent_1yet6_28{background-color:transparent}._dotsScroller_1yet6_32{align-items:center;display:flex;gap:var(--alto-sem-space-2xs);justify-content:center;position:relative;white-space:nowrap;will-change:transform}._tab_1yet6_1{background-color:#0000004d;border:none;border-radius:var(--alto-sem-radius-circle);cursor:pointer;display:block;flex-shrink:0;margin:0;padding:0;transition:background-color .6s ease,width .6s ease,height .6s ease,opacity .6s ease}._tab_1yet6_1:hover,._tab_1yet6_1[data-hovered=true]{transform:scale(1.1)}._tab_1yet6_1._activeTab_1yet6_65{background-color:var(--alto-sem-color-fg-primary)}._tabs_1yet6_1[data-focused=true] ._tab_1yet6_1._activeTab_1yet6_65{background-color:var(--alto-sem-color-border-accent)}._tabMd_1yet6_74{height:8px;width:8px}._tabLg_1yet6_79{height:12px;width:12px}._tabSizeMedium_1yet6_85{height:6px;opacity:.8;width:6px}._tabSizeSmall_1yet6_92{height:4px;opacity:.6;width:4px}[data-dot-size=lg] ._tabSizeMedium_1yet6_85{height:9px;width:9px}[data-dot-size=lg] ._tabSizeSmall_1yet6_92{height:6px;width:6px}
+._tabsContainer_1rprd_1{align-items:center;display:flex;justify-content:center;margin:0 auto;min-height:30px;position:relative;width:auto}._tabsContainer_1rprd_1:focus{border:2px solid green}._tabs_1rprd_1{align-items:center;background-color:var(--alto-sem-color-bg-white-vibrant-default);border-radius:var(--alto-sem-radius-circle);display:flex;justify-content:center;padding:var(--alto-sem-space-2xs) var(--alto-sem-space-xs);position:relative}._tabs_1rprd_1._transparent_1rprd_25{background-color:transparent}._dotsScroller_1rprd_29{align-items:center;display:flex;flex-wrap:wrap;gap:var(--alto-sem-space-2xs);justify-content:center;position:relative;white-space:nowrap}._tab_1rprd_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_1rprd_1:hover,._tab_1rprd_1[data-hovered=true]{transform:scale(1.1)}._tab_1rprd_1._activeTab_1rprd_56{background-color:var(--alto-sem-color-fg-primary)}._tabs_1rprd_1[data-focused=true] ._tab_1rprd_1._activeTab_1rprd_56{background-color:var(--alto-sem-color-border-accent)}[data-transitioning=true] ._tab_1rprd_1{pointer-events:none;transition:none!important}[data-transitioning=true] ._dotsScroller_1rprd_29{transition:none!important}._tabMd_1rprd_75{height:8px;width:8px}._tabLg_1rprd_80{height:12px;width:12px}

package/dist/components/Carousel/Carousel.d.ts

@@ -19,17 +19,26 @@ export interface CarouselProps {
      * @min 1
      */
     itemsPerPage?: number;
+    /**
+     * Number of items to scroll when navigating
+     * If not specified, will default to itemsPerPage
+     * @default undefined
+     * @min 1
+     */
+    scrollByCount?: number;
     /**
      * Space between carousel items in pixels
      * @default 0
      */
     spaceBetweenItems?: number;
     /**
-     * Whether to show a peek of the next/previous slides when in
-     * overflow mode
-     * @default false
+     * Amount of padding added to the scroll container to create a "peek" effect.
+     * This shows a portion of the adjacent items.
+     * Accepts any valid CSS dimension (px, rem, em, %) - e.g., "15%", "20px", "2rem"
+     * @example "15%" or "20px" or "2rem"
+     * @default undefined
      */
-    hasScrollPeek?: boolean;
+    scrollPadding?: string;
     /**
      * Additional CSS class for the carousel container
      */
@@ -54,6 +63,11 @@ export interface CarouselProps {
      * @default false
      */
     hideWhenDisabled?: boolean;
+    /**
+     * Whether to show arrows only when hovering over the carousel or when it has focus
+     * @default false
+     */
+    showArrowsOnHover?: boolean;
     /**
      * Focus style for interactive elements
      * @default 'default'
@@ -145,6 +159,11 @@ export interface CarouselProps {
      * Class name for the active dot
      */
     activeDotClassName?: string;
+    /**
+     * Whether the navigation buttons should be full height of the carousel
+     * @default false
+     */
+    fullHeightButtons?: boolean;
 }
-export declare const Carousel: ({ children, looping, className, itemsPerPage, spaceBetweenItems, hasScrollPeek, iconType, carouselArrow, buttonSize, hideWhenDisabled, focusStyle, dotSize, dotsVariant, hideDots, enableTapCycling, isPaused, autoPlayInterval, autoPlayControlVariant, autoPlayControlSize, mouseDragging, carouselWrapperClassName, controlsClassName, prevButtonClassName, nextButtonClassName, autoplayControlClassName, dotsContainerClassName, dotsWrapperClassName, dotClassName, activeDotClassName, }: CarouselProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Carousel: ({ children, looping, className, itemsPerPage, scrollByCount, spaceBetweenItems, scrollPadding, iconType, carouselArrow, buttonSize, hideWhenDisabled, showArrowsOnHover, focusStyle, fullHeightButtons, dotSize, dotsVariant, hideDots, enableTapCycling, isPaused, autoPlayInterval, autoPlayControlVariant, autoPlayControlSize, mouseDragging, carouselWrapperClassName, controlsClassName, prevButtonClassName, nextButtonClassName, autoplayControlClassName, dotsContainerClassName, dotsWrapperClassName, dotClassName, activeDotClassName, }: CarouselProps) => import("react/jsx-runtime").JSX.Element;
 export default Carousel;

package/dist/components/Carousel/Carousel.js

@@ -5,27 +5,43 @@ import { C as Carousel$1, a as CarouselScroller, b as CarouselItem, c as Carouse
 import { CarouselButton } from "./CarouselButton/CarouselButton.js";
 import { CarouselDots } from "./CarouselDots/CarouselDots.js";
 import { AutoplayControl } from "./AutoplayControl/AutoplayControl.js";
-import '../../assets/Carousel.css';const carouselWrapper = "_carouselWrapper_mtbhv_1";
-const showPartialItems = "_showPartialItems_mtbhv_9";
-const carousel$1 = "_carousel_mtbhv_1";
-const scroller = "_scroller_mtbhv_23";
-const item = "_item_mtbhv_43";
-const slideLeft = "_slideLeft_mtbhv_73";
-const slideLeftAnimation = "_slideLeftAnimation_mtbhv_1";
-const slideRight = "_slideRight_mtbhv_77";
-const slideRightAnimation = "_slideRightAnimation_mtbhv_1";
-const controls = "_controls_mtbhv_100";
-const dotsContainerWrapper = "_dotsContainerWrapper_mtbhv_111";
-const dotsContainer = "_dotsContainer_mtbhv_111";
-const hiddenTabs = "_hiddenTabs_mtbhv_133";
-const tapEnabled = "_tapEnabled_mtbhv_146";
-const infinite = "_infinite_mtbhv_152";
-const native = "_native_mtbhv_157";
-const autoplayControlWrapper = "_autoplayControlWrapper_mtbhv_161";
+import { focusStyleVariants } from "../../utils/focus/focusStyles.js";
+import { useFocusRing } from "@react-aria/focus";
+import '../../assets/Carousel.css';const carouselWrapper = "_carouselWrapper_1hn3p_2";
+const showPartialItems = "_showPartialItems_1hn3p_10";
+const carousel$1 = "_carousel_1hn3p_2";
+const hasScrollPadding = "_hasScrollPadding_1hn3p_19";
+const scroller = "_scroller_1hn3p_33";
+const item = "_item_1hn3p_60";
+const slideLeft = "_slideLeft_1hn3p_99";
+const slideLeftAnimation = "_slideLeftAnimation_1hn3p_1";
+const slideRight = "_slideRight_1hn3p_103";
+const slideRightAnimation = "_slideRightAnimation_1hn3p_1";
+const controls = "_controls_1hn3p_126";
+const showOnHover = "_showOnHover_1hn3p_137";
+const arrowContainer = "_arrowContainer_1hn3p_137";
+const hidden = "_hidden_1hn3p_147";
+const dotsContainerWrapper = "_dotsContainerWrapper_1hn3p_156";
+const dotsContainer = "_dotsContainer_1hn3p_156";
+const hiddenTabs = "_hiddenTabs_1hn3p_178";
+const tapEnabled = "_tapEnabled_1hn3p_191";
+const infinite = "_infinite_1hn3p_197";
+const native = "_native_1hn3p_202";
+const autoplayControlWrapper = "_autoplayControlWrapper_1hn3p_206";
+const carouselDefault = "_carouselDefault_1hn3p_220";
+const prevButton = "_prevButton_1hn3p_225";
+const nextButton = "_nextButton_1hn3p_232";
+const carouselWithAutoPlay = "_carouselWithAutoPlay_1hn3p_250";
+const autoplayControl = "_autoplayControl_1hn3p_206";
+const carouselWithScrollPeek = "_carouselWithScrollPeek_1hn3p_286";
+const carouselWithFractionalItems = "_carouselWithFractionalItems_1hn3p_318";
+const paginationDotsDefault = "_paginationDotsDefault_1hn3p_350";
+const hoverArrowsDefault = "_hoverArrowsDefault_1hn3p_379";
 const styles = {
   carouselWrapper,
   showPartialItems,
   carousel: carousel$1,
+  hasScrollPadding,
   scroller,
   item,
   slideLeft,
@@ -33,13 +49,25 @@ const styles = {
   slideRight,
   slideRightAnimation,
   controls,
+  showOnHover,
+  arrowContainer,
+  hidden,
   dotsContainerWrapper,
   dotsContainer,
   hiddenTabs,
   tapEnabled,
   infinite,
   native,
-  autoplayControlWrapper
+  autoplayControlWrapper,
+  carouselDefault,
+  prevButton,
+  nextButton,
+  carouselWithAutoPlay,
+  autoplayControl,
+  carouselWithScrollPeek,
+  carouselWithFractionalItems,
+  paginationDotsDefault,
+  hoverArrowsDefault
 };
 const carousel = cva(styles.carousel, {
   variants: {
@@ -55,14 +83,17 @@ const Carousel = ({
   looping = "off",
   className = "",
   itemsPerPage = 1,
+  scrollByCount,
   spaceBetweenItems = 0,
-  hasScrollPeek = false,
+  scrollPadding,
   // Button and Controls Props
   iconType = "chevron",
   carouselArrow = "neutral",
   buttonSize = "md",
   hideWhenDisabled = false,
+  showArrowsOnHover = false,
   focusStyle = "default",
+  fullHeightButtons = false,
   // Dots/Tabs Props
   dotSize = "md",
   dotsVariant = "standard",
@@ -102,11 +133,20 @@ const Carousel = ({
   const [currentPage, setCurrentPage] = useState(0);
   const [prevPage, setPrevPage] = useState(0);
   const [isDragging, setIsDragging] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const [dragStartPosition, setDragStartPosition] = useState(null);
+  const dragThreshold = 5;
+  const effectiveScrollByCount = scrollByCount !== void 0 ? Math.max(1, scrollByCount) : safeItemsPerPage;
   const getCarouselWrapperClasses = () => {
     const classes = [styles.carouselWrapper];
     if (!Number.isInteger(safeItemsPerPage)) {
       classes.push(styles.showPartialItems);
     }
+    if (scrollPadding) {
+      classes.push(styles.hasScrollPadding);
+    }
     if (carouselWrapperClassName) {
       classes.push(carouselWrapperClassName);
     }
@@ -120,22 +160,103 @@ const Carousel = ({
     if (spaceBetweenItems > 0) {
       cssVars2["--space-between-items"] = `${spaceBetweenItems}px`;
     }
-    if (hasScrollPeek) {
-      cssVars2["--scroll-padding"] = "16px";
-    }
     return Object.keys(cssVars2).length > 0 ? cssVars2 : void 0;
   };
   const navigateToSlide = (index) => {
-    if (index === currentPage) return;
+    if (index === currentPage || isTransitioning) return;
+    let nativeTab = null;
+    if (carouselRef.current) {
+      nativeTab = carouselRef.current.querySelector(`[data-index="${index}"]`);
+    }
+    setIsTransitioning(true);
     setPrevPage(currentPage);
     setCurrentPage(index);
-    if (carouselRef.current) {
-      const nativeTab = carouselRef.current.querySelector(`[data-index="${index}"]`);
-      if (nativeTab && nativeTab instanceof HTMLElement) {
+    setTimeout(() => {
+      if (nativeTab) {
         nativeTab.click();
       }
+      setTimeout(() => {
+        setIsTransitioning(false);
+      }, 600);
+    }, 0);
+  };
+  const navigateByScrollCount = (direction) => {
+    if (!carouselRef.current || isTransitioning) return;
+    const totalVisiblePages = Math.ceil(totalItems / safeItemsPerPage);
+    let targetPage;
+    if (direction === "next") {
+      targetPage = currentPage + effectiveScrollByCount;
+      if (targetPage >= totalVisiblePages) {
+        if (looping === "infinite") {
+          targetPage = targetPage % totalVisiblePages;
+        } else if (looping === "backToStart") {
+          targetPage = 0;
+        } else {
+          targetPage = totalVisiblePages - 1;
+        }
+      }
+    } else {
+      targetPage = currentPage - effectiveScrollByCount;
+      if (targetPage < 0) {
+        if (looping === "infinite") {
+          targetPage = totalVisiblePages + targetPage % totalVisiblePages;
+        } else if (looping === "backToStart") {
+          targetPage = totalVisiblePages - 1;
+        } else {
+          targetPage = 0;
+        }
+      }
     }
+    navigateToSlide(targetPage);
   };
+  useEffect(() => {
+    if (!carouselRef.current || !mouseDragging) return;
+    const preventLinkActivation = (e) => {
+      if (isDragging) {
+        e.preventDefault();
+        e.stopPropagation();
+        setTimeout(() => {
+          setIsDragging(false);
+        }, 0);
+      }
+    };
+    const handleMouseDown = (e) => {
+      setDragStartPosition({
+        x: e.clientX,
+        y: e.clientY
+      });
+    };
+    const handleMouseMove = (e) => {
+      if (dragStartPosition === null) return;
+      const dx = Math.abs(e.clientX - dragStartPosition.x);
+      const dy = Math.abs(e.clientY - dragStartPosition.y);
+      const distance = Math.sqrt(dx * dx + dy * dy);
+      if (distance > dragThreshold) {
+        setIsDragging(true);
+      }
+    };
+    const handleMouseUp = () => {
+      if (!isDragging) {
+        setDragStartPosition(null);
+        return;
+      }
+      setTimeout(() => {
+        setIsDragging(false);
+        setDragStartPosition(null);
+      }, 50);
+    };
+    const carouselElement = carouselRef.current;
+    carouselElement.addEventListener("mousedown", handleMouseDown, true);
+    carouselElement.addEventListener("mousemove", handleMouseMove, true);
+    carouselElement.addEventListener("mouseup", handleMouseUp, true);
+    carouselElement.addEventListener("click", preventLinkActivation, true);
+    return () => {
+      carouselElement.removeEventListener("mousedown", handleMouseDown, true);
+      carouselElement.removeEventListener("mousemove", handleMouseMove, true);
+      carouselElement.removeEventListener("mouseup", handleMouseUp, true);
+      carouselElement.removeEventListener("click", preventLinkActivation, true);
+    };
+  }, [mouseDragging, isDragging, dragStartPosition, dragThreshold]);
   useEffect(() => {
     if (carouselRef.current) {
       const scroller2 = carouselRef.current.querySelector(`.${styles.scroller}`);
@@ -172,13 +293,13 @@ const Carousel = ({
         }
       }
     };
-    const prevButton = carouselRef.current.querySelector('[dir="prev"]');
-    const nextButton = carouselRef.current.querySelector('[dir="next"]');
+    const prevButton2 = carouselRef.current.querySelector('[dir="prev"]');
+    const nextButton2 = carouselRef.current.querySelector('[dir="next"]');
     const handleButtonClick = () => {
       setTimeout(updateCurrentPage, 50);
     };
-    prevButton == null ? void 0 : prevButton.addEventListener("click", handleButtonClick);
-    nextButton == null ? void 0 : nextButton.addEventListener("click", handleButtonClick);
+    prevButton2 == null ? void 0 : prevButton2.addEventListener("click", handleButtonClick);
+    nextButton2 == null ? void 0 : nextButton2.addEventListener("click", handleButtonClick);
     const observer = new MutationObserver((mutations) => {
       for (const mutation of mutations) {
         if (mutation.type === "attributes" && (mutation.attributeName === "aria-selected" || mutation.attributeName === "aria-current")) {
@@ -200,6 +321,7 @@ const Carousel = ({
     }
     const handleSlideTransition = () => {
       updateCurrentPage();
+      setIsTransitioning(false);
     };
     const scrollerElement = carouselRef.current.querySelector(`.${styles.scroller}`);
     if (scrollerElement) {
@@ -209,34 +331,55 @@ const Carousel = ({
     const checkInterval = setInterval(updateCurrentPage, 300);
     return () => {
       observer.disconnect();
-      prevButton == null ? void 0 : prevButton.removeEventListener("click", handleButtonClick);
-      nextButton == null ? void 0 : nextButton.removeEventListener("click", handleButtonClick);
+      prevButton2 == null ? void 0 : prevButton2.removeEventListener("click", handleButtonClick);
+      nextButton2 == null ? void 0 : nextButton2.removeEventListener("click", handleButtonClick);
       if (scrollerElement) {
         scrollerElement.removeEventListener("transitionend", handleSlideTransition);
       }
       clearInterval(checkInterval);
     };
   }, [currentPage]);
+  const interactionHandlers = showArrowsOnHover ? {
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false),
+    onFocus: () => setIsFocused(true),
+    onBlur: (e) => {
+      if (!e.currentTarget.contains(e.relatedTarget)) {
+        setIsFocused(false);
+      }
+    }
+  } : {};
+  const arrowsVisible = !showArrowsOnHover || isHovered || isFocused;
   const cssVars = getCssVariables();
-  return /* @__PURE__ */ jsx("div", { className: getCarouselWrapperClasses(), ref: carouselRef, style: cssVars, "data-dots-size": dotSize, children: /* @__PURE__ */ jsxs(Carousel$1, { className: `${carousel({
+  const {
+    focusProps,
+    isFocusVisible
+  } = useFocusRing();
+  return /* @__PURE__ */ jsx("div", { className: getCarouselWrapperClasses(), ref: carouselRef, style: cssVars, "data-dots-size": dotSize, ...interactionHandlers, "data-arrows-visible": arrowsVisible ? "true" : "false", "data-transitioning": isTransitioning ? "true" : void 0, "data-scroll-padding": scrollPadding, children: /* @__PURE__ */ jsxs(Carousel$1, { className: `${carousel({
     looping
-  })} ${className}`, loop: getLoopValue(), ref: ariaCarouselRef, autoplay: isPaused, autoplayInterval: autoPlayInterval, mouseDragging, onDragStart: () => setIsDragging(true), onDragEnd: () => setIsDragging(false), "data-dragging": isDragging ? "true" : "false", itemsPerPage: safeItemsPerPage, spaceBetweenItems: spaceBetweenItems > 0 ? `${spaceBetweenItems}px` : void 0, scrollPadding: hasScrollPeek ? "16px" : void 0, "data-has-scroll-peek": hasScrollPeek ? "true" : void 0, "data-has-space-between": spaceBetweenItems > 0 ? "true" : void 0, "data-items-per-page": itemsPerPage !== 1 ? safeItemsPerPage.toString() : void 0, children: [
+  })} ${className}`, loop: getLoopValue(), ref: ariaCarouselRef, autoplay: isPaused, autoplayInterval: autoPlayInterval, mouseDragging: mouseDragging && !isTransitioning, onDragStart: (e) => {
+    setIsDragging(true);
+    if (e && e.nativeEvent) {
+      setDragStartPosition({
+        x: e.nativeEvent.clientX,
+        y: e.nativeEvent.clientY
+      });
+    }
+  }, onDragEnd: () => {
+    setTimeout(() => {
+      setIsDragging(false);
+    }, 50);
+  }, "data-dragging": isDragging ? "true" : "false", itemsPerPage: safeItemsPerPage, spaceBetweenItems: spaceBetweenItems > 0 ? `${spaceBetweenItems}px` : void 0, scrollPadding, "data-has-space-between": spaceBetweenItems > 0 ? "true" : void 0, "data-items-per-page": itemsPerPage !== 1 ? safeItemsPerPage.toString() : void 0, "data-scroll-by-count": scrollByCount !== void 0 ? effectiveScrollByCount.toString() : void 0, children: [
     isPaused && /* @__PURE__ */ jsx("div", { className: `${styles.autoplayControlWrapper} ${autoplayControlClassName || ""}`, children: /* @__PURE__ */ jsx(AutoplayControl, { variant: autoPlayControlVariant, size: autoPlayControlSize, className: "" }) }),
-    /* @__PURE__ */ jsx(CarouselScroller, { className: styles.scroller, children: items.map((child, index) => /* @__PURE__ */ jsx(CarouselItem, { className: styles.item, children: child }, index)) }),
-    /* @__PURE__ */ jsxs("div", { className: `${styles.controls} ${controlsClassName}`, children: [
-      /* @__PURE__ */ jsx(CarouselButton, { dir: "prev", variant: carouselArrow, size: buttonSize, focusStyle, iconType, hideWhenDisabled, className: prevButtonClassName }),
-      /* @__PURE__ */ jsx(CarouselButton, { dir: "next", variant: carouselArrow, size: buttonSize, focusStyle, iconType, hideWhenDisabled, className: nextButtonClassName })
+    /* @__PURE__ */ jsxs("div", { className: `${styles.controls} ${controlsClassName} ${showArrowsOnHover ? styles.showOnHover : ""}`, children: [
+      /* @__PURE__ */ jsx(CarouselButton, { dir: "prev", variant: carouselArrow, size: buttonSize, focusStyle, iconType, hideWhenDisabled, className: `${prevButtonClassName} ${!arrowsVisible ? styles.hidden : ""}`, fullHeight: fullHeightButtons, onClick: scrollByCount !== void 0 && !isTransitioning ? () => navigateByScrollCount("prev") : void 0 }),
+      /* @__PURE__ */ jsx(CarouselButton, { dir: "next", variant: carouselArrow, size: buttonSize, focusStyle, iconType, hideWhenDisabled, className: `${nextButtonClassName} ${!arrowsVisible ? styles.hidden : ""}`, fullHeight: fullHeightButtons, onClick: scrollByCount !== void 0 && !isTransitioning ? () => navigateByScrollCount("next") : void 0 })
     ] }),
-    /* @__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" }, page.index) }) }),
-    !hideDots && /* @__PURE__ */ jsx(CarouselDots, { totalItems: totalPages, currentPage, onDotClick: (index) => {
-      const isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-      if (isMobileDevice && enableTapCycling) {
-        const nextPage = (currentPage + 1) % totalPages;
-        navigateToSlide(nextPage);
-      } else {
-        navigateToSlide(index);
-      }
-    }, focusStyle, dotSize, variant: dotsVariant, className: `${dotsContainerClassName} ${enableTapCycling ? styles.tapEnabled : ""}`, dotsWrapperClassName, dotClassName, activeDotClassName })
+    /* @__PURE__ */ jsx(CarouselScroller, { className: `${styles.scroller} ${focusStyleVariants({
+      focusStyle
+    })}`, ...focusProps, "data-focused": isFocusVisible ? true : void 0, "data-transitioning": isTransitioning ? "true" : void 0, children: items.map((child, index) => /* @__PURE__ */ jsx(CarouselItem, { className: styles.item, children: child }, index)) }),
+    /* @__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) }) }),
+    !hideDots && /* @__PURE__ */ jsx(CarouselDots, { totalItems: totalPages, currentPage, onDotClick: (index) => navigateToSlide(index), focusStyle, dotSize, variant: dotsVariant, className: `${dotsContainerClassName} ${enableTapCycling ? styles.tapEnabled : ""}`, dotsWrapperClassName, dotClassName, activeDotClassName, isTransitioning })
   ] }) });
 };
 export {

package/dist/components/Carousel/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Carousel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Carousel/CarouselButton/CarouselButton.d.ts

@@ -31,10 +31,19 @@ export interface CarouselButtonProps {
      * Additional CSS class name for the button content
      */
     buttonClassName?: string;
+    /**
+     * Whether the button should be full height of the container
+     * @default false
+     */
+    fullHeight?: boolean;
+    /**
+     * Custom click handler for implementing custom navigation behavior
+     */
+    onClick?: () => void;
     /**
      * @private
      */
     iconType?: 'chevron';
 }
-export declare const CarouselButton: ({ dir, variant, size, focusStyle, hideWhenDisabled, iconType, className, buttonClassName, }: CarouselButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CarouselButton: ({ dir, variant, size, focusStyle, hideWhenDisabled, iconType, className, buttonClassName, fullHeight, onClick, }: CarouselButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default CarouselButton;

package/dist/components/Carousel/CarouselButton/CarouselButton.js

@@ -5,15 +5,17 @@ import { useFocusRing } from "@react-aria/focus";
 import { i as iconButtonStyles } from "../../../IconButton.module-DcfPVyUX.js";
 import { focusStyleVariants } from "../../../utils/focus/focusStyles.js";
 import { Icon } from "../../Icon/Icon.js";
-import '../../../assets/CarouselButton.css';const arrowContainer = "_arrowContainer_ny9r1_1";
-const iconButton = "_iconButton_ny9r1_10";
-const hideWhenDisabled = "_hideWhenDisabled_ny9r1_16";
-const neutral = "_neutral_ny9r1_22";
-const white = "_white_ny9r1_32";
-const shapeFlat = "_shapeFlat_ny9r1_48";
-const shapeElevated = "_shapeElevated_ny9r1_62";
-const gradient = "_gradient_ny9r1_80";
-const next = "_next_ny9r1_86";
+import '../../../assets/CarouselButton.css';const arrowContainer = "_arrowContainer_v9ex2_1";
+const iconButton = "_iconButton_v9ex2_10";
+const hideWhenDisabled = "_hideWhenDisabled_v9ex2_16";
+const neutral = "_neutral_v9ex2_22";
+const white = "_white_v9ex2_32";
+const shapeFlat = "_shapeFlat_v9ex2_48";
+const shapeElevated = "_shapeElevated_v9ex2_57";
+const gradient = "_gradient_v9ex2_75";
+const next = "_next_v9ex2_81";
+const fullHeight = "_fullHeight_v9ex2_114";
+const prev = "_prev_v9ex2_124";
 const styles = {
   arrowContainer,
   iconButton,
@@ -23,7 +25,9 @@ const styles = {
   shapeFlat,
   shapeElevated,
   gradient,
-  next
+  next,
+  fullHeight,
+  prev
 };
 const CarouselButton = ({
   dir,
@@ -33,7 +37,9 @@ const CarouselButton = ({
   hideWhenDisabled: hideWhenDisabled2 = false,
   iconType = "chevron",
   className = "",
-  buttonClassName = ""
+  buttonClassName = "",
+  fullHeight: fullHeight2 = false,
+  onClick
 }) => {
   const {
     isFocusVisible,
@@ -85,6 +91,9 @@ const CarouselButton = ({
         return "whiteOnVibrant";
     }
   };
+  const containerFocusClass = fullHeight2 && isFocusVisible ? focusStyleVariants({
+    focusStyle
+  }) : "";
   const getButtonClasses = () => {
     let styleVariant = "neutral";
     let emphasis = "quaternary";
@@ -96,9 +105,9 @@ const CarouselButton = ({
     const sizeClass = iconButtonStyles[size] || "";
     const emphasisClassKey = `${styleVariant}${emphasis.charAt(0).toUpperCase() + emphasis.slice(1)}`;
     const emphasisClass = iconButtonStyles[emphasisClassKey] || "";
-    const focusClass = focusStyleVariants({
+    const focusClass = !fullHeight2 ? focusStyleVariants({
       focusStyle
-    });
+    }) : "";
     return `${baseClass} ${sizeClass} ${emphasisClass} ${focusClass} ${buttonClassName || ""}`;
   };
   const mouseEventHandlers = isDisabled ? {} : {
@@ -107,7 +116,12 @@ const CarouselButton = ({
     onMouseDown: () => setIsPressed(true),
     onMouseUp: () => setIsPressed(false)
   };
-  return /* @__PURE__ */ jsx(CarouselButton$1, { dir, className: `${styles.arrowContainer} ${directionClass} ${hideWhenDisabled2 ? styles.hideWhenDisabled : ""} ${variantStyleClass || ""} ${className || ""}`, ...focusProps, ...mouseEventHandlers, "data-hovered": !isDisabled && isHovered ? true : void 0, "data-pressed": !isDisabled && isPressed ? true : void 0, "data-disabled": isDisabled ? true : void 0, ref: buttonRef, children: /* @__PURE__ */ jsx("div", { className: `${getButtonClasses()} ${styles.iconButton}`, "data-focused": !isDisabled && isFocusVisible ? true : void 0, "data-parent-hovered": !isDisabled && isHovered ? true : void 0, "data-parent-pressed": !isDisabled && isPressed ? true : void 0, "data-parent-disabled": isDisabled ? true : void 0, children: /* @__PURE__ */ jsx(Icon, { iconName: `${iconType}-${dir === "prev" ? "left" : "right"}`, color: getIconColor(), iconSize: getIconSize(), "aria-hidden": "true" }) }) });
+  const handleClick = () => {
+    if (!isDisabled && onClick) {
+      onClick();
+    }
+  };
+  return /* @__PURE__ */ jsx(CarouselButton$1, { dir, className: `${styles.arrowContainer} ${directionClass} ${hideWhenDisabled2 ? styles.hideWhenDisabled : ""} ${variantStyleClass || ""} ${fullHeight2 ? styles.fullHeight : ""} ${containerFocusClass} ${className || ""}`, ...focusProps, ...mouseEventHandlers, "data-hovered": !isDisabled && isHovered ? true : void 0, "data-pressed": !isDisabled && isPressed ? true : void 0, "data-disabled": isDisabled ? true : void 0, "data-focused": fullHeight2 && !isDisabled && isFocusVisible ? true : void 0, ref: buttonRef, tabIndex: isDisabled ? -1 : void 0, onClick: handleClick, children: /* @__PURE__ */ jsx("div", { className: `${getButtonClasses()} ${styles.iconButton}`, "data-focused": !fullHeight2 && !isDisabled && isFocusVisible ? true : void 0, "data-parent-hovered": !isDisabled && isHovered ? true : void 0, "data-parent-pressed": !isDisabled && isPressed ? true : void 0, "data-parent-disabled": isDisabled ? true : void 0, children: /* @__PURE__ */ jsx(Icon, { iconName: `${iconType}-${dir === "prev" ? "left" : "right"}`, color: getIconColor(), iconSize: getIconSize(), "aria-hidden": "true" }) }) });
 };
 export {
   CarouselButton,

package/dist/components/Carousel/CarouselButton/CarouselButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"CarouselButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Carousel/CarouselDots/CarouselDots.d.ts

@@ -4,12 +4,14 @@ export interface CarouselDotsProps {
     currentPage: number;
     onDotClick: (index: number) => void;
     dotSize?: 'md' | 'lg';
-    focusStyle?: 'default' | 'white';
+    tabSize?: 'md' | 'lg';
     variant?: 'standard' | 'transparent';
+    focusStyle?: 'default' | 'white';
     className?: string;
     dotsWrapperClassName?: string;
     dotClassName?: string;
     activeDotClassName?: string;
+    isTransitioning?: boolean;
 }
 export declare const CarouselDots: React.FC<CarouselDotsProps>;
 export default CarouselDots;

package/dist/components/Carousel/CarouselDots/CarouselDots.js

@@ -1,18 +1,16 @@
 import { jsx } from "react/jsx-runtime";
-import { useRef, useState, useEffect, useCallback } from "react";
+import { useRef } from "react";
 import { useFocusRing } from "@react-aria/focus";
 import { useHover } from "@react-aria/interactions";
 import { focusStyleVariants } from "../../../utils/focus/focusStyles.js";
-import '../../../assets/CarouselDots.css';const tabsContainer = "_tabsContainer_1yet6_1";
-const tabs = "_tabs_1yet6_1";
-const transparent = "_transparent_1yet6_28";
-const dotsScroller = "_dotsScroller_1yet6_32";
-const tab = "_tab_1yet6_1";
-const activeTab = "_activeTab_1yet6_65";
-const tabMd = "_tabMd_1yet6_74";
-const tabLg = "_tabLg_1yet6_79";
-const tabSizeMedium = "_tabSizeMedium_1yet6_85";
-const tabSizeSmall = "_tabSizeSmall_1yet6_92";
+import '../../../assets/CarouselDots.css';const tabsContainer = "_tabsContainer_1rprd_1";
+const tabs = "_tabs_1rprd_1";
+const transparent = "_transparent_1rprd_25";
+const dotsScroller = "_dotsScroller_1rprd_29";
+const tab = "_tab_1rprd_1";
+const activeTab = "_activeTab_1rprd_56";
+const tabMd = "_tabMd_1rprd_75";
+const tabLg = "_tabLg_1rprd_80";
 const styles = {
   tabsContainer,
   tabs,
@@ -21,25 +19,26 @@ const styles = {
   tab,
   activeTab,
   tabMd,
-  tabLg,
-  tabSizeMedium,
-  tabSizeSmall
+  tabLg
 };
 const CarouselDots = ({
   totalItems,
   currentPage,
   onDotClick,
   dotSize = "md",
+  tabSize,
+  // For backward compatibility
   variant = "standard",
   focusStyle = "default",
   className = "",
   dotsWrapperClassName = "",
   dotClassName = "",
-  activeDotClassName = ""
+  activeDotClassName = "",
+  isTransitioning = false
 }) => {
   const tabsRef = useRef(null);
   const wrapperRef = useRef(null);
-  const effectiveDotSize = dotSize || "md";
+  const effectiveDotSize = dotSize || tabSize || "md";
   const {
     isFocusVisible,
     focusProps
@@ -48,21 +47,16 @@ const CarouselDots = ({
     isHovered,
     hoverProps
   } = useHover({});
-  const [isAnimating, setIsAnimating] = useState(false);
-  const [prevPage, setPrevPage] = useState(currentPage);
-  const [offsetPercentage, setOffsetPercentage] = useState(0);
-  const focusClass = focusStyleVariants({
-    focusStyle
-  });
   const handleKeyDown = (e) => {
+    if (isTransitioning) return;
     if (e.key === "ArrowRight" || e.key === "ArrowDown") {
       e.preventDefault();
       const nextPage = (currentPage + 1) % totalItems;
       onDotClick(nextPage);
     } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
       e.preventDefault();
-      const prevPage2 = (currentPage - 1 + totalItems) % totalItems;
-      onDotClick(prevPage2);
+      const prevPage = (currentPage - 1 + totalItems) % totalItems;
+      onDotClick(prevPage);
     } else if (e.key === "Home") {
       e.preventDefault();
       onDotClick(0);
@@ -71,123 +65,44 @@ const CarouselDots = ({
       onDotClick(totalItems - 1);
     }
   };
-  useEffect(() => {
-    if (currentPage !== prevPage) {
-      setIsAnimating(true);
-      const direction = currentPage > prevPage ? -20 : 20;
-      setOffsetPercentage(direction);
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          setOffsetPercentage(0);
-        });
-      });
-      setPrevPage(currentPage);
-      const timer = setTimeout(() => {
-        setIsAnimating(false);
-      }, 600);
-      return () => clearTimeout(timer);
-    }
-  }, [currentPage, prevPage]);
   const getContainerClasses = () => {
     const classes = [styles.tabsContainer];
     if (className) classes.push(className);
+    if (isTransitioning) classes.push(styles.transitioning);
     return classes.join(" ");
   };
   const getDotsWrapperClasses = () => {
     const classes = [styles.tabs];
     if (variant === "transparent") classes.push(styles.transparent);
-    classes.push(focusClass);
+    classes.push(focusStyleVariants({
+      focusStyle
+    }));
     if (dotsWrapperClassName) classes.push(dotsWrapperClassName);
     return classes.join(" ");
   };
-  const getDotsInfo = useCallback(() => {
-    const VISIBLE_NORMAL_DOTS = 5;
-    if (totalItems <= VISIBLE_NORMAL_DOTS) {
-      return Array.from({
-        length: totalItems
-      }, (_, i) => ({
-        index: i,
-        state: "normal"
-      }));
-    }
-    const dotsOnEachSide = Math.floor(VISIBLE_NORMAL_DOTS / 2);
-    let startNormal = Math.max(0, currentPage - dotsOnEachSide);
-    let endNormal = Math.min(totalItems - 1, startNormal + VISIBLE_NORMAL_DOTS - 1);
-    if (endNormal >= totalItems - 1) {
-      endNormal = totalItems - 1;
-      startNormal = Math.max(0, endNormal - (VISIBLE_NORMAL_DOTS - 1));
-    }
-    const dots2 = [];
-    if (startNormal > 1) {
-      dots2.push({
-        index: startNormal - 2,
-        state: "small"
-      });
-    }
-    if (startNormal > 0) {
-      dots2.push({
-        index: startNormal - 1,
-        state: "medium"
-      });
-    }
-    for (let i = startNormal; i <= endNormal; i++) {
-      dots2.push({
-        index: i,
-        state: "normal"
-      });
+  const handleDotClick = (index) => {
+    if (!isTransitioning) {
+      onDotClick(index);
     }
-    if (endNormal < totalItems - 1) {
-      dots2.push({
-        index: endNormal + 1,
-        state: "medium"
-      });
-    }
-    if (endNormal < totalItems - 2) {
-      dots2.push({
-        index: endNormal + 2,
-        state: "small"
-      });
-    }
-    return dots2;
-  }, [totalItems, currentPage]);
-  const getDotClasses = (index, state) => {
-    const classes = [styles.tab];
-    const tabSizeClass = styles[`tab${effectiveDotSize.charAt(0).toUpperCase() + effectiveDotSize.slice(1)}`];
-    if (tabSizeClass) classes.push(tabSizeClass);
-    if (state === "medium") {
-      classes.push(styles.tabSizeMedium);
-    } else if (state === "small") {
-      classes.push(styles.tabSizeSmall);
-    }
-    if (index === currentPage) {
-      classes.push(styles.activeTab);
-      if (activeDotClassName) classes.push(activeDotClassName);
-    }
-    if (dotClassName) classes.push(dotClassName);
-    return classes.join(" ");
   };
-  const dots = getDotsInfo();
-  return /* @__PURE__ */ jsx("div", { className: getContainerClasses(), ref: wrapperRef, "data-animating": isAnimating ? "true" : "false", "data-direction": currentPage > prevPage ? "next" : "prev", "data-dot-size": effectiveDotSize, children: /* @__PURE__ */ jsx("div", { className: getDotsWrapperClasses(), ref: tabsRef, tabIndex: 0, role: "tablist", "aria-label": "Slide pagination", onKeyDown: handleKeyDown, "data-focused": isFocusVisible ? true : void 0, "data-hovered": isHovered ? true : void 0, ...focusProps, ...hoverProps, children: /* @__PURE__ */ jsx("div", { className: styles.dotsScroller, style: {
-    transform: `translateX(${offsetPercentage}%)`,
-    transition: isAnimating ? "transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1)" : "none"
-  }, children: dots.map(({
-    index,
-    state
-  }) => /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      className: getDotClasses(index, state),
-      onClick: () => onDotClick(index),
-      "aria-label": `Go to slide ${index + 1}`,
-      "aria-selected": index === currentPage,
-      role: "tab",
-      "data-tab-index": index,
-      tabIndex: -1,
-      "aria-current": index === currentPage ? "true" : "false"
-    },
-    index
-  )) }) }) });
+  return /* @__PURE__ */ jsx("div", { className: getContainerClasses(), ref: wrapperRef, "data-dot-size": effectiveDotSize, "data-transitioning": isTransitioning ? "true" : void 0, children: /* @__PURE__ */ jsx("div", { className: getDotsWrapperClasses(), ref: tabsRef, tabIndex: 0, role: "tablist", "aria-label": "Slide pagination", onKeyDown: handleKeyDown, "data-focused": isFocusVisible ? true : void 0, "data-hovered": isHovered ? true : void 0, ...focusProps, ...hoverProps, children: /* @__PURE__ */ jsx("div", { className: styles.dotsScroller, children: Array.from({
+    length: totalItems
+  }, (_, index) => {
+    const baseStyle = {
+      width: effectiveDotSize === "lg" ? "12px" : "8px",
+      height: effectiveDotSize === "lg" ? "12px" : "8px",
+      borderRadius: "50%",
+      backgroundColor: index === currentPage ? "var(--alto-sem-color-fg-primary)" : "rgba(0, 0, 0, 0.3)",
+      border: "none",
+      padding: 0,
+      cursor: "pointer",
+      display: "block",
+      flexShrink: 0,
+      margin: 0,
+      transition: "none"
+    };
+    return /* @__PURE__ */ jsx("button", { type: "button", className: `${styles.tab} ${index === currentPage ? styles.activeTab : ""} ${dotClassName || ""} ${index === currentPage && activeDotClassName ? activeDotClassName : ""}`, onClick: () => handleDotClick(index), "aria-label": `Go to slide ${index + 1}`, "aria-selected": index === currentPage, role: "tab", "data-tab-index": index, tabIndex: -1, "aria-current": index === currentPage ? "true" : "false", disabled: isTransitioning, style: baseStyle }, index);
+  }) }) }) });
 };
 export {
   CarouselDots,

package/dist/components/Carousel/CarouselDots/CarouselDots.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselDots.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"CarouselDots.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alto-avios/alto-ui",
-  "version": "3.4.0-alpha.4",
+  "version": "3.4.0-alpha.6",
   "description": "A react component library for Alto Design System",
   "author": {
     "name": "Ian Caldwell IAGL",
@@ -41,7 +41,8 @@
     "react-aria-carousel": "^0.2.0",
     "react-aria-components": "^1.5.0",
     "react-number-format": "^5.4.3",
-    "ts-node": "^10.9.2"
+    "ts-node": "^10.9.2",
+    "use-breakpoint": "^4.0.6"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.4.0",
@@ -72,6 +73,7 @@
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.19",
     "axe-playwright": "^2.0.3",
+    "chromatic": "^11.28.2",
     "commitizen": "^4.3.1",
     "cssnano": "^7.0.4",
     "eslint": "^9.14.0",
@@ -107,7 +109,7 @@
     "wait-on": "^8.0.1"
   },
   "peerDependencies": {
-    "@alto-avios/alto-tokens": "^3.0.2",
+    "@alto-avios/alto-tokens": "^3.1.0",
     "react": "^18.0.0"
   },
   "main": "dist/index.js",