@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260916090938 → 0.8.1-dev.20260917085306
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 +43 -3
- package/dist/index.mjs +43 -3
- package/dist/server.js +43 -3
- package/dist/server.mjs +43 -3
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -7563,10 +7563,31 @@ 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 = `border-color: ${borderColor} !important;`;
|
|
7582
|
+
} else {
|
|
7583
|
+
visible = `
|
|
7584
|
+
border-${side}-style: solid !important;
|
|
7585
|
+
border-${side}-width: ${width} !important;
|
|
7586
|
+
border-${side}-color: ${borderColor} !important;
|
|
7587
|
+
`;
|
|
7588
|
+
}
|
|
7569
7589
|
break;
|
|
7590
|
+
}
|
|
7570
7591
|
case "Typewriter":
|
|
7571
7592
|
keyframes = `
|
|
7572
7593
|
@keyframes typewriter { from { width: 0 } to { width: 100% } }
|
|
@@ -7614,6 +7635,24 @@ var AnimationUtility = class {
|
|
|
7614
7635
|
return { start: `translateX(${distance}px)`, end: `translateX(0)` };
|
|
7615
7636
|
}
|
|
7616
7637
|
}
|
|
7638
|
+
// Helper method for border animation direction
|
|
7639
|
+
static getBorderProperty(direction) {
|
|
7640
|
+
switch (direction) {
|
|
7641
|
+
case "left":
|
|
7642
|
+
return "border-left-color";
|
|
7643
|
+
case "right":
|
|
7644
|
+
return "border-right-color";
|
|
7645
|
+
case "up":
|
|
7646
|
+
case "top":
|
|
7647
|
+
return "border-top-color";
|
|
7648
|
+
case "down":
|
|
7649
|
+
case "bottom":
|
|
7650
|
+
return "border-bottom-color";
|
|
7651
|
+
case "all":
|
|
7652
|
+
default:
|
|
7653
|
+
return "border-color";
|
|
7654
|
+
}
|
|
7655
|
+
}
|
|
7617
7656
|
};
|
|
7618
7657
|
var AnimationUtility_default = AnimationUtility;
|
|
7619
7658
|
|
|
@@ -8801,6 +8840,7 @@ var DivContainer = async (props) => {
|
|
|
8801
8840
|
{
|
|
8802
8841
|
animation: hoverAnimation.name,
|
|
8803
8842
|
mode: "hover",
|
|
8843
|
+
cssProperties: props.node.cssProperties,
|
|
8804
8844
|
...hoverAnimation.properties
|
|
8805
8845
|
},
|
|
8806
8846
|
animationSelector
|
package/dist/index.mjs
CHANGED
|
@@ -1337,10 +1337,31 @@ 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 = `border-color: ${borderColor} !important;`;
|
|
1356
|
+
} else {
|
|
1357
|
+
visible = `
|
|
1358
|
+
border-${side}-style: solid !important;
|
|
1359
|
+
border-${side}-width: ${width} !important;
|
|
1360
|
+
border-${side}-color: ${borderColor} !important;
|
|
1361
|
+
`;
|
|
1362
|
+
}
|
|
1343
1363
|
break;
|
|
1364
|
+
}
|
|
1344
1365
|
case "Typewriter":
|
|
1345
1366
|
keyframes = `
|
|
1346
1367
|
@keyframes typewriter { from { width: 0 } to { width: 100% } }
|
|
@@ -1388,6 +1409,24 @@ var AnimationUtility = class {
|
|
|
1388
1409
|
return { start: `translateX(${distance}px)`, end: `translateX(0)` };
|
|
1389
1410
|
}
|
|
1390
1411
|
}
|
|
1412
|
+
// Helper method for border animation direction
|
|
1413
|
+
static getBorderProperty(direction) {
|
|
1414
|
+
switch (direction) {
|
|
1415
|
+
case "left":
|
|
1416
|
+
return "border-left-color";
|
|
1417
|
+
case "right":
|
|
1418
|
+
return "border-right-color";
|
|
1419
|
+
case "up":
|
|
1420
|
+
case "top":
|
|
1421
|
+
return "border-top-color";
|
|
1422
|
+
case "down":
|
|
1423
|
+
case "bottom":
|
|
1424
|
+
return "border-bottom-color";
|
|
1425
|
+
case "all":
|
|
1426
|
+
default:
|
|
1427
|
+
return "border-color";
|
|
1428
|
+
}
|
|
1429
|
+
}
|
|
1391
1430
|
};
|
|
1392
1431
|
var AnimationUtility_default = AnimationUtility;
|
|
1393
1432
|
|
|
@@ -2570,6 +2609,7 @@ var DivContainer = async (props) => {
|
|
|
2570
2609
|
{
|
|
2571
2610
|
animation: hoverAnimation.name,
|
|
2572
2611
|
mode: "hover",
|
|
2612
|
+
cssProperties: props.node.cssProperties,
|
|
2573
2613
|
...hoverAnimation.properties
|
|
2574
2614
|
},
|
|
2575
2615
|
animationSelector
|
package/dist/server.js
CHANGED
|
@@ -7532,10 +7532,31 @@ 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 = `border-color: ${borderColor} !important;`;
|
|
7551
|
+
} else {
|
|
7552
|
+
visible = `
|
|
7553
|
+
border-${side}-style: solid !important;
|
|
7554
|
+
border-${side}-width: ${width} !important;
|
|
7555
|
+
border-${side}-color: ${borderColor} !important;
|
|
7556
|
+
`;
|
|
7557
|
+
}
|
|
7538
7558
|
break;
|
|
7559
|
+
}
|
|
7539
7560
|
case "Typewriter":
|
|
7540
7561
|
keyframes = `
|
|
7541
7562
|
@keyframes typewriter { from { width: 0 } to { width: 100% } }
|
|
@@ -7583,6 +7604,24 @@ var AnimationUtility = class {
|
|
|
7583
7604
|
return { start: `translateX(${distance}px)`, end: `translateX(0)` };
|
|
7584
7605
|
}
|
|
7585
7606
|
}
|
|
7607
|
+
// Helper method for border animation direction
|
|
7608
|
+
static getBorderProperty(direction) {
|
|
7609
|
+
switch (direction) {
|
|
7610
|
+
case "left":
|
|
7611
|
+
return "border-left-color";
|
|
7612
|
+
case "right":
|
|
7613
|
+
return "border-right-color";
|
|
7614
|
+
case "up":
|
|
7615
|
+
case "top":
|
|
7616
|
+
return "border-top-color";
|
|
7617
|
+
case "down":
|
|
7618
|
+
case "bottom":
|
|
7619
|
+
return "border-bottom-color";
|
|
7620
|
+
case "all":
|
|
7621
|
+
default:
|
|
7622
|
+
return "border-color";
|
|
7623
|
+
}
|
|
7624
|
+
}
|
|
7586
7625
|
};
|
|
7587
7626
|
var AnimationUtility_default = AnimationUtility;
|
|
7588
7627
|
|
|
@@ -8770,6 +8809,7 @@ var DivContainer = async (props) => {
|
|
|
8770
8809
|
{
|
|
8771
8810
|
animation: hoverAnimation.name,
|
|
8772
8811
|
mode: "hover",
|
|
8812
|
+
cssProperties: props.node.cssProperties,
|
|
8773
8813
|
...hoverAnimation.properties
|
|
8774
8814
|
},
|
|
8775
8815
|
animationSelector
|
package/dist/server.mjs
CHANGED
|
@@ -1305,10 +1305,31 @@ 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 = `border-color: ${borderColor} !important;`;
|
|
1324
|
+
} else {
|
|
1325
|
+
visible = `
|
|
1326
|
+
border-${side}-style: solid !important;
|
|
1327
|
+
border-${side}-width: ${width} !important;
|
|
1328
|
+
border-${side}-color: ${borderColor} !important;
|
|
1329
|
+
`;
|
|
1330
|
+
}
|
|
1311
1331
|
break;
|
|
1332
|
+
}
|
|
1312
1333
|
case "Typewriter":
|
|
1313
1334
|
keyframes = `
|
|
1314
1335
|
@keyframes typewriter { from { width: 0 } to { width: 100% } }
|
|
@@ -1356,6 +1377,24 @@ var AnimationUtility = class {
|
|
|
1356
1377
|
return { start: `translateX(${distance}px)`, end: `translateX(0)` };
|
|
1357
1378
|
}
|
|
1358
1379
|
}
|
|
1380
|
+
// Helper method for border animation direction
|
|
1381
|
+
static getBorderProperty(direction) {
|
|
1382
|
+
switch (direction) {
|
|
1383
|
+
case "left":
|
|
1384
|
+
return "border-left-color";
|
|
1385
|
+
case "right":
|
|
1386
|
+
return "border-right-color";
|
|
1387
|
+
case "up":
|
|
1388
|
+
case "top":
|
|
1389
|
+
return "border-top-color";
|
|
1390
|
+
case "down":
|
|
1391
|
+
case "bottom":
|
|
1392
|
+
return "border-bottom-color";
|
|
1393
|
+
case "all":
|
|
1394
|
+
default:
|
|
1395
|
+
return "border-color";
|
|
1396
|
+
}
|
|
1397
|
+
}
|
|
1359
1398
|
};
|
|
1360
1399
|
var AnimationUtility_default = AnimationUtility;
|
|
1361
1400
|
|
|
@@ -2538,6 +2577,7 @@ var DivContainer = async (props) => {
|
|
|
2538
2577
|
{
|
|
2539
2578
|
animation: hoverAnimation.name,
|
|
2540
2579
|
mode: "hover",
|
|
2580
|
+
cssProperties: props.node.cssProperties,
|
|
2541
2581
|
...hoverAnimation.properties
|
|
2542
2582
|
},
|
|
2543
2583
|
animationSelector
|