@alpic-ai/ui 1.120.0 → 1.121.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.
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
|
+
|
|
3
|
+
//#region src/components/shimmer-text.d.ts
|
|
4
|
+
declare function ShimmerText({
|
|
5
|
+
children,
|
|
6
|
+
className
|
|
7
|
+
}: {
|
|
8
|
+
children: string | number;
|
|
9
|
+
className?: string;
|
|
10
|
+
}): _$react_jsx_runtime0.JSX.Element;
|
|
11
|
+
//#endregion
|
|
12
|
+
export { ShimmerText };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/cn.mjs";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
//#region src/components/shimmer-text.tsx
|
|
5
|
+
const shimmerStyle = {
|
|
6
|
+
background: `linear-gradient(90deg, #0000 calc(50% - 60px), var(--color-foreground), #0000 calc(50% + 60px)), linear-gradient(color-mix(in oklab, var(--color-muted-foreground) 70%, transparent), color-mix(in oklab, var(--color-muted-foreground) 70%, transparent))`,
|
|
7
|
+
backgroundSize: "250% 100%, auto",
|
|
8
|
+
backgroundRepeat: "no-repeat, padding-box",
|
|
9
|
+
WebkitBackgroundClip: "text",
|
|
10
|
+
WebkitTextFillColor: "transparent",
|
|
11
|
+
backgroundClip: "text",
|
|
12
|
+
animation: "shimmer-text 2.5s linear infinite"
|
|
13
|
+
};
|
|
14
|
+
function ShimmerText({ children, className }) {
|
|
15
|
+
return /* @__PURE__ */ jsx("span", {
|
|
16
|
+
className: cn(className),
|
|
17
|
+
style: shimmerStyle,
|
|
18
|
+
children
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
//#endregion
|
|
22
|
+
export { ShimmerText };
|
package/package.json
CHANGED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import type React from "react";
|
|
4
|
+
|
|
5
|
+
import { cn } from "../lib/cn";
|
|
6
|
+
|
|
7
|
+
const shimmerStyle: React.CSSProperties = {
|
|
8
|
+
background: `linear-gradient(90deg, #0000 calc(50% - 60px), var(--color-foreground), #0000 calc(50% + 60px)), linear-gradient(color-mix(in oklab, var(--color-muted-foreground) 70%, transparent), color-mix(in oklab, var(--color-muted-foreground) 70%, transparent))`,
|
|
9
|
+
backgroundSize: "250% 100%, auto",
|
|
10
|
+
backgroundRepeat: "no-repeat, padding-box",
|
|
11
|
+
WebkitBackgroundClip: "text",
|
|
12
|
+
WebkitTextFillColor: "transparent",
|
|
13
|
+
backgroundClip: "text",
|
|
14
|
+
animation: "shimmer-text 2.5s linear infinite",
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
export function ShimmerText({ children, className }: { children: string | number; className?: string }) {
|
|
18
|
+
return (
|
|
19
|
+
<span className={cn(className)} style={shimmerStyle}>
|
|
20
|
+
{children}
|
|
21
|
+
</span>
|
|
22
|
+
);
|
|
23
|
+
}
|
package/src/styles/tokens.css
CHANGED
|
@@ -113,6 +113,15 @@
|
|
|
113
113
|
--animate-beacon-ring-pulse: beacon-ring-pulse 2.2s ease-in-out infinite;
|
|
114
114
|
}
|
|
115
115
|
|
|
116
|
+
@keyframes shimmer-text {
|
|
117
|
+
from {
|
|
118
|
+
background-position: 100% center;
|
|
119
|
+
}
|
|
120
|
+
to {
|
|
121
|
+
background-position: 0% center;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
116
125
|
@keyframes alpic-ride {
|
|
117
126
|
0% {
|
|
118
127
|
transform: translate(0px, 0px);
|
|
@@ -155,14 +164,12 @@
|
|
|
155
164
|
@keyframes beacon-ring-pulse {
|
|
156
165
|
0%,
|
|
157
166
|
100% {
|
|
158
|
-
opacity: 0.
|
|
167
|
+
opacity: 0.55;
|
|
159
168
|
transform: scale(1);
|
|
160
|
-
filter: drop-shadow(0 0 0 rgba(59, 130, 246, 0));
|
|
161
169
|
}
|
|
162
170
|
50% {
|
|
163
|
-
opacity:
|
|
171
|
+
opacity: 0.9;
|
|
164
172
|
transform: scale(1.02);
|
|
165
|
-
filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.24));
|
|
166
173
|
}
|
|
167
174
|
}
|
|
168
175
|
|