aplance-ui 1.1.1 → 1.2.1

package/registry/components/primitives/slider/slider-context.ts

@@ -0,0 +1,50 @@
+import { createContext, useContext } from "react";
+
+export type SliderApi = {
+  /** Current logical slide index. */
+  index: number;
+  /** Alias for index, useful when mirroring carousel terminology. */
+  activeIndex: number;
+  /** Total number of real slides. */
+  count: number;
+  /** Total number of snap points/pages. */
+  snapCount: number;
+  /** How many slides are visible in the current responsive layout. */
+  slidesPerView: number | "auto";
+  /** How many slides move on next/previous. */
+  slidesPerGroup: number;
+  /** 0..1 progress through the available snap points. */
+  progress: number;
+  /** Whether loop mode is active. */
+  isLoop: boolean;
+  /** Whether the pointer is currently dragging the track. */
+  isDragging: boolean;
+  /** Whether autoplay is currently paused by hover/focus/drag. */
+  isAutoplayPaused: boolean;
+  /** True when previous movement is not available in non-loop mode. */
+  isFirst: boolean;
+  /** True when next movement is not available in non-loop mode. */
+  isLast: boolean;
+  /** Alias for !isFirst. */
+  canSlidePrev: boolean;
+  /** Alias for !isLast. */
+  canSlideNext: boolean;
+  /** Advance by one group, or by a custom step count. */
+  next: (steps?: number) => void;
+  /** Move back by one group, or by a custom step count. */
+  prev: (steps?: number) => void;
+  /** Jump to a logical slide/snap index. */
+  goTo: (index: number) => void;
+  /** Alias for goTo. */
+  slideTo: (index: number) => void;
+  /** Stop autoplay for the rest of the current mount. */
+  stopAutoplay: () => void;
+};
+
+export const SliderContext = createContext<SliderApi | undefined>(undefined);
+
+export const useSlider = () => {
+  const ctx = useContext(SliderContext);
+  if (!ctx) throw new Error("useSlider must be used within a <Slider>");
+  return ctx;
+};

package/registry/components/primitives/slider/slider.module.css

