pasito 0.1.0

package/dist/vue.js

@@ -0,0 +1,351 @@
+"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/vue/index.ts
+var vue_exports = {};
+__export(vue_exports, {
+  PillStepper: () => PillStepper,
+  useAutoPlay: () => useAutoPlay
+});
+module.exports = __toCommonJS(vue_exports);
+
+// src/vue/PillStepper.ts
+var import_vue4 = require("vue");
+
+// src/vue/composables/useStepWindow.ts
+var import_vue = require("vue");
+
+// 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/vue/composables/useStepWindow.ts
+function useStepWindow(props) {
+  return (0, import_vue.computed)(
+    () => computeStepWindow(
+      props.count.value,
+      props.active.value,
+      props.maxVisible.value,
+      props.orientation.value
+    )
+  );
+}
+
+// src/vue/composables/useAnimatingSteps.ts
+var import_vue2 = require("vue");
+
+// 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/vue/composables/useAnimatingSteps.ts
+function useAnimatingSteps(count, _duration) {
+  const animator = new StepAnimator(count.value);
+  const steps = (0, import_vue2.ref)(animator.getSteps());
+  (0, import_vue2.watch)(count, (newCount) => {
+    animator.reconcile(newCount);
+    steps.value = animator.getSteps();
+  });
+  const hasEntering = (0, import_vue2.computed)(() => steps.value.some((s) => s.phase === "entering"));
+  (0, import_vue2.watch)(hasEntering, (val, _, onCleanup) => {
+    if (!val) return;
+    let raf1;
+    let raf2;
+    raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => {
+        animator.promoteEntering();
+        steps.value = animator.getSteps();
+      });
+    });
+    onCleanup(() => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    });
+  });
+  const exitingCount = (0, import_vue2.computed)(
+    () => steps.value.filter((s) => s.phase === "exiting").length
+  );
+  (0, import_vue2.watch)(exitingCount, (val, _, onCleanup) => {
+    if (val === 0) return;
+    const timer = setTimeout(() => {
+      animator.removeExiting();
+      steps.value = animator.getSteps();
+    }, 300);
+    onCleanup(() => clearTimeout(timer));
+  });
+  return steps;
+}
+
+// src/vue/PillStep.ts
+var import_vue3 = require("vue");
+var PillStep = (0, import_vue3.defineComponent)({
+  name: "PillStep",
+  props: {
+    index: { type: Number, required: true },
+    isActive: { type: Boolean, required: true },
+    phase: {
+      type: String,
+      required: true
+    },
+    transitionDuration: { type: Number, required: true },
+    filling: { type: Boolean, default: false },
+    fillDuration: { type: Number, default: void 0 }
+  },
+  emits: ["click"],
+  setup(props, { emit }) {
+    return () => {
+      const classNames = [
+        "pasito-step",
+        props.isActive && "pasito-step-active",
+        props.isActive && props.filling && "pasito-step-filling",
+        props.phase === "entering" && "pasito-entering",
+        props.phase === "exiting" && "pasito-exiting"
+      ].filter(Boolean).join(" ");
+      const style = {
+        "--pill-duration": `${props.transitionDuration}ms`
+      };
+      if (props.isActive && props.filling && props.fillDuration) {
+        style["--pill-fill-duration"] = `${props.fillDuration}ms`;
+      }
+      return (0, import_vue3.h)("button", {
+        class: classNames,
+        style,
+        onClick: () => emit("click"),
+        role: "tab",
+        "aria-selected": props.isActive,
+        "aria-label": `Step ${props.index + 1}`,
+        tabindex: props.isActive ? 0 : -1
+      });
+    };
+  }
+});
+
+// src/vue/PillStepper.ts
+var PillStepper = (0, import_vue4.defineComponent)({
+  name: "PillStepper",
+  props: {
+    count: { type: Number, required: true },
+    active: { type: Number, required: true },
+    orientation: {
+      type: String,
+      default: "horizontal"
+    },
+    maxVisible: { type: Number, default: void 0 },
+    transitionDuration: { type: Number, default: 500 },
+    easing: { type: String, default: void 0 },
+    filling: { type: Boolean, default: false },
+    fillDuration: { type: Number, default: void 0 }
+  },
+  emits: ["step-click"],
+  setup(props, { emit }) {
+    const stepWindow = useStepWindow({
+      count: (0, import_vue4.toRef)(props, "count"),
+      active: (0, import_vue4.toRef)(props, "active"),
+      maxVisible: (0, import_vue4.toRef)(props, "maxVisible"),
+      orientation: (0, import_vue4.toRef)(props, "orientation")
+    });
+    const steps = useAnimatingSteps(
+      (0, import_vue4.toRef)(props, "count"),
+      (0, import_vue4.toRef)(props, "transitionDuration")
+    );
+    const containerClass = (0, import_vue4.computed)(
+      () => [
+        "pasito-container",
+        props.orientation === "vertical" && "pasito-vertical"
+      ].filter(Boolean).join(" ")
+    );
+    return () => {
+      const { containerSize, transformValue } = stepWindow.value;
+      const sizeStyle = {};
+      if (containerSize != null) {
+        if (props.orientation === "vertical") {
+          sizeStyle.height = `${containerSize}px`;
+        } else {
+          sizeStyle.width = `${containerSize}px`;
+        }
+      }
+      return (0, import_vue4.h)(
+        "div",
+        {
+          class: containerClass.value,
+          role: "tablist",
+          "aria-label": "Progress steps",
+          style: {
+            "--pill-duration": `${props.transitionDuration}ms`,
+            ...props.easing && { "--pill-easing": props.easing },
+            ...sizeStyle
+          }
+        },
+        [
+          (0, import_vue4.h)(
+            "div",
+            {
+              class: "pasito-track",
+              style: { transform: transformValue }
+            },
+            steps.value.map(
+              (step) => (0, import_vue4.h)(PillStep, {
+                key: step.key,
+                index: step.index,
+                isActive: step.index === props.active,
+                phase: step.phase,
+                transitionDuration: props.transitionDuration,
+                filling: step.index === props.active && props.filling,
+                fillDuration: props.fillDuration,
+                onClick: () => emit("step-click", step.index)
+              })
+            )
+          )
+        ]
+      );
+    };
+  }
+});
+
+// src/vue/composables/useAutoPlay.ts
+var import_vue5 = require("vue");
+
+// 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/vue/composables/useAutoPlay.ts
+function useAutoPlay(options) {
+  const playing = (0, import_vue5.ref)(false);
+  const controller = new AutoPlayController();
+  const stepDuration = (0, import_vue5.computed)(() => (0, import_vue5.unref)(options.stepDuration) ?? 3e3);
+  const loop = (0, import_vue5.computed)(() => (0, import_vue5.unref)(options.loop) ?? true);
+  const enabled = (0, import_vue5.computed)(() => (0, import_vue5.unref)(options.enabled) ?? true);
+  (0, import_vue5.watch)(enabled, (val) => {
+    if (!val) playing.value = false;
+  });
+  (0, import_vue5.watch)(
+    [playing, enabled, options.active, options.count, stepDuration, loop],
+    ([isPlaying, isEnabled, active, count, dur, lp], _, onCleanup) => {
+      if (!isPlaying || !isEnabled) return;
+      controller.stepDuration = dur;
+      controller.loop = lp;
+      const timer = setTimeout(() => {
+        const next = controller.computeNext(active, count);
+        if (next !== null) {
+          options.onStepChange(next);
+        } else {
+          playing.value = false;
+        }
+      }, dur);
+      onCleanup(() => clearTimeout(timer));
+    },
+    { immediate: true }
+  );
+  const isActive = (0, import_vue5.computed)(() => playing.value && enabled.value);
+  return {
+    playing: (0, import_vue5.computed)(() => isActive.value),
+    toggle: () => {
+      playing.value = !playing.value;
+    },
+    filling: (0, import_vue5.computed)(() => isActive.value),
+    fillDuration: stepDuration
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PillStepper,
+  useAutoPlay
+});

