@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.
Files changed (132) hide show
  1. package/CHANGELOG.md +82 -0
  2. package/README.md +3 -1
  3. package/dist/PdfViewer.types-BEk2Jq6p.d.ts +97 -0
  4. package/dist/PdfViewer.types-DyoUBa2g.d.cts +97 -0
  5. package/dist/accordion.cjs +3 -3
  6. package/dist/accordion.js +1 -1
  7. package/dist/autocomplete.cjs +2 -2
  8. package/dist/autocomplete.js +1 -1
  9. package/dist/chart.cjs +2 -2
  10. package/dist/chart.js +1 -1
  11. package/dist/{chunk-PRP5N7NY.js → chunk-35MF32VQ.js} +3 -3
  12. package/dist/{chunk-PRP5N7NY.js.map → chunk-35MF32VQ.js.map} +1 -1
  13. package/dist/{chunk-TJTC4WNY.cjs → chunk-4DGXL6JC.cjs} +3 -3
  14. package/dist/{chunk-TJTC4WNY.cjs.map → chunk-4DGXL6JC.cjs.map} +1 -1
  15. package/dist/{chunk-QAKIG43N.cjs → chunk-5IWKZ2WK.cjs} +3 -3
  16. package/dist/{chunk-QAKIG43N.cjs.map → chunk-5IWKZ2WK.cjs.map} +1 -1
  17. package/dist/chunk-7MDHCYEB.cjs +414 -0
  18. package/dist/chunk-7MDHCYEB.cjs.map +1 -0
  19. package/dist/{chunk-546K5LRX.cjs → chunk-CVDL6C2O.cjs} +3 -3
  20. package/dist/{chunk-546K5LRX.cjs.map → chunk-CVDL6C2O.cjs.map} +1 -1
  21. package/dist/{chunk-ZULMMW5W.js → chunk-EEFWVFKO.js} +3 -3
  22. package/dist/{chunk-ZULMMW5W.js.map → chunk-EEFWVFKO.js.map} +1 -1
  23. package/dist/{chunk-SONXLQPJ.cjs → chunk-EZA6GWZL.cjs} +7 -7
  24. package/dist/chunk-EZA6GWZL.cjs.map +1 -0
  25. package/dist/{chunk-45FDQ3R5.js → chunk-FRWOWDGX.js} +3 -3
  26. package/dist/{chunk-45FDQ3R5.js.map → chunk-FRWOWDGX.js.map} +1 -1
  27. package/dist/{chunk-36HG5JK6.cjs → chunk-GISORLGW.cjs} +3 -3
  28. package/dist/{chunk-36HG5JK6.cjs.map → chunk-GISORLGW.cjs.map} +1 -1
  29. package/dist/{chunk-BDUL42VO.cjs → chunk-GLGUQGAQ.cjs} +3 -3
  30. package/dist/{chunk-BDUL42VO.cjs.map → chunk-GLGUQGAQ.cjs.map} +1 -1
  31. package/dist/{chunk-A5DN2XNM.cjs → chunk-HTNQ5XUR.cjs} +3 -3
  32. package/dist/{chunk-A5DN2XNM.cjs.map → chunk-HTNQ5XUR.cjs.map} +1 -1
  33. package/dist/{chunk-ZKJLDBXA.cjs → chunk-ICI33QMY.cjs} +9 -9
  34. package/dist/{chunk-ZKJLDBXA.cjs.map → chunk-ICI33QMY.cjs.map} +1 -1
  35. package/dist/{chunk-JUQZMNPR.cjs → chunk-IEQK3LGI.cjs} +3 -3
  36. package/dist/{chunk-JUQZMNPR.cjs.map → chunk-IEQK3LGI.cjs.map} +1 -1
  37. package/dist/{chunk-MV6BK4WG.js → chunk-IUCYRQ4J.js} +6 -6
  38. package/dist/{chunk-MV6BK4WG.js.map → chunk-IUCYRQ4J.js.map} +1 -1
  39. package/dist/{chunk-N5XMBHX7.js → chunk-JXXUTPDH.js} +3 -3
  40. package/dist/{chunk-N5XMBHX7.js.map → chunk-JXXUTPDH.js.map} +1 -1
  41. package/dist/{chunk-WONP337S.cjs → chunk-JY7HPFOE.cjs} +6 -6
  42. package/dist/{chunk-WONP337S.cjs.map → chunk-JY7HPFOE.cjs.map} +1 -1
  43. package/dist/{chunk-4TVAHZ35.js → chunk-LZHGXRFD.js} +3 -3
  44. package/dist/{chunk-4TVAHZ35.js.map → chunk-LZHGXRFD.js.map} +1 -1
  45. package/dist/chunk-MORXQ5UM.js +412 -0
  46. package/dist/chunk-MORXQ5UM.js.map +1 -0
  47. package/dist/{chunk-D4QOV56U.js → chunk-MTTRPPHH.js} +3 -3
  48. package/dist/{chunk-D4QOV56U.js.map → chunk-MTTRPPHH.js.map} +1 -1
  49. package/dist/{chunk-Y7UE37QZ.js → chunk-NHGU2BWT.js} +3 -3
  50. package/dist/{chunk-Y7UE37QZ.js.map → chunk-NHGU2BWT.js.map} +1 -1
  51. package/dist/{chunk-VOHTL6WN.js → chunk-OC5OUZSD.js} +3 -3
  52. package/dist/{chunk-VOHTL6WN.js.map → chunk-OC5OUZSD.js.map} +1 -1
  53. package/dist/{chunk-3EWO5EBI.js → chunk-QGY5FPVM.js} +4 -4
  54. package/dist/{chunk-3EWO5EBI.js.map → chunk-QGY5FPVM.js.map} +1 -1
  55. package/dist/{chunk-E4TRDGSU.cjs → chunk-SLCR7A6W.cjs} +4 -4
  56. package/dist/{chunk-E4TRDGSU.cjs.map → chunk-SLCR7A6W.cjs.map} +1 -1
  57. package/dist/{chunk-OFNA5HS5.js → chunk-T45LBTXH.js} +3 -3
  58. package/dist/{chunk-OFNA5HS5.js.map → chunk-T45LBTXH.js.map} +1 -1
  59. package/dist/{chunk-XOYRJFMU.js → chunk-TKGMH5PA.js} +3 -3
  60. package/dist/{chunk-XOYRJFMU.js.map → chunk-TKGMH5PA.js.map} +1 -1
  61. package/dist/{chunk-A5RTALZJ.js → chunk-U4Y7ZXME.js} +7 -7
  62. package/dist/chunk-U4Y7ZXME.js.map +1 -0
  63. package/dist/{chunk-S3V2C4DW.cjs → chunk-UXYFM2XT.cjs} +4 -4
  64. package/dist/{chunk-S3V2C4DW.cjs.map → chunk-UXYFM2XT.cjs.map} +1 -1
  65. package/dist/{chunk-SW2MDI2E.cjs → chunk-VP7MT7LH.cjs} +5 -5
  66. package/dist/{chunk-SW2MDI2E.cjs.map → chunk-VP7MT7LH.cjs.map} +1 -1
  67. package/dist/{chunk-5DG4CAWS.js → chunk-YAPGHVBZ.js} +3 -3
  68. package/dist/{chunk-5DG4CAWS.js.map → chunk-YAPGHVBZ.js.map} +1 -1
  69. package/dist/{chunk-UVMIJCY3.js → chunk-YJHP5FVA.js} +7 -7
  70. package/dist/chunk-YJHP5FVA.js.map +1 -0
  71. package/dist/{chunk-3YA6FDVN.cjs → chunk-YJXP6AOL.cjs} +3 -3
  72. package/dist/{chunk-3YA6FDVN.cjs.map → chunk-YJXP6AOL.cjs.map} +1 -1
  73. package/dist/{chunk-QHN63FRP.cjs → chunk-YVTFODCJ.cjs} +3 -3
  74. package/dist/{chunk-QHN63FRP.cjs.map → chunk-YVTFODCJ.cjs.map} +1 -1
  75. package/dist/{chunk-3NIXNJ3I.js → chunk-ZASX5GO4.js} +3 -3
  76. package/dist/{chunk-3NIXNJ3I.js.map → chunk-ZASX5GO4.js.map} +1 -1
  77. package/dist/{chunk-LX23ZJDM.cjs → chunk-ZGDOWJKL.cjs} +7 -7
  78. package/dist/chunk-ZGDOWJKL.cjs.map +1 -0
  79. package/dist/content-renderer.cjs +4 -4
  80. package/dist/content-renderer.js +1 -1
  81. package/dist/editor.cjs +4 -4
  82. package/dist/editor.js +2 -2
  83. package/dist/{index-AesVUjQE.d.cts → index-Bd4br4sF.d.cts} +1 -1
  84. package/dist/{index-D3wJ8hrZ.d.ts → index-Bwrc9ktU.d.ts} +1 -1
  85. package/dist/index.cjs +71 -56
  86. package/dist/index.cjs.map +1 -1
  87. package/dist/index.d.cts +16 -2
  88. package/dist/index.d.ts +16 -2
  89. package/dist/index.js +32 -17
  90. package/dist/index.js.map +1 -1
  91. package/dist/inputs.cjs +4 -4
  92. package/dist/inputs.js +2 -2
  93. package/dist/json-editor.cjs +13 -13
  94. package/dist/json-editor.js +2 -2
  95. package/dist/kanban.cjs +3 -3
  96. package/dist/kanban.js +1 -1
  97. package/dist/media-viewer.cjs +3 -3
  98. package/dist/media-viewer.d.cts +2 -2
  99. package/dist/media-viewer.d.ts +2 -2
  100. package/dist/media-viewer.js +2 -2
  101. package/dist/menu.cjs +3 -3
  102. package/dist/menu.js +1 -1
  103. package/dist/mobile-menu.cjs +3 -3
  104. package/dist/mobile-menu.js +1 -1
  105. package/dist/multi-switch.cjs +2 -2
  106. package/dist/multi-switch.js +1 -1
  107. package/dist/navbar.cjs +3 -3
  108. package/dist/navbar.js +1 -1
  109. package/dist/pdf-viewer.cjs +2 -2
  110. package/dist/pdf-viewer.d.cts +13 -1
  111. package/dist/pdf-viewer.d.ts +13 -1
  112. package/dist/pdf-viewer.js +1 -1
  113. package/dist/select.cjs +2 -2
  114. package/dist/select.js +1 -1
  115. package/dist/sidebar.cjs +3 -3
  116. package/dist/sidebar.js +1 -1
  117. package/dist/table.cjs +11 -11
  118. package/dist/table.js +1 -1
  119. package/dist/timeline.cjs +4 -4
  120. package/dist/timeline.js +1 -1
  121. package/docs/PdfViewer.md +106 -4
  122. package/package.json +1 -1
  123. package/dist/PdfViewer.types-Bgn9EmZT.d.cts +0 -22
  124. package/dist/PdfViewer.types-xnPpdjJa.d.ts +0 -22
  125. package/dist/chunk-A5RTALZJ.js.map +0 -1
  126. package/dist/chunk-HRH5BIYG.js +0 -56
  127. package/dist/chunk-HRH5BIYG.js.map +0 -1
  128. package/dist/chunk-LX23ZJDM.cjs.map +0 -1
  129. package/dist/chunk-SONXLQPJ.cjs.map +0 -1
  130. package/dist/chunk-UVMIJCY3.js.map +0 -1
  131. package/dist/chunk-XM3W5ETT.cjs +0 -58
  132. 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 chunkBDUL42VO_cjs = require('./chunk-BDUL42VO.cjs');
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 chunkBDUL42VO_cjs.Select; }
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
@@ -1,5 +1,5 @@
1
1
  import './chunk-GNHQVPZP.js';
