@squadbase/vantage 0.6.2 → 0.7.0-stg.18ca87d

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 (346) hide show
  1. package/dist/add-4GHF2TX2.js +6 -0
  2. package/dist/add-4GHF2TX2.js.map +1 -0
  3. package/dist/{build-O5TVNH4E.js → build-U7GO26HR.js} +9 -9
  4. package/dist/{build-O5TVNH4E.js.map → build-U7GO26HR.js.map} +1 -1
  5. package/dist/{check-WFBEDHDR.js → check-MRVAIHG5.js} +7 -7
  6. package/dist/{check-WFBEDHDR.js.map → check-MRVAIHG5.js.map} +1 -1
  7. package/dist/chunk-2IAPIOPS.js +152 -0
  8. package/dist/chunk-2IAPIOPS.js.map +1 -0
  9. package/dist/chunk-3RJEOP3J.js +174 -0
  10. package/dist/chunk-3RJEOP3J.js.map +1 -0
  11. package/dist/chunk-77CISBMG.js +7581 -0
  12. package/dist/chunk-77CISBMG.js.map +1 -0
  13. package/dist/{chunk-QDZA5JSL.js → chunk-AABMKHEU.js} +4 -4
  14. package/dist/{chunk-QDZA5JSL.js.map → chunk-AABMKHEU.js.map} +1 -1
  15. package/dist/{chunk-PVTHHV7X.js → chunk-ANZLVSEP.js} +28 -7
  16. package/dist/chunk-ANZLVSEP.js.map +1 -0
  17. package/dist/chunk-CKWPK4RO.js +50 -0
  18. package/dist/chunk-CKWPK4RO.js.map +1 -0
  19. package/dist/chunk-EG4PX726.js +678 -0
  20. package/dist/chunk-EG4PX726.js.map +1 -0
  21. package/dist/{chunk-3G43C6OL.js → chunk-GNXCX4WE.js} +46 -3
  22. package/dist/chunk-GNXCX4WE.js.map +1 -0
  23. package/dist/chunk-NZ5QIIG4.js +74 -0
  24. package/dist/chunk-NZ5QIIG4.js.map +1 -0
  25. package/dist/{chunk-BCE22JSM.js → chunk-PJ4SPXHS.js} +52 -16
  26. package/dist/chunk-PJ4SPXHS.js.map +1 -0
  27. package/dist/{chunk-RPZAALCX.js → chunk-QNOX7WLZ.js} +256 -165
  28. package/dist/chunk-QNOX7WLZ.js.map +1 -0
  29. package/dist/{chunk-ZVANIULZ.js → chunk-RNTDBX6S.js} +4 -4
  30. package/dist/{chunk-ZVANIULZ.js.map → chunk-RNTDBX6S.js.map} +1 -1
  31. package/dist/{chunk-PXRX5PEC.js → chunk-ROHNXP7J.js} +73 -4
  32. package/dist/chunk-ROHNXP7J.js.map +1 -0
  33. package/dist/chunk-S5MDTHH7.js +466 -0
  34. package/dist/chunk-S5MDTHH7.js.map +1 -0
  35. package/dist/chunk-SDJTTMLK.js +1877 -0
  36. package/dist/chunk-SDJTTMLK.js.map +1 -0
  37. package/dist/{chunk-EP6JHXSR.js → chunk-SHZM3EXB.js} +68 -12
  38. package/dist/chunk-SHZM3EXB.js.map +1 -0
  39. package/dist/chunk-TRMHNMMZ.js +61 -0
  40. package/dist/chunk-TRMHNMMZ.js.map +1 -0
  41. package/dist/{chunk-A2UUGASH.js → chunk-U736PVHY.js} +2 -2
  42. package/dist/chunk-U736PVHY.js.map +1 -0
  43. package/dist/{chunk-JGRMRXXZ.js → chunk-UWSQUHX6.js} +4 -99
  44. package/dist/chunk-UWSQUHX6.js.map +1 -0
  45. package/dist/cli.js +15 -11
  46. package/dist/cli.js.map +1 -1
  47. package/dist/client/index.d.ts +34 -3
  48. package/dist/client/index.js +211 -12
  49. package/dist/client/index.js.map +1 -1
  50. package/dist/components/index.d.ts +1768 -30
  51. package/dist/components/index.js +7 -4
  52. package/dist/delta-text-CbrOaW83.d.ts +17 -0
  53. package/dist/{dev-NZRLOQCL.js → dev-O42JFQ64.js} +24 -13
  54. package/dist/dev-O42JFQ64.js.map +1 -0
  55. package/dist/doc/index.d.ts +215 -2
  56. package/dist/doc/index.js +423 -5
  57. package/dist/doc/index.js.map +1 -1
  58. package/dist/{docs-ZGDJUHJI.js → docs-JVP4RPKT.js} +3 -3
  59. package/dist/{docs-ZGDJUHJI.js.map → docs-JVP4RPKT.js.map} +1 -1
  60. package/dist/{doctor-VFKEMR54.js → doctor-YD3XAAOT.js} +8 -8
  61. package/dist/doctor-YD3XAAOT.js.map +1 -0
  62. package/dist/format-DihQkL1N.d.ts +249 -0
  63. package/dist/markdown/index.js +1 -1
  64. package/dist/markdown/index.js.map +1 -1
  65. package/dist/{preview-QDCIVVSR.js → preview-T6CLSQVX.js} +12 -4
  66. package/dist/preview-T6CLSQVX.js.map +1 -0
  67. package/dist/query/index.d.ts +0 -11
  68. package/dist/query/index.js +2 -2
  69. package/dist/{routes-RHP5FVGD.js → routes-PVKNT777.js} +6 -6
  70. package/dist/{routes-RHP5FVGD.js.map → routes-PVKNT777.js.map} +1 -1
  71. package/dist/{search-RFBELGY7.js → search-5LC4XPB5.js} +3 -3
  72. package/dist/{search-RFBELGY7.js.map → search-5LC4XPB5.js.map} +1 -1
  73. package/dist/slide/index.d.ts +272 -1
  74. package/dist/slide/index.js +1086 -19
  75. package/dist/slide/index.js.map +1 -1
  76. package/dist/table/index.js +14 -10
  77. package/dist/table/index.js.map +1 -1
  78. package/dist/ui/index.d.ts +148 -12
  79. package/dist/ui/index.js +1340 -88
  80. package/dist/ui/index.js.map +1 -1
  81. package/dist/{upgrade-GF2P67M6.js → upgrade-6DT7ADRP.js} +7 -7
  82. package/dist/{upgrade-GF2P67M6.js.map → upgrade-6DT7ADRP.js.map} +1 -1
  83. package/dist/vite/index.d.ts +10 -0
  84. package/dist/vite/index.js +4 -4
  85. package/docs/en/agent-skills.md +1 -1
  86. package/docs/en/changelog.md +82 -0
  87. package/docs/en/cli-reference.md +30 -0
  88. package/docs/en/components.md +42 -17
  89. package/docs/en/doc/delta-text.md +40 -0
  90. package/docs/en/doc/doc-action-items.md +49 -0
  91. package/docs/en/doc/doc-callout.md +38 -0
  92. package/docs/en/doc/doc-data-table.md +60 -0
  93. package/docs/en/doc/doc-executive-summary.md +64 -0
  94. package/docs/en/doc/doc-figure.md +56 -0
  95. package/docs/en/doc/doc-key-findings.md +61 -0
  96. package/docs/en/doc/doc-kpi-scorecard.md +80 -0
  97. package/docs/en/doc/doc-notes-and-sources.md +43 -0
  98. package/docs/en/doc/doc-report-header.md +46 -0
  99. package/docs/en/pages-and-metadata.md +15 -0
  100. package/docs/en/parts/area-chart.md +99 -0
  101. package/docs/en/parts/bar-chart.md +91 -0
  102. package/docs/en/parts/bar-list.md +50 -0
  103. package/docs/en/parts/category-bar.md +37 -0
  104. package/docs/en/parts/chart-frame.md +39 -0
  105. package/docs/en/parts/data-table.md +22 -0
  106. package/docs/en/parts/delta.md +51 -0
  107. package/docs/en/parts/donut-chart.md +72 -0
  108. package/docs/en/parts/format.md +43 -0
  109. package/docs/en/parts/funnel-steps.md +2 -1
  110. package/docs/en/parts/heatmap.md +53 -0
  111. package/docs/en/parts/kpi-card.md +58 -0
  112. package/docs/en/parts/legend.md +35 -0
  113. package/docs/en/parts/line-chart.md +94 -0
  114. package/docs/en/parts/metric-value.md +3 -2
  115. package/docs/en/parts/page-shell.md +1 -1
  116. package/docs/en/parts/progress-circle.md +33 -0
  117. package/docs/en/parts/sample-data.md +39 -0
  118. package/docs/en/parts/scatter-chart.md +56 -0
  119. package/docs/en/parts/sparkline.md +1 -1
  120. package/docs/en/parts/tracker.md +36 -0
  121. package/docs/en/parts/trend-indicator.md +17 -1
  122. package/docs/en/parts/updated-at.md +30 -0
  123. package/docs/en/parts/waterfall-chart.md +56 -0
  124. package/docs/en/slide/slide-chart-full.md +48 -0
  125. package/docs/en/slide/slide-chart-insight.md +52 -0
  126. package/docs/en/slide/slide-columns.md +46 -0
  127. package/docs/en/slide/slide-comparison.md +68 -0
  128. package/docs/en/slide/slide-cover.md +39 -0
  129. package/docs/en/slide/slide-exec-summary.md +47 -0
  130. package/docs/en/slide/slide-heading.md +38 -0
  131. package/docs/en/slide/slide-kpi-grid.md +55 -0
  132. package/docs/en/slide/slide-kpi-hero.md +58 -0
  133. package/docs/en/slide/slide-next-actions.md +49 -0
  134. package/docs/en/slide/slide-scorecard-table.md +54 -0
  135. package/docs/en/slide/slide-section.md +44 -0
  136. package/docs/en/slide/slide-source-line.md +34 -0
  137. package/docs/en/ui/alert-dialog.md +42 -0
  138. package/docs/en/ui/avatar.md +31 -0
  139. package/docs/en/ui/combobox.md +74 -0
  140. package/docs/en/ui/drawer.md +41 -0
  141. package/docs/en/ui/empty.md +1 -1
  142. package/docs/en/ui/error-state.md +4 -3
  143. package/docs/en/ui/field.md +42 -0
  144. package/docs/en/ui/hover-card.md +21 -0
  145. package/docs/en/ui/kbd.md +17 -0
  146. package/docs/en/ui/loading.md +1 -1
  147. package/docs/en/ui/pagination.md +36 -0
  148. package/docs/en/ui/radio-group.md +21 -0
  149. package/docs/en/ui/toast.md +44 -0
  150. package/docs/en/ui/toggle-group.md +4 -3
  151. package/docs/en/ui-and-theming.md +1 -1
  152. package/docs/index.json +1184 -114
  153. package/docs/ja/agent-skills.md +1 -1
  154. package/docs/ja/changelog.md +84 -0
  155. package/docs/ja/cli-reference.md +29 -0
  156. package/docs/ja/components.md +68 -101
  157. package/docs/ja/doc/delta-text.md +40 -0
  158. package/docs/ja/doc/doc-action-items.md +49 -0
  159. package/docs/ja/doc/doc-callout.md +38 -0
  160. package/docs/ja/doc/doc-data-table.md +60 -0
  161. package/docs/ja/doc/doc-executive-summary.md +64 -0
  162. package/docs/ja/doc/doc-figure.md +56 -0
  163. package/docs/ja/doc/doc-key-findings.md +61 -0
  164. package/docs/ja/doc/doc-kpi-scorecard.md +80 -0
  165. package/docs/ja/doc/doc-notes-and-sources.md +43 -0
  166. package/docs/ja/doc/doc-report-header.md +46 -0
  167. package/docs/ja/page-types/csv.md +83 -0
  168. package/docs/ja/page-types/doc.md +83 -0
  169. package/docs/ja/page-types/excel.md +82 -0
  170. package/docs/ja/page-types/slide.md +133 -0
  171. package/docs/ja/page-types.md +47 -0
  172. package/docs/ja/pages-and-metadata.md +15 -0
  173. package/docs/ja/parts/area-chart.md +85 -0
  174. package/docs/ja/parts/bar-chart.md +95 -0
  175. package/docs/ja/parts/bar-list.md +58 -0
  176. package/docs/ja/parts/category-bar.md +36 -0
  177. package/docs/ja/parts/chart-frame.md +36 -0
  178. package/docs/ja/parts/data-table.md +22 -0
  179. package/docs/ja/parts/delta.md +51 -0
  180. package/docs/ja/parts/donut-chart.md +66 -0
  181. package/docs/ja/parts/echart.md +3 -0
  182. package/docs/ja/parts/format.md +44 -0
  183. package/docs/ja/parts/funnel-steps.md +27 -8
  184. package/docs/ja/parts/heatmap.md +45 -0
  185. package/docs/ja/parts/kpi-card.md +56 -0
  186. package/docs/ja/parts/legend.md +36 -0
  187. package/docs/ja/parts/line-chart.md +84 -0
  188. package/docs/ja/parts/metric-value.md +3 -2
  189. package/docs/ja/parts/page-shell.md +1 -1
  190. package/docs/ja/parts/progress-circle.md +34 -0
  191. package/docs/ja/parts/sample-data.md +61 -0
  192. package/docs/ja/parts/scatter-chart.md +69 -0
  193. package/docs/ja/parts/sparkline.md +2 -2
  194. package/docs/ja/parts/tracker.md +32 -0
  195. package/docs/ja/parts/trend-indicator.md +17 -1
  196. package/docs/ja/parts/updated-at.md +27 -0
  197. package/docs/ja/parts/waterfall-chart.md +61 -0
  198. package/docs/ja/routing.md +8 -86
  199. package/docs/ja/slide/slide-chart-full.md +48 -0
  200. package/docs/ja/slide/slide-chart-insight.md +52 -0
  201. package/docs/ja/slide/slide-columns.md +46 -0
  202. package/docs/ja/slide/slide-comparison.md +68 -0
  203. package/docs/ja/slide/slide-cover.md +39 -0
  204. package/docs/ja/slide/slide-exec-summary.md +47 -0
  205. package/docs/ja/slide/slide-heading.md +38 -0
  206. package/docs/ja/slide/slide-kpi-grid.md +55 -0
  207. package/docs/ja/slide/slide-kpi-hero.md +58 -0
  208. package/docs/ja/slide/slide-next-actions.md +49 -0
  209. package/docs/ja/slide/slide-scorecard-table.md +54 -0
  210. package/docs/ja/slide/slide-section.md +44 -0
  211. package/docs/ja/slide/slide-source-line.md +34 -0
  212. package/docs/ja/ui/alert-dialog.md +41 -0
  213. package/docs/ja/ui/avatar.md +31 -0
  214. package/docs/ja/ui/combobox.md +74 -0
  215. package/docs/ja/ui/drawer.md +41 -0
  216. package/docs/ja/ui/empty.md +1 -1
  217. package/docs/ja/ui/error-state.md +4 -3
  218. package/docs/ja/ui/field.md +42 -0
  219. package/docs/ja/ui/hover-card.md +21 -0
  220. package/docs/ja/ui/kbd.md +16 -0
  221. package/docs/ja/ui/loading.md +1 -1
  222. package/docs/ja/ui/pagination.md +36 -0
  223. package/docs/ja/ui/radio-group.md +21 -0
  224. package/docs/ja/ui/toast.md +46 -0
  225. package/docs/ja/ui/toggle-group.md +4 -3
  226. package/docs/ja/ui-and-theming.md +14 -7
  227. package/package.json +43 -29
  228. package/registry/ui/accordion.tsx +76 -0
  229. package/registry/ui/alert-dialog.tsx +189 -0
  230. package/registry/ui/alert.tsx +80 -0
  231. package/registry/ui/app-shell.tsx +424 -0
  232. package/registry/ui/area-chart.tsx +3960 -0
  233. package/registry/ui/attention-list.tsx +465 -0
  234. package/registry/ui/avatar.tsx +110 -0
  235. package/registry/ui/badge.tsx +56 -0
  236. package/registry/ui/bar-chart.tsx +3954 -0
  237. package/registry/ui/bar-list.tsx +3998 -0
  238. package/registry/ui/box-plot-chart.tsx +4214 -0
  239. package/registry/ui/breadcrumb.tsx +128 -0
  240. package/registry/ui/button.tsx +62 -0
  241. package/registry/ui/calendar.tsx +223 -0
  242. package/registry/ui/card.tsx +107 -0
  243. package/registry/ui/category-bar.tsx +1498 -0
  244. package/registry/ui/chart-frame.tsx +1604 -0
  245. package/registry/ui/checkbox.tsx +30 -0
  246. package/registry/ui/collapsible.tsx +23 -0
  247. package/registry/ui/combobox.tsx +310 -0
  248. package/registry/ui/command.tsx +198 -0
  249. package/registry/ui/dashboard-card.tsx +217 -0
  250. package/registry/ui/data-table.tsx +896 -157
  251. package/registry/ui/date-range-picker.tsx +544 -0
  252. package/registry/ui/delta.tsx +350 -0
  253. package/registry/ui/dialog.tsx +161 -0
  254. package/registry/ui/donut-chart.tsx +4006 -0
  255. package/registry/ui/drawer.tsx +229 -0
  256. package/registry/ui/dropdown-menu.tsx +274 -0
  257. package/registry/ui/echart.tsx +1178 -0
  258. package/registry/ui/field.tsx +240 -0
  259. package/registry/ui/filter-bar.tsx +551 -0
  260. package/registry/ui/funnel-steps.tsx +3843 -0
  261. package/registry/ui/heatmap.tsx +2027 -0
  262. package/registry/ui/histogram-chart.tsx +4284 -0
  263. package/registry/ui/hover-card.tsx +52 -0
  264. package/registry/ui/input-group.tsx +160 -0
  265. package/registry/ui/input.tsx +24 -0
  266. package/registry/ui/kbd.tsx +30 -0
  267. package/registry/ui/kpi-card.tsx +905 -0
  268. package/registry/ui/label.tsx +22 -0
  269. package/registry/ui/legend.tsx +3817 -0
  270. package/registry/ui/line-chart.tsx +3958 -0
  271. package/registry/ui/metric-value.tsx +62 -0
  272. package/registry/ui/multi-select.tsx +382 -0
  273. package/registry/ui/page-shell.tsx +420 -0
  274. package/registry/ui/pagination.tsx +140 -0
  275. package/registry/ui/paired-chart.tsx +4086 -0
  276. package/registry/ui/placeholder.tsx +36 -0
  277. package/registry/ui/popover.tsx +92 -0
  278. package/registry/ui/progress-circle.tsx +1033 -0
  279. package/registry/ui/progress.tsx +85 -0
  280. package/registry/ui/radio-group.tsx +39 -0
  281. package/registry/ui/sample-data.tsx +230 -0
  282. package/registry/ui/scatter-chart.tsx +4503 -0
  283. package/registry/ui/scroll-area.tsx +56 -0
  284. package/registry/ui/searchable-select.tsx +352 -0
  285. package/registry/ui/section-header.tsx +43 -0
  286. package/registry/ui/segmented-control.tsx +76 -0
  287. package/registry/ui/select.tsx +255 -0
  288. package/registry/ui/separator.tsx +27 -0
  289. package/registry/ui/sheet.tsx +139 -0
  290. package/registry/ui/sidebar.tsx +725 -0
  291. package/registry/ui/skeleton.tsx +17 -0
  292. package/registry/ui/slider.tsx +56 -0
  293. package/registry/ui/sparkline.tsx +230 -0
  294. package/registry/ui/spinner.tsx +14 -0
  295. package/registry/ui/states.tsx +247 -0
  296. package/registry/ui/status-badge.tsx +286 -0
  297. package/registry/ui/switch.tsx +34 -0
  298. package/registry/ui/table.tsx +118 -0
  299. package/registry/ui/tabs.tsx +84 -0
  300. package/registry/ui/textarea.tsx +22 -0
  301. package/registry/ui/toast.tsx +250 -0
  302. package/registry/ui/toggle-group.tsx +91 -0
  303. package/registry/ui/toggle.tsx +47 -0
  304. package/registry/ui/tooltip.tsx +72 -0
  305. package/registry/ui/tracker.tsx +1015 -0
  306. package/registry/ui/trend-indicator.tsx +217 -0
  307. package/registry/ui/updated-at.tsx +276 -0
  308. package/registry/ui/waterfall-chart.tsx +4561 -0
  309. package/skills/vantage-add-feature/SKILL.md +14 -7
  310. package/skills/vantage-design/SKILL.md +62 -52
  311. package/skills/vantage-design/references/extract.md +26 -27
  312. package/skills/vantage-design/references/format.md +12 -172
  313. package/skills/vantage-design/references/presets.md +50 -110
  314. package/skills/vantage-pitfalls/SKILL.md +10 -1
  315. package/skills/vantage-slide/SKILL.md +71 -36
  316. package/templates/AGENTS.md +54 -16
  317. package/templates/agents/api.md +36 -0
  318. package/templates/agents/csv.md +2 -1
  319. package/templates/agents/doc.md +52 -3
  320. package/templates/agents/page.md +91 -10
  321. package/templates/agents/slide.md +90 -4
  322. package/templates/agents/xlsx.md +2 -1
  323. package/theme.css +247 -132
  324. package/dist/add-EISGSZAH.js +0 -6
  325. package/dist/add-EISGSZAH.js.map +0 -1
  326. package/dist/chunk-3G43C6OL.js.map +0 -1
  327. package/dist/chunk-5ZOP4SQR.js +0 -47
  328. package/dist/chunk-5ZOP4SQR.js.map +0 -1
  329. package/dist/chunk-A2UUGASH.js.map +0 -1
  330. package/dist/chunk-BCE22JSM.js.map +0 -1
  331. package/dist/chunk-DTDVSFRY.js +0 -29
  332. package/dist/chunk-DTDVSFRY.js.map +0 -1
  333. package/dist/chunk-EP6JHXSR.js.map +0 -1
  334. package/dist/chunk-JGRMRXXZ.js.map +0 -1
  335. package/dist/chunk-KLEIVDUV.js +0 -165
  336. package/dist/chunk-KLEIVDUV.js.map +0 -1
  337. package/dist/chunk-LSRMRIXA.js +0 -2227
  338. package/dist/chunk-LSRMRIXA.js.map +0 -1
  339. package/dist/chunk-PVTHHV7X.js.map +0 -1
  340. package/dist/chunk-PXRX5PEC.js.map +0 -1
  341. package/dist/chunk-RPZAALCX.js.map +0 -1
  342. package/dist/chunk-T3FLAGI6.js +0 -316
  343. package/dist/chunk-T3FLAGI6.js.map +0 -1
  344. package/dist/dev-NZRLOQCL.js.map +0 -1
  345. package/dist/doctor-VFKEMR54.js.map +0 -1
  346. package/dist/preview-QDCIVVSR.js.map +0 -1
