@mks2508/waapi-animation-primitives 0.1.0 → 0.3.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.
Files changed (12) hide show
  1. package/README.md +296 -72
  2. package/dist/index.cjs +49 -63
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.css +207 -0
  5. package/dist/index.css.map +1 -0
  6. package/dist/index.d.cts +1692 -401
  7. package/dist/index.d.cts.map +1 -0
  8. package/dist/index.d.ts +1692 -401
  9. package/dist/index.d.ts.map +1 -0
  10. package/dist/index.js +49 -63
  11. package/dist/index.js.map +1 -1
  12. package/package.json +10 -7
package/dist/index.css ADDED
@@ -0,0 +1,207 @@
1
+ .waapi-reorder-container {
2
+ position: relative;
3
+ }
4
+
5
+ [data-reorder-state] {
6
+ will-change: transform, opacity;
7
+ position: relative;
8
+ }
9
+
10
+ [data-reorder-state="idle"] {
11
+ opacity: 1;
12
+ will-change: auto;
13
+ transform: none;
14
+ }
15
+
16
+ [data-reorder-state="entering"] {
17
+ opacity: 0;
18
+ transform: translateY(-8px)scale(.95);
19
+ }
20
+
21
+ [data-reorder-state="exiting"] {
22
+ pointer-events: none;
23
+ }
24
+
25
+ [data-reorder-state="exiting"][data-exit-position="absolute"] {
26
+ position: absolute;
27
+ }
28
+
29
+ [data-reorder-state="exiting"][data-exit-position="in-place"] {
30
+ position: relative;
31
+ }
32
+
33
+ [data-reorder-state="completed"] {
34
+ visibility: hidden;
35
+ width: 0;
36
+ height: 0;
37
+ overflow: hidden;
38
+ opacity: 0 !important;
39
+ pointer-events: none !important;
40
+ position: absolute !important;
41
+ }
42
+
43
+ [data-separator-state] {
44
+ white-space: pre;
45
+ will-change: transform, opacity;
46
+ display: inline;
47
+ }
48
+
49
+ [data-separator-state="exiting"] {
50
+ pointer-events: none;
51
+ }
52
+
53
+ [data-separator-state="completed"] {
54
+ opacity: 0;
55
+ pointer-events: none;
56
+ width: 0;
57
+ position: absolute;
58
+ overflow: hidden;
59
+ }
60
+
61
+ @supports (animation-delay: calc(sibling-index() * 1ms)) {
62
+ [data-reorder-state="entering"] {
63
+ --waapi-stagger-index: sibling-index();
64
+ }
65
+ }
66
+
67
+ .waapi-token-wrapper {
68
+ align-items: center;
69
+ display: inline-flex;
70
+ }
71
+
72
+ .waapi-token-wrapper.exit-completed, .waapi-token-wrapper[data-reorder-state="completed"] {
73
+ opacity: 0 !important;
74
+ pointer-events: none !important;
75
+ position: absolute !important;
76
+ }
77
+
78
+ .waapi-token-separator {
79
+ white-space: pre;
80
+ will-change: transform, opacity;
81
+ margin-left: .25em;
82
+ display: inline !important;
83
+ }
84
+
85
+ .waapi-token-separator.flip-active {
86
+ will-change: transform;
87
+ }
88
+
89
+ .waapi-token-separator.exit-completed {
90
+ opacity: 0;
91
+ pointer-events: none;
92
+ width: 0;
93
+ position: absolute;
94
+ overflow: hidden;
95
+ }
96
+
97
+ .waapi-token-overflow {
98
+ white-space: nowrap;
99
+ align-items: center;
100
+ display: inline-flex;
101
+ }
102
+
103
+ .waapi-sliding-text-container {
104
+ vertical-align: bottom;
105
+ will-change: width;
106
+ display: inline-flex;
107
+ overflow: hidden;
108
+ }
109
+
110
+ .waapi-sliding-text-content {
111
+ white-space: pre;
112
+ display: inline-flex;
113
+ }
114
+
115
+ .waapi-sliding-text-token {
116
+ will-change: transform, opacity, filter;
117
+ backface-visibility: hidden;
118
+ font-weight: 500;
119
+ display: inline-block;
120
+ }
121
+
122
+ .waapi-sliding-text-token.enter-from {
123
+ opacity: 0;
124
+ filter: blur(var(--waapi-blur-enter));
125
+ }
126
+
127
+ .waapi-sliding-text-token.enter-to {
128
+ opacity: 1;
129
+ filter: blur();
130
+ transform: translate(0);
131
+ }
132
+
133
+ .waapi-sliding-text-token.exit-active {
134
+ opacity: 0;
135
+ filter: blur(var(--waapi-blur-exit));
136
+ }
137
+
138
+ .waapi-direction-vertical .waapi-sliding-text-token.enter-from {
139
+ transform: translateY(var(--waapi-offset-y-enter));
140
+ }
141
+
142
+ .waapi-direction-vertical .waapi-sliding-text-token.exit-active {
143
+ transform: translateY(var(--waapi-offset-y-exit));
144
+ }
145
+
146
+ .waapi-direction-horizontal .waapi-sliding-text-token.enter-from {
147
+ transform: translateX(var(--waapi-offset-x, 12px));
148
+ }
149
+
150
+ .waapi-direction-horizontal .waapi-sliding-text-token.exit-active {
151
+ transform: translateX(calc(var(--waapi-offset-x, 12px) * -1));
152
+ }
153
+
154
+ .waapi-animated-tokens-container {
155
+ flex-wrap: wrap;
156
+ align-items: center;
157
+ gap: 0;
158
+ display: flex;
159
+ }
160
+
161
+ .waapi-token-placeholder {
162
+ font-style: italic;
163
+ color: var(--muted-foreground, #888) !important;
164
+ }
165
+
166
+ @media (prefers-reduced-motion: reduce) {
167
+ [data-reorder-state], [data-separator-state], .waapi-token-separator, .waapi-sliding-text-token, .waapi-token-wrapper {
168
+ will-change: auto;
169
+ transition: none !important;
170
+ animation: none !important;
171
+ }
172
+ }
173
+
174
+ @media (prefers-contrast: high) {
175
+ .waapi-sliding-text-token.enter-from, .waapi-sliding-text-token.exit-active {
176
+ filter: none;
177
+ }
178
+ }
179
+
180
+ @media (width <= 768px) {
181
+ .waapi-token-wrapper, [data-reorder-state] {
182
+ backface-visibility: hidden;
183
+ perspective: 1000px;
184
+ transform: translateZ(0);
185
+ }
186
+ }
187
+
188
+ @media print {
189
+ .waapi-animated-tokens-container, .waapi-sliding-text-container, .waapi-token-separator, .waapi-token-wrapper, [data-reorder-state], [data-separator-state] {
190
+ opacity: 1 !important;
191
+ transition: none !important;
192
+ animation: none !important;
193
+ transform: none !important;
194
+ }
195
+
196
+ .waapi-token-separator.exit-completed, .waapi-token-wrapper.exit-completed, [data-reorder-state="completed"], [data-separator-state="completed"] {
197
+ opacity: 1 !important;
198
+ pointer-events: auto !important;
199
+ visibility: visible !important;
200
+ width: auto !important;
201
+ height: auto !important;
202
+ position: static !important;
203
+ }
204
+ }
205
+
206
+
207
+ /*# sourceMappingURL=index.css.map*/
package/dist/index.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.css","names":[],"sources":["../src/styles/animations.css"],"sourcesContent":[".waapi-reorder-container {\n position: relative;\n}\n\n[data-reorder-state] {\n will-change: transform, opacity;\n position: relative;\n}\n\n[data-reorder-state=\"idle\"] {\n opacity: 1;\n will-change: auto;\n transform: none;\n}\n\n[data-reorder-state=\"entering\"] {\n opacity: 0;\n transform: translateY(-8px)scale(.95);\n}\n\n[data-reorder-state=\"exiting\"] {\n pointer-events: none;\n}\n\n[data-reorder-state=\"exiting\"][data-exit-position=\"absolute\"] {\n position: absolute;\n}\n\n[data-reorder-state=\"exiting\"][data-exit-position=\"in-place\"] {\n position: relative;\n}\n\n[data-reorder-state=\"completed\"] {\n visibility: hidden;\n width: 0;\n height: 0;\n overflow: hidden;\n opacity: 0 !important;\n pointer-events: none !important;\n position: absolute !important;\n}\n\n[data-separator-state] {\n white-space: pre;\n will-change: transform, opacity;\n display: inline;\n}\n\n[data-separator-state=\"exiting\"] {\n pointer-events: none;\n}\n\n[data-separator-state=\"completed\"] {\n opacity: 0;\n pointer-events: none;\n width: 0;\n position: absolute;\n overflow: hidden;\n}\n\n@supports (animation-delay: calc(sibling-index() * 1ms)) {\n [data-reorder-state=\"entering\"] {\n --waapi-stagger-index: sibling-index();\n }\n}\n\n.waapi-token-wrapper {\n align-items: center;\n display: inline-flex;\n}\n\n.waapi-token-wrapper.exit-completed, .waapi-token-wrapper[data-reorder-state=\"completed\"] {\n opacity: 0 !important;\n pointer-events: none !important;\n position: absolute !important;\n}\n\n.waapi-token-separator {\n white-space: pre;\n will-change: transform, opacity;\n margin-left: .25em;\n display: inline !important;\n}\n\n.waapi-token-separator.flip-active {\n will-change: transform;\n}\n\n.waapi-token-separator.exit-completed {\n opacity: 0;\n pointer-events: none;\n width: 0;\n position: absolute;\n overflow: hidden;\n}\n\n.waapi-token-overflow {\n white-space: nowrap;\n align-items: center;\n display: inline-flex;\n}\n\n.waapi-sliding-text-container {\n vertical-align: bottom;\n will-change: width;\n display: inline-flex;\n overflow: hidden;\n}\n\n.waapi-sliding-text-content {\n white-space: pre;\n display: inline-flex;\n}\n\n.waapi-sliding-text-token {\n will-change: transform, opacity, filter;\n backface-visibility: hidden;\n font-weight: 500;\n display: inline-block;\n}\n\n.waapi-sliding-text-token.enter-from {\n opacity: 0;\n filter: blur(var(--waapi-blur-enter));\n}\n\n.waapi-sliding-text-token.enter-to {\n opacity: 1;\n filter: blur();\n transform: translate(0);\n}\n\n.waapi-sliding-text-token.exit-active {\n opacity: 0;\n filter: blur(var(--waapi-blur-exit));\n}\n\n.waapi-direction-vertical .waapi-sliding-text-token.enter-from {\n transform: translateY(var(--waapi-offset-y-enter));\n}\n\n.waapi-direction-vertical .waapi-sliding-text-token.exit-active {\n transform: translateY(var(--waapi-offset-y-exit));\n}\n\n.waapi-direction-horizontal .waapi-sliding-text-token.enter-from {\n transform: translateX(var(--waapi-offset-x, 12px));\n}\n\n.waapi-direction-horizontal .waapi-sliding-text-token.exit-active {\n transform: translateX(calc(var(--waapi-offset-x, 12px) * -1));\n}\n\n.waapi-animated-tokens-container {\n flex-wrap: wrap;\n align-items: center;\n gap: 0;\n display: flex;\n}\n\n.waapi-token-placeholder {\n font-style: italic;\n color: var(--muted-foreground, #888) !important;\n}\n\n@media (prefers-reduced-motion: reduce) {\n [data-reorder-state], [data-separator-state], .waapi-token-separator, .waapi-sliding-text-token, .waapi-token-wrapper {\n will-change: auto;\n transition: none !important;\n animation: none !important;\n }\n}\n\n@media (prefers-contrast: high) {\n .waapi-sliding-text-token.enter-from, .waapi-sliding-text-token.exit-active {\n filter: none;\n }\n}\n\n@media (width <= 768px) {\n .waapi-token-wrapper, [data-reorder-state] {\n backface-visibility: hidden;\n perspective: 1000px;\n transform: translateZ(0);\n }\n}\n\n@media print {\n .waapi-animated-tokens-container, .waapi-sliding-text-container, .waapi-token-separator, .waapi-token-wrapper, [data-reorder-state], [data-separator-state] {\n opacity: 1 !important;\n transition: none !important;\n animation: none !important;\n transform: none !important;\n }\n\n .waapi-token-separator.exit-completed, .waapi-token-wrapper.exit-completed, [data-reorder-state=\"completed\"], [data-separator-state=\"completed\"] {\n opacity: 1 !important;\n pointer-events: auto !important;\n visibility: visible !important;\n width: auto !important;\n height: auto !important;\n position: static !important;\n }\n}\n"],"mappings":"AAAA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}