2
- export { Select } from './chunk-OFNA5HS5.js';
2
+ export { Select } from './chunk-T45LBTXH.js';
3
3
  import './chunk-KXYMMNNV.js';
4
4
  import './chunk-WX5XYDVN.js';
5
5
  import './chunk-5WQ6FPSP.js';
package/dist/sidebar.cjs CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var chunkSONXLQPJ_cjs = require('./chunk-SONXLQPJ.cjs');
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 chunkSONXLQPJ_cjs.Sidebar; }
18
+ get: function () { return chunkEZA6GWZL_cjs.Sidebar; }
19
19
  });
20
20
  Object.defineProperty(exports, "useSidebar", {
21
21
  enumerable: true,
22
- get: function () { return chunkSONXLQPJ_cjs.useSidebar; }
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
@@ -1,4 +1,4 @@
1
- export { Sidebar, useSidebar } from './chunk-UVMIJCY3.js';
1
+ export { Sidebar, useSidebar } from './chunk-YJHP5FVA.js';
2
2
  import './chunk-2BXMMVQS.js';
3
3
  import './chunk-CPY7NHXM.js';
4
4
  import './chunk-5U2DZ7AV.js';
package/dist/table.cjs CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var chunk3YA6FDVN_cjs = require('./chunk-3YA6FDVN.cjs');
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 chunk3YA6FDVN_cjs.Table; }
11
+ get: function () { return chunkYJXP6AOL_cjs.Table; }
12
12
  });
