@alpic-ai/ui 1.118.0 → 1.119.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,11 @@
|
|
|
1
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
|
+
|
|
3
|
+
//#region src/components/page-loader.d.ts
|
|
4
|
+
interface PageLoaderProps {
|
|
5
|
+
className?: string;
|
|
6
|
+
}
|
|
7
|
+
declare function PageLoader({
|
|
8
|
+
className
|
|
9
|
+
}: PageLoaderProps): _$react_jsx_runtime0.JSX.Element;
|
|
10
|
+
//#endregion
|
|
11
|
+
export { PageLoader, type PageLoaderProps };
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/cn.mjs";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
//#region src/components/page-loader.tsx
|
|
5
|
+
const CABLE_CAR_SVG = /* @__PURE__ */ jsxs("svg", {
|
|
6
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
7
|
+
viewBox: "0 0 120 130",
|
|
8
|
+
width: "240",
|
|
9
|
+
height: "260",
|
|
10
|
+
"aria-hidden": "true",
|
|
11
|
+
className: "block h-auto w-full",
|
|
12
|
+
children: [
|
|
13
|
+
/* @__PURE__ */ jsx("line", {
|
|
14
|
+
x1: "60",
|
|
15
|
+
y1: "3",
|
|
16
|
+
x2: "60",
|
|
17
|
+
y2: "58",
|
|
18
|
+
stroke: "#333",
|
|
19
|
+
strokeWidth: "4"
|
|
20
|
+
}),
|
|
21
|
+
/* @__PURE__ */ jsx("circle", {
|
|
22
|
+
cx: "60",
|
|
23
|
+
cy: "11",
|
|
24
|
+
r: "10",
|
|
25
|
+
fill: "#555"
|
|
26
|
+
}),
|
|
27
|
+
/* @__PURE__ */ jsx("rect", {
|
|
28
|
+
x: "5",
|
|
29
|
+
y: "58",
|
|
30
|
+
width: "110",
|
|
31
|
+
height: "64",
|
|
32
|
+
rx: "4",
|
|
33
|
+
fill: "#D42B2B"
|
|
34
|
+
}),
|
|
35
|
+
/* @__PURE__ */ jsx("rect", {
|
|
36
|
+
x: "5",
|
|
37
|
+
y: "58",
|
|
38
|
+
width: "110",
|
|
39
|
+
height: "20",
|
|
40
|
+
rx: "4",
|
|
41
|
+
fill: "#F5F0E8"
|
|
42
|
+
}),
|
|
43
|
+
/* @__PURE__ */ jsx("rect", {
|
|
44
|
+
x: "5",
|
|
45
|
+
y: "68",
|
|
46
|
+
width: "110",
|
|
47
|
+
height: "10",
|
|
48
|
+
fill: "#F5F0E8"
|
|
49
|
+
}),
|
|
50
|
+
/* @__PURE__ */ jsx("rect", {
|
|
51
|
+
x: "14",
|
|
52
|
+
y: "66",
|
|
53
|
+
width: "26",
|
|
54
|
+
height: "30",
|
|
55
|
+
rx: "2",
|
|
56
|
+
fill: "#5B8EC9",
|
|
57
|
+
stroke: "#C4B9A8",
|
|
58
|
+
strokeWidth: "1.5"
|
|
59
|
+
}),
|
|
60
|
+
/* @__PURE__ */ jsx("rect", {
|
|
61
|
+
x: "47",
|
|
62
|
+
y: "66",
|
|
63
|
+
width: "26",
|
|
64
|
+
height: "30",
|
|
65
|
+
rx: "2",
|
|
66
|
+
fill: "#5B8EC9",
|
|
67
|
+
stroke: "#C4B9A8",
|
|
68
|
+
strokeWidth: "1.5"
|
|
69
|
+
}),
|
|
70
|
+
/* @__PURE__ */ jsx("rect", {
|
|
71
|
+
x: "80",
|
|
72
|
+
y: "66",
|
|
73
|
+
width: "26",
|
|
74
|
+
height: "30",
|
|
75
|
+
rx: "2",
|
|
76
|
+
fill: "#5B8EC9",
|
|
77
|
+
stroke: "#C4B9A8",
|
|
78
|
+
strokeWidth: "1.5"
|
|
79
|
+
}),
|
|
80
|
+
/* @__PURE__ */ jsx("rect", {
|
|
81
|
+
x: "5",
|
|
82
|
+
y: "115",
|
|
83
|
+
width: "110",
|
|
84
|
+
height: "7",
|
|
85
|
+
rx: "3",
|
|
86
|
+
fill: "#B02525"
|
|
87
|
+
})
|
|
88
|
+
]
|
|
89
|
+
});
|
|
90
|
+
function PageLoader({ className }) {
|
|
91
|
+
return /* @__PURE__ */ jsx("div", {
|
|
92
|
+
className: cn("flex min-h-screen items-center justify-center bg-background", className),
|
|
93
|
+
role: "status",
|
|
94
|
+
"aria-label": "Loading Alpic…",
|
|
95
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
96
|
+
className: "relative h-[120px] w-[200px]",
|
|
97
|
+
children: [
|
|
98
|
+
/* @__PURE__ */ jsx("div", {
|
|
99
|
+
className: "absolute top-[30px] left-0 h-[3px] w-full rounded-sm bg-[#6c6c77]",
|
|
100
|
+
style: {
|
|
101
|
+
transform: "rotate(-15deg)",
|
|
102
|
+
transformOrigin: "left center"
|
|
103
|
+
}
|
|
104
|
+
}),
|
|
105
|
+
/* @__PURE__ */ jsx("div", {
|
|
106
|
+
className: "absolute top-[33px] -left-[45px] w-[45px] motion-safe:animate-[alpic-ride_4s_linear_infinite]",
|
|
107
|
+
children: CABLE_CAR_SVG
|
|
108
|
+
}),
|
|
109
|
+
/* @__PURE__ */ jsx("div", {
|
|
110
|
+
className: "pointer-events-none absolute -top-[40px] -left-[45px] z-10 h-[200px] w-[95px]",
|
|
111
|
+
style: { background: "linear-gradient(to right, var(--color-background) 47%, transparent)" }
|
|
112
|
+
}),
|
|
113
|
+
/* @__PURE__ */ jsx("div", {
|
|
114
|
+
className: "pointer-events-none absolute -top-[40px] left-[142px] z-10 h-[200px] w-[95px]",
|
|
115
|
+
style: { background: "linear-gradient(to right, transparent, var(--color-background) 53%)" }
|
|
116
|
+
})
|
|
117
|
+
]
|
|
118
|
+
})
|
|
119
|
+
});
|
|
120
|
+
}
|
|
121
|
+
//#endregion
|
|
122
|
+
export { PageLoader };
|
package/package.json
CHANGED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import { cn } from "../lib/cn";
|
|
4
|
+
|
|
5
|
+
const CABLE_CAR_SVG = (
|
|
6
|
+
<svg
|
|
7
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
8
|
+
viewBox="0 0 120 130"
|
|
9
|
+
width="240"
|
|
10
|
+
height="260"
|
|
11
|
+
aria-hidden="true"
|
|
12
|
+
className="block h-auto w-full"
|
|
13
|
+
>
|
|
14
|
+
<line x1="60" y1="3" x2="60" y2="58" stroke="#333" strokeWidth="4" />
|
|
15
|
+
<circle cx="60" cy="11" r="10" fill="#555" />
|
|
16
|
+
<rect x="5" y="58" width="110" height="64" rx="4" fill="#D42B2B" />
|
|
17
|
+
<rect x="5" y="58" width="110" height="20" rx="4" fill="#F5F0E8" />
|
|
18
|
+
<rect x="5" y="68" width="110" height="10" fill="#F5F0E8" />
|
|
19
|
+
<rect x="14" y="66" width="26" height="30" rx="2" fill="#5B8EC9" stroke="#C4B9A8" strokeWidth="1.5" />
|
|
20
|
+
<rect x="47" y="66" width="26" height="30" rx="2" fill="#5B8EC9" stroke="#C4B9A8" strokeWidth="1.5" />
|
|
21
|
+
<rect x="80" y="66" width="26" height="30" rx="2" fill="#5B8EC9" stroke="#C4B9A8" strokeWidth="1.5" />
|
|
22
|
+
<rect x="5" y="115" width="110" height="7" rx="3" fill="#B02525" />
|
|
23
|
+
</svg>
|
|
24
|
+
);
|
|
25
|
+
|
|
26
|
+
interface PageLoaderProps {
|
|
27
|
+
className?: string;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
function PageLoader({ className }: PageLoaderProps) {
|
|
31
|
+
return (
|
|
32
|
+
<div
|
|
33
|
+
className={cn("flex min-h-screen items-center justify-center bg-background", className)}
|
|
34
|
+
role="status"
|
|
35
|
+
aria-label="Loading Alpic…"
|
|
36
|
+
>
|
|
37
|
+
<div className="relative h-[120px] w-[200px]">
|
|
38
|
+
<div
|
|
39
|
+
className="absolute top-[30px] left-0 h-[3px] w-full rounded-sm bg-[#6c6c77]"
|
|
40
|
+
style={{ transform: "rotate(-15deg)", transformOrigin: "left center" }}
|
|
41
|
+
/>
|
|
42
|
+
<div className="absolute top-[33px] -left-[45px] w-[45px] motion-safe:animate-[alpic-ride_4s_linear_infinite]">
|
|
43
|
+
{CABLE_CAR_SVG}
|
|
44
|
+
</div>
|
|
45
|
+
<div
|
|
46
|
+
className="pointer-events-none absolute -top-[40px] -left-[45px] z-10 h-[200px] w-[95px]"
|
|
47
|
+
style={{ background: "linear-gradient(to right, var(--color-background) 47%, transparent)" }}
|
|
48
|
+
/>
|
|
49
|
+
<div
|
|
50
|
+
className="pointer-events-none absolute -top-[40px] left-[142px] z-10 h-[200px] w-[95px]"
|
|
51
|
+
style={{ background: "linear-gradient(to right, transparent, var(--color-background) 53%)" }}
|
|
52
|
+
/>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
export type { PageLoaderProps };
|
|
59
|
+
export { PageLoader };
|
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 alpic-ride {
|
|
117
|
+
0% {
|
|
118
|
+
transform: translate(0px, 0px);
|
|
119
|
+
}
|
|
120
|
+
100% {
|
|
121
|
+
transform: translate(237px, -64px);
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
116
125
|
@keyframes accordion-down {
|
|
117
126
|
from {
|
|
118
127
|
height: 0;
|