@@ -0,0 +1,300 @@
+/* ─── Container ──────────────────────────────────────────────────────────────
+   Positioning context for nav arrows + pagination. Token contract is declared
+   on the root so consumer apps can theme dot/nav colors without overrides.
+   ─────────────────────────────────────────────────────────────────────────── */
+
+.container {
+  --slider-nav-size: var(--spacing-12);
+  --slider-nav-bg: color-mix(in srgb, var(--color-foreground) 56%, transparent);
+  --slider-nav-bg-hover: color-mix(in srgb, var(--color-foreground) 78%, transparent);
+  --slider-nav-fg: var(--color-background);
+  --slider-dot-size: var(--spacing-6);
+  --slider-dot-bg: color-mix(in srgb, var(--color-foreground) 28%, transparent);
+  --slider-dot-bg-active: var(--color-primary);
+
+  position: relative;
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--spacing-6);
+}
+
+.container_effect {
+  overflow: hidden;
+}
+
+/* ─── Viewport + track ───────────────────────────────────────────────────────
+   Viewport clips overflow and captures pointer events. Track is the moving
+   strip; `fade` / `scale` effects stack slides via CSS grid in the same cell.
+   ─────────────────────────────────────────────────────────────────────────── */
+
+.viewport {
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  user-select: none;
+  -webkit-user-select: none;
+  transition: height var(--transition-base);
+}
+
+.track {
+  display: flex;
+  min-width: 0;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  will-change: transform;
+}
+
+.track_fade,
+.track_scale {
+  display: grid;
+  transform: none;
+}
+
+.slide {
+  min-width: 0;
+  flex-grow: 0;
+  flex-shrink: 0;
+  display: block;
+
+  > img,
+  > video,
+  > picture {
+    display: block;
+    width: 100%;
+    height: 100%;
+    user-select: none;
+    -webkit-user-drag: none;
+  }
+
+  > img,
+  > video {
+    object-fit: cover;
+  }
+}
+
+.slide_overlay {
+  grid-area: 1 / 1;
+  width: 100%;
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    opacity var(--transition-base),
+    transform var(--transition-base);
+}
+
+.track_fade .slide_overlay {
+  transform: none;
+}
+
+.track_scale .slide_overlay {
+  transform: scale(0.96);
+}
+
+.slide_active {
+  opacity: 1;
+  pointer-events: auto;
+  transform: scale(1);
+}
+
+/* ─── Built-in nav arrows ───────────────────────────────────────────────────
+   `data-slider-no-drag` is set in TSX so `dragIgnoreSelector` does not start
+   a track drag when the user clicks the chevron.
+   ─────────────────────────────────────────────────────────────────────────── */
+
+.nav {
+  position: absolute;
+  top: 50%;
+  z-index: 2;
+  display: inline-flex;
+  width: var(--slider-nav-size);
+  height: var(--slider-nav-size);
+  padding: 0;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: var(--radius-full);
+  appearance: none;
+  background-color: var(--slider-nav-bg);
+  color: var(--slider-nav-fg);
+  cursor: pointer;
+  font: inherit;
+  line-height: 0;
+  transform: translateY(-50%);
+  transition: var(--transition-fast);
+  transition-property: background-color, opacity, transform;
+
+  &:hover:not(:disabled) {
+    background-color: var(--slider-nav-bg-hover);
+  }
+
+  &:focus-visible {
+    outline: var(--outline-2) solid var(--color-ring);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    opacity: 0.38;
+    cursor: not-allowed;
+  }
+
+  > svg {
+    display: block;
+    flex: 0 0 auto;
+    width: 60%;
+    height: 60%;
+  }
+}
+
+.nav_prev {
+  left: var(--spacing-6);
+}
+
+.nav_next {
+  right: var(--spacing-6);
+}
+
+/* ─── Pagination (dots / fraction / progress) ───────────────────────────── */
+
+.dots {
+  display: flex;
+  min-height: var(--spacing-10);
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-4);
+  padding: var(--spacing-2);
+}
+
+.dot {
+  width: var(--slider-dot-size);
+  height: var(--slider-dot-size);
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-full);
+  appearance: none;
+  background-color: var(--slider-dot-bg);
+  cursor: pointer;
+  font: inherit;
+  line-height: 0;
+  transition: var(--transition-fast);
+  transition-property: background-color, transform, opacity;
+
+  &:hover:not(:disabled) {
+    background-color: color-mix(in srgb, var(--color-foreground) 48%, transparent);
+  }
+
+  &:focus-visible {
+    outline: var(--outline-2) solid var(--color-ring);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: default;
+  }
+}
+
+.dot_active {
+  background-color: var(--slider-dot-bg-active);
+  transform: scale(1.18);
+}
+
+.fraction {
+  display: inline-flex;
+  min-height: var(--spacing-10);
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-3);
+  padding: var(--spacing-2);
+  color: var(--color-muted-foreground);
+  font-size: var(--font-size-sm);
+  font-variant-numeric: tabular-nums;
+}
+
+.fraction_sep {
+  color: var(--color-border);
+}
+
+.progress {
+  width: 100%;
+  height: var(--spacing-2);
+  overflow: hidden;
+  border-radius: var(--radius-full);
+  background-color: var(--color-muted);
+}
+
+.progress_bar {
+  height: 100%;
+  border-radius: inherit;
+  background-color: var(--color-primary);
+  transition: width var(--transition-base);
+}
+
+/* ─── Custom sub-component buttons ──────────────────────────────────────── */
+
+.custom_btn {
+  display: inline-flex;
+  width: var(--spacing-11);
+  height: var(--spacing-11);
+  padding: 0;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: var(--radius-full);
+  appearance: none;
+  background-color: var(--color-secondary);
+  color: var(--color-secondary-foreground);
+  cursor: pointer;
+  font: inherit;
+  line-height: 0;
+  transition: var(--transition-fast);
+  transition-property: background-color, opacity;
+
+  &:hover:not(:disabled) {
+    background-color: var(--color-secondary-muted);
+  }
+
+  &:focus-visible {
+    outline: var(--outline-2) solid var(--color-ring);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    opacity: 0.38;
+    cursor: not-allowed;
+  }
+
+  > svg {
+    display: block;
+    flex: 0 0 auto;
+    width: 60%;
+    height: 60%;
+  }
+}
+
+.dots_static {
+  padding: 0;
+}
+
+@media (--md) {
+  .container {
+    --slider-nav-size: var(--spacing-11);
+  }
+
+  .nav_prev {
+    left: var(--spacing-4);
+  }
+
+  .nav_next {
+    right: var(--spacing-4);
+  }
+}
+
+@media (--motion-reduce) {
+  .track,
+  .slide_overlay,
+  .progress_bar {
+    transition: none;
+  }
+}