13
13
  Object.defineProperty(exports, "TableBody", {
14
14
  enumerable: true,
15
- get: function () { return chunk3YA6FDVN_cjs.TableBody; }
15
+ get: function () { return chunkYJXP6AOL_cjs.TableBody; }
16
16
  });
17
17
  Object.defineProperty(exports, "TableCell", {
18
18
  enumerable: true,
19
- get: function () { return chunk3YA6FDVN_cjs.TableCell; }
19
+ get: function () { return chunkYJXP6AOL_cjs.TableCell; }
20
20
  });
21
21
  Object.defineProperty(exports, "TableColumn", {
22
22
  enumerable: true,
23
- get: function () { return chunk3YA6FDVN_cjs.TableColumn; }
23
+ get: function () { return chunkYJXP6AOL_cjs.TableColumn; }
24
24
  });
25
25
  Object.defineProperty(exports, "TableHead", {
26
26
  enumerable: true,
27
- get: function () { return chunk3YA6FDVN_cjs.TableHead; }
27
+ get: function () { return chunkYJXP6AOL_cjs.TableHead; }
28
28
  });
29
29
  Object.defineProperty(exports, "TablePagination", {
30
30
  enumerable: true,
31
- get: function () { return chunk3YA6FDVN_cjs.TablePagination; }
31
+ get: function () { return chunkYJXP6AOL_cjs.TablePagination; }
32
32
  });
