@synthex-engineers/refined-tech 1.0.0 → 1.0.1
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/angular/index.cjs.map +1 -1
- package/dist/angular/index.js.map +1 -1
- package/dist/astro/components/ClientTrustCard.astro +79 -79
- package/dist/astro/components/HelpTooltip.astro +119 -119
- package/dist/index.cjs +15 -15
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +15 -15
- package/dist/index.js.map +1 -1
- package/dist/react/index.cjs.map +1 -1
- package/dist/react/index.js.map +1 -1
- package/dist/registry/components.json +12 -12
- package/dist/tokens/tailwind-preset.d.ts +1 -1
- package/package.json +8 -1
|
@@ -1,79 +1,79 @@
|
|
|
1
|
-
---
|
|
2
|
-
interface Props {
|
|
3
|
-
clientName?: string;
|
|
4
|
-
location?: string;
|
|
5
|
-
href?: string;
|
|
6
|
-
logoSrc?: string;
|
|
7
|
-
logoDarkSrc?: string;
|
|
8
|
-
className?: string;
|
|
9
|
-
clientNameI18nKey?: string;
|
|
10
|
-
locationI18nKey?: string;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
const {
|
|
14
|
-
clientName = "SD-M GmbH",
|
|
15
|
-
location = "Alemania",
|
|
16
|
-
href = "https://sd-kpi.com/",
|
|
17
|
-
logoSrc = "/brand/sd-m-logo.png",
|
|
18
|
-
logoDarkSrc = "/brand/sd-m-logo-dark.png",
|
|
19
|
-
className = "",
|
|
20
|
-
clientNameI18nKey = "client_trust.client_name",
|
|
21
|
-
locationI18nKey = "client_trust.client_location",
|
|
22
|
-
} = Astro.props;
|
|
23
|
-
---
|
|
24
|
-
|
|
25
|
-
<a
|
|
26
|
-
href={href}
|
|
27
|
-
target="_blank"
|
|
28
|
-
rel="noopener noreferrer"
|
|
29
|
-
class={`group inline-flex items-center gap-4 sm:gap-5 px-6 sm:px-8 py-3.5 sm:py-4 rounded-2xl bg-slateSurface/60 border border-slateBorder hover:border-pistachio/50 hover:bg-slateCard/80 hover:scale-105 active:scale-95 transition-all duration-300 shadow-sm cursor-pointer font-sans ${className}`}
|
|
30
|
-
aria-label={`${clientName}${location ? ` - ${location}` : ''}`}
|
|
31
|
-
>
|
|
32
|
-
{logoDarkSrc ? (
|
|
33
|
-
<picture>
|
|
34
|
-
<source srcset={logoDarkSrc} />
|
|
35
|
-
<img
|
|
36
|
-
src={logoSrc}
|
|
37
|
-
alt={clientName}
|
|
38
|
-
class="h-7 sm:h-8 w-auto object-contain opacity-90 group-hover:opacity-100 transition-opacity"
|
|
39
|
-
width="120"
|
|
40
|
-
height="44"
|
|
41
|
-
loading="lazy"
|
|
42
|
-
/>
|
|
43
|
-
</picture>
|
|
44
|
-
) : logoSrc ? (
|
|
45
|
-
<img
|
|
46
|
-
src={logoSrc}
|
|
47
|
-
alt={clientName}
|
|
48
|
-
class="h-7 sm:h-8 w-auto object-contain opacity-90 group-hover:opacity-100 transition-opacity"
|
|
49
|
-
width="120"
|
|
50
|
-
height="44"
|
|
51
|
-
loading="lazy"
|
|
52
|
-
/>
|
|
53
|
-
) : (
|
|
54
|
-
<div class="w-8 h-8 rounded-lg bg-slateSurface border border-slateBorder flex items-center justify-center text-pistachio shrink-0">
|
|
55
|
-
<svg class="w-5 h-5 text-pistachio transition-transform duration-300 group-hover:scale-105" viewBox="0 0 32 32" fill="none">
|
|
56
|
-
<path d="M7 21L12 16L16 19L24 10" stroke="#E0F9B5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
57
|
-
<circle cx="24" cy="10" r="2" fill="#E0F9B5" />
|
|
58
|
-
<path d="M19 10H24V15" stroke="#E0F9B5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
59
|
-
</svg>
|
|
60
|
-
</div>
|
|
61
|
-
)}
|
|
62
|
-
|
|
63
|
-
<div class="text-left border-l border-slateBorder/60 pl-4 sm:pl-5">
|
|
64
|
-
<span
|
|
65
|
-
class="block font-display font-bold text-base sm:text-lg text-white group-hover:text-pistachio transition-colors leading-tight"
|
|
66
|
-
data-i18n={clientNameI18nKey}
|
|
67
|
-
>
|
|
68
|
-
{clientName}
|
|
69
|
-
</span>
|
|
70
|
-
{location && (
|
|
71
|
-
<span
|
|
72
|
-
class="block text-sm font-sans text-muted leading-tight mt-0.5"
|
|
73
|
-
data-i18n={locationI18nKey}
|
|
74
|
-
>
|
|
75
|
-
{location}
|
|
76
|
-
</span>
|
|
77
|
-
)}
|
|
78
|
-
</div>
|
|
79
|
-
</a>
|
|
1
|
+
---
|
|
2
|
+
interface Props {
|
|
3
|
+
clientName?: string;
|
|
4
|
+
location?: string;
|
|
5
|
+
href?: string;
|
|
6
|
+
logoSrc?: string;
|
|
7
|
+
logoDarkSrc?: string;
|
|
8
|
+
className?: string;
|
|
9
|
+
clientNameI18nKey?: string;
|
|
10
|
+
locationI18nKey?: string;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
const {
|
|
14
|
+
clientName = "SD-M GmbH",
|
|
15
|
+
location = "Alemania",
|
|
16
|
+
href = "https://sd-kpi.com/",
|
|
17
|
+
logoSrc = "/brand/sd-m-logo.png",
|
|
18
|
+
logoDarkSrc = "/brand/sd-m-logo-dark.png",
|
|
19
|
+
className = "",
|
|
20
|
+
clientNameI18nKey = "client_trust.client_name",
|
|
21
|
+
locationI18nKey = "client_trust.client_location",
|
|
22
|
+
} = Astro.props;
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
<a
|
|
26
|
+
href={href}
|
|
27
|
+
target="_blank"
|
|
28
|
+
rel="noopener noreferrer"
|
|
29
|
+
class={`group inline-flex items-center gap-4 sm:gap-5 px-6 sm:px-8 py-3.5 sm:py-4 rounded-2xl bg-slateSurface/60 border border-slateBorder hover:border-pistachio/50 hover:bg-slateCard/80 hover:scale-105 active:scale-95 transition-all duration-300 shadow-sm cursor-pointer font-sans ${className}`}
|
|
30
|
+
aria-label={`${clientName}${location ? ` - ${location}` : ''}`}
|
|
31
|
+
>
|
|
32
|
+
{logoDarkSrc ? (
|
|
33
|
+
<picture>
|
|
34
|
+
<source srcset={logoDarkSrc} />
|
|
35
|
+
<img
|
|
36
|
+
src={logoSrc}
|
|
37
|
+
alt={clientName}
|
|
38
|
+
class="h-7 sm:h-8 w-auto object-contain opacity-90 group-hover:opacity-100 transition-opacity"
|
|
39
|
+
width="120"
|
|
40
|
+
height="44"
|
|
41
|
+
loading="lazy"
|
|
42
|
+
/>
|
|
43
|
+
</picture>
|
|
44
|
+
) : logoSrc ? (
|
|
45
|
+
<img
|
|
46
|
+
src={logoSrc}
|
|
47
|
+
alt={clientName}
|
|
48
|
+
class="h-7 sm:h-8 w-auto object-contain opacity-90 group-hover:opacity-100 transition-opacity"
|
|
49
|
+
width="120"
|
|
50
|
+
height="44"
|
|
51
|
+
loading="lazy"
|
|
52
|
+
/>
|
|
53
|
+
) : (
|
|
54
|
+
<div class="w-8 h-8 rounded-lg bg-slateSurface border border-slateBorder flex items-center justify-center text-pistachio shrink-0">
|
|
55
|
+
<svg class="w-5 h-5 text-pistachio transition-transform duration-300 group-hover:scale-105" viewBox="0 0 32 32" fill="none">
|
|
56
|
+
<path d="M7 21L12 16L16 19L24 10" stroke="#E0F9B5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
57
|
+
<circle cx="24" cy="10" r="2" fill="#E0F9B5" />
|
|
58
|
+
<path d="M19 10H24V15" stroke="#E0F9B5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
59
|
+
</svg>
|
|
60
|
+
</div>
|
|
61
|
+
)}
|
|
62
|
+
|
|
63
|
+
<div class="text-left border-l border-slateBorder/60 pl-4 sm:pl-5">
|
|
64
|
+
<span
|
|
65
|
+
class="block font-display font-bold text-base sm:text-lg text-white group-hover:text-pistachio transition-colors leading-tight"
|
|
66
|
+
data-i18n={clientNameI18nKey}
|
|
67
|
+
>
|
|
68
|
+
{clientName}
|
|
69
|
+
</span>
|
|
70
|
+
{location && (
|
|
71
|
+
<span
|
|
72
|
+
class="block text-sm font-sans text-muted leading-tight mt-0.5"
|
|
73
|
+
data-i18n={locationI18nKey}
|
|
74
|
+
>
|
|
75
|
+
{location}
|
|
76
|
+
</span>
|
|
77
|
+
)}
|
|
78
|
+
</div>
|
|
79
|
+
</a>
|
|
@@ -1,119 +1,119 @@
|
|
|
1
|
-
---
|
|
2
|
-
interface Props {
|
|
3
|
-
title: string;
|
|
4
|
-
description: string;
|
|
5
|
-
titleKey?: string;
|
|
6
|
-
descKey?: string;
|
|
7
|
-
align?: 'left' | 'center' | 'right';
|
|
8
|
-
className?: string;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
const {
|
|
12
|
-
title,
|
|
13
|
-
description,
|
|
14
|
-
titleKey,
|
|
15
|
-
descKey,
|
|
16
|
-
align = 'center',
|
|
17
|
-
className = '',
|
|
18
|
-
} = Astro.props;
|
|
19
|
-
|
|
20
|
-
const alignClasses = {
|
|
21
|
-
left: 'left-0 translate-x-0',
|
|
22
|
-
center: 'left-1/2 -translate-x-1/2',
|
|
23
|
-
right: 'right-0 translate-x-0',
|
|
24
|
-
}[align];
|
|
25
|
-
|
|
26
|
-
const arrowAlignClasses = {
|
|
27
|
-
left: 'left-3',
|
|
28
|
-
center: 'left-1/2 -translate-x-1/2',
|
|
29
|
-
right: 'right-3',
|
|
30
|
-
}[align];
|
|
31
|
-
---
|
|
32
|
-
|
|
33
|
-
<span class={`relative inline-flex items-center group/bubble ml-1.5 align-middle group-hover/bubble:z-50 group-focus-within/bubble:z-50 ${className}`}>
|
|
34
|
-
<button
|
|
35
|
-
type="button"
|
|
36
|
-
class="info-bubble-trigger w-4 h-4 rounded-full bg-white/10 hover:bg-brand-pistachio/20 text-white/70 hover:text-brand-pistachio border border-white/20 hover:border-brand-pistachio/40 text-xs font-mono font-bold inline-flex items-center justify-center cursor-help transition-all duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-brand-pistachio"
|
|
37
|
-
aria-label={`${title}: ${description}`}
|
|
38
|
-
>
|
|
39
|
-
?
|
|
40
|
-
</button>
|
|
41
|
-
|
|
42
|
-
<!-- Popover Flotante Accesible (Hover & Focus) con fondo sólido opaco y contención -->
|
|
43
|
-
<span
|
|
44
|
-
role="tooltip"
|
|
45
|
-
class={`info-bubble-tooltip absolute bottom-full ${alignClasses} mb-2.5 w-64 sm:w-72 p-3.5 rounded-xl bg-charcoal border border-white/20 text-left shadow-2xl z-[100] pointer-events-none opacity-0 translate-y-1 group-hover/bubble:opacity-100 group-hover/bubble:pointer-events-auto group-hover/bubble:translate-y-0 group-focus-within/bubble:opacity-100 group-focus-within/bubble:pointer-events-auto group-focus-within/bubble:translate-y-0 transition-all duration-200 backdrop-blur-xl`}
|
|
46
|
-
>
|
|
47
|
-
<span class="block text-xs font-display font-bold text-brand-pistachio mb-1" data-i18n={titleKey}>
|
|
48
|
-
{title}
|
|
49
|
-
</span>
|
|
50
|
-
<span class="block text-xs font-body text-white/90 leading-relaxed" data-i18n={descKey}>
|
|
51
|
-
{description}
|
|
52
|
-
</span>
|
|
53
|
-
|
|
54
|
-
<!-- Flecha indicadora inferior -->
|
|
55
|
-
<span
|
|
56
|
-
class={`info-bubble-arrow absolute top-full ${arrowAlignClasses} -mt-[1px] border-4 border-transparent border-t-charcoal`}
|
|
57
|
-
></span>
|
|
58
|
-
</span>
|
|
59
|
-
</span>
|
|
60
|
-
|
|
61
|
-
<script>
|
|
62
|
-
function initHelpTooltips() {
|
|
63
|
-
const triggers = document.querySelectorAll<HTMLElement>('.info-bubble-trigger');
|
|
64
|
-
|
|
65
|
-
triggers.forEach((trigger) => {
|
|
66
|
-
if ((trigger as any).__infoBubbleBound) return;
|
|
67
|
-
(trigger as any).__infoBubbleBound = true;
|
|
68
|
-
|
|
69
|
-
const tooltip = trigger.parentElement?.querySelector<HTMLElement>('.info-bubble-tooltip');
|
|
70
|
-
if (!tooltip) return;
|
|
71
|
-
|
|
72
|
-
function repositionTooltip() {
|
|
73
|
-
if (!tooltip) return;
|
|
74
|
-
tooltip.style.removeProperty('left');
|
|
75
|
-
tooltip.style.removeProperty('right');
|
|
76
|
-
tooltip.style.removeProperty('transform');
|
|
77
|
-
|
|
78
|
-
requestAnimationFrame(() => {
|
|
79
|
-
const rect = tooltip.getBoundingClientRect();
|
|
80
|
-
const viewportWidth = window.innerWidth;
|
|
81
|
-
const margin = 16;
|
|
82
|
-
|
|
83
|
-
// Corrección si se sale por la derecha
|
|
84
|
-
if (rect.right > viewportWidth - margin) {
|
|
85
|
-
const overflow = rect.right - viewportWidth + margin;
|
|
86
|
-
tooltip.style.transform = `translateX(-${overflow}px)`;
|
|
87
|
-
} else if (rect.left < margin) {
|
|
88
|
-
const overflow = margin - rect.left;
|
|
89
|
-
tooltip.style.transform = `translateX(${overflow}px)`;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
// Inversión vertical si no cabe por arriba
|
|
93
|
-
const arrow = tooltip.querySelector<HTMLElement>('.info-bubble-arrow');
|
|
94
|
-
if (rect.top < 60) {
|
|
95
|
-
tooltip.classList.remove('bottom-full', 'mb-2.5');
|
|
96
|
-
tooltip.classList.add('top-full', 'mt-2.5');
|
|
97
|
-
if (arrow) {
|
|
98
|
-
arrow.classList.remove('top-full', '-mt-[1px]', 'border-t-charcoal');
|
|
99
|
-
arrow.classList.add('bottom-full', '-mb-[1px]', 'border-b-charcoal');
|
|
100
|
-
}
|
|
101
|
-
} else {
|
|
102
|
-
tooltip.classList.remove('top-full', 'mt-2.5');
|
|
103
|
-
tooltip.classList.add('bottom-full', 'mb-2.5');
|
|
104
|
-
if (arrow) {
|
|
105
|
-
arrow.classList.remove('bottom-full', '-mb-[1px]', 'border-b-charcoal');
|
|
106
|
-
arrow.classList.add('top-full', '-mt-[1px]', 'border-t-charcoal');
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
});
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
trigger.addEventListener('mouseenter', repositionTooltip);
|
|
113
|
-
trigger.addEventListener('focus', repositionTooltip);
|
|
114
|
-
});
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
initHelpTooltips();
|
|
118
|
-
document.addEventListener('astro:page-load', initHelpTooltips);
|
|
119
|
-
</script>
|
|
1
|
+
---
|
|
2
|
+
interface Props {
|
|
3
|
+
title: string;
|
|
4
|
+
description: string;
|
|
5
|
+
titleKey?: string;
|
|
6
|
+
descKey?: string;
|
|
7
|
+
align?: 'left' | 'center' | 'right';
|
|
8
|
+
className?: string;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
const {
|
|
12
|
+
title,
|
|
13
|
+
description,
|
|
14
|
+
titleKey,
|
|
15
|
+
descKey,
|
|
16
|
+
align = 'center',
|
|
17
|
+
className = '',
|
|
18
|
+
} = Astro.props;
|
|
19
|
+
|
|
20
|
+
const alignClasses = {
|
|
21
|
+
left: 'left-0 translate-x-0',
|
|
22
|
+
center: 'left-1/2 -translate-x-1/2',
|
|
23
|
+
right: 'right-0 translate-x-0',
|
|
24
|
+
}[align];
|
|
25
|
+
|
|
26
|
+
const arrowAlignClasses = {
|
|
27
|
+
left: 'left-3',
|
|
28
|
+
center: 'left-1/2 -translate-x-1/2',
|
|
29
|
+
right: 'right-3',
|
|
30
|
+
}[align];
|
|
31
|
+
---
|
|
32
|
+
|
|
33
|
+
<span class={`relative inline-flex items-center group/bubble ml-1.5 align-middle group-hover/bubble:z-50 group-focus-within/bubble:z-50 ${className}`}>
|
|
34
|
+
<button
|
|
35
|
+
type="button"
|
|
36
|
+
class="info-bubble-trigger w-4 h-4 rounded-full bg-white/10 hover:bg-brand-pistachio/20 text-white/70 hover:text-brand-pistachio border border-white/20 hover:border-brand-pistachio/40 text-xs font-mono font-bold inline-flex items-center justify-center cursor-help transition-all duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-brand-pistachio"
|
|
37
|
+
aria-label={`${title}: ${description}`}
|
|
38
|
+
>
|
|
39
|
+
?
|
|
40
|
+
</button>
|
|
41
|
+
|
|
42
|
+
<!-- Popover Flotante Accesible (Hover & Focus) con fondo sólido opaco y contención -->
|
|
43
|
+
<span
|
|
44
|
+
role="tooltip"
|
|
45
|
+
class={`info-bubble-tooltip absolute bottom-full ${alignClasses} mb-2.5 w-64 sm:w-72 p-3.5 rounded-xl bg-charcoal border border-white/20 text-left shadow-2xl z-[100] pointer-events-none opacity-0 translate-y-1 group-hover/bubble:opacity-100 group-hover/bubble:pointer-events-auto group-hover/bubble:translate-y-0 group-focus-within/bubble:opacity-100 group-focus-within/bubble:pointer-events-auto group-focus-within/bubble:translate-y-0 transition-all duration-200 backdrop-blur-xl`}
|
|
46
|
+
>
|
|
47
|
+
<span class="block text-xs font-display font-bold text-brand-pistachio mb-1" data-i18n={titleKey}>
|
|
48
|
+
{title}
|
|
49
|
+
</span>
|
|
50
|
+
<span class="block text-xs font-body text-white/90 leading-relaxed" data-i18n={descKey}>
|
|
51
|
+
{description}
|
|
52
|
+
</span>
|
|
53
|
+
|
|
54
|
+
<!-- Flecha indicadora inferior -->
|
|
55
|
+
<span
|
|
56
|
+
class={`info-bubble-arrow absolute top-full ${arrowAlignClasses} -mt-[1px] border-4 border-transparent border-t-charcoal`}
|
|
57
|
+
></span>
|
|
58
|
+
</span>
|
|
59
|
+
</span>
|
|
60
|
+
|
|
61
|
+
<script>
|
|
62
|
+
function initHelpTooltips() {
|
|
63
|
+
const triggers = document.querySelectorAll<HTMLElement>('.info-bubble-trigger');
|
|
64
|
+
|
|
65
|
+
triggers.forEach((trigger) => {
|
|
66
|
+
if ((trigger as any).__infoBubbleBound) return;
|
|
67
|
+
(trigger as any).__infoBubbleBound = true;
|
|
68
|
+
|
|
69
|
+
const tooltip = trigger.parentElement?.querySelector<HTMLElement>('.info-bubble-tooltip');
|
|
70
|
+
if (!tooltip) return;
|
|
71
|
+
|
|
72
|
+
function repositionTooltip() {
|
|
73
|
+
if (!tooltip) return;
|
|
74
|
+
tooltip.style.removeProperty('left');
|
|
75
|
+
tooltip.style.removeProperty('right');
|
|
76
|
+
tooltip.style.removeProperty('transform');
|
|
77
|
+
|
|
78
|
+
requestAnimationFrame(() => {
|
|
79
|
+
const rect = tooltip.getBoundingClientRect();
|
|
80
|
+
const viewportWidth = window.innerWidth;
|
|
81
|
+
const margin = 16;
|
|
82
|
+
|
|
83
|
+
// Corrección si se sale por la derecha
|
|
84
|
+
if (rect.right > viewportWidth - margin) {
|
|
85
|
+
const overflow = rect.right - viewportWidth + margin;
|
|
86
|
+
tooltip.style.transform = `translateX(-${overflow}px)`;
|
|
87
|
+
} else if (rect.left < margin) {
|
|
88
|
+
const overflow = margin - rect.left;
|
|
89
|
+
tooltip.style.transform = `translateX(${overflow}px)`;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
// Inversión vertical si no cabe por arriba
|
|
93
|
+
const arrow = tooltip.querySelector<HTMLElement>('.info-bubble-arrow');
|
|
94
|
+
if (rect.top < 60) {
|
|
95
|
+
tooltip.classList.remove('bottom-full', 'mb-2.5');
|
|
96
|
+
tooltip.classList.add('top-full', 'mt-2.5');
|
|
97
|
+
if (arrow) {
|
|
98
|
+
arrow.classList.remove('top-full', '-mt-[1px]', 'border-t-charcoal');
|
|
99
|
+
arrow.classList.add('bottom-full', '-mb-[1px]', 'border-b-charcoal');
|
|
100
|
+
}
|
|
101
|
+
} else {
|
|
102
|
+
tooltip.classList.remove('top-full', 'mt-2.5');
|
|
103
|
+
tooltip.classList.add('bottom-full', 'mb-2.5');
|
|
104
|
+
if (arrow) {
|
|
105
|
+
arrow.classList.remove('bottom-full', '-mb-[1px]', 'border-b-charcoal');
|
|
106
|
+
arrow.classList.add('top-full', '-mt-[1px]', 'border-t-charcoal');
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
trigger.addEventListener('mouseenter', repositionTooltip);
|
|
113
|
+
trigger.addEventListener('focus', repositionTooltip);
|
|
114
|
+
});
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
initHelpTooltips();
|
|
118
|
+
document.addEventListener('astro:page-load', initHelpTooltips);
|
|
119
|
+
</script>
|
package/dist/index.cjs
CHANGED
|
@@ -125,7 +125,7 @@ var components_default = {
|
|
|
125
125
|
},
|
|
126
126
|
html: {
|
|
127
127
|
available: true,
|
|
128
|
-
snippet: '<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-mono bg-slateSurface text-pistachio border border-slateBorder">\
|
|
128
|
+
snippet: '<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-mono bg-slateSurface text-pistachio border border-slateBorder">\n <span class="w-1.5 h-1.5 rounded-full bg-pistachio"></span>\n Ledger Sellado\n</span>'
|
|
129
129
|
}
|
|
130
130
|
},
|
|
131
131
|
ai_prompt_tag: "[SynthexComponent: badge-status | Angular: <st-badge-status> | React: <BadgeStatus> | Style: Dark Container #1E1E1E / Static Pistachio Dot #E0F9B5 / Mono Font]"
|
|
@@ -177,7 +177,7 @@ var components_default = {
|
|
|
177
177
|
},
|
|
178
178
|
html: {
|
|
179
179
|
available: true,
|
|
180
|
-
snippet: '<button class="bg-transparent text-pistachio border border-pistachio/70 hover:bg-pistachio/10 hover:border-pistachio px-4 py-2 rounded-md font-medium text-xs transition-colors shadow-sm inline-flex items-center justify-center gap-1.5 cursor-pointer font-sans">\
|
|
180
|
+
snippet: '<button class="bg-transparent text-pistachio border border-pistachio/70 hover:bg-pistachio/10 hover:border-pistachio px-4 py-2 rounded-md font-medium text-xs transition-colors shadow-sm inline-flex items-center justify-center gap-1.5 cursor-pointer font-sans">\n Exportar Ledger\n</button>'
|
|
181
181
|
},
|
|
182
182
|
astro: {
|
|
183
183
|
available: true,
|
|
@@ -209,7 +209,7 @@ var components_default = {
|
|
|
209
209
|
},
|
|
210
210
|
html: {
|
|
211
211
|
available: true,
|
|
212
|
-
snippet: '<button class="bg-pistachio text-charcoal hover:bg-pistachio-hover px-4 py-2 rounded-md font-medium text-xs transition-colors shadow-sm active:scale-95 inline-flex items-center justify-center gap-1.5 cursor-pointer">\
|
|
212
|
+
snippet: '<button class="bg-pistachio text-charcoal hover:bg-pistachio-hover px-4 py-2 rounded-md font-medium text-xs transition-colors shadow-sm active:scale-95 inline-flex items-center justify-center gap-1.5 cursor-pointer">\n Confirmar Acci\xF3n\n</button>'
|
|
213
213
|
},
|
|
214
214
|
astro: {
|
|
215
215
|
available: true,
|
|
@@ -241,7 +241,7 @@ var components_default = {
|
|
|
241
241
|
},
|
|
242
242
|
html: {
|
|
243
243
|
available: true,
|
|
244
|
-
snippet: '<button class="bg-slateSurface text-white border border-slateBorder hover:bg-slateBorder hover:border-slateBorder-focus px-4 py-2 rounded-md font-medium text-xs transition-colors shadow-sm inline-flex items-center justify-center gap-1.5 cursor-pointer font-sans">\
|
|
244
|
+
snippet: '<button class="bg-slateSurface text-white border border-slateBorder hover:bg-slateBorder hover:border-slateBorder-focus px-4 py-2 rounded-md font-medium text-xs transition-colors shadow-sm inline-flex items-center justify-center gap-1.5 cursor-pointer font-sans">\n Cancelar\n</button>'
|
|
245
245
|
},
|
|
246
246
|
astro: {
|
|
247
247
|
available: true,
|
|
@@ -261,7 +261,7 @@ var components_default = {
|
|
|
261
261
|
frameworks: {
|
|
262
262
|
html: {
|
|
263
263
|
available: true,
|
|
264
|
-
snippet: '<a\
|
|
264
|
+
snippet: '<a\n href="https://sd-kpi.com/"\n target="_blank"\n rel="noopener noreferrer"\n class="group inline-flex items-center gap-4 sm:gap-5 px-6 sm:px-8 py-3.5 sm:py-4 rounded-2xl bg-slateSurface/60 border border-slateBorder hover:border-pistachio/50 hover:bg-slateCard/80 hover:scale-105 active:scale-95 transition-all duration-300 shadow-sm cursor-pointer font-sans"\n aria-label="SD-M GmbH - Alemania"\n>\n <img\n src="/brand/sd-m-logo-dark.png"\n alt="SD-M GmbH"\n class="h-7 sm:h-8 w-auto object-contain opacity-90 group-hover:opacity-100 transition-opacity"\n width="120"\n height="44"\n loading="lazy"\n />\n <div class="text-left border-l border-slateBorder/60 pl-4 sm:pl-5">\n <span class="block font-display font-bold text-base sm:text-lg text-white group-hover:text-pistachio transition-colors leading-tight">\n SD-M GmbH\n </span>\n <span class="block text-sm font-sans text-muted leading-tight mt-0.5">\n Alemania\n </span>\n </div>\n</a>'
|
|
265
265
|
},
|
|
266
266
|
angular: {
|
|
267
267
|
available: true,
|
|
@@ -351,7 +351,7 @@ var components_default = {
|
|
|
351
351
|
},
|
|
352
352
|
html: {
|
|
353
353
|
available: true,
|
|
354
|
-
snippet: '<div class="w-full h-16 bg-charcoal border border-slateBorder rounded-xl overflow-hidden flex items-center justify-center cursor-pointer relative">\
|
|
354
|
+
snippet: '<div class="w-full h-16 bg-charcoal border border-slateBorder rounded-xl overflow-hidden flex items-center justify-center cursor-pointer relative">\n <svg class="w-full h-12" viewBox="0 0 1440 320" preserveAspectRatio="none">\n <path fill="#E0F9B5" d="M 0,160 Q 720,160 1440,160 L 1440,320 L 0,320 Z"></path>\n </svg>\n <span class="absolute text-xs font-mono text-charcoal font-bold">\n Rebote El\xE1stico GSAP\n </span>\n</div>'
|
|
355
355
|
},
|
|
356
356
|
react: {
|
|
357
357
|
available: true,
|
|
@@ -377,7 +377,7 @@ var components_default = {
|
|
|
377
377
|
},
|
|
378
378
|
html: {
|
|
379
379
|
available: true,
|
|
380
|
-
snippet: '<button class="js-mag-btn px-4 py-2.5 rounded-lg bg-slateSurface text-white border border-slateBorder text-sm font-medium hover:border-pistachio transition-colors cursor-pointer select-none inline-flex items-center gap-2">\
|
|
380
|
+
snippet: '<button class="js-mag-btn px-4 py-2.5 rounded-lg bg-slateSurface text-white border border-slateBorder text-sm font-medium hover:border-pistachio transition-colors cursor-pointer select-none inline-flex items-center gap-2">\n <span class="w-2 h-2 rounded-full bg-pistachio"></span>\n <span>Im\xE1n GSAP</span>\n</button>'
|
|
381
381
|
},
|
|
382
382
|
react: {
|
|
383
383
|
available: true,
|
|
@@ -403,7 +403,7 @@ var components_default = {
|
|
|
403
403
|
},
|
|
404
404
|
html: {
|
|
405
405
|
available: true,
|
|
406
|
-
snippet: '<!-- Preloader Cinem\xE1tico Oficial Synthex (Metamorfosis Geom\xE9trica con MorphSVG) -->\
|
|
406
|
+
snippet: '<!-- Preloader Cinem\xE1tico Oficial Synthex (Metamorfosis Geom\xE9trica con MorphSVG) -->\n<div class="p-6 bg-charcoal border border-slateBorder rounded-xl flex flex-col items-center justify-center gap-4 w-full">\n <svg\n id="preloader-master-svg"\n xmlns="http://www.w3.org/2000/svg"\n viewBox="0 0 350 100"\n class="w-full max-w-[420px] overflow-visible"\n >\n <defs>\n <path id="target-bracket-left" d="M 40 29 L 18 50 L 40 71 L 44.5 66.5 L 27 50 L 44.5 33.5 Z" />\n <path id="target-slash" d="M 50.5 70 L 64.5 30 L 68.5 31.5 L 54.5 71.5 Z" />\n <path id="target-bracket-right" d="M 74 29 L 96 50 L 74 71 L 69.5 66.5 L 87 50 L 69.5 33.5 Z" />\n <path id="target-char-s" d="M135.12 68.59L135.12 68.59Q130.42 68.59 127.02 67.08Q123.62 65.57 120.86 62.38L120.86 62.38L126.37 56.93Q128.21 59.09 130.42 60.22Q132.64 61.36 135.66 61.36L135.66 61.36Q138.36 61.36 139.84 60.39Q141.33 59.41 141.33 57.69L141.33 57.69Q141.33 55.90 140.03 54.82Q138.74 53.74 136.71 53.02Q134.69 52.29 132.39 51.45Q130.10 50.61 128.05 49.34Q125.99 48.07 124.72 45.97Q123.46 43.86 123.46 40.51L123.46 40.51Q123.46 37.00 125.16 34.49Q126.86 31.98 129.88 30.63Q132.91 29.28 136.85 29.28L136.85 29.28Q140.84 29.28 144.16 30.71Q147.49 32.14 149.65 34.52L149.65 34.52L144.14 39.97Q142.41 38.19 140.66 37.33Q138.90 36.46 136.69 36.46L136.69 36.46Q134.42 36.46 133.15 37.30Q131.88 38.14 131.88 39.70L131.88 39.70Q131.88 41.38 133.15 42.35Q134.42 43.32 136.47 44.05Q138.52 44.78 140.82 45.62Q143.11 46.45 145.14 47.78Q147.16 49.10 148.46 51.29Q149.75 53.47 149.75 56.93L149.75 56.93Q149.75 62.44 145.87 65.52Q141.98 68.59 135.12 68.59Z" />\n <path id="target-char-y" d="M164.23 79.07L155.75 79.07L161.69 66.22L151.70 41.76L160.61 41.76L165.85 57.74L171.19 41.76L180.10 41.76L168.87 68.11L164.23 79.07Z" />\n <path id="target-char-n" d="M191.50 68L183.23 68L183.23 41.76L191.50 41.76L191.50 43.86Q194.41 41.22 198.84 41.22L198.84 41.22Q201.70 41.22 203.97 42.59Q206.24 43.97 207.53 46.24Q208.83 48.51 208.83 51.21L208.83 51.21L208.83 68L200.57 68L200.57 53.04Q200.57 50.99 199.30 49.72Q198.03 48.45 196.09 48.45L196.09 48.45Q194.09 48.45 192.79 49.72Q191.50 50.99 191.50 53.04L191.50 53.04L191.50 68Z" />\n <path id="target-char-t" d="M226.11 68L217.85 68L217.85 48.78L211.91 48.78L211.91 41.76L217.85 41.76L217.85 30.90L226.11 30.90L226.11 41.76L232.05 41.76L232.05 48.78L226.11 48.78L226.11 68Z" />\n <path id="target-char-h" d="M243.93 68L235.67 68L235.67 28.80L243.93 28.80L243.93 43.70Q246.74 41.22 251.00 41.22L251.00 41.22Q254.03 41.22 256.35 42.48Q258.67 43.75 259.97 46.02Q261.26 48.29 261.26 51.21L261.26 51.21L261.26 68L253.00 68L253.00 53.04Q253.00 50.99 251.73 49.72Q250.46 48.45 248.52 48.45L248.52 48.45Q246.52 48.45 245.23 49.72Q243.93 50.99 243.93 53.04L243.93 53.04L243.93 68Z" />\n <path id="target-char-e" d="M279.52 68.59L279.52 68.59Q275.25 68.59 271.93 66.84Q268.61 65.08 266.72 61.98Q264.83 58.87 264.83 54.88L264.83 54.88Q264.83 50.94 266.69 47.86Q268.55 44.78 271.74 42.97Q274.93 41.16 278.92 41.16L278.92 41.16Q282.76 41.16 285.75 42.86Q288.75 44.56 290.45 47.51Q292.15 50.45 292.15 54.28L292.15 54.28Q292.15 55.74 291.77 57.58L291.77 57.58L272.98 57.63Q273.63 59.85 275.30 61.03Q276.98 62.22 279.46 62.22L279.46 62.22Q283.40 62.22 285.73 59.52L285.73 59.52L290.26 64.06Q288.32 66.33 285.56 67.46Q282.81 68.59 279.52 68.59ZM278.98 47.48L278.98 47.48Q276.71 47.48 275.14 48.67Q273.58 49.86 272.98 51.96L272.98 51.96L284.43 51.91Q283.40 47.48 278.98 47.48Z" />\n <path id="target-char-x" d="M302.52 68L293.50 68L302.90 54.61L293.99 41.76L303.65 41.76L308.03 48.88L312.46 41.76L321.42 41.76L312.67 54.45L321.96 68L312.40 68L307.54 60.17L302.52 68Z" />\n </defs>\n <g id="preloader-morph-group">\n <path id="morph-shape-0" d="M 18 50 L 44 32 L 44 68 Z" fill="#E0F9B5" />\n <path id="morph-shape-1" d="M 54 30 L 63 30 L 63 70 L 54 70 Z" fill="#E0F9B5" />\n <path id="morph-shape-2" d="M 96 50 L 70 68 L 70 32 Z" fill="#E0F9B5" />\n <path id="morph-shape-3" d="M 135 34 A 16 16 0 1 0 135 66 A 16 16 0 1 0 135 34 Z" fill="#FFFFFF" />\n <path id="morph-shape-4" d="M 152 40 L 180 40 L 166 75 Z" fill="#FFFFFF" />\n <path id="morph-shape-5" d="M 183 41 L 209 41 L 209 67 L 183 67 Z" fill="#FFFFFF" />\n <path id="morph-shape-6" d="M 215 31 L 229 31 L 229 68 L 215 68 Z" fill="#FFFFFF" />\n <path id="morph-shape-7" d="M 235 29 L 261 29 L 261 68 L 235 68 Z" fill="#FFFFFF" />\n <path id="morph-shape-8" d="M 278 41 A 14 14 0 1 0 278 69 A 14 14 0 1 0 278 41 Z" fill="#FFFFFF" />\n <path id="morph-shape-9" d="M 308 41 L 322 55 L 308 69 L 294 55 Z" fill="#FFFFFF" />\n </g>\n </svg>\n</div>'
|
|
407
407
|
},
|
|
408
408
|
react: {
|
|
409
409
|
available: true,
|
|
@@ -492,7 +492,7 @@ var components_default = {
|
|
|
492
492
|
},
|
|
493
493
|
html: {
|
|
494
494
|
available: true,
|
|
495
|
-
snippet: '<input\
|
|
495
|
+
snippet: '<input\n type="text"\n class="bg-charcoal border border-slateBorder focus:border-pistachio focus:outline-none focus:ring-1 focus:ring-pistachio text-white px-3 py-1.5 rounded-md text-xs font-mono transition-all w-48 placeholder-muted"\n placeholder="B12345678"\n/>'
|
|
496
496
|
}
|
|
497
497
|
},
|
|
498
498
|
ai_prompt_tag: "[SynthexComponent: input-text | Angular: <st-input-text> | React: <InputText> | Style: Charcoal #111111 / Border #2A2A2A / Focus Pistachio #E0F9B5]"
|
|
@@ -576,7 +576,7 @@ var components_default = {
|
|
|
576
576
|
},
|
|
577
577
|
html: {
|
|
578
578
|
available: true,
|
|
579
|
-
snippet: '<div class="p-6 rounded-2xl bg-slateSurface-card border border-slateBorder max-w-sm w-full text-center flex flex-col items-center gap-3 font-sans">\
|
|
579
|
+
snippet: '<div class="p-6 rounded-2xl bg-slateSurface-card border border-slateBorder max-w-sm w-full text-center flex flex-col items-center gap-3 font-sans">\n <div class="w-10 h-10 rounded-xl bg-pistachio/10 border border-pistachio/20 flex items-center justify-center text-pistachio">\n <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">\n <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>\n </svg>\n </div>\n <h3 class="text-sm font-semibold text-white">Revisa tu bandeja de entrada</h3>\n <p class="text-xs text-muted leading-relaxed">\n Hemos enviado un enlace de acceso seguro a <span class="text-white font-mono">cliente@empresa.com</span>.\n </p>\n <button type="button" class="mt-2 text-xs text-pistachio hover:underline cursor-pointer">\n Reenviar enlace de acceso\n </button>\n</div>'
|
|
580
580
|
}
|
|
581
581
|
},
|
|
582
582
|
ai_prompt_tag: "[SynthexComponent: magic-link-card | Angular: <st-magic-link-card> | Style: Slate Card #1A1A1A / Border #2A2A2A / Pistachio Verification Accent]"
|
|
@@ -602,7 +602,7 @@ var components_default = {
|
|
|
602
602
|
},
|
|
603
603
|
html: {
|
|
604
604
|
available: true,
|
|
605
|
-
snippet: '<div class="w-10 h-10 rounded-xl bg-pistachio flex items-center justify-center shadow-sm">\
|
|
605
|
+
snippet: '<div class="w-10 h-10 rounded-xl bg-pistachio flex items-center justify-center shadow-sm">\n <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="24" height="24">\n <g stroke="#111111" stroke-width="14" stroke-linecap="round" stroke-linejoin="round" fill="none" transform="translate(41, 56)">\n <polyline points="40,24 14,46 40,68" />\n <line x1="53" y1="72" x2="69" y2="20" />\n <polyline points="82,24 108,46 82,68" />\n </g>\n </svg>\n</div>'
|
|
606
606
|
}
|
|
607
607
|
},
|
|
608
608
|
ai_prompt_tag: "[SynthexComponent: manifesto-icon-box | Squircle Pistachio #E0F9B5 / Official Pure SVG Logo #111111]"
|
|
@@ -824,10 +824,10 @@ var components_default = {
|
|
|
824
824
|
},
|
|
825
825
|
html: {
|
|
826
826
|
available: true,
|
|
827
|
-
snippet: `<label class="inline-flex items-center gap-2 cursor-pointer font-sans"
|
|
828
|
-
<input type="checkbox" checked class="sr-only peer"
|
|
829
|
-
<div class="w-8 h-4 bg-slateBorder rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-charcoal after:rounded-full after:h-3 after:w-3 after:transition-all peer-checked:bg-pistachio relative"></div
|
|
830
|
-
<span class="text-xs text-white font-medium">Activo</span
|
|
827
|
+
snippet: `<label class="inline-flex items-center gap-2 cursor-pointer font-sans">
|
|
828
|
+
<input type="checkbox" checked class="sr-only peer">
|
|
829
|
+
<div class="w-8 h-4 bg-slateBorder rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-charcoal after:rounded-full after:h-3 after:w-3 after:transition-all peer-checked:bg-pistachio relative"></div>
|
|
830
|
+
<span class="text-xs text-white font-medium">Activo</span>
|
|
831
831
|
</label>`
|
|
832
832
|
}
|
|
833
833
|
},
|