pasito 0.1.0

package/dist/react.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/react.mjs

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

package/dist/types-C_ERj5iI.d.mts

@@ -0,0 +1,44 @@
+interface PillStepperProps {
+    /** Total number of steps */
+    count: number;
+    /** Zero-based active step index */
+    active: number;
+    /** Optional click handler */
+    onStepClick?: (index: number) => void;
+    /** Layout direction */
+    orientation?: "horizontal" | "vertical";
+    /** Max visible steps (enables windowing) */
+    maxVisible?: number;
+    /** Transition duration in ms */
+    transitionDuration?: number;
+    /** CSS transition timing function */
+    easing?: string;
+    /** Additional CSS class for overrides */
+    className?: string;
+    /** Whether the active step is filling (autoplay mode) */
+    filling?: boolean;
+    /** Duration of the fill animation in ms */
+    fillDuration?: number;
+}
+interface AnimatingStep {
+    key: number;
+    index: number;
+    phase: "entering" | "stable" | "exiting";
+}
+interface UseAutoPlayOptions {
+    count: number;
+    active: number;
+    onStepChange: (index: number) => void;
+    stepDuration?: number;
+    loop?: boolean;
+    /** When false, stops playback and resets playing state */
+    enabled?: boolean;
+}
+interface UseAutoPlayReturn {
+    playing: boolean;
+    toggle: () => void;
+    filling: boolean;
+    fillDuration: number;
+}
+
+export type { AnimatingStep as A, PillStepperProps as P, UseAutoPlayOptions as U, UseAutoPlayReturn as a };

package/dist/types-C_ERj5iI.d.ts

@@ -0,0 +1,44 @@
+interface PillStepperProps {
+    /** Total number of steps */
+    count: number;
+    /** Zero-based active step index */
+    active: number;
+    /** Optional click handler */
+    onStepClick?: (index: number) => void;
+    /** Layout direction */
+    orientation?: "horizontal" | "vertical";
+    /** Max visible steps (enables windowing) */
+    maxVisible?: number;
+    /** Transition duration in ms */
+    transitionDuration?: number;
+    /** CSS transition timing function */
+    easing?: string;
+    /** Additional CSS class for overrides */
+    className?: string;
+    /** Whether the active step is filling (autoplay mode) */
+    filling?: boolean;
+    /** Duration of the fill animation in ms */
+    fillDuration?: number;
+}
+interface AnimatingStep {
+    key: number;
+    index: number;
+    phase: "entering" | "stable" | "exiting";
+}
+interface UseAutoPlayOptions {
+    count: number;
+    active: number;
+    onStepChange: (index: number) => void;
+    stepDuration?: number;
+    loop?: boolean;
+    /** When false, stops playback and resets playing state */
+    enabled?: boolean;
+}
+interface UseAutoPlayReturn {
+    playing: boolean;
+    toggle: () => void;
+    filling: boolean;
+    fillDuration: number;
+}
+
+export type { AnimatingStep as A, PillStepperProps as P, UseAutoPlayOptions as U, UseAutoPlayReturn as a };

package/dist/vue.d.mts

@@ -0,0 +1,100 @@
+import * as vue from 'vue';
+import { PropType, Ref } from 'vue';
+export { A as AnimatingStep, a as UseAutoPlayReturn } from './types-C_ERj5iI.mjs';
+
+declare const PillStepper: vue.DefineComponent<vue.ExtractPropTypes<{
+    count: {
+        type: NumberConstructor;
+        required: true;
+    };
+    active: {
+        type: NumberConstructor;
+        required: true;
+    };
+    orientation: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+    };
+    maxVisible: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    transitionDuration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    easing: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    filling: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fillDuration: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "step-click"[], "step-click", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    count: {
+        type: NumberConstructor;
+        required: true;
+    };
+    active: {
+        type: NumberConstructor;
+        required: true;
+    };
+    orientation: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+    };
+    maxVisible: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    transitionDuration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    easing: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    filling: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fillDuration: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onStep-click"?: ((...args: any[]) => any) | undefined;
+}>, {
+    transitionDuration: number;
+    filling: boolean;
+    fillDuration: number;
+    orientation: "horizontal" | "vertical";
+    maxVisible: number;
+    easing: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+type MaybeRef<T> = T | Ref<T>;
+interface UseAutoPlayOptions {
+    count: Ref<number>;
+    active: Ref<number>;
+    onStepChange: (index: number) => void;
+    stepDuration?: MaybeRef<number>;
+    loop?: MaybeRef<boolean>;
+    enabled?: MaybeRef<boolean>;
+}
+declare function useAutoPlay(options: UseAutoPlayOptions): {
+    playing: vue.ComputedRef<boolean>;
+    toggle: () => void;
+    filling: vue.ComputedRef<boolean>;
+    fillDuration: vue.ComputedRef<number>;
+};
+
+export { PillStepper, type UseAutoPlayOptions, useAutoPlay };

package/dist/vue.d.ts

@@ -0,0 +1,100 @@
+import * as vue from 'vue';
+import { PropType, Ref } from 'vue';
+export { A as AnimatingStep, a as UseAutoPlayReturn } from './types-C_ERj5iI.js';
+
+declare const PillStepper: vue.DefineComponent<vue.ExtractPropTypes<{
+    count: {
+        type: NumberConstructor;
+        required: true;
+    };
+    active: {
+        type: NumberConstructor;
+        required: true;
+    };
+    orientation: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+    };
+    maxVisible: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    transitionDuration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    easing: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    filling: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fillDuration: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "step-click"[], "step-click", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    count: {
+        type: NumberConstructor;
+        required: true;
+    };
+    active: {
+        type: NumberConstructor;
+        required: true;
+    };
+    orientation: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+    };
+    maxVisible: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    transitionDuration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    easing: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    filling: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fillDuration: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onStep-click"?: ((...args: any[]) => any) | undefined;
+}>, {
+    transitionDuration: number;
+    filling: boolean;
+    fillDuration: number;
+    orientation: "horizontal" | "vertical";
+    maxVisible: number;
+    easing: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+type MaybeRef<T> = T | Ref<T>;
+interface UseAutoPlayOptions {
+    count: Ref<number>;
+    active: Ref<number>;
+    onStepChange: (index: number) => void;
+    stepDuration?: MaybeRef<number>;
+    loop?: MaybeRef<boolean>;
+    enabled?: MaybeRef<boolean>;
+}
+declare function useAutoPlay(options: UseAutoPlayOptions): {
+    playing: vue.ComputedRef<boolean>;
+    toggle: () => void;
+    filling: vue.ComputedRef<boolean>;
+    fillDuration: vue.ComputedRef<number>;
+};
+
+export { PillStepper, type UseAutoPlayOptions, useAutoPlay };