juxscript 1.1.103 → 1.1.105

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.
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "totalComponents": 63,
3
- "generatedAt": "2026-02-12T21:24:03.010Z",
3
+ "generatedAt": "2026-02-12T21:34:37.009Z",
4
4
  "components": [
5
5
  {
6
6
  "file": "alert.js",
@@ -73,6 +73,66 @@ 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
+ fadeIn(): this;
80
+ /**
81
+ * Fade out animation
82
+ */
83
+ fadeOut(): this;
84
+ /**
85
+ * Slide in from direction
86
+ */
87
+ slideIn(direction?: 'up' | 'down' | 'left' | 'right'): this;
88
+ /**
89
+ * Scale in animation (subtle)
90
+ */
91
+ scaleIn(): this;
92
+ /**
93
+ * Zoom in animation (dramatic)
94
+ */
95
+ zoomIn(): this;
96
+ /**
97
+ * Rotate in animation
98
+ */
99
+ rotateIn(): this;
100
+ /**
101
+ * Flip in along axis
102
+ */
103
+ flipIn(axis?: 'x' | 'y'): this;
104
+ /**
105
+ * Bounce in animation
106
+ */
107
+ bounceIn(): this;
108
+ /**
109
+ * Elastic spring animation
110
+ */
111
+ elasticIn(): this;
112
+ /**
113
+ * Blur in animation
114
+ */
115
+ blurIn(): this;
116
+ /**
117
+ * Glow pulse animation (continuous)
118
+ */
119
+ glow(): this;
120
+ /**
121
+ * Enable staggered animations (children animate sequentially)
122
+ */
123
+ staggered(): this;
124
+ /**
125
+ * Make children interactive (hover effects)
126
+ */
127
+ interactive(): this;
128
+ /**
129
+ * Enable smooth transitions
130
+ */
131
+ smooth(): this;
132
+ /**
133
+ * Combine animation with stagger
134
+ */
135
+ animateStagger(animation?: 'fade' | 'slide' | 'scale' | 'bounce', direction?: 'up' | 'down' | 'left' | 'right'): this;
76
136
  protected buildClasses(): string;
77
137
  protected renderChild(child: any, index: number): HTMLElement;
78
138
  private getChildStyle;
@@ -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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"}
@@ -157,6 +157,111 @@ export class BaseStack extends BaseComponent {
157
157
  };
158
158
  return this;
159
159
  }
160
+ /* ═════════════════════════════════════════════════════════════════
161
+ * ANIMATION API (Fluent)
162
+ * ═════════════════════════════════════════════════════════════════ */
163
+ /**
164
+ * Fade in animation
165
+ */
166
+ fadeIn() {
167
+ return this.addClass('jux-stack-fade-in');
168
+ }
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
+ slideIn(direction = 'up') {
179
+ return this.addClass(`jux-stack-slide-${direction}`);
180
+ }
181
+ /**
182
+ * Scale in animation (subtle)
183
+ */
184
+ scaleIn() {
185
+ return this.addClass('jux-stack-scale-in');
186
+ }
187
+ /**
188
+ * Zoom in animation (dramatic)
189
+ */
190
+ zoomIn() {
191
+ return this.addClass('jux-stack-zoom-in');
192
+ }
193
+ /**
194
+ * Rotate in animation
195
+ */
196
+ rotateIn() {
197
+ return this.addClass('jux-stack-rotate-in');
198
+ }
199
+ /**
200
+ * Flip in along axis
201
+ */
202
+ flipIn(axis = 'x') {
203
+ return this.addClass(`jux-stack-flip-${axis}`);
204
+ }
205
+ /**
206
+ * Bounce in animation
207
+ */
208
+ bounceIn() {
209
+ return this.addClass('jux-stack-bounce-in');
210
+ }
211
+ /**
212
+ * Elastic spring animation
213
+ */
214
+ elasticIn() {
215
+ return this.addClass('jux-stack-elastic-in');
216
+ }
217
+ /**
218
+ * Blur in animation
219
+ */
220
+ blurIn() {
221
+ return this.addClass('jux-stack-blur-in');
222
+ }
223
+ /**
224
+ * Glow pulse animation (continuous)
225
+ */
226
+ glow() {
227
+ return this.addClass('jux-stack-glow');
228
+ }
229
+ /**
230
+ * Enable staggered animations (children animate sequentially)
231
+ */
232
+ staggered() {
233
+ return this.addClass('jux-stack-stagger');
234
+ }
235
+ /**
236
+ * Make children interactive (hover effects)
237
+ */
238
+ interactive() {
239
+ return this.addClass('jux-stack-interactive');
240
+ }
241
+ /**
242
+ * Enable smooth transitions
243
+ */
244
+ smooth() {
245
+ return this.addClass('jux-stack-smooth');
246
+ }
247
+ /**
248
+ * Combine animation with stagger
249
+ */
250
+ animateStagger(animation = 'fade', direction) {
251
+ if (animation === 'slide' && direction) {
252
+ this.slideIn(direction);
253
+ }
254
+ else if (animation === 'fade') {
255
+ this.fadeIn();
256
+ }
257
+ else if (animation === 'scale') {
258
+ this.scaleIn();
259
+ }
260
+ else if (animation === 'bounce') {
261
+ this.bounceIn();
262
+ }
263
+ return this.staggered();
264
+ }
160
265
  /* ═════════════════════════════════════════════════════════════════
161
266
  * RENDER HELPERS
162
267
  * ═════════════════════════════════════════════════════════════════ */
@@ -206,6 +206,124 @@ export abstract class BaseStack extends BaseComponent<StackState> {
206
206
  return this;
207
207
  }
208
208
 
209
+ /* ═════════════════════════════════════════════════════════════════
210
+ * ANIMATION API (Fluent)
211
+ * ═════════════════════════════════════════════════════════════════ */
212
+
213
+ /**
214
+ * Fade in animation
215
+ */
216
+ fadeIn(): this {
217
+ return this.addClass('jux-stack-fade-in');
218
+ }
219
+
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
+ slideIn(direction: 'up' | 'down' | 'left' | 'right' = 'up'): this {
231
+ return this.addClass(`jux-stack-slide-${direction}`);
232
+ }
233
+
234
+ /**
235
+ * Scale in animation (subtle)
236
+ */
237
+ scaleIn(): this {
238
+ return this.addClass('jux-stack-scale-in');
239
+ }
240
+
241
+ /**
242
+ * Zoom in animation (dramatic)
243
+ */
244
+ zoomIn(): this {
245
+ return this.addClass('jux-stack-zoom-in');
246
+ }
247
+
248
+ /**
249
+ * Rotate in animation
250
+ */
251
+ rotateIn(): this {
252
+ return this.addClass('jux-stack-rotate-in');
253
+ }
254
+
255
+ /**
256
+ * Flip in along axis
257
+ */
258
+ flipIn(axis: 'x' | 'y' = 'x'): this {
259
+ return this.addClass(`jux-stack-flip-${axis}`);
260
+ }
261
+
262
+ /**
263
+ * Bounce in animation
264
+ */
265
+ bounceIn(): this {
266
+ return this.addClass('jux-stack-bounce-in');
267
+ }
268
+
269
+ /**
270
+ * Elastic spring animation
271
+ */
272
+ elasticIn(): this {
273
+ return this.addClass('jux-stack-elastic-in');
274
+ }
275
+
276
+ /**
277
+ * Blur in animation
278
+ */
279
+ blurIn(): this {
280
+ return this.addClass('jux-stack-blur-in');
281
+ }
282
+
283
+ /**
284
+ * Glow pulse animation (continuous)
285
+ */
286
+ glow(): this {
287
+ return this.addClass('jux-stack-glow');
288
+ }
289
+
290
+ /**
291
+ * Enable staggered animations (children animate sequentially)
292
+ */
293
+ staggered(): this {
294
+ return this.addClass('jux-stack-stagger');
295
+ }
296
+
297
+ /**
298
+ * Make children interactive (hover effects)
299
+ */
300
+ interactive(): this {
301
+ return this.addClass('jux-stack-interactive');
302
+ }
303
+
304
+ /**
305
+ * Enable smooth transitions
306
+ */
307
+ smooth(): this {
308
+ return this.addClass('jux-stack-smooth');
309
+ }
310
+
311
+ /**
312
+ * Combine animation with stagger
313
+ */
314
+ animateStagger(animation: 'fade' | 'slide' | 'scale' | 'bounce' = 'fade', direction?: 'up' | 'down' | 'left' | 'right'): this {
315
+ if (animation === 'slide' && direction) {
316
+ this.slideIn(direction);
317
+ } else if (animation === 'fade') {
318
+ this.fadeIn();
319
+ } else if (animation === 'scale') {
320
+ this.scaleIn();
321
+ } else if (animation === 'bounce') {
322
+ this.bounceIn();
323
+ }
324
+ return this.staggered();
325
+ }
326
+
209
327
  /* ═════════════════════════════════════════════════════════════════
210
328
  * RENDER HELPERS
211
329
  * ═════════════════════════════════════════════════════════════════ */
@@ -254,10 +372,10 @@ export abstract class BaseStack extends BaseComponent<StackState> {
254
372
  // Create temporary container to render into
255
373
  const tempContainer = document.createElement('div');
256
374
  tempContainer.style.display = 'contents'; // Don't add extra wrapper
257
-
375
+
258
376
  // Render the component into temp container
259
377
  child.render(tempContainer);
260
-
378
+
261
379
  // Extract the rendered element
262
380
  if (child.container && child.container.firstElementChild) {
263
381
  childElement = child.container.firstElementChild as HTMLElement;
@@ -131,3 +131,191 @@
131
131
  .jux-zstack-divider > * {
132
132
  border: 1px solid #e4e4e7;
133
133
  }
134
+
135
+ /* ═══════════════════════════════════════════════════════════════════
136
+ * ANIMATION & TRANSITION CLASSES
137
+ * ═══════════════════════════════════════════════════════════════════ */
138
+
139
+ /* Fade Animations */
140
+ @keyframes jux-fade-in {
141
+ from { opacity: 0; }
142
+ to { opacity: 1; }
143
+ }
144
+
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
+ @keyframes jux-slide-in-up {
162
+ from { transform: translateY(20px); opacity: 0; }
163
+ to { transform: translateY(0); opacity: 1; }
164
+ }
165
+
166
+ @keyframes jux-slide-in-down {
167
+ from { transform: translateY(-20px); opacity: 0; }
168
+ to { transform: translateY(0); opacity: 1; }
169
+ }
170
+
171
+ @keyframes jux-slide-in-left {
172
+ from { transform: translateX(-20px); opacity: 0; }
173
+ to { transform: translateX(0); opacity: 1; }
174
+ }
175
+
176
+ @keyframes jux-slide-in-right {
177
+ from { transform: translateX(20px); opacity: 0; }
178
+ to { transform: translateX(0); opacity: 1; }
179
+ }
180
+
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
+ @keyframes jux-scale-in {
199
+ from { transform: scale(0.8); opacity: 0; }
200
+ to { transform: scale(1); opacity: 1; }
201
+ }
202
+
203
+ @keyframes jux-scale-out {
204
+ from { transform: scale(1); opacity: 1; }
205
+ to { transform: scale(0.8); opacity: 0; }
206
+ }
207
+
208
+ @keyframes jux-zoom-in {
209
+ from { transform: scale(0); opacity: 0; }
210
+ to { transform: scale(1); opacity: 1; }
211
+ }
212
+
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
+ @keyframes jux-rotate-in {
223
+ from { transform: rotate(-10deg); opacity: 0; }
224
+ to { transform: rotate(0); opacity: 1; }
225
+ }
226
+
227
+ @keyframes jux-flip-in-x {
228
+ from { transform: perspective(400px) rotateX(90deg); opacity: 0; }
229
+ to { transform: perspective(400px) rotateX(0); opacity: 1; }
230
+ }
231
+
232
+ @keyframes jux-flip-in-y {
233
+ from { transform: perspective(400px) rotateY(90deg); opacity: 0; }
234
+ to { transform: perspective(400px) rotateY(0); opacity: 1; }
235
+ }
236
+
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
+ @keyframes jux-bounce-in {
251
+ 0% { transform: scale(0); opacity: 0; }
252
+ 50% { transform: scale(1.1); }
253
+ 70% { transform: scale(0.9); }
254
+ 100% { transform: scale(1); opacity: 1; }
255
+ }
256
+
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
+ @keyframes jux-elastic-in {
263
+ 0% { transform: scale(0); }
264
+ 55% { transform: scale(1.2); }
265
+ 70% { transform: scale(0.9); }
266
+ 85% { transform: scale(1.05); }
267
+ 100% { transform: scale(1); }
268
+ }
269
+
270
+ .jux-stack-elastic-in > * {
271
+ animation: jux-elastic-in 0.8s ease-out;
272
+ }
273
+
274
+ /* Blur Animation */
275
+ @keyframes jux-blur-in {
276
+ from { filter: blur(10px); opacity: 0; }
277
+ to { filter: blur(0); opacity: 1; }
278
+ }
279
+
280
+ .jux-stack-blur-in > * {
281
+ animation: jux-blur-in 0.5s ease-out;
282
+ }
283
+
284
+ /* Glow Animation */
285
+ @keyframes jux-glow-pulse {
286
+ 0%, 100% { box-shadow: 0 0 5px rgba(59, 130, 246, 0.5); }
287
+ 50% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.8); }
288
+ }
289
+
290
+ .jux-stack-glow > * {
291
+ animation: jux-glow-pulse 2s ease-in-out infinite;
292
+ }
293
+
294
+ /* Stagger Delay (for sequential animations) */
295
+ .jux-stack-stagger > *:nth-child(1) { animation-delay: 0ms; }
296
+ .jux-stack-stagger > *:nth-child(2) { animation-delay: 100ms; }
297
+ .jux-stack-stagger > *:nth-child(3) { animation-delay: 200ms; }
298
+ .jux-stack-stagger > *:nth-child(4) { animation-delay: 300ms; }
299
+ .jux-stack-stagger > *:nth-child(5) { animation-delay: 400ms; }
300
+ .jux-stack-stagger > *:nth-child(6) { animation-delay: 500ms; }
301
+ .jux-stack-stagger > *:nth-child(7) { animation-delay: 600ms; }
302
+ .jux-stack-stagger > *:nth-child(8) { animation-delay: 700ms; }
303
+ .jux-stack-stagger > *:nth-child(9) { animation-delay: 800ms; }
304
+ .jux-stack-stagger > *:nth-child(10) { animation-delay: 900ms; }
305
+
306
+ /* Hover Transitions (opt-in via .jux-stack-interactive) */
307
+ .jux-stack-interactive > * {
308
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
309
+ cursor: pointer;
310
+ }
311
+
312
+ .jux-stack-interactive > *:hover {
313
+ transform: translateY(-4px);
314
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
315
+ }
316
+
317
+ /* Smooth transitions for all animated properties */
318
+ .jux-stack-smooth,
319
+ .jux-stack-smooth > * {
320
+ transition: all 0.3s ease;
321
+ }
@@ -624,7 +624,6 @@ navigate(location.pathname);
624
624
  <meta charset="UTF-8">
625
625
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
626
626
  <title>JUX App</title>
627
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/juxscript@latest/lib/layouts/default.css">
628
627
  </head>
629
628
  <body>
630
629
  <div id="app"></div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "juxscript",
3
- "version": "1.1.103",
3
+ "version": "1.1.105",
4
4
  "type": "module",
5
5
  "description": "A JavaScript UX authorship platform",
6
6
  "main": "index.js",