aplance-ui 1.1.1 → 1.2.1

package/package.json

@@ -1,63 +1,63 @@
-{
-  "name": "aplance-ui",
-  "version": "1.1.1",
-  "description": "The aplance-ui CLI - scaffold the design system and copy components into your project as source.",
-  "keywords": [
-    "react",
-    "ui",
-    "components",
-    "design-system",
-    "cli",
-    "scaffold",
-    "shadcn",
-    "source-first",
-    "css-modules",
-    "tokens"
-  ],
-  "homepage": "https://ui.aplance.com",
-  "author": "Aplance Tech <tech.aplance@gmail.com>",
-  "contributors": [
-    "Viraj Gamdha <viraj@aplance.com>"
-  ],
-  "license": "MIT",
-  "private": false,
-  "type": "module",
-  "bin": {
-    "aplance-ui": "./dist/index.js"
-  },
-  "main": "./dist/api.js",
-  "types": "./dist/api.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/api.d.ts",
-      "import": "./dist/api.js"
-    },
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "dist",
-    "registry",
-    "README.md"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "sync": "npm run registry --workspace @aplance-ui/core",
-    "build": "npm run sync && tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "lint": "eslint src",
-    "prepublishOnly": "npm run build && npm run typecheck && npm run lint"
-  },
-  "dependencies": {
-    "@clack/prompts": "^0.8.2",
-    "commander": "^12.1.0",
-    "picocolors": "^1.1.1"
-  },
-  "devDependencies": {
-    "@types/node": "^24.10.1",
-    "tsup": "^8.3.5",
-    "typescript": "~5.9.3"
-  }
-}
+{
+  "name": "aplance-ui",
+  "version": "1.2.1",
+  "description": "The aplance-ui CLI - scaffold the design system and copy components into your project as source.",
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "design-system",
+    "cli",
+    "scaffold",
+    "shadcn",
+    "source-first",
+    "css-modules",
+    "tokens"
+  ],
+  "homepage": "https://ui.aplance.com",
+  "author": "Aplance Tech <tech.aplance@gmail.com>",
+  "contributors": [
+    "Viraj Gamdha <viraj@aplance.com>"
+  ],
+  "license": "MIT",
+  "private": false,
+  "type": "module",
+  "bin": {
+    "aplance-ui": "./dist/index.js"
+  },
+  "main": "./dist/api.js",
+  "types": "./dist/api.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/api.d.ts",
+      "import": "./dist/api.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "registry",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "sync": "npm run registry --workspace @aplance-ui/core",
+    "build": "npm run sync && tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src",
+    "prepublishOnly": "npm run build && npm run typecheck && npm run lint"
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.8.2",
+    "commander": "^12.1.0",
+    "picocolors": "^1.1.1"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "tsup": "^8.3.5",
+    "typescript": "~5.9.3"
+  }
+}

package/registry/components/primitives/infinite-scroll/infinite-scroll-context.ts

@@ -0,0 +1,32 @@
+import { createContext, useContext } from "react";
+import type { InfiniteScrollDirection, InfiniteScrollOrientation } from "./infinite-scroll";
+
+export type InfiniteScrollApi = {
+  orientation: InfiniteScrollOrientation;
+  direction: InfiniteScrollDirection;
+  itemCount: number;
+  copyCount: number;
+  setSize: number;
+  duration: number;
+  isMeasured: boolean;
+  isPaused: boolean;
+  isManuallyPaused: boolean;
+  isHovering: boolean;
+  isFocusWithin: boolean;
+  pause: () => void;
+  resume: () => void;
+  toggle: () => void;
+  measure: () => void;
+};
+
+export const InfiniteScrollContext = createContext<InfiniteScrollApi | undefined>(
+  undefined,
+);
+
+export const useInfiniteScroll = () => {
+  const ctx = useContext(InfiniteScrollContext);
+  if (!ctx) {
+    throw new Error("useInfiniteScroll must be used within an <InfiniteScroll>");
+  }
+  return ctx;
+};

