aplance-ui 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aplance-ui",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "The aplance-ui CLI - scaffold the design system and copy components into your project as source.",
   "keywords": [
     "react",

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 };

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

@@ -1,28 +1,23 @@
 
-.container {
-  /* its width can be managed from parent or user component container */
-  /* e.g. using with custom-select: .container can be anything and this will match it */
-  width: fit-content;
-  position: relative;
-  display: flex;
+.container {
+  width: fit-content;
+  position: relative;
+  display: flex;
   align-items: center;
   justify-content: center;
 
   .trigger {
-    width: 100%;
-    min-width: fit-content;
-    display: flex;
-    align-items: center;
-    /* add other styles from props */
-
-    &[data-disabled="true"] {
-      pointer-events: none;
+    width: 100%;
+    min-width: fit-content;
+    display: flex;
+    align-items: center;
+
+    &[data-disabled="true"] {
+      pointer-events: none;
     }
   }
-
-  .menu_wrapper {
-    /* style as needed at usage */
-    min-width: fit-content;
-    /* max-width: 100% !important; can be updated with !important */
-  }
-}
+
+  .menu_wrapper {
+    min-width: fit-content;
+  }
+}

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;
+};