@fiestaboard/ui 5.2.0 → 5.3.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/board/board-display.d.ts +13 -1
- package/dist/components/board/board-display.js +103 -101
- package/dist/components/board/board-display.js.map +1 -1
- package/dist/components/board/static-board-display.d.ts +6 -1
- package/dist/components/board/static-board-display.js +36 -34
- package/dist/components/board/static-board-display.js.map +1 -1
- package/dist/components/containment/media-frame.d.ts +28 -0
- package/dist/components/containment/media-frame.js +40 -0
- package/dist/components/containment/media-frame.js.map +1 -0
- package/dist/components/overlays/lightbox.d.ts +37 -0
- package/dist/components/overlays/lightbox.js +54 -0
- package/dist/components/overlays/lightbox.js.map +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +99 -97
- package/dist/lib/board-characters.d.ts +33 -7
- package/dist/lib/board-characters.js +14 -11
- package/dist/lib/board-characters.js.map +1 -1
- package/package.json +1 -1
|
@@ -7,61 +7,63 @@ import { isNoteArray as d, resolveDimensions as f } from "../../lib/board-dimens
|
|
|
7
7
|
import { memo as p, useMemo as m } from "react";
|
|
8
8
|
import { jsx as h, jsxs as g } from "react/jsx-runtime";
|
|
9
9
|
//#region src/components/board/static-board-display.tsx
|
|
10
|
-
var _ = (e) => `Board preview: ${e}`, v = "Board preview", y = p(function({ message: p, size: y = "sm", boardType: b = "black", deviceType: x = "flagship",
|
|
11
|
-
let
|
|
10
|
+
var _ = (e) => `Board preview: ${e}`, v = "Board preview", y = p(function({ message: p, size: y = "sm", boardType: b = "black", deviceType: x = "flagship", code62Glyph: S, className: C = "", notesWide: w = 1, notesTall: T = 1, previewLabel: E, messageLabel: D = _, emptyLabel: O = "Empty board display" }) {
|
|
11
|
+
let k = f(x, w, T), A = d(x), j = b === "white", M = j ? "var(--color-board-surface-light)" : "var(--color-board-surface-dark)", N = j ? "var(--color-board-text-on-light)" : "var(--color-board-text-on-dark)", P = m(() => t(p ?? "", k.rows, k.cols, x, S), [
|
|
12
12
|
p,
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
x
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
if (
|
|
19
|
-
|
|
20
|
-
|
|
13
|
+
k.rows,
|
|
14
|
+
k.cols,
|
|
15
|
+
x,
|
|
16
|
+
S
|
|
17
|
+
]), F = m(() => {
|
|
18
|
+
if (!p) return O;
|
|
19
|
+
if (E !== void 0) return E;
|
|
20
|
+
let e = n(p, x, S);
|
|
21
|
+
return e ? D(e) : v;
|
|
21
22
|
}, [
|
|
22
23
|
p,
|
|
23
24
|
x,
|
|
24
|
-
|
|
25
|
+
S,
|
|
25
26
|
E,
|
|
26
|
-
D
|
|
27
|
-
|
|
27
|
+
D,
|
|
28
|
+
O
|
|
29
|
+
]), I = y === "sm" ? "6px" : y === "md" ? "8px" : "10px", L = j ? "var(--color-board-bezel-light)" : "var(--color-board-bezel-dark)", R = j ? "var(--color-board-bezel-border-light)" : "var(--color-board-bezel-border-dark)", z = y === "sm" ? j ? "0 2px 8px rgba(0,0,0,0.1), inset 0 1px 2px rgba(255,255,255,0.9)" : "0 2px 8px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.06)" : j ? "0 8px 32px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08), inset 0 1px 2px rgba(255,255,255,0.9), inset 0 0 0 1px rgba(255,255,255,0.5)" : "0 8px 32px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.08), inset 0 0 0 1px rgba(255,255,255,0.03)", B = y === "sm" ? j ? "0 1px 2px rgba(0,0,0,0.15)" : "0 1px 2px rgba(0,0,0,0.4)" : j ? "0 2px 4px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0,0,0.1), inset 0 -1px 2px rgba(255,255,255,0.5), inset 1px 0 1px rgba(0,0,0,0.08), inset -1px 0 1px rgba(255,255,255,0.4)" : "0 2px 4px rgba(0,0,0,0.5), inset 0 1px 2px rgba(0,0,0,0.8), inset 0 -1px 1px rgba(255,255,255,0.08), inset 1px 0 1px rgba(0,0,0,0.5), inset -1px 0 1px rgba(255,255,255,0.05)";
|
|
28
30
|
return /* @__PURE__ */ h("div", {
|
|
29
31
|
className: "w-full flex justify-center",
|
|
30
32
|
children: /* @__PURE__ */ h("div", {
|
|
31
33
|
role: "img",
|
|
32
|
-
"aria-label":
|
|
34
|
+
"aria-label": F,
|
|
33
35
|
"data-slot": "static-board-display",
|
|
34
|
-
className: `${y === "sm" ? "rounded-lg border-[3px]" : "rounded-lg sm:rounded-xl border-[3px] sm:border-[4px] lg:border-[5px]"} ${
|
|
36
|
+
className: `${y === "sm" ? "rounded-lg border-[3px]" : "rounded-lg sm:rounded-xl border-[3px] sm:border-[4px] lg:border-[5px]"} ${C}`,
|
|
35
37
|
style: {
|
|
36
|
-
backgroundColor:
|
|
37
|
-
borderColor:
|
|
38
|
-
boxShadow:
|
|
38
|
+
backgroundColor: L,
|
|
39
|
+
borderColor: R,
|
|
40
|
+
boxShadow: z,
|
|
39
41
|
width: "fit-content"
|
|
40
42
|
},
|
|
41
43
|
children: /* @__PURE__ */ h("div", {
|
|
42
44
|
className: `${i[y]} relative`,
|
|
43
45
|
"aria-hidden": "true",
|
|
44
|
-
style: { background:
|
|
46
|
+
style: { background: j ? "linear-gradient(135deg, var(--color-board-surface-light) 0%, var(--color-board-bezel-border-light) 100%)" : "linear-gradient(135deg, var(--color-board-surface-dark) 0%, var(--color-board-black) 100%)" },
|
|
45
47
|
children: /* @__PURE__ */ h("div", {
|
|
46
48
|
className: `flex flex-col ${r[y]}`,
|
|
47
|
-
children:
|
|
48
|
-
let i =
|
|
49
|
+
children: P.map((t, n) => {
|
|
50
|
+
let i = A && n > 0 && n % 3 == 0;
|
|
49
51
|
return /* @__PURE__ */ h("div", {
|
|
50
52
|
"data-note-row": "",
|
|
51
53
|
...i ? { "data-note-row-seam": "true" } : {},
|
|
52
54
|
className: `flex ${r[y]} justify-center`,
|
|
53
|
-
style: i ? { marginTop:
|
|
55
|
+
style: i ? { marginTop: I } : void 0,
|
|
54
56
|
children: t.map((t, n) => {
|
|
55
|
-
let r =
|
|
57
|
+
let r = A && n > 0 && n % 15 == 0, i = r ? { marginLeft: I } : void 0, d = r ? { "data-note-col-seam": "true" } : {};
|
|
56
58
|
if (t.type === "color") {
|
|
57
|
-
let r = e(t.code,
|
|
59
|
+
let r = e(t.code, j);
|
|
58
60
|
return y === "sm" ? /* @__PURE__ */ h("div", {
|
|
59
61
|
"data-note-tile": "",
|
|
60
62
|
...d,
|
|
61
63
|
className: `${o[y]} ${a[y]} shrink-0`,
|
|
62
64
|
style: {
|
|
63
65
|
backgroundColor: r,
|
|
64
|
-
boxShadow:
|
|
66
|
+
boxShadow: B,
|
|
65
67
|
contain: "layout style paint",
|
|
66
68
|
...i
|
|
67
69
|
}
|
|
@@ -70,8 +72,8 @@ var _ = (e) => `Board preview: ${e}`, v = "Board preview", y = p(function({ mess
|
|
|
70
72
|
...d,
|
|
71
73
|
className: `relative ${o[y]} ${a[y]} shrink-0 overflow-hidden`,
|
|
72
74
|
style: {
|
|
73
|
-
backgroundColor:
|
|
74
|
-
boxShadow:
|
|
75
|
+
backgroundColor: M,
|
|
76
|
+
boxShadow: B,
|
|
75
77
|
contain: "layout style paint",
|
|
76
78
|
...i
|
|
77
79
|
},
|
|
@@ -98,14 +100,14 @@ var _ = (e) => `Board preview: ${e}`, v = "Board preview", y = p(function({ mess
|
|
|
98
100
|
...d,
|
|
99
101
|
className: `${o[y]} ${a[y]} flex shrink-0 items-center justify-center`,
|
|
100
102
|
style: {
|
|
101
|
-
backgroundColor:
|
|
102
|
-
boxShadow:
|
|
103
|
+
backgroundColor: M,
|
|
104
|
+
boxShadow: B,
|
|
103
105
|
contain: "layout style paint",
|
|
104
106
|
...i
|
|
105
107
|
},
|
|
106
108
|
children: f !== " " && /* @__PURE__ */ h("span", {
|
|
107
109
|
className: `${s[y]} font-mono font-semibold select-none leading-none`,
|
|
108
|
-
style: { color: p ? "#eb4034" :
|
|
110
|
+
style: { color: p ? "#eb4034" : N },
|
|
109
111
|
children: f
|
|
110
112
|
})
|
|
111
113
|
}, n) : /* @__PURE__ */ g("div", {
|
|
@@ -113,8 +115,8 @@ var _ = (e) => `Board preview: ${e}`, v = "Board preview", y = p(function({ mess
|
|
|
113
115
|
...d,
|
|
114
116
|
className: `relative ${o[y]} ${a[y]} shrink-0 overflow-hidden`,
|
|
115
117
|
style: {
|
|
116
|
-
backgroundColor:
|
|
117
|
-
boxShadow:
|
|
118
|
+
backgroundColor: M,
|
|
119
|
+
boxShadow: B,
|
|
118
120
|
contain: "layout style paint",
|
|
119
121
|
...i
|
|
120
122
|
},
|
|
@@ -127,7 +129,7 @@ var _ = (e) => `Board preview: ${e}`, v = "Board preview", y = p(function({ mess
|
|
|
127
129
|
},
|
|
128
130
|
children: f !== " " && /* @__PURE__ */ h("span", {
|
|
129
131
|
className: `${s[y]} font-mono font-semibold select-none leading-none`,
|
|
130
|
-
style: { color: p ? "#eb4034" :
|
|
132
|
+
style: { color: p ? "#eb4034" : N },
|
|
131
133
|
children: f
|
|
132
134
|
})
|
|
133
135
|
}),
|
|
@@ -139,7 +141,7 @@ var _ = (e) => `Board preview: ${e}`, v = "Board preview", y = p(function({ mess
|
|
|
139
141
|
className: "absolute inset-0 pointer-events-none",
|
|
140
142
|
style: {
|
|
141
143
|
zIndex: 1,
|
|
142
|
-
background:
|
|
144
|
+
background: j ? "linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 50%, rgba(0,0,0,0.05) 100%)" : "linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 50%, rgba(0,0,0,0.2) 100%)"
|
|
143
145
|
}
|
|
144
146
|
})
|
|
145
147
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"static-board-display.js","names":[],"sources":["../../../src/components/board/static-board-display.tsx"],"mappings":";;;;;;;;;
|
|
1
|
+
{"version":3,"file":"static-board-display.js","names":[],"sources":["../../../src/components/board/static-board-display.tsx"],"mappings":";;;;;;;;;AAkDA,IAAM,KAAuB,MAAgB,kBAAkB,KAGzD,IAAgB,iBAET,IAAqB,EAAK,SAA4B,EACjE,YACA,UAAO,MACP,eAAY,SACZ,gBAAa,YACb,gBACA,eAAY,IACZ,eAAY,GACZ,eAAY,GACZ,iBACA,kBAAe,GACf,gBAAa,yBACa;CAC1B,IAAM,IAAO,EAAkB,GAAY,GAAW,CAAS,GACzD,IAAY,EAAY,CAAU,GAClC,IAAe,MAAc,SAC7B,IAAS,IAAe,qCAAqC,mCAC7D,IAAY,IAAe,qCAAqC,mCAEhE,IAAO,QACL,EAAc,KAAW,IAAI,EAAK,MAAM,EAAK,MAAM,GAAY,CAAW,GAChF;EAAC;EAAS,EAAK;EAAM,EAAK;EAAM;EAAY;CAAW,CACzD,GAOM,IAAQ,QAAc;EAC1B,IAAI,CAAC,GAAS,OAAO;EACrB,IAAI,MAAiB,KAAA,GAAW,OAAO;EAGvC,IAAM,IAAO,EAAc,GAAS,GAAY,CAAW;EAC3D,OAAO,IAAO,EAAa,CAAI,IAAI;CACrC,GAAG;EAAC;EAAS;EAAY;EAAa;EAAc;EAAc;CAAU,CAAC,GAGvE,IAAU,MAAS,OAAO,QAAQ,MAAS,OAAO,QAAQ,QAE1D,IAAU,IAAe,mCAAmC,iCAC5D,IAAc,IAAe,0CAA0C,wCAGvE,IACJ,MAAS,OACL,IACE,qEACA,sEACF,IACE,2IACA,0IACF,IACJ,MAAS,OACL,IACE,+BACA,8BACF,IACE,iLACA;CAKR,OACE,kBAAC,OAAD;EAAK,WAAU;EAOb,UAAA,kBAAC,OAAD;GACE,MAAK;GACL,cAAY;GACZ,aAAU;GACV,WAAW,GAdf,MAAS,OAAO,4BAA4B,wEAcZ,GAAG;GAC/B,OAAO;IAAE,iBAAiB;IAAS;IAAa;IAAW,OAAO;GAAc;GAEhF,UAAA,kBAAC,OAAD;IACE,WAAW,GAAG,EAAe,GAAM;IACnC,eAAY;IACZ,OAAO,EACL,YAAY,IACR,6GACA,6FACN;IAEA,UAAA,kBAAC,OAAD;KAAK,WAAW,iBAAiB,EAAW;KACzC,UAAA,EAAK,KAAK,GAAK,MAAW;MACzB,IAAM,IAAY,KAAa,IAAS,KAAK,IAAA,KAAuB;MACpE,OACE,kBAAC,OAAD;OAEE,iBAAc;OACd,GAAK,IAAY,EAAE,sBAAsB,OAAO,IAAI,CAAC;OACrD,WAAW,QAAQ,EAAW,GAAM;OACpC,OAAO,IAAY,EAAE,WAAW,EAAQ,IAAI,KAAA;OAkB3C,UAAA,EAAI,KAAK,GAAO,MAAW;QAC1B,IAAM,IAAY,KAAa,IAAS,KAAK,IAAA,MAAuB,GAC9D,IAAgB,IAAY,EAAE,YAAY,EAAQ,IAAI,KAAA,GACtD,IAAY,IAAY,EAAE,sBAAsB,OAAO,IAAI,CAAC;QAElE,IAAI,EAAM,SAAS,SAAS;SAC1B,IAAM,IAAU,EAAiB,EAAM,MAAM,CAAY;SAmBzD,OAhBI,MAAS,OAET,kBAAC,OAAD;UAEE,kBAAe;UACf,GAAI;UACJ,WAAW,GAAG,EAAY,GAAM,GAAG,EAAc,GAAM;UACvD,OAAO;WACL,iBAAiB;WACjB,WAAW;WACX,SAAS;WACT,GAAG;UACL;SACD,GAVM,CAUN,IAIH,kBAAC,OAAD;UAEE,kBAAe;UACf,GAAI;UACJ,WAAW,YAAY,EAAY,GAAM,GAAG,EAAc,GAAM;UAChE,OAAO;WACL,iBAAiB;WACjB,WAAW;WACX,SAAS;WACT,GAAG;UACL;UAEA,UAAA,kBAAC,OAAD;WACE,WAAW,YAAY,EAAc,GAAM;WAC3C,OAAO;YACL,KAAK;YACL,QAAQ;YACR,MAAM;YACN,OAAO;YACP,iBAAiB;YACjB,WACE;WACJ;WAEA,UAAA,kBAAC,OAAD;YAAK,WAAW;YAAY,OAAO,EAAU;WAAa,CAAA;UACvD,CAAA;SACF,GAzBE,CAyBF;QAET;QAEA,IAAM,IAAO,EAAM,OACb,IAAU,MAAS;QAgCzB,OA1BI,MAAS,OAET,kBAAC,OAAD;SAEE,kBAAe;SACf,GAAI;SACJ,WAAW,GAAG,EAAY,GAAM,GAAG,EAAc,GAAM;SACvD,OAAO;UACL,iBAAiB;UACjB,WAAW;UACX,SAAS;UACT,GAAG;SACL;SAEC,UAAA,MAAS,OACR,kBAAC,QAAD;UACE,WAAW,GAAG,EAAgB,GAAM;UACpC,OAAO,EAAE,OAAO,IAAU,YAAY,EAAU;UAE/C,UAAA;SACG,CAAA;QAEL,GAnBE,CAmBF,IAKP,kBAAC,OAAD;SAEE,kBAAe;SACf,GAAI;SACJ,WAAW,YAAY,EAAY,GAAM,GAAG,EAAc,GAAM;SAChE,OAAO;UACL,iBAAiB;UACjB,WAAW;UACX,SAAS;UACT,GAAG;SACL;SAVF,UAAA;UAaE,kBAAC,OAAD;WACE,WAAU;WACV,OAAO;YAAE,QAAQ;YAAG,WAAW,EAAkB;WAAW;WAE3D,UAAA,MAAS,OACR,kBAAC,QAAD;YACE,WAAW,GAAG,EAAgB,GAAM;YACpC,OAAO,EAAE,OAAO,IAAU,YAAY,EAAU;YAE/C,UAAA;WACG,CAAA;UAEL,CAAA;UACL,kBAAC,OAAD;WAAK,WAAW;WAAY,OAAO,EAAU;UAAa,CAAA;UAC1D,kBAAC,OAAD;WACE,WAAU;WACV,OAAO;YACL,QAAQ;YACR,YAAY,IACR,8FACA;WACN;UACD,CAAA;SACE;QAnCE,GAAA,CAmCF;OAET,CAAC;MACE,GAvJE,CAuJF;KAET,CAAC;IACE,CAAA;GACF,CAAA;EACF,CAAA;CACF,CAAA;AAET,CAAC"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
/**
|
|
3
|
+
* MediaFrame — a framed figure for screenshots and other media.
|
|
4
|
+
*
|
|
5
|
+
* Promoted from the docs site's BoardScreenshot/ThemedScreenshot pair
|
|
6
|
+
* (issue #229 item 4), which shipped two structurally identical CSS modules.
|
|
7
|
+
* The frame is the shared shell: media on a card surface with a hairline
|
|
8
|
+
* border, plus an optional bar for a caption or a toolbar (the docs put a
|
|
9
|
+
* black/white toggle there). The bar renders whatever the consumer passes —
|
|
10
|
+
* the toggle itself belongs to ToggleGroup (#218), not here.
|
|
11
|
+
*
|
|
12
|
+
* Zooming is composition, not a built-in: wrap `MediaFrameMedia` in a
|
|
13
|
+
* `LightboxTrigger asChild` (see overlays/lightbox.tsx), or pass `onZoom`
|
|
14
|
+
* for a hand-rolled handler. Either way the media becomes a real `<button>`,
|
|
15
|
+
* so the affordance is keyboard-operable for free.
|
|
16
|
+
*/
|
|
17
|
+
declare function MediaFrame({ className, ...props }: React.ComponentProps<"figure">): React.JSX.Element;
|
|
18
|
+
interface MediaFrameMediaProps extends React.ComponentProps<"button"> {
|
|
19
|
+
/**
|
|
20
|
+
* Zoom-affordance handler. Setting it (or `onClick`, which a
|
|
21
|
+
* `LightboxTrigger asChild` injects) switches the media well from a plain
|
|
22
|
+
* `<div>` to a `<button>` with a zoom cursor and focus ring.
|
|
23
|
+
*/
|
|
24
|
+
onZoom?: React.MouseEventHandler<HTMLButtonElement>;
|
|
25
|
+
}
|
|
26
|
+
declare function MediaFrameMedia({ className, onZoom, onClick, type, children, ...props }: MediaFrameMediaProps): React.JSX.Element;
|
|
27
|
+
declare function MediaFrameBar({ className, ...props }: React.ComponentProps<"figcaption">): React.JSX.Element;
|
|
28
|
+
export { MediaFrame, MediaFrameBar, MediaFrameMedia };
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { cn as e } from "../../lib/utils.js";
|
|
2
|
+
import "react";
|
|
3
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
4
|
+
//#region src/components/containment/media-frame.tsx
|
|
5
|
+
function n({ className: n, ...r }) {
|
|
6
|
+
return /* @__PURE__ */ t("figure", {
|
|
7
|
+
"data-slot": "media-frame",
|
|
8
|
+
className: e("flex flex-col overflow-hidden rounded-xl border bg-card text-card-foreground shadow-card", n),
|
|
9
|
+
...r
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
var r = "block w-full [&_img]:block [&_img]:h-auto [&_img]:w-full [&_video]:block [&_video]:h-auto [&_video]:w-full";
|
|
13
|
+
function i({ className: n, onZoom: i, onClick: a, type: o, children: s, ...c }) {
|
|
14
|
+
return i == null && a == null ? /* @__PURE__ */ t("div", {
|
|
15
|
+
"data-slot": "media-frame-media",
|
|
16
|
+
className: e(r, n),
|
|
17
|
+
...c,
|
|
18
|
+
children: s
|
|
19
|
+
}) : /* @__PURE__ */ t("button", {
|
|
20
|
+
type: o ?? "button",
|
|
21
|
+
"data-slot": "media-frame-media",
|
|
22
|
+
className: e(r, "cursor-zoom-in outline-none focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-ring/50", n),
|
|
23
|
+
onClick: (e) => {
|
|
24
|
+
a?.(e), i?.(e);
|
|
25
|
+
},
|
|
26
|
+
...c,
|
|
27
|
+
children: s
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
function a({ className: n, ...r }) {
|
|
31
|
+
return /* @__PURE__ */ t("figcaption", {
|
|
32
|
+
"data-slot": "media-frame-bar",
|
|
33
|
+
className: e("flex flex-wrap items-center justify-center gap-2 border-t px-3 py-2 text-sm text-muted-foreground", n),
|
|
34
|
+
...r
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
//#endregion
|
|
38
|
+
export { n as MediaFrame, a as MediaFrameBar, i as MediaFrameMedia };
|
|
39
|
+
|
|
40
|
+
//# sourceMappingURL=media-frame.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"media-frame.js","names":[],"sources":["../../../src/components/containment/media-frame.tsx"],"mappings":";;;;AAoBA,SAAS,EAAW,EAAE,cAAW,GAAG,KAAyC;CAC3E,OACE,kBAAC,UAAD;EACE,aAAU;EAKV,WAAW,EACT,4FACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAMA,IAAM,IACJ;AAWF,SAAS,EAAgB,EAAE,cAAW,WAAQ,YAAS,SAAM,aAAU,GAAG,KAA+B;CA8BvG,OAtBoB,KAAU,QAAQ,KAAW,OAI7C,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EAAG,GAAkB,CAAS;EACzC,GAAK;EAEJ;CACE,CAAA,IAaP,kBAAC,UAAD;EAEE,MAAM,KAAQ;EACd,aAAU;EAIV,WAAW,EACT,GACA,4GACA,CACF;EACA,UArB6D,MAAU;GAKzE,AADA,IAAU,CAAK,GACf,IAAS,CAAK;EAChB;EAgBI,GAAI;EAEH;CACK,CAAA;AAEZ;AAEA,SAAS,EAAc,EAAE,cAAW,GAAG,KAA6C;CAClF,OACE,kBAAC,cAAD;EACE,aAAU;EAMV,WAAW,EACT,qGACA,CACF;EACA,GAAI;CACL,CAAA;AAEL"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { Dialog as LightboxPrimitive } from "@base-ui/react/dialog";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
/**
|
|
4
|
+
* Lightbox — click-to-zoom media viewer (issue #229 item 4).
|
|
5
|
+
*
|
|
6
|
+
* A styled composition of the same Base UI Dialog that dialog.tsx and
|
|
7
|
+
* sheet.tsx wrap, so Esc-to-close, backdrop-click dismissal, focus
|
|
8
|
+
* containment, body scroll lock and portalling are the primitive's, not
|
|
9
|
+
* re-implemented. The docs-site original hand-rolled all of that (keydown
|
|
10
|
+
* listener + overflow toggle + onClick-stopPropagation) and still had no
|
|
11
|
+
* focus trap; building on the dialog foundation is the point of promoting it.
|
|
12
|
+
*
|
|
13
|
+
* Differences from Dialog are presentational only: a near-opaque
|
|
14
|
+
* theme-invariant scrim, media floating on it with no card surface, and a
|
|
15
|
+
* viewport-pinned close chip.
|
|
16
|
+
*/
|
|
17
|
+
declare const Lightbox: typeof LightboxPrimitive.Root;
|
|
18
|
+
declare function LightboxTrigger({ asChild, children, ...props }: React.ComponentProps<typeof LightboxPrimitive.Trigger> & {
|
|
19
|
+
asChild?: boolean;
|
|
20
|
+
}): React.JSX.Element;
|
|
21
|
+
declare const LightboxPortal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
22
|
+
declare function LightboxClose({ asChild, children, ...props }: React.ComponentProps<typeof LightboxPrimitive.Close> & {
|
|
23
|
+
asChild?: boolean;
|
|
24
|
+
}): React.JSX.Element;
|
|
25
|
+
declare function LightboxOverlay({ className, ...props }: React.ComponentProps<typeof LightboxPrimitive.Backdrop>): React.JSX.Element;
|
|
26
|
+
interface LightboxContentProps extends React.ComponentProps<typeof LightboxPrimitive.Popup> {
|
|
27
|
+
/**
|
|
28
|
+
* Accessible name for the dialog. Media dialogs have no visible title to
|
|
29
|
+
* point aria-labelledby at, so a label is defaulted rather than optional —
|
|
30
|
+
* override it with something content-specific ("Dashboard screenshot")
|
|
31
|
+
* when you can.
|
|
32
|
+
*/
|
|
33
|
+
"aria-label"?: string;
|
|
34
|
+
}
|
|
35
|
+
declare function LightboxContent({ className, children, "aria-label": ariaLabel, ...props }: LightboxContentProps): React.JSX.Element;
|
|
36
|
+
declare function LightboxFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
|
|
37
|
+
export { Lightbox, LightboxClose, LightboxContent, LightboxFooter, LightboxOverlay, LightboxPortal, LightboxTrigger };
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn as e } from "../../lib/utils.js";
|
|
3
|
+
import { OverlayClose as t } from "./overlay-close.js";
|
|
4
|
+
import * as n from "react";
|
|
5
|
+
import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
6
|
+
import { Dialog as a } from "@base-ui/react/dialog";
|
|
7
|
+
//#region src/components/overlays/lightbox.tsx
|
|
8
|
+
var o = a.Root;
|
|
9
|
+
function s({ asChild: e = !1, children: t, ...i }) {
|
|
10
|
+
return /* @__PURE__ */ r(a.Trigger, {
|
|
11
|
+
"data-slot": "lightbox-trigger",
|
|
12
|
+
...e ? { render: n.Children.only(t) } : { children: t },
|
|
13
|
+
...i
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
var c = a.Portal;
|
|
17
|
+
function l({ asChild: e = !1, children: t, ...i }) {
|
|
18
|
+
return /* @__PURE__ */ r(a.Close, {
|
|
19
|
+
"data-slot": "lightbox-close",
|
|
20
|
+
...e ? { render: n.Children.only(t) } : { children: t },
|
|
21
|
+
...i
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
function u({ className: t, ...n }) {
|
|
25
|
+
return /* @__PURE__ */ r(a.Backdrop, {
|
|
26
|
+
"data-slot": "lightbox-overlay",
|
|
27
|
+
className: e("fixed inset-0 z-[var(--z-modal)] bg-black/85 data-[open]:animate-in data-[ending-style]:animate-out data-[ending-style]:fade-out-0 data-[open]:fade-in-0", t),
|
|
28
|
+
...n
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
function d({ className: n, children: o, "aria-label": s = "Media viewer", ...l }) {
|
|
32
|
+
return /* @__PURE__ */ i(c, { children: [/* @__PURE__ */ r(u, {}), /* @__PURE__ */ i(a.Popup, {
|
|
33
|
+
"data-slot": "lightbox-content",
|
|
34
|
+
"aria-label": s,
|
|
35
|
+
className: e("fixed left-[50%] top-[50%] z-[var(--z-modal)] flex max-h-[92svh] max-w-[92vw] translate-x-[-50%] translate-y-[-50%] flex-col items-center gap-3 pt-12 outline-none duration-base data-[open]:animate-in data-[ending-style]:animate-out data-[ending-style]:fade-out-0 data-[open]:fade-in-0 data-[ending-style]:zoom-out-95 data-[open]:zoom-in-95", "[&_img]:max-h-[78svh] [&_img]:max-w-[92vw] [&_img]:rounded-lg [&_img]:object-contain [&_img]:shadow-modal [&_video]:max-h-[78svh] [&_video]:max-w-[92vw] [&_video]:rounded-lg [&_video]:object-contain [&_video]:shadow-modal", n),
|
|
36
|
+
...l,
|
|
37
|
+
children: [o, /* @__PURE__ */ r(t, {
|
|
38
|
+
"data-slot": "lightbox-close",
|
|
39
|
+
size: "md",
|
|
40
|
+
className: "right-0 top-0 bg-white/15 text-white hover:bg-white/25 focus-visible:ring-white/60"
|
|
41
|
+
})]
|
|
42
|
+
})] });
|
|
43
|
+
}
|
|
44
|
+
function f({ className: t, ...n }) {
|
|
45
|
+
return /* @__PURE__ */ r("div", {
|
|
46
|
+
"data-slot": "lightbox-footer",
|
|
47
|
+
className: e("flex flex-wrap items-center justify-center gap-2 text-white", t),
|
|
48
|
+
...n
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
//#endregion
|
|
52
|
+
export { o as Lightbox, l as LightboxClose, d as LightboxContent, f as LightboxFooter, u as LightboxOverlay, c as LightboxPortal, s as LightboxTrigger };
|
|
53
|
+
|
|
54
|
+
//# sourceMappingURL=lightbox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"lightbox.js","names":[],"sources":["../../../src/components/overlays/lightbox.tsx"],"mappings":";;;;;;;AAuBA,IAAM,IAAW,EAAkB;AAEnC,SAAS,EAAgB,EACvB,aAAU,IACV,aACA,GAAG,KAC8E;CACjF,OACE,kBAAC,EAAkB,SAAnB;EACE,aAAU;EACV,GAAK,IAAU,EAAE,QAAQ,EAAM,SAAS,KAAK,CAAQ,EAAwB,IAAI,EAAE,YAAS;EAC5F,GAAI;CACL,CAAA;AAEL;AAEA,IAAM,IAAiB,EAAkB;AAEzC,SAAS,EAAc,EACrB,aAAU,IACV,aACA,GAAG,KAC4E;CAC/E,OACE,kBAAC,EAAkB,OAAnB;EACE,aAAU;EACV,GAAK,IAAU,EAAE,QAAQ,EAAM,SAAS,KAAK,CAAQ,EAAwB,IAAI,EAAE,YAAS;EAC5F,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAgB,EAAE,cAAW,GAAG,KAAkE;CACzG,OACE,kBAAC,EAAkB,UAAnB;EACE,aAAU;EAWV,WAAW,EACT,4JACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAYA,SAAS,EAAgB,EACvB,cACA,aACA,cAAc,IAAY,gBAC1B,GAAG,KACoB;CACvB,OACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,CAAkB,CAAA,GAUlB,kBAAC,EAAkB,OAAnB;EACE,aAAU;EACV,cAAY;EACZ,WAAW,EAIT,uVAUA,iOACA,CACF;EACA,GAAI;EApBN,UAAA,CAsBG,GAgBD,kBAAC,GAAD;GACE,aAAU;GACV,MAAK;GACL,WAAU;EACX,CAAA,CACsB;CACX,CAAA,CAAA,EAAA,CAAA;AAEpB;AAEA,SAAS,EAAe,EAAE,cAAW,GAAG,KAAsC;CAC5E,OACE,kBAAC,OAAD;EACE,aAAU;EAKV,WAAW,EAAG,+DAA+D,CAAS;EACtF,GAAI;CACL,CAAA;AAEL"}
|
package/dist/index.d.ts
CHANGED
|
@@ -10,6 +10,7 @@ export * from "./components/containment/accordion";
|
|
|
10
10
|
export * from "./components/containment/card";
|
|
11
11
|
export * from "./components/containment/collapsible";
|
|
12
12
|
export * from "./components/containment/json-tree";
|
|
13
|
+
export * from "./components/containment/media-frame";
|
|
13
14
|
export * from "./components/feedback/alert";
|
|
14
15
|
export * from "./components/feedback/badge";
|
|
15
16
|
export * from "./components/feedback/chip";
|
|
@@ -25,6 +26,7 @@ export * from "./components/layout/grid";
|
|
|
25
26
|
export * from "./components/overlays/alert-dialog";
|
|
26
27
|
export * from "./components/overlays/dialog";
|
|
27
28
|
export * from "./components/overlays/dropdown-menu";
|
|
29
|
+
export * from "./components/overlays/lightbox";
|
|
28
30
|
export * from "./components/overlays/popover";
|
|
29
31
|
export * from "./components/typography/code";
|
|
30
32
|
export * from "./components/typography/heading";
|