@medialane/ui 0.126.12 → 0.126.13
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/medialane-collection-card.cjs +37 -80
- package/dist/components/medialane-collection-card.cjs.map +1 -1
- package/dist/components/medialane-collection-card.js +37 -80
- package/dist/components/medialane-collection-card.js.map +1 -1
- package/dist/medialane.css +1 -17
- package/package.json +1 -1
|
@@ -23,7 +23,6 @@ __export(medialane_collection_card_exports, {
|
|
|
23
23
|
});
|
|
24
24
|
module.exports = __toCommonJS(medialane_collection_card_exports);
|
|
25
25
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
26
|
-
var import_react = require("react");
|
|
27
26
|
var import_cn = require("../utils/cn.js");
|
|
28
27
|
const FRAME_GRADIENT = "linear-gradient(135deg, #3b7bff, #8a5cf6 38%, #f6608f 70%, #fb8b46)";
|
|
29
28
|
function MedialaneCollectionCard({
|
|
@@ -34,94 +33,52 @@ function MedialaneCollectionCard({
|
|
|
34
33
|
creator,
|
|
35
34
|
className
|
|
36
35
|
}) {
|
|
37
|
-
const frameRef = (0, import_react.useRef)(null);
|
|
38
|
-
const handleMove = (e) => {
|
|
39
|
-
const el = frameRef.current;
|
|
40
|
-
if (!el || e.pointerType !== "mouse") return;
|
|
41
|
-
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
|
|
42
|
-
const rect = el.getBoundingClientRect();
|
|
43
|
-
const x = (e.clientX - rect.left) / rect.width;
|
|
44
|
-
const y = (e.clientY - rect.top) / rect.height;
|
|
45
|
-
el.style.setProperty("--rx", `${(0.5 - y) * 9}deg`);
|
|
46
|
-
el.style.setProperty("--ry", `${(x - 0.5) * 9}deg`);
|
|
47
|
-
el.style.setProperty("--mx", `${x * 100}%`);
|
|
48
|
-
el.style.setProperty("--my", `${y * 100}%`);
|
|
49
|
-
el.style.setProperty("--pop", "1.015");
|
|
50
|
-
};
|
|
51
|
-
const handleLeave = () => {
|
|
52
|
-
const el = frameRef.current;
|
|
53
|
-
if (!el) return;
|
|
54
|
-
el.style.setProperty("--rx", "0deg");
|
|
55
|
-
el.style.setProperty("--ry", "0deg");
|
|
56
|
-
el.style.setProperty("--pop", "1");
|
|
57
|
-
};
|
|
58
36
|
const displayName = name?.trim() || "Untitled";
|
|
59
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_cn.cn)(
|
|
37
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_cn.cn)(className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "rounded-[24px] border border-border", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
60
38
|
"div",
|
|
61
39
|
{
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
style: { background: "linear-gradient(to top, rgba(10,14,31,0.45), transparent)" }
|
|
90
|
-
}
|
|
91
|
-
)
|
|
92
|
-
] }) }),
|
|
40
|
+
className: "ml-card-material relative rounded-[23px] overflow-hidden text-[#0a0e1f] dark:text-white",
|
|
41
|
+
children: [
|
|
42
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "p-2.5 pb-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative aspect-[4/5] w-full overflow-hidden rounded-[16px] ring-1 ring-black/10 dark:ring-white/10", children: [
|
|
43
|
+
image ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: image, alt: displayName, className: "h-full w-full object-cover" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
44
|
+
"div",
|
|
45
|
+
{
|
|
46
|
+
className: "h-full w-full",
|
|
47
|
+
style: { background: FRAME_GRADIENT, opacity: 0.9 }
|
|
48
|
+
}
|
|
49
|
+
),
|
|
50
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
51
|
+
"div",
|
|
52
|
+
{
|
|
53
|
+
"aria-hidden": true,
|
|
54
|
+
className: "pointer-events-none absolute inset-x-0 bottom-0 h-16",
|
|
55
|
+
style: { background: "linear-gradient(to top, rgba(10,14,31,0.45), transparent)" }
|
|
56
|
+
}
|
|
57
|
+
)
|
|
58
|
+
] }) }),
|
|
59
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative px-4 pt-3 pb-4", children: [
|
|
60
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start gap-2", children: [
|
|
61
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "min-w-0 flex-1 text-[18px] font-bold leading-snug truncate", children: displayName }),
|
|
62
|
+
serial && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "mt-0.5 shrink-0 rounded-full bg-black/5 dark:bg-white/10 px-2 py-0.5 text-2xs font-semibold text-[#0a0e1f]/80 dark:text-white/80 tabular-nums", children: serial })
|
|
63
|
+
] }),
|
|
64
|
+
collection && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-0.5 text-[12.5px] text-[#0a0e1f]/55 dark:text-white/55 truncate", children: collection }),
|
|
65
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "my-3 h-px bg-black/10 dark:bg-white/10" }),
|
|
66
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
93
67
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
94
|
-
"
|
|
68
|
+
"span",
|
|
95
69
|
{
|
|
96
70
|
"aria-hidden": true,
|
|
97
|
-
className: "
|
|
71
|
+
className: "h-3.5 w-3.5 rounded-full shrink-0",
|
|
72
|
+
style: { background: FRAME_GRADIENT }
|
|
98
73
|
}
|
|
99
74
|
),
|
|
100
|
-
/* @__PURE__ */ (0, import_jsx_runtime.
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
collection && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-0.5 text-[12.5px] text-[#0a0e1f]/55 dark:text-white/55 truncate", children: collection }),
|
|
106
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "my-3 h-px bg-black/10 dark:bg-white/10" }),
|
|
107
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
108
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
109
|
-
"span",
|
|
110
|
-
{
|
|
111
|
-
"aria-hidden": true,
|
|
112
|
-
className: "h-3.5 w-3.5 rounded-full shrink-0",
|
|
113
|
-
style: { background: FRAME_GRADIENT }
|
|
114
|
-
}
|
|
115
|
-
),
|
|
116
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[9px] font-bold tracking-[0.18em] text-[#0a0e1f]/50 dark:text-white/50", children: "MEDIALANE" }),
|
|
117
|
-
creator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-auto min-w-0 truncate text-2xs text-[#0a0e1f]/55 dark:text-white/55 tabular-nums", children: creator })
|
|
118
|
-
] })
|
|
119
|
-
] })
|
|
120
|
-
]
|
|
121
|
-
}
|
|
122
|
-
)
|
|
75
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[9px] font-bold tracking-[0.18em] text-[#0a0e1f]/50 dark:text-white/50", children: "MEDIALANE" }),
|
|
76
|
+
creator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-auto min-w-0 truncate text-2xs text-[#0a0e1f]/55 dark:text-white/55 tabular-nums", children: creator })
|
|
77
|
+
] })
|
|
78
|
+
] })
|
|
79
|
+
]
|
|
123
80
|
}
|
|
124
|
-
) });
|
|
81
|
+
) }) });
|
|
125
82
|
}
|
|
126
83
|
// Annotate the CommonJS export names for ESM import in node:
|
|
127
84
|
0 && (module.exports = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/medialane-collection-card.tsx"],"sourcesContent":["\"use client\";\n\nimport {
|
|
1
|
+
{"version":3,"sources":["../../src/components/medialane-collection-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../utils/cn.js\";\n\nexport interface MedialaneCollectionCardProps {\n\n image?: string | null;\n\n name?: string;\n\n collection?: string;\n\n serial?: string;\n\n creator?: string;\n className?: string;\n}\n\nconst FRAME_GRADIENT =\n \"linear-gradient(135deg, #3b7bff, #8a5cf6 38%, #f6608f 70%, #fb8b46)\";\n\nexport function MedialaneCollectionCard({\n image,\n name,\n collection,\n serial,\n creator,\n className,\n}: MedialaneCollectionCardProps) {\n const displayName = name?.trim() || \"Untitled\";\n\n return (\n <div className={cn(className)}>\n <div className=\"rounded-[24px] border border-border\">\n <div\n className=\"ml-card-material relative rounded-[23px] overflow-hidden text-[#0a0e1f] dark:text-white\"\n >\n\n <div className=\"p-2.5 pb-0\">\n <div className=\"relative aspect-[4/5] w-full overflow-hidden rounded-[16px] ring-1 ring-black/10 dark:ring-white/10\">\n {image ? (\n\n <img src={image} alt={displayName} className=\"h-full w-full object-cover\" />\n ) : (\n <div\n className=\"h-full w-full\"\n style={{ background: FRAME_GRADIENT, opacity: 0.9 }}\n />\n )}\n\n <div\n aria-hidden\n className=\"pointer-events-none absolute inset-x-0 bottom-0 h-16\"\n style={{ background: \"linear-gradient(to top, rgba(10,14,31,0.45), transparent)\" }}\n />\n </div>\n </div>\n\n <div className=\"relative px-4 pt-3 pb-4\">\n <div className=\"flex items-start gap-2\">\n <p className=\"min-w-0 flex-1 text-[18px] font-bold leading-snug truncate\">\n {displayName}\n </p>\n {serial && (\n <span className=\"mt-0.5 shrink-0 rounded-full bg-black/5 dark:bg-white/10 px-2 py-0.5 text-2xs font-semibold text-[#0a0e1f]/80 dark:text-white/80 tabular-nums\">\n {serial}\n </span>\n )}\n </div>\n {collection && (\n <p className=\"mt-0.5 text-[12.5px] text-[#0a0e1f]/55 dark:text-white/55 truncate\">{collection}</p>\n )}\n <div className=\"my-3 h-px bg-black/10 dark:bg-white/10\" />\n <div className=\"flex items-center gap-2\">\n <span\n aria-hidden\n className=\"h-3.5 w-3.5 rounded-full shrink-0\"\n style={{ background: FRAME_GRADIENT }}\n />\n <span className=\"text-[9px] font-bold tracking-[0.18em] text-[#0a0e1f]/50 dark:text-white/50\">\n MEDIALANE\n </span>\n {creator && (\n <span className=\"ml-auto min-w-0 truncate text-2xs text-[#0a0e1f]/55 dark:text-white/55 tabular-nums\">\n {creator}\n </span>\n )}\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuCY;AArCZ,gBAAmB;AAgBnB,MAAM,iBACJ;AAEK,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiC;AAC/B,QAAM,cAAc,MAAM,KAAK,KAAK;AAEpC,SACE,4CAAC,SAAI,eAAW,cAAG,SAAS,GAC1B,sDAAC,SAAI,WAAU,uCACb;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MAGV;AAAA,oDAAC,SAAI,WAAU,cACb,uDAAC,SAAI,WAAU,uGACZ;AAAA,kBAEC,4CAAC,SAAI,KAAK,OAAO,KAAK,aAAa,WAAU,8BAA6B,IAE1E;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,YAAY,gBAAgB,SAAS,IAAI;AAAA;AAAA,UACpD;AAAA,UAGF;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cACX,WAAU;AAAA,cACV,OAAO,EAAE,YAAY,4DAA4D;AAAA;AAAA,UACnF;AAAA,WACF,GACF;AAAA,QAEA,6CAAC,SAAI,WAAU,2BACb;AAAA,uDAAC,SAAI,WAAU,0BACb;AAAA,wDAAC,OAAE,WAAU,8DACV,uBACH;AAAA,YACC,UACC,4CAAC,UAAK,WAAU,iJACb,kBACH;AAAA,aAEJ;AAAA,UACC,cACC,4CAAC,OAAE,WAAU,sEAAsE,sBAAW;AAAA,UAEhG,4CAAC,SAAI,WAAU,0CAAyC;AAAA,UACxD,6CAAC,SAAI,WAAU,2BACb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,eAAW;AAAA,gBACX,WAAU;AAAA,gBACV,OAAO,EAAE,YAAY,eAAe;AAAA;AAAA,YACtC;AAAA,YACA,4CAAC,UAAK,WAAU,+EAA8E,uBAE9F;AAAA,YACC,WACC,4CAAC,UAAK,WAAU,uFACb,mBACH;AAAA,aAEJ;AAAA,WACF;AAAA;AAAA;AAAA,EACF,GACF,GACF;AAEJ;","names":[]}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useRef } from "react";
|
|
4
3
|
import { cn } from "../utils/cn.js";
|
|
5
4
|
const FRAME_GRADIENT = "linear-gradient(135deg, #3b7bff, #8a5cf6 38%, #f6608f 70%, #fb8b46)";
|
|
6
5
|
function MedialaneCollectionCard({
|
|
@@ -11,94 +10,52 @@ function MedialaneCollectionCard({
|
|
|
11
10
|
creator,
|
|
12
11
|
className
|
|
13
12
|
}) {
|
|
14
|
-
const frameRef = useRef(null);
|
|
15
|
-
const handleMove = (e) => {
|
|
16
|
-
const el = frameRef.current;
|
|
17
|
-
if (!el || e.pointerType !== "mouse") return;
|
|
18
|
-
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
|
|
19
|
-
const rect = el.getBoundingClientRect();
|
|
20
|
-
const x = (e.clientX - rect.left) / rect.width;
|
|
21
|
-
const y = (e.clientY - rect.top) / rect.height;
|
|
22
|
-
el.style.setProperty("--rx", `${(0.5 - y) * 9}deg`);
|
|
23
|
-
el.style.setProperty("--ry", `${(x - 0.5) * 9}deg`);
|
|
24
|
-
el.style.setProperty("--mx", `${x * 100}%`);
|
|
25
|
-
el.style.setProperty("--my", `${y * 100}%`);
|
|
26
|
-
el.style.setProperty("--pop", "1.015");
|
|
27
|
-
};
|
|
28
|
-
const handleLeave = () => {
|
|
29
|
-
const el = frameRef.current;
|
|
30
|
-
if (!el) return;
|
|
31
|
-
el.style.setProperty("--rx", "0deg");
|
|
32
|
-
el.style.setProperty("--ry", "0deg");
|
|
33
|
-
el.style.setProperty("--pop", "1");
|
|
34
|
-
};
|
|
35
13
|
const displayName = name?.trim() || "Untitled";
|
|
36
|
-
return /* @__PURE__ */ jsx("div", { className: cn(
|
|
14
|
+
return /* @__PURE__ */ jsx("div", { className: cn(className), children: /* @__PURE__ */ jsx("div", { className: "rounded-[24px] border border-border", children: /* @__PURE__ */ jsxs(
|
|
37
15
|
"div",
|
|
38
16
|
{
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
style: { background: "linear-gradient(to top, rgba(10,14,31,0.45), transparent)" }
|
|
67
|
-
}
|
|
68
|
-
)
|
|
69
|
-
] }) }),
|
|
17
|
+
className: "ml-card-material relative rounded-[23px] overflow-hidden text-[#0a0e1f] dark:text-white",
|
|
18
|
+
children: [
|
|
19
|
+
/* @__PURE__ */ jsx("div", { className: "p-2.5 pb-0", children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-[4/5] w-full overflow-hidden rounded-[16px] ring-1 ring-black/10 dark:ring-white/10", children: [
|
|
20
|
+
image ? /* @__PURE__ */ jsx("img", { src: image, alt: displayName, className: "h-full w-full object-cover" }) : /* @__PURE__ */ jsx(
|
|
21
|
+
"div",
|
|
22
|
+
{
|
|
23
|
+
className: "h-full w-full",
|
|
24
|
+
style: { background: FRAME_GRADIENT, opacity: 0.9 }
|
|
25
|
+
}
|
|
26
|
+
),
|
|
27
|
+
/* @__PURE__ */ jsx(
|
|
28
|
+
"div",
|
|
29
|
+
{
|
|
30
|
+
"aria-hidden": true,
|
|
31
|
+
className: "pointer-events-none absolute inset-x-0 bottom-0 h-16",
|
|
32
|
+
style: { background: "linear-gradient(to top, rgba(10,14,31,0.45), transparent)" }
|
|
33
|
+
}
|
|
34
|
+
)
|
|
35
|
+
] }) }),
|
|
36
|
+
/* @__PURE__ */ jsxs("div", { className: "relative px-4 pt-3 pb-4", children: [
|
|
37
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
|
|
38
|
+
/* @__PURE__ */ jsx("p", { className: "min-w-0 flex-1 text-[18px] font-bold leading-snug truncate", children: displayName }),
|
|
39
|
+
serial && /* @__PURE__ */ jsx("span", { className: "mt-0.5 shrink-0 rounded-full bg-black/5 dark:bg-white/10 px-2 py-0.5 text-2xs font-semibold text-[#0a0e1f]/80 dark:text-white/80 tabular-nums", children: serial })
|
|
40
|
+
] }),
|
|
41
|
+
collection && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-[12.5px] text-[#0a0e1f]/55 dark:text-white/55 truncate", children: collection }),
|
|
42
|
+
/* @__PURE__ */ jsx("div", { className: "my-3 h-px bg-black/10 dark:bg-white/10" }),
|
|
43
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
70
44
|
/* @__PURE__ */ jsx(
|
|
71
|
-
"
|
|
45
|
+
"span",
|
|
72
46
|
{
|
|
73
47
|
"aria-hidden": true,
|
|
74
|
-
className: "
|
|
48
|
+
className: "h-3.5 w-3.5 rounded-full shrink-0",
|
|
49
|
+
style: { background: FRAME_GRADIENT }
|
|
75
50
|
}
|
|
76
51
|
),
|
|
77
|
-
/* @__PURE__ */
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
collection && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-[12.5px] text-[#0a0e1f]/55 dark:text-white/55 truncate", children: collection }),
|
|
83
|
-
/* @__PURE__ */ jsx("div", { className: "my-3 h-px bg-black/10 dark:bg-white/10" }),
|
|
84
|
-
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
85
|
-
/* @__PURE__ */ jsx(
|
|
86
|
-
"span",
|
|
87
|
-
{
|
|
88
|
-
"aria-hidden": true,
|
|
89
|
-
className: "h-3.5 w-3.5 rounded-full shrink-0",
|
|
90
|
-
style: { background: FRAME_GRADIENT }
|
|
91
|
-
}
|
|
92
|
-
),
|
|
93
|
-
/* @__PURE__ */ jsx("span", { className: "text-[9px] font-bold tracking-[0.18em] text-[#0a0e1f]/50 dark:text-white/50", children: "MEDIALANE" }),
|
|
94
|
-
creator && /* @__PURE__ */ jsx("span", { className: "ml-auto min-w-0 truncate text-2xs text-[#0a0e1f]/55 dark:text-white/55 tabular-nums", children: creator })
|
|
95
|
-
] })
|
|
96
|
-
] })
|
|
97
|
-
]
|
|
98
|
-
}
|
|
99
|
-
)
|
|
52
|
+
/* @__PURE__ */ jsx("span", { className: "text-[9px] font-bold tracking-[0.18em] text-[#0a0e1f]/50 dark:text-white/50", children: "MEDIALANE" }),
|
|
53
|
+
creator && /* @__PURE__ */ jsx("span", { className: "ml-auto min-w-0 truncate text-2xs text-[#0a0e1f]/55 dark:text-white/55 tabular-nums", children: creator })
|
|
54
|
+
] })
|
|
55
|
+
] })
|
|
56
|
+
]
|
|
100
57
|
}
|
|
101
|
-
) });
|
|
58
|
+
) }) });
|
|
102
59
|
}
|
|
103
60
|
export {
|
|
104
61
|
MedialaneCollectionCard
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/medialane-collection-card.tsx"],"sourcesContent":["\"use client\";\n\nimport {
|
|
1
|
+
{"version":3,"sources":["../../src/components/medialane-collection-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../utils/cn.js\";\n\nexport interface MedialaneCollectionCardProps {\n\n image?: string | null;\n\n name?: string;\n\n collection?: string;\n\n serial?: string;\n\n creator?: string;\n className?: string;\n}\n\nconst FRAME_GRADIENT =\n \"linear-gradient(135deg, #3b7bff, #8a5cf6 38%, #f6608f 70%, #fb8b46)\";\n\nexport function MedialaneCollectionCard({\n image,\n name,\n collection,\n serial,\n creator,\n className,\n}: MedialaneCollectionCardProps) {\n const displayName = name?.trim() || \"Untitled\";\n\n return (\n <div className={cn(className)}>\n <div className=\"rounded-[24px] border border-border\">\n <div\n className=\"ml-card-material relative rounded-[23px] overflow-hidden text-[#0a0e1f] dark:text-white\"\n >\n\n <div className=\"p-2.5 pb-0\">\n <div className=\"relative aspect-[4/5] w-full overflow-hidden rounded-[16px] ring-1 ring-black/10 dark:ring-white/10\">\n {image ? (\n\n <img src={image} alt={displayName} className=\"h-full w-full object-cover\" />\n ) : (\n <div\n className=\"h-full w-full\"\n style={{ background: FRAME_GRADIENT, opacity: 0.9 }}\n />\n )}\n\n <div\n aria-hidden\n className=\"pointer-events-none absolute inset-x-0 bottom-0 h-16\"\n style={{ background: \"linear-gradient(to top, rgba(10,14,31,0.45), transparent)\" }}\n />\n </div>\n </div>\n\n <div className=\"relative px-4 pt-3 pb-4\">\n <div className=\"flex items-start gap-2\">\n <p className=\"min-w-0 flex-1 text-[18px] font-bold leading-snug truncate\">\n {displayName}\n </p>\n {serial && (\n <span className=\"mt-0.5 shrink-0 rounded-full bg-black/5 dark:bg-white/10 px-2 py-0.5 text-2xs font-semibold text-[#0a0e1f]/80 dark:text-white/80 tabular-nums\">\n {serial}\n </span>\n )}\n </div>\n {collection && (\n <p className=\"mt-0.5 text-[12.5px] text-[#0a0e1f]/55 dark:text-white/55 truncate\">{collection}</p>\n )}\n <div className=\"my-3 h-px bg-black/10 dark:bg-white/10\" />\n <div className=\"flex items-center gap-2\">\n <span\n aria-hidden\n className=\"h-3.5 w-3.5 rounded-full shrink-0\"\n style={{ background: FRAME_GRADIENT }}\n />\n <span className=\"text-[9px] font-bold tracking-[0.18em] text-[#0a0e1f]/50 dark:text-white/50\">\n MEDIALANE\n </span>\n {creator && (\n <span className=\"ml-auto min-w-0 truncate text-2xs text-[#0a0e1f]/55 dark:text-white/55 tabular-nums\">\n {creator}\n </span>\n )}\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n}\n"],"mappings":";AAuCY,SAGI,KAHJ;AArCZ,SAAS,UAAU;AAgBnB,MAAM,iBACJ;AAEK,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiC;AAC/B,QAAM,cAAc,MAAM,KAAK,KAAK;AAEpC,SACE,oBAAC,SAAI,WAAW,GAAG,SAAS,GAC1B,8BAAC,SAAI,WAAU,uCACb;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MAGV;AAAA,4BAAC,SAAI,WAAU,cACb,+BAAC,SAAI,WAAU,uGACZ;AAAA,kBAEC,oBAAC,SAAI,KAAK,OAAO,KAAK,aAAa,WAAU,8BAA6B,IAE1E;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,YAAY,gBAAgB,SAAS,IAAI;AAAA;AAAA,UACpD;AAAA,UAGF;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cACX,WAAU;AAAA,cACV,OAAO,EAAE,YAAY,4DAA4D;AAAA;AAAA,UACnF;AAAA,WACF,GACF;AAAA,QAEA,qBAAC,SAAI,WAAU,2BACb;AAAA,+BAAC,SAAI,WAAU,0BACb;AAAA,gCAAC,OAAE,WAAU,8DACV,uBACH;AAAA,YACC,UACC,oBAAC,UAAK,WAAU,iJACb,kBACH;AAAA,aAEJ;AAAA,UACC,cACC,oBAAC,OAAE,WAAU,sEAAsE,sBAAW;AAAA,UAEhG,oBAAC,SAAI,WAAU,0CAAyC;AAAA,UACxD,qBAAC,SAAI,WAAU,2BACb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,eAAW;AAAA,gBACX,WAAU;AAAA,gBACV,OAAO,EAAE,YAAY,eAAe;AAAA;AAAA,YACtC;AAAA,YACA,oBAAC,UAAK,WAAU,+EAA8E,uBAE9F;AAAA,YACC,WACC,oBAAC,UAAK,WAAU,uFACb,mBACH;AAAA,aAEJ;AAAA,WACF;AAAA;AAAA;AAAA,EACF,GACF,GACF;AAEJ;","names":[]}
|
package/dist/medialane.css
CHANGED
|
@@ -278,11 +278,7 @@ input[type="number"] { -moz-appearance: textfield; }
|
|
|
278
278
|
|
|
279
279
|
/* ── Collector card material (MedialaneCollectionCard) ────────────────── */
|
|
280
280
|
/* Light by default (matches the app's light-theme root, no .dark ancestor);
|
|
281
|
-
.dark overrides restore the original always-dark foil-on-navy look.
|
|
282
|
-
frame gradient + tilt/sheen mechanics stay identical in both themes — only
|
|
283
|
-
the material color and the sheen's blend mode/highlight change, since a
|
|
284
|
-
bright white "screen" bloom that reads as a premium highlight on navy
|
|
285
|
-
would just wash out invisibly on a near-white card. */
|
|
281
|
+
.dark overrides restore the original always-dark foil-on-navy look. */
|
|
286
282
|
.ml-card-material {
|
|
287
283
|
background:
|
|
288
284
|
radial-gradient(120% 90% at 0% 0%, rgba(59,123,255,0.07), transparent 55%),
|
|
@@ -295,18 +291,6 @@ input[type="number"] { -moz-appearance: textfield; }
|
|
|
295
291
|
radial-gradient(120% 90% at 100% 100%, rgba(251,139,70,0.10), transparent 55%),
|
|
296
292
|
#0a0e1f;
|
|
297
293
|
}
|
|
298
|
-
.ml-card-sheen {
|
|
299
|
-
background:
|
|
300
|
-
radial-gradient(420px circle at var(--mx, 70%) var(--my, 20%), rgba(91,76,230,0.10), transparent 45%),
|
|
301
|
-
linear-gradient(115deg, rgba(59,123,255,0.05), rgba(138,92,246,0.05) 35%, rgba(246,96,143,0.05) 65%, rgba(251,139,70,0.05));
|
|
302
|
-
mix-blend-mode: multiply;
|
|
303
|
-
}
|
|
304
|
-
.dark .ml-card-sheen {
|
|
305
|
-
background:
|
|
306
|
-
radial-gradient(420px circle at var(--mx, 70%) var(--my, 20%), rgba(255,255,255,0.20), transparent 45%),
|
|
307
|
-
linear-gradient(115deg, rgba(59,123,255,0.14), rgba(138,92,246,0.14) 35%, rgba(246,96,143,0.14) 65%, rgba(251,139,70,0.14));
|
|
308
|
-
mix-blend-mode: screen;
|
|
309
|
-
}
|
|
310
294
|
|
|
311
295
|
/* ── Action dialog keyframes ──────────────────────────────────────────── */
|
|
312
296
|
@keyframes mlFade {
|