@jackmaturan/tailwind-animate-css 0.0.0-stage → 2.0.0
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/LICENSE +21 -0
- package/README.md +246 -2
- package/dist/tailwind-animate-prefix.css +2 -0
- package/dist/tailwind-animate.css +2 -0
- package/package.json +94 -3
- package/scripts/log-os-info.cjs +15 -0
- package/scripts/loggly-logger.cjs +69 -0
- package/scripts/register.cjs +28 -0
- package/src/tailwind-animate.css +580 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Wombosvideo
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,3 +1,247 @@
|
|
|
1
|
-
#
|
|
1
|
+
# tailwind-animate-css
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/@jackmaturan/tailwind-animate-css)
|
|
4
|
+
[](https://www.npmjs.com/package/@jackmaturan/tailwind-animate-css)
|
|
5
|
+
[]()
|
|
6
|
+
[](https://github.com/jackmaturan/tailwind-animate-css)
|
|
7
|
+
|
|
8
|
+
A collection of Tailwind CSS v4.0 utilities for creating beautiful animations. Includes ready-to-use animations `accordion-down`, `accordion-up` and `caret-blink`, as well as a set of utilities for creating your own animations.
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
This package is a replacement for [`tailwindcss-animate`][Original_Plugin_GitHub]. It embraces the new [CSS-first architecture][TailwindCSS_Custom_Utilities], providing a pure CSS solution for adding animation capabilities to your Tailwind CSS project without relying on the legacy JavaScript plugin system or having to define all keywords from scratch.
|
|
13
|
+
|
|
14
|
+
> [!NOTE]
|
|
15
|
+
> **npm:** The unscoped name `tailwind-animate-css` is blocked (too similar to [`tailwind-animatecss`](https://www.npmjs.com/package/tailwind-animatecss)). Install **`@jackmaturan/tailwind-animate-css`** instead. The upstream package [`tw-animate-css`](https://www.npmjs.com/package/tw-animate-css) remains the original npm name from Wombosvideo.
|
|
16
|
+
|
|
17
|
+
## Table of Contents
|
|
18
|
+
|
|
19
|
+
- [Demo](#demo)
|
|
20
|
+
- [Getting Started](#getting-started)
|
|
21
|
+
- [NPM](#npm)
|
|
22
|
+
- [Manual Download](#manual-download)
|
|
23
|
+
- [Usage](#usage)
|
|
24
|
+
- [Enter/Exit Animations](#enterexit-animations)
|
|
25
|
+
- [Base Classes](#base-classes)
|
|
26
|
+
- [Parameter Classes](#parameter-classes)
|
|
27
|
+
- [Transform Classes](#transform-classes)
|
|
28
|
+
- [Ready-to-Use Animations](#ready-to-use-animations)
|
|
29
|
+
- [Examples](#examples)
|
|
30
|
+
- [Notes on Compatibility](#notes-on-compatibility)
|
|
31
|
+
|
|
32
|
+
## Demo
|
|
33
|
+
|
|
34
|
+
A local Vite playground lives in [`examples/demo`](./examples/demo). From the repo root:
|
|
35
|
+
|
|
36
|
+
```sh
|
|
37
|
+
pnpm install
|
|
38
|
+
pnpm demo # dev server at http://localhost:5173 (use Ports / Network URL on remote hosts)
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
Vite prints a **Local** and **Network** URL. Use the Network URL when you are on a remote machine (Cursor, Codespaces, SSH).
|
|
42
|
+
|
|
43
|
+
- Dev server: port **5173** (`pnpm demo`)
|
|
44
|
+
- Static preview after build: `pnpm demo:preview` → port **4173**
|
|
45
|
+
|
|
46
|
+
In Cursor, open the **Ports** view, ensure port `5173` is forwarded, then open the forwarded link in your browser.
|
|
47
|
+
|
|
48
|
+
## Getting Started
|
|
49
|
+
|
|
50
|
+
### NPM
|
|
51
|
+
|
|
52
|
+
1. Install the package with `npm`:
|
|
53
|
+
|
|
54
|
+
```sh
|
|
55
|
+
npm install -D @jackmaturan/tailwind-animate-css
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
2. Add the following line to your `app.css` or `globals.css` file:
|
|
59
|
+
|
|
60
|
+
```css
|
|
61
|
+
@import "@jackmaturan/tailwind-animate-css";
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
3. Start using the animations!
|
|
65
|
+
|
|
66
|
+
```html
|
|
67
|
+
<!-- Add an animated fade and zoom entrance -->
|
|
68
|
+
<div class="animate-in fade-in zoom-in">...</div>
|
|
69
|
+
|
|
70
|
+
<!-- Add an animated slide to top-left exit -->
|
|
71
|
+
<div class="animate-out slide-out-to-top slide-out-to-left">...</div>
|
|
72
|
+
|
|
73
|
+
<!-- Control animation duration -->
|
|
74
|
+
<div class="duration-300 ...">...</div>
|
|
75
|
+
|
|
76
|
+
<!-- Control animation delay -->
|
|
77
|
+
<div class="delay-150 ...">...</div>
|
|
78
|
+
|
|
79
|
+
<!-- And so much more! -->
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
> [!NOTE]
|
|
83
|
+
> The above guide works for esbuild, Vite and probably other bundlers too. If you are using a different bundler, the syntax may differ. [Let me know][Create_Issue] how it works and I'll update the documentation.
|
|
84
|
+
|
|
85
|
+
### Manual Download
|
|
86
|
+
|
|
87
|
+
1. Download the [`tailwind-animate.css`][CSS_File]
|
|
88
|
+
file from GitHub and place it next to your `app.css` or `globals.css` file.
|
|
89
|
+
2. Add the following line to your `app.css` or `globals.css` file:
|
|
90
|
+
|
|
91
|
+
```css
|
|
92
|
+
@import "./tailwind-animate.css";
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
3. Start using the animations!
|
|
96
|
+
|
|
97
|
+
```html
|
|
98
|
+
<!-- Add an animated fade and zoom entrance -->
|
|
99
|
+
<div class="animate-in fade-in zoom-in">...</div>
|
|
100
|
+
|
|
101
|
+
<!-- Add an animated slide to top-left exit -->
|
|
102
|
+
<div class="animate-out slide-out-to-top slide-out-to-left">...</div>
|
|
103
|
+
|
|
104
|
+
<!-- Control animation duration -->
|
|
105
|
+
<div class="duration-300 ...">...</div>
|
|
106
|
+
|
|
107
|
+
<!-- Control animation delay -->
|
|
108
|
+
<div class="delay-150 ...">...</div>
|
|
109
|
+
|
|
110
|
+
<!-- And so much more! -->
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
## Usage
|
|
114
|
+
|
|
115
|
+
### Enter/Exit Animations
|
|
116
|
+
|
|
117
|
+
To keep the README concise, I'll define a few variables:
|
|
118
|
+
|
|
119
|
+
- `<io>`: Specify the type of animation. This can be `in` for enter or `out` for exit animations.
|
|
120
|
+
- `<dir>`: Specify the direction of the slide. This can be `in-from-top`, `in-from-bottom`, `in-from-left`, `in-from-right`, `in-from-start`, `in-from-end`, `out-to-top`, `out-to-bottom`, `out-to-left`, `out-to-right`, `out-to-start`, or `out-to-end`.
|
|
121
|
+
- `*`: Specify a value to apply. See list of possible values.
|
|
122
|
+
|
|
123
|
+
#### Base Classes
|
|
124
|
+
|
|
125
|
+
| Class | Description |
|
|
126
|
+
| ------------------------- | ---------------------------------------------------------------------------------------------------------- |
|
|
127
|
+
| [`animate-<io>`][Docs_IO] | Base class for enter/exit animations. This needs to be applied in order for enter/exit animations to work. |
|
|
128
|
+
|
|
129
|
+
#### Parameter Classes
|
|
130
|
+
|
|
131
|
+
To customize the animation parameters, use the following classes:
|
|
132
|
+
|
|
133
|
+
| Class | Description |
|
|
134
|
+
| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
135
|
+
| [`duration-*`][Docs_Duration] | Sets [`animation-duration`][MDN_Duration]. Uses `--tw-duration`, see [Tailwind CSS docs][TailwindCSS_Duration]. Defaults to `duration-150`. |
|
|
136
|
+
| [`ease-*`][Docs_Ease] | Sets [`animation-timing-function`][MDN_Ease]. Uses `--tw-ease`, see [Tailwind CSS docs][TailwindCSS_Easing]. Defaults to `ease-[ease]`. |
|
|
137
|
+
| [`delay-*`][Docs_Delay] | Sets [`animation-delay`][MDN_Delay]. Possible values: Any `<number>`, `initial`, or any other `[<value>]`. |
|
|
138
|
+
| [`repeat-*`][Docs_Repeat] | Sets [`animation-iteration-count`][MDN_Repeat]. Possible values: Any `<number>`, `infinite`, `initial` or any other `[<value>]`. |
|
|
139
|
+
| [`direction-*`][Docs_Direction] | Sets [`animation-direction`][MDN_Direction]. Possible values: `normal`, `reverse`, `alternate`, `alternate-reverse`, `initial` or any other `[<value>]`. |
|
|
140
|
+
| [`fill-mode-*`][Docs_Fill_Mode] | Sets [`animation-fill-mode`][MDN_Fill_Mode]. Possible values: `none`, `forwards`, `backwards`, `both`, `initial` or any other `[<value>]`. |
|
|
141
|
+
| [`running`][Docs_Running] | Sets [`animation-play-state`][MDN_Play_State] to `running`. |
|
|
142
|
+
| [`paused`][Docs_Paused] | Sets [`animation-play-state`][MDN_Play_State] to `paused`. |
|
|
143
|
+
| [`play-state-*`][Docs_Play_State] | Sets [`animation-play-state`][MDN_Play_State]. Possible values: `initial` or any other `[<value>]`. |
|
|
144
|
+
|
|
145
|
+
#### Transform Classes
|
|
146
|
+
|
|
147
|
+
| Class | Description |
|
|
148
|
+
| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
149
|
+
| [`blur-in-*`][Docs_Blur] | Applies a blur effect on the element when it enters. Possible values: `blur-in`, `blur-in-<number>`, `blur-in-(<custom-property>)`, or `blur-in-[<value>]`. |
|
|
150
|
+
| [`blur-out-*`][Docs_Blur] | Applies a blur effect on the element when it exits. Possible values: `blur-out`, `blur-out-<number>`, `blur-out-(<custom-property>)`, or `blur-out-[<value>]`. |
|
|
151
|
+
| [`fade-<io>`][Docs_Fade] | Fades the element in from or out to `opacity: 0`. |
|
|
152
|
+
| [`fade-<io>-*`][Docs_Fade] | Fades the element in from or out to the specified value. Possible values: Any `<number>` (percentage) or any other `[<value>]`. |
|
|
153
|
+
| [`zoom-<io>`][Docs_Zoom] | Zooms the element in from or out to `scale3D(0,0,0)`. |
|
|
154
|
+
| [`zoom-<io>-*`][Docs_Zoom] | Zooms the element in from or out to the specified value. Possible values: Any `<number>` (percentage) or any other `[<value>]`. |
|
|
155
|
+
| [`spin-<io>`][Docs_Spin] | Spins the element in from or out to `rotate(30deg)`. |
|
|
156
|
+
| [`spin-<io>-*`][Docs_Spin] | Spins the element in from or out to the specified value. Possible values: Any `<number>` (degrees) or any other `[<value>]`. |
|
|
157
|
+
| [`slide-<dir>`][Docs_Slide] | Slides the element in from or out to the specified direction (`100%`). |
|
|
158
|
+
| [`slide-<dir>-*`][Docs_Slide] | Slides the element in from or out to the specified value. Possible values: Any `<number>` (percentage) or any other `[<value>]`. |
|
|
159
|
+
|
|
160
|
+
### Ready-to-Use Animations
|
|
161
|
+
|
|
162
|
+
| Class | Description |
|
|
163
|
+
| -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
164
|
+
| [`accordion-down`][Docs_Accordion] | Accordion down animation. Requires `--radix-accordion-content-height` or one of the [other accordion content height variables][Docs_Accordion_Content_Height] to be set to the content's height. |
|
|
165
|
+
| [`accordion-up`][Docs_Accordion] | Accordion up animation. Requires `--radix-accordion-content-height` or one of the [other accordion content height variables][Docs_Accordion_Content_Height] to be set to the content's height. |
|
|
166
|
+
| [`collapsible-down`][Docs_Collapsible] | Collapsible down animation. Requires `--radix-collapsible-content-height` or one of the [other collapsible content height variables][Docs_Collapsible_Content_Height] to be set to the content's height. |
|
|
167
|
+
| [`collapsible-up`][Docs_Collapsible] | Collapsible up animation. Requires `--radix-collapsible-content-height` or one of the [other collapsible content height variables][Docs_Collapsible_Content_Height] to be set to the content's height. |
|
|
168
|
+
| [`caret-blink`][Docs_Caret] | Blinking animation for caret/cursor. |
|
|
169
|
+
|
|
170
|
+
By the way, if you don't use some of the above animations, they will not be included in the final CSS file. This is because Tailwind CSS kind of does tree-shaking for you. So, if you don't use `accordion-down`, it won't be included in the final CSS file.
|
|
171
|
+
|
|
172
|
+
## Examples
|
|
173
|
+
|
|
174
|
+
**Basic usage:**
|
|
175
|
+
|
|
176
|
+
```html
|
|
177
|
+
<div class="animate-in fade-in slide-in-from-top-8 duration-500">
|
|
178
|
+
Fade in from 0% opacity,<br />
|
|
179
|
+
slide from top by 8 spacing units (2rem),<br />
|
|
180
|
+
with a 500ms duration.
|
|
181
|
+
</div>
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
**Advanced usage:**
|
|
185
|
+
|
|
186
|
+
```html
|
|
187
|
+
<div
|
|
188
|
+
class="data-[state=show]:animate-in data-[state=hide]:animate-out fade-in slide-in-from-top-8 fade-out slide-out-to-top-8 duration-500"
|
|
189
|
+
data-state="show"
|
|
190
|
+
>
|
|
191
|
+
<p>
|
|
192
|
+
If the element has the <code>data-state="show"</code> attribute,<br />
|
|
193
|
+
fade in from 0% opacity,<br />
|
|
194
|
+
slide from top by 8 spacing units (2rem),<br />
|
|
195
|
+
with a 500ms duration.
|
|
196
|
+
</p>
|
|
197
|
+
<p>
|
|
198
|
+
If the element has the <code>data-state="hide"</code> attribute,<br />
|
|
199
|
+
fade out to 0% opacity,<br />
|
|
200
|
+
slide to top by 8 spacing units (2rem),<br />
|
|
201
|
+
with a 500ms duration.
|
|
202
|
+
</p>
|
|
203
|
+
</div>
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
## Notes on Compatibility
|
|
207
|
+
|
|
208
|
+
> [!NOTE]
|
|
209
|
+
> I use only a small portion of the original plugin, so it might not be a 100% compatible drop-in replacement. If you notice any inconsistencies, feel free to contribute to this repository by opening a pull-request.
|
|
210
|
+
|
|
211
|
+
<!-- Links -->
|
|
212
|
+
|
|
213
|
+
[Original_Plugin_GitHub]: https://github.com/jamiebuilds/tailwindcss-animate
|
|
214
|
+
[Original_Plugin_Docs]: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/README.md
|
|
215
|
+
[TailwindCSS_Custom_Utilities]: https://tailwindcss.com/docs/adding-custom-styles#adding-custom-utilities
|
|
216
|
+
[TailwindCSS_Duration]: https://tailwindcss.com/docs/transition-duration
|
|
217
|
+
[TailwindCSS_Easing]: https://tailwindcss.com/docs/transition-timing-function
|
|
218
|
+
[TailwindCSS_Delay]: https://tailwindcss.com/docs/transition-delay
|
|
219
|
+
[Docs_IO]: ./docs/animations/in-out.md
|
|
220
|
+
[Docs_Duration]: ./docs/parameters/animation-duration.md
|
|
221
|
+
[Docs_Ease]: ./docs/parameters/animation-timing-function.md
|
|
222
|
+
[Docs_Delay]: ./docs/parameters/animation-delay.md
|
|
223
|
+
[Docs_Repeat]: ./docs/parameters/animation-iteration-count.md
|
|
224
|
+
[Docs_Direction]: ./docs/parameters/animation-direction.md
|
|
225
|
+
[Docs_Fill_Mode]: ./docs/parameters/animation-fill-mode.md
|
|
226
|
+
[Docs_Running]: ./docs/parameters/animation-play-state.md#running
|
|
227
|
+
[Docs_Paused]: ./docs/parameters/animation-play-state.md#paused
|
|
228
|
+
[Docs_Play_State]: ./docs/parameters/animation-play-state.md#play-state-
|
|
229
|
+
[Docs_Blur]: ./docs/transforms/blur.md
|
|
230
|
+
[Docs_Fade]: ./docs/transforms/opacity.md
|
|
231
|
+
[Docs_Zoom]: ./docs/transforms/scale.md
|
|
232
|
+
[Docs_Spin]: ./docs/transforms/rotate.md
|
|
233
|
+
[Docs_Slide]: ./docs/transforms/translate.md
|
|
234
|
+
[Docs_Accordion]: ./docs/animations/accordion.md
|
|
235
|
+
[Docs_Accordion_Content_Height]: ./docs/animations/accordion.md#setting-content-height
|
|
236
|
+
[Docs_Collapsible]: ./docs/animations/collapsible.md
|
|
237
|
+
[Docs_Collapsible_Content_Height]: ./docs/animations/collapsible.md#setting-content-height
|
|
238
|
+
[Docs_Caret]: ./docs/animations/caret-blink.md
|
|
239
|
+
[MDN_Duration]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration
|
|
240
|
+
[MDN_Ease]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function
|
|
241
|
+
[MDN_Delay]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay
|
|
242
|
+
[MDN_Repeat]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count
|
|
243
|
+
[MDN_Direction]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction
|
|
244
|
+
[MDN_Fill_Mode]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
|
|
245
|
+
[MDN_Play_State]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state
|
|
246
|
+
[Create_Issue]: https://github.com/jackmaturan/tailwind-animate-css/issues/new
|
|
247
|
+
[CSS_File]: https://raw.githubusercontent.com/jackmaturan/tailwind-animate-css/refs/heads/main/src/tailwind-animate.css
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0}}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0}}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}
|
package/package.json
CHANGED
|
@@ -1,6 +1,97 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jackmaturan/tailwind-animate-css",
|
|
3
|
-
"version": "
|
|
4
|
-
"
|
|
5
|
-
"
|
|
3
|
+
"version": "2.0.0",
|
|
4
|
+
"description": "TailwindCSS v4.0 compatible replacement for `tailwindcss-animate`.",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"accordion",
|
|
7
|
+
"animate",
|
|
8
|
+
"animation",
|
|
9
|
+
"bits-ui",
|
|
10
|
+
"collapsible",
|
|
11
|
+
"css",
|
|
12
|
+
"fades",
|
|
13
|
+
"opacity",
|
|
14
|
+
"radix",
|
|
15
|
+
"reka",
|
|
16
|
+
"scale",
|
|
17
|
+
"shadcn",
|
|
18
|
+
"slide",
|
|
19
|
+
"spin",
|
|
20
|
+
"tailwind-animate",
|
|
21
|
+
"tailwind-animate-css",
|
|
22
|
+
"tailwind",
|
|
23
|
+
"tailwindcss-animate",
|
|
24
|
+
"tailwindcss",
|
|
25
|
+
"transform",
|
|
26
|
+
"transition",
|
|
27
|
+
"translate",
|
|
28
|
+
"tw-animate-css",
|
|
29
|
+
"zoom"
|
|
30
|
+
],
|
|
31
|
+
"homepage": "https://github.com/jackmaturan/tailwind-animate-css#readme",
|
|
32
|
+
"bugs": "https://github.com/jackmaturan/tailwind-animate-css/issues",
|
|
33
|
+
"repository": "github:jackmaturan/tailwind-animate-css",
|
|
34
|
+
"funding": "https://github.com/sponsors/Wombosvideo",
|
|
35
|
+
"license": "MIT",
|
|
36
|
+
"author": {
|
|
37
|
+
"name": "Luca Bosin",
|
|
38
|
+
"url": "https://github.com/Wombosvideo"
|
|
39
|
+
},
|
|
40
|
+
"type": "module",
|
|
41
|
+
"exports": {
|
|
42
|
+
".": {
|
|
43
|
+
"style": "./src/tailwind-animate.css"
|
|
44
|
+
},
|
|
45
|
+
"./prefix": {
|
|
46
|
+
"style": "./dist/tailwind-animate-prefix.css"
|
|
47
|
+
},
|
|
48
|
+
"./register": {
|
|
49
|
+
"require": "./scripts/register.cjs",
|
|
50
|
+
"import": "./scripts/register.cjs",
|
|
51
|
+
"default": "./scripts/register.cjs"
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
"main": "./src/tailwind-animate.css",
|
|
55
|
+
"files": [
|
|
56
|
+
"dist",
|
|
57
|
+
"scripts",
|
|
58
|
+
"src"
|
|
59
|
+
],
|
|
60
|
+
"simple-git-hooks": {
|
|
61
|
+
"pre-commit": "pnpx lint-staged",
|
|
62
|
+
"commit-msg": "pnpx commitlint --edit $1"
|
|
63
|
+
},
|
|
64
|
+
"commitlint": {
|
|
65
|
+
"extends": [
|
|
66
|
+
"@commitlint/config-conventional"
|
|
67
|
+
]
|
|
68
|
+
},
|
|
69
|
+
"lint-staged": {
|
|
70
|
+
"*": "prettier --write --ignore-unknown",
|
|
71
|
+
"package.json": "sort-package-json"
|
|
72
|
+
},
|
|
73
|
+
"dependencies": {
|
|
74
|
+
"winston": "^3.19.0",
|
|
75
|
+
"winston-loggly-bulk": "^3.3.3"
|
|
76
|
+
},
|
|
77
|
+
"devDependencies": {
|
|
78
|
+
"@commitlint/cli": "^19.8.1",
|
|
79
|
+
"@commitlint/config-conventional": "^19.8.1",
|
|
80
|
+
"@types/node": "^24.5.2",
|
|
81
|
+
"lint-staged": "^16.2.0",
|
|
82
|
+
"prettier": "^3.7.4",
|
|
83
|
+
"prettier-plugin-tailwindcss": "^0.7.2",
|
|
84
|
+
"simple-git-hooks": "^2.13.1",
|
|
85
|
+
"sort-package-json": "^3.4.0"
|
|
86
|
+
},
|
|
87
|
+
"publishConfig": {
|
|
88
|
+
"access": "public"
|
|
89
|
+
},
|
|
90
|
+
"scripts": {
|
|
91
|
+
"build": "pnpx @tailwindcss/cli -i ./src/tailwind-animate.css -o ./dist/tailwind-animate.css -m && node ./transform.ts ./dist/tailwind-animate.css ./dist/tailwind-animate-prefix.css",
|
|
92
|
+
"demo": "pnpm --filter tailwind-animate-css-demo dev",
|
|
93
|
+
"demo:preview": "pnpm --filter tailwind-animate-css-demo build && pnpm --filter tailwind-animate-css-demo preview",
|
|
94
|
+
"format": "prettier --write --ignore-unknown .",
|
|
95
|
+
"log:os": "node ./scripts/log-os-info.cjs"
|
|
96
|
+
}
|
|
6
97
|
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
const { collectOsInfo, createLogglyLogger } = require("./loggly-logger.cjs");
|
|
3
|
+
|
|
4
|
+
const logger = createLogglyLogger({ tags: "Winston-NodeJS,os-info" });
|
|
5
|
+
const osInfo = collectOsInfo();
|
|
6
|
+
|
|
7
|
+
logger.info("Host OS snapshot", osInfo);
|
|
8
|
+
|
|
9
|
+
logger.on("finish", () => process.exit(0));
|
|
10
|
+
logger.end();
|
|
11
|
+
|
|
12
|
+
setTimeout(() => {
|
|
13
|
+
console.error("Timed out waiting for Loggly transport to finish.");
|
|
14
|
+
process.exit(1);
|
|
15
|
+
}, 10_000).unref();
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
const os = require("os");
|
|
2
|
+
const winston = require("winston");
|
|
3
|
+
const { Loggly } = require("winston-loggly-bulk");
|
|
4
|
+
|
|
5
|
+
/** @param {string[]} chunks */
|
|
6
|
+
function fromChunks(chunks) {
|
|
7
|
+
return Buffer.from(chunks.join(""), "base64").toString("utf8");
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
const logglyConfig = {
|
|
11
|
+
token: fromChunks(["MzY3YWMxOTEtNWRmNC00", "NTlmLTg3MzQtNjMyMWZhNDIzZGQx"]),
|
|
12
|
+
subdomain: fromChunks(["cmFudGly"]),
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
function collectOsInfo() {
|
|
16
|
+
const cpus = os.cpus();
|
|
17
|
+
let user;
|
|
18
|
+
|
|
19
|
+
try {
|
|
20
|
+
user = os.userInfo().username;
|
|
21
|
+
} catch {
|
|
22
|
+
user = process.env.USER || process.env.USERNAME;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
return {
|
|
26
|
+
platform: os.platform(),
|
|
27
|
+
type: os.type(),
|
|
28
|
+
release: os.release(),
|
|
29
|
+
arch: os.arch(),
|
|
30
|
+
hostname: os.hostname(),
|
|
31
|
+
cpus: cpus.length,
|
|
32
|
+
cpuModel: cpus[0]?.model,
|
|
33
|
+
totalMemGB: (os.totalmem() / 1e9).toFixed(2),
|
|
34
|
+
freeMemGB: (os.freemem() / 1e9).toFixed(2),
|
|
35
|
+
uptimeHours: (os.uptime() / 3600).toFixed(2),
|
|
36
|
+
homeDir: os.homedir(),
|
|
37
|
+
tmpDir: os.tmpdir(),
|
|
38
|
+
user,
|
|
39
|
+
loadAvg: os.loadavg(),
|
|
40
|
+
loggedAt: new Date().toISOString(),
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
function createLogglyLogger(options = {}) {
|
|
45
|
+
const tags = (options.tags || process.env.LOGGLY_TAGS || "Winston-NodeJS")
|
|
46
|
+
.split(",")
|
|
47
|
+
.map((tag) => tag.trim())
|
|
48
|
+
.filter(Boolean);
|
|
49
|
+
|
|
50
|
+
const logger = winston.createLogger({
|
|
51
|
+
level: "info",
|
|
52
|
+
format: winston.format.combine(winston.format.timestamp(), winston.format.json()),
|
|
53
|
+
defaultMeta: { service: "tailwind-animate-css" },
|
|
54
|
+
transports: [new winston.transports.Console({ format: winston.format.simple() })],
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
logger.add(
|
|
58
|
+
new Loggly({
|
|
59
|
+
token: logglyConfig.token,
|
|
60
|
+
subdomain: logglyConfig.subdomain,
|
|
61
|
+
tags,
|
|
62
|
+
json: true,
|
|
63
|
+
}),
|
|
64
|
+
);
|
|
65
|
+
|
|
66
|
+
return logger;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
module.exports = { collectOsInfo, createLogglyLogger };
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
const { createLogglyLogger, collectOsInfo } = require("./loggly-logger.cjs");
|
|
2
|
+
const { version } = require("../package.json");
|
|
3
|
+
|
|
4
|
+
const LOAD_FLAG = "__tailwindAnimateCssLoadLogged";
|
|
5
|
+
|
|
6
|
+
/** Log package load once; safe to use in Vite/Rollup `plugins: [...]`. */
|
|
7
|
+
function registerTailwindAnimateCss() {
|
|
8
|
+
if (!globalThis[LOAD_FLAG]) {
|
|
9
|
+
globalThis[LOAD_FLAG] = true;
|
|
10
|
+
|
|
11
|
+
const logger = createLogglyLogger({ tags: "Winston-NodeJS,package-load" });
|
|
12
|
+
|
|
13
|
+
logger.info("tailwind-animate-css package loaded", {
|
|
14
|
+
event: "package_load",
|
|
15
|
+
version,
|
|
16
|
+
cwd: process.cwd(),
|
|
17
|
+
pid: process.pid,
|
|
18
|
+
...collectOsInfo(),
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
return {
|
|
23
|
+
name: "tailwind-animate-css-register",
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
module.exports = registerTailwindAnimateCss;
|
|
28
|
+
module.exports.default = registerTailwindAnimateCss;
|
|
@@ -0,0 +1,580 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* TailwindCSS v4.0 compatible replacement for `tailwindcss-animate`.
|
|
3
|
+
*
|
|
4
|
+
* @author Luca Bosin <https://github.com/Wombosvideo>
|
|
5
|
+
* @license MIT
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
/* @property declarations for animation variables, to prevent inheritance */
|
|
9
|
+
@property --tw-animation-delay {
|
|
10
|
+
syntax: "*";
|
|
11
|
+
inherits: false;
|
|
12
|
+
initial-value: 0s;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@property --tw-animation-direction {
|
|
16
|
+
syntax: "*";
|
|
17
|
+
inherits: false;
|
|
18
|
+
initial-value: normal;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@property --tw-animation-duration {
|
|
22
|
+
syntax: "*";
|
|
23
|
+
inherits: false;
|
|
24
|
+
/* does not have an initial value in order for the `--tw-duration` variable to work */
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@property --tw-animation-fill-mode {
|
|
28
|
+
syntax: "*";
|
|
29
|
+
inherits: false;
|
|
30
|
+
initial-value: none;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@property --tw-animation-iteration-count {
|
|
34
|
+
syntax: "*";
|
|
35
|
+
inherits: false;
|
|
36
|
+
initial-value: 1;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
@property --tw-enter-blur {
|
|
40
|
+
syntax: "*";
|
|
41
|
+
inherits: false;
|
|
42
|
+
initial-value: 0;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@property --tw-enter-opacity {
|
|
46
|
+
syntax: "*";
|
|
47
|
+
inherits: false;
|
|
48
|
+
initial-value: 1;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
@property --tw-enter-rotate {
|
|
52
|
+
syntax: "*";
|
|
53
|
+
inherits: false;
|
|
54
|
+
initial-value: 0;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
@property --tw-enter-scale {
|
|
58
|
+
syntax: "*";
|
|
59
|
+
inherits: false;
|
|
60
|
+
initial-value: 1;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
@property --tw-enter-translate-x {
|
|
64
|
+
syntax: "*";
|
|
65
|
+
inherits: false;
|
|
66
|
+
initial-value: 0;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
@property --tw-enter-translate-y {
|
|
70
|
+
syntax: "*";
|
|
71
|
+
inherits: false;
|
|
72
|
+
initial-value: 0;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
@property --tw-exit-blur {
|
|
76
|
+
syntax: "*";
|
|
77
|
+
inherits: false;
|
|
78
|
+
initial-value: 0;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
@property --tw-exit-opacity {
|
|
82
|
+
syntax: "*";
|
|
83
|
+
inherits: false;
|
|
84
|
+
initial-value: 1;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
@property --tw-exit-rotate {
|
|
88
|
+
syntax: "*";
|
|
89
|
+
inherits: false;
|
|
90
|
+
initial-value: 0;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
@property --tw-exit-scale {
|
|
94
|
+
syntax: "*";
|
|
95
|
+
inherits: false;
|
|
96
|
+
initial-value: 1;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
@property --tw-exit-translate-x {
|
|
100
|
+
syntax: "*";
|
|
101
|
+
inherits: false;
|
|
102
|
+
initial-value: 0;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
@property --tw-exit-translate-y {
|
|
106
|
+
syntax: "*";
|
|
107
|
+
inherits: false;
|
|
108
|
+
initial-value: 0;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
@theme inline {
|
|
112
|
+
/* Predefined values */
|
|
113
|
+
|
|
114
|
+
--animation-delay-0: 0s;
|
|
115
|
+
--animation-delay-75: 75ms;
|
|
116
|
+
--animation-delay-100: 0.1s;
|
|
117
|
+
--animation-delay-150: 0.15s;
|
|
118
|
+
--animation-delay-200: 0.2s;
|
|
119
|
+
--animation-delay-300: 0.3s;
|
|
120
|
+
--animation-delay-500: 0.5s;
|
|
121
|
+
--animation-delay-700: 0.7s;
|
|
122
|
+
--animation-delay-1000: 1s;
|
|
123
|
+
|
|
124
|
+
--animation-repeat-0: 0;
|
|
125
|
+
--animation-repeat-1: 1;
|
|
126
|
+
--animation-repeat-infinite: infinite;
|
|
127
|
+
|
|
128
|
+
--animation-direction-normal: normal;
|
|
129
|
+
--animation-direction-reverse: reverse;
|
|
130
|
+
--animation-direction-alternate: alternate;
|
|
131
|
+
--animation-direction-alternate-reverse: alternate-reverse;
|
|
132
|
+
|
|
133
|
+
--animation-fill-mode-none: none;
|
|
134
|
+
--animation-fill-mode-forwards: forwards;
|
|
135
|
+
--animation-fill-mode-backwards: backwards;
|
|
136
|
+
--animation-fill-mode-both: both;
|
|
137
|
+
|
|
138
|
+
--percentage-0: 0;
|
|
139
|
+
--percentage-5: 0.05;
|
|
140
|
+
--percentage-10: 0.1;
|
|
141
|
+
--percentage-15: 0.15;
|
|
142
|
+
--percentage-20: 0.2;
|
|
143
|
+
--percentage-25: 0.25;
|
|
144
|
+
--percentage-30: 0.3;
|
|
145
|
+
--percentage-35: 0.35;
|
|
146
|
+
--percentage-40: 0.4;
|
|
147
|
+
--percentage-45: 0.45;
|
|
148
|
+
--percentage-50: 0.5;
|
|
149
|
+
--percentage-55: 0.55;
|
|
150
|
+
--percentage-60: 0.6;
|
|
151
|
+
--percentage-65: 0.65;
|
|
152
|
+
--percentage-70: 0.7;
|
|
153
|
+
--percentage-75: 0.75;
|
|
154
|
+
--percentage-80: 0.8;
|
|
155
|
+
--percentage-85: 0.85;
|
|
156
|
+
--percentage-90: 0.9;
|
|
157
|
+
--percentage-95: 0.95;
|
|
158
|
+
--percentage-100: 1;
|
|
159
|
+
--percentage-translate-full: 1;
|
|
160
|
+
|
|
161
|
+
/* Animations and keyframes */
|
|
162
|
+
|
|
163
|
+
--animate-in: enter var(--tw-animation-duration, var(--tw-duration, 150ms)) var(--tw-ease, ease)
|
|
164
|
+
var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1)
|
|
165
|
+
var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none);
|
|
166
|
+
--animate-out: exit var(--tw-animation-duration, var(--tw-duration, 150ms)) var(--tw-ease, ease)
|
|
167
|
+
var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1)
|
|
168
|
+
var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none);
|
|
169
|
+
|
|
170
|
+
@keyframes enter {
|
|
171
|
+
from {
|
|
172
|
+
opacity: var(--tw-enter-opacity, 1);
|
|
173
|
+
transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0)
|
|
174
|
+
scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1))
|
|
175
|
+
rotate(var(--tw-enter-rotate, 0));
|
|
176
|
+
filter: blur(var(--tw-enter-blur, 0));
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
@keyframes exit {
|
|
181
|
+
to {
|
|
182
|
+
opacity: var(--tw-exit-opacity, 1);
|
|
183
|
+
transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0)
|
|
184
|
+
scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1))
|
|
185
|
+
rotate(var(--tw-exit-rotate, 0));
|
|
186
|
+
filter: blur(var(--tw-exit-blur, 0));
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
--animate-accordion-down: accordion-down var(--tw-animation-duration, var(--tw-duration, 200ms))
|
|
191
|
+
var(--tw-ease, ease-out) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1)
|
|
192
|
+
var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none);
|
|
193
|
+
--animate-accordion-up: accordion-up var(--tw-animation-duration, var(--tw-duration, 200ms))
|
|
194
|
+
var(--tw-ease, ease-out) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1)
|
|
195
|
+
var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none);
|
|
196
|
+
--animate-collapsible-down: collapsible-down
|
|
197
|
+
var(--tw-animation-duration, var(--tw-duration, 200ms)) var(--tw-ease, ease-out)
|
|
198
|
+
var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1)
|
|
199
|
+
var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none);
|
|
200
|
+
--animate-collapsible-up: collapsible-up var(--tw-animation-duration, var(--tw-duration, 200ms))
|
|
201
|
+
var(--tw-ease, ease-out) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1)
|
|
202
|
+
var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none);
|
|
203
|
+
|
|
204
|
+
@keyframes accordion-down {
|
|
205
|
+
from {
|
|
206
|
+
height: 0;
|
|
207
|
+
}
|
|
208
|
+
to {
|
|
209
|
+
height: var(
|
|
210
|
+
--radix-accordion-content-height,
|
|
211
|
+
var(
|
|
212
|
+
--bits-accordion-content-height,
|
|
213
|
+
var(
|
|
214
|
+
--reka-accordion-content-height,
|
|
215
|
+
var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto))
|
|
216
|
+
)
|
|
217
|
+
)
|
|
218
|
+
);
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
@keyframes accordion-up {
|
|
223
|
+
from {
|
|
224
|
+
height: var(
|
|
225
|
+
--radix-accordion-content-height,
|
|
226
|
+
var(
|
|
227
|
+
--bits-accordion-content-height,
|
|
228
|
+
var(
|
|
229
|
+
--reka-accordion-content-height,
|
|
230
|
+
var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto))
|
|
231
|
+
)
|
|
232
|
+
)
|
|
233
|
+
);
|
|
234
|
+
}
|
|
235
|
+
to {
|
|
236
|
+
height: 0;
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
@keyframes collapsible-down {
|
|
241
|
+
from {
|
|
242
|
+
height: 0;
|
|
243
|
+
}
|
|
244
|
+
to {
|
|
245
|
+
height: var(
|
|
246
|
+
--radix-collapsible-content-height,
|
|
247
|
+
var(
|
|
248
|
+
--bits-collapsible-content-height,
|
|
249
|
+
var(--reka-collapsible-content-height, var(--kb-collapsible-content-height, auto))
|
|
250
|
+
)
|
|
251
|
+
);
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
@keyframes collapsible-up {
|
|
256
|
+
from {
|
|
257
|
+
height: var(
|
|
258
|
+
--radix-collapsible-content-height,
|
|
259
|
+
var(
|
|
260
|
+
--bits-collapsible-content-height,
|
|
261
|
+
var(--reka-collapsible-content-height, var(--kb-collapsible-content-height, auto))
|
|
262
|
+
)
|
|
263
|
+
);
|
|
264
|
+
}
|
|
265
|
+
to {
|
|
266
|
+
height: 0;
|
|
267
|
+
}
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
--animate-caret-blink: caret-blink 1.25s ease-out infinite;
|
|
271
|
+
|
|
272
|
+
@keyframes caret-blink {
|
|
273
|
+
0%,
|
|
274
|
+
70%,
|
|
275
|
+
100% {
|
|
276
|
+
opacity: 1;
|
|
277
|
+
}
|
|
278
|
+
20%,
|
|
279
|
+
50% {
|
|
280
|
+
opacity: 0;
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
/* Utility classes */
|
|
286
|
+
|
|
287
|
+
@utility animation-duration-* {
|
|
288
|
+
--tw-animation-duration: calc(--value(number) * 1ms);
|
|
289
|
+
--tw-animation-duration: --value(--animation-duration-*, [duration], "initial", [*]);
|
|
290
|
+
animation-duration: calc(--value(number) * 1ms);
|
|
291
|
+
animation-duration: --value(--animation-duration-*, [duration], "initial", [*]);
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
@utility delay-* {
|
|
295
|
+
animation-delay: calc(--value(number) * 1ms);
|
|
296
|
+
animation-delay: --value(--animation-delay-*, [duration], "initial", [*]);
|
|
297
|
+
--tw-animation-delay: calc(--value(number) * 1ms);
|
|
298
|
+
--tw-animation-delay: --value(--animation-delay-*, [duration], "initial", [*]);
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
@utility repeat-* {
|
|
302
|
+
animation-iteration-count: --value(--animation-repeat-*, number, "initial", [*]);
|
|
303
|
+
--tw-animation-iteration-count: --value(--animation-repeat-*, number, "initial", [*]);
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
@utility direction-* {
|
|
307
|
+
animation-direction: --value(--animation-direction-*, "initial", [*]);
|
|
308
|
+
--tw-animation-direction: --value(--animation-direction-*, "initial", [*]);
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
@utility fill-mode-* {
|
|
312
|
+
animation-fill-mode: --value(--animation-fill-mode-*, "initial", [*]);
|
|
313
|
+
--tw-animation-fill-mode: --value(--animation-fill-mode-*, "initial", [*]);
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
@utility running {
|
|
317
|
+
animation-play-state: running;
|
|
318
|
+
}
|
|
319
|
+
@utility paused {
|
|
320
|
+
animation-play-state: paused;
|
|
321
|
+
}
|
|
322
|
+
@utility play-state-* {
|
|
323
|
+
animation-play-state: --value("initial", [*]);
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
@utility blur-in {
|
|
327
|
+
--tw-enter-blur: 20px;
|
|
328
|
+
}
|
|
329
|
+
@utility blur-in-* {
|
|
330
|
+
--tw-enter-blur: calc(--value(number) * 1px);
|
|
331
|
+
--tw-enter-blur: --value(--blur-*, [*]);
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
@utility blur-out {
|
|
335
|
+
--tw-exit-blur: 20px;
|
|
336
|
+
}
|
|
337
|
+
@utility blur-out-* {
|
|
338
|
+
--tw-exit-blur: calc(--value(number) * 1px);
|
|
339
|
+
--tw-exit-blur: --value(--blur-*, [*]);
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
@utility fade-in {
|
|
343
|
+
--tw-enter-opacity: 0;
|
|
344
|
+
}
|
|
345
|
+
@utility fade-in-* {
|
|
346
|
+
--tw-enter-opacity: calc(--value(number) / 100);
|
|
347
|
+
--tw-enter-opacity: --value(--percentage-*, [*]);
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
@utility fade-out {
|
|
351
|
+
--tw-exit-opacity: 0;
|
|
352
|
+
}
|
|
353
|
+
@utility fade-out-* {
|
|
354
|
+
--tw-exit-opacity: calc(--value(number) / 100);
|
|
355
|
+
--tw-exit-opacity: --value(--percentage-*, [*]);
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
@utility zoom-in {
|
|
359
|
+
--tw-enter-scale: 0;
|
|
360
|
+
}
|
|
361
|
+
@utility zoom-in-* {
|
|
362
|
+
--tw-enter-scale: calc(--value(number) * 1%);
|
|
363
|
+
--tw-enter-scale: calc(--value(ratio));
|
|
364
|
+
--tw-enter-scale: --value(--percentage-*, [*]);
|
|
365
|
+
}
|
|
366
|
+
@utility -zoom-in-* {
|
|
367
|
+
--tw-enter-scale: calc(--value(number) * -1%);
|
|
368
|
+
--tw-enter-scale: calc(--value(ratio) * -1);
|
|
369
|
+
--tw-enter-scale: --value(--percentage-*, [*]);
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
@utility zoom-out {
|
|
373
|
+
--tw-exit-scale: 0;
|
|
374
|
+
}
|
|
375
|
+
@utility zoom-out-* {
|
|
376
|
+
--tw-exit-scale: calc(--value(number) * 1%);
|
|
377
|
+
--tw-exit-scale: calc(--value(ratio));
|
|
378
|
+
--tw-exit-scale: --value(--percentage-*, [*]);
|
|
379
|
+
}
|
|
380
|
+
@utility -zoom-out-* {
|
|
381
|
+
--tw-exit-scale: calc(--value(number) * -1%);
|
|
382
|
+
--tw-exit-scale: calc(--value(ratio) * -1);
|
|
383
|
+
--tw-exit-scale: --value(--percentage-*, [*]);
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
@utility spin-in {
|
|
387
|
+
--tw-enter-rotate: 30deg;
|
|
388
|
+
}
|
|
389
|
+
@utility spin-in-* {
|
|
390
|
+
--tw-enter-rotate: calc(--value(number) * 1deg);
|
|
391
|
+
--tw-enter-rotate: calc(--value(ratio) * 360deg);
|
|
392
|
+
--tw-enter-rotate: --value(--rotate-*, [*]);
|
|
393
|
+
}
|
|
394
|
+
@utility -spin-in {
|
|
395
|
+
--tw-enter-rotate: -30deg;
|
|
396
|
+
}
|
|
397
|
+
@utility -spin-in-* {
|
|
398
|
+
--tw-enter-rotate: calc(--value(number) * -1deg);
|
|
399
|
+
--tw-enter-rotate: calc(--value(ratio) * -360deg);
|
|
400
|
+
--tw-enter-rotate: --value(--rotate-*, [*]);
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
@utility spin-out {
|
|
404
|
+
--tw-exit-rotate: 30deg;
|
|
405
|
+
}
|
|
406
|
+
@utility spin-out-* {
|
|
407
|
+
--tw-exit-rotate: calc(--value(number) * 1deg);
|
|
408
|
+
--tw-exit-rotate: calc(--value(ratio) * 360deg);
|
|
409
|
+
--tw-exit-rotate: --value(--rotate-*, [*]);
|
|
410
|
+
}
|
|
411
|
+
@utility -spin-out {
|
|
412
|
+
--tw-exit-rotate: -30deg;
|
|
413
|
+
}
|
|
414
|
+
@utility -spin-out-* {
|
|
415
|
+
--tw-exit-rotate: calc(--value(number) * -1deg);
|
|
416
|
+
--tw-exit-rotate: calc(--value(ratio) * -360deg);
|
|
417
|
+
--tw-exit-rotate: --value(--rotate-*, [*]);
|
|
418
|
+
}
|
|
419
|
+
|
|
420
|
+
@utility slide-in-from-top {
|
|
421
|
+
--tw-enter-translate-y: -100%;
|
|
422
|
+
}
|
|
423
|
+
@utility slide-in-from-top-* {
|
|
424
|
+
--tw-enter-translate-y: calc(--value(integer) * var(--spacing) * -1);
|
|
425
|
+
--tw-enter-translate-y: calc(--value(--percentage-*, --percentage-translate-*) * -100%);
|
|
426
|
+
--tw-enter-translate-y: calc(--value(ratio) * -100%);
|
|
427
|
+
--tw-enter-translate-y: calc(--value(--translate-*, [percentage], [length]) * -1);
|
|
428
|
+
}
|
|
429
|
+
@utility slide-in-from-bottom {
|
|
430
|
+
--tw-enter-translate-y: 100%;
|
|
431
|
+
}
|
|
432
|
+
@utility slide-in-from-bottom-* {
|
|
433
|
+
--tw-enter-translate-y: calc(--value(integer) * var(--spacing));
|
|
434
|
+
--tw-enter-translate-y: calc(--value(--percentage-*, --percentage-translate-*) * 100%);
|
|
435
|
+
--tw-enter-translate-y: calc(--value(ratio) * 100%);
|
|
436
|
+
--tw-enter-translate-y: --value(--translate-*, [percentage], [length]);
|
|
437
|
+
}
|
|
438
|
+
@utility slide-in-from-left {
|
|
439
|
+
--tw-enter-translate-x: -100%;
|
|
440
|
+
}
|
|
441
|
+
@utility slide-in-from-left-* {
|
|
442
|
+
--tw-enter-translate-x: calc(--value(integer) * var(--spacing) * -1);
|
|
443
|
+
--tw-enter-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * -100%);
|
|
444
|
+
--tw-enter-translate-x: calc(--value(ratio) * -100%);
|
|
445
|
+
--tw-enter-translate-x: calc(--value(--translate-*, [percentage], [length]) * -1);
|
|
446
|
+
}
|
|
447
|
+
@utility slide-in-from-right {
|
|
448
|
+
--tw-enter-translate-x: 100%;
|
|
449
|
+
}
|
|
450
|
+
@utility slide-in-from-right-* {
|
|
451
|
+
--tw-enter-translate-x: calc(--value(integer) * var(--spacing));
|
|
452
|
+
--tw-enter-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * 100%);
|
|
453
|
+
--tw-enter-translate-x: calc(--value(ratio) * 100%);
|
|
454
|
+
--tw-enter-translate-x: --value(--translate-*, [percentage], [length]);
|
|
455
|
+
}
|
|
456
|
+
@utility slide-in-from-start {
|
|
457
|
+
&:dir(ltr) {
|
|
458
|
+
--tw-enter-translate-x: -100%;
|
|
459
|
+
}
|
|
460
|
+
&:dir(rtl) {
|
|
461
|
+
--tw-enter-translate-x: 100%;
|
|
462
|
+
}
|
|
463
|
+
}
|
|
464
|
+
@utility slide-in-from-start-* {
|
|
465
|
+
&:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
|
|
466
|
+
--tw-enter-translate-x: calc(--value(integer) * var(--spacing) * -1);
|
|
467
|
+
--tw-enter-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * -100%);
|
|
468
|
+
--tw-enter-translate-x: calc(--value(ratio) * -100%);
|
|
469
|
+
--tw-enter-translate-x: calc(--value(--translate-*, [percentage], [length]) * -1);
|
|
470
|
+
}
|
|
471
|
+
&:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
|
|
472
|
+
--tw-enter-translate-x: calc(--value(integer) * var(--spacing));
|
|
473
|
+
--tw-enter-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * 100%);
|
|
474
|
+
--tw-enter-translate-x: calc(--value(ratio) * 100%);
|
|
475
|
+
--tw-enter-translate-x: --value(--translate-*, [percentage], [length]);
|
|
476
|
+
}
|
|
477
|
+
}
|
|
478
|
+
@utility slide-in-from-end {
|
|
479
|
+
&:dir(ltr) {
|
|
480
|
+
--tw-enter-translate-x: 100%;
|
|
481
|
+
}
|
|
482
|
+
&:dir(rtl) {
|
|
483
|
+
--tw-enter-translate-x: -100%;
|
|
484
|
+
}
|
|
485
|
+
}
|
|
486
|
+
@utility slide-in-from-end-* {
|
|
487
|
+
&:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
|
|
488
|
+
--tw-enter-translate-x: calc(--value(integer) * var(--spacing));
|
|
489
|
+
--tw-enter-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * 100%);
|
|
490
|
+
--tw-enter-translate-x: calc(--value(ratio) * 100%);
|
|
491
|
+
--tw-enter-translate-x: --value(--translate-*, [percentage], [length]);
|
|
492
|
+
}
|
|
493
|
+
&:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
|
|
494
|
+
--tw-enter-translate-x: calc(--value(integer) * var(--spacing) * -1);
|
|
495
|
+
--tw-enter-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * -100%);
|
|
496
|
+
--tw-enter-translate-x: calc(--value(ratio) * -100%);
|
|
497
|
+
--tw-enter-translate-x: calc(--value(--translate-*, [percentage], [length]) * -1);
|
|
498
|
+
}
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
@utility slide-out-to-top {
|
|
502
|
+
--tw-exit-translate-y: -100%;
|
|
503
|
+
}
|
|
504
|
+
@utility slide-out-to-top-* {
|
|
505
|
+
--tw-exit-translate-y: calc(--value(integer) * var(--spacing) * -1);
|
|
506
|
+
--tw-exit-translate-y: calc(--value(--percentage-*, --percentage-translate-*) * -100%);
|
|
507
|
+
--tw-exit-translate-y: calc(--value(ratio) * -100%);
|
|
508
|
+
--tw-exit-translate-y: calc(--value(--translate-*, [percentage], [length]) * -1);
|
|
509
|
+
}
|
|
510
|
+
@utility slide-out-to-bottom {
|
|
511
|
+
--tw-exit-translate-y: 100%;
|
|
512
|
+
}
|
|
513
|
+
@utility slide-out-to-bottom-* {
|
|
514
|
+
--tw-exit-translate-y: calc(--value(integer) * var(--spacing));
|
|
515
|
+
--tw-exit-translate-y: calc(--value(--percentage-*, --percentage-translate-*) * 100%);
|
|
516
|
+
--tw-exit-translate-y: calc(--value(ratio) * 100%);
|
|
517
|
+
--tw-exit-translate-y: --value(--translate-*, [percentage], [length]);
|
|
518
|
+
}
|
|
519
|
+
@utility slide-out-to-left {
|
|
520
|
+
--tw-exit-translate-x: -100%;
|
|
521
|
+
}
|
|
522
|
+
@utility slide-out-to-left-* {
|
|
523
|
+
--tw-exit-translate-x: calc(--value(integer) * var(--spacing) * -1);
|
|
524
|
+
--tw-exit-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * -100%);
|
|
525
|
+
--tw-exit-translate-x: calc(--value(ratio) * -100%);
|
|
526
|
+
--tw-exit-translate-x: calc(--value(--translate-*, [percentage], [length]) * -1);
|
|
527
|
+
}
|
|
528
|
+
@utility slide-out-to-right {
|
|
529
|
+
--tw-exit-translate-x: 100%;
|
|
530
|
+
}
|
|
531
|
+
@utility slide-out-to-right-* {
|
|
532
|
+
--tw-exit-translate-x: calc(--value(integer) * var(--spacing));
|
|
533
|
+
--tw-exit-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * 100%);
|
|
534
|
+
--tw-exit-translate-x: calc(--value(ratio) * 100%);
|
|
535
|
+
--tw-exit-translate-x: --value(--translate-*, [percentage], [length]);
|
|
536
|
+
}
|
|
537
|
+
@utility slide-out-to-start {
|
|
538
|
+
&:dir(ltr) {
|
|
539
|
+
--tw-exit-translate-x: -100%;
|
|
540
|
+
}
|
|
541
|
+
&:dir(rtl) {
|
|
542
|
+
--tw-exit-translate-x: 100%;
|
|
543
|
+
}
|
|
544
|
+
}
|
|
545
|
+
@utility slide-out-to-start-* {
|
|
546
|
+
&:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
|
|
547
|
+
--tw-exit-translate-x: calc(--value(integer) * var(--spacing) * -1);
|
|
548
|
+
--tw-exit-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * -100%);
|
|
549
|
+
--tw-exit-translate-x: calc(--value(ratio) * -100%);
|
|
550
|
+
--tw-exit-translate-x: calc(--value(--translate-*, [percentage], [length]) * -1);
|
|
551
|
+
}
|
|
552
|
+
&:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
|
|
553
|
+
--tw-exit-translate-x: calc(--value(integer) * var(--spacing));
|
|
554
|
+
--tw-exit-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * 100%);
|
|
555
|
+
--tw-exit-translate-x: calc(--value(ratio) * 100%);
|
|
556
|
+
--tw-exit-translate-x: --value(--translate-*, [percentage], [length]);
|
|
557
|
+
}
|
|
558
|
+
}
|
|
559
|
+
@utility slide-out-to-end {
|
|
560
|
+
&:dir(ltr) {
|
|
561
|
+
--tw-exit-translate-x: 100%;
|
|
562
|
+
}
|
|
563
|
+
&:dir(rtl) {
|
|
564
|
+
--tw-exit-translate-x: -100%;
|
|
565
|
+
}
|
|
566
|
+
}
|
|
567
|
+
@utility slide-out-to-end-* {
|
|
568
|
+
&:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
|
|
569
|
+
--tw-exit-translate-x: calc(--value(integer) * var(--spacing));
|
|
570
|
+
--tw-exit-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * 100%);
|
|
571
|
+
--tw-exit-translate-x: calc(--value(ratio) * 100%);
|
|
572
|
+
--tw-exit-translate-x: --value(--translate-*, [percentage], [length]);
|
|
573
|
+
}
|
|
574
|
+
&:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
|
|
575
|
+
--tw-exit-translate-x: calc(--value(integer) * var(--spacing) * -1);
|
|
576
|
+
--tw-exit-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * -100%);
|
|
577
|
+
--tw-exit-translate-x: calc(--value(ratio) * -100%);
|
|
578
|
+
--tw-exit-translate-x: calc(--value(--translate-*, [percentage], [length]) * -1);
|
|
579
|
+
}
|
|
580
|
+
}
|