package/registry/components/primitives/infinite-scroll/infinite-scroll.module.css

@@ -0,0 +1,118 @@
+/* ─── Root + viewport ────────────────────────────────────────────────────────
+   Edge fade uses CSS mask so consumers don't need to wrap the children in an
+   extra layer. Mask shape switches with orientation via `fade_x` / `fade_y`.
+   ─────────────────────────────────────────────────────────────────────────── */
+
+.root {
+  --infinite-scroll-fade-size: 10%;
+
+  position: relative;
+  width: 100%;
+  min-width: 0;
+}
+
+.viewport {
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.viewport_vertical {
+  height: 100%;
+}
+
+.fade_x {
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent,
+    #000 var(--infinite-scroll-fade-size),
+    #000 calc(100% - var(--infinite-scroll-fade-size)),
+    transparent
+  );
+  mask-image: linear-gradient(
+    to right,
+    transparent,
+    #000 var(--infinite-scroll-fade-size),
+    #000 calc(100% - var(--infinite-scroll-fade-size)),
+    transparent
+  );
+}
+
+.fade_y {
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    #000 var(--infinite-scroll-fade-size),
+    #000 calc(100% - var(--infinite-scroll-fade-size)),
+    transparent
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    #000 var(--infinite-scroll-fade-size),
+    #000 calc(100% - var(--infinite-scroll-fade-size)),
+    transparent
+  );
+}
+
+/* ─── Track + keyframes ──────────────────────────────────────────────────────
+   The keyframe reads from CSS custom properties set by TSX so a single
+   `infinite-scroll` animation drives both axes and both directions. The
+   distance is `setSize` measured at runtime, not a hardcoded `-50%`.
+   ─────────────────────────────────────────────────────────────────────────── */
+
+.track {
+  display: flex;
+  width: max-content;
+  will-change: transform;
+  animation-name: infinite-scroll;
+  animation-duration: var(--infinite-scroll-duration, 30s);
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-play-state: var(--infinite-scroll-play-state, running);
+}
+
+.track_vertical {
+  width: 100%;
+  height: max-content;
+  flex-direction: column;
+}
+
+.item {
+  min-width: 0;
+  flex: 0 0 auto;
+
+  > img,
+  > video,
+  > picture {
+    display: block;
+    user-select: none;
+    -webkit-user-drag: none;
+  }
+}
+
+@keyframes infinite-scroll {
+  from {
+    transform: translate3d(
+      var(--infinite-scroll-from-x, 0),
+      var(--infinite-scroll-from-y, 0),
+      0
+    );
+  }
+
+  to {
+    transform: translate3d(
+      var(--infinite-scroll-to-x, 0),
+      var(--infinite-scroll-to-y, 0),
+      0
+    );
+  }
+}
+
+@media (--motion-reduce) {
+  .track {
+    animation: none;
+  }
+}

package/registry/components/primitives/infinite-scroll/infinite-scroll.tsx

