@particle-academy/react-fancy 5.53.0 → 5.54.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/CHANGELOG.md +82 -0
- package/README.md +3 -1
- package/dist/PdfViewer.types-BEk2Jq6p.d.ts +97 -0
- package/dist/PdfViewer.types-DyoUBa2g.d.cts +97 -0
- package/dist/accordion.cjs +3 -3
- package/dist/accordion.js +1 -1
- package/dist/autocomplete.cjs +2 -2
- package/dist/autocomplete.js +1 -1
- package/dist/chart.cjs +2 -2
- package/dist/chart.js +1 -1
- package/dist/{chunk-PRP5N7NY.js → chunk-35MF32VQ.js} +3 -3
- package/dist/{chunk-PRP5N7NY.js.map → chunk-35MF32VQ.js.map} +1 -1
- package/dist/{chunk-TJTC4WNY.cjs → chunk-4DGXL6JC.cjs} +3 -3
- package/dist/{chunk-TJTC4WNY.cjs.map → chunk-4DGXL6JC.cjs.map} +1 -1
- package/dist/{chunk-QAKIG43N.cjs → chunk-5IWKZ2WK.cjs} +3 -3
- package/dist/{chunk-QAKIG43N.cjs.map → chunk-5IWKZ2WK.cjs.map} +1 -1
- package/dist/chunk-7MDHCYEB.cjs +414 -0
- package/dist/chunk-7MDHCYEB.cjs.map +1 -0
- package/dist/{chunk-546K5LRX.cjs → chunk-CVDL6C2O.cjs} +3 -3
- package/dist/{chunk-546K5LRX.cjs.map → chunk-CVDL6C2O.cjs.map} +1 -1
- package/dist/{chunk-ZULMMW5W.js → chunk-EEFWVFKO.js} +3 -3
- package/dist/{chunk-ZULMMW5W.js.map → chunk-EEFWVFKO.js.map} +1 -1
- package/dist/{chunk-SONXLQPJ.cjs → chunk-EZA6GWZL.cjs} +7 -7
- package/dist/chunk-EZA6GWZL.cjs.map +1 -0
- package/dist/{chunk-45FDQ3R5.js → chunk-FRWOWDGX.js} +3 -3
- package/dist/{chunk-45FDQ3R5.js.map → chunk-FRWOWDGX.js.map} +1 -1
- package/dist/{chunk-36HG5JK6.cjs → chunk-GISORLGW.cjs} +3 -3
- package/dist/{chunk-36HG5JK6.cjs.map → chunk-GISORLGW.cjs.map} +1 -1
- package/dist/{chunk-BDUL42VO.cjs → chunk-GLGUQGAQ.cjs} +3 -3
- package/dist/{chunk-BDUL42VO.cjs.map → chunk-GLGUQGAQ.cjs.map} +1 -1
- package/dist/{chunk-A5DN2XNM.cjs → chunk-HTNQ5XUR.cjs} +3 -3
- package/dist/{chunk-A5DN2XNM.cjs.map → chunk-HTNQ5XUR.cjs.map} +1 -1
- package/dist/{chunk-ZKJLDBXA.cjs → chunk-ICI33QMY.cjs} +9 -9
- package/dist/{chunk-ZKJLDBXA.cjs.map → chunk-ICI33QMY.cjs.map} +1 -1
- package/dist/{chunk-JUQZMNPR.cjs → chunk-IEQK3LGI.cjs} +3 -3
- package/dist/{chunk-JUQZMNPR.cjs.map → chunk-IEQK3LGI.cjs.map} +1 -1
- package/dist/{chunk-MV6BK4WG.js → chunk-IUCYRQ4J.js} +6 -6
- package/dist/{chunk-MV6BK4WG.js.map → chunk-IUCYRQ4J.js.map} +1 -1
- package/dist/{chunk-N5XMBHX7.js → chunk-JXXUTPDH.js} +3 -3
- package/dist/{chunk-N5XMBHX7.js.map → chunk-JXXUTPDH.js.map} +1 -1
- package/dist/{chunk-WONP337S.cjs → chunk-JY7HPFOE.cjs} +6 -6
- package/dist/{chunk-WONP337S.cjs.map → chunk-JY7HPFOE.cjs.map} +1 -1
- package/dist/{chunk-4TVAHZ35.js → chunk-LZHGXRFD.js} +3 -3
- package/dist/{chunk-4TVAHZ35.js.map → chunk-LZHGXRFD.js.map} +1 -1
- package/dist/chunk-MORXQ5UM.js +412 -0
- package/dist/chunk-MORXQ5UM.js.map +1 -0
- package/dist/{chunk-D4QOV56U.js → chunk-MTTRPPHH.js} +3 -3
- package/dist/{chunk-D4QOV56U.js.map → chunk-MTTRPPHH.js.map} +1 -1
- package/dist/{chunk-Y7UE37QZ.js → chunk-NHGU2BWT.js} +3 -3
- package/dist/{chunk-Y7UE37QZ.js.map → chunk-NHGU2BWT.js.map} +1 -1
- package/dist/{chunk-VOHTL6WN.js → chunk-OC5OUZSD.js} +3 -3
- package/dist/{chunk-VOHTL6WN.js.map → chunk-OC5OUZSD.js.map} +1 -1
- package/dist/{chunk-3EWO5EBI.js → chunk-QGY5FPVM.js} +4 -4
- package/dist/{chunk-3EWO5EBI.js.map → chunk-QGY5FPVM.js.map} +1 -1
- package/dist/{chunk-E4TRDGSU.cjs → chunk-SLCR7A6W.cjs} +4 -4
- package/dist/{chunk-E4TRDGSU.cjs.map → chunk-SLCR7A6W.cjs.map} +1 -1
- package/dist/{chunk-OFNA5HS5.js → chunk-T45LBTXH.js} +3 -3
- package/dist/{chunk-OFNA5HS5.js.map → chunk-T45LBTXH.js.map} +1 -1
- package/dist/{chunk-XOYRJFMU.js → chunk-TKGMH5PA.js} +3 -3
- package/dist/{chunk-XOYRJFMU.js.map → chunk-TKGMH5PA.js.map} +1 -1
- package/dist/{chunk-A5RTALZJ.js → chunk-U4Y7ZXME.js} +7 -7
- package/dist/chunk-U4Y7ZXME.js.map +1 -0
- package/dist/{chunk-S3V2C4DW.cjs → chunk-UXYFM2XT.cjs} +4 -4
- package/dist/{chunk-S3V2C4DW.cjs.map → chunk-UXYFM2XT.cjs.map} +1 -1
- package/dist/{chunk-SW2MDI2E.cjs → chunk-VP7MT7LH.cjs} +5 -5
- package/dist/{chunk-SW2MDI2E.cjs.map → chunk-VP7MT7LH.cjs.map} +1 -1
- package/dist/{chunk-5DG4CAWS.js → chunk-YAPGHVBZ.js} +3 -3
- package/dist/{chunk-5DG4CAWS.js.map → chunk-YAPGHVBZ.js.map} +1 -1
- package/dist/{chunk-UVMIJCY3.js → chunk-YJHP5FVA.js} +7 -7
- package/dist/chunk-YJHP5FVA.js.map +1 -0
- package/dist/{chunk-3YA6FDVN.cjs → chunk-YJXP6AOL.cjs} +3 -3
- package/dist/{chunk-3YA6FDVN.cjs.map → chunk-YJXP6AOL.cjs.map} +1 -1
- package/dist/{chunk-QHN63FRP.cjs → chunk-YVTFODCJ.cjs} +3 -3
- package/dist/{chunk-QHN63FRP.cjs.map → chunk-YVTFODCJ.cjs.map} +1 -1
- package/dist/{chunk-3NIXNJ3I.js → chunk-ZASX5GO4.js} +3 -3
- package/dist/{chunk-3NIXNJ3I.js.map → chunk-ZASX5GO4.js.map} +1 -1
- package/dist/{chunk-LX23ZJDM.cjs → chunk-ZGDOWJKL.cjs} +7 -7
- package/dist/chunk-ZGDOWJKL.cjs.map +1 -0
- package/dist/content-renderer.cjs +4 -4
- package/dist/content-renderer.js +1 -1
- package/dist/editor.cjs +4 -4
- package/dist/editor.js +2 -2
- package/dist/{index-AesVUjQE.d.cts → index-Bd4br4sF.d.cts} +1 -1
- package/dist/{index-D3wJ8hrZ.d.ts → index-Bwrc9ktU.d.ts} +1 -1
- package/dist/index.cjs +71 -56
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +16 -2
- package/dist/index.d.ts +16 -2
- package/dist/index.js +32 -17
- package/dist/index.js.map +1 -1
- package/dist/inputs.cjs +4 -4
- package/dist/inputs.js +2 -2
- package/dist/json-editor.cjs +13 -13
- package/dist/json-editor.js +2 -2
- package/dist/kanban.cjs +3 -3
- package/dist/kanban.js +1 -1
- package/dist/media-viewer.cjs +3 -3
- package/dist/media-viewer.d.cts +2 -2
- package/dist/media-viewer.d.ts +2 -2
- package/dist/media-viewer.js +2 -2
- package/dist/menu.cjs +3 -3
- package/dist/menu.js +1 -1
- package/dist/mobile-menu.cjs +3 -3
- package/dist/mobile-menu.js +1 -1
- package/dist/multi-switch.cjs +2 -2
- package/dist/multi-switch.js +1 -1
- package/dist/navbar.cjs +3 -3
- package/dist/navbar.js +1 -1
- package/dist/pdf-viewer.cjs +2 -2
- package/dist/pdf-viewer.d.cts +13 -1
- package/dist/pdf-viewer.d.ts +13 -1
- package/dist/pdf-viewer.js +1 -1
- package/dist/select.cjs +2 -2
- package/dist/select.js +1 -1
- package/dist/sidebar.cjs +3 -3
- package/dist/sidebar.js +1 -1
- package/dist/table.cjs +11 -11
- package/dist/table.js +1 -1
- package/dist/timeline.cjs +4 -4
- package/dist/timeline.js +1 -1
- package/docs/PdfViewer.md +106 -4
- package/package.json +1 -1
- package/dist/PdfViewer.types-Bgn9EmZT.d.cts +0 -22
- package/dist/PdfViewer.types-xnPpdjJa.d.ts +0 -22
- package/dist/chunk-A5RTALZJ.js.map +0 -1
- package/dist/chunk-HRH5BIYG.js +0 -56
- package/dist/chunk-HRH5BIYG.js.map +0 -1
- package/dist/chunk-LX23ZJDM.cjs.map +0 -1
- package/dist/chunk-SONXLQPJ.cjs.map +0 -1
- package/dist/chunk-UVMIJCY3.js.map +0 -1
- package/dist/chunk-XM3W5ETT.cjs +0 -58
- package/dist/chunk-XM3W5ETT.cjs.map +0 -1
package/dist/select.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
require('./chunk-HXLSEBAL.cjs');
|
|
4
|
-
var
|
|
4
|
+
var chunkGLGUQGAQ_cjs = require('./chunk-GLGUQGAQ.cjs');
|
|
5
5
|
require('./chunk-MRZXTL46.cjs');
|
|
6
6
|
require('./chunk-P53432AK.cjs');
|
|
7
7
|
require('./chunk-QF7CD4JH.cjs');
|
|
@@ -18,7 +18,7 @@ require('./chunk-ZU5Q77OT.cjs');
|
|
|
18
18
|
|
|
19
19
|
Object.defineProperty(exports, "Select", {
|
|
20
20
|
enumerable: true,
|
|
21
|
-
get: function () { return
|
|
21
|
+
get: function () { return chunkGLGUQGAQ_cjs.Select; }
|
|
22
22
|
});
|
|
23
23
|
//# sourceMappingURL=select.cjs.map
|
|
24
24
|
//# sourceMappingURL=select.cjs.map
|
package/dist/select.js
CHANGED
package/dist/sidebar.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkEZA6GWZL_cjs = require('./chunk-EZA6GWZL.cjs');
|
|
4
4
|
require('./chunk-A2JUTNE6.cjs');
|
|
5
5
|
require('./chunk-T6YELZPJ.cjs');
|
|
6
6
|
require('./chunk-TXTRTTG7.cjs');
|
|
@@ -15,11 +15,11 @@ require('./chunk-ZU5Q77OT.cjs');
|
|
|
15
15
|
|
|
16
16
|
Object.defineProperty(exports, "Sidebar", {
|
|
17
17
|
enumerable: true,
|
|
18
|
-
get: function () { return
|
|
18
|
+
get: function () { return chunkEZA6GWZL_cjs.Sidebar; }
|
|
19
19
|
});
|
|
20
20
|
Object.defineProperty(exports, "useSidebar", {
|
|
21
21
|
enumerable: true,
|
|
22
|
-
get: function () { return
|
|
22
|
+
get: function () { return chunkEZA6GWZL_cjs.useSidebar; }
|
|
23
23
|
});
|
|
24
24
|
//# sourceMappingURL=sidebar.cjs.map
|
|
25
25
|
//# sourceMappingURL=sidebar.cjs.map
|
package/dist/sidebar.js
CHANGED
package/dist/table.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkYJXP6AOL_cjs = require('./chunk-YJXP6AOL.cjs');
|
|
4
4
|
require('./chunk-SNHU2AI4.cjs');
|
|
5
5
|
require('./chunk-ZU5Q77OT.cjs');
|
|
6
6
|
|
|
@@ -8,43 +8,43 @@ require('./chunk-ZU5Q77OT.cjs');
|
|
|
8
8
|
|
|
9
9
|
Object.defineProperty(exports, "Table", {
|
|
10
10
|
enumerable: true,
|
|
11
|
-
get: function () { return
|
|
11
|
+
get: function () { return chunkYJXP6AOL_cjs.Table; }
|
|
12
12
|
});
|
|
13
13
|
Object.defineProperty(exports, "TableBody", {
|
|
14
14
|
enumerable: true,
|
|
15
|
-
get: function () { return
|
|
15
|
+
get: function () { return chunkYJXP6AOL_cjs.TableBody; }
|
|
16
16
|
});
|
|
17
17
|
Object.defineProperty(exports, "TableCell", {
|
|
18
18
|
enumerable: true,
|
|
19
|
-
get: function () { return
|
|
19
|
+
get: function () { return chunkYJXP6AOL_cjs.TableCell; }
|
|
20
20
|
});
|
|
21
21
|
Object.defineProperty(exports, "TableColumn", {
|
|
22
22
|
enumerable: true,
|
|
23
|
-
get: function () { return
|
|
23
|
+
get: function () { return chunkYJXP6AOL_cjs.TableColumn; }
|
|
24
24
|
});
|
|
25
25
|
Object.defineProperty(exports, "TableHead", {
|
|
26
26
|
enumerable: true,
|
|
27
|
-
get: function () { return
|
|
27
|
+
get: function () { return chunkYJXP6AOL_cjs.TableHead; }
|
|
28
28
|
});
|
|
29
29
|
Object.defineProperty(exports, "TablePagination", {
|
|
30
30
|
enumerable: true,
|
|
31
|
-
get: function () { return
|
|
31
|
+
get: function () { return chunkYJXP6AOL_cjs.TablePagination; }
|
|
32
32
|
});
|
|
33
33
|
Object.defineProperty(exports, "TableRow", {
|
|
34
34
|
enumerable: true,
|
|
35
|
-
get: function () { return
|
|
35
|
+
get: function () { return chunkYJXP6AOL_cjs.TableRow; }
|
|
36
36
|
});
|
|
37
37
|
Object.defineProperty(exports, "TableRowTray", {
|
|
38
38
|
enumerable: true,
|
|
39
|
-
get: function () { return
|
|
39
|
+
get: function () { return chunkYJXP6AOL_cjs.TableRowTray; }
|
|
40
40
|
});
|
|
41
41
|
Object.defineProperty(exports, "TableSearch", {
|
|
42
42
|
enumerable: true,
|
|
43
|
-
get: function () { return
|
|
43
|
+
get: function () { return chunkYJXP6AOL_cjs.TableSearch; }
|
|
44
44
|
});
|
|
45
45
|
Object.defineProperty(exports, "TableTray", {
|
|
46
46
|
enumerable: true,
|
|
47
|
-
get: function () { return
|
|
47
|
+
get: function () { return chunkYJXP6AOL_cjs.TableTray; }
|
|
48
48
|
});
|
|
49
49
|
//# sourceMappingURL=table.cjs.map
|
|
50
50
|
//# sourceMappingURL=table.cjs.map
|
package/dist/table.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { Table, TableBody, TableCell, TableColumn, TableHead, TablePagination, TableRow, TableRowTray, TableSearch, TableTray } from './chunk-
|
|
1
|
+
export { Table, TableBody, TableCell, TableColumn, TableHead, TablePagination, TableRow, TableRowTray, TableSearch, TableTray } from './chunk-YAPGHVBZ.js';
|
|
2
2
|
import './chunk-EDYAXGUM.js';
|
|
3
3
|
import './chunk-MMW2JGKZ.js';
|
|
4
4
|
//# sourceMappingURL=table.js.map
|
package/dist/timeline.cjs
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkUXYFM2XT_cjs = require('./chunk-UXYFM2XT.cjs');
|
|
4
4
|
require('./chunk-ZU5Q77OT.cjs');
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
Object.defineProperty(exports, "Timeline", {
|
|
9
9
|
enumerable: true,
|
|
10
|
-
get: function () { return
|
|
10
|
+
get: function () { return chunkUXYFM2XT_cjs.Timeline; }
|
|
11
11
|
});
|
|
12
12
|
Object.defineProperty(exports, "TimelineBlock", {
|
|
13
13
|
enumerable: true,
|
|
14
|
-
get: function () { return
|
|
14
|
+
get: function () { return chunkUXYFM2XT_cjs.TimelineBlock; }
|
|
15
15
|
});
|
|
16
16
|
Object.defineProperty(exports, "TimelineItem", {
|
|
17
17
|
enumerable: true,
|
|
18
|
-
get: function () { return
|
|
18
|
+
get: function () { return chunkUXYFM2XT_cjs.TimelineItem; }
|
|
19
19
|
});
|
|
20
20
|
//# sourceMappingURL=timeline.cjs.map
|
|
21
21
|
//# sourceMappingURL=timeline.cjs.map
|
package/dist/timeline.js
CHANGED
package/docs/PdfViewer.md
CHANGED
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
# PdfViewer
|
|
2
2
|
|
|
3
|
-
A standalone PDF viewer
|
|
4
|
-
|
|
3
|
+
A standalone PDF viewer with two modes:
|
|
4
|
+
|
|
5
|
+
- **`src`**: embeds the document via the browser's native PDF plugin
|
|
6
|
+
(`<object>`), falling back to an `<iframe>`, then to a download link.
|
|
7
|
+
- **`pages`** (page-image mode): shows page images your app rendered from the
|
|
8
|
+
PDF, behind its own auth, under an access `policy`, with an optional
|
|
9
|
+
`watermark`. The viewer never fetches or references the PDF.
|
|
10
|
+
|
|
5
11
|
Renders for PDF sources inside `MediaViewer`.
|
|
6
12
|
|
|
7
13
|
## Import
|
|
@@ -19,11 +25,107 @@ import { PdfViewer } from "@particle-academy/react-fancy";
|
|
|
19
25
|
The viewer fills its container, so give it a height. A `min-h` floor (`20rem`)
|
|
20
26
|
is built in so it stays usable even without an explicit height.
|
|
21
27
|
|
|
28
|
+
The native plugin always shows its own download and print buttons and exposes
|
|
29
|
+
the file's URL, and a page cannot restrict it. If a viewer must not get the
|
|
30
|
+
file, use page-image mode.
|
|
31
|
+
|
|
32
|
+
## Page-image mode
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
<PdfViewer
|
|
36
|
+
frame
|
|
37
|
+
title="contract-7.pdf"
|
|
38
|
+
pages={{ count: 12, url: (page, scale) => `/documents/7/pages/${page}.png?scale=${scale}` }}
|
|
39
|
+
policy={{ download: false, print: false, copy: false, screenshot: "deter" }}
|
|
40
|
+
watermark={{ text: "Jane Doe · jane@example.com · 2026-10-21 14:02" }}
|
|
41
|
+
style={{ height: 640 }}
|
|
42
|
+
/>
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
Your app turns the PDF into one image per page on its server, with whatever
|
|
46
|
+
tool it already uses, and serves them behind its own auth. react-fancy only
|
|
47
|
+
displays them. The `pages.url` images are the only requests the viewer makes;
|
|
48
|
+
`src` is ignored in this mode, even if you pass one.
|
|
49
|
+
|
|
50
|
+
- **`url(page, scale)`**: `page` is 1-based. `scale` is a resolution hint: the
|
|
51
|
+
zoom times the device pixel ratio, rounded **up** to one of `1`, `1.5`, `2`,
|
|
52
|
+
`3` or `4`, so a page is fetched at a handful of sizes rather than once per
|
|
53
|
+
zoom click. Render scale 1 at a width that reads sharply at fit-width in your
|
|
54
|
+
layout (e.g. 1000-1200 px).
|
|
55
|
+
- **`aspectRatio`** (optional, width / height) sizes a page before its image
|
|
56
|
+
arrives. Default A4 portrait. Each page switches to its image's real ratio
|
|
57
|
+
once it has loaded.
|
|
58
|
+
- **Lazy**: only pages near the viewport get an `<img>` (a viewport's height
|
|
59
|
+
above and below).
|
|
60
|
+
- **Toolbar**: previous / next page with "n / total", zoom out / zoom
|
|
61
|
+
percentage (click to reset) / zoom in, **Width** (fit width, which is 100%)
|
|
62
|
+
and **Page** (fit one page to the height). With `frame`, the `FauxClient`
|
|
63
|
+
frame adds full screen; the current page stays in place when the viewer
|
|
64
|
+
resizes.
|
|
65
|
+
- **No search.** Page images carry no text, so there is nothing to search.
|
|
66
|
+
This is a consequence of not sending the PDF.
|
|
67
|
+
- **Controlled state** for agents and hosts: `page` / `onPageChange` and
|
|
68
|
+
`zoom` / `onZoomChange`. Stable handles:
|
|
69
|
+
`[data-react-fancy-pdf-viewer-page][data-page="3"]`, and
|
|
70
|
+
`data-react-fancy-pdf-viewer-{prev,next,zoom-in,zoom-out,zoom-reset,fit-width,fit-page}`
|
|
71
|
+
on the buttons.
|
|
72
|
+
|
|
73
|
+
### Policy: what each flag does and does not do
|
|
74
|
+
|
|
75
|
+
Every flag defaults to allowed. **These are deterrents.** A web page cannot stop
|
|
76
|
+
someone who is determined: anything drawn on a screen can be photographed,
|
|
77
|
+
screenshotted or pulled out of devtools. The real protection is that in this
|
|
78
|
+
mode the app never serves the PDF, and page images are all a viewer ever gets.
|
|
79
|
+
|
|
80
|
+
| Flag | Does | Does not |
|
|
81
|
+
|------|------|----------|
|
|
82
|
+
| `download: false` | Suppresses the context menu ("Save image as…") on the pages, and makes the images non-draggable. There is no download control in this mode at all, whatever the flag. | Stop the page images being captured: they are ordinary images the browser has fetched, visible in devtools and the browser's cache. |
|
|
83
|
+
| `print: false` | Print CSS blanks the viewer, so printing (Ctrl/Cmd+P, the browser menu, `window.print()`) produces an empty frame. Ctrl/Cmd+P is also intercepted while focus is inside the viewer. | Stop a screenshot, a "save page", or a user who edits the CSS in devtools. |
|
|
84
|
+
| `copy: false` | Turns user selection off. (There is no text layer to copy anyway.) | Anything else; the images can still be captured. |
|
|
85
|
+
| `screenshot: "deter"` | Blurs the pages while the tab is hidden or the window has lost focus. On a PrintScreen key it blurs them for 1.5 s and tries to clear the clipboard, best effort. | **Prevent screenshots. A web page cannot.** OS tools, other apps and phone cameras are all out of its reach, and PrintScreen usually captures before the page hears the key. |
|
|
86
|
+
|
|
87
|
+
### Watermark
|
|
88
|
+
|
|
89
|
+
```tsx
|
|
90
|
+
watermark={{ text: "jane@example.com", opacity: 0.15, angle: -30, density: 1 }}
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
A tiled text overlay drawn over every page in the browser, with
|
|
94
|
+
`pointer-events: none`. Defaults: `opacity` 0.15, `angle` -30°, `density` 1
|
|
95
|
+
(2 halves the gap between repeats).
|
|
96
|
+
|
|
97
|
+
**A client-side watermark can be removed with devtools.** If yours must hold,
|
|
98
|
+
burn it into the page images on your server: the `url(page, scale)` callback is
|
|
99
|
+
the place to ask for that (e.g. a per-viewer URL your server stamps).
|
|
100
|
+
|
|
22
101
|
## Props
|
|
23
102
|
|
|
24
103
|
| Prop | Type | Default | Description |
|
|
25
104
|
|------|------|---------|-------------|
|
|
26
|
-
| src | `string` | — | PDF source (`http(s):` / `data:` / `blob:`) |
|
|
27
|
-
|
|
|
105
|
+
| src | `string` | — | PDF source (`http(s):` / `data:` / `blob:`) for the native plugin. Ignored with `pages` |
|
|
106
|
+
| pages | `{ count: number; url: (page, scale) => string; aspectRatio?: number }` | — | Page-image mode |
|
|
107
|
+
| page | `number` | — | Current page (1-based), controlled |
|
|
108
|
+
| defaultPage | `number` | `1` | Starting page, uncontrolled |
|
|
109
|
+
| onPageChange | `(page: number) => void` | — | Page changed (toolbar or scrolling) |
|
|
110
|
+
| zoom | `number` | — | Zoom, 1 = fit width, controlled (page-image mode) |
|
|
111
|
+
| defaultZoom | `number` | `1` | Starting zoom, uncontrolled |
|
|
112
|
+
| onZoomChange | `(zoom: number) => void` | — | Zoom changed |
|
|
113
|
+
| policy | `{ download?: boolean; print?: boolean; copy?: boolean; screenshot?: "allow" \| "deter" }` | all allowed | See above (page-image mode only) |
|
|
114
|
+
| watermark | `{ text: string; opacity?: number; angle?: number; density?: number }` | — | See above (page-image mode only) |
|
|
115
|
+
| frame | `boolean` | `false` | Show inside the `FauxClient` frame, with full screen |
|
|
116
|
+
| frameProps | `Partial<FauxClientProps>` | — | Passed to the frame |
|
|
117
|
+
| title | `string` | `"PDF document"` | Accessible title, and the frame's address-bar text |
|
|
28
118
|
| className | `string` | — | Classes for the container |
|
|
29
119
|
| style | `CSSProperties` | — | Styles for the container (e.g. a height) |
|
|
120
|
+
|
|
121
|
+
## Through MediaViewer and FileViewer
|
|
122
|
+
|
|
123
|
+
Both already forward `pdfProps` untouched, so page-image mode needs no new
|
|
124
|
+
props on either:
|
|
125
|
+
|
|
126
|
+
```tsx
|
|
127
|
+
<MediaViewer kind="pdf" src="" pdfProps={{ pages, policy, watermark }} />
|
|
128
|
+
|
|
129
|
+
// @particle-academy/fancy-code
|
|
130
|
+
<FileViewer filename="contract.pdf" mediaProps={{ pdfProps: { pages, policy, watermark } }} />
|
|
131
|
+
```
|
package/package.json
CHANGED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { F as FauxClientProps } from './FauxClient.types-Dtk9aRs6.cjs';
|
|
2
|
-
import { CSSProperties } from 'react';
|
|
3
|
-
|
|
4
|
-
interface PdfViewerProps {
|
|
5
|
-
/**
|
|
6
|
-
* Show the PDF in react-fancy's `FauxClient` frame with a full-screen button,
|
|
7
|
-
* revealed on hover. Zoom stays on the browser's own PDF toolbar. Default `false`.
|
|
8
|
-
*/
|
|
9
|
-
frame?: boolean;
|
|
10
|
-
/** Passed to the frame (`variant`, `onFullscreenChange`, …). */
|
|
11
|
-
frameProps?: Partial<FauxClientProps>;
|
|
12
|
-
/** PDF source — an `http(s):`, `data:`, or `blob:` URL. */
|
|
13
|
-
src: string;
|
|
14
|
-
/** Accessible title for the embedded document (default `"PDF document"`). */
|
|
15
|
-
title?: string;
|
|
16
|
-
/** Additional CSS classes for the container. */
|
|
17
|
-
className?: string;
|
|
18
|
-
/** Inline styles for the container (e.g. a fixed height). */
|
|
19
|
-
style?: CSSProperties;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
export type { PdfViewerProps as P };
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { F as FauxClientProps } from './FauxClient.types-Dtk9aRs6.js';
|
|
2
|
-
import { CSSProperties } from 'react';
|
|
3
|
-
|
|
4
|
-
interface PdfViewerProps {
|
|
5
|
-
/**
|
|
6
|
-
* Show the PDF in react-fancy's `FauxClient` frame with a full-screen button,
|
|
7
|
-
* revealed on hover. Zoom stays on the browser's own PDF toolbar. Default `false`.
|
|
8
|
-
*/
|
|
9
|
-
frame?: boolean;
|
|
10
|
-
/** Passed to the frame (`variant`, `onFullscreenChange`, …). */
|
|
11
|
-
frameProps?: Partial<FauxClientProps>;
|
|
12
|
-
/** PDF source — an `http(s):`, `data:`, or `blob:` URL. */
|
|
13
|
-
src: string;
|
|
14
|
-
/** Accessible title for the embedded document (default `"PDF document"`). */
|
|
15
|
-
title?: string;
|
|
16
|
-
/** Additional CSS classes for the container. */
|
|
17
|
-
className?: string;
|
|
18
|
-
/** Inline styles for the container (e.g. a fixed height). */
|
|
19
|
-
style?: CSSProperties;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
export type { PdfViewerProps as P };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Menu/Menu.context.ts","../src/components/Menu/MenuItem.tsx","../src/components/Menu/MenuSubmenu.tsx","../src/components/Menu/MenuGroup.tsx","../src/components/Menu/Menu.tsx"],"names":["jsxs","jsx"],"mappings":"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","file":"chunk-A5RTALZJ.js","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { MenuContextValue } from \"./Menu.types\";\n\nexport const MenuContext = createContext<MenuContextValue | null>(null);\n\nexport function useMenu(): MenuContextValue {\n const ctx = useContext(MenuContext);\n if (!ctx) {\n throw new Error(\"useMenu must be used within a <Menu> component\");\n }\n return ctx;\n}\n","import type { ElementType } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useMenu } from \"./Menu.context\";\nimport type { MenuItemProps } from \"./Menu.types\";\n\nexport function MenuItem({\n children,\n href,\n as: As,\n icon,\n active = false,\n disabled = false,\n badge,\n onClick,\n className,\n ...rest\n}: MenuItemProps) {\n const { orientation } = useMenu();\n const isVertical = orientation === \"vertical\";\n\n // See NavigableProps: link mode engages on `href` OR `as`, and `onClick`\n // survives into it rather than being dropped.\n const isLink = Boolean(href || As);\n const Tag = isLink ? ((As ?? \"a\") as ElementType) : \"button\";\n const tagProps = isLink\n ? { ...(href ? { href } : {}), onClick }\n : { type: \"button\" as const, onClick };\n\n return (\n <Tag\n {...tagProps}\n {...rest}\n data-react-fancy-menu-item=\"\"\n data-active={active || undefined}\n aria-current={active ? \"page\" : undefined}\n aria-disabled={disabled || undefined}\n className={cn(\n \"flex items-center gap-2 rounded-md text-sm font-medium transition-colors\",\n \"outline-none focus-visible:ring-2 focus-visible:ring-blue-500\",\n isVertical ? \"w-full px-3 py-2\" : \"px-3 py-2\",\n active\n ? \"bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] text-[color:var(--fancy-text,var(--color-zinc-900))] dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))] dark:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]\"\n : \"text-zinc-600 hover:bg-zinc-50 hover:text-[color:var(--fancy-text,var(--color-zinc-900))] dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]\",\n disabled && \"pointer-events-none opacity-50\",\n className,\n )}\n >\n {icon && <span className=\"flex h-5 w-5 shrink-0 items-center justify-center\">{icon}</span>}\n <span className=\"flex-1 truncate text-left\">{children}</span>\n {badge && <span className=\"shrink-0\">{badge}</span>}\n </Tag>\n );\n}\n\nMenuItem.displayName = \"MenuItem\";\n","import { useState } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useMenu } from \"./Menu.context\";\nimport type { MenuSubmenuProps } from \"./Menu.types\";\n\nexport function MenuSubmenu({\n children,\n label,\n icon,\n defaultOpen = false,\n className,\n}: MenuSubmenuProps) {\n const [open, setOpen] = useState(defaultOpen);\n const { orientation } = useMenu();\n const isVertical = orientation === \"vertical\";\n\n if (!isVertical) {\n // Horizontal submenus use a hover-based dropdown\n return (\n <div\n data-react-fancy-menu-submenu=\"\"\n className={cn(\"group relative\", className)}\n >\n <button\n type=\"button\"\n className={cn(\n \"flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors\",\n \"text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900\",\n \"dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-100\",\n )}\n >\n {icon && <span className=\"flex h-5 w-5 shrink-0 items-center justify-center\">{icon}</span>}\n <span>{label}</span>\n <ChevronDown className=\"h-3.5 w-3.5 opacity-60\" />\n </button>\n <div\n className={cn(\n \"invisible absolute left-0 top-full z-50 min-w-[180px] pt-1 opacity-0 transition-all\",\n \"group-hover:visible group-hover:opacity-100\",\n )}\n >\n <div className=\"rounded-lg border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] py-1 shadow-lg dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\">\n {children}\n </div>\n </div>\n </div>\n );\n }\n\n // Vertical submenus use accordion-style expand/collapse\n return (\n <div data-react-fancy-menu-submenu=\"\" className={className}>\n <button\n type=\"button\"\n onClick={() => setOpen((v) => !v)}\n className={cn(\n \"flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors\",\n \"text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900\",\n \"dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-100\",\n )}\n >\n {icon && <span className=\"flex h-5 w-5 shrink-0 items-center justify-center\">{icon}</span>}\n <span className=\"flex-1 text-left\">{label}</span>\n <ChevronDown\n className={cn(\n \"h-3.5 w-3.5 opacity-60 transition-transform duration-200\",\n open && \"rotate-180\",\n )}\n />\n </button>\n <div\n className={cn(\n \"grid transition-[grid-template-rows] duration-200\",\n open ? \"grid-rows-[1fr]\" : \"grid-rows-[0fr]\",\n )}\n >\n <div className=\"overflow-hidden\">\n <div className=\"ml-4 border-l border-[color:var(--fancy-border,var(--color-zinc-200))] pl-2 pt-1 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]\">\n {children}\n </div>\n </div>\n </div>\n </div>\n );\n}\n\nMenuSubmenu.displayName = \"MenuSubmenu\";\n","import { cn } from \"../../utils/cn\";\nimport type { MenuGroupProps } from \"./Menu.types\";\n\nexport function MenuGroup({ children, label, className }: MenuGroupProps) {\n return (\n <div data-react-fancy-menu-group=\"\" className={cn(\"py-1\", className)}>\n {label && (\n <p className=\"mb-1 px-3 text-xs font-semibold uppercase tracking-wider text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]\">\n {label}\n </p>\n )}\n {children}\n </div>\n );\n}\n\nMenuGroup.displayName = \"MenuGroup\";\n","import { cn } from \"../../utils/cn\";\nimport { MenuContext } from \"./Menu.context\";\nimport { MenuItem } from \"./MenuItem\";\nimport { MenuSubmenu } from \"./MenuSubmenu\";\nimport { MenuGroup } from \"./MenuGroup\";\nimport type { MenuProps } from \"./Menu.types\";\n\nfunction MenuRoot({ children, orientation = \"vertical\", className }: MenuProps) {\n const isVertical = orientation === \"vertical\";\n\n return (\n <MenuContext.Provider value={{ orientation }}>\n <nav\n data-react-fancy-menu=\"\"\n data-orientation={orientation}\n className={cn(\n \"flex gap-0.5\",\n isVertical ? \"flex-col\" : \"flex-row items-center\",\n className,\n )}\n >\n {children}\n </nav>\n </MenuContext.Provider>\n );\n}\n\nexport const Menu = Object.assign(MenuRoot, {\n Item: MenuItem,\n Submenu: MenuSubmenu,\n Group: MenuGroup,\n});\n"]}
|
package/dist/chunk-HRH5BIYG.js
DELETED
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
import { FauxClient } from './chunk-GVMWJ4NI.js';
|
|
2
|
-
import { cn } from './chunk-MMW2JGKZ.js';
|
|
3
|
-
import { forwardRef } from 'react';
|
|
4
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
5
|
-
|
|
6
|
-
var PdfViewer = forwardRef(
|
|
7
|
-
({ src, title = "PDF document", className, style, frame = false, frameProps }, ref) => {
|
|
8
|
-
const viewer = /* @__PURE__ */ jsx(
|
|
9
|
-
"div",
|
|
10
|
-
{
|
|
11
|
-
ref,
|
|
12
|
-
"data-react-fancy-pdf-viewer": "",
|
|
13
|
-
className: cn(
|
|
14
|
-
"relative h-full min-h-[20rem] w-full overflow-hidden rounded-md bg-zinc-100 dark:bg-zinc-900",
|
|
15
|
-
className
|
|
16
|
-
),
|
|
17
|
-
style,
|
|
18
|
-
children: /* @__PURE__ */ jsxs("object", { data: src, type: "application/pdf", className: "h-full w-full", children: [
|
|
19
|
-
/* @__PURE__ */ jsx(
|
|
20
|
-
"iframe",
|
|
21
|
-
{
|
|
22
|
-
src,
|
|
23
|
-
title,
|
|
24
|
-
className: "h-full w-full border-0"
|
|
25
|
-
}
|
|
26
|
-
),
|
|
27
|
-
/* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-2 p-4 text-center text-sm text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]", children: [
|
|
28
|
-
/* @__PURE__ */ jsx("span", { children: "This browser can't display the PDF inline." }),
|
|
29
|
-
/* @__PURE__ */ jsx(
|
|
30
|
-
"a",
|
|
31
|
-
{
|
|
32
|
-
href: src,
|
|
33
|
-
download: true,
|
|
34
|
-
className: "font-medium text-blue-600 hover:underline dark:text-blue-400",
|
|
35
|
-
children: "Download PDF"
|
|
36
|
-
}
|
|
37
|
-
)
|
|
38
|
-
] })
|
|
39
|
-
] })
|
|
40
|
-
}
|
|
41
|
-
);
|
|
42
|
-
if (!frame) return viewer;
|
|
43
|
-
return (
|
|
44
|
-
// The browser variant, because the plugin swallows the pointer: hover over
|
|
45
|
-
// the PDF never reaches the frame, so controls over it could not be
|
|
46
|
-
// revealed, and its top-right corner is the PDF toolbar's. In the address
|
|
47
|
-
// bar they are reachable and collide with nothing.
|
|
48
|
-
/* @__PURE__ */ jsx(FauxClient, { variant: "browser", url: title, controls: { zoom: false }, fill: true, ...frameProps, children: viewer })
|
|
49
|
-
);
|
|
50
|
-
}
|
|
51
|
-
);
|
|
52
|
-
PdfViewer.displayName = "PdfViewer";
|
|
53
|
-
|
|
54
|
-
export { PdfViewer };
|
|
55
|
-
//# sourceMappingURL=chunk-HRH5BIYG.js.map
|
|
56
|
-
//# sourceMappingURL=chunk-HRH5BIYG.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/PdfViewer/PdfViewer.tsx"],"names":[],"mappings":";;;;;AAeO,IAAM,SAAA,GAAY,UAAA;AAAA,EACvB,CAAC,EAAE,GAAA,EAAK,KAAA,GAAQ,cAAA,EAAgB,SAAA,EAAW,KAAA,EAAO,KAAA,GAAQ,KAAA,EAAO,UAAA,EAAW,EAAG,GAAA,KAAQ;AACrF,IAAA,MAAM,MAAA,mBACJ,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,6BAAA,EAA4B,EAAA;AAAA,QAC5B,SAAA,EAAW,EAAA;AAAA,UACT,8FAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAA;AAAA,QAEA,+BAAC,QAAA,EAAA,EAAO,IAAA,EAAM,KAAK,IAAA,EAAK,iBAAA,EAAkB,WAAU,eAAA,EAClD,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,GAAA;AAAA,cACA,KAAA;AAAA,cACA,SAAA,EAAU;AAAA;AAAA,WACZ;AAAA,0BACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gNAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,UAAK,QAAA,EAAA,4CAAA,EAA+C,CAAA;AAAA,4BACrD,GAAA;AAAA,cAAC,GAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAM,GAAA;AAAA,gBACN,QAAA,EAAQ,IAAA;AAAA,gBACR,SAAA,EAAU,8DAAA;AAAA,gBACX,QAAA,EAAA;AAAA;AAAA;AAED,WAAA,EACF;AAAA,SAAA,EACF;AAAA;AAAA,KACF;AAGF,IAAA,IAAI,CAAC,OAAO,OAAO,MAAA;AAMnB,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKE,GAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAQ,SAAA,EAAU,KAAK,KAAA,EAAO,QAAA,EAAU,EAAE,IAAA,EAAM,OAAM,EAAG,IAAA,EAAI,IAAA,EAAE,GAAG,YAC3E,QAAA,EAAA,MAAA,EACH;AAAA;AAAA,EAEJ;AACF;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA","file":"chunk-HRH5BIYG.js","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { FauxClient } from \"../FauxClient\";\nimport type { PdfViewerProps } from \"./PdfViewer.types\";\n\n/**\n * A standalone PDF viewer — embeds the document via the browser's native PDF\n * plugin (`<object>`), falling back to an `<iframe>`, then to a download link.\n * Fills its container, so give it a height (a `min-h` floor is built in).\n * Renders for PDF sources inside `<MediaViewer>`.\n *\n * ```tsx\n * <PdfViewer src=\"/report.pdf\" title=\"report.pdf\" style={{ height: 600 }} />\n * ```\n */\nexport const PdfViewer = forwardRef<HTMLDivElement, PdfViewerProps>(\n ({ src, title = \"PDF document\", className, style, frame = false, frameProps }, ref) => {\n const viewer = (\n <div\n ref={ref}\n data-react-fancy-pdf-viewer=\"\"\n className={cn(\n \"relative h-full min-h-[20rem] w-full overflow-hidden rounded-md bg-zinc-100 dark:bg-zinc-900\",\n className,\n )}\n style={style}\n >\n <object data={src} type=\"application/pdf\" className=\"h-full w-full\">\n <iframe\n src={src}\n title={title}\n className=\"h-full w-full border-0\"\n />\n <div className=\"flex h-full flex-col items-center justify-center gap-2 p-4 text-center text-sm text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\">\n <span>This browser can't display the PDF inline.</span>\n <a\n href={src}\n download\n className=\"font-medium text-blue-600 hover:underline dark:text-blue-400\"\n >\n Download PDF\n </a>\n </div>\n </object>\n </div>\n );\n\n if (!frame) return viewer;\n\n // Full screen from the frame; zoom stays on the browser's PDF toolbar. A\n // plugin fits the page to its box, so scaling the box only re-fits it, and\n // the `#zoom=` open parameter is relative to the page's real size, which a\n // frame cannot know -- its bar would jump by uneven steps.\n return (\n // The browser variant, because the plugin swallows the pointer: hover over\n // the PDF never reaches the frame, so controls over it could not be\n // revealed, and its top-right corner is the PDF toolbar's. In the address\n // bar they are reachable and collide with nothing.\n <FauxClient variant=\"browser\" url={title} controls={{ zoom: false }} fill {...frameProps}>\n {viewer}\n </FauxClient>\n );\n },\n);\n\nPdfViewer.displayName = \"PdfViewer\";\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Menu/Menu.context.ts","../src/components/Menu/MenuItem.tsx","../src/components/Menu/MenuSubmenu.tsx","../src/components/Menu/MenuGroup.tsx","../src/components/Menu/Menu.tsx"],"names":["createContext","useContext","jsxs","cn","jsx","useState","ChevronDown"],"mappings":"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","file":"chunk-LX23ZJDM.cjs","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { MenuContextValue } from \"./Menu.types\";\n\nexport const MenuContext = createContext<MenuContextValue | null>(null);\n\nexport function useMenu(): MenuContextValue {\n const ctx = useContext(MenuContext);\n if (!ctx) {\n throw new Error(\"useMenu must be used within a <Menu> component\");\n }\n return ctx;\n}\n","import type { ElementType } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useMenu } from \"./Menu.context\";\nimport type { MenuItemProps } from \"./Menu.types\";\n\nexport function MenuItem({\n children,\n href,\n as: As,\n icon,\n active = false,\n disabled = false,\n badge,\n onClick,\n className,\n ...rest\n}: MenuItemProps) {\n const { orientation } = useMenu();\n const isVertical = orientation === \"vertical\";\n\n // See NavigableProps: link mode engages on `href` OR `as`, and `onClick`\n // survives into it rather than being dropped.\n const isLink = Boolean(href || As);\n const Tag = isLink ? ((As ?? \"a\") as ElementType) : \"button\";\n const tagProps = isLink\n ? { ...(href ? { href } : {}), onClick }\n : { type: \"button\" as const, onClick };\n\n return (\n <Tag\n {...tagProps}\n {...rest}\n data-react-fancy-menu-item=\"\"\n data-active={active || undefined}\n aria-current={active ? \"page\" : undefined}\n aria-disabled={disabled || undefined}\n className={cn(\n \"flex items-center gap-2 rounded-md text-sm font-medium transition-colors\",\n \"outline-none focus-visible:ring-2 focus-visible:ring-blue-500\",\n isVertical ? \"w-full px-3 py-2\" : \"px-3 py-2\",\n active\n ? \"bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] text-[color:var(--fancy-text,var(--color-zinc-900))] dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))] dark:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]\"\n : \"text-zinc-600 hover:bg-zinc-50 hover:text-[color:var(--fancy-text,var(--color-zinc-900))] dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]\",\n disabled && \"pointer-events-none opacity-50\",\n className,\n )}\n >\n {icon && <span className=\"flex h-5 w-5 shrink-0 items-center justify-center\">{icon}</span>}\n <span className=\"flex-1 truncate text-left\">{children}</span>\n {badge && <span className=\"shrink-0\">{badge}</span>}\n </Tag>\n );\n}\n\nMenuItem.displayName = \"MenuItem\";\n","import { useState } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useMenu } from \"./Menu.context\";\nimport type { MenuSubmenuProps } from \"./Menu.types\";\n\nexport function MenuSubmenu({\n children,\n label,\n icon,\n defaultOpen = false,\n className,\n}: MenuSubmenuProps) {\n const [open, setOpen] = useState(defaultOpen);\n const { orientation } = useMenu();\n const isVertical = orientation === \"vertical\";\n\n if (!isVertical) {\n // Horizontal submenus use a hover-based dropdown\n return (\n <div\n data-react-fancy-menu-submenu=\"\"\n className={cn(\"group relative\", className)}\n >\n <button\n type=\"button\"\n className={cn(\n \"flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors\",\n \"text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900\",\n \"dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-100\",\n )}\n >\n {icon && <span className=\"flex h-5 w-5 shrink-0 items-center justify-center\">{icon}</span>}\n <span>{label}</span>\n <ChevronDown className=\"h-3.5 w-3.5 opacity-60\" />\n </button>\n <div\n className={cn(\n \"invisible absolute left-0 top-full z-50 min-w-[180px] pt-1 opacity-0 transition-all\",\n \"group-hover:visible group-hover:opacity-100\",\n )}\n >\n <div className=\"rounded-lg border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] py-1 shadow-lg dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\">\n {children}\n </div>\n </div>\n </div>\n );\n }\n\n // Vertical submenus use accordion-style expand/collapse\n return (\n <div data-react-fancy-menu-submenu=\"\" className={className}>\n <button\n type=\"button\"\n onClick={() => setOpen((v) => !v)}\n className={cn(\n \"flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors\",\n \"text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900\",\n \"dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-100\",\n )}\n >\n {icon && <span className=\"flex h-5 w-5 shrink-0 items-center justify-center\">{icon}</span>}\n <span className=\"flex-1 text-left\">{label}</span>\n <ChevronDown\n className={cn(\n \"h-3.5 w-3.5 opacity-60 transition-transform duration-200\",\n open && \"rotate-180\",\n )}\n />\n </button>\n <div\n className={cn(\n \"grid transition-[grid-template-rows] duration-200\",\n open ? \"grid-rows-[1fr]\" : \"grid-rows-[0fr]\",\n )}\n >\n <div className=\"overflow-hidden\">\n <div className=\"ml-4 border-l border-[color:var(--fancy-border,var(--color-zinc-200))] pl-2 pt-1 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]\">\n {children}\n </div>\n </div>\n </div>\n </div>\n );\n}\n\nMenuSubmenu.displayName = \"MenuSubmenu\";\n","import { cn } from \"../../utils/cn\";\nimport type { MenuGroupProps } from \"./Menu.types\";\n\nexport function MenuGroup({ children, label, className }: MenuGroupProps) {\n return (\n <div data-react-fancy-menu-group=\"\" className={cn(\"py-1\", className)}>\n {label && (\n <p className=\"mb-1 px-3 text-xs font-semibold uppercase tracking-wider text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]\">\n {label}\n </p>\n )}\n {children}\n </div>\n );\n}\n\nMenuGroup.displayName = \"MenuGroup\";\n","import { cn } from \"../../utils/cn\";\nimport { MenuContext } from \"./Menu.context\";\nimport { MenuItem } from \"./MenuItem\";\nimport { MenuSubmenu } from \"./MenuSubmenu\";\nimport { MenuGroup } from \"./MenuGroup\";\nimport type { MenuProps } from \"./Menu.types\";\n\nfunction MenuRoot({ children, orientation = \"vertical\", className }: MenuProps) {\n const isVertical = orientation === \"vertical\";\n\n return (\n <MenuContext.Provider value={{ orientation }}>\n <nav\n data-react-fancy-menu=\"\"\n data-orientation={orientation}\n className={cn(\n \"flex gap-0.5\",\n isVertical ? \"flex-col\" : \"flex-row items-center\",\n className,\n )}\n >\n {children}\n </nav>\n </MenuContext.Provider>\n );\n}\n\nexport const Menu = Object.assign(MenuRoot, {\n Item: MenuItem,\n Submenu: MenuSubmenu,\n Group: MenuGroup,\n});\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Sidebar/Sidebar.context.ts","../src/components/Sidebar/SidebarItem.tsx","../src/components/Sidebar/SidebarGroup.tsx","../src/components/Sidebar/SidebarSubmenu.tsx","../src/components/Sidebar/SidebarToggle.tsx","../src/components/Sidebar/Sidebar.tsx"],"names":["createContext","useContext","jsxs","cn","jsx","Fragment","getLetters","useState","ChevronDown","PanelLeftOpen","PanelLeftClose","useControllableState"],"mappings":"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","file":"chunk-SONXLQPJ.cjs","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { SidebarContextValue } from \"./Sidebar.types\";\n\nexport const SidebarContext = createContext<SidebarContextValue | null>(null);\n\nexport function useSidebar(): SidebarContextValue {\n const ctx = useContext(SidebarContext);\n if (!ctx) {\n throw new Error(\"useSidebar must be used within a <Sidebar> component\");\n }\n return ctx;\n}\n","import type { ElementType } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useSidebar } from \"./Sidebar.context\";\nimport type { SidebarItemProps } from \"./Sidebar.types\";\n\n/** Extract first 3 characters from a ReactNode if it's a string. */\nfunction getLetters(children: React.ReactNode): string {\n if (typeof children === \"string\") return children.slice(0, 3);\n return \"...\";\n}\n\nexport function SidebarItem({\n children,\n href,\n as: As,\n icon,\n active = false,\n disabled = false,\n badge,\n onClick,\n className,\n ...rest\n}: SidebarItemProps) {\n const { collapsed, collapseMode } = useSidebar();\n\n // Link mode engages on `href` OR `as` — a `to`-based router (TanStack Router,\n // React Router) passes no href, and would otherwise render a <button> that\n // navigates nowhere. `onClick` now rides along in link mode instead of being\n // dropped: an item that both navigates and closes a drawer is the common case.\n const isLink = Boolean(href || As);\n const Tag = isLink ? ((As ?? \"a\") as ElementType) : \"button\";\n const tagProps = isLink\n ? { ...(href ? { href } : {}), onClick }\n : { type: \"button\" as const, onClick };\n\n const showIconOnly = collapsed && collapseMode === \"icons\" && icon;\n const showLetters = collapsed && (collapseMode === \"letters\" || (collapseMode === \"icons\" && !icon));\n\n const title = typeof children === \"string\" ? children : undefined;\n\n return (\n <Tag\n {...tagProps}\n {...rest}\n data-react-fancy-sidebar-item=\"\"\n data-active={active || undefined}\n aria-current={active ? \"page\" : undefined}\n aria-disabled={disabled || undefined}\n title={collapsed ? title : undefined}\n className={cn(\n // `w-full` matters when the Tag is a <button>: form controls size to\n // FIT-CONTENT, not to their parent, so a long label made the item wider\n // than the sidebar and an ancestor clipped the overflow — which reads as\n // a label cut off mid-word rather than an ellipsis. Without this,\n // `min-w-0` on the label below can never engage, because the item is\n // never under width pressure in the first place.\n \"flex w-full items-center rounded-md text-sm font-medium transition-colors\",\n \"outline-none focus-visible:ring-2 focus-visible:ring-blue-500\",\n collapsed ? \"justify-center px-2 py-2\" : \"gap-2 px-3 py-2\",\n active\n ? \"bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] text-[color:var(--fancy-text,var(--color-zinc-900))] dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))] dark:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]\"\n : \"text-zinc-600 hover:bg-zinc-50 hover:text-[color:var(--fancy-text,var(--color-zinc-900))] dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]\",\n disabled && \"pointer-events-none opacity-50\",\n className,\n )}\n >\n {showIconOnly && (\n <span className=\"flex h-5 w-5 shrink-0 items-center justify-center\">{icon}</span>\n )}\n {showLetters && (\n <span className=\"text-xs font-semibold uppercase\">{getLetters(children)}</span>\n )}\n {!collapsed && (\n <>\n {icon && <span className=\"flex h-5 w-5 shrink-0 items-center justify-center\">{icon}</span>}\n {/*\n `min-w-0` is load-bearing, not tidiness. A flex item defaults to\n `min-width: auto`, which resolves to its MIN-CONTENT width — so with\n `truncate` alone the span refuses to shrink below the full label,\n and the item grows wider than the sidebar instead of ellipsing.\n The overflow then gets clipped by an ancestor, which looks like a\n mid-word cut rather than a truncation.\n\n Only shows up with labels longer than the sidebar is wide, which is\n why it survived: short nav labels never trigger it.\n */}\n <span className=\"min-w-0 flex-1 truncate text-left\">{children}</span>\n {badge && <span className=\"shrink-0\">{badge}</span>}\n </>\n )}\n </Tag>\n );\n}\n\nSidebarItem.displayName = \"SidebarItem\";\n","import { cn } from \"../../utils/cn\";\nimport { useSidebar } from \"./Sidebar.context\";\nimport type { SidebarGroupProps } from \"./Sidebar.types\";\n\nexport function SidebarGroup({ children, label, className }: SidebarGroupProps) {\n const { collapsed } = useSidebar();\n\n return (\n <div data-react-fancy-sidebar-group=\"\" className={cn(\"py-1\", className)}>\n {label && !collapsed && (\n <p className=\"mb-1 px-3 text-xs font-semibold uppercase tracking-wider text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]\">\n {label}\n </p>\n )}\n {label && collapsed && (\n <div className=\"mx-auto mb-1 h-px w-6 bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]\" />\n )}\n {children}\n </div>\n );\n}\n\nSidebarGroup.displayName = \"SidebarGroup\";\n","import { useState } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useSidebar } from \"./Sidebar.context\";\nimport type { SidebarSubmenuProps } from \"./Sidebar.types\";\n\n/** Extract first 3 characters from a string. */\nfunction getLetters(label: string): string {\n return label.slice(0, 3);\n}\n\nexport function SidebarSubmenu({\n children,\n label,\n icon,\n defaultOpen = false,\n className,\n}: SidebarSubmenuProps) {\n const [open, setOpen] = useState(defaultOpen);\n const { collapsed, collapseMode } = useSidebar();\n\n const showIconOnly = collapsed && collapseMode === \"icons\" && icon;\n const showLetters = collapsed && (collapseMode === \"letters\" || (collapseMode === \"icons\" && !icon));\n\n // When collapsed, just show the icon/letters as a simple item (no expand)\n if (collapsed) {\n return (\n <div\n data-react-fancy-sidebar-submenu=\"\"\n title={label}\n className={cn(\n \"flex items-center justify-center rounded-md px-2 py-2 text-sm font-medium transition-colors\",\n \"text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900\",\n \"dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-100\",\n className,\n )}\n >\n {showIconOnly && (\n <span className=\"flex h-5 w-5 shrink-0 items-center justify-center\">{icon}</span>\n )}\n {showLetters && (\n <span className=\"text-xs font-semibold uppercase\">{getLetters(label)}</span>\n )}\n </div>\n );\n }\n\n return (\n <div data-react-fancy-sidebar-submenu=\"\" className={className}>\n <button\n type=\"button\"\n onClick={() => setOpen((v) => !v)}\n className={cn(\n \"flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors\",\n \"text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900\",\n \"dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-100\",\n )}\n >\n {icon && <span className=\"flex h-5 w-5 shrink-0 items-center justify-center\">{icon}</span>}\n <span className=\"flex-1 text-left\">{label}</span>\n <ChevronDown\n className={cn(\n \"h-3.5 w-3.5 opacity-60 transition-transform duration-200\",\n open && \"rotate-180\",\n )}\n />\n </button>\n <div\n className={cn(\n \"grid transition-[grid-template-rows] duration-200\",\n open ? \"grid-rows-[1fr]\" : \"grid-rows-[0fr]\",\n )}\n >\n <div className=\"overflow-hidden\">\n <div className=\"ml-4 border-l border-[color:var(--fancy-border,var(--color-zinc-200))] pl-2 pt-1 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]\">\n {children}\n </div>\n </div>\n </div>\n </div>\n );\n}\n\nSidebarSubmenu.displayName = \"SidebarSubmenu\";\n","import { PanelLeftClose, PanelLeftOpen } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useSidebar } from \"./Sidebar.context\";\nimport type { SidebarToggleProps } from \"./Sidebar.types\";\n\nexport function SidebarToggle({ className }: SidebarToggleProps) {\n const { collapsed, setCollapsed } = useSidebar();\n\n return (\n <button\n type=\"button\"\n data-react-fancy-sidebar-toggle=\"\"\n onClick={() => setCollapsed(!collapsed)}\n title={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n className={cn(\n \"flex items-center justify-center rounded-md p-1.5 text-zinc-400 transition-colors\",\n \"hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] hover:text-zinc-600 dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))] dark:hover:text-zinc-300\",\n className,\n )}\n >\n {collapsed ? (\n <PanelLeftOpen className=\"h-4 w-4\" />\n ) : (\n <PanelLeftClose className=\"h-4 w-4\" />\n )}\n </button>\n );\n}\n\nSidebarToggle.displayName = \"SidebarToggle\";\n","import { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks\";\nimport { SidebarContext } from \"./Sidebar.context\";\nimport { SidebarItem } from \"./SidebarItem\";\nimport { SidebarGroup } from \"./SidebarGroup\";\nimport { SidebarSubmenu } from \"./SidebarSubmenu\";\nimport { SidebarToggle } from \"./SidebarToggle\";\nimport type { SidebarProps } from \"./Sidebar.types\";\n\nfunction SidebarRoot({\n children,\n collapsed: controlledCollapsed,\n defaultCollapsed = false,\n onCollapsedChange,\n collapseMode = \"icons\",\n embedded = false,\n className,\n}: SidebarProps) {\n const [collapsed, setCollapsed] = useControllableState(\n controlledCollapsed,\n defaultCollapsed,\n onCollapsedChange,\n );\n\n return (\n <SidebarContext.Provider value={{ collapsed, collapseMode, setCollapsed }}>\n <aside\n data-react-fancy-sidebar=\"\"\n data-collapsed={collapsed || undefined}\n data-embedded={embedded || undefined}\n className={cn(\n \"flex flex-col gap-0.5 transition-[width] duration-200\",\n // The app-shell chrome. Correct for the rail this is usually used as,\n // and actively wrong inside a container that already draws its own —\n // a 240px rail in a 300px card puts its right border 240px in, which\n // reads as a stray line slicing the panel rather than an edge.\n !embedded && \"border-r border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\",\n // Collapsed is a fixed icon rail either way; only the expanded width\n // defers to the container.\n collapsed ? \"w-16\" : embedded ? \"w-full\" : \"w-60\",\n className,\n )}\n >\n {children}\n </aside>\n </SidebarContext.Provider>\n );\n}\n\nexport const Sidebar = Object.assign(SidebarRoot, {\n Item: SidebarItem,\n Group: SidebarGroup,\n Submenu: SidebarSubmenu,\n Toggle: SidebarToggle,\n});\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Sidebar/Sidebar.context.ts","../src/components/Sidebar/SidebarItem.tsx","../src/components/Sidebar/SidebarGroup.tsx","../src/components/Sidebar/SidebarSubmenu.tsx","../src/components/Sidebar/SidebarToggle.tsx","../src/components/Sidebar/Sidebar.tsx"],"names":["jsxs","jsx","getLetters"],"mappings":"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","file":"chunk-UVMIJCY3.js","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { SidebarContextValue } from \"./Sidebar.types\";\n\nexport const SidebarContext = createContext<SidebarContextValue | null>(null);\n\nexport function useSidebar(): SidebarContextValue {\n const ctx = useContext(SidebarContext);\n if (!ctx) {\n throw new Error(\"useSidebar must be used within a <Sidebar> component\");\n }\n return ctx;\n}\n","import type { ElementType } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useSidebar } from \"./Sidebar.context\";\nimport type { SidebarItemProps } from \"./Sidebar.types\";\n\n/** Extract first 3 characters from a ReactNode if it's a string. */\nfunction getLetters(children: React.ReactNode): string {\n if (typeof children === \"string\") return children.slice(0, 3);\n return \"...\";\n}\n\nexport function SidebarItem({\n children,\n href,\n as: As,\n icon,\n active = false,\n disabled = false,\n badge,\n onClick,\n className,\n ...rest\n}: SidebarItemProps) {\n const { collapsed, collapseMode } = useSidebar();\n\n // Link mode engages on `href` OR `as` — a `to`-based router (TanStack Router,\n // React Router) passes no href, and would otherwise render a <button> that\n // navigates nowhere. `onClick` now rides along in link mode instead of being\n // dropped: an item that both navigates and closes a drawer is the common case.\n const isLink = Boolean(href || As);\n const Tag = isLink ? ((As ?? \"a\") as ElementType) : \"button\";\n const tagProps = isLink\n ? { ...(href ? { href } : {}), onClick }\n : { type: \"button\" as const, onClick };\n\n const showIconOnly = collapsed && collapseMode === \"icons\" && icon;\n const showLetters = collapsed && (collapseMode === \"letters\" || (collapseMode === \"icons\" && !icon));\n\n const title = typeof children === \"string\" ? children : undefined;\n\n return (\n <Tag\n {...tagProps}\n {...rest}\n data-react-fancy-sidebar-item=\"\"\n data-active={active || undefined}\n aria-current={active ? \"page\" : undefined}\n aria-disabled={disabled || undefined}\n title={collapsed ? title : undefined}\n className={cn(\n // `w-full` matters when the Tag is a <button>: form controls size to\n // FIT-CONTENT, not to their parent, so a long label made the item wider\n // than the sidebar and an ancestor clipped the overflow — which reads as\n // a label cut off mid-word rather than an ellipsis. Without this,\n // `min-w-0` on the label below can never engage, because the item is\n // never under width pressure in the first place.\n \"flex w-full items-center rounded-md text-sm font-medium transition-colors\",\n \"outline-none focus-visible:ring-2 focus-visible:ring-blue-500\",\n collapsed ? \"justify-center px-2 py-2\" : \"gap-2 px-3 py-2\",\n active\n ? \"bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] text-[color:var(--fancy-text,var(--color-zinc-900))] dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))] dark:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]\"\n : \"text-zinc-600 hover:bg-zinc-50 hover:text-[color:var(--fancy-text,var(--color-zinc-900))] dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]\",\n disabled && \"pointer-events-none opacity-50\",\n className,\n )}\n >\n {showIconOnly && (\n <span className=\"flex h-5 w-5 shrink-0 items-center justify-center\">{icon}</span>\n )}\n {showLetters && (\n <span className=\"text-xs font-semibold uppercase\">{getLetters(children)}</span>\n )}\n {!collapsed && (\n <>\n {icon && <span className=\"flex h-5 w-5 shrink-0 items-center justify-center\">{icon}</span>}\n {/*\n `min-w-0` is load-bearing, not tidiness. A flex item defaults to\n `min-width: auto`, which resolves to its MIN-CONTENT width — so with\n `truncate` alone the span refuses to shrink below the full label,\n and the item grows wider than the sidebar instead of ellipsing.\n The overflow then gets clipped by an ancestor, which looks like a\n mid-word cut rather than a truncation.\n\n Only shows up with labels longer than the sidebar is wide, which is\n why it survived: short nav labels never trigger it.\n */}\n <span className=\"min-w-0 flex-1 truncate text-left\">{children}</span>\n {badge && <span className=\"shrink-0\">{badge}</span>}\n </>\n )}\n </Tag>\n );\n}\n\nSidebarItem.displayName = \"SidebarItem\";\n","import { cn } from \"../../utils/cn\";\nimport { useSidebar } from \"./Sidebar.context\";\nimport type { SidebarGroupProps } from \"./Sidebar.types\";\n\nexport function SidebarGroup({ children, label, className }: SidebarGroupProps) {\n const { collapsed } = useSidebar();\n\n return (\n <div data-react-fancy-sidebar-group=\"\" className={cn(\"py-1\", className)}>\n {label && !collapsed && (\n <p className=\"mb-1 px-3 text-xs font-semibold uppercase tracking-wider text-[color:var(--fancy-text-faint,var(--color-zinc-400))] dark:text-[color:var(--fancy-text-faint-dark,var(--color-zinc-500))]\">\n {label}\n </p>\n )}\n {label && collapsed && (\n <div className=\"mx-auto mb-1 h-px w-6 bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]\" />\n )}\n {children}\n </div>\n );\n}\n\nSidebarGroup.displayName = \"SidebarGroup\";\n","import { useState } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useSidebar } from \"./Sidebar.context\";\nimport type { SidebarSubmenuProps } from \"./Sidebar.types\";\n\n/** Extract first 3 characters from a string. */\nfunction getLetters(label: string): string {\n return label.slice(0, 3);\n}\n\nexport function SidebarSubmenu({\n children,\n label,\n icon,\n defaultOpen = false,\n className,\n}: SidebarSubmenuProps) {\n const [open, setOpen] = useState(defaultOpen);\n const { collapsed, collapseMode } = useSidebar();\n\n const showIconOnly = collapsed && collapseMode === \"icons\" && icon;\n const showLetters = collapsed && (collapseMode === \"letters\" || (collapseMode === \"icons\" && !icon));\n\n // When collapsed, just show the icon/letters as a simple item (no expand)\n if (collapsed) {\n return (\n <div\n data-react-fancy-sidebar-submenu=\"\"\n title={label}\n className={cn(\n \"flex items-center justify-center rounded-md px-2 py-2 text-sm font-medium transition-colors\",\n \"text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900\",\n \"dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-100\",\n className,\n )}\n >\n {showIconOnly && (\n <span className=\"flex h-5 w-5 shrink-0 items-center justify-center\">{icon}</span>\n )}\n {showLetters && (\n <span className=\"text-xs font-semibold uppercase\">{getLetters(label)}</span>\n )}\n </div>\n );\n }\n\n return (\n <div data-react-fancy-sidebar-submenu=\"\" className={className}>\n <button\n type=\"button\"\n onClick={() => setOpen((v) => !v)}\n className={cn(\n \"flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors\",\n \"text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900\",\n \"dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-100\",\n )}\n >\n {icon && <span className=\"flex h-5 w-5 shrink-0 items-center justify-center\">{icon}</span>}\n <span className=\"flex-1 text-left\">{label}</span>\n <ChevronDown\n className={cn(\n \"h-3.5 w-3.5 opacity-60 transition-transform duration-200\",\n open && \"rotate-180\",\n )}\n />\n </button>\n <div\n className={cn(\n \"grid transition-[grid-template-rows] duration-200\",\n open ? \"grid-rows-[1fr]\" : \"grid-rows-[0fr]\",\n )}\n >\n <div className=\"overflow-hidden\">\n <div className=\"ml-4 border-l border-[color:var(--fancy-border,var(--color-zinc-200))] pl-2 pt-1 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]\">\n {children}\n </div>\n </div>\n </div>\n </div>\n );\n}\n\nSidebarSubmenu.displayName = \"SidebarSubmenu\";\n","import { PanelLeftClose, PanelLeftOpen } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useSidebar } from \"./Sidebar.context\";\nimport type { SidebarToggleProps } from \"./Sidebar.types\";\n\nexport function SidebarToggle({ className }: SidebarToggleProps) {\n const { collapsed, setCollapsed } = useSidebar();\n\n return (\n <button\n type=\"button\"\n data-react-fancy-sidebar-toggle=\"\"\n onClick={() => setCollapsed(!collapsed)}\n title={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n className={cn(\n \"flex items-center justify-center rounded-md p-1.5 text-zinc-400 transition-colors\",\n \"hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] hover:text-zinc-600 dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))] dark:hover:text-zinc-300\",\n className,\n )}\n >\n {collapsed ? (\n <PanelLeftOpen className=\"h-4 w-4\" />\n ) : (\n <PanelLeftClose className=\"h-4 w-4\" />\n )}\n </button>\n );\n}\n\nSidebarToggle.displayName = \"SidebarToggle\";\n","import { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks\";\nimport { SidebarContext } from \"./Sidebar.context\";\nimport { SidebarItem } from \"./SidebarItem\";\nimport { SidebarGroup } from \"./SidebarGroup\";\nimport { SidebarSubmenu } from \"./SidebarSubmenu\";\nimport { SidebarToggle } from \"./SidebarToggle\";\nimport type { SidebarProps } from \"./Sidebar.types\";\n\nfunction SidebarRoot({\n children,\n collapsed: controlledCollapsed,\n defaultCollapsed = false,\n onCollapsedChange,\n collapseMode = \"icons\",\n embedded = false,\n className,\n}: SidebarProps) {\n const [collapsed, setCollapsed] = useControllableState(\n controlledCollapsed,\n defaultCollapsed,\n onCollapsedChange,\n );\n\n return (\n <SidebarContext.Provider value={{ collapsed, collapseMode, setCollapsed }}>\n <aside\n data-react-fancy-sidebar=\"\"\n data-collapsed={collapsed || undefined}\n data-embedded={embedded || undefined}\n className={cn(\n \"flex flex-col gap-0.5 transition-[width] duration-200\",\n // The app-shell chrome. Correct for the rail this is usually used as,\n // and actively wrong inside a container that already draws its own —\n // a 240px rail in a 300px card puts its right border 240px in, which\n // reads as a stray line slicing the panel rather than an edge.\n !embedded && \"border-r border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\",\n // Collapsed is a fixed icon rail either way; only the expanded width\n // defers to the container.\n collapsed ? \"w-16\" : embedded ? \"w-full\" : \"w-60\",\n className,\n )}\n >\n {children}\n </aside>\n </SidebarContext.Provider>\n );\n}\n\nexport const Sidebar = Object.assign(SidebarRoot, {\n Item: SidebarItem,\n Group: SidebarGroup,\n Submenu: SidebarSubmenu,\n Toggle: SidebarToggle,\n});\n"]}
|