33
33
  Object.defineProperty(exports, "TableRow", {
34
34
  enumerable: true,
35
- get: function () { return chunk3YA6FDVN_cjs.TableRow; }
35
+ get: function () { return chunkYJXP6AOL_cjs.TableRow; }
36
36
  });
37
37
  Object.defineProperty(exports, "TableRowTray", {
38
38
  enumerable: true,
39
- get: function () { return chunk3YA6FDVN_cjs.TableRowTray; }
39
+ get: function () { return chunkYJXP6AOL_cjs.TableRowTray; }
40
40
  });
41
41
  Object.defineProperty(exports, "TableSearch", {
42
42
  enumerable: true,
43
- get: function () { return chunk3YA6FDVN_cjs.TableSearch; }
43
+ get: function () { return chunkYJXP6AOL_cjs.TableSearch; }
44
44
  });
45
45
  Object.defineProperty(exports, "TableTray", {
46
46
  enumerable: true,
47
- get: function () { return chunk3YA6FDVN_cjs.TableTray; }
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-5DG4CAWS.js';
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 chunkS3V2C4DW_cjs = require('./chunk-S3V2C4DW.cjs');
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 chunkS3V2C4DW_cjs.Timeline; }
10
+ get: function () { return chunkUXYFM2XT_cjs.Timeline; }
11
11
  });
12
12
  Object.defineProperty(exports, "TimelineBlock", {
13
13
  enumerable: true,
14
- get: function () { return chunkS3V2C4DW_cjs.TimelineBlock; }
14
+ get: function () { return chunkUXYFM2XT_cjs.TimelineBlock; }
15
15
  });
16
16
  Object.defineProperty(exports, "TimelineItem", {
17
17
  enumerable: true,
18
- get: function () { return chunkS3V2C4DW_cjs.TimelineItem; }
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
@@ -1,4 +1,4 @@
1
- export { Timeline, TimelineBlock, TimelineItem } from './chunk-3EWO5EBI.js';
1
+ export { Timeline, TimelineBlock, TimelineItem } from './chunk-QGY5FPVM.js';
2
2
  import './chunk-MMW2JGKZ.js';
3
3
  //# sourceMappingURL=timeline.js.map
4
4
  //# sourceMappingURL=timeline.js.map
package/docs/PdfViewer.md CHANGED
@@ -1,7 +1,13 @@
1
1
  # PdfViewer
2
2
 
3
- A standalone PDF viewer — embeds the document via the browser's native PDF
4
- plugin (`<object>`), falling back to an `<iframe>`, then to a download link.
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
- | title | `string` | `"PDF document"` | Accessible title for the embedded document |
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,6 +1,6 @@
1
1
  {
2
2
  "name": "@particle-academy/react-fancy",
3
- "version": "5.53.0",
3
+ "version": "5.54.0",
4
4
  "description": "React UI component library for Human+ UX — controlled, agent-bridgeable primitives",
5
5
  "repository": {
6
6
  "type": "git",
@@ -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"]}
@@ -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&apos;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"]}