pasito 0.1.0

package/dist/index.js

@@ -0,0 +1,342 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react/index.ts
+var react_exports = {};
+__export(react_exports, {
+  PillStepper: () => PillStepper,
+  useAutoPlay: () => useAutoPlay
+});
+module.exports = __toCommonJS(react_exports);
+
+// src/react/hooks/useStepWindow.ts
+var import_react = require("react");
+
+// src/core/computeStepWindow.ts
+var DOT_SIZE = 8;
+var ACTIVE_WIDTH = 24;
+var GAP = 6;
+var SLOT_SIZE = DOT_SIZE + GAP;
+function computeStepWindow(count, active, maxVisible, orientation) {
+  if (maxVisible == null || count <= maxVisible) {
+    return {
+      windowStart: 0,
+      transformValue: "none",
+      containerSize: void 0
+    };
+  }
+  const half = Math.floor(maxVisible / 2);
+  const windowStart = Math.max(0, Math.min(active - half, count - maxVisible));
+  const offset = windowStart * SLOT_SIZE;
+  const axis = orientation === "vertical" ? "Y" : "X";
+  const transformValue = `translate${axis}(-${offset}px)`;
+  const size = (maxVisible - 1) * DOT_SIZE + ACTIVE_WIDTH + (maxVisible - 1) * GAP;
+  return { windowStart, transformValue, containerSize: size };
+}
+
+// src/react/hooks/useStepWindow.ts
+function useStepWindow(count, active, maxVisible, orientation) {
+  return (0, import_react.useMemo)(
+    () => computeStepWindow(count, active, maxVisible, orientation),
+    [count, active, maxVisible, orientation]
+  );
+}
+
+// src/react/hooks/useAnimatingSteps.ts
+var import_react2 = require("react");
+
+// src/core/StepAnimator.ts
+var StepAnimator = class {
+  constructor(count) {
+    this.keyGen = count;
+    this.steps = Array.from({ length: count }, (_, i) => ({
+      key: i,
+      index: i,
+      phase: "stable"
+    }));
+  }
+  reconcile(newCount) {
+    const liveCount = this.steps.filter((s) => s.phase !== "exiting").length;
+    if (liveCount === newCount) {
+      return {
+        hasEntering: this.steps.some((s) => s.phase === "entering"),
+        exitingCount: this.steps.filter((s) => s.phase === "exiting").length
+      };
+    }
+    if (newCount < liveCount) {
+      let seen = 0;
+      this.steps = this.steps.map((s) => {
+        if (s.phase === "exiting") return s;
+        seen++;
+        if (seen > newCount) return { ...s, phase: "exiting" };
+        return s;
+      });
+    }
+    if (newCount > liveCount) {
+      for (let i = liveCount; i < newCount; i++) {
+        this.keyGen++;
+        this.steps.push({
+          key: this.keyGen,
+          index: i,
+          phase: "entering"
+        });
+      }
+    }
+    let idx = 0;
+    this.steps = this.steps.map(
+      (s) => s.phase === "exiting" ? s : { ...s, index: idx++ }
+    );
+    return {
+      hasEntering: this.steps.some((s) => s.phase === "entering"),
+      exitingCount: this.steps.filter((s) => s.phase === "exiting").length
+    };
+  }
+  promoteEntering() {
+    this.steps = this.steps.map(
+      (s) => s.phase === "entering" ? { ...s, phase: "stable" } : s
+    );
+  }
+  removeExiting() {
+    this.steps = this.steps.filter((s) => s.phase !== "exiting");
+  }
+  getSteps() {
+    return [...this.steps];
+  }
+};
+
+// src/react/hooks/useAnimatingSteps.ts
+function useAnimatingSteps(count, _duration) {
+  const animatorRef = (0, import_react2.useRef)(null);
+  if (animatorRef.current === null) {
+    animatorRef.current = new StepAnimator(count);
+  }
+  const animator = animatorRef.current;
+  const [steps, setSteps] = (0, import_react2.useState)(() => animator.getSteps());
+  (0, import_react2.useLayoutEffect)(() => {
+    animator.reconcile(count);
+    setSteps(animator.getSteps());
+  }, [count, animator]);
+  const hasEntering = steps.some((s) => s.phase === "entering");
+  (0, import_react2.useEffect)(() => {
+    if (!hasEntering) return;
+    let raf1;
+    let raf2;
+    raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => {
+        animator.promoteEntering();
+        setSteps(animator.getSteps());
+      });
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [hasEntering, animator]);
+  const exitingCount = steps.filter((s) => s.phase === "exiting").length;
+  (0, import_react2.useEffect)(() => {
+    if (exitingCount === 0) return;
+    const timer = setTimeout(() => {
+      animator.removeExiting();
+      setSteps(animator.getSteps());
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [exitingCount, animator]);
+  return steps;
+}
+
+// src/react/PillStep.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function PillStep({
+  index,
+  isActive,
+  phase,
+  transitionDuration,
+  filling,
+  fillDuration,
+  onClick
+}) {
+  const classNames = [
+    "pasito-step",
+    isActive && "pasito-step-active",
+    isActive && filling && "pasito-step-filling",
+    phase === "entering" && "pasito-entering",
+    phase === "exiting" && "pasito-exiting"
+  ].filter(Boolean).join(" ");
+  const style = {
+    "--pill-duration": `${transitionDuration}ms`
+  };
+  if (isActive && filling && fillDuration) {
+    style["--pill-fill-duration"] = `${fillDuration}ms`;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      className: classNames,
+      style,
+      onClick,
+      role: "tab",
+      "aria-selected": isActive,
+      "aria-label": `Step ${index + 1}`,
+      tabIndex: isActive ? 0 : -1
+    }
+  );
+}
+
+// src/react/PillStepper.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function PillStepper({
+  count,
+  active,
+  onStepClick,
+  orientation = "horizontal",
+  maxVisible,
+  transitionDuration = 500,
+  easing,
+  className,
+  filling,
+  fillDuration
+}) {
+  const { transformValue, containerSize } = useStepWindow(
+    count,
+    active,
+    maxVisible,
+    orientation
+  );
+  const animatingSteps = useAnimatingSteps(count, transitionDuration);
+  const containerClass = [
+    "pasito-container",
+    orientation === "vertical" && "pasito-vertical",
+    className
+  ].filter(Boolean).join(" ");
+  const sizeStyle = {};
+  if (containerSize != null) {
+    if (orientation === "vertical") {
+      sizeStyle.height = containerSize;
+    } else {
+      sizeStyle.width = containerSize;
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: containerClass,
+      role: "tablist",
+      "aria-label": "Progress steps",
+      style: {
+        "--pill-duration": `${transitionDuration}ms`,
+        ...easing && { "--pill-easing": easing },
+        ...sizeStyle
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "div",
+        {
+          className: "pasito-track",
+          style: { transform: transformValue },
+          children: animatingSteps.map((step) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            PillStep,
+            {
+              index: step.index,
+              isActive: step.index === active,
+              phase: step.phase,
+              transitionDuration,
+              filling: step.index === active && filling,
+              fillDuration,
+              onClick: onStepClick ? () => onStepClick(step.index) : void 0
+            },
+            step.key
+          ))
+        }
+      )
+    }
+  );
+}
+
+// src/react/hooks/useAutoPlay.ts
+var import_react3 = require("react");
+
+// src/core/AutoPlayController.ts
+var AutoPlayController = class {
+  constructor({ stepDuration = 3e3, loop = true } = {}) {
+    this.stepDuration = stepDuration;
+    this.loop = loop;
+  }
+  computeNext(active, count) {
+    return active < count - 1 ? active + 1 : this.loop ? 0 : null;
+  }
+};
+
+// src/react/hooks/useAutoPlay.ts
+function useAutoPlay({
+  count,
+  active,
+  onStepChange,
+  stepDuration = 3e3,
+  loop = true,
+  enabled = true
+}) {
+  const [playing, setPlaying] = (0, import_react3.useState)(false);
+  const timerRef = (0, import_react3.useRef)(null);
+  const controllerRef = (0, import_react3.useRef)(null);
+  if (!controllerRef.current) {
+    controllerRef.current = new AutoPlayController({ stepDuration, loop });
+  }
+  controllerRef.current.stepDuration = stepDuration;
+  controllerRef.current.loop = loop;
+  const clearTimer = (0, import_react3.useCallback)(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+  const toggle = (0, import_react3.useCallback)(() => setPlaying((p) => !p), []);
+  (0, import_react3.useEffect)(() => {
+    if (!enabled) {
+      setPlaying(false);
+      clearTimer();
+    }
+  }, [enabled, clearTimer]);
+  (0, import_react3.useEffect)(() => {
+    if (!playing || !enabled) {
+      clearTimer();
+      return;
+    }
+    timerRef.current = setTimeout(() => {
+      const nextStep = controllerRef.current.computeNext(active, count);
+      if (nextStep !== null) {
+        onStepChange(nextStep);
+      } else {
+        setPlaying(false);
+      }
+    }, stepDuration);
+    return clearTimer;
+  }, [playing, enabled, active, count, stepDuration, loop, onStepChange, clearTimer]);
+  const isActive = playing && enabled;
+  return {
+    playing: isActive,
+    toggle,
+    filling: isActive,
+    fillDuration: stepDuration
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PillStepper,
+  useAutoPlay
+});

package/dist/index.mjs

@@ -0,0 +1,10 @@
+"use client";
+import {
+  PillStepper,
+  useAutoPlay
+} from "./chunk-HAF3VK2R.mjs";
+import "./chunk-4JH2WF3D.mjs";
+export {
+  PillStepper,
+  useAutoPlay
+};

package/dist/react.css

@@ -0,0 +1,125 @@
+/* src/styles/PillStepper.css */
+.pasito-container {
+  --pill-dot-size: 8px;
+  --pill-active-width: 24px;
+  --pill-gap: 6px;
+  --pill-duration: 500ms;
+  --pill-easing: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --pill-bg: rgba(0, 0, 0, 0.12);
+  --pill-active-bg: rgba(0, 0, 0, 0.8);
+  --pill-fill-bg: rgba(255, 255, 255, 0.45);
+  --pill-container-bg: rgba(0, 0, 0, 0.04);
+  --pill-container-radius: 999px;
+  --pill-container-border: rgba(0, 0, 0, 0.06);
+  display: inline-flex;
+  padding: 6px 10px;
+  background: var(--pill-container-bg);
+  border-radius: var(--pill-container-radius);
+  border: 1px solid var(--pill-container-border);
+  overflow: hidden;
+}
+.pasito-track {
+  display: flex;
+  align-items: center;
+  margin-left: calc(-1 * var(--pill-gap));
+  transition: transform var(--pill-duration) var(--pill-easing);
+}
+.pasito-vertical .pasito-track {
+  flex-direction: column;
+  margin-left: 0;
+  margin-top: calc(-1 * var(--pill-gap));
+}
+.pasito-step {
+  position: relative;
+  width: var(--pill-dot-size);
+  height: var(--pill-dot-size);
+  border-radius: 999px;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  background: var(--pill-bg);
+  flex-shrink: 0;
+  overflow: hidden;
+  margin-left: var(--pill-gap);
+  margin-top: 0;
+  transform-origin: center center;
+  transition:
+    width var(--pill-duration) var(--pill-easing),
+    height var(--pill-duration) var(--pill-easing),
+    background var(--pill-duration) var(--pill-easing),
+    opacity var(--pill-duration) var(--pill-easing),
+    transform var(--pill-duration) var(--pill-easing),
+    margin-left var(--pill-duration) var(--pill-easing),
+    margin-top var(--pill-duration) var(--pill-easing);
+}
+.pasito-vertical .pasito-step {
+  margin-left: 0;
+  margin-top: var(--pill-gap);
+}
+.pasito-step:focus-visible {
+  outline: 2px solid rgba(0, 0, 0, 0.3);
+  outline-offset: 2px;
+}
+.pasito-step-active {
+  width: var(--pill-active-width);
+  background: var(--pill-active-bg);
+}
+.pasito-vertical .pasito-step-active {
+  width: var(--pill-dot-size);
+  height: var(--pill-active-width);
+}
+.pasito-step::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: var(--pill-fill-bg);
+  transform: scaleX(0);
+  transform-origin: left center;
+  pointer-events: none;
+}
+.pasito-vertical .pasito-step::after {
+  transform: scaleY(0);
+  transform-origin: center top;
+}
+.pasito-step-filling::after {
+  transform: scaleX(1);
+  transition: transform var(--pill-fill-duration, 3000ms) linear;
+}
+.pasito-vertical .pasito-step-filling::after {
+  transform: scaleY(1);
+  transition: transform var(--pill-fill-duration, 3000ms) linear;
+}
+.pasito-entering {
+  width: 0;
+  margin-left: 0;
+  margin-top: 0;
+  opacity: 0;
+  transform: scale(0);
+  transition-duration: 250ms;
+}
+.pasito-vertical .pasito-entering {
+  width: var(--pill-dot-size);
+  height: 0;
+}
+.pasito-exiting {
+  width: 0;
+  margin-left: 0;
+  margin-top: 0;
+  opacity: 0;
+  transform: scale(0);
+  transition-duration: 250ms;
+}
+.pasito-vertical .pasito-exiting {
+  width: var(--pill-dot-size);
+  height: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .pasito-step,
+  .pasito-track {
+    transition-duration: 0ms !important;
+  }
+  .pasito-step-filling::after {
+    transition-duration: 0ms !important;
+  }
+}

package/dist/react.d.mts

@@ -0,0 +1,2 @@
+export { PillStepper, useAutoPlay } from './index.mjs';
+export { P as PillStepperProps, U as UseAutoPlayOptions, a as UseAutoPlayReturn } from './types-C_ERj5iI.mjs';

package/dist/react.d.ts

@@ -0,0 +1,2 @@
+export { PillStepper, useAutoPlay } from './index.js';
+export { P as PillStepperProps, U as UseAutoPlayOptions, a as UseAutoPlayReturn } from './types-C_ERj5iI.js';