@alpic-ai/ui 1.117.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.
- package/dist/components/page-loader.d.mts +11 -0
- package/dist/components/page-loader.mjs +122 -0
- package/dist/components/table.d.mts +10 -1
- package/dist/components/table.mjs +2 -2
- package/package.json +1 -1
- package/src/components/page-loader.tsx +59 -0
- package/src/components/table.tsx +16 -2
- package/src/styles/tokens.css +9 -0
|
@@ -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 };
|
|
@@ -26,10 +26,19 @@ declare function TableHead({
|
|
|
26
26
|
className,
|
|
27
27
|
...props
|
|
28
28
|
}: React.ComponentProps<"th">): _$react_jsx_runtime0.JSX.Element;
|
|
29
|
+
interface TableCellProps extends React.ComponentProps<"td"> {
|
|
30
|
+
/**
|
|
31
|
+
* When true, the cell renders edge-to-edge so the child can act as the
|
|
32
|
+
* interactive surface (e.g. a button or popover trigger filling the cell).
|
|
33
|
+
* Defaults to false (standard padded cell).
|
|
34
|
+
*/
|
|
35
|
+
interactive?: boolean;
|
|
36
|
+
}
|
|
29
37
|
declare function TableCell({
|
|
30
38
|
className,
|
|
39
|
+
interactive,
|
|
31
40
|
...props
|
|
32
|
-
}:
|
|
41
|
+
}: TableCellProps): _$react_jsx_runtime0.JSX.Element;
|
|
33
42
|
declare function TableCaption({
|
|
34
43
|
className,
|
|
35
44
|
...props
|
|
@@ -47,10 +47,10 @@ function TableHead({ className, ...props }) {
|
|
|
47
47
|
...props
|
|
48
48
|
});
|
|
49
49
|
}
|
|
50
|
-
function TableCell({ className, ...props }) {
|
|
50
|
+
function TableCell({ className, interactive = false, ...props }) {
|
|
51
51
|
return /* @__PURE__ */ jsx("td", {
|
|
52
52
|
"data-slot": "table-cell",
|
|
53
|
-
className: cn("px-6 py-2
|
|
53
|
+
className: cn("align-middle", interactive ? "h-px p-0" : "px-6 py-2", "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:pr-3", className),
|
|
54
54
|
...props
|
|
55
55
|
});
|
|
56
56
|
}
|
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/components/table.tsx
CHANGED
|
@@ -66,11 +66,25 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
|
|
|
66
66
|
);
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
-
|
|
69
|
+
interface TableCellProps extends React.ComponentProps<"td"> {
|
|
70
|
+
/**
|
|
71
|
+
* When true, the cell renders edge-to-edge so the child can act as the
|
|
72
|
+
* interactive surface (e.g. a button or popover trigger filling the cell).
|
|
73
|
+
* Defaults to false (standard padded cell).
|
|
74
|
+
*/
|
|
75
|
+
interactive?: boolean;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
function TableCell({ className, interactive = false, ...props }: TableCellProps) {
|
|
70
79
|
return (
|
|
71
80
|
<td
|
|
72
81
|
data-slot="table-cell"
|
|
73
|
-
className={cn(
|
|
82
|
+
className={cn(
|
|
83
|
+
"align-middle",
|
|
84
|
+
interactive ? "h-px p-0" : "px-6 py-2",
|
|
85
|
+
"[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:pr-3",
|
|
86
|
+
className,
|
|
87
|
+
)}
|
|
74
88
|
{...props}
|
|
75
89
|
/>
|
|
76
90
|
);
|
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;
|