@valcis/brand 2.0.4 → 2.0.5
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/README.md +4 -3
- package/dist/index.js +6 -5
- package/dist/index.mjs +6 -5
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -21,8 +21,9 @@ import { Logo } from '@valcis/brand';
|
|
|
21
21
|
// Completo: >valcis|
|
|
22
22
|
<Logo variant="full" size={40} />
|
|
23
23
|
|
|
24
|
-
//
|
|
25
|
-
|
|
24
|
+
// El logo full viene animado por defecto (cursor blink)
|
|
25
|
+
// Para desactivarlo:
|
|
26
|
+
<Logo variant="full" size={32} animated={false} />
|
|
26
27
|
```
|
|
27
28
|
|
|
28
29
|
### Props
|
|
@@ -31,7 +32,7 @@ import { Logo } from '@valcis/brand';
|
|
|
31
32
|
|------|------|---------|-------------|
|
|
32
33
|
| `variant` | `'icon' \| 'full'` | `'icon'` | Variante del logo |
|
|
33
34
|
| `size` | `number \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `24` | Tamaño en px o preset |
|
|
34
|
-
| `animated` | `boolean` | `false` | Animación CSS-only (respeta `prefers-reduced-motion`) |
|
|
35
|
+
| `animated` | `boolean` | `true` (full) / `false` (icon) | Animación CSS-only (respeta `prefers-reduced-motion`) |
|
|
35
36
|
| `accentColor` | `string` | — | Color de brackets/chevron/cursor |
|
|
36
37
|
| `textColor` | `string` | — | Color de letras |
|
|
37
38
|
| `className` | `string` | — | Clase CSS adicional |
|
package/dist/index.js
CHANGED
|
@@ -92,13 +92,14 @@ function resolveSize(size) {
|
|
|
92
92
|
var Logo = ({
|
|
93
93
|
variant = "icon",
|
|
94
94
|
size = 24,
|
|
95
|
-
animated
|
|
95
|
+
animated,
|
|
96
96
|
accentColor,
|
|
97
97
|
textColor,
|
|
98
98
|
className,
|
|
99
99
|
style,
|
|
100
100
|
ariaLabel
|
|
101
101
|
}) => {
|
|
102
|
+
const isAnimated = animated ?? variant === "full";
|
|
102
103
|
const px = resolveSize(size);
|
|
103
104
|
const viewBox = VIEWBOXES[variant] ?? VIEWBOXES.icon;
|
|
104
105
|
const ratio = ASPECT_RATIOS[variant] ?? ASPECT_RATIOS.icon;
|
|
@@ -107,7 +108,7 @@ var Logo = ({
|
|
|
107
108
|
const accent = accentColor ?? "var(--valcis-logo-accent, var(--primary, currentColor))";
|
|
108
109
|
const text = textColor ?? "var(--valcis-logo-text, currentColor)";
|
|
109
110
|
const isDecorative = !ariaLabel;
|
|
110
|
-
const cursorAnimation =
|
|
111
|
+
const cursorAnimation = isAnimated && variant === "full" ? `
|
|
111
112
|
@keyframes valcis-cursor-blink {
|
|
112
113
|
0%, 100% { opacity: 1; }
|
|
113
114
|
50% { opacity: 0; }
|
|
@@ -116,7 +117,7 @@ var Logo = ({
|
|
|
116
117
|
.valcis-cursor-blink { animation: valcis-cursor-blink 1s step-end infinite; }
|
|
117
118
|
}
|
|
118
119
|
` : void 0;
|
|
119
|
-
const pulseAnimation =
|
|
120
|
+
const pulseAnimation = isAnimated && variant === "icon" ? `
|
|
120
121
|
@keyframes valcis-logo-pulse {
|
|
121
122
|
0%, 100% { opacity: 1; }
|
|
122
123
|
50% { opacity: 0.6; }
|
|
@@ -136,7 +137,7 @@ var Logo = ({
|
|
|
136
137
|
fill: "none",
|
|
137
138
|
width,
|
|
138
139
|
height,
|
|
139
|
-
className: [
|
|
140
|
+
className: [isAnimated && variant === "icon" ? "valcis-logo-animated" : "", className].filter(Boolean).join(" ") || void 0,
|
|
140
141
|
style,
|
|
141
142
|
role: "img",
|
|
142
143
|
"aria-hidden": isDecorative ? true : void 0,
|
|
@@ -160,7 +161,7 @@ var Logo = ({
|
|
|
160
161
|
{
|
|
161
162
|
d: CURSOR_PATH,
|
|
162
163
|
fill: accent,
|
|
163
|
-
className:
|
|
164
|
+
className: isAnimated ? "valcis-cursor-blink" : void 0
|
|
164
165
|
}
|
|
165
166
|
) })
|
|
166
167
|
] })
|
package/dist/index.mjs
CHANGED
|
@@ -34,13 +34,14 @@ function resolveSize(size) {
|
|
|
34
34
|
var Logo = ({
|
|
35
35
|
variant = "icon",
|
|
36
36
|
size = 24,
|
|
37
|
-
animated
|
|
37
|
+
animated,
|
|
38
38
|
accentColor,
|
|
39
39
|
textColor,
|
|
40
40
|
className,
|
|
41
41
|
style,
|
|
42
42
|
ariaLabel
|
|
43
43
|
}) => {
|
|
44
|
+
const isAnimated = animated ?? variant === "full";
|
|
44
45
|
const px = resolveSize(size);
|
|
45
46
|
const viewBox = VIEWBOXES[variant] ?? VIEWBOXES.icon;
|
|
46
47
|
const ratio = ASPECT_RATIOS[variant] ?? ASPECT_RATIOS.icon;
|
|
@@ -49,7 +50,7 @@ var Logo = ({
|
|
|
49
50
|
const accent = accentColor ?? "var(--valcis-logo-accent, var(--primary, currentColor))";
|
|
50
51
|
const text = textColor ?? "var(--valcis-logo-text, currentColor)";
|
|
51
52
|
const isDecorative = !ariaLabel;
|
|
52
|
-
const cursorAnimation =
|
|
53
|
+
const cursorAnimation = isAnimated && variant === "full" ? `
|
|
53
54
|
@keyframes valcis-cursor-blink {
|
|
54
55
|
0%, 100% { opacity: 1; }
|
|
55
56
|
50% { opacity: 0; }
|
|
@@ -58,7 +59,7 @@ var Logo = ({
|
|
|
58
59
|
.valcis-cursor-blink { animation: valcis-cursor-blink 1s step-end infinite; }
|
|
59
60
|
}
|
|
60
61
|
` : void 0;
|
|
61
|
-
const pulseAnimation =
|
|
62
|
+
const pulseAnimation = isAnimated && variant === "icon" ? `
|
|
62
63
|
@keyframes valcis-logo-pulse {
|
|
63
64
|
0%, 100% { opacity: 1; }
|
|
64
65
|
50% { opacity: 0.6; }
|
|
@@ -78,7 +79,7 @@ var Logo = ({
|
|
|
78
79
|
fill: "none",
|
|
79
80
|
width,
|
|
80
81
|
height,
|
|
81
|
-
className: [
|
|
82
|
+
className: [isAnimated && variant === "icon" ? "valcis-logo-animated" : "", className].filter(Boolean).join(" ") || void 0,
|
|
82
83
|
style,
|
|
83
84
|
role: "img",
|
|
84
85
|
"aria-hidden": isDecorative ? true : void 0,
|
|
@@ -102,7 +103,7 @@ var Logo = ({
|
|
|
102
103
|
{
|
|
103
104
|
d: CURSOR_PATH,
|
|
104
105
|
fill: accent,
|
|
105
|
-
className:
|
|
106
|
+
className: isAnimated ? "valcis-cursor-blink" : void 0
|
|
106
107
|
}
|
|
107
108
|
) })
|
|
108
109
|
] })
|