@cntyclub/ui-react 0.12.0 → 0.13.0
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 +6 -3
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/ui/aurora-text.tsx +6 -3
- package/src/styles.css +18 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cntyclub/ui-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.13.0",
|
|
4
4
|
"description": "React component library for the Country Club UI Kit — Base UI primitives styled with the Country Club design system (Tailwind CSS v4)",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": [
|
|
@@ -47,7 +47,10 @@ export const AuroraText = memo(function AuroraText({
|
|
|
47
47
|
backgroundClip: "text",
|
|
48
48
|
WebkitTextFillColor: "transparent",
|
|
49
49
|
color: "transparent",
|
|
50
|
-
|
|
50
|
+
// Full `animation` inline (not the `animate-aurora` utility): the keyframe
|
|
51
|
+
// ships in styles.css unconditionally, so the sweep runs even if the
|
|
52
|
+
// consumer's Tailwind never generates that utility class.
|
|
53
|
+
animation: `aurora ${10 / speed}s ease infinite`,
|
|
51
54
|
};
|
|
52
55
|
|
|
53
56
|
return (
|
|
@@ -57,13 +60,13 @@ export const AuroraText = memo(function AuroraText({
|
|
|
57
60
|
{glow ? (
|
|
58
61
|
<span
|
|
59
62
|
aria-hidden="true"
|
|
60
|
-
className="
|
|
63
|
+
className="pointer-events-none absolute inset-0 select-none blur-[6px] opacity-60"
|
|
61
64
|
style={gradientStyle}
|
|
62
65
|
>
|
|
63
66
|
{children}
|
|
64
67
|
</span>
|
|
65
68
|
) : null}
|
|
66
|
-
<span aria-hidden="true" className="
|
|
69
|
+
<span aria-hidden="true" className="relative" style={gradientStyle}>
|
|
67
70
|
{children}
|
|
68
71
|
</span>
|
|
69
72
|
</span>
|
package/src/styles.css
CHANGED
|
@@ -14,6 +14,24 @@
|
|
|
14
14
|
|
|
15
15
|
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
|
|
16
16
|
|
|
17
|
+
/*
|
|
18
|
+
* Emitted unconditionally (NOT inside @theme) so AuroraText's gradient sweep
|
|
19
|
+
* runs in every consumer — even when their Tailwind build doesn't generate the
|
|
20
|
+
* `animate-aurora` utility from the theme token (keyframes declared inside
|
|
21
|
+
* @theme are dropped unless that utility is scanned/used). AuroraText applies
|
|
22
|
+
* this keyframe via an inline `animation`, so it no longer depends on the
|
|
23
|
+
* utility class existing at all.
|
|
24
|
+
*/
|
|
25
|
+
@keyframes aurora {
|
|
26
|
+
0%,
|
|
27
|
+
100% {
|
|
28
|
+
background-position: 0% 50%;
|
|
29
|
+
}
|
|
30
|
+
50% {
|
|
31
|
+
background-position: 100% 50%;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
17
35
|
@theme inline {
|
|
18
36
|
--animate-skeleton: skeleton 2s -1s infinite linear;
|
|
19
37
|
--animate-qr-scan: qr-scan 2.6s ease-in-out infinite alternate;
|