@aiquants/virtualscroll 1.18.5 → 1.19.0

package/src/styles/virtualscroll.css

@@ -0,0 +1,298 @@
+@layer utilities {
+  .aqvs-scroll-pane {
+    position: relative;
+    display: flex;
+  }
+
+  .aqvs-scroll-pane-content {
+    position: relative;
+    height: 100%;
+    flex: 1 1 0%;
+    overflow: hidden;
+  }
+
+  .aqvs-tap-scroll-circle {
+    position: relative;
+    display: flex;
+    touch-action: none;
+    user-select: none;
+    align-items: center;
+    justify-content: center;
+    transition-property: transform;
+    transition-duration: 100ms;
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+
+  .aqvs-tap-scroll-circle-visual-outer {
+    position: absolute;
+    inset: 0;
+    border-radius: 9999px;
+  }
+
+  .aqvs-tap-scroll-circle-gradient {
+    background: linear-gradient(to bottom right, rgba(29, 78, 216, 0.6), rgba(96, 165, 250, 0.55), rgba(191, 219, 254, 0.4));
+    position: absolute;
+    inset: 0;
+    border-radius: 9999px;
+    border-width: 1px;
+    border-color: rgba(255, 255, 255, 0.4);
+    box-shadow:
+      0 4px 6px -1px rgba(0, 0, 0, 0.1),
+      0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  }
+
+  .aqvs-tap-scroll-circle-inner {
+    inset: 18%;
+    position: absolute;
+    border-radius: 9999px;
+  }
+
+  .aqvs-sample-visual-rod {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    border-radius: 9999px;
+    border-width: 1px;
+    border-color: rgba(255, 255, 255, 0.5);
+    background-color: rgba(255, 255, 255, 0.85);
+  }
+
+  .aqvs-sample-visual-pupil {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    border-radius: 9999px;
+    background-color: rgba(255, 255, 255, 0.8);
+  }
+
+  .aqvs-sample-visual-highlight {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    border-radius: 9999px;
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+
+  .aqvs-scrollbar {
+    position: relative;
+    z-index: 50;
+    cursor: default;
+    user-select: none;
+    background-color: white;
+    touch-action: none;
+  }
+
+  .aqvs-scrollbar-horizontal {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+  }
+
+  .aqvs-scrollbar-vertical {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .aqvs-scrollbar-tap-circle-wrapper {
+    pointer-events: auto;
+    position: absolute;
+    transition-property: opacity;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+
+  .aqvs-scrollbar-arrow-button {
+    color: #313131;
+    background-color: #e0e0e0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+
+  .aqvs-scrollbar-arrow-button:focus {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+
+  .aqvs-scrollbar-arrow-button:focus-visible {
+    outline: 2px solid rgba(96, 165, 250, 1);
+    outline-offset: 1px;
+  }
+
+  .aqvs-scrollbar-arrow-button:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .aqvs-scrollbar-arrow-button:enabled:hover {
+    background-color: #d4d4d4;
+  }
+
+  .aqvs-scrollbar-track {
+    background-color: #f5f5f5;
+    position: relative;
+    flex: 1 1 0%;
+  }
+
+  .aqvs-scrollbar-overlay {
+    pointer-events: none;
+    position: absolute;
+    inset: 0;
+  }
+
+  .aqvs-scrollbar-thumb-wrapper {
+    position: absolute;
+    touch-action: none;
+  }
+
+  .aqvs-scrollbar-thumb {
+    background-color: #7f7f7f;
+    transition: transform 80ms ease-out;
+    transform-origin: center;
+    position: absolute;
+  }
+
+  .aqvs-scrollbar-thumb[data-thumb-state="disabled"] {
+    transform: none;
+    transition: none;
+  }
+
+  .aqvs-scrollbar-thumb[data-thumb-state="hover"] {
+    background-color: #5f5f5f;
+  }
+
+  .aqvs-scrollbar-thumb[data-thumb-state="dragging"] {
+    background-color: #4f4f4f;
+    transition: transform 60ms ease-out;
+  }
+
+  .aqvs-scrollbar-thumb-horizontal {
+    top: 1.5px;
+    bottom: 1.5px;
+    left: 0;
+    right: 0;
+  }
+
+  .aqvs-scrollbar-thumb-horizontal[data-thumb-state="hover"] {
+    transform: scaleY(1.06);
+    top: -0.5px;
+    bottom: -0.5px;
+  }
+
+  .aqvs-scrollbar-thumb-horizontal[data-thumb-state="dragging"] {
+    transform: scaleY(1.12);
+    top: -0.5px;
+    bottom: -0.5px;
+  }
+
+  .aqvs-scrollbar-thumb-vertical {
+    top: 0;
+    bottom: 0;
+    left: 1.5px;
+    right: 1.5px;
+  }
+
+  .aqvs-scrollbar-thumb-vertical[data-thumb-state="hover"] {
+    transform: scaleX(1.06);
+    left: -0.5px;
+    right: -0.5px;
+  }
+
+  .aqvs-scrollbar-thumb-vertical[data-thumb-state="dragging"] {
+    transform: scaleX(1.12);
+    left: -0.5px;
+    right: -0.5px;
+  }
+
+  .aqvs-scroll-to-edge-button {
+    pointer-events: auto;
+    transform: none;
+    border-radius: 9999px;
+    background-color: rgba(31, 41, 55, 0.8);
+    padding: 0.25rem 3rem;
+    font-weight: 500;
+    font-size: 10px;
+    color: white;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    box-shadow:
+      0 4px 6px -1px rgba(0, 0, 0, 0.1),
+      0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    backdrop-filter: blur(4px);
+    transition-property: transform, background-color;
+    transition-duration: 150ms;
+  }
+
+  .aqvs-scroll-to-edge-button:hover {
+    background-color: rgba(55, 65, 81, 1);
+  }
+
+  .aqvs-scroll-to-edge-button:active {
+    transform: scale(0.95);
+  }
+
+  .aqvs-scroll-to-edge-overlay {
+    pointer-events: none;
+    position: absolute;
+    inset: 0;
+    transition-property: opacity;
+    transition-duration: 500ms;
+    z-index: 10;
+  }
+
+  .aqvs-scroll-to-edge-overlay[data-visible="true"] {
+    opacity: 1;
+  }
+
+  .aqvs-scroll-to-edge-overlay[data-visible="false"] {
+    opacity: 0;
+  }
+
+  .aqvs-scroll-to-edge-button-container {
+    position: absolute;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+  }
+
+  .aqvs-scroll-to-edge-button-container-top {
+    top: 0.5rem;
+  }
+
+  .aqvs-scroll-to-edge-button-container-bottom {
+    bottom: 0.5rem;
+  }
+
+  .aqvs-no-items-container {
+    position: absolute;
+    width: 100%;
+    top: 0;
+  }
+
+  .aqvs-no-items-text {
+    text-align: center;
+    color: #6b7280;
+  }
+
+  .aqvs-item-container {
+    position: absolute;
+    width: 100%;
+  }
+
+  .aqvs-bottom-inset {
+    position: absolute;
+    width: 100%;
+  }
+
+  .aqvs-items-wrapper {
+    position: absolute;
+    width: 100%;
+  }
+}

package/src/tapScrollCircleSampleVisual.tsx

@@ -0,0 +1,74 @@
+/**
+ * Provides the sample tap scroll circle visual used for demos.
+ * デモ用に使用されるサンプルのタップスクロールビジュアルを提供するモジュール。
+ */
+
+import type { TapScrollCircleProps, TapScrollCircleRenderProps } from "./TapScrollCircle.tsx"
+
+const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max)
+
+export const tapScrollCircleSampleVisual: NonNullable<TapScrollCircleProps["renderVisual"]> = ({ dragState, normalizedDistance, sizeScale, size }: TapScrollCircleRenderProps) => {
+    const radius = Math.max(size / 2, 1)
+    const stretchY = 1 + normalizedDistance * 0.65
+    const stretchX = Math.max(0.65, 1 - normalizedDistance * 0.25)
+    const tail = dragState.direction * normalizedDistance * 26 * sizeScale
+    const pupilScale = 0.8 + normalizedDistance * 0.18
+    const tailBase = 3 * sizeScale
+    const baseHeight = 6 * sizeScale
+    const coreSize = 22 * sizeScale
+    const rodHeight = Math.abs(tail) + baseHeight
+    const rodTranslate = tail > 0 ? tailBase : -Math.abs(tail) - tailBase
+    const rodWidth = Math.max(2.5, 3 * sizeScale)
+    const limitedX = clamp(dragState.offsetX, -radius, radius)
+    const limitedY = clamp(dragState.offsetY, -radius, radius)
+    const pupilRange = radius * 0.35
+    const pupilX = (limitedX / radius) * pupilRange
+    const pupilY = (limitedY / radius) * pupilRange
+    const highlightX = pupilX * 0.45
+    const highlightY = pupilY * 0.45
+    const highlightSize = Math.max(coreSize * 0.38, 6)
+    const highlightOpacity = 0.65 + normalizedDistance * 0.2
+    const active = dragState.active
+
+    return (
+        <>
+            <div
+                className="aqvs-tap-scroll-circle-gradient"
+                style={{
+                    transform: `scale(${stretchX}, ${stretchY})`,
+                    transition: active ? "40ms transform ease-out" : "200ms ease transform",
+                }}
+            />
+            <div
+                className="aqvs-sample-visual-rod"
+                style={{
+                    width: coreSize,
+                    height: coreSize,
+                    transform: `translate(calc(-50% + ${pupilX}px), calc(-50% + ${pupilY}px)) scale(${stretchX}, ${pupilScale * stretchY})`,
+                    transition: active ? "70ms transform ease-out" : "200ms ease transform",
+                }}
+            />
+            <div
+                className="aqvs-sample-visual-pupil"
+                style={{
+                    width: highlightSize,
+                    height: highlightSize,
+                    transform: `translate(calc(-50% + ${highlightX}px), calc(-50% + ${highlightY}px)) scale(${stretchX}, ${stretchY})`,
+                    opacity: highlightOpacity,
+                    boxShadow: "0 0 8px rgba(255,255,255,0.45)",
+                    transition: active ? "120ms opacity 150ms, 120ms transform ease-out ease-out" : "220ms ease transform, 240ms opacity ease",
+                }}
+            />
+            <div
+                className="aqvs-sample-visual-highlight"
+                style={{
+                    width: rodWidth,
+                    height: rodHeight,
+                    transform: `translate(-50%, ${rodTranslate}px)`,
+                    opacity: normalizedDistance,
+                    transition: active ? "40ms height, 60ms opacity ease-out ease-out" : "200ms ease height, 120ms ease opacity",
+                }}
+            />
+        </>
+    )
+}