@xhub-short/ui 0.1.0-beta.1 → 0.1.0-beta.10

package/dist/chunk-AQHD6LPS.js

@@ -0,0 +1,430 @@
+import { injectComponentCSS } from './chunk-RMLTPW5S.js';
+import { createContext, useContext, useMemo, useInsertionEffect, useRef, useState, useEffect, useCallback } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/VirtualSlider/VirtualSlider.css.ts
+var VIRTUAL_SLIDER_CSS = (
+  /* css */
+  `
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+ * Container
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+
+.sv-slider {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  background-color: var(--sv-slider-bg, #000);
+  touch-action: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.sv-slider__container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+/* Transition during snap (not swiping) */
+.sv-slider__container--snapping {
+  /* Transitions handled by individual slots */
+}
+
+/* During swipe - no transitions for immediate response */
+.sv-slider__container--swiping {
+  /* Slots handle their own transitions */
+}
+
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+ * Slots
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+
+.sv-slider__slot {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  will-change: transform, opacity;
+  contain: layout style;
+}
+
+/* Active slot */
+.sv-slider__slot--active {
+  z-index: 2;
+}
+
+/* Adjacent slots (before/after active) */
+.sv-slider__slot--adjacent {
+  z-index: 1;
+}
+
+/* Smooth transition when snapping */
+.sv-slider__slot--transitioning {
+  transition:
+    transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    opacity 0.3s ease;
+}
+
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+ * Loading State
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+
+.sv-slider__loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  background-color: var(--sv-slider-bg, #000);
+  color: var(--sv-slider-text, #fff);
+}
+
+.sv-slider__loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid rgba(255, 255, 255, 0.2);
+  border-top-color: var(--sv-color-primary, #fe2c55);
+  border-radius: 50%;
+  animation: sv-slider-spin 0.8s linear infinite;
+}
+
+@keyframes sv-slider-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.sv-slider__loading-text {
+  font-size: 14px;
+  color: var(--sv-slider-text-muted, rgba(255, 255, 255, 0.7));
+}
+
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+ * Empty State
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+
+.sv-slider__empty {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  background-color: var(--sv-slider-bg, #000);
+  color: var(--sv-slider-text, #fff);
+}
+
+.sv-slider__empty-icon {
+  font-size: 48px;
+  opacity: 0.5;
+}
+
+.sv-slider__empty-text {
+  font-size: 16px;
+  color: var(--sv-slider-text-muted, rgba(255, 255, 255, 0.7));
+}
+
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+ * End of List
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+
+.sv-slider__end {
+  position: absolute;
+  bottom: var(--sv-safe-area-bottom, 20px);
+  left: 0;
+  right: 0;
+  text-align: center;
+  padding: 12px 16px;
+  font-size: 14px;
+  color: var(--sv-slider-text-muted, rgba(255, 255, 255, 0.6));
+  pointer-events: none;
+  z-index: 10;
+}
+
+/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+ * CSS Variables Reference
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+ *
+ * --sv-slider-bg: Background color (default: #000)
+ * --sv-slider-text: Text color (default: #fff)
+ * --sv-slider-text-muted: Muted text color (default: rgba(255,255,255,0.7))
+ * --sv-color-primary: Primary accent color (default: #fe2c55)
+ * --sv-safe-area-bottom: Bottom safe area for notched devices
+ *
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+`
+);
+var VirtualSliderContext = createContext(null);
+VirtualSliderContext.displayName = "VirtualSliderContext";
+function useVirtualSliderContext() {
+  const context = useContext(VirtualSliderContext);
+  if (!context) {
+    throw new Error("useVirtualSliderContext must be used within a VirtualSlider");
+  }
+  return context;
+}
+function useOptionalVirtualSliderContext() {
+  return useContext(VirtualSliderContext);
+}
+function useSliderActiveIndex() {
+  const context = useVirtualSliderContext();
+  return context.activeIndex;
+}
+function useSliderIsSwiping() {
+  const context = useVirtualSliderContext();
+  return context.isSwiping;
+}
+
+// src/components/VirtualSlider/constants.ts
+var SLIDER_CLASS = "sv-slider";
+var SLIDER_CONTAINER_CLASS = "sv-slider__container";
+var SLIDER_SLOT_CLASS = "sv-slider__slot";
+var SLIDER_SLOT_ACTIVE_CLASS = "sv-slider__slot--active";
+var SLIDER_SLOT_ADJACENT_CLASS = "sv-slider__slot--adjacent";
+var SLIDER_SLOT_TRANSITIONING_CLASS = "sv-slider__slot--transitioning";
+var SLIDER_CONTAINER_SWIPING_CLASS = "sv-slider__container--swiping";
+var SLIDER_CONTAINER_SNAPPING_CLASS = "sv-slider__container--snapping";
+var SLOT_INDEX_ATTR = "data-slot-index";
+var SLOT_INDEX_DATASET_KEY = "slotIndex";
+var SLOT_ACTIVE_ATTR = "data-slot-active";
+var SLOT_ACTIVE_DATASET_KEY = "slotActive";
+var DEFAULT_BUFFER_SIZE = 1;
+var DEFAULT_END_REACHED_THRESHOLD = 2;
+var DEFAULT_LOADING_TEXT = "Loading...";
+var DEFAULT_EMPTY_TEXT = "No items";
+var DEFAULT_END_TEXT = "You've reached the end";
+function useSliderPosition(options) {
+  const {
+    totalCount,
+    activeIndex,
+    containerHeight,
+    dragOffset,
+    isSwiping,
+    isResizing = false,
+    bufferSize = 1
+  } = options;
+  return useMemo(() => {
+    if (totalCount === 0) {
+      return {
+        slots: [],
+        scrollOffset: 0,
+        isAtStart: true,
+        isAtLastIndex: true,
+        clampedActiveIndex: 0
+      };
+    }
+    const clampedActiveIndex = Math.max(0, Math.min(totalCount - 1, activeIndex));
+    const slots = [];
+    const startIndex = Math.max(0, clampedActiveIndex - bufferSize);
+    const endIndex = Math.min(totalCount - 1, clampedActiveIndex + bufferSize);
+    const baseOffset = -clampedActiveIndex * containerHeight;
+    const scrollOffset = baseOffset + dragOffset;
+    for (let i = startIndex; i <= endIndex; i++) {
+      const signedDistance = i - clampedActiveIndex;
+      const distance = Math.abs(signedDistance);
+      const isActive = i === clampedActiveIndex;
+      const top = i * containerHeight;
+      const transform = `translateY(${top + scrollOffset}px)`;
+      let opacity = 1;
+      if (!isActive && !isResizing) {
+        opacity = isSwiping ? 0.7 : 0.3;
+      }
+      slots.push({
+        index: i,
+        top,
+        isActive,
+        distance,
+        signedDistance,
+        transform,
+        opacity
+      });
+    }
+    return {
+      slots,
+      scrollOffset,
+      isAtStart: clampedActiveIndex === 0,
+      isAtLastIndex: clampedActiveIndex >= totalCount - 1,
+      clampedActiveIndex
+    };
+  }, [totalCount, activeIndex, containerHeight, dragOffset, isSwiping, isResizing, bufferSize]);
+}
+function getSlotIndexFromPosition(yPosition, containerHeight, totalCount) {
+  if (totalCount === 0 || containerHeight === 0) {
+    return 0;
+  }
+  const rawIndex = Math.round(-yPosition / containerHeight);
+  return Math.max(0, Math.min(totalCount - 1, rawIndex));
+}
+function DefaultLoading({ text = DEFAULT_LOADING_TEXT }) {
+  return /* @__PURE__ */ jsxs("div", { className: "sv-slider__loading", children: [
+    /* @__PURE__ */ jsx("div", { className: "sv-slider__loading-spinner" }),
+    /* @__PURE__ */ jsx("span", { className: "sv-slider__loading-text", children: text })
+  ] });
+}
+function DefaultEmpty({ text = DEFAULT_EMPTY_TEXT }) {
+  return /* @__PURE__ */ jsxs("div", { className: "sv-slider__empty", children: [
+    /* @__PURE__ */ jsx("span", { className: "sv-slider__empty-icon", children: "\u{1F4ED}" }),
+    /* @__PURE__ */ jsx("span", { className: "sv-slider__empty-text", children: text })
+  ] });
+}
+function DefaultEnd({ text = DEFAULT_END_TEXT }) {
+  return /* @__PURE__ */ jsx("div", { className: "sv-slider__end", children: text });
+}
+function VirtualSlider({
+  // Required
+  items,
+  keyExtractor,
+  renderItem,
+  // Swipe state
+  activeIndex,
+  isSwiping,
+  dragOffset,
+  goToIndex,
+  // Callbacks
+  onIndexChange,
+  onEndReached,
+  endReachedThreshold = DEFAULT_END_REACHED_THRESHOLD,
+  bufferSize = DEFAULT_BUFFER_SIZE,
+  // Loading states
+  isLoading = false,
+  hasMore = true,
+  // Custom UI
+  loadingComponent,
+  emptyComponent,
+  endComponent,
+  loadingText,
+  emptyText,
+  endText,
+  // Styling
+  height,
+  className,
+  disableInlineTransforms = false,
+  testId
+}) {
+  useInsertionEffect(() => {
+    return injectComponentCSS("virtual-slider", VIRTUAL_SLIDER_CSS);
+  }, []);
+  const containerRef = useRef(null);
+  const prevActiveIndexRef = useRef(activeIndex);
+  const [containerHeight, setContainerHeight] = useState(
+    typeof window !== "undefined" ? window.innerHeight : 800
+  );
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const updateHeight = () => {
+      const rect = container.getBoundingClientRect();
+      if (rect.height > 0) {
+        setContainerHeight(rect.height);
+      }
+    };
+    updateHeight();
+    const resizeObserver = new ResizeObserver(updateHeight);
+    resizeObserver.observe(container);
+    return () => resizeObserver.disconnect();
+  }, []);
+  const { slots, isAtLastIndex } = useSliderPosition({
+    totalCount: items.length,
+    activeIndex,
+    containerHeight,
+    dragOffset,
+    isSwiping,
+    bufferSize
+  });
+  useEffect(() => {
+    if (activeIndex !== prevActiveIndexRef.current) {
+      prevActiveIndexRef.current = activeIndex;
+      onIndexChange?.(activeIndex);
+    }
+  }, [activeIndex, onIndexChange]);
+  useEffect(() => {
+    if (items.length === 0) return;
+    const remainingItems = items.length - 1 - activeIndex;
+    if (remainingItems <= endReachedThreshold && hasMore && !isLoading) {
+      onEndReached?.();
+    }
+  }, [activeIndex, items.length, endReachedThreshold, hasMore, isLoading, onEndReached]);
+  const contextValue = useMemo(
+    () => ({
+      items,
+      activeIndex,
+      isSwiping,
+      dragOffset,
+      containerHeight,
+      goToIndex,
+      totalCount: items.length
+    }),
+    [items, activeIndex, isSwiping, dragOffset, containerHeight, goToIndex]
+  );
+  const buildSlotClassName = useCallback(
+    (isActive) => {
+      const classes = [SLIDER_SLOT_CLASS];
+      if (isActive) {
+        classes.push(SLIDER_SLOT_ACTIVE_CLASS);
+      } else {
+        classes.push(SLIDER_SLOT_ADJACENT_CLASS);
+      }
+      if (!isSwiping) {
+        classes.push(SLIDER_SLOT_TRANSITIONING_CLASS);
+      }
+      return classes.join(" ");
+    },
+    [isSwiping]
+  );
+  const buildContainerClassName = useCallback(() => {
+    const classes = [SLIDER_CONTAINER_CLASS];
+    if (isSwiping) {
+      classes.push(SLIDER_CONTAINER_SWIPING_CLASS);
+    } else {
+      classes.push(SLIDER_CONTAINER_SNAPPING_CLASS);
+    }
+    return classes.join(" ");
+  }, [isSwiping]);
+  const rootClassName = [SLIDER_CLASS, className].filter(Boolean).join(" ");
+  const rootStyle = height ? { height: typeof height === "number" ? `${height}px` : height } : void 0;
+  if (isLoading && items.length === 0) {
+    return /* @__PURE__ */ jsx("div", { ref: containerRef, className: rootClassName, style: rootStyle, "data-testid": testId, children: loadingComponent ?? /* @__PURE__ */ jsx(DefaultLoading, { text: loadingText }) });
+  }
+  if (!isLoading && items.length === 0) {
+    return /* @__PURE__ */ jsx("div", { ref: containerRef, className: rootClassName, style: rootStyle, "data-testid": testId, children: emptyComponent ?? /* @__PURE__ */ jsx(DefaultEmpty, { text: emptyText }) });
+  }
+  const showEndIndicator = isAtLastIndex && !hasMore && !isLoading;
+  return /* @__PURE__ */ jsx(VirtualSliderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { ref: containerRef, className: rootClassName, style: rootStyle, "data-testid": testId, children: [
+    /* @__PURE__ */ jsx("div", { className: buildContainerClassName(), children: slots.map((slot) => {
+      const item = items[slot.index];
+      if (item === void 0) return null;
+      const key = keyExtractor(item, slot.index);
+      const slotStyle = disableInlineTransforms ? void 0 : {
+        transform: slot.transform,
+        opacity: slot.opacity
+      };
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: buildSlotClassName(slot.isActive),
+          style: slotStyle,
+          ...{ [SLOT_INDEX_ATTR]: slot.index },
+          ...{ [SLOT_ACTIVE_ATTR]: slot.isActive ? "true" : "false" },
+          children: renderItem(item, slot.index, slot.isActive)
+        },
+        key
+      );
+    }) }),
+    showEndIndicator && (endComponent ?? /* @__PURE__ */ jsx(DefaultEnd, { text: endText }))
+  ] }) });
+}
+VirtualSlider.displayName = "VirtualSlider";
+
+export { DEFAULT_BUFFER_SIZE, DEFAULT_EMPTY_TEXT, DEFAULT_END_REACHED_THRESHOLD, DEFAULT_END_TEXT, DEFAULT_LOADING_TEXT, SLIDER_CLASS, SLIDER_CONTAINER_CLASS, SLIDER_CONTAINER_SNAPPING_CLASS, SLIDER_CONTAINER_SWIPING_CLASS, SLIDER_SLOT_ACTIVE_CLASS, SLIDER_SLOT_ADJACENT_CLASS, SLIDER_SLOT_CLASS, SLIDER_SLOT_TRANSITIONING_CLASS, SLOT_ACTIVE_ATTR, SLOT_ACTIVE_DATASET_KEY, SLOT_INDEX_ATTR, SLOT_INDEX_DATASET_KEY, VIRTUAL_SLIDER_CSS, VirtualSlider, VirtualSliderContext, getSlotIndexFromPosition, useOptionalVirtualSliderContext, useSliderActiveIndex, useSliderIsSwiping, useSliderPosition, useVirtualSliderContext };

