juxscript 1.1.105 → 1.1.107

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 (7) hide show
  1. package/dom-structure-map.json +1 -1
  2. package/lib/components/stack/BaseStack.d.ts +11 -43
  3. package/lib/components/stack/BaseStack.d.ts.map +1 -1
  4. package/lib/components/stack/BaseStack.js +37 -45
  5. package/lib/components/stack/BaseStack.ts +52 -46
  6. package/lib/styles/stack.css +138 -82
  7. package/package.json +1 -1
package/dom-structure-map.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "totalComponents": 63,
3
- "generatedAt": "2026-02-12T21:34:37.009Z",
3
+ "generatedAt": "2026-02-12T21:48:07.335Z",
4
4
  "components": [
5
5
  {
6
6
  "file": "alert.js",
package/lib/components/stack/BaseStack.d.ts CHANGED
@@ -73,62 +73,30 @@ export declare abstract class BaseStack extends BaseComponent<StackState> {
73
73
  fade(startOpacity?: number, step?: number): this;
74
74
  blur(startBlur?: number, step?: number): this;
75
75
  stagger(baseDelay?: number): this;
76
- /**
77
- * Fade in animation
78
- */
79
76
  fadeIn(): this;
80
- /**
81
- * Fade out animation
82
- */
83
- fadeOut(): this;
84
- /**
85
- * Slide in from direction
86
- */
87
77
  slideIn(direction?: 'up' | 'down' | 'left' | 'right'): this;
88
- /**
89
- * Scale in animation (subtle)
90
- */
91
78
  scaleIn(): this;
92
- /**
93
- * Zoom in animation (dramatic)
94
- */
95
79
  zoomIn(): this;
96
- /**
97
- * Rotate in animation
98
- */
99
80
  rotateIn(): this;
100
- /**
101
- * Flip in along axis
102
- */
103
81
  flipIn(axis?: 'x' | 'y'): this;
104
- /**
105
- * Bounce in animation
106
- */
107
82
  bounceIn(): this;
108
- /**
109
- * Elastic spring animation
110
- */
111
83
  elasticIn(): this;
112
- /**
113
- * Blur in animation
114
- */
115
84
  blurIn(): this;
116
- /**
117
- * Glow pulse animation (continuous)
118
- */
119
85
  glow(): this;
120
- /**
121
- * Enable staggered animations (children animate sequentially)
122
- */
86
+ fadeInItems(): this;
87
+ slideInItems(direction?: 'up' | 'down' | 'left' | 'right'): this;
88
+ scaleInItems(): this;
89
+ zoomInItems(): this;
90
+ rotateInItems(): this;
91
+ flipInItems(axis?: 'x' | 'y'): this;
92
+ bounceInItems(): this;
93
+ elasticInItems(): this;
94
+ blurInItems(): this;
95
+ glowItems(): this;
123
96
  staggered(): this;
124
- /**
125
- * Make children interactive (hover effects)
126
- */
127
97
  interactive(): this;
128
- /**
129
- * Enable smooth transitions
130
- */
131
98
  smooth(): this;
99
+ smoothItems(): this;
132
100
  /**
133
101
  * Combine animation with stagger
134
102
  */
package/lib/components/stack/BaseStack.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BaseStack.d.ts","sourceRoot":"","sources":["BaseStack.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"BaseStack.d.ts","sourceRoot":"","sources":["BaseStack.ts"],"names":[],"mappings":"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"}
package/lib/components/stack/BaseStack.js CHANGED
@@ -160,90 +160,82 @@ export class BaseStack extends BaseComponent {
160
160
  /* ═════════════════════════════════════════════════════════════════
161
161
  * ANIMATION API (Fluent)
162
162
  * ═════════════════════════════════════════════════════════════════ */
163
- /**
164
- * Fade in animation
165
- */
163
+ /* Stack-Level Animations (Animate the container) */
166
164
  fadeIn() {
167
165
  return this.addClass('jux-stack-fade-in');
168
166
  }
169
- /**
170
- * Fade out animation
171
- */
172
- fadeOut() {
173
- return this.addClass('jux-stack-fade-out');
174
- }
175
- /**
176
- * Slide in from direction
177
- */
178
167
  slideIn(direction = 'up') {
179
168
  return this.addClass(`jux-stack-slide-${direction}`);
180
169
  }
181
- /**
182
- * Scale in animation (subtle)
183
- */
184
170
  scaleIn() {
185
171
  return this.addClass('jux-stack-scale-in');
186
172
  }
187
- /**
188
- * Zoom in animation (dramatic)
189
- */
190
173
  zoomIn() {
191
174
  return this.addClass('jux-stack-zoom-in');
192
175
  }
193
- /**
194
- * Rotate in animation
195
- */
196
176
  rotateIn() {
197
177
  return this.addClass('jux-stack-rotate-in');
198
178
  }
199
- /**
200
- * Flip in along axis
201
- */
202
179
  flipIn(axis = 'x') {
203
180
  return this.addClass(`jux-stack-flip-${axis}`);
204
181
  }
205
- /**
206
- * Bounce in animation
207
- */
208
182
  bounceIn() {
209
183
  return this.addClass('jux-stack-bounce-in');
210
184
  }
211
- /**
212
- * Elastic spring animation
213
- */
214
185
  elasticIn() {
215
186
  return this.addClass('jux-stack-elastic-in');
216
187
  }
217
- /**
218
- * Blur in animation
219
- */
220
188
  blurIn() {
221
189
  return this.addClass('jux-stack-blur-in');
222
190
  }
223
- /**
224
- * Glow pulse animation (continuous)
225
- */
226
191
  glow() {
227
192
  return this.addClass('jux-stack-glow');
228
193
  }
229
- /**
230
- * Enable staggered animations (children animate sequentially)
231
- */
194
+ /* Item-Level Animations (Animate the children) */
195
+ fadeInItems() {
196
+ return this.addClass('jux-stack-fade-in-items');
197
+ }
198
+ slideInItems(direction = 'up') {
199
+ return this.addClass(`jux-stack-slide-${direction}-items`);
200
+ }
201
+ scaleInItems() {
202
+ return this.addClass('jux-stack-scale-in-items');
203
+ }
204
+ zoomInItems() {
205
+ return this.addClass('jux-stack-zoom-in-items');
206
+ }
207
+ rotateInItems() {
208
+ return this.addClass('jux-stack-rotate-in-items');
209
+ }
210
+ flipInItems(axis = 'x') {
211
+ return this.addClass(`jux-stack-flip-${axis}-items`);
212
+ }
213
+ bounceInItems() {
214
+ return this.addClass('jux-stack-bounce-in-items');
215
+ }
216
+ elasticInItems() {
217
+ return this.addClass('jux-stack-elastic-in-items');
218
+ }
219
+ blurInItems() {
220
+ return this.addClass('jux-stack-blur-in-items');
221
+ }
222
+ glowItems() {
223
+ return this.addClass('jux-stack-glow-items');
224
+ }
225
+ /* Stagger (Only works with item-level animations) */
232
226
  staggered() {
233
227
  return this.addClass('jux-stack-stagger');
234
228
  }
235
- /**
236
- * Make children interactive (hover effects)
237
- */
229
+ /* Interactive & Utility */
238
230
  interactive() {
239
231
  return this.addClass('jux-stack-interactive');
240
232
  }
241
- /**
242
- * Enable smooth transitions
243
- */
244
233
  smooth() {
245
234
  return this.addClass('jux-stack-smooth');
246
235
  }
236
+ smoothItems() {
237
+ return this.addClass('jux-stack-smooth-items');
238
+ }
247
239
  /**
248
240
  * Combine animation with stagger
249
241
  */
package/lib/components/stack/BaseStack.ts CHANGED
@@ -210,104 +210,110 @@ export abstract class BaseStack extends BaseComponent<StackState> {
210
210
  * ANIMATION API (Fluent)
211
211
  * ═════════════════════════════════════════════════════════════════ */
212
212
 
213
- /**
214
- * Fade in animation
215
- */
213
+ /* Stack-Level Animations (Animate the container) */
214
+
216
215
  fadeIn(): this {
217
216
  return this.addClass('jux-stack-fade-in');
218
217
  }
219
218
 
220
- /**
221
- * Fade out animation
222
- */
223
- fadeOut(): this {
224
- return this.addClass('jux-stack-fade-out');
225
- }
226
-
227
- /**
228
- * Slide in from direction
229
- */
230
219
  slideIn(direction: 'up' | 'down' | 'left' | 'right' = 'up'): this {
231
220
  return this.addClass(`jux-stack-slide-${direction}`);
232
221
  }
233
222
 
234
- /**
235
- * Scale in animation (subtle)
236
- */
237
223
  scaleIn(): this {
238
224
  return this.addClass('jux-stack-scale-in');
239
225
  }
240
226
 
241
- /**
242
- * Zoom in animation (dramatic)
243
- */
244
227
  zoomIn(): this {
245
228
  return this.addClass('jux-stack-zoom-in');
246
229
  }
247
230
 
248
- /**
249
- * Rotate in animation
250
- */
251
231
  rotateIn(): this {
252
232
  return this.addClass('jux-stack-rotate-in');
253
233
  }
254
234
 
255
- /**
256
- * Flip in along axis
257
- */
258
235
  flipIn(axis: 'x' | 'y' = 'x'): this {
259
236
  return this.addClass(`jux-stack-flip-${axis}`);
260
237
  }
261
238
 
262
- /**
263
- * Bounce in animation
264
- */
265
239
  bounceIn(): this {
266
240
  return this.addClass('jux-stack-bounce-in');
267
241
  }
268
242
 
269
- /**
270
- * Elastic spring animation
271
- */
272
243
  elasticIn(): this {
273
244
  return this.addClass('jux-stack-elastic-in');
274
245
  }
275
246
 
276
- /**
277
- * Blur in animation
278
- */
279
247
  blurIn(): this {
280
248
  return this.addClass('jux-stack-blur-in');
281
249
  }
282
250
 
283
- /**
284
- * Glow pulse animation (continuous)
285
- */
286
251
  glow(): this {
287
252
  return this.addClass('jux-stack-glow');
288
253
  }
289
254
 
290
- /**
291
- * Enable staggered animations (children animate sequentially)
292
- */
255
+ /* Item-Level Animations (Animate the children) */
256
+
257
+ fadeInItems(): this {
258
+ return this.addClass('jux-stack-fade-in-items');
259
+ }
260
+
261
+ slideInItems(direction: 'up' | 'down' | 'left' | 'right' = 'up'): this {
262
+ return this.addClass(`jux-stack-slide-${direction}-items`);
263
+ }
264
+
265
+ scaleInItems(): this {
266
+ return this.addClass('jux-stack-scale-in-items');
267
+ }
268
+
269
+ zoomInItems(): this {
270
+ return this.addClass('jux-stack-zoom-in-items');
271
+ }
272
+
273
+ rotateInItems(): this {
274
+ return this.addClass('jux-stack-rotate-in-items');
275
+ }
276
+
277
+ flipInItems(axis: 'x' | 'y' = 'x'): this {
278
+ return this.addClass(`jux-stack-flip-${axis}-items`);
279
+ }
280
+
281
+ bounceInItems(): this {
282
+ return this.addClass('jux-stack-bounce-in-items');
283
+ }
284
+
285
+ elasticInItems(): this {
286
+ return this.addClass('jux-stack-elastic-in-items');
287
+ }
288
+
289
+ blurInItems(): this {
290
+ return this.addClass('jux-stack-blur-in-items');
291
+ }
292
+
293
+ glowItems(): this {
294
+ return this.addClass('jux-stack-glow-items');
295
+ }
296
+
297
+ /* Stagger (Only works with item-level animations) */
298
+
293
299
  staggered(): this {
294
300
  return this.addClass('jux-stack-stagger');
295
301
  }
296
302
 
297
- /**
298
- * Make children interactive (hover effects)
299
- */
303
+ /* Interactive & Utility */
304
+
300
305
  interactive(): this {
301
306
  return this.addClass('jux-stack-interactive');
302
307
  }
303
308
 
304
- /**
305
- * Enable smooth transitions
306
- */
307
309
  smooth(): this {
308
310
  return this.addClass('jux-stack-smooth');
309
311
  }
310
312
 
313
+ smoothItems(): this {
314
+ return this.addClass('jux-stack-smooth-items');
315
+ }
316
+
311
317
  /**
312
318
  * Combine animation with stagger
313
319
  */
package/lib/styles/stack.css CHANGED
@@ -136,28 +136,15 @@
136
136
  * ANIMATION & TRANSITION CLASSES
137
137
  * ═══════════════════════════════════════════════════════════════════ */
138
138
 
139
- /* Fade Animations */
139
+ /* ═════════════════════════════════════════════════════════════════
140
+ * KEYFRAME DEFINITIONS (Shared)
141
+ * ═════════════════════════════════════════════════════════════════ */
142
+
140
143
  @keyframes jux-fade-in {
141
144
  from { opacity: 0; }
142
145
  to { opacity: 1; }
143
146
  }
144
147
 
145
- @keyframes jux-fade-out {
146
- from { opacity: 1; }
147
- to { opacity: 0; }
148
- }
149
-
150
- .jux-stack-fade-in,
151
- .jux-stack-fade-in > * {
152
- animation: jux-fade-in 0.3s ease-out;
153
- }
154
-
155
- .jux-stack-fade-out,
156
- .jux-stack-fade-out > * {
157
- animation: jux-fade-out 0.3s ease-out;
158
- }
159
-
160
- /* Slide Animations */
161
148
  @keyframes jux-slide-in-up {
162
149
  from { transform: translateY(20px); opacity: 0; }
163
150
  to { transform: translateY(0); opacity: 1; }
@@ -178,47 +165,16 @@
178
165
  to { transform: translateX(0); opacity: 1; }
179
166
  }
180
167
 
181
- .jux-stack-slide-up > * {
182
- animation: jux-slide-in-up 0.4s ease-out;
183
- }
184
-
185
- .jux-stack-slide-down > * {
186
- animation: jux-slide-in-down 0.4s ease-out;
187
- }
188
-
189
- .jux-stack-slide-left > * {
190
- animation: jux-slide-in-left 0.4s ease-out;
191
- }
192
-
193
- .jux-stack-slide-right > * {
194
- animation: jux-slide-in-right 0.4s ease-out;
195
- }
196
-
197
- /* Scale Animations */
198
168
  @keyframes jux-scale-in {
199
169
  from { transform: scale(0.8); opacity: 0; }
200
170
  to { transform: scale(1); opacity: 1; }
201
171
  }
202
172
 
203
- @keyframes jux-scale-out {
204
- from { transform: scale(1); opacity: 1; }
205
- to { transform: scale(0.8); opacity: 0; }
206
- }
207
-
208
173
  @keyframes jux-zoom-in {
209
174
  from { transform: scale(0); opacity: 0; }
210
175
  to { transform: scale(1); opacity: 1; }
211
176
  }
212
177
 
213
- .jux-stack-scale-in > * {
214
- animation: jux-scale-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
215
- }
216
-
217
- .jux-stack-zoom-in > * {
218
- animation: jux-zoom-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
219
- }
220
-
221
- /* Rotate Animations */
222
178
  @keyframes jux-rotate-in {
223
179
  from { transform: rotate(-10deg); opacity: 0; }
224
180
  to { transform: rotate(0); opacity: 1; }
@@ -234,19 +190,6 @@
234
190
  to { transform: perspective(400px) rotateY(0); opacity: 1; }
235
191
  }
236
192
 
237
- .jux-stack-rotate-in > * {
238
- animation: jux-rotate-in 0.5s ease-out;
239
- }
240
-
241
- .jux-stack-flip-x > * {
242
- animation: jux-flip-in-x 0.6s ease-out;
243
- }
244
-
245
- .jux-stack-flip-y > * {
246
- animation: jux-flip-in-y 0.6s ease-out;
247
- }
248
-
249
- /* Bounce Animation */
250
193
  @keyframes jux-bounce-in {
251
194
  0% { transform: scale(0); opacity: 0; }
252
195
  50% { transform: scale(1.1); }
@@ -254,11 +197,6 @@
254
197
  100% { transform: scale(1); opacity: 1; }
255
198
  }
256
199
 
257
- .jux-stack-bounce-in > * {
258
- animation: jux-bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
259
- }
260
-
261
- /* Elastic Animation */
262
200
  @keyframes jux-elastic-in {
263
201
  0% { transform: scale(0); }
264
202
  55% { transform: scale(1.2); }
@@ -267,31 +205,140 @@
267
205
  100% { transform: scale(1); }
268
206
  }
269
207
 
270
- .jux-stack-elastic-in > * {
271
- animation: jux-elastic-in 0.8s ease-out;
272
- }
273
-
274
- /* Blur Animation */
275
208
  @keyframes jux-blur-in {
276
209
  from { filter: blur(10px); opacity: 0; }
277
210
  to { filter: blur(0); opacity: 1; }
278
211
  }
279
212
 
280
- .jux-stack-blur-in > * {
281
- animation: jux-blur-in 0.5s ease-out;
282
- }
283
-
284
- /* Glow Animation */
285
213
  @keyframes jux-glow-pulse {
286
214
  0%, 100% { box-shadow: 0 0 5px rgba(59, 130, 246, 0.5); }
287
215
  50% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.8); }
288
216
  }
289
217
 
290
- .jux-stack-glow > * {
218
+ /* ═════════════════════════════════════════════════════════════════
219
+ * STACK-LEVEL ANIMATIONS (Apply to container itself)
220
+ * ═════════════════════════════════════════════════════════════════ */
221
+
222
+ .jux-stack-fade-in {
223
+ animation: jux-fade-in 0.3s ease-out;
224
+ }
225
+
226
+ .jux-stack-slide-up {
227
+ animation: jux-slide-in-up 0.4s ease-out;
228
+ }
229
+
230
+ .jux-stack-slide-down {
231
+ animation: jux-slide-in-down 0.4s ease-out;
232
+ }
233
+
234
+ .jux-stack-slide-left {
235
+ animation: jux-slide-in-left 0.4s ease-out;
236
+ }
237
+
238
+ .jux-stack-slide-right {
239
+ animation: jux-slide-in-right 0.4s ease-out;
240
+ }
241
+
242
+ .jux-stack-scale-in {
243
+ animation: jux-scale-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
244
+ }
245
+
246
+ .jux-stack-zoom-in {
247
+ animation: jux-zoom-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
248
+ }
249
+
250
+ .jux-stack-rotate-in {
251
+ animation: jux-rotate-in 0.5s ease-out;
252
+ }
253
+
254
+ .jux-stack-flip-x {
255
+ animation: jux-flip-in-x 0.6s ease-out;
256
+ }
257
+
258
+ .jux-stack-flip-y {
259
+ animation: jux-flip-in-y 0.6s ease-out;
260
+ }
261
+
262
+ .jux-stack-bounce-in {
263
+ animation: jux-bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
264
+ }
265
+
266
+ .jux-stack-elastic-in {
267
+ animation: jux-elastic-in 0.8s ease-out;
268
+ }
269
+
270
+ .jux-stack-blur-in {
271
+ animation: jux-blur-in 0.5s ease-out;
272
+ }
273
+
274
+ .jux-stack-glow {
291
275
  animation: jux-glow-pulse 2s ease-in-out infinite;
292
276
  }
293
277
 
294
- /* Stagger Delay (for sequential animations) */
278
+ /* ═════════════════════════════════════════════════════════════════
279
+ * ITEM-LEVEL ANIMATIONS (Apply to direct children only)
280
+ * ═════════════════════════════════════════════════════════════════ */
281
+
282
+ .jux-stack-fade-in-items > * {
283
+ animation: jux-fade-in 0.3s ease-out;
284
+ }
285
+
286
+ .jux-stack-slide-up-items > * {
287
+ animation: jux-slide-in-up 0.4s ease-out;
288
+ }
289
+
290
+ .jux-stack-slide-down-items > * {
291
+ animation: jux-slide-in-down 0.4s ease-out;
292
+ }
293
+
294
+ .jux-stack-slide-left-items > * {
295
+ animation: jux-slide-in-left 0.4s ease-out;
296
+ }
297
+
298
+ .jux-stack-slide-right-items > * {
299
+ animation: jux-slide-in-right 0.4s ease-out;
300
+ }
301
+
302
+ .jux-stack-scale-in-items > * {
303
+ animation: jux-scale-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
304
+ }
305
+
306
+ .jux-stack-zoom-in-items > * {
307
+ animation: jux-zoom-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
308
+ }
309
+
310
+ .jux-stack-rotate-in-items > * {
311
+ animation: jux-rotate-in 0.5s ease-out;
312
+ }
313
+
314
+ .jux-stack-flip-x-items > * {
315
+ animation: jux-flip-in-x 0.6s ease-out;
316
+ }
317
+
318
+ .jux-stack-flip-y-items > * {
319
+ animation: jux-flip-in-y 0.6s ease-out;
320
+ }
321
+
322
+ .jux-stack-bounce-in-items > * {
323
+ animation: jux-bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
324
+ }
325
+
326
+ .jux-stack-elastic-in-items > * {
327
+ animation: jux-elastic-in 0.8s ease-out;
328
+ }
329
+
330
+ .jux-stack-blur-in-items > * {
331
+ animation: jux-blur-in 0.5s ease-out;
332
+ }
333
+
334
+ .jux-stack-glow-items > * {
335
+ animation: jux-glow-pulse 2s ease-in-out infinite;
336
+ }
337
+
338
+ /* ═════════════════════════════════════════════════════════════════
339
+ * STAGGER DELAYS (Only for item-level animations)
340
+ * ═════════════════════════════════════════════════════════════════ */
341
+
295
342
  .jux-stack-stagger > *:nth-child(1) { animation-delay: 0ms; }
296
343
  .jux-stack-stagger > *:nth-child(2) { animation-delay: 100ms; }
297
344
  .jux-stack-stagger > *:nth-child(3) { animation-delay: 200ms; }
@@ -303,7 +350,10 @@
303
350
  .jux-stack-stagger > *:nth-child(9) { animation-delay: 800ms; }
304
351
  .jux-stack-stagger > *:nth-child(10) { animation-delay: 900ms; }
305
352
 
306
- /* Hover Transitions (opt-in via .jux-stack-interactive) */
353
+ /* ═════════════════════════════════════════════════════════════════
354
+ * INTERACTIVE EFFECTS (Hover, Focus)
355
+ * ═════════════════════════════════════════════════════════════════ */
356
+
307
357
  .jux-stack-interactive > * {
308
358
  transition: transform 0.3s ease, box-shadow 0.3s ease;
309
359
  cursor: pointer;
@@ -314,8 +364,14 @@
314
364
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
315
365
  }
316
366
 
317
- /* Smooth transitions for all animated properties */
318
- .jux-stack-smooth,
319
- .jux-stack-smooth > * {
367
+ /* ═════════════════════════════════════════════════════════════════
368
+ * UTILITY CLASSES
369
+ * ═════════════════════════════════════════════════════════════════ */
370
+
371
+ .jux-stack-smooth {
372
+ transition: all 0.3s ease;
373
+ }
374
+
375
+ .jux-stack-smooth-items > * {
320
376
  transition: all 0.3s ease;
321
377
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "juxscript",
3
- "version": "1.1.105",
3
+ "version": "1.1.107",
4
4
  "type": "module",
5
5
  "description": "A JavaScript UX authorship platform",
6
6
  "main": "index.js",