@raex-ui/flip-dot 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 +41 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
# @raex-ui/flip-dot
|
|
2
|
+
|
|
3
|
+
A cascading dot-flip grid that simulates a physical flip-dot display. Dots flip with spring physics in a diagonal cascade pattern.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @raex-ui/flip-dot
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { FlipDot } from "@raex-ui/flip-dot";
|
|
17
|
+
|
|
18
|
+
function MyComponent() {
|
|
19
|
+
const [digit, setDigit] = useState(0);
|
|
20
|
+
return <FlipDot value={digit} size={64} />;
|
|
21
|
+
}
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Props
|
|
25
|
+
|
|
26
|
+
| Prop | Type | Description |
|
|
27
|
+
|------|------|-------------|
|
|
28
|
+
| `value` | `number` | Digit to display (0–9) |
|
|
29
|
+
| `size` | `number` | Width in pixels. Height is automatically 1.5× width. |
|
|
30
|
+
|
|
31
|
+
## Peer Dependencies
|
|
32
|
+
|
|
33
|
+
- `react` >=18
|
|
34
|
+
- `react-dom` >=18
|
|
35
|
+
- `framer-motion` >=10
|
|
36
|
+
|
|
37
|
+
No Tailwind CSS required.
|
|
38
|
+
|
|
39
|
+
## License
|
|
40
|
+
|
|
41
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@raex-ui/flip-dot",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Cascading dot-flip grid that simulates a physical flip-dot display. Animated digit transition component for React.",
|
|
5
5
|
"main": "dist/index.cjs",
|
|
6
6
|
"module": "dist/index.js",
|