package/dist/vue.mjs

@@ -0,0 +1,231 @@
+"use client";
+import {
+  AutoPlayController,
+  StepAnimator,
+  computeStepWindow
+} from "./chunk-4JH2WF3D.mjs";
+
+// src/vue/PillStepper.ts
+import { defineComponent as defineComponent2, toRef, computed as computed3, h as h2 } from "vue";
+
+// src/vue/composables/useStepWindow.ts
+import { computed } from "vue";
+function useStepWindow(props) {
+  return computed(
+    () => computeStepWindow(
+      props.count.value,
+      props.active.value,
+      props.maxVisible.value,
+      props.orientation.value
+    )
+  );
+}
+
+// src/vue/composables/useAnimatingSteps.ts
+import { ref, watch, computed as computed2 } from "vue";
+function useAnimatingSteps(count, _duration) {
+  const animator = new StepAnimator(count.value);
+  const steps = ref(animator.getSteps());
+  watch(count, (newCount) => {
+    animator.reconcile(newCount);
+    steps.value = animator.getSteps();
+  });
+  const hasEntering = computed2(() => steps.value.some((s) => s.phase === "entering"));
+  watch(hasEntering, (val, _, onCleanup) => {
+    if (!val) return;
+    let raf1;
+    let raf2;
+    raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => {
+        animator.promoteEntering();
+        steps.value = animator.getSteps();
+      });
+    });
+    onCleanup(() => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    });
+  });
+  const exitingCount = computed2(
+    () => steps.value.filter((s) => s.phase === "exiting").length
+  );
+  watch(exitingCount, (val, _, onCleanup) => {
+    if (val === 0) return;
+    const timer = setTimeout(() => {
+      animator.removeExiting();
+      steps.value = animator.getSteps();
+    }, 300);
+    onCleanup(() => clearTimeout(timer));
+  });
+  return steps;
+}
+
+// src/vue/PillStep.ts
+import { defineComponent, h } from "vue";
+var PillStep = defineComponent({
+  name: "PillStep",
+  props: {
+    index: { type: Number, required: true },
+    isActive: { type: Boolean, required: true },
+    phase: {
+      type: String,
+      required: true
+    },
+    transitionDuration: { type: Number, required: true },
+    filling: { type: Boolean, default: false },
+    fillDuration: { type: Number, default: void 0 }
+  },
+  emits: ["click"],
+  setup(props, { emit }) {
+    return () => {
+      const classNames = [
+        "pasito-step",
+        props.isActive && "pasito-step-active",
+        props.isActive && props.filling && "pasito-step-filling",
+        props.phase === "entering" && "pasito-entering",
+        props.phase === "exiting" && "pasito-exiting"
+      ].filter(Boolean).join(" ");
+      const style = {
+        "--pill-duration": `${props.transitionDuration}ms`
+      };
+      if (props.isActive && props.filling && props.fillDuration) {
+        style["--pill-fill-duration"] = `${props.fillDuration}ms`;
+      }
+      return h("button", {
+        class: classNames,
+        style,
+        onClick: () => emit("click"),
+        role: "tab",
+        "aria-selected": props.isActive,
+        "aria-label": `Step ${props.index + 1}`,
+        tabindex: props.isActive ? 0 : -1
+      });
+    };
+  }
+});
+
+// src/vue/PillStepper.ts
+var PillStepper = defineComponent2({
+  name: "PillStepper",
+  props: {
+    count: { type: Number, required: true },
+    active: { type: Number, required: true },
+    orientation: {
+      type: String,
+      default: "horizontal"
+    },
+    maxVisible: { type: Number, default: void 0 },
+    transitionDuration: { type: Number, default: 500 },
+    easing: { type: String, default: void 0 },
+    filling: { type: Boolean, default: false },
+    fillDuration: { type: Number, default: void 0 }
+  },
+  emits: ["step-click"],
+  setup(props, { emit }) {
+    const stepWindow = useStepWindow({
+      count: toRef(props, "count"),
+      active: toRef(props, "active"),
+      maxVisible: toRef(props, "maxVisible"),
+      orientation: toRef(props, "orientation")
+    });
+    const steps = useAnimatingSteps(
+      toRef(props, "count"),
+      toRef(props, "transitionDuration")
+    );
+    const containerClass = computed3(
+      () => [
+        "pasito-container",
+        props.orientation === "vertical" && "pasito-vertical"
+      ].filter(Boolean).join(" ")
+    );
+    return () => {
+      const { containerSize, transformValue } = stepWindow.value;
+      const sizeStyle = {};
+      if (containerSize != null) {
+        if (props.orientation === "vertical") {
+          sizeStyle.height = `${containerSize}px`;
+        } else {
+          sizeStyle.width = `${containerSize}px`;
+        }
+      }
+      return h2(
+        "div",
+        {
+          class: containerClass.value,
+          role: "tablist",
+          "aria-label": "Progress steps",
+          style: {
+            "--pill-duration": `${props.transitionDuration}ms`,
+            ...props.easing && { "--pill-easing": props.easing },
+            ...sizeStyle
+          }
+        },
+        [
+          h2(
+            "div",
+            {
+              class: "pasito-track",
+              style: { transform: transformValue }
+            },
+            steps.value.map(
+              (step) => h2(PillStep, {
+                key: step.key,
+                index: step.index,
+                isActive: step.index === props.active,
+                phase: step.phase,
+                transitionDuration: props.transitionDuration,
+                filling: step.index === props.active && props.filling,
+                fillDuration: props.fillDuration,
+                onClick: () => emit("step-click", step.index)
+              })
+            )
+          )
+        ]
+      );
+    };
+  }
+});
+
+// src/vue/composables/useAutoPlay.ts
+import { ref as ref2, computed as computed4, watch as watch2, unref } from "vue";
+function useAutoPlay(options) {
+  const playing = ref2(false);
+  const controller = new AutoPlayController();
+  const stepDuration = computed4(() => unref(options.stepDuration) ?? 3e3);
+  const loop = computed4(() => unref(options.loop) ?? true);
+  const enabled = computed4(() => unref(options.enabled) ?? true);
+  watch2(enabled, (val) => {
+    if (!val) playing.value = false;
+  });
+  watch2(
+    [playing, enabled, options.active, options.count, stepDuration, loop],
+    ([isPlaying, isEnabled, active, count, dur, lp], _, onCleanup) => {
+      if (!isPlaying || !isEnabled) return;
+      controller.stepDuration = dur;
+      controller.loop = lp;
+      const timer = setTimeout(() => {
+        const next = controller.computeNext(active, count);
+        if (next !== null) {
+          options.onStepChange(next);
+        } else {
+          playing.value = false;
+        }
+      }, dur);
+      onCleanup(() => clearTimeout(timer));
+    },
+    { immediate: true }
+  );
+  const isActive = computed4(() => playing.value && enabled.value);
+  return {
+    playing: computed4(() => isActive.value),
+    toggle: () => {
+      playing.value = !playing.value;
+    },
+    filling: computed4(() => isActive.value),
+    fillDuration: stepDuration
+  };
+}
+export {
+  PillStepper,
+  useAutoPlay
+};

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "pasito",
+  "version": "0.1.0",
+  "description": "A dependency-free stepper/progress indicator with pure CSS transitions — React & Vue",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.mjs",
+      "require": "./dist/react.js"
+    },
+    "./vue": {
+      "types": "./dist/vue.d.ts",
+      "import": "./dist/vue.mjs",
+      "require": "./dist/vue.js"
+    },
+    "./styles.css": "./dist/index.css"
+  },
+  "files": ["dist"],
+  "sideEffects": ["*.css"],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "vue": ">=3"
+  },
+  "peerDependenciesMeta": {
+    "react": { "optional": true },
+    "react-dom": { "optional": true },
+    "vue": { "optional": true }
+  },
+  "devDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "vue": "^3.5.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  }
+}