peek-carousel 1.0.2

package/src/styles/base/_accessibility.scss

@@ -0,0 +1,16 @@
+@use 'variables' as *;
+@use 'sass:color';
+@use 'sass:map';
+
+$focus-config: (
+  outline-width: 3px,
+  outline-offset: 8px,
+  outline-alpha: 0.8
+);
+
+.peek-carousel__item:focus-visible {
+  outline: map.get($focus-config, outline-width) solid
+    color.change($color-primary, $alpha: map.get($focus-config, outline-alpha));
+  outline-offset: map.get($focus-config, outline-offset);
+  border-radius: $radius-lg;
+}

package/src/styles/base/_mixins.scss

@@ -0,0 +1,7 @@
+@use 'variables' as *;
+
+@mixin glassmorphism($bg-color, $blur, $border-color) {
+  background: $bg-color;
+  backdrop-filter: blur($blur);
+  border: 1px solid $border-color;
+}

package/src/styles/base/_variables.scss

@@ -0,0 +1,75 @@
+@use 'sass:math';
+@use 'sass:color';
+
+$color-white: white;
+$color-black: black;
+$color-primary: rgb(102, 126, 234);
+$color-secondary-base: rgb(118, 75, 162);
+
+$color-white-95: color.change($color-white, $alpha: 0.95);
+$color-white-90: color.change($color-white, $alpha: 0.9);
+$color-white-70: color.change($color-white, $alpha: 0.7);
+$color-white-60: color.change($color-white, $alpha: 0.6);
+$color-white-40: color.change($color-white, $alpha: 0.4);
+$color-white-30: color.change($color-white, $alpha: 0.3);
+$color-white-20: color.change($color-white, $alpha: 0.2);
+$color-white-15: color.change($color-white, $alpha: 0.15);
+$color-white-10: color.change($color-white, $alpha: 0.1);
+
+$color-black-80: color.change($color-black, $alpha: 0.8);
+$color-black-60: color.change($color-black, $alpha: 0.6);
+$color-black-50: color.change($color-black, $alpha: 0.5);
+$color-black-40: color.change($color-black, $alpha: 0.4);
+$color-black-30: color.change($color-black, $alpha: 0.3);
+
+$color-primary-80: color.change($color-primary, $alpha: 0.8);
+$color-primary-60: color.change($color-primary, $alpha: 0.6);
+$color-primary-40: color.change($color-primary, $alpha: 0.4);
+$color-primary-30: color.change($color-primary, $alpha: 0.3);
+
+$color-secondary: color.change($color-secondary-base, $alpha: 0.3);
+
+$spacing-xs: 0.25rem;
+$spacing-sm: 0.5rem;
+$spacing-md: 0.75rem;
+$spacing-lg: 1rem;
+$spacing-xl: 1.25rem;
+$spacing-2xl: 1.5rem;
+$spacing-3xl: 2rem;
+
+$radius-sm: 4px;
+$radius-md: 6px;
+$radius-lg: 12px;
+$radius-xl: 16px;
+$radius-full: 50px;
+$radius-circle: 50%;
+
+$transition-fast: 0.15s ease-out;
+$transition-base: 0.3s ease;
+$transition-smooth: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+$transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+
+$shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
+$shadow-md: 0 5px 15px rgba(0, 0, 0, 0.4);
+$shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
+$shadow-glow: 0 2px 8px rgba(255, 255, 255, 0.3), 0 0 12px rgba(255, 255, 255, 0.2);
+$shadow-glow-strong: 0 2px 12px rgba(255, 255, 255, 0.4), 0 0 16px rgba(255, 255, 255, 0.3);
+
+$carousel-item-width: clamp(300px, 35vw, 500px);
+$carousel-item-ratio: math.div(650, 490);
+$carousel-blur: 12px;
+
+$indicator-size: 10px;
+$indicator-gap: 0.875rem;
+$indicator-active-width: 50px;
+$indicator-active-height: 8px;
+
+$nav-btn-size: 36px;
+$nav-btn-size-mobile: 36px;
+$auto-rotate-btn-size: 36px;
+
+$z-index-base: 0;
+$z-index-item: 50;
+$z-index-active: 100;
+$z-index-controls: 100;
+$z-index-zoom: 130;

package/src/styles/components/_carousel.scss

@@ -0,0 +1,5 @@
+@forward 'carousel/carousel-base';
+@forward 'carousel/carousel-stack';
+@forward 'carousel/carousel-radial';
+@forward 'carousel/carousel-classic';
+