package/dist/{chunk-HW4LXTFT.js → chunk-CL6BS7GB.js}

@@ -1,6 +1,6 @@
-import { cn } from './chunk-WKX2WBVO.js';
-import { injectComponentCSS } from './chunk-UXMA4KJZ.js';
-import { useRef, useCallback, useEffect, useState, useInsertionEffect, useMemo } from 'react';
+import { clsx2 } from './chunk-EDWS2IPH.js';
+import { injectComponentCSS } from './chunk-RMLTPW5S.js';
+import { memo, useInsertionEffect, useCallback, useMemo, useRef, useState, useEffect } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/components/VideoPlayer/VideoPlayer.css.ts
@@ -35,6 +35,7 @@ var VIDEO_PLAYER_CSS = (
   align-items: center;
   justify-content: center;
   z-index: var(--sv-player-video-z);
+  background: var(--sv-bg-primary, #000);
 }
 
 /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
@@ -920,7 +921,7 @@ function getMediaErrorMessage(code) {
       return "Unknown video error";
   }
 }
-function VideoPlayerHeadless({
+function VideoPlayerHeadlessBase({
   src,
   type,
   poster,
@@ -1021,7 +1022,7 @@ function VideoPlayerHeadless({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn(PLAYER_CLASS, stateClasses, className),
+      className: clsx2(PLAYER_CLASS, stateClasses, className),
       ...{ [VIDEO_TYPE_ATTR]: type },
       ...{ [PLAYBACK_STATE_ATTR]: playbackState },
       style: {
@@ -1118,6 +1119,7 @@ function getUserFriendlyErrorMessage(message) {
   }
   return "Failed to load video. Please try again.";
 }
+var VideoPlayerHeadless = memo(VideoPlayerHeadlessBase);
 VideoPlayerHeadless.displayName = "VideoPlayerHeadless";
 
 export { BUFFERING_STATE_CLASS, DEFAULT_OBJECT_FIT, DEFAULT_PRELOAD, ENDED_CLASS, ERROR_CLASS, ERROR_STATE_CLASS, FIRST_FRAME_MAX_WIDTH, FIRST_FRAME_QUALITY, LOADING_CLASS, LOADING_STATE_ATTR, LOADING_STATE_CLASS, PAUSED_CLASS, PLAYBACK_STATE_ATTR, PLAYER_CLASS, PLAYING_CLASS, POSTER_CLASS, READY_CLASS, VIDEO_CLASS, VIDEO_PLAYER_CSS, VIDEO_TYPE_ATTR, VIDEO_WRAPPER_CLASS, VideoElementError, VideoPlayerHeadless, Z_INDEX, Z_INDEX_CSS_VARS, createFirstFrameCache, firstFrameCache, useAutoFirstFrameCapture, useFirstFrameCapture, useVideoElement };

package/dist/{chunk-YW23IBKF.js → chunk-ECR42RKK.js}

@@ -1,6 +1,6 @@
-import { cn } from './chunk-WKX2WBVO.js';
-import { injectComponentCSS } from './chunk-UXMA4KJZ.js';
-import { useInsertionEffect, useMemo, useEffect, useCallback, useRef, useState } from 'react';
+import { clsx2 } from './chunk-EDWS2IPH.js';
+import { injectComponentCSS } from './chunk-RMLTPW5S.js';
+import { memo, useInsertionEffect, useMemo, useEffect, useCallback, useRef, useState } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/components/ProgressBar/ProgressBar.css.ts
@@ -244,6 +244,40 @@ var PROGRESS_BAR_CSS = `
   display: none;
 }
 
+/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+ * Auto-hide Variant
+ * Shows progress bar only when video is paused or user is seeking/hovering
+ * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.sv-progress-bar--auto-hide {
+  /* Smooth transition for show/hide */
+  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.sv-progress-bar--auto-hide.sv-progress-bar--hidden {
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(8px);
+  pointer-events: none;
+}
+
+/* Show on hover even when auto-hide is enabled */
+.sv-progress-bar--auto-hide:hover {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+/* Always show when seeking */
+.sv-progress-bar--auto-hide.sv-progress-bar--seeking {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
 /* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
  * Reduced Motion (Accessibility)
  * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
@@ -379,7 +413,7 @@ function useSeekHandlers({
     handlePointerLeave
   };
 }
-function ProgressBarHeadless({
+function ProgressBarHeadlessBase({
   currentTime,
   duration,
   buffered = 0,
@@ -391,6 +425,8 @@ function ProgressBarHeadless({
   showTime = false,
   showTooltip,
   minimal = false,
+  autoHide = true,
+  visible,
   fillRef: externalFillRef,
   bufferedRef: externalBufferedRef,
   handleRef: externalHandleRef,
@@ -440,14 +476,17 @@ function ProgressBarHeadless({
   const stopBubble = useCallback((e) => {
     e.stopPropagation();
   }, []);
+  const isHidden = visible !== void 0 ? !visible : autoHide && !isSeeking && hoverTime === null;
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn(
+      className: clsx2(
         CSS_PREFIX,
         !isSeekable && `${CSS_PREFIX}--disabled`,
         isSeeking && `${CSS_PREFIX}--seeking`,
         minimal && `${CSS_PREFIX}--minimal`,
+        autoHide && `${CSS_PREFIX}--auto-hide`,
+        isHidden && `${CSS_PREFIX}--hidden`,
         className
       ),
       onClick: stopBubble,
@@ -526,5 +565,7 @@ function ProgressBarHeadless({
     }
   );
 }
+var ProgressBarHeadless = memo(ProgressBarHeadlessBase);
+ProgressBarHeadless.displayName = "ProgressBarHeadless";
 
 export { PROGRESS_BAR_CSS, ProgressBarHeadless, calculateProgress, formatTime };

package/dist/chunk-EDWS2IPH.js

@@ -0,0 +1 @@
+export { clsx, clsx as clsx2 } from 'clsx';