@@ -1,2227 +0,0 @@
1
- import { SidebarProvider, Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarFooter, SidebarRail, SidebarInset, SidebarTrigger, Separator, Input, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, useIsMobile, Popover, PopoverTrigger, PopoverContent, Calendar, ToggleGroup, ToggleGroupItem, Badge, SelectGroup, SelectLabel, Collapsible, CollapsibleTrigger, SidebarMenuButton, SidebarMenuBadge, CollapsibleContent, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton, SidebarMenuItem, Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, Skeleton, Checkbox } from './chunk-RPZAALCX.js';
2
- import { Button } from './chunk-PXRX5PEC.js';
3
- import { cn } from './chunk-A2UUGASH.js';
4
- import { forwardRef, useRef, useState, useEffect, useMemo, useCallback, Fragment, createContext, useId, useContext } from 'react';
5
- import { cva } from 'class-variance-authority';
6
- import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
7
- import { Check, Copy, Download, Search, ArrowUp, ArrowDown, ArrowUpDown, Columns3, CalendarIcon, ChevronDownIcon, Minus, ChevronRight, XIcon, LoaderIcon, CheckIcon, ChevronDown, X } from 'lucide-react';
8
- import * as echarts from 'echarts';
9
- import { flexRender, useReactTable, getPaginationRowModel, getFilteredRowModel, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
10
- import { format, endOfDay, startOfDay, subDays, startOfMonth, subMonths, endOfMonth } from 'date-fns';
11
- import { ja } from 'date-fns/locale';
12
-
13
- // @squadbase/vantage — generated build. Do not edit.
14
- var PageShell = forwardRef(
15
- ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, "data-slot": "page-shell", className: cn("flex flex-col", className), ...props })
16
- );
17
- PageShell.displayName = "PageShell";
18
- var PageShellHeader = forwardRef(
19
- ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
20
- "div",
21
- {
22
- ref,
23
- "data-slot": "page-shell-header",
24
- className: cn(
25
- "grid grid-cols-[1fr_auto] items-start gap-x-4 gap-y-6 border-b px-6 py-12",
26
- className
27
- ),
28
- ...props
29
- }
30
- )
31
- );
32
- PageShellHeader.displayName = "PageShellHeader";
33
- var PageShellHeading = forwardRef(
34
- ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, "data-slot": "page-shell-heading", className: cn("min-w-0", className), ...props })
35
- );
36
- PageShellHeading.displayName = "PageShellHeading";
37
- var PageShellTitle = forwardRef(
38
- ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
39
- "h1",
40
- {
41
- ref,
42
- "data-slot": "page-shell-title",
43
- className: cn("text-2xl font-bold tracking-tight text-foreground", className),
44
- ...props
45
- }
46
- )
47
- );
48
- PageShellTitle.displayName = "PageShellTitle";
49
- var PageShellDescription = forwardRef(
50
- ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
51
- "p",
52
- {
53
- ref,
54
- "data-slot": "page-shell-description",
55
- className: cn("mt-1 text-sm text-muted-foreground", className),
56
- ...props
57
- }
58
- )
59
- );
60
- PageShellDescription.displayName = "PageShellDescription";
61
- var PageShellHeaderEnd = forwardRef(
62
- ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
63
- "div",
64
- {
65
- ref,
66
- "data-slot": "page-shell-header-end",
67
- className: cn("flex shrink-0 flex-col items-end gap-2", className),
68
- ...props
69
- }
70
- )
71
- );
72
- PageShellHeaderEnd.displayName = "PageShellHeaderEnd";
73
- var PageShellMeta = forwardRef(
74
- ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
75
- "div",
76
- {
77
- ref,
78
- "data-slot": "page-shell-meta",
79
- className: cn("text-sm text-muted-foreground", className),
80
- ...props
81
- }
82
- )
83
- );
84
- PageShellMeta.displayName = "PageShellMeta";
85
- var PageShellActions = forwardRef(
86
- ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
87
- "div",
88
- {
89
- ref,
90
- "data-slot": "page-shell-actions",
91
- className: cn("flex items-center gap-2", className),
92
- ...props
93
- }
94
- )
95
- );
96
- PageShellActions.displayName = "PageShellActions";
97
- var PageShellSummary = forwardRef(
98
- ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
99
- "div",
100
- {
101
- ref,
102
- "data-slot": "page-shell-summary",
103
- className: cn(
104
- "col-span-full grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
105
- className
106
- ),
107
- ...props
108
- }
109
- )
110
- );
111
- PageShellSummary.displayName = "PageShellSummary";
112
- var pageShellSummaryCardVariants = cva(
113
- "relative flex items-start gap-3 rounded-lg border bg-background px-4 py-3 text-sm [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0",
114
- {
115
- variants: {
116
- accent: {
117
- default: "text-card-foreground",
118
- accent: "border-[var(--chart-1)]/30 bg-linear-to-r from-[var(--chart-1)]/5 to-[var(--chart-1)]/5 [&>svg]:text-[var(--chart-1)]",
119
- amber: "border-amber-300 bg-amber-50 [&>svg]:text-amber-600 dark:border-amber-800 dark:bg-amber-950/50 dark:[&>svg]:text-amber-400",
120
- blue: "border-blue-300 bg-blue-50 [&>svg]:text-blue-600 dark:border-blue-800 dark:bg-blue-950/50 dark:[&>svg]:text-blue-400",
121
- emerald: "border-emerald-300 bg-emerald-50 [&>svg]:text-emerald-600 dark:border-emerald-800 dark:bg-emerald-950/50 dark:[&>svg]:text-emerald-400",
122
- red: "border-red-300 bg-red-50 [&>svg]:text-red-600 dark:border-red-800 dark:bg-red-950/50 dark:[&>svg]:text-red-400",
123
- violet: "border-violet-300 bg-violet-50 [&>svg]:text-violet-600 dark:border-violet-800 dark:bg-violet-950/50 dark:[&>svg]:text-violet-400",
124
- orange: "border-orange-300 bg-orange-50 [&>svg]:text-orange-600 dark:border-orange-800 dark:bg-orange-950/50 dark:[&>svg]:text-orange-400",
125
- cyan: "border-cyan-300 bg-cyan-50 [&>svg]:text-cyan-600 dark:border-cyan-800 dark:bg-cyan-950/50 dark:[&>svg]:text-cyan-400",
126
- slate: "border-slate-300 bg-slate-50 [&>svg]:text-slate-600 dark:border-slate-800 dark:bg-slate-950/50 dark:[&>svg]:text-slate-400",
127
- green: "border-green-300 bg-green-50 [&>svg]:text-green-600 dark:border-green-800 dark:bg-green-950/50 dark:[&>svg]:text-green-400",
128
- teal: "border-teal-300 bg-teal-50 [&>svg]:text-teal-600 dark:border-teal-800 dark:bg-teal-950/50 dark:[&>svg]:text-teal-400",
129
- sky: "border-sky-300 bg-sky-50 [&>svg]:text-sky-600 dark:border-sky-800 dark:bg-sky-950/50 dark:[&>svg]:text-sky-400",
130
- indigo: "border-indigo-300 bg-indigo-50 [&>svg]:text-indigo-600 dark:border-indigo-800 dark:bg-indigo-950/50 dark:[&>svg]:text-indigo-400",
131
- purple: "border-purple-300 bg-purple-50 [&>svg]:text-purple-600 dark:border-purple-800 dark:bg-purple-950/50 dark:[&>svg]:text-purple-400",
132
- pink: "border-pink-300 bg-pink-50 [&>svg]:text-pink-600 dark:border-pink-800 dark:bg-pink-950/50 dark:[&>svg]:text-pink-400",
133
- rose: "border-rose-300 bg-rose-50 [&>svg]:text-rose-600 dark:border-rose-800 dark:bg-rose-950/50 dark:[&>svg]:text-rose-400",
134
- yellow: "border-yellow-300 bg-yellow-50 [&>svg]:text-yellow-600 dark:border-yellow-800 dark:bg-yellow-950/50 dark:[&>svg]:text-yellow-400",
135
- lime: "border-lime-300 bg-lime-50 [&>svg]:text-lime-600 dark:border-lime-800 dark:bg-lime-950/50 dark:[&>svg]:text-lime-400",
136
- gray: "border-gray-300 bg-gray-50 [&>svg]:text-gray-600 dark:border-gray-800 dark:bg-gray-950/50 dark:[&>svg]:text-gray-400",
137
- zinc: "border-zinc-300 bg-zinc-50 [&>svg]:text-zinc-600 dark:border-zinc-800 dark:bg-zinc-950/50 dark:[&>svg]:text-zinc-400",
138
- neutral: "border-neutral-300 bg-neutral-50 [&>svg]:text-neutral-600 dark:border-neutral-800 dark:bg-neutral-950/50 dark:[&>svg]:text-neutral-400",
139
- stone: "border-stone-300 bg-stone-50 [&>svg]:text-stone-600 dark:border-stone-800 dark:bg-stone-950/50 dark:[&>svg]:text-stone-400",
140
- fuchsia: "border-fuchsia-300 bg-fuchsia-50 [&>svg]:text-fuchsia-600 dark:border-fuchsia-800 dark:bg-fuchsia-950/50 dark:[&>svg]:text-fuchsia-400"
141
- }
142
- },
143
- defaultVariants: {
144
- accent: "default"
145
- }
146
- }
147
- );
148
- var PageShellSummaryCard = forwardRef(
149
- ({ className, accent, ...props }, ref) => /* @__PURE__ */ jsx(
150
- "div",
151
- {
152
- ref,
153
- "data-slot": "page-shell-summary-card",
154
- className: cn(pageShellSummaryCardVariants({ accent }), className),
155
- ...props
156
- }
157
- )
158
- );
159
- PageShellSummaryCard.displayName = "PageShellSummaryCard";
160
- var PageShellContent = forwardRef(
161
- ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
162
- "div",
163
- {
164
- ref,
165
- "data-slot": "page-shell-content",
166
- className: cn("flex-1 p-6", className),
167
- ...props
168
- }
169
- )
170
- );
171
- PageShellContent.displayName = "PageShellContent";
172
- function flattenItems(item) {
173
- if (item.children && item.children.length > 0) {
174
- return item.children.flatMap(flattenItems);
175
- }
176
- return [item];
177
- }
178
- function NavSelect({
179
- groups,
180
- onNavigate
181
- }) {
182
- const allItems = groups.flatMap((g) => g.items.flatMap(flattenItems));
183
- const currentValue = allItems.find((item) => item.isActive)?.href ?? "";
184
- return /* @__PURE__ */ jsxs(
185
- Select,
186
- {
187
- value: currentValue,
188
- onValueChange: (href) => {
189
- if (href !== null) onNavigate(href);
190
- },
191
- children: [
192
- /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "w-48", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "\u30DA\u30FC\u30B8\u3092\u9078\u629E" }) }),
193
- /* @__PURE__ */ jsx(
194
- SelectContent,
195
- {
196
- align: "start",
197
- className: "w-auto min-w-(--anchor-width) max-w-[min(24rem,var(--available-width))]",
198
- children: groups.map((group, index) => /* @__PURE__ */ jsxs(SelectGroup, { children: [
199
- group.label && /* @__PURE__ */ jsx(SelectLabel, { children: group.label }),
200
- group.items.flatMap(flattenItems).map((item) => /* @__PURE__ */ jsx(SelectItem, { value: item.href, disabled: item.disabled, children: item.label }, item.href))
201
- ] }, group.label ?? index))
202
- }
203
- )
204
- ]
205
- }
206
- );
207
- }
208
- function NavItemWithChildren({
209
- item,
210
- linkComponent: LinkComponent = "a"
211
- }) {
212
- return /* @__PURE__ */ jsxs(
213
- Collapsible,
214
- {
215
- defaultOpen: item.isActive,
216
- className: "group/collapsible",
217
- render: /* @__PURE__ */ jsx(SidebarMenuItem, {}),
218
- children: [
219
- /* @__PURE__ */ jsxs(
220
- CollapsibleTrigger,
221
- {
222
- render: /* @__PURE__ */ jsx(
223
- SidebarMenuButton,
224
- {
225
- tooltip: item.label,
226
- "aria-disabled": item.disabled,
227
- className: cn(item.disabled && "pointer-events-none")
228
- }
229
- ),
230
- children: [
231
- item.icon && /* @__PURE__ */ jsx(item.icon, {}),
232
- /* @__PURE__ */ jsx("span", { children: item.label }),
233
- /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto transition-transform duration-200 group-data-open/collapsible:rotate-90" })
234
- ]
235
- }
236
- ),
237
- item.badge && /* @__PURE__ */ jsx(SidebarMenuBadge, { children: item.badge }),
238
- /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(SidebarMenuSub, { children: item.children.map((child) => /* @__PURE__ */ jsx(SidebarMenuSubItem, { children: /* @__PURE__ */ jsxs(
239
- SidebarMenuSubButton,
240
- {
241
- isActive: child.isActive,
242
- render: /* @__PURE__ */ jsx(
243
- LinkComponent,
244
- {
245
- href: child.href,
246
- "aria-disabled": child.disabled,
247
- tabIndex: child.disabled ? -1 : void 0,
248
- className: cn(child.disabled && "pointer-events-none opacity-50")
249
- }
250
- ),
251
- children: [
252
- child.icon && /* @__PURE__ */ jsx(child.icon, {}),
253
- /* @__PURE__ */ jsx("span", { children: child.label })
254
- ]
255
- }
256
- ) }, child.href)) }) })
257
- ]
258
- }
259
- );
260
- }
261
- function NavItemLink({
262
- item,
263
- linkComponent: LinkComponent = "a"
264
- }) {
265
- return /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [
266
- /* @__PURE__ */ jsxs(
267
- SidebarMenuButton,
268
- {
269
- tooltip: item.label,
270
- isActive: item.isActive,
271
- render: /* @__PURE__ */ jsx(
272
- LinkComponent,
273
- {
274
- href: item.href,
275
- "aria-disabled": item.disabled,
276
- tabIndex: item.disabled ? -1 : void 0,
277
- className: cn(item.disabled && "pointer-events-none")
278
- }
279
- ),
280
- children: [
281
- item.icon && /* @__PURE__ */ jsx(item.icon, {}),
282
- /* @__PURE__ */ jsx("span", { children: item.label })
283
- ]
284
- }
285
- ),
286
- item.badge && /* @__PURE__ */ jsx(SidebarMenuBadge, { children: item.badge })
287
- ] });
288
- }
289
- var defaultNavigate = (href) => {
290
- window.location.assign(href);
291
- };
292
- var AppShell = forwardRef((props, ref) => {
293
- const {
294
- variant = "sidebar",
295
- groups,
296
- actions,
297
- header,
298
- children,
299
- className,
300
- linkComponent,
301
- onNavigate = defaultNavigate
302
- } = props;
303
- if (variant === "header") {
304
- return /* @__PURE__ */ jsxs("div", { ref, "data-slot": "app-shell", className: cn("flex h-full flex-col", className), children: [
305
- header !== void 0 ? header : /* @__PURE__ */ jsxs("header", { className: "flex h-14 shrink-0 items-center gap-3 border-b px-4", children: [
306
- groups.length > 0 && /* @__PURE__ */ jsx(NavSelect, { groups, onNavigate }),
307
- actions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-2", children: actions })
308
- ] }),
309
- /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-auto", children })
310
- ] });
311
- }
312
- const { defaultOpen = true } = props;
313
- return /* @__PURE__ */ jsxs(SidebarProvider, { defaultOpen, children: [
314
- /* @__PURE__ */ jsxs(Sidebar, { "data-slot": "app-sidebar", collapsible: "offcanvas", children: [
315
- /* @__PURE__ */ jsx(SidebarContent, { children: groups.map((group, index) => /* @__PURE__ */ jsxs(SidebarGroup, { children: [
316
- group.label && /* @__PURE__ */ jsx(SidebarGroupLabel, { children: group.label }),
317
- /* @__PURE__ */ jsx(SidebarMenu, { children: group.items.map(
318
- (item) => item.children && item.children.length > 0 ? /* @__PURE__ */ jsx(
319
- NavItemWithChildren,
320
- {
321
- item,
322
- linkComponent
323
- },
324
- item.href
325
- ) : /* @__PURE__ */ jsx(NavItemLink, { item, linkComponent }, item.href)
326
- ) })
327
- ] }, group.label ?? index)) }),
328
- actions && /* @__PURE__ */ jsx(SidebarFooter, { children: actions }),
329
- /* @__PURE__ */ jsx(SidebarRail, {})
330
- ] }),
331
- /* @__PURE__ */ jsxs(SidebarInset, { ref, "data-slot": "app-shell", className, children: [
332
- header !== void 0 ? header : /* @__PURE__ */ jsxs("header", { className: "flex h-14 shrink-0 items-center gap-2 border-b px-4", children: [
333
- /* @__PURE__ */ jsx(SidebarTrigger, {}),
334
- /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "h-4" })
335
- ] }),
336
- /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-auto", children })
337
- ] })
338
- ] });
339
- });
340
- AppShell.displayName = "AppShell";
341
- var headingStyles = {
342
- h1: "text-3xl font-bold tracking-tight",
343
- h2: "text-2xl font-semibold tracking-tight",
344
- h3: "text-xl font-semibold",
345
- h4: "text-lg font-semibold"
346
- };
347
- var SectionHeader = forwardRef(
348
- ({ title, description, actions, className, as: Comp = "h2" }, ref) => /* @__PURE__ */ jsxs(
349
- "div",
350
- {
351
- ref,
352
- "data-slot": "section-header",
353
- className: cn("flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between", className),
354
- children: [
355
- /* @__PURE__ */ jsxs("div", { children: [
356
- /* @__PURE__ */ jsx(Comp, { className: headingStyles[Comp], children: title }),
357
- description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
358
- ] }),
359
- actions && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: actions })
360
- ]
361
- }
362
- )
363
- );
364
- SectionHeader.displayName = "SectionHeader";
365
- var DashboardCard = forwardRef(
366
- ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
367
- "div",
368
- {
369
- ref,
370
- "data-slot": "dashboard-card",
371
- className: cn(
372
- "group rounded-lg border bg-card px-1 py-1 text-card-foreground",
373
- className
374
- ),
375
- ...props
376
- }
377
- )
378
- );
379
- DashboardCard.displayName = "DashboardCard";
380
- var DashboardCardHeader = forwardRef(
381
- ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
382
- "div",
383
- {
384
- ref,
385
- "data-slot": "dashboard-card-header",
386
- className: cn("flex flex-row items-start justify-between gap-4 px-3 py-3", className),
387
- ...props
388
- }
389
- )
390
- );
391
- DashboardCardHeader.displayName = "DashboardCardHeader";
392
- var DashboardCardTitle = forwardRef(
393
- ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
394
- "h3",
395
- {
396
- ref,
397
- "data-slot": "dashboard-card-title",
398
- className: cn("text-sm leading-none font-semibold tracking-tight", className),
399
- ...props
400
- }
401
- )
402
- );
403
- DashboardCardTitle.displayName = "DashboardCardTitle";
404
- var DashboardCardDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
405
- "p",
406
- {
407
- ref,
408
- "data-slot": "dashboard-card-description",
409
- className: cn("text-xs text-muted-foreground", className),
410
- ...props
411
- }
412
- ));
413
- DashboardCardDescription.displayName = "DashboardCardDescription";
414
- var DashboardCardAction = forwardRef(
415
- ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
416
- "div",
417
- {
418
- ref,
419
- "data-slot": "dashboard-card-action",
420
- className: cn("ml-auto shrink-0", className),
421
- ...props
422
- }
423
- )
424
- );
425
- DashboardCardAction.displayName = "DashboardCardAction";
426
- var DashboardCardContent = forwardRef(
427
- ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, "data-slot": "dashboard-card-content", className: cn("p-3", className), ...props })
428
- );
429
- DashboardCardContent.displayName = "DashboardCardContent";
430
- var DashboardCardFooter = forwardRef(
431
- ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
432
- "div",
433
- {
434
- ref,
435
- "data-slot": "dashboard-card-footer",
436
- className: cn("flex items-center px-3 py-1.5", className),
437
- ...props
438
- }
439
- )
440
- );
441
- DashboardCardFooter.displayName = "DashboardCardFooter";
442
- function DashboardCardSkeleton({ className }) {
443
- return /* @__PURE__ */ jsxs(
444
- "div",
445
- {
446
- "data-slot": "dashboard-card-skeleton",
447
- className: cn("rounded-lg border bg-card p-6 shadow-sm", className),
448
- children: [
449
- /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4 pb-4", children: [
450
- /* @__PURE__ */ jsx(Skeleton, { className: "h-5 w-32" }),
451
- /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-8 rounded-md" })
452
- ] }),
453
- /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }),
454
- /* @__PURE__ */ jsx(Skeleton, { className: "mt-2 h-4 w-3/4" })
455
- ]
456
- }
457
- );
458
- }
459
- function DashboardCardPreset({
460
- title,
461
- description,
462
- actions,
463
- footer,
464
- children,
465
- headerClassName,
466
- contentClassName,
467
- footerClassName,
468
- className,
469
- ...props
470
- }) {
471
- const hasHeader = title || description || actions;
472
- return /* @__PURE__ */ jsxs(DashboardCard, { className, ...props, children: [
473
- hasHeader && /* @__PURE__ */ jsxs(DashboardCardHeader, { className: headerClassName, children: [
474
- (title || description) && /* @__PURE__ */ jsxs("div", { children: [
475
- title && /* @__PURE__ */ jsx(DashboardCardTitle, { children: title }),
476
- description && /* @__PURE__ */ jsx(DashboardCardDescription, { children: description })
477
- ] }),
478
- actions && /* @__PURE__ */ jsx(DashboardCardAction, { children: actions })
479
- ] }),
480
- children && /* @__PURE__ */ jsx(DashboardCardContent, { className: contentClassName, children }),
481
- footer && /* @__PURE__ */ jsx(DashboardCardFooter, { className: footerClassName, children: footer })
482
- ] });
483
- }
484
-
485
- // src/components/chart-theme.ts
486
- var SERIES_TOKENS = ["--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5"];
487
- var normalizeContext;
488
- function toCanvasColor(value) {
489
- const raw = value.trim();
490
- if (!raw) return null;
491
- if (normalizeContext === void 0) {
492
- normalizeContext = document.createElement("canvas").getContext("2d");
493
- }
494
- const ctx = normalizeContext;
495
- if (!ctx) return raw;
496
- ctx.fillStyle = "#000000";
497
- ctx.fillStyle = raw;
498
- const onBlack = ctx.fillStyle;
499
- ctx.fillStyle = "#ffffff";
500
- ctx.fillStyle = raw;
501
- return onBlack === ctx.fillStyle ? onBlack : null;
502
- }
503
- function readChartTokens(el) {
504
- if (typeof document === "undefined") return null;
505
- const target = document.documentElement;
506
- if (!target) return null;
507
- const styles = getComputedStyle(target);
508
- const read = (name) => toCanvasColor(styles.getPropertyValue(name));
509
- const series = [];
510
- for (const token of SERIES_TOKENS) {
511
- const color = read(token);
512
- if (color) series.push(color);
513
- }
514
- return {
515
- series,
516
- foreground: read("--foreground"),
517
- mutedForeground: read("--muted-foreground"),
518
- border: read("--border"),
519
- popover: read("--popover"),
520
- popoverForeground: read("--popover-foreground")
521
- };
522
- }
523
- function sameChartTokens(a, b) {
524
- if (a === b) return true;
525
- if (!a || !b) return false;
526
- return a.series.length === b.series.length && a.series.every((color, i) => color === b.series[i]) && a.foreground === b.foreground && a.mutedForeground === b.mutedForeground && a.border === b.border && a.popover === b.popover && a.popoverForeground === b.popoverForeground;
527
- }
528
- function watchChartTokens(onChange) {
529
- if (typeof document === "undefined") return () => {
530
- };
531
- let frame = 0;
532
- const schedule = () => {
533
- if (frame) return;
534
- frame = requestAnimationFrame(() => {
535
- frame = 0;
536
- onChange();
537
- });
538
- };
539
- const themeObserver = new MutationObserver(schedule);
540
- const attributeFilter = ["class", "style", "data-theme"];
541
- themeObserver.observe(document.documentElement, { attributes: true, attributeFilter });
542
- if (document.body) themeObserver.observe(document.body, { attributes: true, attributeFilter });
543
- const styleObserver = new MutationObserver(schedule);
544
- if (document.head) {
545
- styleObserver.observe(document.head, {
546
- childList: true,
547
- subtree: true,
548
- characterData: true,
549
- attributes: true,
550
- attributeFilter: ["href", "media", "disabled"]
551
- });
552
- }
553
- const onLoad = (event) => {
554
- if (event.target instanceof HTMLLinkElement) schedule();
555
- };
556
- document.addEventListener("load", onLoad, true);
557
- const media = window.matchMedia("(prefers-color-scheme: dark)");
558
- media.addEventListener("change", schedule);
559
- return () => {
560
- if (frame) cancelAnimationFrame(frame);
561
- themeObserver.disconnect();
562
- styleObserver.disconnect();
563
- document.removeEventListener("load", onLoad, true);
564
- media.removeEventListener("change", schedule);
565
- };
566
- }
567
- function axisTheme(tokens, splitLine) {
568
- const line = tokens.border ?? void 0;
569
- return {
570
- axisLine: { show: true, lineStyle: { color: line } },
571
- axisTick: { show: true, lineStyle: { color: line } },
572
- axisLabel: { show: true, color: tokens.mutedForeground ?? void 0 },
573
- splitLine: { show: splitLine, lineStyle: { color: line ? [line] : void 0 } },
574
- splitArea: { show: false }
575
- };
576
- }
577
- function buildChartTheme(tokens) {
578
- const text = tokens.foreground ?? void 0;
579
- const muted = tokens.mutedForeground ?? void 0;
580
- const line = tokens.border ?? void 0;
581
- return {
582
- // Let the page background show through: charts sit on cards, not on a canvas.
583
- backgroundColor: "transparent",
584
- ...tokens.series.length > 0 ? { color: tokens.series } : {},
585
- textStyle: { color: text },
586
- title: { textStyle: { color: text }, subtextStyle: { color: muted } },
587
- legend: { textStyle: { color: muted } },
588
- categoryAxis: axisTheme(tokens, false),
589
- valueAxis: axisTheme(tokens, true),
590
- logAxis: axisTheme(tokens, true),
591
- timeAxis: axisTheme(tokens, true),
592
- tooltip: {
593
- backgroundColor: tokens.popover ?? void 0,
594
- borderColor: line,
595
- borderWidth: 1,
596
- textStyle: { color: tokens.popoverForeground ?? void 0 },
597
- axisPointer: { lineStyle: { color: line }, crossStyle: { color: line } }
598
- }
599
- };
600
- }
601
- var EChart = forwardRef(function EChart2({
602
- option,
603
- height,
604
- loading = false,
605
- theme,
606
- onEvents,
607
- ariaLabel,
608
- className,
609
- actions = false,
610
- fileName = "chart.png"
611
- }, ref) {
612
- const containerRef = useRef(null);
613
- const [instance, setInstance] = useState(null);
614
- const [copied, setCopied] = useState(false);
615
- const [tokens, setTokens] = useState(() => readChartTokens());
616
- useEffect(() => {
617
- if (theme !== void 0) return;
618
- const sync = () => {
619
- setTokens((prev) => {
620
- const next = readChartTokens();
621
- return sameChartTokens(prev, next) ? prev : next;
622
- });
623
- };
624
- sync();
625
- return watchChartTokens(sync);
626
- }, [theme]);
627
- const autoTheme = useMemo(() => tokens ? buildChartTheme(tokens) : void 0, [tokens]);
628
- const resolvedTheme = theme ?? autoTheme;
629
- useEffect(() => {
630
- const container = containerRef.current;
631
- if (!container) return;
632
- const inst = echarts.init(container, resolvedTheme, { renderer: "canvas" });
633
- container.dataset.rendering = "";
634
- inst.on("finished", () => {
635
- delete container.dataset.rendering;
636
- });
637
- setInstance(inst);
638
- const observer = new ResizeObserver(() => inst.resize());
639
- observer.observe(container);
640
- return () => {
641
- observer.disconnect();
642
- inst.dispose();
643
- };
644
- }, [resolvedTheme]);
645
- useEffect(() => {
646
- if (!instance) return;
647
- if (containerRef.current) containerRef.current.dataset.rendering = "";
648
- instance.setOption(option, { notMerge: true, lazyUpdate: true });
649
- }, [instance, option]);
650
- useEffect(() => {
651
- if (!instance) return;
652
- if (loading) instance.showLoading();
653
- else instance.hideLoading();
654
- }, [instance, loading]);
655
- useEffect(() => {
656
- if (!instance || !onEvents) return;
657
- const entries = Object.entries(onEvents);
658
- for (const [event, handler] of entries) {
659
- instance.on(event, handler);
660
- }
661
- return () => {
662
- if (instance.isDisposed()) return;
663
- for (const [event, handler] of entries) {
664
- instance.off(event, handler);
665
- }
666
- };
667
- }, [instance, onEvents]);
668
- const getPngDataUrl = useCallback(() => {
669
- if (!instance) return null;
670
- const pageBg = getComputedStyle(document.documentElement).backgroundColor;
671
- return instance.getDataURL({
672
- type: "png",
673
- pixelRatio: 2,
674
- backgroundColor: pageBg && pageBg !== "rgba(0, 0, 0, 0)" ? pageBg : "#ffffff"
675
- });
676
- }, [instance]);
677
- const handleCopy = useCallback(async () => {
678
- const dataUrl = getPngDataUrl();
679
- if (!dataUrl) return;
680
- try {
681
- const blob = await (await fetch(dataUrl)).blob();
682
- await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
683
- setCopied(true);
684
- setTimeout(() => setCopied(false), 2e3);
685
- } catch {
686
- }
687
- }, [getPngDataUrl]);
688
- const handleDownload = useCallback(() => {
689
- const dataUrl = getPngDataUrl();
690
- if (!dataUrl) return;
691
- const link = document.createElement("a");
692
- link.href = dataUrl;
693
- link.download = fileName;
694
- link.click();
695
- }, [getPngDataUrl, fileName]);
696
- const styleHeight = height == null ? void 0 : typeof height === "number" ? `${height}px` : height;
697
- return /* @__PURE__ */ jsxs(
698
- "div",
699
- {
700
- ref,
701
- "data-slot": "echart",
702
- className: cn("group relative w-full", height == null && "h-[400px]", className),
703
- style: styleHeight != null ? { height: styleHeight } : void 0,
704
- role: "img",
705
- "aria-label": ariaLabel ?? "\u30C1\u30E3\u30FC\u30C8",
706
- children: [
707
- /* @__PURE__ */ jsx("div", { ref: containerRef, "data-slot": "echart-canvas", className: "h-full w-full" }),
708
- actions && /* @__PURE__ */ jsxs(
709
- "div",
710
- {
711
- "data-slot": "echart-actions",
712
- className: "absolute top-2 right-2 z-10 flex gap-1 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100",
713
- children: [
714
- /* @__PURE__ */ jsx(
715
- Button,
716
- {
717
- type: "button",
718
- variant: "ghost",
719
- size: "icon-sm",
720
- onClick: handleCopy,
721
- "aria-label": copied ? "\u30B3\u30D4\u30FC\u3057\u307E\u3057\u305F" : "PNG \u3092\u30AF\u30EA\u30C3\u30D7\u30DC\u30FC\u30C9\u306B\u30B3\u30D4\u30FC",
722
- children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-4" }) : /* @__PURE__ */ jsx(Copy, { className: "size-4" })
723
- }
724
- ),
725
- /* @__PURE__ */ jsx(
726
- Button,
727
- {
728
- type: "button",
729
- variant: "ghost",
730
- size: "icon-sm",
731
- onClick: handleDownload,
732
- "aria-label": "PNG \u3092\u30C0\u30A6\u30F3\u30ED\u30FC\u30C9",
733
- children: /* @__PURE__ */ jsx(Download, { className: "size-4" })
734
- }
735
- )
736
- ]
737
- }
738
- )
739
- ]
740
- }
741
- );
742
- });
743
- EChart.displayName = "EChart";
744
- var DEFAULT_COLORS = [
745
- "bg-chart-1",
746
- "bg-chart-2",
747
- "bg-chart-3",
748
- "bg-chart-4",
749
- "bg-chart-5"
750
- ];
751
- var funnelStepsVariants = cva("flex w-full", {
752
- variants: {
753
- size: {
754
- sm: "",
755
- md: "",
756
- lg: ""
757
- },
758
- direction: {
759
- vertical: "flex-col",
760
- horizontal: "flex-row"
761
- }
762
- },
763
- compoundVariants: [
764
- { direction: "vertical", size: "sm", className: "gap-1" },
765
- { direction: "vertical", size: "md", className: "gap-1.5" },
766
- { direction: "vertical", size: "lg", className: "gap-2" },
767
- { direction: "horizontal", size: "sm", className: "gap-2" },
768
- { direction: "horizontal", size: "md", className: "gap-3" },
769
- { direction: "horizontal", size: "lg", className: "gap-4" }
770
- ],
771
- defaultVariants: {
772
- size: "md",
773
- direction: "vertical"
774
- }
775
- });
776
- var funnelBarVariants = cva("rounded-sm transition-[width] ease-out", {
777
- variants: {
778
- size: {
779
- sm: "h-6",
780
- md: "h-8",
781
- lg: "h-10"
782
- }
783
- },
784
- defaultVariants: {
785
- size: "md"
786
- }
787
- });
788
- var funnelBarContainerHorizontalVariants = cva(
789
- "relative flex w-full items-end overflow-hidden rounded-sm bg-muted",
790
- {
791
- variants: {
792
- size: {
793
- sm: "h-20",
794
- md: "h-28",
795
- lg: "h-36"
796
- }
797
- },
798
- defaultVariants: {
799
- size: "md"
800
- }
801
- }
802
- );
803
- var funnelLabelVariants = cva("flex w-full items-center justify-between text-muted-foreground", {
804
- variants: {
805
- size: {
806
- sm: "text-xs",
807
- md: "text-sm",
808
- lg: "text-sm"
809
- }
810
- },
811
- defaultVariants: {
812
- size: "md"
813
- }
814
- });
815
- var funnelConversionVariants = cva("flex items-center text-muted-foreground", {
816
- variants: {
817
- size: {
818
- sm: "text-[10px]",
819
- md: "text-xs",
820
- lg: "text-xs"
821
- },
822
- direction: {
823
- vertical: "justify-end",
824
- horizontal: "shrink-0 justify-center self-center"
825
- }
826
- },
827
- compoundVariants: [
828
- { direction: "vertical", size: "sm", className: "py-0" },
829
- { direction: "vertical", size: "md", className: "py-0.5" },
830
- { direction: "vertical", size: "lg", className: "py-0.5" }
831
- ],
832
- defaultVariants: {
833
- size: "md",
834
- direction: "vertical"
835
- }
836
- });
837
- function defaultFormatValue(value) {
838
- return value.toLocaleString();
839
- }
840
- function computeConversionRate(current, previous) {
841
- if (previous === 0) return "--";
842
- return `${(current / previous * 100).toFixed(1)}%`;
843
- }
844
- var FunnelSteps = forwardRef(function FunnelSteps2({
845
- data,
846
- showConversion = false,
847
- formatValue = defaultFormatValue,
848
- animate = false,
849
- size = "md",
850
- direction = "vertical",
851
- className,
852
- ...props
853
- }, ref) {
854
- const [mounted, setMounted] = useState(false);
855
- const isHorizontal = direction === "horizontal";
856
- useEffect(() => {
857
- if (animate) setMounted(true);
858
- }, [animate]);
859
- const maxValue = data.length > 0 ? data[0].value : 0;
860
- return /* @__PURE__ */ jsx(
861
- "div",
862
- {
863
- ref,
864
- "data-slot": "funnel-steps",
865
- role: "list",
866
- "aria-label": "\u30D5\u30A1\u30CD\u30EB",
867
- className: cn(funnelStepsVariants({ size, direction }), className),
868
- ...props,
869
- children: data.map((step, index) => {
870
- const percentage = maxValue > 0 ? step.value / maxValue * 100 : 0;
871
- const barSize = step.value > 0 && percentage < 2 ? 2 : percentage;
872
- const color = step.color ?? DEFAULT_COLORS[index % DEFAULT_COLORS.length];
873
- const isClickable = !!step.onClick;
874
- const barInteractionProps = isClickable ? {
875
- role: "button",
876
- tabIndex: 0,
877
- onClick: step.onClick,
878
- onKeyDown: (e) => {
879
- if (e.key === "Enter" || e.key === " ") {
880
- e.preventDefault();
881
- step.onClick?.();
882
- }
883
- }
884
- } : {};
885
- const barInteractionClasses = isClickable ? "cursor-pointer hover:brightness-110 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none" : void 0;
886
- return /* @__PURE__ */ jsxs(Fragment, { children: [
887
- isHorizontal ? /* @__PURE__ */ jsxs(
888
- "div",
889
- {
890
- role: "listitem",
891
- className: "flex min-w-0 flex-1 flex-col items-center gap-1",
892
- "aria-label": `${step.label}: ${formatValue(step.value)}`,
893
- children: [
894
- /* @__PURE__ */ jsx(
895
- "span",
896
- {
897
- "data-slot": "funnel-value",
898
- className: cn(
899
- "text-muted-foreground tabular-nums",
900
- size === "sm" ? "text-xs" : "text-sm"
901
- ),
902
- children: formatValue(step.value)
903
- }
904
- ),
905
- /* @__PURE__ */ jsx("div", { className: funnelBarContainerHorizontalVariants({ size }), children: /* @__PURE__ */ jsx(
906
- "div",
907
- {
908
- ...barInteractionProps,
909
- className: cn(
910
- "w-full rounded-sm transition-[height] ease-out",
911
- color,
912
- barInteractionClasses
913
- ),
914
- style: {
915
- height: animate ? mounted ? `${barSize}%` : "0%" : `${barSize}%`,
916
- transitionDuration: "0.5s",
917
- transitionDelay: animate ? `${index * 0.08}s` : void 0
918
- }
919
- }
920
- ) }),
921
- /* @__PURE__ */ jsx(
922
- "span",
923
- {
924
- className: cn(
925
- "w-full truncate text-center text-muted-foreground",
926
- size === "sm" ? "text-[10px]" : "text-xs"
927
- ),
928
- children: step.label
929
- }
930
- )
931
- ]
932
- }
933
- ) : /* @__PURE__ */ jsxs("div", { role: "listitem", "aria-label": `${step.label}: ${formatValue(step.value)}`, children: [
934
- /* @__PURE__ */ jsxs("div", { className: funnelLabelVariants({ size }), children: [
935
- /* @__PURE__ */ jsx("span", { className: "truncate", children: step.label }),
936
- /* @__PURE__ */ jsx("span", { "data-slot": "funnel-value", className: "tabular-nums", children: formatValue(step.value) })
937
- ] }),
938
- /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-hidden rounded-sm bg-muted", children: /* @__PURE__ */ jsx(
939
- "div",
940
- {
941
- ...barInteractionProps,
942
- className: cn(funnelBarVariants({ size }), color, barInteractionClasses),
943
- style: {
944
- width: animate ? mounted ? `${barSize}%` : "0%" : `${barSize}%`,
945
- transitionDuration: "0.5s",
946
- transitionDelay: animate ? `${index * 0.08}s` : void 0
947
- }
948
- }
949
- ) })
950
- ] }),
951
- showConversion && index < data.length - 1 && /* @__PURE__ */ jsx("div", { className: funnelConversionVariants({ size, direction }), "aria-hidden": "true", children: /* @__PURE__ */ jsxs("span", { children: [
952
- "\u2192 ",
953
- computeConversionRate(data[index + 1].value, step.value)
954
- ] }) })
955
- ] }, index);
956
- })
957
- }
958
- );
959
- });
960
- FunnelSteps.displayName = "FunnelSteps";
961
- var VB_WIDTH = 100;
962
- function normalizeData(values, height, vPad = 2) {
963
- const min = Math.min(...values);
964
- const max = Math.max(...values);
965
- const range = max - min;
966
- const drawHeight = height - vPad * 2;
967
- if (range === 0) return values.map(() => vPad + drawHeight / 2);
968
- return values.map((v) => height - vPad - (v - min) / range * drawHeight);
969
- }
970
- function buildLinePath(ys) {
971
- if (ys.length === 0) return "";
972
- const step = ys.length > 1 ? VB_WIDTH / (ys.length - 1) : 0;
973
- return ys.map((y, i) => `${i === 0 ? "M" : "L"}${(i * step).toFixed(2)},${y.toFixed(2)}`).join(" ");
974
- }
975
- function buildAreaPath(ys, height) {
976
- if (ys.length === 0) return "";
977
- const step = ys.length > 1 ? VB_WIDTH / (ys.length - 1) : 0;
978
- const lastX = ((ys.length - 1) * step).toFixed(2);
979
- return `${buildLinePath(ys)} L${lastX},${height} L0,${height} Z`;
980
- }
981
- function buildBarRects(ys, height, gap = 1) {
982
- const barW = Math.max(1, VB_WIDTH / ys.length - gap);
983
- return ys.map((y, i) => ({ x: i * (barW + gap), y, w: barW, h: height - y }));
984
- }
985
- var Sparkline = forwardRef(function Sparkline2({
986
- data,
987
- variant = "line",
988
- height = 40,
989
- color = "text-chart-1",
990
- area = false,
991
- animate = false,
992
- className,
993
- ...props
994
- }, ref) {
995
- const [mounted, setMounted] = useState(false);
996
- useEffect(() => {
997
- if (animate) setMounted(true);
998
- }, [animate]);
999
- if (data.length === 0) return null;
1000
- const ys = normalizeData(
1001
- data.map((d) => d.value),
1002
- height
1003
- );
1004
- return /* @__PURE__ */ jsxs(
1005
- "svg",
1006
- {
1007
- ref,
1008
- "data-slot": "sparkline",
1009
- viewBox: `0 0 ${VB_WIDTH} ${height}`,
1010
- preserveAspectRatio: "none",
1011
- width: "100%",
1012
- height,
1013
- "aria-hidden": "true",
1014
- className: cn("overflow-visible", className),
1015
- ...props,
1016
- children: [
1017
- variant === "line" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
1018
- area && /* @__PURE__ */ jsx(
1019
- "path",
1020
- {
1021
- d: buildAreaPath(ys, height),
1022
- strokeWidth: 0,
1023
- className: cn("fill-current opacity-15", color)
1024
- }
1025
- ),
1026
- /* @__PURE__ */ jsx(
1027
- "path",
1028
- {
1029
- d: buildLinePath(ys),
1030
- fill: "none",
1031
- strokeWidth: 1.5,
1032
- strokeLinecap: "round",
1033
- strokeLinejoin: "round",
1034
- vectorEffect: "non-scaling-stroke",
1035
- pathLength: animate ? 1 : void 0,
1036
- strokeDasharray: animate ? 1 : void 0,
1037
- strokeDashoffset: animate ? mounted ? 0 : 1 : void 0,
1038
- className: cn("stroke-current", color),
1039
- style: animate ? { transition: "stroke-dashoffset 0.6s ease-in-out" } : void 0
1040
- }
1041
- )
1042
- ] }),
1043
- variant === "bar" && buildBarRects(ys, height).map((rect, i) => /* @__PURE__ */ jsx(
1044
- "rect",
1045
- {
1046
- x: rect.x,
1047
- y: animate ? mounted ? rect.y : height : rect.y,
1048
- width: rect.w,
1049
- height: animate ? mounted ? rect.h : 0 : rect.h,
1050
- rx: 0.5,
1051
- className: cn("fill-current", color),
1052
- style: animate ? {
1053
- transition: `height 0.4s ease-out ${i * 0.02}s, y 0.4s ease-out ${i * 0.02}s`
1054
- } : void 0
1055
- },
1056
- i
1057
- ))
1058
- ]
1059
- }
1060
- );
1061
- });
1062
- Sparkline.displayName = "Sparkline";
1063
- function useControlledState(controlledValue, defaultValue, onChange) {
1064
- const [internalValue, setInternalValue] = useState(defaultValue);
1065
- const isControlled = controlledValue !== void 0;
1066
- const value = isControlled ? controlledValue : internalValue;
1067
- const setValue = useCallback(
1068
- (updaterOrValue) => {
1069
- onChange?.(updaterOrValue);
1070
- if (!isControlled) {
1071
- setInternalValue(updaterOrValue);
1072
- }
1073
- },
1074
- [onChange, isControlled]
1075
- );
1076
- return [value, setValue];
1077
- }
1078
- var DataTableContext = createContext(null);
1079
- function useDataTable() {
1080
- const ctx = useContext(DataTableContext);
1081
- if (!ctx) throw new Error("useDataTable must be used inside <DataTable>");
1082
- return ctx;
1083
- }
1084
- function DataTable({
1085
- columns,
1086
- data,
1087
- enableSorting = true,
1088
- sorting: sortingProp,
1089
- onSortingChange,
1090
- enableFiltering = false,
1091
- columnFilters: columnFiltersProp,
1092
- onColumnFiltersChange,
1093
- globalFilter: globalFilterProp,
1094
- onGlobalFilterChange,
1095
- enablePagination = false,
1096
- pagination: paginationProp,
1097
- onPaginationChange,
1098
- pageCount,
1099
- enableRowSelection = false,
1100
- rowSelection: rowSelectionProp,
1101
- onRowSelectionChange,
1102
- columnVisibility: columnVisibilityProp,
1103
- onColumnVisibilityChange,
1104
- meta,
1105
- className,
1106
- children
1107
- }) {
1108
- const [sorting, setSorting] = useControlledState(sortingProp, [], onSortingChange);
1109
- const [columnFilters, setColumnFilters] = useControlledState(
1110
- columnFiltersProp,
1111
- [],
1112
- onColumnFiltersChange
1113
- );
1114
- const [globalFilter, setGlobalFilter] = useControlledState(
1115
- globalFilterProp,
1116
- "",
1117
- onGlobalFilterChange
1118
- );
1119
- const [rowSelection, setRowSelection] = useControlledState(
1120
- rowSelectionProp,
1121
- {},
1122
- onRowSelectionChange
1123
- );
1124
- const [columnVisibility, setColumnVisibility] = useControlledState(
1125
- columnVisibilityProp,
1126
- {},
1127
- onColumnVisibilityChange
1128
- );
1129
- const [pagination, setPagination] = useControlledState(
1130
- paginationProp,
1131
- { pageIndex: 0, pageSize: 10 },
1132
- onPaginationChange
1133
- );
1134
- const allColumns = useMemo(() => {
1135
- if (!enableRowSelection) return columns;
1136
- const selectionColumn = {
1137
- id: "_select",
1138
- header: ({ table: table2 }) => /* @__PURE__ */ jsx(
1139
- Checkbox,
1140
- {
1141
- checked: table2.getIsAllPageRowsSelected(),
1142
- indeterminate: table2.getIsSomePageRowsSelected(),
1143
- onCheckedChange: (checked) => table2.toggleAllPageRowsSelected(checked),
1144
- "aria-label": "\u5168\u3066\u9078\u629E"
1145
- }
1146
- ),
1147
- cell: ({ row }) => /* @__PURE__ */ jsx(
1148
- Checkbox,
1149
- {
1150
- checked: row.getIsSelected(),
1151
- onCheckedChange: (checked) => row.toggleSelected(checked),
1152
- "aria-label": "\u884C\u3092\u9078\u629E"
1153
- }
1154
- ),
1155
- enableSorting: false,
1156
- enableHiding: false
1157
- };
1158
- return [selectionColumn, ...columns];
1159
- }, [columns, enableRowSelection]);
1160
- const table = useReactTable({
1161
- data,
1162
- columns: allColumns,
1163
- state: {
1164
- sorting,
1165
- columnFilters,
1166
- globalFilter,
1167
- rowSelection,
1168
- columnVisibility,
1169
- ...enablePagination ? { pagination } : {}
1170
- },
1171
- enableSorting,
1172
- enableRowSelection,
1173
- onSortingChange: setSorting,
1174
- onColumnFiltersChange: setColumnFilters,
1175
- onGlobalFilterChange: setGlobalFilter,
1176
- onRowSelectionChange: setRowSelection,
1177
- onColumnVisibilityChange: setColumnVisibility,
1178
- ...enablePagination ? { onPaginationChange: setPagination } : {},
1179
- ...pageCount !== void 0 ? { pageCount, manualPagination: true } : {},
1180
- getCoreRowModel: getCoreRowModel(),
1181
- getSortedRowModel: getSortedRowModel(),
1182
- getFilteredRowModel: getFilteredRowModel(),
1183
- ...enablePagination ? { getPaginationRowModel: getPaginationRowModel() } : {},
1184
- meta
1185
- });
1186
- const selectedRows = useMemo(
1187
- () => table.getFilteredSelectedRowModel().rows.map((row) => row.original),
1188
- // `table` is a stable reference, so the selection state is the real input.
1189
- // eslint-disable-next-line react-hooks/exhaustive-deps
1190
- [rowSelection, data]
1191
- );
1192
- const hasSelection = selectedRows.length > 0;
1193
- const contextValue = useMemo(
1194
- () => ({
1195
- table,
1196
- selectedRows,
1197
- hasSelection,
1198
- globalFilter,
1199
- setGlobalFilter,
1200
- enableFiltering,
1201
- enablePagination,
1202
- enableRowSelection,
1203
- visibleColumnCount: allColumns.length
1204
- }),
1205
- // `useReactTable` returns the same object every render, so each piece of
1206
- // table state has to be tracked explicitly to re-render the consumers.
1207
- // eslint-disable-next-line react-hooks/exhaustive-deps
1208
- [
1209
- table,
1210
- selectedRows,
1211
- hasSelection,
1212
- globalFilter,
1213
- setGlobalFilter,
1214
- enableFiltering,
1215
- enablePagination,
1216
- enableRowSelection,
1217
- allColumns.length,
1218
- sorting,
1219
- columnFilters,
1220
- columnVisibility,
1221
- pagination,
1222
- rowSelection
1223
- ]
1224
- );
1225
- return /* @__PURE__ */ jsx(DataTableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { "data-slot": "data-table", className: cn("space-y-4", className), children }) });
1226
- }
1227
- DataTable.displayName = "DataTable";
1228
- var DataTableToolbar = forwardRef(
1229
- ({ showSearch, toolbar, bulkActions, className, ...props }, ref) => {
1230
- const { globalFilter, setGlobalFilter, hasSelection, selectedRows, enableFiltering } = useDataTable();
1231
- const showSearchEffective = showSearch ?? enableFiltering;
1232
- const hasContent = showSearchEffective || toolbar != null || hasSelection && bulkActions != null;
1233
- if (!hasContent) return null;
1234
- return /* @__PURE__ */ jsxs(
1235
- "div",
1236
- {
1237
- ref,
1238
- "data-slot": "data-table-toolbar",
1239
- className: cn("flex flex-wrap items-center gap-2", className),
1240
- ...props,
1241
- children: [
1242
- showSearchEffective && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
1243
- /* @__PURE__ */ jsx(Search, { className: "absolute top-2.5 left-2.5 size-4 text-muted-foreground" }),
1244
- /* @__PURE__ */ jsx(
1245
- Input,
1246
- {
1247
- value: globalFilter,
1248
- onChange: (e) => setGlobalFilter(e.target.value),
1249
- className: "max-w-sm pl-8"
1250
- }
1251
- )
1252
- ] }),
1253
- toolbar,
1254
- hasSelection && bulkActions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-2", children: bulkActions(selectedRows) })
1255
- ]
1256
- }
1257
- );
1258
- }
1259
- );
1260
- DataTableToolbar.displayName = "DataTableToolbar";
1261
- var DataTableContent = forwardRef(
1262
- ({ className, ...props }, ref) => {
1263
- const { table, visibleColumnCount } = useDataTable();
1264
- return /* @__PURE__ */ jsx(
1265
- "div",
1266
- {
1267
- ref,
1268
- "data-slot": "data-table-content",
1269
- className: cn("overflow-x-auto", className),
1270
- ...props,
1271
- children: /* @__PURE__ */ jsxs(Table, { children: [
1272
- /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(TableHead, { children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsxs(
1273
- "button",
1274
- {
1275
- type: "button",
1276
- className: "inline-flex items-center gap-1 rounded hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none",
1277
- onClick: header.column.getToggleSortingHandler(),
1278
- "aria-sort": header.column.getIsSorted() === "asc" ? "ascending" : header.column.getIsSorted() === "desc" ? "descending" : "none",
1279
- children: [
1280
- flexRender(header.column.columnDef.header, header.getContext()),
1281
- header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "size-4" }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "size-4" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "size-4 text-muted-foreground" })
1282
- ]
1283
- }
1284
- ) : flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }, headerGroup.id)) }),
1285
- /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, { "data-state": row.getIsSelected() ? "selected" : void 0, children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
1286
- TableCell,
1287
- {
1288
- colSpan: visibleColumnCount,
1289
- className: "h-24 text-center text-muted-foreground",
1290
- children: "\u30C7\u30FC\u30BF\u304C\u3042\u308A\u307E\u305B\u3093"
1291
- }
1292
- ) }) })
1293
- ] })
1294
- }
1295
- );
1296
- }
1297
- );
1298
- DataTableContent.displayName = "DataTableContent";
1299
- var DataTablePagination = forwardRef(
1300
- ({ pageSizeOptions = [10, 20, 50], className, ...props }, ref) => {
1301
- const { table } = useDataTable();
1302
- const totalRows = table.getFilteredRowModel().rows.length;
1303
- const currentPageSize = table.getState().pagination.pageSize;
1304
- const currentPageIndex = table.getState().pagination.pageIndex;
1305
- const rangeStart = currentPageIndex * currentPageSize + 1;
1306
- const rangeEnd = Math.min((currentPageIndex + 1) * currentPageSize, totalRows);
1307
- return /* @__PURE__ */ jsxs(
1308
- "div",
1309
- {
1310
- ref,
1311
- "data-slot": "data-table-pagination",
1312
- className: cn("flex flex-wrap items-center justify-between gap-4", className),
1313
- ...props,
1314
- children: [
1315
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
1316
- /* @__PURE__ */ jsxs("span", { children: [
1317
- totalRows,
1318
- "\u4EF6\u4E2D ",
1319
- rangeStart,
1320
- " - ",
1321
- rangeEnd,
1322
- " \u3092\u8868\u793A"
1323
- ] }),
1324
- /* @__PURE__ */ jsxs(
1325
- Select,
1326
- {
1327
- value: String(currentPageSize),
1328
- onValueChange: (value) => table.setPageSize(Number(value)),
1329
- children: [
1330
- /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "w-[80px]", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
1331
- /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((size) => /* @__PURE__ */ jsxs(SelectItem, { value: String(size), children: [
1332
- size,
1333
- "\u4EF6"
1334
- ] }, size)) })
1335
- ]
1336
- }
1337
- )
1338
- ] }),
1339
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
1340
- /* @__PURE__ */ jsx(
1341
- Button,
1342
- {
1343
- variant: "outline",
1344
- size: "sm",
1345
- onClick: () => table.firstPage(),
1346
- disabled: !table.getCanPreviousPage(),
1347
- children: "\u6700\u521D"
1348
- }
1349
- ),
1350
- /* @__PURE__ */ jsx(
1351
- Button,
1352
- {
1353
- variant: "outline",
1354
- size: "sm",
1355
- onClick: () => table.previousPage(),
1356
- disabled: !table.getCanPreviousPage(),
1357
- children: "\u524D\u3078"
1358
- }
1359
- ),
1360
- /* @__PURE__ */ jsx(
1361
- Button,
1362
- {
1363
- variant: "outline",
1364
- size: "sm",
1365
- onClick: () => table.nextPage(),
1366
- disabled: !table.getCanNextPage(),
1367
- children: "\u6B21\u3078"
1368
- }
1369
- ),
1370
- /* @__PURE__ */ jsx(
1371
- Button,
1372
- {
1373
- variant: "outline",
1374
- size: "sm",
1375
- onClick: () => table.lastPage(),
1376
- disabled: !table.getCanNextPage(),
1377
- children: "\u6700\u5F8C"
1378
- }
1379
- )
1380
- ] })
1381
- ]
1382
- }
1383
- );
1384
- }
1385
- );
1386
- DataTablePagination.displayName = "DataTablePagination";
1387
- var DataTableColumnVisibility = forwardRef(({ columnLabels, className }, ref) => {
1388
- const { table } = useDataTable();
1389
- const hideableColumns = table.getAllColumns().filter((column) => column.getCanHide());
1390
- if (hideableColumns.length === 0) return null;
1391
- return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
1392
- /* @__PURE__ */ jsx(
1393
- DropdownMenuTrigger,
1394
- {
1395
- ref,
1396
- render: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", className: cn(className) }),
1397
- "data-slot": "data-table-column-visibility",
1398
- children: /* @__PURE__ */ jsx(Columns3, { className: "size-4" })
1399
- }
1400
- ),
1401
- /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", className: "min-w-[10rem]", children: hideableColumns.map((column) => {
1402
- const label = columnLabels?.[column.id] ?? (typeof column.columnDef.header === "string" ? column.columnDef.header : column.id);
1403
- return /* @__PURE__ */ jsx(
1404
- DropdownMenuCheckboxItem,
1405
- {
1406
- checked: column.getIsVisible(),
1407
- onCheckedChange: (checked) => column.toggleVisibility(checked),
1408
- children: label
1409
- },
1410
- column.id
1411
- );
1412
- }) })
1413
- ] });
1414
- });
1415
- DataTableColumnVisibility.displayName = "DataTableColumnVisibility";
1416
- function DataTablePreset({
1417
- enableColumnVisibility = false,
1418
- columnLabels,
1419
- toolbar,
1420
- bulkActions,
1421
- ...tableProps
1422
- }) {
1423
- const toolbarSlot = toolbar || enableColumnVisibility ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
1424
- toolbar,
1425
- enableColumnVisibility && /* @__PURE__ */ jsx(DataTableColumnVisibility, { columnLabels })
1426
- ] }) : void 0;
1427
- return /* @__PURE__ */ jsxs(DataTable, { ...tableProps, children: [
1428
- /* @__PURE__ */ jsx(
1429
- DataTableToolbar,
1430
- {
1431
- showSearch: tableProps.enableFiltering,
1432
- toolbar: toolbarSlot,
1433
- bulkActions
1434
- }
1435
- ),
1436
- /* @__PURE__ */ jsx(DataTableContent, {}),
1437
- tableProps.enablePagination && /* @__PURE__ */ jsx(DataTablePagination, {})
1438
- ] });
1439
- }
1440
- DataTablePreset.displayName = "DataTablePreset";
1441
- var FilterBarContext = createContext(null);
1442
- function useFilterBar() {
1443
- const ctx = useContext(FilterBarContext);
1444
- if (!ctx) throw new Error("useFilterBar must be used within <FilterBar>");
1445
- return ctx;
1446
- }
1447
- var FilterBar = forwardRef(
1448
- ({ value, onChange, onClear, className, children, ...props }, ref) => /* @__PURE__ */ jsx(FilterBarContext.Provider, { value: { value, onChange, onClear }, children: /* @__PURE__ */ jsx(
1449
- "div",
1450
- {
1451
- ref,
1452
- role: "search",
1453
- "aria-label": "\u30D5\u30A3\u30EB\u30BF\u30FC",
1454
- "data-slot": "filter-bar",
1455
- className: cn("flex flex-wrap items-center gap-2", className),
1456
- ...props,
1457
- children
1458
- }
1459
- ) })
1460
- );
1461
- FilterBar.displayName = "FilterBar";
1462
- function FilterBarSelect({
1463
- filterKey,
1464
- label,
1465
- options,
1466
- placeholder,
1467
- className
1468
- }) {
1469
- const { value, onChange } = useFilterBar();
1470
- const handleChange = (selected) => onChange({ ...value, [filterKey]: selected ?? void 0 });
1471
- return /* @__PURE__ */ jsxs(Select, { value: value[filterKey] ?? "", onValueChange: handleChange, children: [
1472
- /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", "aria-label": label, "data-slot": "filter-bar-select", className, children: /* @__PURE__ */ jsx(SelectValue, { placeholder: placeholder ?? label }) }),
1473
- /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, disabled: option.disabled, children: option.label }, option.value)) })
1474
- ] });
1475
- }
1476
- FilterBarSelect.displayName = "FilterBarSelect";
1477
- function FilterBarMultiSelect({
1478
- filterKey,
1479
- label,
1480
- options,
1481
- placeholder,
1482
- className
1483
- }) {
1484
- const { value, onChange } = useFilterBar();
1485
- const selected = value[filterKey] ?? [];
1486
- const handleToggle = (option) => {
1487
- const next = selected.includes(option) ? selected.filter((v) => v !== option) : [...selected, option];
1488
- onChange({ ...value, [filterKey]: next.length > 0 ? next : void 0 });
1489
- };
1490
- return /* @__PURE__ */ jsxs(Popover, { children: [
1491
- /* @__PURE__ */ jsxs(
1492
- PopoverTrigger,
1493
- {
1494
- render: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", className: cn("h-8 gap-1", className) }),
1495
- "aria-label": `${placeholder ?? label}${selected.length > 0 ? ` (${selected.length}\u4EF6\u9078\u629E\u4E2D)` : ""}`,
1496
- "data-slot": "filter-bar-multi-select",
1497
- children: [
1498
- placeholder ?? label,
1499
- selected.length > 0 && /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "ml-1 px-1.5 py-0 text-xs", children: selected.length }),
1500
- /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5 opacity-50", "aria-hidden": "true" })
1501
- ]
1502
- }
1503
- ),
1504
- /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: "w-56 p-2", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", role: "group", "aria-label": label, children: options.map((option) => /* @__PURE__ */ jsxs(
1505
- "label",
1506
- {
1507
- className: "flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent",
1508
- children: [
1509
- /* @__PURE__ */ jsx(
1510
- Checkbox,
1511
- {
1512
- checked: selected.includes(option.value),
1513
- disabled: option.disabled,
1514
- onCheckedChange: () => handleToggle(option.value)
1515
- }
1516
- ),
1517
- option.label
1518
- ]
1519
- },
1520
- option.value
1521
- )) }) })
1522
- ] });
1523
- }
1524
- FilterBarMultiSelect.displayName = "FilterBarMultiSelect";
1525
- function FilterBarActiveChips({ filters, className }) {
1526
- const { value, onChange } = useFilterBar();
1527
- const getActiveChips = () => {
1528
- const chips = [];
1529
- const pushRaw = (key, v) => {
1530
- if (typeof v === "string") {
1531
- chips.push({ key, filterLabel: key, optionLabel: v, isMulti: false });
1532
- } else {
1533
- for (const val of v) {
1534
- chips.push({ key, filterLabel: key, optionLabel: val, optionValue: val, isMulti: true });
1535
- }
1536
- }
1537
- };
1538
- for (const [key, v] of Object.entries(value)) {
1539
- if (v === void 0 || v === "") continue;
1540
- const filter = filters?.find((f) => f.key === key);
1541
- if (!filter) {
1542
- pushRaw(key, v);
1543
- continue;
1544
- }
1545
- if (filter.type === "select" && typeof v === "string") {
1546
- const option = filter.options?.find((o) => o.value === v);
1547
- chips.push({
1548
- key,
1549
- filterLabel: filter.label,
1550
- optionLabel: option?.label ?? v,
1551
- isMulti: false
1552
- });
1553
- } else if (filter.type === "multi-select" && Array.isArray(v)) {
1554
- for (const val of v) {
1555
- const option = filter.options?.find((o) => o.value === val);
1556
- chips.push({
1557
- key,
1558
- filterLabel: filter.label,
1559
- optionLabel: option?.label ?? val,
1560
- optionValue: val,
1561
- isMulti: true
1562
- });
1563
- }
1564
- }
1565
- }
1566
- return chips;
1567
- };
1568
- const handleRemoveFilter = (key, optionValue) => {
1569
- if (optionValue !== void 0) {
1570
- const current = value[key] ?? [];
1571
- const next = current.filter((v) => v !== optionValue);
1572
- onChange({ ...value, [key]: next.length > 0 ? next : void 0 });
1573
- } else {
1574
- onChange({ ...value, [key]: void 0 });
1575
- }
1576
- };
1577
- const activeChips = getActiveChips();
1578
- if (activeChips.length === 0) return null;
1579
- return /* @__PURE__ */ jsx(Fragment$1, { children: activeChips.map((chip) => /* @__PURE__ */ jsxs(
1580
- Badge,
1581
- {
1582
- variant: "secondary",
1583
- className: cn("gap-1 pr-1", className),
1584
- "data-slot": "filter-bar-chip",
1585
- children: [
1586
- /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
1587
- chip.filterLabel,
1588
- ":"
1589
- ] }),
1590
- chip.optionLabel,
1591
- /* @__PURE__ */ jsx(
1592
- "button",
1593
- {
1594
- type: "button",
1595
- className: "ml-0.5 rounded-full p-0.5 hover:bg-muted-foreground/20",
1596
- onClick: () => handleRemoveFilter(chip.key, chip.optionValue),
1597
- "aria-label": `${chip.filterLabel}: ${chip.optionLabel} \u3092\u524A\u9664`,
1598
- children: /* @__PURE__ */ jsx(X, { className: "size-3", "aria-hidden": "true" })
1599
- }
1600
- )
1601
- ]
1602
- },
1603
- `${chip.key}-${chip.optionValue ?? "single"}`
1604
- )) });
1605
- }
1606
- FilterBarActiveChips.displayName = "FilterBarActiveChips";
1607
- function FilterBarClearButton({ label = "\u30AF\u30EA\u30A2", className }) {
1608
- const { value, onClear } = useFilterBar();
1609
- const hasActiveFilters = Object.values(value).some(
1610
- (v) => Array.isArray(v) ? v.length > 0 : v !== void 0 && v !== ""
1611
- );
1612
- if (!hasActiveFilters || !onClear) return null;
1613
- return /* @__PURE__ */ jsx(
1614
- Button,
1615
- {
1616
- variant: "ghost",
1617
- size: "sm",
1618
- className: cn("h-7 px-2 text-xs", className),
1619
- onClick: onClear,
1620
- "aria-label": "\u3059\u3079\u3066\u306E\u30D5\u30A3\u30EB\u30BF\u30FC\u3092\u30AF\u30EA\u30A2",
1621
- "data-slot": "filter-bar-clear-button",
1622
- children: label
1623
- }
1624
- );
1625
- }
1626
- FilterBarClearButton.displayName = "FilterBarClearButton";
1627
- function FilterBarPreset({
1628
- filters,
1629
- value,
1630
- onChange,
1631
- onClear,
1632
- className
1633
- }) {
1634
- return /* @__PURE__ */ jsxs(FilterBar, { value, onChange, onClear, className, children: [
1635
- filters.map((filter) => {
1636
- if (filter.type === "select") {
1637
- return /* @__PURE__ */ jsx(
1638
- FilterBarSelect,
1639
- {
1640
- filterKey: filter.key,
1641
- label: filter.label,
1642
- placeholder: filter.placeholder,
1643
- options: filter.options ?? []
1644
- },
1645
- filter.key
1646
- );
1647
- }
1648
- if (filter.type === "multi-select") {
1649
- return /* @__PURE__ */ jsx(
1650
- FilterBarMultiSelect,
1651
- {
1652
- filterKey: filter.key,
1653
- label: filter.label,
1654
- placeholder: filter.placeholder,
1655
- options: filter.options ?? []
1656
- },
1657
- filter.key
1658
- );
1659
- }
1660
- return null;
1661
- }),
1662
- /* @__PURE__ */ jsx(FilterBarActiveChips, { filters }),
1663
- onClear && /* @__PURE__ */ jsx(FilterBarClearButton, {})
1664
- ] });
1665
- }
1666
- FilterBarPreset.displayName = "FilterBarPreset";
1667
- var defaultPresets = [
1668
- {
1669
- label: "Today",
1670
- getValue: () => {
1671
- const today = /* @__PURE__ */ new Date();
1672
- return { from: startOfDay(today), to: endOfDay(today) };
1673
- }
1674
- },
1675
- {
1676
- label: "Yesterday",
1677
- getValue: () => {
1678
- const yesterday = subDays(/* @__PURE__ */ new Date(), 1);
1679
- return { from: startOfDay(yesterday), to: endOfDay(yesterday) };
1680
- }
1681
- },
1682
- {
1683
- label: "Last 7 days",
1684
- getValue: () => {
1685
- const today = /* @__PURE__ */ new Date();
1686
- return { from: startOfDay(subDays(today, 6)), to: endOfDay(today) };
1687
- }
1688
- },
1689
- {
1690
- label: "Last 14 days",
1691
- getValue: () => {
1692
- const today = /* @__PURE__ */ new Date();
1693
- return { from: startOfDay(subDays(today, 13)), to: endOfDay(today) };
1694
- }
1695
- },
1696
- {
1697
- label: "Last 30 days",
1698
- getValue: () => {
1699
- const today = /* @__PURE__ */ new Date();
1700
- return { from: startOfDay(subDays(today, 29)), to: endOfDay(today) };
1701
- }
1702
- },
1703
- {
1704
- label: "Last 90 days",
1705
- getValue: () => {
1706
- const today = /* @__PURE__ */ new Date();
1707
- return { from: startOfDay(subDays(today, 89)), to: endOfDay(today) };
1708
- }
1709
- },
1710
- {
1711
- label: "This month",
1712
- getValue: () => {
1713
- const today = /* @__PURE__ */ new Date();
1714
- return { from: startOfMonth(today), to: endOfDay(today) };
1715
- }
1716
- },
1717
- {
1718
- label: "Last month",
1719
- getValue: () => {
1720
- const lastMonth = subMonths(/* @__PURE__ */ new Date(), 1);
1721
- return { from: startOfMonth(lastMonth), to: endOfMonth(lastMonth) };
1722
- }
1723
- }
1724
- ];
1725
- var DateRangePicker = forwardRef(
1726
- function DateRangePicker2({
1727
- value,
1728
- onChange,
1729
- presets = defaultPresets,
1730
- showPresets = true,
1731
- maxDate,
1732
- minDate,
1733
- placeholder = "Select date range",
1734
- disabled = false,
1735
- className,
1736
- align = "start"
1737
- }, ref) {
1738
- const [open, setOpen] = useState(false);
1739
- const isMobile = useIsMobile();
1740
- const handleCalendarSelect = useCallback(
1741
- (range) => {
1742
- onChange?.({ from: range?.from, to: range?.to });
1743
- },
1744
- [onChange]
1745
- );
1746
- const handlePresetClick = useCallback(
1747
- (preset) => {
1748
- onChange?.(preset.getValue());
1749
- setOpen(false);
1750
- },
1751
- [onChange]
1752
- );
1753
- const formatDateRange = () => {
1754
- if (!value?.from) return placeholder;
1755
- if (!value.to) return format(value.from, "yyyy/MM/dd", { locale: ja });
1756
- return `${format(value.from, "yyyy/MM/dd", { locale: ja })} - ${format(value.to, "yyyy/MM/dd", { locale: ja })}`;
1757
- };
1758
- const calendarSelected = value?.from ? { from: value.from, to: value.to ?? void 0 } : void 0;
1759
- return /* @__PURE__ */ jsx("div", { ref, "data-slot": "date-range-picker", children: /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
1760
- /* @__PURE__ */ jsxs(
1761
- PopoverTrigger,
1762
- {
1763
- render: /* @__PURE__ */ jsx(
1764
- Button,
1765
- {
1766
- variant: "outline",
1767
- disabled,
1768
- className: cn(
1769
- "w-auto justify-start text-left font-normal",
1770
- !value?.from && "text-muted-foreground",
1771
- className
1772
- )
1773
- }
1774
- ),
1775
- "aria-label": formatDateRange(),
1776
- "aria-expanded": open,
1777
- children: [
1778
- /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4", "aria-hidden": "true" }),
1779
- /* @__PURE__ */ jsx("span", { children: formatDateRange() })
1780
- ]
1781
- }
1782
- ),
1783
- /* @__PURE__ */ jsxs(
1784
- PopoverContent,
1785
- {
1786
- align,
1787
- className: cn("w-auto p-0", isMobile ? "flex flex-col" : "flex"),
1788
- children: [
1789
- showPresets && /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-1 p-3", isMobile ? "border-b" : "border-r"), children: presets.map((preset) => /* @__PURE__ */ jsx(
1790
- Button,
1791
- {
1792
- variant: "ghost",
1793
- size: "sm",
1794
- className: "justify-start text-xs",
1795
- onClick: () => handlePresetClick(preset),
1796
- children: preset.label
1797
- },
1798
- preset.label
1799
- )) }),
1800
- /* @__PURE__ */ jsx("div", { className: "p-3", children: /* @__PURE__ */ jsx(
1801
- Calendar,
1802
- {
1803
- mode: "range",
1804
- numberOfMonths: isMobile ? 1 : 2,
1805
- selected: calendarSelected,
1806
- onSelect: handleCalendarSelect,
1807
- disabled: (date) => {
1808
- if (maxDate && date > maxDate) return true;
1809
- if (minDate && date < minDate) return true;
1810
- return false;
1811
- }
1812
- }
1813
- ) })
1814
- ]
1815
- }
1816
- )
1817
- ] }) });
1818
- }
1819
- );
1820
- DateRangePicker.displayName = "DateRangePicker";
1821
- var iconSizes = {
1822
- sm: "size-3.5",
1823
- default: "size-4",
1824
- lg: "size-5"
1825
- };
1826
- var SegmentedControl = forwardRef(
1827
- function SegmentedControl2({ options, value, onChange, size = "default", fullWidth = false, ariaLabel, className }, ref) {
1828
- return /* @__PURE__ */ jsx(
1829
- ToggleGroup,
1830
- {
1831
- ref,
1832
- "data-slot": "segmented-control",
1833
- value: [value],
1834
- onValueChange: (next) => {
1835
- const picked = next.find((item) => item !== value) ?? next[0];
1836
- if (typeof picked === "string") onChange(picked);
1837
- },
1838
- variant: "outline",
1839
- size,
1840
- spacing: 0,
1841
- "aria-label": ariaLabel,
1842
- className: cn(fullWidth && "w-full", className),
1843
- children: options.map((option) => {
1844
- const Icon = option.icon;
1845
- return /* @__PURE__ */ jsxs(
1846
- ToggleGroupItem,
1847
- {
1848
- value: option.value,
1849
- disabled: option.disabled,
1850
- "aria-label": option.label,
1851
- className: cn(fullWidth && "flex-1"),
1852
- children: [
1853
- Icon && /* @__PURE__ */ jsx(Icon, { className: iconSizes[size], "aria-hidden": "true" }),
1854
- option.label
1855
- ]
1856
- },
1857
- option.value
1858
- );
1859
- })
1860
- }
1861
- );
1862
- }
1863
- );
1864
- SegmentedControl.displayName = "SegmentedControl";
1865
-
1866
- // src/components/types.ts
1867
- function isGroupedOptions(options) {
1868
- return options.length > 0 && "options" in options[0];
1869
- }
1870
- function flattenOptions(options) {
1871
- if (isGroupedOptions(options)) {
1872
- return options.flatMap((group) => group.options);
1873
- }
1874
- return options;
1875
- }
1876
- function OptionCommandList({
1877
- options,
1878
- isSelected,
1879
- onSelect,
1880
- onSearch,
1881
- isLoading,
1882
- searchPlaceholder,
1883
- emptyText
1884
- }) {
1885
- const renderOptions = (items) => items.map((option) => /* @__PURE__ */ jsxs(
1886
- CommandItem,
1887
- {
1888
- value: option.value,
1889
- keywords: [option.label],
1890
- disabled: option.disabled,
1891
- onSelect,
1892
- children: [
1893
- option.icon && /* @__PURE__ */ jsx(option.icon, { className: "size-4 shrink-0" }),
1894
- /* @__PURE__ */ jsxs("span", { className: "flex-1 truncate", children: [
1895
- option.label,
1896
- option.description && /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs text-muted-foreground", children: option.description })
1897
- ] }),
1898
- /* @__PURE__ */ jsx(
1899
- CheckIcon,
1900
- {
1901
- className: cn("size-4 shrink-0", isSelected(option.value) ? "opacity-100" : "opacity-0")
1902
- }
1903
- )
1904
- ]
1905
- },
1906
- option.value
1907
- ));
1908
- return /* @__PURE__ */ jsxs(Command, { shouldFilter: !onSearch, children: [
1909
- /* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder, onValueChange: onSearch }),
1910
- /* @__PURE__ */ jsx(CommandList, { children: isLoading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-6", children: /* @__PURE__ */ jsx(LoaderIcon, { className: "size-4 animate-spin text-muted-foreground" }) }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
1911
- /* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }),
1912
- isGroupedOptions(options) ? options.map((group) => /* @__PURE__ */ jsx(CommandGroup, { heading: group.label, children: renderOptions(group.options) }, group.label)) : renderOptions(options)
1913
- ] }) })
1914
- ] });
1915
- }
1916
- function RemoveButton({ label, onRemove, iconClassName }) {
1917
- const handle = (e) => {
1918
- e.stopPropagation();
1919
- onRemove();
1920
- };
1921
- return /* @__PURE__ */ jsx(
1922
- "span",
1923
- {
1924
- role: "button",
1925
- tabIndex: 0,
1926
- "aria-label": label,
1927
- className: "rounded-sm opacity-50 hover:opacity-100 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
1928
- onClick: handle,
1929
- onKeyDown: (e) => {
1930
- if (e.key === "Enter" || e.key === " ") handle(e);
1931
- },
1932
- children: /* @__PURE__ */ jsx(XIcon, { className: cn("size-3.5", iconClassName) })
1933
- }
1934
- );
1935
- }
1936
- var SearchableSelect = forwardRef(
1937
- function SearchableSelect2({
1938
- options,
1939
- value,
1940
- onChange,
1941
- onSearch,
1942
- placeholder = "\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044",
1943
- searchPlaceholder = "\u691C\u7D22...",
1944
- emptyText = "\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3067\u3057\u305F",
1945
- isLoading = false,
1946
- disabled = false,
1947
- clearable = true,
1948
- className
1949
- }, ref) {
1950
- const [open, setOpen] = useState(false);
1951
- const allOptions = useMemo(() => flattenOptions(options), [options]);
1952
- const selectedOption = useMemo(
1953
- () => allOptions.find((opt) => opt.value === value),
1954
- [allOptions, value]
1955
- );
1956
- function handleSelect(selectedValue) {
1957
- onChange?.(selectedValue === value ? void 0 : selectedValue);
1958
- setOpen(false);
1959
- }
1960
- return /* @__PURE__ */ jsx("div", { ref, "data-slot": "searchable-select", children: /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
1961
- /* @__PURE__ */ jsxs(
1962
- PopoverTrigger,
1963
- {
1964
- render: /* @__PURE__ */ jsx(
1965
- Button,
1966
- {
1967
- variant: "outline",
1968
- disabled,
1969
- className: cn(
1970
- "w-full justify-between font-normal",
1971
- !selectedOption && "text-muted-foreground",
1972
- className
1973
- )
1974
- }
1975
- ),
1976
- role: "combobox",
1977
- "aria-expanded": open,
1978
- children: [
1979
- /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedOption ? selectedOption.label : placeholder }),
1980
- /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1", children: [
1981
- clearable && value && /* @__PURE__ */ jsx(RemoveButton, { label: "\u30AF\u30EA\u30A2", onRemove: () => onChange?.(void 0) }),
1982
- /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 opacity-50" })
1983
- ] })
1984
- ]
1985
- }
1986
- ),
1987
- /* @__PURE__ */ jsx(PopoverContent, { className: "w-(--anchor-width) p-0", align: "start", children: /* @__PURE__ */ jsx(
1988
- OptionCommandList,
1989
- {
1990
- options,
1991
- isSelected: (v) => value === v,
1992
- onSelect: handleSelect,
1993
- onSearch,
1994
- isLoading,
1995
- searchPlaceholder,
1996
- emptyText
1997
- }
1998
- ) })
1999
- ] }) });
2000
- }
2001
- );
2002
- SearchableSelect.displayName = "SearchableSelect";
2003
- var MultiSelect = forwardRef(function MultiSelect2({
2004
- options,
2005
- value,
2006
- onChange,
2007
- onSearch,
2008
- maxCount = 3,
2009
- placeholder = "\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044",
2010
- searchPlaceholder = "\u691C\u7D22...",
2011
- emptyText = "\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3067\u3057\u305F",
2012
- isLoading = false,
2013
- disabled = false,
2014
- className
2015
- }, ref) {
2016
- const [open, setOpen] = useState(false);
2017
- const listId = useId();
2018
- const allOptions = useMemo(() => flattenOptions(options), [options]);
2019
- const selectedOptions = useMemo(
2020
- () => allOptions.filter((opt) => value.includes(opt.value)),
2021
- [allOptions, value]
2022
- );
2023
- function handleSelect(selectedValue) {
2024
- if (value.includes(selectedValue)) {
2025
- onChange?.(value.filter((v) => v !== selectedValue));
2026
- } else {
2027
- onChange?.([...value, selectedValue]);
2028
- }
2029
- }
2030
- const visibleBadges = selectedOptions.slice(0, maxCount);
2031
- const overflowCount = selectedOptions.length - maxCount;
2032
- return /* @__PURE__ */ jsx("div", { ref, "data-slot": "multi-select", children: /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
2033
- /* @__PURE__ */ jsxs(
2034
- PopoverTrigger,
2035
- {
2036
- role: "combobox",
2037
- "aria-expanded": open,
2038
- "aria-controls": listId,
2039
- disabled,
2040
- className: cn(
2041
- "inline-flex min-h-9 w-full items-center justify-between gap-2 rounded-md border bg-background px-3 py-1.5 text-sm shadow-xs transition-all outline-none hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
2042
- className
2043
- ),
2044
- children: [
2045
- /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1", children: selectedOptions.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
2046
- visibleBadges.map((option) => /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "shrink-0 gap-1 pr-1", children: [
2047
- /* @__PURE__ */ jsx("span", { className: "max-w-[120px] truncate", children: option.label }),
2048
- /* @__PURE__ */ jsx(
2049
- RemoveButton,
2050
- {
2051
- label: `${option.label}\u3092\u524A\u9664`,
2052
- onRemove: () => onChange?.(value.filter((v) => v !== option.value)),
2053
- iconClassName: "size-3"
2054
- }
2055
- )
2056
- ] }, option.value)),
2057
- overflowCount > 0 && /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "shrink-0", children: [
2058
- "+",
2059
- overflowCount,
2060
- "\u4EF6"
2061
- ] })
2062
- ] }) }),
2063
- /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 shrink-0 opacity-50" })
2064
- ]
2065
- }
2066
- ),
2067
- /* @__PURE__ */ jsx(PopoverContent, { id: listId, className: "w-(--anchor-width) p-0", align: "start", children: /* @__PURE__ */ jsx(
2068
- OptionCommandList,
2069
- {
2070
- options,
2071
- isSelected: (v) => value.includes(v),
2072
- onSelect: handleSelect,
2073
- onSearch,
2074
- isLoading,
2075
- searchPlaceholder,
2076
- emptyText
2077
- }
2078
- ) })
2079
- ] }) });
2080
- });
2081
- MultiSelect.displayName = "MultiSelect";
2082
- var metricValueVariants = cva("font-medium tracking-tight", {
2083
- variants: {
2084
- size: {
2085
- sm: "text-base",
2086
- md: "text-2xl",
2087
- lg: "text-3xl",
2088
- xl: "text-4xl"
2089
- }
2090
- },
2091
- defaultVariants: {
2092
- size: "md"
2093
- }
2094
- });
2095
- var MetricValue = forwardRef(
2096
- ({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
2097
- "div",
2098
- {
2099
- ref,
2100
- "data-slot": "metric-value",
2101
- className: cn("my-4", metricValueVariants({ size }), className),
2102
- ...props
2103
- }
2104
- )
2105
- );
2106
- MetricValue.displayName = "MetricValue";
2107
- var MetricUnit = forwardRef(
2108
- ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
2109
- "span",
2110
- {
2111
- ref,
2112
- "data-slot": "metric-unit",
2113
- className: cn("text-sm font-normal text-muted-foreground", className),
2114
- ...props
2115
- }
2116
- )
2117
- );
2118
- MetricUnit.displayName = "MetricUnit";
2119
- var trendIndicatorVariants = cva("inline-flex items-center gap-0.5 text-sm font-medium", {
2120
- variants: {
2121
- sentiment: {
2122
- positive: "text-chart-1",
2123
- negative: "text-primary",
2124
- neutral: "text-muted-foreground"
2125
- }
2126
- },
2127
- defaultVariants: {
2128
- sentiment: "neutral"
2129
- }
2130
- });
2131
- var TrendIndicator = forwardRef(
2132
- ({ value, direction, positiveIsGood = true, className }, ref) => {
2133
- const isGood = direction === "neutral" ? null : direction === "up" === positiveIsGood;
2134
- const sentiment = isGood === null ? "neutral" : isGood ? "positive" : "negative";
2135
- const Icon = direction === "up" ? ArrowUp : direction === "down" ? ArrowDown : Minus;
2136
- const ariaLabel = direction === "neutral" ? `\u5909\u5316\u306A\u3057 ${value}%` : direction === "up" ? `${value}% \u5897\u52A0` : `${value}% \u6E1B\u5C11`;
2137
- return /* @__PURE__ */ jsxs(
2138
- "span",
2139
- {
2140
- ref,
2141
- "data-slot": "trend-indicator",
2142
- className: cn(trendIndicatorVariants({ sentiment }), className),
2143
- "aria-label": ariaLabel,
2144
- children: [
2145
- /* @__PURE__ */ jsx(Icon, { className: "size-3.5", "aria-hidden": "true" }),
2146
- /* @__PURE__ */ jsxs("span", { children: [
2147
- value,
2148
- "%"
2149
- ] })
2150
- ]
2151
- }
2152
- );
2153
- }
2154
- );
2155
- TrendIndicator.displayName = "TrendIndicator";
2156
- var defaultColorMap = {
2157
- active: "green",
2158
- inactive: "gray",
2159
- warning: "yellow",
2160
- error: "red",
2161
- pending: "blue"
2162
- };
2163
- var colorStyles = {
2164
- green: {
2165
- dot: "bg-green-500",
2166
- bg: "bg-green-50 dark:bg-green-950",
2167
- text: "text-green-700 dark:text-green-300"
2168
- },
2169
- gray: {
2170
- dot: "bg-gray-500",
2171
- bg: "bg-gray-50 dark:bg-gray-950",
2172
- text: "text-gray-700 dark:text-gray-300"
2173
- },
2174
- yellow: {
2175
- dot: "bg-yellow-500",
2176
- bg: "bg-yellow-50 dark:bg-yellow-950",
2177
- text: "text-yellow-700 dark:text-yellow-300"
2178
- },
2179
- red: {
2180
- dot: "bg-red-500",
2181
- bg: "bg-red-50 dark:bg-red-950",
2182
- text: "text-red-700 dark:text-red-300"
2183
- },
2184
- blue: {
2185
- dot: "bg-blue-500",
2186
- bg: "bg-blue-50 dark:bg-blue-950",
2187
- text: "text-blue-700 dark:text-blue-300"
2188
- }
2189
- };
2190
- var fallbackStyle = colorStyles.gray;
2191
- var StatusBadge = forwardRef(function StatusBadge2({ status, label, colorMap, className }, ref) {
2192
- const mergedColorMap = { ...defaultColorMap, ...colorMap };
2193
- const color = mergedColorMap[status] ?? "gray";
2194
- const style = colorStyles[color] ?? fallbackStyle;
2195
- const displayLabel = label ?? status;
2196
- return /* @__PURE__ */ jsxs(
2197
- Badge,
2198
- {
2199
- ref,
2200
- "data-slot": "status-badge",
2201
- variant: "outline",
2202
- className: cn("gap-1.5 border-transparent", style.bg, style.text, className),
2203
- "aria-label": displayLabel,
2204
- children: [
2205
- /* @__PURE__ */ jsx("span", { className: cn("inline-block size-2 rounded-full", style.dot), "aria-hidden": "true" }),
2206
- displayLabel
2207
- ]
2208
- }
2209
- );
2210
- });
2211
- StatusBadge.displayName = "StatusBadge";
2212
- var Placeholder = forwardRef(function Placeholder2({ className, ...props }, ref) {
2213
- return /* @__PURE__ */ jsx(
2214
- "span",
2215
- {
2216
- ref,
2217
- "data-slot": "placeholder",
2218
- className: cn("inline-block animate-pulse text-muted-foreground", className),
2219
- ...props
2220
- }
2221
- );
2222
- });
2223
- Placeholder.displayName = "Placeholder";
2224
-
2225
- export { AppShell, DashboardCard, DashboardCardAction, DashboardCardContent, DashboardCardDescription, DashboardCardFooter, DashboardCardHeader, DashboardCardPreset, DashboardCardSkeleton, DashboardCardTitle, DataTable, DataTableColumnVisibility, DataTableContent, DataTablePagination, DataTablePreset, DataTableToolbar, DateRangePicker, EChart, FilterBar, FilterBarActiveChips, FilterBarClearButton, FilterBarMultiSelect, FilterBarPreset, FilterBarSelect, FunnelSteps, MetricUnit, MetricValue, MultiSelect, PageShell, PageShellActions, PageShellContent, PageShellDescription, PageShellHeader, PageShellHeaderEnd, PageShellHeading, PageShellMeta, PageShellSummary, PageShellSummaryCard, PageShellTitle, Placeholder, SearchableSelect, SectionHeader, SegmentedControl, Sparkline, StatusBadge, TrendIndicator, defaultPresets, flattenOptions, funnelStepsVariants, isGroupedOptions, metricValueVariants, pageShellSummaryCardVariants, useDataTable };
2226
- //# sourceMappingURL=chunk-LSRMRIXA.js.map
2227
- //# sourceMappingURL=chunk-LSRMRIXA.js.map