package/src/styles/components/_counter.scss

@@ -0,0 +1,109 @@
+@use '../base/variables' as *;
+@use '../base/mixins' as *;
+@use 'sass:map';
+@use 'sass:color';
+
+$counter-config: (
+  default: (
+    top: 3%,
+    left: 3%,
+    padding: (0.5rem 1rem),
+    font-size: 0.875rem,
+    border-radius: 20px
+  ),
+  mobile: (
+    top: 2%,
+    left: 2%,
+    padding: (0.4rem 0.8rem),
+    font-size: 0.75rem
+  )
+);
+
+$counter-animation: (
+  duration: 0.6s,
+  easing: cubic-bezier(0.4, 0, 0.2, 1),
+  delay: 0.7s,
+  translate-y: -10px
+);
+
+$counter-styles: (
+  bg: color.change($color-black, $alpha: 0.5),
+  border: color.change(white, $alpha: 0.15),
+  blur: 10px,
+  color: white,
+  font-weight: 500,
+  z-index: 100
+);
+
+$counter-elements: (
+  separator: (
+    margin: (0 0.25rem),
+    opacity: 0.7
+  ),
+  current: (
+    font-weight: 600
+  ),
+  total: (
+    opacity: 0.8
+  )
+);
+
+
+@mixin counter-layout($config) {
+  position: absolute;
+  inset: map.get($config, top) auto auto map.get($config, left);
+  padding: map.get($config, padding);
+  font-size: map.get($config, font-size);
+}
+
+.peek-carousel__counter {
+  $default: map.get($counter-config, default);
+
+  @include counter-layout($default);
+  @include glassmorphism(
+    map.get($counter-styles, bg),
+    map.get($counter-styles, blur),
+    map.get($counter-styles, border)
+  );
+
+  z-index: map.get($counter-styles, z-index);
+  border-radius: map.get($default, border-radius);
+  color: map.get($counter-styles, color);
+  font-weight: map.get($counter-styles, font-weight);
+  line-height: 1;
+  user-select: none;
+  pointer-events: none;
+  opacity: 0;
+  transform: translateY(map.get($counter-animation, translate-y));
+  animation: fadeInDown
+    map.get($counter-animation, duration)
+    map.get($counter-animation, easing)
+    forwards;
+  animation-delay: map.get($counter-animation, delay);
+
+  @media (max-width: 768px) {
+    $mobile: map.get($counter-config, mobile);
+    @include counter-layout($mobile);
+  }
+
+  &-separator {
+    $separator: map.get($counter-elements, separator);
+    margin: map.get($separator, margin);
+    opacity: map.get($separator, opacity);
+  }
+
+  &-current {
+    font-weight: map.get(map.get($counter-elements, current), font-weight);
+  }
+
+  &-total {
+    opacity: map.get(map.get($counter-elements, total), opacity);
+  }
+}
+
+@keyframes fadeInDown {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/src/styles/components/_indicators.scss

@@ -0,0 +1,154 @@
+@use '../base/variables' as *;
+@use '../base/mixins' as *;
+@use 'sass:map';
+
+$controls-animation: (
+  duration: 0.6s,
+  easing: cubic-bezier(0.4, 0, 0.2, 1),
+  delay: 0.6s,
+  translate-y: 20px
+);
+
+$indicator-dimensions: (
+  default: (
+    width: $indicator-size,
+    height: $indicator-size
+  ),
+  active: (
+    width: $indicator-active-width,
+    height: $indicator-active-height
+  )
+);
+
+@mixin indicator-dot($width, $height, $bg-color) {
+  content: '';
+  width: $width;
+  height: $height;
+  border-radius: if($width == $height, $radius-circle, $radius-full);
+  background: $bg-color;
+  transition: all $transition-base;
+}
+
+.peek-carousel__controls {
+  position: absolute;
+  inset: auto auto 3% 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: $spacing-md;
+  z-index: $z-index-controls;
+  opacity: 0;
+  animation: fadeInUpControls
+    map.get($controls-animation, duration)
+    map.get($controls-animation, easing)
+    forwards;
+  animation-delay: map.get($controls-animation, delay);
+}
+
+.peek-carousel__indicators {
+  display: flex;
+  align-items: center;
+  gap: $indicator-gap;
+  padding: 0.625rem $spacing-lg;
+  border-radius: $radius-full;
+  @include glassmorphism($color-black-50, $carousel-blur, $color-white-15);
+}
+
+.peek-carousel__indicator {
+  $default: map.get($indicator-dimensions, default);
+  $active: map.get($indicator-dimensions, active);
+
+  width: map.get($default, width);
+  height: map.get($default, height);
+  border-radius: $radius-circle;
+  background: transparent;
+  cursor: pointer;
+  transition: all $transition-base;
+  border: none;
+  padding: 0;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &::before {
+    @include indicator-dot(
+      map.get($default, width),
+      map.get($default, height),
+      $color-white-40
+    );
+  }
+
+  &:hover::before {
+    background: $color-white-60;
+    transform: scale(1.2);
+  }
+
+  &--active {
+    width: map.get($active, width);
+    overflow: hidden;
+    border-radius: $radius-full;
+
+    &::before {
+      @include indicator-dot(
+        map.get($active, width),
+        map.get($active, height),
+        $color-white-30
+      );
+    }
+
+    &::after {
+      @include indicator-dot(
+        map.get($active, width),
+        map.get($active, height),
+        $color-white-95
+      );
+      position: absolute;
+      inset: 50% auto auto 0;
+      transform: translateY(-50%);
+      box-shadow: $shadow-glow;
+    }
+
+    &:hover {
+      &::before {
+        background: $color-white-40;
+      }
+
+      &::after {
+        background: $color-white;
+        box-shadow: $shadow-glow-strong;
+      }
+    }
+
+    &.peek-carousel__indicator--progress::after {
+      width: 0;
+      animation: indicatorProgress linear forwards;
+      animation-duration: var(--progress-duration, 2500ms);
+    }
+  }
+
+  &--completed::after {
+    width: map.get($active, width) !important;
+    animation: none;
+  }
+}
+
+@keyframes fadeInUpControls {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(map.get($controls-animation, translate-y));
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+@keyframes indicatorProgress {
+  from {
+    width: 0;
+  }
+  to {
+    width: map.get(map.get($indicator-dimensions, active), width);
+  }
+}

package/src/styles/components/_navigation.scss

@@ -0,0 +1,193 @@
+@use '../base/variables' as *;
+@use '../base/mixins' as *;
+@use 'sass:map';
+
+$nav-animation: (
+  duration: 0.6s,
+  easing: cubic-bezier(0.4, 0, 0.2, 1),
+  delay: 0.5s,
+  translate-y: 20px
+);
+
+$button-config: (
+  nav: (
+    size: $nav-btn-size,
+    size-mobile: $nav-btn-size-mobile,
+    bg: $color-white-10,
+    bg-hover: $color-white-20,
+    border: $color-white-20,
+    blur: 10px
+  ),
+  auto-rotate: (
+    size: $auto-rotate-btn-size,
+    bg: $color-black-50,
+    bg-hover: $color-black-60,
+    bg-active: $color-white-20,
+    border: $color-white-15,
+    border-hover: $color-white-30,
+    blur: $carousel-blur
+  )
+);
+
+$icon-states: (
+  default: (
+    play: block,
+    pause: none
+  ),
+  active: (
+    play: none,
+    pause: block
+  )
+);
+
+$transforms: (
+  hover-scale: 1.1,
+  active-scale: 0.95,
+  nudge-distance: 2px
+);
+
+
+@mixin button-base($size, $bg, $border, $blur) {
+  width: $size;
+  height: $size;
+  border-radius: $radius-circle;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all $transition-base;
+  user-select: none;
+  @include glassmorphism($bg, $blur, $border);
+}
+
+@mixin interactive-states($bg-hover, $border-hover: null) {
+  &:hover {
+    background: $bg-hover;
+    transform: scale(map.get($transforms, hover-scale));
+
+    @if $border-hover {
+      border-color: $border-hover;
+    }
+  }
+
+  &:active {
+    transform: scale(map.get($transforms, active-scale));
+  }
+
+  &:focus-visible {
+    outline: 3px solid $color-primary-80;
+    outline-offset: 4px;
+  }
+}
+
+@mixin icon-visibility($state) {
+  .play-icon {
+    display: map.get(map.get($icon-states, $state), play);
+  }
+
+  .pause-icon {
+    display: map.get(map.get($icon-states, $state), pause);
+  }
+}
+
+.peek-carousel__nav {
+  position: absolute;
+  inset: auto auto 8% 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: $spacing-3xl;
+  z-index: $z-index-controls;
+  align-items: center;
+  opacity: 0;
+  animation: fadeInUpNav
+    map.get($nav-animation, duration)
+    map.get($nav-animation, easing)
+    forwards;
+  animation-delay: map.get($nav-animation, delay);
+
+  @media (max-width: 768px) {
+    bottom: 12%;
+  }
+}
+
+.peek-carousel__btn {
+  $nav-config: map.get($button-config, nav);
+
+  @include button-base(
+    map.get($nav-config, size),
+    map.get($nav-config, bg),
+    map.get($nav-config, border),
+    map.get($nav-config, blur)
+  );
+
+  color: white;
+  font-size: 1rem;
+  place-items: center;
+  display: grid;
+
+  svg {
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+    transition: transform $transition-fast;
+  }
+
+  @include interactive-states(map.get($nav-config, bg-hover));
+
+  &:hover svg {
+    transform: translateX(0);
+  }
+
+  &.prev-btn:hover svg {
+    transform: translateX(calc(-1 * map.get($transforms, nudge-distance)));
+  }
+
+  &.next-btn:hover svg {
+    transform: translateX(map.get($transforms, nudge-distance));
+  }
+
+  @media (max-width: 768px) {
+    width: map.get($nav-config, size-mobile);
+    height: map.get($nav-config, size-mobile);
+  }
+
+  &--auto-rotate {
+    $rotate-config: map.get($button-config, auto-rotate);
+
+    @include button-base(
+      map.get($rotate-config, size),
+      map.get($rotate-config, bg),
+      map.get($rotate-config, border),
+      map.get($rotate-config, blur)
+    );
+
+    padding: 0;
+
+    svg {
+      flex-shrink: 0;
+    }
+
+    @include icon-visibility(default);
+    @include interactive-states(
+      map.get($rotate-config, bg-hover),
+      map.get($rotate-config, border-hover)
+    );
+
+    &.peek-carousel__btn--active {
+      background: map.get($rotate-config, bg-active);
+      border-color: map.get($rotate-config, border-hover);
+      @include icon-visibility(active);
+    }
+  }
+}
+
+@keyframes fadeInUpNav {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(map.get($nav-animation, translate-y));
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}

package/src/styles/components/carousel/_carousel-base.scss

@@ -0,0 +1,99 @@
+@use '../../base/variables' as *;
+@use 'carousel-variables' as *;
+@use 'sass:list';
+
+.peek-carousel {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  user-select: none;
+  cursor: grab;
+
+  opacity: 0;
+  transform: translateY($initial-offset);
+  animation: fadeInUp $animation-duration cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  animation-delay: $animation-delay;
+
+  --drag-offset: 0px;
+  --drag-rotation: 0deg;
+  --drag-rotation-y: 0deg;
+
+  &__track {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    touch-action: pan-y;
+    transform-style: preserve-3d;
+  }
+
+  &__item {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: $carousel-item-width;
+    aspect-ratio: $carousel-item-ratio;
+    transform-origin: center;
+    will-change: transform, opacity;
+    backface-visibility: hidden;
+    transform: translate(-50%, -50%) scale($item-default-scale);
+    z-index: $z-index-base;
+
+    --item-x: 0%;
+    --item-scale: #{$item-default-scale};
+    --item-offset-x: 0px;
+    --item-angle: 0deg;
+    --item-radius: #{$item-default-radius};
+
+    &--active {
+      .peek-carousel__caption {
+        opacity: 1;
+      }
+    }
+
+    @media (max-width: $breakpoint-mobile) {
+      width: clamp($item-mobile-min-width, 80vw, $item-mobile-max-width);
+      --item-radius: #{$item-mobile-radius};
+    }
+  }
+
+  &__figure {
+    margin: 0;
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  &__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: $radius-xl;
+    box-shadow: list.join($shadow-lg, $shadow-md, $separator: comma);
+    transition:
+      filter $transition-slow,
+      box-shadow $transition-slow;
+    will-change: filter, box-shadow;
+  }
+
+  &__caption {
+    position: absolute;
+    inset: auto 0 0;
+    color: white;
+    text-align: center;
+    padding: $spacing-2xl;
+    background: linear-gradient(to top, $color-black-80, transparent);
+    border-radius: 0 0 $radius-xl $radius-xl;
+    opacity: 0;
+    transition: opacity $transition-base;
+    pointer-events: none;
+  }
+}
+
+@keyframes fadeInUp {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}