@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260916090938 → 0.8.1-dev.20260917091931
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/dist/index.js +47 -3
- package/dist/index.mjs +47 -3
- package/dist/server.js +47 -3
- package/dist/server.mjs +47 -3
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -7563,10 +7563,35 @@ var AnimationUtility = class {
|
|
|
7563
7563
|
base = `transition: background-color ${duration}ms ${easing} ${delay}ms;`;
|
|
7564
7564
|
visible = `background-color: ${backgroundColor};`;
|
|
7565
7565
|
break;
|
|
7566
|
-
case "Border":
|
|
7567
|
-
|
|
7568
|
-
|
|
7566
|
+
// case "Border":
|
|
7567
|
+
// base = `transition: border-color ${duration}ms ${easing} ${delay}ms;`;
|
|
7568
|
+
// visible = `border-color: ${borderColor};`;
|
|
7569
|
+
// break;
|
|
7570
|
+
// case "Border":
|
|
7571
|
+
// const borderProp = this.getBorderProperty(direction);
|
|
7572
|
+
// base = `transition: ${borderProp} ${duration}ms ${easing} ${delay}ms;`;
|
|
7573
|
+
// visible = `${borderProp}: ${borderColor};`;
|
|
7574
|
+
// break;
|
|
7575
|
+
case "Border": {
|
|
7576
|
+
const side = direction === "up" ? "top" : direction === "down" ? "bottom" : direction;
|
|
7577
|
+
const css = config.cssProperties || {};
|
|
7578
|
+
const width = css["border-top-width"] || css["border-bottom-width"] || css["border-left-width"] || css["border-right-width"] || css["border-width"] || "2px";
|
|
7579
|
+
base = `transition: all ${duration}ms ${easing} ${delay}ms;`;
|
|
7580
|
+
if (side === "all" || !side) {
|
|
7581
|
+
visible = `
|
|
7582
|
+
border-style: solid !important;
|
|
7583
|
+
border-width: ${width} !important;
|
|
7584
|
+
border-color: ${borderColor} !important;
|
|
7585
|
+
`;
|
|
7586
|
+
} else {
|
|
7587
|
+
visible = `
|
|
7588
|
+
border-${side}-style: solid !important;
|
|
7589
|
+
border-${side}-width: ${width} !important;
|
|
7590
|
+
border-${side}-color: ${borderColor} !important;
|
|
7591
|
+
`;
|
|
7592
|
+
}
|
|
7569
7593
|
break;
|
|
7594
|
+
}
|
|
7570
7595
|
case "Typewriter":
|
|
7571
7596
|
keyframes = `
|
|
7572
7597
|
@keyframes typewriter { from { width: 0 } to { width: 100% } }
|
|
@@ -7614,6 +7639,24 @@ var AnimationUtility = class {
|
|
|
7614
7639
|
return { start: `translateX(${distance}px)`, end: `translateX(0)` };
|
|
7615
7640
|
}
|
|
7616
7641
|
}
|
|
7642
|
+
// Helper method for border animation direction
|
|
7643
|
+
static getBorderProperty(direction) {
|
|
7644
|
+
switch (direction) {
|
|
7645
|
+
case "left":
|
|
7646
|
+
return "border-left-color";
|
|
7647
|
+
case "right":
|
|
7648
|
+
return "border-right-color";
|
|
7649
|
+
case "up":
|
|
7650
|
+
case "top":
|
|
7651
|
+
return "border-top-color";
|
|
7652
|
+
case "down":
|
|
7653
|
+
case "bottom":
|
|
7654
|
+
return "border-bottom-color";
|
|
7655
|
+
case "all":
|
|
7656
|
+
default:
|
|
7657
|
+
return "border-color";
|
|
7658
|
+
}
|
|
7659
|
+
}
|
|
7617
7660
|
};
|
|
7618
7661
|
var AnimationUtility_default = AnimationUtility;
|
|
7619
7662
|
|
|
@@ -8801,6 +8844,7 @@ var DivContainer = async (props) => {
|
|
|
8801
8844
|
{
|
|
8802
8845
|
animation: hoverAnimation.name,
|
|
8803
8846
|
mode: "hover",
|
|
8847
|
+
cssProperties: props.node.cssProperties,
|
|
8804
8848
|
...hoverAnimation.properties
|
|
8805
8849
|
},
|
|
8806
8850
|
animationSelector
|
package/dist/index.mjs
CHANGED
|
@@ -1337,10 +1337,35 @@ var AnimationUtility = class {
|
|
|
1337
1337
|
base = `transition: background-color ${duration}ms ${easing} ${delay}ms;`;
|
|
1338
1338
|
visible = `background-color: ${backgroundColor};`;
|
|
1339
1339
|
break;
|
|
1340
|
-
case "Border":
|
|
1341
|
-
|
|
1342
|
-
|
|
1340
|
+
// case "Border":
|
|
1341
|
+
// base = `transition: border-color ${duration}ms ${easing} ${delay}ms;`;
|
|
1342
|
+
// visible = `border-color: ${borderColor};`;
|
|
1343
|
+
// break;
|
|
1344
|
+
// case "Border":
|
|
1345
|
+
// const borderProp = this.getBorderProperty(direction);
|
|
1346
|
+
// base = `transition: ${borderProp} ${duration}ms ${easing} ${delay}ms;`;
|
|
1347
|
+
// visible = `${borderProp}: ${borderColor};`;
|
|
1348
|
+
// break;
|
|
1349
|
+
case "Border": {
|
|
1350
|
+
const side = direction === "up" ? "top" : direction === "down" ? "bottom" : direction;
|
|
1351
|
+
const css = config.cssProperties || {};
|
|
1352
|
+
const width = css["border-top-width"] || css["border-bottom-width"] || css["border-left-width"] || css["border-right-width"] || css["border-width"] || "2px";
|
|
1353
|
+
base = `transition: all ${duration}ms ${easing} ${delay}ms;`;
|
|
1354
|
+
if (side === "all" || !side) {
|
|
1355
|
+
visible = `
|
|
1356
|
+
border-style: solid !important;
|
|
1357
|
+
border-width: ${width} !important;
|
|
1358
|
+
border-color: ${borderColor} !important;
|
|
1359
|
+
`;
|
|
1360
|
+
} else {
|
|
1361
|
+
visible = `
|
|
1362
|
+
border-${side}-style: solid !important;
|
|
1363
|
+
border-${side}-width: ${width} !important;
|
|
1364
|
+
border-${side}-color: ${borderColor} !important;
|
|
1365
|
+
`;
|
|
1366
|
+
}
|
|
1343
1367
|
break;
|
|
1368
|
+
}
|
|
1344
1369
|
case "Typewriter":
|
|
1345
1370
|
keyframes = `
|
|
1346
1371
|
@keyframes typewriter { from { width: 0 } to { width: 100% } }
|
|
@@ -1388,6 +1413,24 @@ var AnimationUtility = class {
|
|
|
1388
1413
|
return { start: `translateX(${distance}px)`, end: `translateX(0)` };
|
|
1389
1414
|
}
|
|
1390
1415
|
}
|
|
1416
|
+
// Helper method for border animation direction
|
|
1417
|
+
static getBorderProperty(direction) {
|
|
1418
|
+
switch (direction) {
|
|
1419
|
+
case "left":
|
|
1420
|
+
return "border-left-color";
|
|
1421
|
+
case "right":
|
|
1422
|
+
return "border-right-color";
|
|
1423
|
+
case "up":
|
|
1424
|
+
case "top":
|
|
1425
|
+
return "border-top-color";
|
|
1426
|
+
case "down":
|
|
1427
|
+
case "bottom":
|
|
1428
|
+
return "border-bottom-color";
|
|
1429
|
+
case "all":
|
|
1430
|
+
default:
|
|
1431
|
+
return "border-color";
|
|
1432
|
+
}
|
|
1433
|
+
}
|
|
1391
1434
|
};
|
|
1392
1435
|
var AnimationUtility_default = AnimationUtility;
|
|
1393
1436
|
|
|
@@ -2570,6 +2613,7 @@ var DivContainer = async (props) => {
|
|
|
2570
2613
|
{
|
|
2571
2614
|
animation: hoverAnimation.name,
|
|
2572
2615
|
mode: "hover",
|
|
2616
|
+
cssProperties: props.node.cssProperties,
|
|
2573
2617
|
...hoverAnimation.properties
|
|
2574
2618
|
},
|
|
2575
2619
|
animationSelector
|
package/dist/server.js
CHANGED
|
@@ -7532,10 +7532,35 @@ var AnimationUtility = class {
|
|
|
7532
7532
|
base = `transition: background-color ${duration}ms ${easing} ${delay}ms;`;
|
|
7533
7533
|
visible = `background-color: ${backgroundColor};`;
|
|
7534
7534
|
break;
|
|
7535
|
-
case "Border":
|
|
7536
|
-
|
|
7537
|
-
|
|
7535
|
+
// case "Border":
|
|
7536
|
+
// base = `transition: border-color ${duration}ms ${easing} ${delay}ms;`;
|
|
7537
|
+
// visible = `border-color: ${borderColor};`;
|
|
7538
|
+
// break;
|
|
7539
|
+
// case "Border":
|
|
7540
|
+
// const borderProp = this.getBorderProperty(direction);
|
|
7541
|
+
// base = `transition: ${borderProp} ${duration}ms ${easing} ${delay}ms;`;
|
|
7542
|
+
// visible = `${borderProp}: ${borderColor};`;
|
|
7543
|
+
// break;
|
|
7544
|
+
case "Border": {
|
|
7545
|
+
const side = direction === "up" ? "top" : direction === "down" ? "bottom" : direction;
|
|
7546
|
+
const css = config.cssProperties || {};
|
|
7547
|
+
const width = css["border-top-width"] || css["border-bottom-width"] || css["border-left-width"] || css["border-right-width"] || css["border-width"] || "2px";
|
|
7548
|
+
base = `transition: all ${duration}ms ${easing} ${delay}ms;`;
|
|
7549
|
+
if (side === "all" || !side) {
|
|
7550
|
+
visible = `
|
|
7551
|
+
border-style: solid !important;
|
|
7552
|
+
border-width: ${width} !important;
|
|
7553
|
+
border-color: ${borderColor} !important;
|
|
7554
|
+
`;
|
|
7555
|
+
} else {
|
|
7556
|
+
visible = `
|
|
7557
|
+
border-${side}-style: solid !important;
|
|
7558
|
+
border-${side}-width: ${width} !important;
|
|
7559
|
+
border-${side}-color: ${borderColor} !important;
|
|
7560
|
+
`;
|
|
7561
|
+
}
|
|
7538
7562
|
break;
|
|
7563
|
+
}
|
|
7539
7564
|
case "Typewriter":
|
|
7540
7565
|
keyframes = `
|
|
7541
7566
|
@keyframes typewriter { from { width: 0 } to { width: 100% } }
|
|
@@ -7583,6 +7608,24 @@ var AnimationUtility = class {
|
|
|
7583
7608
|
return { start: `translateX(${distance}px)`, end: `translateX(0)` };
|
|
7584
7609
|
}
|
|
7585
7610
|
}
|
|
7611
|
+
// Helper method for border animation direction
|
|
7612
|
+
static getBorderProperty(direction) {
|
|
7613
|
+
switch (direction) {
|
|
7614
|
+
case "left":
|
|
7615
|
+
return "border-left-color";
|
|
7616
|
+
case "right":
|
|
7617
|
+
return "border-right-color";
|
|
7618
|
+
case "up":
|
|
7619
|
+
case "top":
|
|
7620
|
+
return "border-top-color";
|
|
7621
|
+
case "down":
|
|
7622
|
+
case "bottom":
|
|
7623
|
+
return "border-bottom-color";
|
|
7624
|
+
case "all":
|
|
7625
|
+
default:
|
|
7626
|
+
return "border-color";
|
|
7627
|
+
}
|
|
7628
|
+
}
|
|
7586
7629
|
};
|
|
7587
7630
|
var AnimationUtility_default = AnimationUtility;
|
|
7588
7631
|
|
|
@@ -8770,6 +8813,7 @@ var DivContainer = async (props) => {
|
|
|
8770
8813
|
{
|
|
8771
8814
|
animation: hoverAnimation.name,
|
|
8772
8815
|
mode: "hover",
|
|
8816
|
+
cssProperties: props.node.cssProperties,
|
|
8773
8817
|
...hoverAnimation.properties
|
|
8774
8818
|
},
|
|
8775
8819
|
animationSelector
|
package/dist/server.mjs
CHANGED
|
@@ -1305,10 +1305,35 @@ var AnimationUtility = class {
|
|
|
1305
1305
|
base = `transition: background-color ${duration}ms ${easing} ${delay}ms;`;
|
|
1306
1306
|
visible = `background-color: ${backgroundColor};`;
|
|
1307
1307
|
break;
|
|
1308
|
-
case "Border":
|
|
1309
|
-
|
|
1310
|
-
|
|
1308
|
+
// case "Border":
|
|
1309
|
+
// base = `transition: border-color ${duration}ms ${easing} ${delay}ms;`;
|
|
1310
|
+
// visible = `border-color: ${borderColor};`;
|
|
1311
|
+
// break;
|
|
1312
|
+
// case "Border":
|
|
1313
|
+
// const borderProp = this.getBorderProperty(direction);
|
|
1314
|
+
// base = `transition: ${borderProp} ${duration}ms ${easing} ${delay}ms;`;
|
|
1315
|
+
// visible = `${borderProp}: ${borderColor};`;
|
|
1316
|
+
// break;
|
|
1317
|
+
case "Border": {
|
|
1318
|
+
const side = direction === "up" ? "top" : direction === "down" ? "bottom" : direction;
|
|
1319
|
+
const css = config.cssProperties || {};
|
|
1320
|
+
const width = css["border-top-width"] || css["border-bottom-width"] || css["border-left-width"] || css["border-right-width"] || css["border-width"] || "2px";
|
|
1321
|
+
base = `transition: all ${duration}ms ${easing} ${delay}ms;`;
|
|
1322
|
+
if (side === "all" || !side) {
|
|
1323
|
+
visible = `
|
|
1324
|
+
border-style: solid !important;
|
|
1325
|
+
border-width: ${width} !important;
|
|
1326
|
+
border-color: ${borderColor} !important;
|
|
1327
|
+
`;
|
|
1328
|
+
} else {
|
|
1329
|
+
visible = `
|
|
1330
|
+
border-${side}-style: solid !important;
|
|
1331
|
+
border-${side}-width: ${width} !important;
|
|
1332
|
+
border-${side}-color: ${borderColor} !important;
|
|
1333
|
+
`;
|
|
1334
|
+
}
|
|
1311
1335
|
break;
|
|
1336
|
+
}
|
|
1312
1337
|
case "Typewriter":
|
|
1313
1338
|
keyframes = `
|
|
1314
1339
|
@keyframes typewriter { from { width: 0 } to { width: 100% } }
|
|
@@ -1356,6 +1381,24 @@ var AnimationUtility = class {
|
|
|
1356
1381
|
return { start: `translateX(${distance}px)`, end: `translateX(0)` };
|
|
1357
1382
|
}
|
|
1358
1383
|
}
|
|
1384
|
+
// Helper method for border animation direction
|
|
1385
|
+
static getBorderProperty(direction) {
|
|
1386
|
+
switch (direction) {
|
|
1387
|
+
case "left":
|
|
1388
|
+
return "border-left-color";
|
|
1389
|
+
case "right":
|
|
1390
|
+
return "border-right-color";
|
|
1391
|
+
case "up":
|
|
1392
|
+
case "top":
|
|
1393
|
+
return "border-top-color";
|
|
1394
|
+
case "down":
|
|
1395
|
+
case "bottom":
|
|
1396
|
+
return "border-bottom-color";
|
|
1397
|
+
case "all":
|
|
1398
|
+
default:
|
|
1399
|
+
return "border-color";
|
|
1400
|
+
}
|
|
1401
|
+
}
|
|
1359
1402
|
};
|
|
1360
1403
|
var AnimationUtility_default = AnimationUtility;
|
|
1361
1404
|
|
|
@@ -2538,6 +2581,7 @@ var DivContainer = async (props) => {
|
|
|
2538
2581
|
{
|
|
2539
2582
|
animation: hoverAnimation.name,
|
|
2540
2583
|
mode: "hover",
|
|
2584
|
+
cssProperties: props.node.cssProperties,
|
|
2541
2585
|
...hoverAnimation.properties
|
|
2542
2586
|
},
|
|
2543
2587
|
animationSelector
|