pasito 0.1.1 → 0.1.3

package/README.md

@@ -13,14 +13,14 @@ npm i pasito
 ### Quick Start
 
 ```tsx
-import { PillStepper } from "pasito";        // or "pasito/react"
+import { Stepper } from "pasito";        // or "pasito/react"
 import "pasito/styles.css";
 
 function App() {
   const [active, setActive] = useState(0);
 
   return (
-    <PillStepper
+    <Stepper
       count={5}
       active={active}
       onStepClick={setActive}
@@ -32,7 +32,7 @@ function App() {
 ### Autoplay
 
 ```tsx
-import { PillStepper, useAutoPlay } from "pasito";
+import { Stepper, useAutoPlay } from "pasito";
 
 function App() {
   const [active, setActive] = useState(0);
@@ -46,7 +46,7 @@ function App() {
 
   return (
     <>
-      <PillStepper
+      <Stepper
         count={5}
         active={active}
         filling={filling}
@@ -67,14 +67,14 @@ function App() {
 ```vue
 <script setup>
 import { ref } from "vue";
-import { PillStepper } from "pasito/vue";
+import { Stepper } from "pasito/vue";
 import "pasito/styles.css";
 
 const active = ref(0);
 </script>
 
 <template>
-  <PillStepper
+  <Stepper
     :count="5"
     :active="active"
     @step-click="active = $event"
@@ -87,7 +87,7 @@ const active = ref(0);
 ```vue
 <script setup>
 import { ref } from "vue";
-import { PillStepper, useAutoPlay } from "pasito/vue";
+import { Stepper, useAutoPlay } from "pasito/vue";
 import "pasito/styles.css";
 
 const active = ref(0);
@@ -101,7 +101,7 @@ const { playing, toggle, filling, fillDuration } = useAutoPlay({
 </script>
 
 <template>
-  <PillStepper
+  <Stepper
     :count="5"
     :active="active"
     :filling="filling"
@@ -117,11 +117,11 @@ const { playing, toggle, filling, fillDuration } = useAutoPlay({
 
 ```ts
 // React — default export stays React for backwards compat
-import { PillStepper, useAutoPlay } from "pasito";
-import { PillStepper, useAutoPlay } from "pasito/react";
+import { Stepper, useAutoPlay } from "pasito";
+import { Stepper, useAutoPlay } from "pasito/react";
 
 // Vue
-import { PillStepper, useAutoPlay } from "pasito/vue";
+import { Stepper, useAutoPlay } from "pasito/vue";
 
 // CSS (both frameworks)
 import "pasito/styles.css";
@@ -129,7 +129,7 @@ import "pasito/styles.css";
 
 ## API
 
-### `<PillStepper />`
+### `<Stepper />`
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
@@ -168,7 +168,7 @@ import "pasito/styles.css";
 | `loop` | `boolean \| Ref<boolean>` | `true` | Loop back to first step after last |
 | `enabled` | `boolean \| Ref<boolean>` | `true` | Enable/disable autoplay |
 
-Returns `{ playing, toggle, filling, fillDuration }` — pass `filling` and `fillDuration` directly to `<PillStepper />`.
+Returns `{ playing, toggle, filling, fillDuration }` — pass `filling` and `fillDuration` directly to `<Stepper />`.
 
 ## Theming
 
@@ -176,12 +176,12 @@ Override any CSS custom property via a class:
 
 ```tsx
 // React
-<PillStepper className="my-stepper" ... />
+<Stepper className="my-stepper" ... />
 ```
 
 ```vue
 <!-- Vue -->
-<PillStepper class="my-stepper" ... />
+<Stepper class="my-stepper" ... />
 ```
 
 | Variable | Default | Description |

package/dist/{chunk-HAF3VK2R.mjs → chunk-X5PGKZ7U.mjs}

@@ -55,9 +55,9 @@ function useAnimatingSteps(count, _duration) {
   return steps;
 }
 
-// src/react/PillStep.tsx
+// src/react/Step.tsx
 import { jsx } from "react/jsx-runtime";
-function PillStep({
+function Step({
   index,
   isActive,
   phase,
@@ -93,9 +93,9 @@ function PillStep({
   );
 }
 
-// src/react/PillStepper.tsx
+// src/react/Stepper.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
-function PillStepper({
+function Stepper({
   count,
   active,
   onStepClick,
@@ -144,7 +144,7 @@ function PillStepper({
           className: "pasito-track",
           style: { transform: transformValue },
           children: animatingSteps.map((step) => /* @__PURE__ */ jsx2(
-            PillStep,
+            Step,
             {
               index: step.index,
               isActive: step.index === active,
@@ -218,6 +218,6 @@ function useAutoPlay({
 }
 
 export {
-  PillStepper,
+  Stepper,
   useAutoPlay
 };

package/dist/index.css

@@ -1,4 +1,4 @@
-/* src/styles/PillStepper.css */
+/* src/styles/Stepper.css */
 .pasito-container {
   --pill-dot-size: 8px;
   --pill-active-width: 24px;
@@ -71,24 +71,28 @@
 .pasito-step::after {
   content: "";
   position: absolute;
-  inset: 0;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 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;
+  right: 0;
+  bottom: auto;
+  width: auto;
+  height: 0;
 }
 .pasito-step-filling::after {
-  transform: scaleX(1);
-  transition: transform var(--pill-fill-duration, 3000ms) linear;
+  width: 100%;
+  transition: width var(--pill-fill-duration, 3000ms) linear;
 }
 .pasito-vertical .pasito-step-filling::after {
-  transform: scaleY(1);
-  transition: transform var(--pill-fill-duration, 3000ms) linear;
+  width: auto;
+  height: 100%;
+  transition: height var(--pill-fill-duration, 3000ms) linear;
 }
 .pasito-entering {
   width: 0;

package/dist/index.d.mts

@@ -1,7 +1,7 @@
-import { P as PillStepperProps, U as UseAutoPlayOptions, a as UseAutoPlayReturn } from './types-C_ERj5iI.mjs';
+import { S as StepperProps, U as UseAutoPlayOptions, a as UseAutoPlayReturn } from './types-BFgSD_7j.mjs';
 
-declare function PillStepper({ count, active, onStepClick, orientation, maxVisible, transitionDuration, easing, className, filling, fillDuration, }: PillStepperProps): React.ReactElement;
+declare function Stepper({ count, active, onStepClick, orientation, maxVisible, transitionDuration, easing, className, filling, fillDuration, }: StepperProps): React.ReactElement;
 
 declare function useAutoPlay({ count, active, onStepChange, stepDuration, loop, enabled, }: UseAutoPlayOptions): UseAutoPlayReturn;
 
-export { PillStepper, PillStepperProps, UseAutoPlayOptions, UseAutoPlayReturn, useAutoPlay };
+export { Stepper, StepperProps, UseAutoPlayOptions, UseAutoPlayReturn, useAutoPlay };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
-import { P as PillStepperProps, U as UseAutoPlayOptions, a as UseAutoPlayReturn } from './types-C_ERj5iI.js';
+import { S as StepperProps, U as UseAutoPlayOptions, a as UseAutoPlayReturn } from './types-BFgSD_7j.js';
 
-declare function PillStepper({ count, active, onStepClick, orientation, maxVisible, transitionDuration, easing, className, filling, fillDuration, }: PillStepperProps): React.ReactElement;
+declare function Stepper({ count, active, onStepClick, orientation, maxVisible, transitionDuration, easing, className, filling, fillDuration, }: StepperProps): React.ReactElement;
 
 declare function useAutoPlay({ count, active, onStepChange, stepDuration, loop, enabled, }: UseAutoPlayOptions): UseAutoPlayReturn;
 
-export { PillStepper, PillStepperProps, UseAutoPlayOptions, UseAutoPlayReturn, useAutoPlay };
+export { Stepper, StepperProps, UseAutoPlayOptions, UseAutoPlayReturn, useAutoPlay };

package/dist/index.js

@@ -21,7 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/react/index.ts
 var react_exports = {};
 __export(react_exports, {
-  PillStepper: () => PillStepper,
+  Stepper: () => Stepper,
   useAutoPlay: () => useAutoPlay
 });
 module.exports = __toCommonJS(react_exports);
@@ -161,9 +161,9 @@ function useAnimatingSteps(count, _duration) {
   return steps;
 }
 
-// src/react/PillStep.tsx
+// src/react/Step.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function PillStep({
+function Step({
   index,
   isActive,
   phase,
@@ -199,9 +199,9 @@ function PillStep({
   );
 }
 
-// src/react/PillStepper.tsx
+// src/react/Stepper.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function PillStepper({
+function Stepper({
   count,
   active,
   onStepClick,
@@ -250,7 +250,7 @@ function PillStepper({
           className: "pasito-track",
           style: { transform: transformValue },
           children: animatingSteps.map((step) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            PillStep,
+            Step,
             {
               index: step.index,
               isActive: step.index === active,
@@ -337,6 +337,6 @@ function useAutoPlay({
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  PillStepper,
+  Stepper,
   useAutoPlay
 });

package/dist/index.mjs

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

package/dist/react.css

@@ -1,4 +1,4 @@
-/* src/styles/PillStepper.css */
+/* src/styles/Stepper.css */
 .pasito-container {
   --pill-dot-size: 8px;
   --pill-active-width: 24px;
@@ -71,24 +71,28 @@
 .pasito-step::after {
   content: "";
   position: absolute;
-  inset: 0;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 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;
+  right: 0;
+  bottom: auto;
+  width: auto;
+  height: 0;
 }
 .pasito-step-filling::after {
-  transform: scaleX(1);
-  transition: transform var(--pill-fill-duration, 3000ms) linear;
+  width: 100%;
+  transition: width var(--pill-fill-duration, 3000ms) linear;
 }
 .pasito-vertical .pasito-step-filling::after {
-  transform: scaleY(1);
-  transition: transform var(--pill-fill-duration, 3000ms) linear;
+  width: auto;
+  height: 100%;
+  transition: height var(--pill-fill-duration, 3000ms) linear;
 }
 .pasito-entering {
   width: 0;

package/dist/react.d.mts

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

package/dist/react.d.ts

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

package/dist/react.js

@@ -21,7 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/react/index.ts
 var react_exports = {};
 __export(react_exports, {
-  PillStepper: () => PillStepper,
+  Stepper: () => Stepper,
   useAutoPlay: () => useAutoPlay
 });
 module.exports = __toCommonJS(react_exports);
@@ -161,9 +161,9 @@ function useAnimatingSteps(count, _duration) {
   return steps;
 }
 
-// src/react/PillStep.tsx
+// src/react/Step.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function PillStep({
+function Step({
   index,
   isActive,
   phase,
@@ -199,9 +199,9 @@ function PillStep({
   );
 }
 
-// src/react/PillStepper.tsx
+// src/react/Stepper.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function PillStepper({
+function Stepper({
   count,
   active,
   onStepClick,
@@ -250,7 +250,7 @@ function PillStepper({
           className: "pasito-track",
           style: { transform: transformValue },
           children: animatingSteps.map((step) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            PillStep,
+            Step,
             {
               index: step.index,
               isActive: step.index === active,
@@ -337,6 +337,6 @@ function useAutoPlay({
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  PillStepper,
+  Stepper,
   useAutoPlay
 });

package/dist/react.mjs

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

package/dist/{types-C_ERj5iI.d.mts → types-BFgSD_7j.d.mts}

@@ -1,4 +1,4 @@
-interface PillStepperProps {
+interface StepperProps {
     /** Total number of steps */
     count: number;
     /** Zero-based active step index */
@@ -41,4 +41,4 @@ interface UseAutoPlayReturn {
     fillDuration: number;
 }
 
-export type { AnimatingStep as A, PillStepperProps as P, UseAutoPlayOptions as U, UseAutoPlayReturn as a };
+export type { AnimatingStep as A, StepperProps as S, UseAutoPlayOptions as U, UseAutoPlayReturn as a };

package/dist/{types-C_ERj5iI.d.ts → types-BFgSD_7j.d.ts}

@@ -1,4 +1,4 @@
-interface PillStepperProps {
+interface StepperProps {
     /** Total number of steps */
     count: number;
     /** Zero-based active step index */
@@ -41,4 +41,4 @@ interface UseAutoPlayReturn {
     fillDuration: number;
 }
 
-export type { AnimatingStep as A, PillStepperProps as P, UseAutoPlayOptions as U, UseAutoPlayReturn as a };
+export type { AnimatingStep as A, StepperProps as S, UseAutoPlayOptions as U, UseAutoPlayReturn as a };

package/dist/vue.d.mts

@@ -1,8 +1,8 @@
 import * as vue from 'vue';
 import { PropType, Ref } from 'vue';
-export { A as AnimatingStep, a as UseAutoPlayReturn } from './types-C_ERj5iI.mjs';
+export { A as AnimatingStep, a as UseAutoPlayReturn } from './types-BFgSD_7j.mjs';
 
-declare const PillStepper: vue.DefineComponent<vue.ExtractPropTypes<{
+declare const Stepper: vue.DefineComponent<vue.ExtractPropTypes<{
     count: {
         type: NumberConstructor;
         required: true;
@@ -97,4 +97,4 @@ declare function useAutoPlay(options: UseAutoPlayOptions): {
     fillDuration: vue.ComputedRef<number>;
 };
 
-export { PillStepper, type UseAutoPlayOptions, useAutoPlay };
+export { Stepper, type UseAutoPlayOptions, useAutoPlay };

package/dist/vue.d.ts

@@ -1,8 +1,8 @@
 import * as vue from 'vue';
 import { PropType, Ref } from 'vue';
-export { A as AnimatingStep, a as UseAutoPlayReturn } from './types-C_ERj5iI.js';
+export { A as AnimatingStep, a as UseAutoPlayReturn } from './types-BFgSD_7j.js';
 
-declare const PillStepper: vue.DefineComponent<vue.ExtractPropTypes<{
+declare const Stepper: vue.DefineComponent<vue.ExtractPropTypes<{
     count: {
         type: NumberConstructor;
         required: true;
@@ -97,4 +97,4 @@ declare function useAutoPlay(options: UseAutoPlayOptions): {
     fillDuration: vue.ComputedRef<number>;
 };
 
-export { PillStepper, type UseAutoPlayOptions, useAutoPlay };
+export { Stepper, type UseAutoPlayOptions, useAutoPlay };

package/dist/vue.js

@@ -21,12 +21,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/vue/index.ts
 var vue_exports = {};
 __export(vue_exports, {
-  PillStepper: () => PillStepper,
+  Stepper: () => Stepper,
   useAutoPlay: () => useAutoPlay
 });
 module.exports = __toCommonJS(vue_exports);
 
-// src/vue/PillStepper.ts
+// src/vue/Stepper.ts
 var import_vue4 = require("vue");
 
 // src/vue/composables/useStepWindow.ts
@@ -166,10 +166,10 @@ function useAnimatingSteps(count, _duration) {
   return steps;
 }
 
-// src/vue/PillStep.ts
+// src/vue/Step.ts
 var import_vue3 = require("vue");
-var PillStep = (0, import_vue3.defineComponent)({
-  name: "PillStep",
+var Step = (0, import_vue3.defineComponent)({
+  name: "Step",
   props: {
     index: { type: Number, required: true },
     isActive: { type: Boolean, required: true },
@@ -210,9 +210,9 @@ var PillStep = (0, import_vue3.defineComponent)({
   }
 });
 
-// src/vue/PillStepper.ts
-var PillStepper = (0, import_vue4.defineComponent)({
-  name: "PillStepper",
+// src/vue/Stepper.ts
+var Stepper = (0, import_vue4.defineComponent)({
+  name: "Stepper",
   props: {
     count: { type: Number, required: true },
     active: { type: Number, required: true },
@@ -274,7 +274,7 @@ var PillStepper = (0, import_vue4.defineComponent)({
               style: { transform: transformValue }
             },
             steps.value.map(
-              (step) => (0, import_vue4.h)(PillStep, {
+              (step) => (0, import_vue4.h)(Step, {
                 key: step.key,
                 index: step.index,
                 isActive: step.index === props.active,
@@ -346,6 +346,6 @@ function useAutoPlay(options) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  PillStepper,
+  Stepper,
   useAutoPlay
 });

package/dist/vue.mjs

@@ -5,7 +5,7 @@ import {
   computeStepWindow
 } from "./chunk-4JH2WF3D.mjs";
 
-// src/vue/PillStepper.ts
+// src/vue/Stepper.ts
 import { defineComponent as defineComponent2, toRef, computed as computed3, h as h2 } from "vue";
 
 // src/vue/composables/useStepWindow.ts
@@ -60,10 +60,10 @@ function useAnimatingSteps(count, _duration) {
   return steps;
 }
 
-// src/vue/PillStep.ts
+// src/vue/Step.ts
 import { defineComponent, h } from "vue";
-var PillStep = defineComponent({
-  name: "PillStep",
+var Step = defineComponent({
+  name: "Step",
   props: {
     index: { type: Number, required: true },
     isActive: { type: Boolean, required: true },
@@ -104,9 +104,9 @@ var PillStep = defineComponent({
   }
 });
 
-// src/vue/PillStepper.ts
-var PillStepper = defineComponent2({
-  name: "PillStepper",
+// src/vue/Stepper.ts
+var Stepper = defineComponent2({
+  name: "Stepper",
   props: {
     count: { type: Number, required: true },
     active: { type: Number, required: true },
@@ -168,7 +168,7 @@ var PillStepper = defineComponent2({
               style: { transform: transformValue }
             },
             steps.value.map(
-              (step) => h2(PillStep, {
+              (step) => h2(Step, {
                 key: step.key,
                 index: step.index,
                 isActive: step.index === props.active,
@@ -226,6 +226,6 @@ function useAutoPlay(options) {
   };
 }
 export {
-  PillStepper,
+  Stepper,
   useAutoPlay
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pasito",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "A dependency-free stepper/progress indicator with pure CSS transitions — React & Vue",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",