@drivexstudio/animations 1.0.0 → 1.0.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 +24 -0
- package/dist/index.cjs +1912 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.js +1856 -0
- package/dist/index.js.map +1 -0
- package/package.json +4 -3
package/README.md
CHANGED
|
@@ -10,6 +10,30 @@ npm install @drivexstudio/animations
|
|
|
10
10
|
|
|
11
11
|
`react` and `react-dom` (>=18) are peer dependencies — install them in your app if they aren't already.
|
|
12
12
|
|
|
13
|
+
**This package requires Tailwind CSS v3+ in the consuming app**, plus a few design tokens that are NOT part of Tailwind's default theme. Components are styled with Tailwind utility classes rather than shipping compiled CSS, so if these tokens aren't already defined in your project, classes like `bg-brand` produce no CSS at all — components render unstyled with no error.
|
|
14
|
+
|
|
15
|
+
Your app must already define, under the **exact names** below (this package does not ship a preset or CSS file — add these to your own `tailwind.config.js` theme and global CSS if they don't already exist):
|
|
16
|
+
|
|
17
|
+
| Token | Type | Used for |
|
|
18
|
+
|---|---|---|
|
|
19
|
+
| `brand` | Tailwind color | `bg-brand`, `text-brand` |
|
|
20
|
+
| `background` | Tailwind color | `bg-background`, `ring-offset-background` |
|
|
21
|
+
| `body-sm` | Tailwind fontSize | `text-body-sm` |
|
|
22
|
+
| `body` | Tailwind fontSize | `text-body` |
|
|
23
|
+
| `body-lg` | Tailwind fontSize | `text-body-lg` |
|
|
24
|
+
| `--ease-power4-in-out` | CSS custom property | inline `transition-timing-function` on hover/press micro-interactions |
|
|
25
|
+
|
|
26
|
+
Also make sure Tailwind's `content` config scans this package's compiled output, or it will purge classes it thinks are unused:
|
|
27
|
+
|
|
28
|
+
```js
|
|
29
|
+
content: [
|
|
30
|
+
'./src/**/*.{js,jsx,ts,tsx}',
|
|
31
|
+
'./node_modules/@drivexstudio/animations/dist/**/*.{js,cjs}'
|
|
32
|
+
]
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
> A Tailwind preset + base CSS file shipping these tokens with sensible defaults previously lived in this package and can be reintroduced later if useful across multiple consuming projects — for now this documents the requirement instead.
|
|
36
|
+
|
|
13
37
|
## Setup
|
|
14
38
|
|
|
15
39
|
Some components depend on context providers being mounted above them in your app tree. Wrap your root layout once:
|