@@ -0,0 +1,386 @@
+import {
+  Children,
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ComponentPropsWithoutRef,
+  type Ref,
+  type ReactNode,
+} from "react";
+import clsx from "clsx";
+import { useResizeObserver } from "../../../hooks/useResizeObserver";
+import {
+  InfiniteScrollContext,
+  useInfiniteScroll,
+} from "./infinite-scroll-context";
+import s from "./infinite-scroll.module.css";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export const infiniteScrollOrientations = ["horizontal", "vertical"] as const;
+export type InfiniteScrollOrientation = (typeof infiniteScrollOrientations)[number];
+
+export const infiniteScrollDirections = ["left", "right", "up", "down"] as const;
+export type InfiniteScrollDirection = (typeof infiniteScrollDirections)[number];
+
+export type InfiniteScrollProps = {
+  children: ReactNode;
+  className?: string;
+  viewportClassName?: string;
+  trackClassName?: string;
+  itemClassName?: string;
+  style?: CSSProperties;
+  ref?: Ref<HTMLDivElement>;
+  ariaLabel?: string;
+
+  /** Axis of continuous motion. Direction implies this when omitted. */
+  orientation?: InfiniteScrollOrientation;
+  /** Motion direction. Horizontal: left/right. Vertical: up/down. */
+  direction?: InfiniteScrollDirection;
+  /** Gap between items in px. */
+  gap?: number;
+  /** Alias for gap for API symmetry with Slider. */
+  spaceBetween?: number;
+  /** Seconds for one full content-set loop. Ignored when speed is provided. */
+  duration?: number;
+  /** Pixels per second. Keeps perceived speed stable across content widths. */
+  speed?: number;
+  /** Number of duplicated content sets. "auto" fills short tracks. */
+  copies?: number | "auto";
+  /** Pause motion while hovering. */
+  pauseOnHover?: boolean;
+  /** Pause motion while focus is inside. */
+  pauseOnFocus?: boolean;
+  /** Soft edge fade. */
+  fade?: boolean;
+  /** CSS length/percentage for fade size. */
+  fadeSize?: string;
+  /** Start paused. */
+  paused?: boolean;
+  /** Render controls or status UI inside the provider without making them scroll items. */
+  renderControls?: () => ReactNode;
+} & Omit<ComponentPropsWithoutRef<"div">, "children" | "style">;
+
+const directionToOrientation = (
+  direction: InfiniteScrollDirection,
+): InfiniteScrollOrientation =>
+  direction === "up" || direction === "down" ? "vertical" : "horizontal";
+
+// ─── InfiniteScroll ───────────────────────────────────────────────────────────
+
+export const InfiniteScroll = ({
+  children,
+  className,
+  viewportClassName,
+  trackClassName,
+  itemClassName,
+  style,
+  ref,
+  ariaLabel = "Infinite scrolling content",
+  orientation: orientationProp,
+  direction = "left",
+  gap,
+  spaceBetween,
+  duration = 30,
+  speed,
+  copies = "auto",
+  pauseOnHover = true,
+  pauseOnFocus = true,
+  fade = false,
+  fadeSize = "10%",
+  paused = false,
+  renderControls,
+  onMouseEnter,
+  onMouseLeave,
+  onFocus,
+  onBlur,
+  ...rest
+}: InfiniteScrollProps) => {
+    const items = useMemo(
+      () =>
+        Children.toArray(children).filter(
+          (child) => child !== null && child !== undefined,
+        ),
+      [children],
+    );
+    const count = items.length;
+    const orientation = orientationProp ?? directionToOrientation(direction);
+    const isVertical = orientation === "vertical";
+    const gapValue = spaceBetween ?? gap ?? 0;
+    const resolvedGap = Number.isFinite(gapValue) ? Math.max(0, gapValue) : 0;
+
+    const viewportRef = useRef<HTMLDivElement>(null);
+    const trackRef = useRef<HTMLDivElement>(null);
+    const itemRefs = useRef<Array<HTMLDivElement | null>>([]);
+    const [setSize, setSetSize] = useState(0);
+    const [autoCopies, setAutoCopies] = useState(2);
+    const [isHovering, setIsHovering] = useState(false);
+    const [isFocusWithin, setIsFocusWithin] = useState(false);
+    const [isManuallyPaused, setIsManuallyPaused] = useState(false);
+
+    const copyCount =
+      copies === "auto"
+        ? autoCopies
+        : Number.isFinite(copies)
+          ? Math.max(2, Math.floor(copies))
+          : 2;
+
+    // ─── Measurement ──────────────────────────────────────────────────────────
+    // We measure the position of the first cloned item (index `count`) instead
+    // of dividing track size by copyCount; that captures the trailing gap
+    // exactly and keeps the loop seam invisible at subpixel widths.
+
+    const measure = useCallback(() => {
+      const viewport = viewportRef.current;
+      const track = trackRef.current;
+      if (count === 0) {
+        setSetSize(0);
+        return;
+      }
+      if (!viewport || !track) return;
+
+      const viewportSize = isVertical ? viewport.clientHeight : viewport.clientWidth;
+      const firstClone = itemRefs.current[count];
+      const measuredSetSize = firstClone
+        ? isVertical
+          ? firstClone.offsetTop
+          : firstClone.offsetLeft
+        : (isVertical ? track.scrollHeight : track.scrollWidth) /
+          Math.max(1, copyCount);
+
+      setSetSize(measuredSetSize);
+
+      // `copies="auto"` keeps duplicating until the track covers the viewport
+      // plus a buffer, so we never see an empty gap at any width.
+      if (copies === "auto" && measuredSetSize > 0) {
+        setAutoCopies(Math.max(2, Math.ceil(viewportSize / measuredSetSize) + 2));
+      }
+    }, [copies, copyCount, count, isVertical]);
+
+    useLayoutEffect(() => {
+      measure();
+    }, [measure]);
+    useResizeObserver(viewportRef, measure);
+    useResizeObserver(trackRef, measure);
+
+    useLayoutEffect(() => {
+      itemRefs.current.length = count * copyCount;
+    }, [copyCount, count]);
+
+    // ─── Animation state ──────────────────────────────────────────────────────
+
+    const shouldPause =
+      paused ||
+      isManuallyPaused ||
+      (pauseOnHover && isHovering) ||
+      (pauseOnFocus && isFocusWithin) ||
+      count <= 1 ||
+      setSize <= 0;
+
+    const isReverse = direction === "right" || direction === "down";
+    const from = isReverse ? -setSize : 0;
+    const to = isReverse ? 0 : -setSize;
+    const durationValue = Number.isFinite(duration) ? duration : 30;
+    const speedValue =
+      typeof speed === "number" && Number.isFinite(speed) ? speed : undefined;
+    // `speed` (px/s) wins over `duration` because perceived speed should stay
+    // constant as content (and thus setSize) changes.
+    const resolvedDuration =
+      speedValue && speedValue > 0 && setSize > 0
+        ? setSize / speedValue
+        : Math.max(0.1, durationValue);
+    const trackStyle = {
+      gap: `${resolvedGap}px`,
+      ["--infinite-scroll-duration" as string]: `${resolvedDuration}s`,
+      ["--infinite-scroll-play-state" as string]: shouldPause
+        ? "paused"
+        : "running",
+      ["--infinite-scroll-from-x" as string]: isVertical ? "0px" : `${from}px`,
+      ["--infinite-scroll-from-y" as string]: isVertical ? `${from}px` : "0px",
+      ["--infinite-scroll-to-x" as string]: isVertical ? "0px" : `${to}px`,
+      ["--infinite-scroll-to-y" as string]: isVertical ? `${to}px` : "0px",
+    } satisfies CSSProperties;
+
+    const api = useMemo(
+      () => ({
+        orientation,
+        direction,
+        itemCount: count,
+        copyCount,
+        setSize,
+        duration: resolvedDuration,
+        isMeasured: count === 0 || setSize > 0,
+        isPaused: shouldPause,
+        isManuallyPaused,
+        isHovering,
+        isFocusWithin,
+        pause: () => setIsManuallyPaused(true),
+        resume: () => setIsManuallyPaused(false),
+        toggle: () => setIsManuallyPaused((value) => !value),
+        measure,
+      }),
+      [
+        copyCount,
+        count,
+        direction,
+        isFocusWithin,
+        isHovering,
+        isManuallyPaused,
+        measure,
+        orientation,
+        resolvedDuration,
+        setSize,
+        shouldPause,
+      ],
+    );
+
+    return (
+      <InfiniteScrollContext.Provider value={api}>
+        <div
+          ref={ref}
+          className={clsx(s.root, className)}
+          style={{
+            ...style,
+            ["--infinite-scroll-fade-size" as string]: fadeSize,
+          }}
+          role="region"
+          aria-label={ariaLabel}
+          onMouseEnter={(event) => {
+            onMouseEnter?.(event);
+            setIsHovering(true);
+          }}
+          onMouseLeave={(event) => {
+            onMouseLeave?.(event);
+            setIsHovering(false);
+          }}
+          onFocus={(event) => {
+            onFocus?.(event);
+            setIsFocusWithin(true);
+          }}
+          onBlur={(event) => {
+            onBlur?.(event);
+            if (!event.currentTarget.contains(event.relatedTarget)) {
+              setIsFocusWithin(false);
+            }
+          }}
+          {...rest}
+        >
+          <div
+            ref={viewportRef}
+            className={clsx(
+              s.viewport,
+              isVertical && s.viewport_vertical,
+              fade && (isVertical ? s.fade_y : s.fade_x),
+              viewportClassName,
+            )}
+            style={{ visibility: count === 0 || setSize > 0 ? undefined : "hidden" }}
+            onDragStart={(event) => event.preventDefault()}
+          >
+            <div
+              ref={trackRef}
+              className={clsx(s.track, isVertical && s.track_vertical, trackClassName)}
+              style={trackStyle}
+            >
+              {Array.from({ length: copyCount }).flatMap((_, copyIndex) =>
+                items.map((item, itemIndex) => {
+                  const renderedIndex = copyIndex * count + itemIndex;
+                  return (
+                    <div
+                      key={`${itemIndex}-${copyIndex}`}
+                      ref={(node) => {
+                        itemRefs.current[renderedIndex] = node;
+                      }}
+                      className={clsx(s.item, itemClassName)}
+                      aria-hidden={copyIndex > 0 || undefined}
+                      data-clone={copyIndex > 0 ? "true" : undefined}
+                    >
+                      {item}
+                    </div>
+                  );
+                }),
+              )}
+            </div>
+          </div>
+          {renderControls?.()}
+        </div>
+      </InfiniteScrollContext.Provider>
+    );
+  };
+
+// ─── Control sub-components ───────────────────────────────────────────────────
+// Use these to wire pause/resume/toggle controls anywhere inside the provider.
+// For arbitrary status UI, read `useInfiniteScroll()` directly.
+
+type InfiniteScrollControlProps = {
+  className?: string;
+  children?: ReactNode;
+  ariaLabel?: string;
+} & Omit<ComponentPropsWithoutRef<"button">, "children" | "onClick">;
+
+export const InfiniteScrollPause = ({
+  className,
+  children = "Pause",
+  ariaLabel = "Pause infinite scroll",
+  ...rest
+}: InfiniteScrollControlProps) => {
+  const { pause, isPaused } = useInfiniteScroll();
+  return (
+    <button
+      type="button"
+      className={className}
+      {...rest}
+      onClick={pause}
+      disabled={isPaused}
+      aria-label={ariaLabel}
+    >
+      {children}
+    </button>
+  );
+};
+
+export const InfiniteScrollResume = ({
+  className,
+  children = "Resume",
+  ariaLabel = "Resume infinite scroll",
+  ...rest
+}: InfiniteScrollControlProps) => {
+  const { resume, isPaused } = useInfiniteScroll();
+  return (
+    <button
+      type="button"
+      className={className}
+      {...rest}
+      onClick={resume}
+      disabled={!isPaused}
+      aria-label={ariaLabel}
+    >
+      {children}
+    </button>
+  );
+};
+
+export const InfiniteScrollToggle = ({
+  className,
+  children,
+  ariaLabel,
+  ...rest
+}: InfiniteScrollControlProps) => {
+  const { toggle, isPaused } = useInfiniteScroll();
+  return (
+    <button
+      type="button"
+      className={className}
+      {...rest}
+      onClick={toggle}
+      aria-pressed={isPaused}
+      aria-label={ariaLabel ?? (isPaused ? "Resume infinite scroll" : "Pause infinite scroll")}
+    >
+      {children ?? (isPaused ? "Resume" : "Pause")}
+    </button>
+  );
+};
+
+export { useInfiniteScroll };