pasito 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +220 -0
- package/package.json +16 -6
package/README.md
ADDED
|
@@ -0,0 +1,220 @@
|
|
|
1
|
+
# Pasito
|
|
2
|
+
|
|
3
|
+
A tiny, themeable, dependency-free fluid stepper component.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm i pasito
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## React
|
|
12
|
+
|
|
13
|
+
### Quick Start
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { PillStepper } from "pasito"; // or "pasito/react"
|
|
17
|
+
import "pasito/styles.css";
|
|
18
|
+
|
|
19
|
+
function App() {
|
|
20
|
+
const [active, setActive] = useState(0);
|
|
21
|
+
|
|
22
|
+
return (
|
|
23
|
+
<PillStepper
|
|
24
|
+
count={5}
|
|
25
|
+
active={active}
|
|
26
|
+
onStepClick={setActive}
|
|
27
|
+
/>
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### Autoplay
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
import { PillStepper, useAutoPlay } from "pasito";
|
|
36
|
+
|
|
37
|
+
function App() {
|
|
38
|
+
const [active, setActive] = useState(0);
|
|
39
|
+
const { playing, toggle, filling, fillDuration } = useAutoPlay({
|
|
40
|
+
count: 5,
|
|
41
|
+
active,
|
|
42
|
+
onStepChange: setActive,
|
|
43
|
+
stepDuration: 3000,
|
|
44
|
+
loop: true,
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
return (
|
|
48
|
+
<>
|
|
49
|
+
<PillStepper
|
|
50
|
+
count={5}
|
|
51
|
+
active={active}
|
|
52
|
+
filling={filling}
|
|
53
|
+
fillDuration={fillDuration}
|
|
54
|
+
/>
|
|
55
|
+
<button onClick={toggle}>
|
|
56
|
+
{playing ? "Pause" : "Play"}
|
|
57
|
+
</button>
|
|
58
|
+
</>
|
|
59
|
+
);
|
|
60
|
+
}
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Vue
|
|
64
|
+
|
|
65
|
+
### Quick Start
|
|
66
|
+
|
|
67
|
+
```vue
|
|
68
|
+
<script setup>
|
|
69
|
+
import { ref } from "vue";
|
|
70
|
+
import { PillStepper } from "pasito/vue";
|
|
71
|
+
import "pasito/styles.css";
|
|
72
|
+
|
|
73
|
+
const active = ref(0);
|
|
74
|
+
</script>
|
|
75
|
+
|
|
76
|
+
<template>
|
|
77
|
+
<PillStepper
|
|
78
|
+
:count="5"
|
|
79
|
+
:active="active"
|
|
80
|
+
@step-click="active = $event"
|
|
81
|
+
/>
|
|
82
|
+
</template>
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### Autoplay
|
|
86
|
+
|
|
87
|
+
```vue
|
|
88
|
+
<script setup>
|
|
89
|
+
import { ref } from "vue";
|
|
90
|
+
import { PillStepper, useAutoPlay } from "pasito/vue";
|
|
91
|
+
import "pasito/styles.css";
|
|
92
|
+
|
|
93
|
+
const active = ref(0);
|
|
94
|
+
const { playing, toggle, filling, fillDuration } = useAutoPlay({
|
|
95
|
+
count: ref(5),
|
|
96
|
+
active,
|
|
97
|
+
onStepChange: (i) => { active.value = i; },
|
|
98
|
+
stepDuration: 3000,
|
|
99
|
+
loop: true,
|
|
100
|
+
});
|
|
101
|
+
</script>
|
|
102
|
+
|
|
103
|
+
<template>
|
|
104
|
+
<PillStepper
|
|
105
|
+
:count="5"
|
|
106
|
+
:active="active"
|
|
107
|
+
:filling="filling"
|
|
108
|
+
:fill-duration="fillDuration"
|
|
109
|
+
/>
|
|
110
|
+
<button @click="toggle">
|
|
111
|
+
{{ playing ? "Pause" : "Play" }}
|
|
112
|
+
</button>
|
|
113
|
+
</template>
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
## Imports
|
|
117
|
+
|
|
118
|
+
```ts
|
|
119
|
+
// React — default export stays React for backwards compat
|
|
120
|
+
import { PillStepper, useAutoPlay } from "pasito";
|
|
121
|
+
import { PillStepper, useAutoPlay } from "pasito/react";
|
|
122
|
+
|
|
123
|
+
// Vue
|
|
124
|
+
import { PillStepper, useAutoPlay } from "pasito/vue";
|
|
125
|
+
|
|
126
|
+
// CSS (both frameworks)
|
|
127
|
+
import "pasito/styles.css";
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
## API
|
|
131
|
+
|
|
132
|
+
### `<PillStepper />`
|
|
133
|
+
|
|
134
|
+
| Prop | Type | Default | Description |
|
|
135
|
+
|------|------|---------|-------------|
|
|
136
|
+
| `count` | `number` | — | Total number of steps |
|
|
137
|
+
| `active` | `number` | — | Zero-based active step index |
|
|
138
|
+
| `onStepClick` (React) / `@step-click` (Vue) | `(i: number) => void` | — | Called when a step is clicked |
|
|
139
|
+
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Layout direction |
|
|
140
|
+
| `maxVisible` | `number` | — | Visible steps before windowing kicks in |
|
|
141
|
+
| `transitionDuration` | `number` | `500` | Transition duration in ms |
|
|
142
|
+
| `easing` | `string` | `cubic-bezier(0.215, 0.61, 0.355, 1)` | CSS transition timing function |
|
|
143
|
+
| `filling` | `boolean` | `false` | Show fill progress on the active step |
|
|
144
|
+
| `fillDuration` | `number` | `3000` | Duration of the fill animation in ms |
|
|
145
|
+
| `className` (React) / `class` (Vue) | `string` | — | Additional class for CSS variable overrides |
|
|
146
|
+
|
|
147
|
+
### `useAutoPlay(options)`
|
|
148
|
+
|
|
149
|
+
**React** — pass plain values:
|
|
150
|
+
|
|
151
|
+
| Option | Type | Default | Description |
|
|
152
|
+
|--------|------|---------|-------------|
|
|
153
|
+
| `count` | `number` | — | Total number of steps |
|
|
154
|
+
| `active` | `number` | — | Current active step |
|
|
155
|
+
| `onStepChange` | `(i: number) => void` | — | Called to advance the step |
|
|
156
|
+
| `stepDuration` | `number` | `3000` | Time per step in ms |
|
|
157
|
+
| `loop` | `boolean` | `true` | Loop back to first step after last |
|
|
158
|
+
| `enabled` | `boolean` | `true` | Enable/disable autoplay |
|
|
159
|
+
|
|
160
|
+
**Vue** — pass refs for reactive values (`count`, `active`), plain or ref for config:
|
|
161
|
+
|
|
162
|
+
| Option | Type | Default | Description |
|
|
163
|
+
|--------|------|---------|-------------|
|
|
164
|
+
| `count` | `Ref<number>` | — | Total number of steps |
|
|
165
|
+
| `active` | `Ref<number>` | — | Current active step |
|
|
166
|
+
| `onStepChange` | `(i: number) => void` | — | Called to advance the step |
|
|
167
|
+
| `stepDuration` | `number \| Ref<number>` | `3000` | Time per step in ms |
|
|
168
|
+
| `loop` | `boolean \| Ref<boolean>` | `true` | Loop back to first step after last |
|
|
169
|
+
| `enabled` | `boolean \| Ref<boolean>` | `true` | Enable/disable autoplay |
|
|
170
|
+
|
|
171
|
+
Returns `{ playing, toggle, filling, fillDuration }` — pass `filling` and `fillDuration` directly to `<PillStepper />`.
|
|
172
|
+
|
|
173
|
+
## Theming
|
|
174
|
+
|
|
175
|
+
Override any CSS custom property via a class:
|
|
176
|
+
|
|
177
|
+
```tsx
|
|
178
|
+
// React
|
|
179
|
+
<PillStepper className="my-stepper" ... />
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
```vue
|
|
183
|
+
<!-- Vue -->
|
|
184
|
+
<PillStepper class="my-stepper" ... />
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
| Variable | Default | Description |
|
|
188
|
+
|----------|---------|-------------|
|
|
189
|
+
| `--pill-dot-size` | `8px` | Diameter of inactive dots |
|
|
190
|
+
| `--pill-active-width` | `24px` | Width of the active pill (or height in vertical) |
|
|
191
|
+
| `--pill-gap` | `6px` | Space between steps |
|
|
192
|
+
| `--pill-bg` | `rgba(0,0,0,0.12)` | Inactive dot color |
|
|
193
|
+
| `--pill-active-bg` | `rgba(0,0,0,0.8)` | Active pill color |
|
|
194
|
+
| `--pill-fill-bg` | `rgba(255,255,255,0.45)` | Autoplay fill bar color |
|
|
195
|
+
| `--pill-container-bg` | `rgba(0,0,0,0.04)` | Container background |
|
|
196
|
+
| `--pill-container-border` | `rgba(0,0,0,0.06)` | Container border color |
|
|
197
|
+
| `--pill-container-radius` | `999px` | Container border radius |
|
|
198
|
+
|
|
199
|
+
### Dark theme example
|
|
200
|
+
|
|
201
|
+
```css
|
|
202
|
+
.my-stepper {
|
|
203
|
+
--pill-bg: rgba(255, 255, 255, 0.15);
|
|
204
|
+
--pill-active-bg: rgba(255, 255, 255, 0.9);
|
|
205
|
+
--pill-fill-bg: rgba(255, 255, 255, 0.3);
|
|
206
|
+
--pill-container-bg: rgba(255, 255, 255, 0.1);
|
|
207
|
+
--pill-container-border: rgba(255, 255, 255, 0.12);
|
|
208
|
+
}
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
## Accessibility
|
|
212
|
+
|
|
213
|
+
- Steps use `role="tab"` with `aria-selected` for screen readers
|
|
214
|
+
- `aria-label` on each step (`Step 1`, `Step 2`, etc.)
|
|
215
|
+
- Keyboard focusable (active step has `tabIndex={0}`)
|
|
216
|
+
- `prefers-reduced-motion` is respected — all transitions resolve instantly
|
|
217
|
+
|
|
218
|
+
---
|
|
219
|
+
|
|
220
|
+
Created by [@joshpuckett](https://github.com/joshpuckett)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "pasito",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "A dependency-free stepper/progress indicator with pure CSS transitions — React & Vue",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -23,8 +23,12 @@
|
|
|
23
23
|
},
|
|
24
24
|
"./styles.css": "./dist/index.css"
|
|
25
25
|
},
|
|
26
|
-
"files": [
|
|
27
|
-
|
|
26
|
+
"files": [
|
|
27
|
+
"dist"
|
|
28
|
+
],
|
|
29
|
+
"sideEffects": [
|
|
30
|
+
"*.css"
|
|
31
|
+
],
|
|
28
32
|
"scripts": {
|
|
29
33
|
"build": "tsup",
|
|
30
34
|
"dev": "tsup --watch"
|
|
@@ -35,9 +39,15 @@
|
|
|
35
39
|
"vue": ">=3"
|
|
36
40
|
},
|
|
37
41
|
"peerDependenciesMeta": {
|
|
38
|
-
"react": {
|
|
39
|
-
|
|
40
|
-
|
|
42
|
+
"react": {
|
|
43
|
+
"optional": true
|
|
44
|
+
},
|
|
45
|
+
"react-dom": {
|
|
46
|
+
"optional": true
|
|
47
|
+
},
|
|
48
|
+
"vue": {
|
|
49
|
+
"optional": true
|
|
50
|
+
}
|
|
41
51
|
},
|
|
42
52
|
"devDependencies": {
|
|
43
53
|
"react": "^19.0.0",
|