@alpic-ai/ui 0.0.0-dev.d042b40 → 0.0.0-dev.d0b8fc7
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/table.d.mts +1 -10
- package/dist/components/table.mjs +2 -2
- package/package.json +5 -5
- package/src/components/table.tsx +2 -16
- package/src/styles/tokens.css +4 -20
- package/dist/components/page-loader.d.mts +0 -11
- package/dist/components/page-loader.mjs +0 -122
- package/dist/components/shimmer-text.d.mts +0 -12
- package/dist/components/shimmer-text.mjs +0 -22
- package/src/components/page-loader.tsx +0 -59
- package/src/components/shimmer-text.tsx +0 -23
|
@@ -26,19 +26,10 @@ 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
|
-
}
|
|
37
29
|
declare function TableCell({
|
|
38
30
|
className,
|
|
39
|
-
interactive,
|
|
40
31
|
...props
|
|
41
|
-
}:
|
|
32
|
+
}: React.ComponentProps<"td">): _$react_jsx_runtime0.JSX.Element;
|
|
42
33
|
declare function TableCaption({
|
|
43
34
|
className,
|
|
44
35
|
...props
|
|
@@ -47,10 +47,10 @@ function TableHead({ className, ...props }) {
|
|
|
47
47
|
...props
|
|
48
48
|
});
|
|
49
49
|
}
|
|
50
|
-
function TableCell({ className,
|
|
50
|
+
function TableCell({ className, ...props }) {
|
|
51
51
|
return /* @__PURE__ */ jsx("td", {
|
|
52
52
|
"data-slot": "table-cell",
|
|
53
|
-
className: cn("
|
|
53
|
+
className: cn("px-6 py-2 align-middle", "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:pr-3", className),
|
|
54
54
|
...props
|
|
55
55
|
});
|
|
56
56
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alpic-ai/ui",
|
|
3
|
-
"version": "0.0.0-dev.
|
|
3
|
+
"version": "0.0.0-dev.d0b8fc7",
|
|
4
4
|
"description": "Alpic design system — shared UI components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -23,10 +23,10 @@
|
|
|
23
23
|
"src"
|
|
24
24
|
],
|
|
25
25
|
"peerDependencies": {
|
|
26
|
-
"lucide-react": "^1.
|
|
26
|
+
"lucide-react": "^1.9.0",
|
|
27
27
|
"react": "^19.2.5",
|
|
28
28
|
"react-dom": "^19.2.5",
|
|
29
|
-
"react-hook-form": "^7.
|
|
29
|
+
"react-hook-form": "^7.73.1",
|
|
30
30
|
"sonner": "^2.0.7",
|
|
31
31
|
"tailwindcss": "^4.2.4",
|
|
32
32
|
"tw-animate-css": "^1.4.0"
|
|
@@ -59,8 +59,8 @@
|
|
|
59
59
|
"@tailwindcss/postcss": "^4.2.4",
|
|
60
60
|
"@types/react": "19.2.14",
|
|
61
61
|
"@types/react-dom": "19.2.3",
|
|
62
|
-
"lucide-react": "^1.
|
|
63
|
-
"react-hook-form": "^7.
|
|
62
|
+
"lucide-react": "^1.9.0",
|
|
63
|
+
"react-hook-form": "^7.73.1",
|
|
64
64
|
"shx": "^0.4.0",
|
|
65
65
|
"sonner": "^2.0.7",
|
|
66
66
|
"tailwindcss": "^4.2.4",
|
package/src/components/table.tsx
CHANGED
|
@@ -66,25 +66,11 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
|
|
|
66
66
|
);
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
-
|
|
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) {
|
|
69
|
+
function TableCell({ className, ...props }: React.ComponentProps<"td">) {
|
|
79
70
|
return (
|
|
80
71
|
<td
|
|
81
72
|
data-slot="table-cell"
|
|
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
|
-
)}
|
|
73
|
+
className={cn("px-6 py-2 align-middle", "[&:has([role=checkbox])]:w-px [&:has([role=checkbox])]:pr-3", className)}
|
|
88
74
|
{...props}
|
|
89
75
|
/>
|
|
90
76
|
);
|
package/src/styles/tokens.css
CHANGED
|
@@ -113,24 +113,6 @@
|
|
|
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
|
-
|
|
125
|
-
@keyframes alpic-ride {
|
|
126
|
-
0% {
|
|
127
|
-
transform: translate(0px, 0px);
|
|
128
|
-
}
|
|
129
|
-
100% {
|
|
130
|
-
transform: translate(237px, -64px);
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
|
|
134
116
|
@keyframes accordion-down {
|
|
135
117
|
from {
|
|
136
118
|
height: 0;
|
|
@@ -164,12 +146,14 @@
|
|
|
164
146
|
@keyframes beacon-ring-pulse {
|
|
165
147
|
0%,
|
|
166
148
|
100% {
|
|
167
|
-
opacity: 0.
|
|
149
|
+
opacity: 0.88;
|
|
168
150
|
transform: scale(1);
|
|
151
|
+
filter: drop-shadow(0 0 0 rgba(59, 130, 246, 0));
|
|
169
152
|
}
|
|
170
153
|
50% {
|
|
171
|
-
opacity:
|
|
154
|
+
opacity: 1;
|
|
172
155
|
transform: scale(1.02);
|
|
156
|
+
filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.24));
|
|
173
157
|
}
|
|
174
158
|
}
|
|
175
159
|
|
|
@@ -1,11 +0,0 @@
|
|
|
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 };
|
|
@@ -1,122 +0,0 @@
|
|
|
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: "#e90060"
|
|
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: "#9f0042"
|
|
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 };
|
|
@@ -1,12 +0,0 @@
|
|
|
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 };
|
|
@@ -1,22 +0,0 @@
|
|
|
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 };
|
|
@@ -1,59 +0,0 @@
|
|
|
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="#e90060" />
|
|
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="#9f0042" />
|
|
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 };
|
|
@@ -1,23 +0,0 @@
|
|
|
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
|
-
}
|