@ktnpm_devops/react-component 0.7.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (333) hide show
  1. package/dist/composites/ChipGroup/ChipGroup.d.ts +4 -0
  2. package/dist/composites/ChipGroup/ChipGroup.d.ts.map +1 -0
  3. package/dist/composites/ChipGroup/ChipGroup.types.d.ts +20 -0
  4. package/dist/composites/ChipGroup/ChipGroup.types.d.ts.map +1 -0
  5. package/dist/composites/ChipGroup/index.d.ts +3 -0
  6. package/dist/composites/ChipGroup/index.d.ts.map +1 -0
  7. package/dist/composites/FilterDropdown/FilterDropdown.d.ts.map +1 -1
  8. package/dist/index.cjs +35 -31
  9. package/dist/index.cjs.map +1 -1
  10. package/dist/index.d.ts +4 -0
  11. package/dist/index.d.ts.map +1 -1
  12. package/dist/index.js +35 -31
  13. package/dist/index.js.map +1 -1
  14. package/dist/index10.cjs +2 -2
  15. package/dist/index10.js +2 -2
  16. package/dist/index11.cjs +2 -2
  17. package/dist/index11.js +2 -2
  18. package/dist/index12.cjs +2 -2
  19. package/dist/index12.js +2 -2
  20. package/dist/index13.cjs +2 -2
  21. package/dist/index13.js +2 -2
  22. package/dist/index14.cjs +2 -2
  23. package/dist/index14.js +2 -2
  24. package/dist/index15.cjs +2 -2
  25. package/dist/index15.js +2 -2
  26. package/dist/index16.cjs +2 -2
  27. package/dist/index16.js +2 -2
  28. package/dist/index17.cjs +15 -40
  29. package/dist/index17.cjs.map +1 -1
  30. package/dist/index17.js +15 -40
  31. package/dist/index17.js.map +1 -1
  32. package/dist/index18.cjs +24 -88
  33. package/dist/index18.cjs.map +1 -1
  34. package/dist/index18.js +26 -90
  35. package/dist/index18.js.map +1 -1
  36. package/dist/index19.cjs +40 -155
  37. package/dist/index19.cjs.map +1 -1
  38. package/dist/index19.js +42 -157
  39. package/dist/index19.js.map +1 -1
  40. package/dist/index20.cjs +85 -131
  41. package/dist/index20.cjs.map +1 -1
  42. package/dist/index20.js +88 -134
  43. package/dist/index20.js.map +1 -1
  44. package/dist/index21.cjs +150 -113
  45. package/dist/index21.cjs.map +1 -1
  46. package/dist/index21.js +151 -114
  47. package/dist/index21.js.map +1 -1
  48. package/dist/index22.cjs +136 -17
  49. package/dist/index22.cjs.map +1 -1
  50. package/dist/index22.js +136 -17
  51. package/dist/index22.js.map +1 -1
  52. package/dist/index23.cjs +98 -141
  53. package/dist/index23.cjs.map +1 -1
  54. package/dist/index23.js +98 -141
  55. package/dist/index23.js.map +1 -1
  56. package/dist/index24.cjs +16 -129
  57. package/dist/index24.cjs.map +1 -1
  58. package/dist/index24.js +16 -129
  59. package/dist/index24.js.map +1 -1
  60. package/dist/index25.cjs +160 -73
  61. package/dist/index25.cjs.map +1 -1
  62. package/dist/index25.js +162 -75
  63. package/dist/index25.js.map +1 -1
  64. package/dist/index26.cjs +130 -7
  65. package/dist/index26.cjs.map +1 -1
  66. package/dist/index26.js +132 -9
  67. package/dist/index26.js.map +1 -1
  68. package/dist/index27.cjs +74 -128
  69. package/dist/index27.cjs.map +1 -1
  70. package/dist/index27.js +76 -130
  71. package/dist/index27.js.map +1 -1
  72. package/dist/index28.cjs +8 -38
  73. package/dist/index28.cjs.map +1 -1
  74. package/dist/index28.js +9 -39
  75. package/dist/index28.js.map +1 -1
  76. package/dist/index29.cjs +117 -212
  77. package/dist/index29.cjs.map +1 -1
  78. package/dist/index29.js +119 -214
  79. package/dist/index29.js.map +1 -1
  80. package/dist/index30.cjs +38 -34
  81. package/dist/index30.cjs.map +1 -1
  82. package/dist/index30.js +39 -35
  83. package/dist/index30.js.map +1 -1
  84. package/dist/index31.cjs +221 -105
  85. package/dist/index31.cjs.map +1 -1
  86. package/dist/index31.js +224 -108
  87. package/dist/index31.js.map +1 -1
  88. package/dist/index32.cjs +29 -73
  89. package/dist/index32.cjs.map +1 -1
  90. package/dist/index32.js +31 -75
  91. package/dist/index32.js.map +1 -1
  92. package/dist/index33.cjs +104 -53
  93. package/dist/index33.cjs.map +1 -1
  94. package/dist/index33.js +105 -54
  95. package/dist/index33.js.map +1 -1
  96. package/dist/index34.cjs +68 -143
  97. package/dist/index34.cjs.map +1 -1
  98. package/dist/index34.js +70 -145
  99. package/dist/index34.js.map +1 -1
  100. package/dist/index35.cjs +53 -66
  101. package/dist/index35.cjs.map +1 -1
  102. package/dist/index35.js +54 -67
  103. package/dist/index35.js.map +1 -1
  104. package/dist/index36.cjs +152 -7
  105. package/dist/index36.cjs.map +1 -1
  106. package/dist/index36.js +154 -9
  107. package/dist/index36.js.map +1 -1
  108. package/dist/index37.cjs +72 -17
  109. package/dist/index37.cjs.map +1 -1
  110. package/dist/index37.js +73 -18
  111. package/dist/index37.js.map +1 -1
  112. package/dist/index38.cjs +7 -76
  113. package/dist/index38.cjs.map +1 -1
  114. package/dist/index38.js +9 -78
  115. package/dist/index38.js.map +1 -1
  116. package/dist/index39.cjs +17 -143
  117. package/dist/index39.cjs.map +1 -1
  118. package/dist/index39.js +17 -143
  119. package/dist/index39.js.map +1 -1
  120. package/dist/index40.cjs +72 -59
  121. package/dist/index40.cjs.map +1 -1
  122. package/dist/index40.js +74 -61
  123. package/dist/index40.js.map +1 -1
  124. package/dist/index41.cjs +135 -97
  125. package/dist/index41.cjs.map +1 -1
  126. package/dist/index41.js +137 -99
  127. package/dist/index41.js.map +1 -1
  128. package/dist/index42.cjs +49 -32
  129. package/dist/index42.cjs.map +1 -1
  130. package/dist/index42.js +49 -32
  131. package/dist/index42.js.map +1 -1
  132. package/dist/index43.cjs +105 -6
  133. package/dist/index43.cjs.map +1 -1
  134. package/dist/index43.js +106 -7
  135. package/dist/index43.js.map +1 -1
  136. package/dist/index44.cjs +43 -212
  137. package/dist/index44.cjs.map +1 -1
  138. package/dist/index44.js +44 -213
  139. package/dist/index44.js.map +1 -1
  140. package/dist/index45.cjs +6 -8
  141. package/dist/index45.cjs.map +1 -1
  142. package/dist/index45.js +6 -8
  143. package/dist/index45.js.map +1 -1
  144. package/dist/index46.cjs +213 -14
  145. package/dist/index46.cjs.map +1 -1
  146. package/dist/index46.js +215 -16
  147. package/dist/index46.js.map +1 -1
  148. package/dist/index47.cjs +7 -65
  149. package/dist/index47.cjs.map +1 -1
  150. package/dist/index47.js +9 -67
  151. package/dist/index47.js.map +1 -1
  152. package/dist/index48.cjs +19 -16
  153. package/dist/index48.cjs.map +1 -1
  154. package/dist/index48.js +18 -15
  155. package/dist/index48.js.map +1 -1
  156. package/dist/index49.cjs +67 -6
  157. package/dist/index49.cjs.map +1 -1
  158. package/dist/index49.js +66 -5
  159. package/dist/index49.js.map +1 -1
  160. package/dist/index50.cjs +15 -27
  161. package/dist/index50.cjs.map +1 -1
  162. package/dist/index50.js +15 -27
  163. package/dist/index50.js.map +1 -1
  164. package/dist/index51.cjs +1 -1
  165. package/dist/index51.js +1 -1
  166. package/dist/index52.cjs +23 -5
  167. package/dist/index52.cjs.map +1 -1
  168. package/dist/index52.js +24 -6
  169. package/dist/index52.js.map +1 -1
  170. package/dist/index53.cjs +15 -21
  171. package/dist/index53.cjs.map +1 -1
  172. package/dist/index53.js +15 -21
  173. package/dist/index53.js.map +1 -1
  174. package/dist/index55.cjs +13 -16
  175. package/dist/index55.cjs.map +1 -1
  176. package/dist/index55.js +14 -17
  177. package/dist/index55.js.map +1 -1
  178. package/dist/index56.cjs +19 -19
  179. package/dist/index56.js +20 -20
  180. package/dist/index57.cjs +21 -18
  181. package/dist/index57.cjs.map +1 -1
  182. package/dist/index57.js +22 -19
  183. package/dist/index57.js.map +1 -1
  184. package/dist/index58.cjs +28 -22
  185. package/dist/index58.cjs.map +1 -1
  186. package/dist/index58.js +28 -22
  187. package/dist/index58.js.map +1 -1
  188. package/dist/index59.cjs +19 -31
  189. package/dist/index59.cjs.map +1 -1
  190. package/dist/index59.js +20 -32
  191. package/dist/index59.js.map +1 -1
  192. package/dist/index60.cjs +49 -64
  193. package/dist/index60.cjs.map +1 -1
  194. package/dist/index60.js +49 -64
  195. package/dist/index60.js.map +1 -1
  196. package/dist/index61.cjs +52 -13
  197. package/dist/index61.cjs.map +1 -1
  198. package/dist/index61.js +52 -13
  199. package/dist/index61.js.map +1 -1
  200. package/dist/index62.cjs +47 -2
  201. package/dist/index62.cjs.map +1 -1
  202. package/dist/index62.js +48 -3
  203. package/dist/index62.js.map +1 -1
  204. package/dist/index63.cjs +17 -2
  205. package/dist/index63.cjs.map +1 -1
  206. package/dist/index63.js +18 -3
  207. package/dist/index63.js.map +1 -1
  208. package/dist/index64.cjs +25 -43
  209. package/dist/index64.cjs.map +1 -1
  210. package/dist/index64.js +26 -44
  211. package/dist/index64.js.map +1 -1
  212. package/dist/index65.cjs +16 -10
  213. package/dist/index65.cjs.map +1 -1
  214. package/dist/index65.js +16 -10
  215. package/dist/index65.js.map +1 -1
  216. package/dist/index66.cjs +15 -27
  217. package/dist/index66.cjs.map +1 -1
  218. package/dist/index66.js +15 -27
  219. package/dist/index66.js.map +1 -1
  220. package/dist/index67.cjs +4 -10
  221. package/dist/index67.cjs.map +1 -1
  222. package/dist/index67.js +4 -10
  223. package/dist/index67.js.map +1 -1
  224. package/dist/index68.cjs +31 -22
  225. package/dist/index68.cjs.map +1 -1
  226. package/dist/index68.js +32 -23
  227. package/dist/index68.js.map +1 -1
  228. package/dist/index69.cjs +2 -35
  229. package/dist/index69.cjs.map +1 -1
  230. package/dist/index69.js +3 -36
  231. package/dist/index69.js.map +1 -1
  232. package/dist/index70.cjs +19 -134
  233. package/dist/index70.cjs.map +1 -1
  234. package/dist/index70.js +18 -133
  235. package/dist/index70.js.map +1 -1
  236. package/dist/index71.cjs +2 -41
  237. package/dist/index71.cjs.map +1 -1
  238. package/dist/index71.js +3 -42
  239. package/dist/index71.js.map +1 -1
  240. package/dist/index72.cjs +10 -49
  241. package/dist/index72.cjs.map +1 -1
  242. package/dist/index72.js +11 -50
  243. package/dist/index72.js.map +1 -1
  244. package/dist/index73.cjs +5 -20
  245. package/dist/index73.cjs.map +1 -1
  246. package/dist/index73.js +5 -20
  247. package/dist/index73.js.map +1 -1
  248. package/dist/index74.cjs +15 -48
  249. package/dist/index74.cjs.map +1 -1
  250. package/dist/index74.js +15 -48
  251. package/dist/index74.js.map +1 -1
  252. package/dist/index75.cjs +14 -77
  253. package/dist/index75.cjs.map +1 -1
  254. package/dist/index75.js +15 -78
  255. package/dist/index75.js.map +1 -1
  256. package/dist/index76.cjs +64 -16
  257. package/dist/index76.cjs.map +1 -1
  258. package/dist/index76.js +64 -16
  259. package/dist/index76.js.map +1 -1
  260. package/dist/index77.cjs +19 -10
  261. package/dist/index77.cjs.map +1 -1
  262. package/dist/index77.js +19 -10
  263. package/dist/index77.js.map +1 -1
  264. package/dist/index78.cjs +3 -15
  265. package/dist/index78.cjs.map +1 -1
  266. package/dist/index78.js +3 -15
  267. package/dist/index78.js.map +1 -1
  268. package/dist/index79.cjs +13 -37
  269. package/dist/index79.cjs.map +1 -1
  270. package/dist/index79.js +14 -38
  271. package/dist/index79.js.map +1 -1
  272. package/dist/index80.cjs +30 -6
  273. package/dist/index80.cjs.map +1 -1
  274. package/dist/index80.js +30 -6
  275. package/dist/index80.js.map +1 -1
  276. package/dist/index81.cjs +52 -16
  277. package/dist/index81.cjs.map +1 -1
  278. package/dist/index81.js +52 -16
  279. package/dist/index81.js.map +1 -1
  280. package/dist/index82.cjs +134 -19
  281. package/dist/index82.cjs.map +1 -1
  282. package/dist/index82.js +133 -18
  283. package/dist/index82.js.map +1 -1
  284. package/dist/index83.cjs +36 -30
  285. package/dist/index83.cjs.map +1 -1
  286. package/dist/index83.js +36 -30
  287. package/dist/index83.js.map +1 -1
  288. package/dist/index84.cjs +10 -13
  289. package/dist/index84.cjs.map +1 -1
  290. package/dist/index84.js +11 -14
  291. package/dist/index84.js.map +1 -1
  292. package/dist/index85.cjs +13 -16
  293. package/dist/index85.cjs.map +1 -1
  294. package/dist/index85.js +14 -17
  295. package/dist/index85.js.map +1 -1
  296. package/dist/index86.cjs +34 -25
  297. package/dist/index86.cjs.map +1 -1
  298. package/dist/index86.js +34 -25
  299. package/dist/index86.js.map +1 -1
  300. package/dist/index87.cjs +54 -27
  301. package/dist/index87.cjs.map +1 -1
  302. package/dist/index87.js +55 -28
  303. package/dist/index87.js.map +1 -1
  304. package/dist/index88.cjs +2 -38
  305. package/dist/index88.cjs.map +1 -1
  306. package/dist/index88.js +3 -39
  307. package/dist/index88.js.map +1 -1
  308. package/dist/index89.cjs +45 -0
  309. package/dist/index89.cjs.map +1 -0
  310. package/dist/index89.js +45 -0
  311. package/dist/index89.js.map +1 -0
  312. package/dist/index9.cjs +2 -2
  313. package/dist/index9.js +2 -2
  314. package/dist/index90.cjs +18 -0
  315. package/dist/index90.cjs.map +1 -0
  316. package/dist/index90.js +18 -0
  317. package/dist/index90.js.map +1 -0
  318. package/dist/index91.cjs +42 -0
  319. package/dist/index91.cjs.map +1 -0
  320. package/dist/index91.js +42 -0
  321. package/dist/index91.js.map +1 -0
  322. package/dist/index92.cjs +33 -0
  323. package/dist/index92.cjs.map +1 -0
  324. package/dist/index92.js +33 -0
  325. package/dist/index92.js.map +1 -0
  326. package/dist/primitives/Chip/Chip.d.ts +4 -0
  327. package/dist/primitives/Chip/Chip.d.ts.map +1 -0
  328. package/dist/primitives/Chip/Chip.types.d.ts +12 -0
  329. package/dist/primitives/Chip/Chip.types.d.ts.map +1 -0
  330. package/dist/primitives/Chip/index.d.ts +3 -0
  331. package/dist/primitives/Chip/index.d.ts.map +1 -0
  332. package/dist/style.css +81 -33
  333. package/package.json +1 -1
package/dist/index35.cjs CHANGED
@@ -2,75 +2,62 @@
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const jsxRuntime = require("react/jsx-runtime");
4
4
  const react = require("react");
5
- const clsx = require("./index48.cjs");
6
- const SegmentedControl_module = require("./index57.cjs");
7
- function nextEnabledIndex(options, from, step) {
8
- const count = options.length;
9
- for (let i = 1; i <= count; i += 1) {
10
- const idx = (from + step * i + count * i) % count;
11
- if (!options[idx].disabled) return idx;
12
- }
13
- return from;
14
- }
15
- function SegmentedControlInner({
16
- options,
17
- value,
18
- onChange,
19
- shape = "pill",
20
- size = "md",
21
- className,
22
- ...props
23
- }, ref) {
24
- const buttonsRef = react.useRef([]);
25
- const move = (currentIndex, step) => {
26
- var _a;
27
- const target = nextEnabledIndex(options, currentIndex, step);
28
- if (target === currentIndex) return;
29
- onChange(options[target].value);
30
- (_a = buttonsRef.current[target]) == null ? void 0 : _a.focus();
31
- };
32
- const handleKeyDown = (event, index) => {
33
- if (event.key === "ArrowRight" || event.key === "ArrowDown") {
34
- event.preventDefault();
35
- move(index, 1);
36
- } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
37
- event.preventDefault();
38
- move(index, -1);
39
- }
40
- };
41
- return /* @__PURE__ */ jsxRuntime.jsx(
5
+ const clsx = require("./index50.cjs");
6
+ const Row_module = require("./index76.cjs");
7
+ const gapClass = {
8
+ none: Row_module.default.gapNone,
9
+ "2xs": Row_module.default.gap2xs,
10
+ xs: Row_module.default.gapXs,
11
+ sm: Row_module.default.gapSm,
12
+ md: Row_module.default.gapMd,
13
+ lg: Row_module.default.gapLg,
14
+ xl: Row_module.default.gapXl,
15
+ "2xl": Row_module.default.gap2xl,
16
+ "3xl": Row_module.default.gap3xl
17
+ };
18
+ const alignClass = {
19
+ start: Row_module.default.alignStart,
20
+ center: Row_module.default.alignCenter,
21
+ end: Row_module.default.alignEnd,
22
+ stretch: Row_module.default.alignStretch,
23
+ baseline: Row_module.default.alignBaseline
24
+ };
25
+ const justifyClass = {
26
+ start: Row_module.default.justifyStart,
27
+ center: Row_module.default.justifyCenter,
28
+ end: Row_module.default.justifyEnd,
29
+ between: Row_module.default.justifyBetween,
30
+ around: Row_module.default.justifyAround,
31
+ evenly: Row_module.default.justifyEvenly
32
+ };
33
+ const Row = react.forwardRef(
34
+ ({
35
+ gap = "md",
36
+ align = "stretch",
37
+ justify = "start",
38
+ wrap = true,
39
+ direction = "row",
40
+ className,
41
+ children,
42
+ ...props
43
+ }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
42
44
  "div",
43
45
  {
44
46
  ref,
45
- role: "radiogroup",
46
- className: clsx.clsx(SegmentedControl_module.default.root, SegmentedControl_module.default[shape], SegmentedControl_module.default[size], className),
47
+ className: clsx.clsx(
48
+ Row_module.default.root,
49
+ gapClass[gap],
50
+ alignClass[align],
51
+ justifyClass[justify],
52
+ wrap ? Row_module.default.wrap : Row_module.default.nowrap,
53
+ direction === "column" ? Row_module.default.dirColumn : Row_module.default.dirRow,
54
+ className
55
+ ),
47
56
  ...props,
48
- children: options.map((option, index) => {
49
- const selected = option.value === value;
50
- return /* @__PURE__ */ jsxRuntime.jsx(
51
- "button",
52
- {
53
- ref: (node) => {
54
- buttonsRef.current[index] = node;
55
- },
56
- type: "button",
57
- role: "radio",
58
- "aria-checked": selected,
59
- tabIndex: selected ? 0 : -1,
60
- disabled: option.disabled,
61
- className: clsx.clsx(SegmentedControl_module.default.segment, selected && SegmentedControl_module.default.isOn),
62
- onClick: () => onChange(option.value),
63
- onKeyDown: (event) => handleKeyDown(event, index),
64
- children: option.label
65
- },
66
- option.value
67
- );
68
- })
57
+ children
69
58
  }
70
- );
71
- }
72
- const SegmentedControlBase = react.forwardRef(SegmentedControlInner);
73
- SegmentedControlBase.displayName = "SegmentedControl";
74
- const SegmentedControl = SegmentedControlBase;
75
- exports.SegmentedControl = SegmentedControl;
59
+ )
60
+ );
61
+ Row.displayName = "Row";
62
+ exports.Row = Row;
76
63
  //# sourceMappingURL=index35.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index35.cjs","sources":["../src/primitives/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { forwardRef, useRef } from 'react';\nimport clsx from 'clsx';\nimport type {\n SegmentedControlOption,\n SegmentedControlProps,\n} from './SegmentedControl.types';\nimport styles from './SegmentedControl.module.css';\n\nfunction nextEnabledIndex<T extends string>(\n options: SegmentedControlOption<T>[],\n from: number,\n step: 1 | -1,\n): number {\n const count = options.length;\n for (let i = 1; i <= count; i += 1) {\n const idx = (from + step * i + count * i) % count;\n if (!options[idx].disabled) return idx;\n }\n return from;\n}\n\nfunction SegmentedControlInner<T extends string>(\n {\n options,\n value,\n onChange,\n shape = 'pill',\n size = 'md',\n className,\n ...props\n }: SegmentedControlProps<T>,\n ref: React.ForwardedRef<HTMLDivElement>,\n) {\n const buttonsRef = useRef<(HTMLButtonElement | null)[]>([]);\n\n const move = (currentIndex: number, step: 1 | -1) => {\n const target = nextEnabledIndex(options, currentIndex, step);\n if (target === currentIndex) return;\n onChange(options[target].value);\n buttonsRef.current[target]?.focus();\n };\n\n const handleKeyDown = (event: React.KeyboardEvent, index: number) => {\n if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n event.preventDefault();\n move(index, 1);\n } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n event.preventDefault();\n move(index, -1);\n }\n };\n\n return (\n <div\n ref={ref}\n role=\"radiogroup\"\n className={clsx(styles.root, styles[shape], styles[size], className)}\n {...props}\n >\n {options.map((option, index) => {\n const selected = option.value === value;\n return (\n <button\n key={option.value}\n ref={(node) => {\n buttonsRef.current[index] = node;\n }}\n type=\"button\"\n role=\"radio\"\n aria-checked={selected}\n tabIndex={selected ? 0 : -1}\n disabled={option.disabled}\n className={clsx(styles.segment, selected && styles.isOn)}\n onClick={() => onChange(option.value)}\n onKeyDown={(event) => handleKeyDown(event, index)}\n >\n {option.label}\n </button>\n );\n })}\n </div>\n );\n}\n\nconst SegmentedControlBase = forwardRef(SegmentedControlInner);\n(SegmentedControlBase as { displayName?: string }).displayName = 'SegmentedControl';\n\n/**\n * Cast preserves the generic `T` for consumers (forwardRef otherwise collapses\n * it to `string`), while the runtime object keeps its `displayName`.\n */\nexport const SegmentedControl = SegmentedControlBase as <T extends string>(\n props: SegmentedControlProps<T> & React.RefAttributes<HTMLDivElement>,\n) => React.ReactElement | null;\n"],"names":["useRef","jsx","clsx","styles","forwardRef"],"mappings":";;;;;;AAQA,SAAS,iBACP,SACA,MACA,MACQ;AACR,QAAM,QAAQ,QAAQ;AACtB,WAAS,IAAI,GAAG,KAAK,OAAO,KAAK,GAAG;AAClC,UAAM,OAAO,OAAO,OAAO,IAAI,QAAQ,KAAK;AAC5C,QAAI,CAAC,QAAQ,GAAG,EAAE,SAAU,QAAO;AAAA,EACrC;AACA,SAAO;AACT;AAEA,SAAS,sBACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,aAAaA,MAAAA,OAAqC,EAAE;AAE1D,QAAM,OAAO,CAAC,cAAsB,SAAiB;;AACnD,UAAM,SAAS,iBAAiB,SAAS,cAAc,IAAI;AAC3D,QAAI,WAAW,aAAc;AAC7B,aAAS,QAAQ,MAAM,EAAE,KAAK;AAC9B,qBAAW,QAAQ,MAAM,MAAzB,mBAA4B;AAAA,EAC9B;AAEA,QAAM,gBAAgB,CAAC,OAA4B,UAAkB;AACnE,QAAI,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,aAAa;AAC3D,YAAM,eAAA;AACN,WAAK,OAAO,CAAC;AAAA,IACf,WAAW,MAAM,QAAQ,eAAe,MAAM,QAAQ,WAAW;AAC/D,YAAM,eAAA;AACN,WAAK,OAAO,EAAE;AAAA,IAChB;AAAA,EACF;AAEA,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,WAAWC,KAAAA,KAAKC,wBAAAA,QAAO,MAAMA,wBAAAA,QAAO,KAAK,GAAGA,wBAAAA,QAAO,IAAI,GAAG,SAAS;AAAA,MAClE,GAAG;AAAA,MAEH,UAAA,QAAQ,IAAI,CAAC,QAAQ,UAAU;AAC9B,cAAM,WAAW,OAAO,UAAU;AAClC,eACEF,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YAEC,KAAK,CAAC,SAAS;AACb,yBAAW,QAAQ,KAAK,IAAI;AAAA,YAC9B;AAAA,YACA,MAAK;AAAA,YACL,MAAK;AAAA,YACL,gBAAc;AAAA,YACd,UAAU,WAAW,IAAI;AAAA,YACzB,UAAU,OAAO;AAAA,YACjB,WAAWC,KAAAA,KAAKC,wBAAAA,QAAO,SAAS,YAAYA,wBAAAA,QAAO,IAAI;AAAA,YACvD,SAAS,MAAM,SAAS,OAAO,KAAK;AAAA,YACpC,WAAW,CAAC,UAAU,cAAc,OAAO,KAAK;AAAA,YAE/C,UAAA,OAAO;AAAA,UAAA;AAAA,UAbH,OAAO;AAAA,QAAA;AAAA,MAgBlB,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,MAAM,uBAAuBC,MAAAA,WAAW,qBAAqB;AAC5D,qBAAkD,cAAc;AAM1D,MAAM,mBAAmB;;"}
1
+ {"version":3,"file":"index35.cjs","sources":["../src/primitives/Row/Row.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { RowProps } from './Row.types';\nimport styles from './Row.module.css';\n\nconst gapClass: Record<string, string> = {\n none: styles.gapNone,\n '2xs': styles.gap2xs,\n xs: styles.gapXs,\n sm: styles.gapSm,\n md: styles.gapMd,\n lg: styles.gapLg,\n xl: styles.gapXl,\n '2xl': styles.gap2xl,\n '3xl': styles.gap3xl,\n};\n\nconst alignClass: Record<string, string> = {\n start: styles.alignStart,\n center: styles.alignCenter,\n end: styles.alignEnd,\n stretch: styles.alignStretch,\n baseline: styles.alignBaseline,\n};\n\nconst justifyClass: Record<string, string> = {\n start: styles.justifyStart,\n center: styles.justifyCenter,\n end: styles.justifyEnd,\n between: styles.justifyBetween,\n around: styles.justifyAround,\n evenly: styles.justifyEvenly,\n};\n\nexport const Row = forwardRef<HTMLDivElement, RowProps>(\n (\n {\n gap = 'md',\n align = 'stretch',\n justify = 'start',\n wrap = true,\n direction = 'row',\n className,\n children,\n ...props\n },\n ref,\n ) => (\n <div\n ref={ref}\n className={clsx(\n styles.root,\n gapClass[gap],\n alignClass[align],\n justifyClass[justify],\n wrap ? styles.wrap : styles.nowrap,\n direction === 'column' ? styles.dirColumn : styles.dirRow,\n className,\n )}\n {...props}\n >\n {children}\n </div>\n ),\n);\n\nRow.displayName = 'Row';\n"],"names":["styles","forwardRef","jsx","clsx"],"mappings":";;;;;;AAKA,MAAM,WAAmC;AAAA,EACvC,MAAMA,WAAAA,QAAO;AAAA,EACb,OAAOA,WAAAA,QAAO;AAAA,EACd,IAAIA,WAAAA,QAAO;AAAA,EACX,IAAIA,WAAAA,QAAO;AAAA,EACX,IAAIA,WAAAA,QAAO;AAAA,EACX,IAAIA,WAAAA,QAAO;AAAA,EACX,IAAIA,WAAAA,QAAO;AAAA,EACX,OAAOA,WAAAA,QAAO;AAAA,EACd,OAAOA,WAAAA,QAAO;AAChB;AAEA,MAAM,aAAqC;AAAA,EACzC,OAAOA,WAAAA,QAAO;AAAA,EACd,QAAQA,WAAAA,QAAO;AAAA,EACf,KAAKA,WAAAA,QAAO;AAAA,EACZ,SAASA,WAAAA,QAAO;AAAA,EAChB,UAAUA,WAAAA,QAAO;AACnB;AAEA,MAAM,eAAuC;AAAA,EAC3C,OAAOA,WAAAA,QAAO;AAAA,EACd,QAAQA,WAAAA,QAAO;AAAA,EACf,KAAKA,WAAAA,QAAO;AAAA,EACZ,SAASA,WAAAA,QAAO;AAAA,EAChB,QAAQA,WAAAA,QAAO;AAAA,EACf,QAAQA,WAAAA,QAAO;AACjB;AAEO,MAAM,MAAMC,MAAAA;AAAAA,EACjB,CACE;AAAA,IACE,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,OAAO;AAAA,IACP,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QAEAC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAWC,KAAAA;AAAAA,QACTH,WAAAA,QAAO;AAAA,QACP,SAAS,GAAG;AAAA,QACZ,WAAW,KAAK;AAAA,QAChB,aAAa,OAAO;AAAA,QACpB,OAAOA,WAAAA,QAAO,OAAOA,WAAAA,QAAO;AAAA,QAC5B,cAAc,WAAWA,WAAAA,QAAO,YAAYA,WAAAA,QAAO;AAAA,QACnD;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,IAAI,cAAc;;"}
package/dist/index35.js CHANGED
@@ -1,76 +1,63 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import { forwardRef, useRef } from "react";
3
- import { clsx } from "./index48.js";
4
- import styles from "./index57.js";
5
- function nextEnabledIndex(options, from, step) {
6
- const count = options.length;
7
- for (let i = 1; i <= count; i += 1) {
8
- const idx = (from + step * i + count * i) % count;
9
- if (!options[idx].disabled) return idx;
10
- }
11
- return from;
12
- }
13
- function SegmentedControlInner({
14
- options,
15
- value,
16
- onChange,
17
- shape = "pill",
18
- size = "md",
19
- className,
20
- ...props
21
- }, ref) {
22
- const buttonsRef = useRef([]);
23
- const move = (currentIndex, step) => {
24
- var _a;
25
- const target = nextEnabledIndex(options, currentIndex, step);
26
- if (target === currentIndex) return;
27
- onChange(options[target].value);
28
- (_a = buttonsRef.current[target]) == null ? void 0 : _a.focus();
29
- };
30
- const handleKeyDown = (event, index) => {
31
- if (event.key === "ArrowRight" || event.key === "ArrowDown") {
32
- event.preventDefault();
33
- move(index, 1);
34
- } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
35
- event.preventDefault();
36
- move(index, -1);
37
- }
38
- };
39
- return /* @__PURE__ */ jsx(
2
+ import { forwardRef } from "react";
3
+ import { clsx } from "./index50.js";
4
+ import styles from "./index76.js";
5
+ const gapClass = {
6
+ none: styles.gapNone,
7
+ "2xs": styles.gap2xs,
8
+ xs: styles.gapXs,
9
+ sm: styles.gapSm,
10
+ md: styles.gapMd,
11
+ lg: styles.gapLg,
12
+ xl: styles.gapXl,
13
+ "2xl": styles.gap2xl,
14
+ "3xl": styles.gap3xl
15
+ };
16
+ const alignClass = {
17
+ start: styles.alignStart,
18
+ center: styles.alignCenter,
19
+ end: styles.alignEnd,
20
+ stretch: styles.alignStretch,
21
+ baseline: styles.alignBaseline
22
+ };
23
+ const justifyClass = {
24
+ start: styles.justifyStart,
25
+ center: styles.justifyCenter,
26
+ end: styles.justifyEnd,
27
+ between: styles.justifyBetween,
28
+ around: styles.justifyAround,
29
+ evenly: styles.justifyEvenly
30
+ };
31
+ const Row = forwardRef(
32
+ ({
33
+ gap = "md",
34
+ align = "stretch",
35
+ justify = "start",
36
+ wrap = true,
37
+ direction = "row",
38
+ className,
39
+ children,
40
+ ...props
41
+ }, ref) => /* @__PURE__ */ jsx(
40
42
  "div",
41
43
  {
42
44
  ref,
43
- role: "radiogroup",
44
- className: clsx(styles.root, styles[shape], styles[size], className),
45
+ className: clsx(
46
+ styles.root,
47
+ gapClass[gap],
48
+ alignClass[align],
49
+ justifyClass[justify],
50
+ wrap ? styles.wrap : styles.nowrap,
51
+ direction === "column" ? styles.dirColumn : styles.dirRow,
52
+ className
53
+ ),
45
54
  ...props,
46
- children: options.map((option, index) => {
47
- const selected = option.value === value;
48
- return /* @__PURE__ */ jsx(
49
- "button",
50
- {
51
- ref: (node) => {
52
- buttonsRef.current[index] = node;
53
- },
54
- type: "button",
55
- role: "radio",
56
- "aria-checked": selected,
57
- tabIndex: selected ? 0 : -1,
58
- disabled: option.disabled,
59
- className: clsx(styles.segment, selected && styles.isOn),
60
- onClick: () => onChange(option.value),
61
- onKeyDown: (event) => handleKeyDown(event, index),
62
- children: option.label
63
- },
64
- option.value
65
- );
66
- })
55
+ children
67
56
  }
68
- );
69
- }
70
- const SegmentedControlBase = forwardRef(SegmentedControlInner);
71
- SegmentedControlBase.displayName = "SegmentedControl";
72
- const SegmentedControl = SegmentedControlBase;
57
+ )
58
+ );
59
+ Row.displayName = "Row";
73
60
  export {
74
- SegmentedControl
61
+ Row
75
62
  };
76
63
  //# sourceMappingURL=index35.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index35.js","sources":["../src/primitives/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { forwardRef, useRef } from 'react';\nimport clsx from 'clsx';\nimport type {\n SegmentedControlOption,\n SegmentedControlProps,\n} from './SegmentedControl.types';\nimport styles from './SegmentedControl.module.css';\n\nfunction nextEnabledIndex<T extends string>(\n options: SegmentedControlOption<T>[],\n from: number,\n step: 1 | -1,\n): number {\n const count = options.length;\n for (let i = 1; i <= count; i += 1) {\n const idx = (from + step * i + count * i) % count;\n if (!options[idx].disabled) return idx;\n }\n return from;\n}\n\nfunction SegmentedControlInner<T extends string>(\n {\n options,\n value,\n onChange,\n shape = 'pill',\n size = 'md',\n className,\n ...props\n }: SegmentedControlProps<T>,\n ref: React.ForwardedRef<HTMLDivElement>,\n) {\n const buttonsRef = useRef<(HTMLButtonElement | null)[]>([]);\n\n const move = (currentIndex: number, step: 1 | -1) => {\n const target = nextEnabledIndex(options, currentIndex, step);\n if (target === currentIndex) return;\n onChange(options[target].value);\n buttonsRef.current[target]?.focus();\n };\n\n const handleKeyDown = (event: React.KeyboardEvent, index: number) => {\n if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n event.preventDefault();\n move(index, 1);\n } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n event.preventDefault();\n move(index, -1);\n }\n };\n\n return (\n <div\n ref={ref}\n role=\"radiogroup\"\n className={clsx(styles.root, styles[shape], styles[size], className)}\n {...props}\n >\n {options.map((option, index) => {\n const selected = option.value === value;\n return (\n <button\n key={option.value}\n ref={(node) => {\n buttonsRef.current[index] = node;\n }}\n type=\"button\"\n role=\"radio\"\n aria-checked={selected}\n tabIndex={selected ? 0 : -1}\n disabled={option.disabled}\n className={clsx(styles.segment, selected && styles.isOn)}\n onClick={() => onChange(option.value)}\n onKeyDown={(event) => handleKeyDown(event, index)}\n >\n {option.label}\n </button>\n );\n })}\n </div>\n );\n}\n\nconst SegmentedControlBase = forwardRef(SegmentedControlInner);\n(SegmentedControlBase as { displayName?: string }).displayName = 'SegmentedControl';\n\n/**\n * Cast preserves the generic `T` for consumers (forwardRef otherwise collapses\n * it to `string`), while the runtime object keeps its `displayName`.\n */\nexport const SegmentedControl = SegmentedControlBase as <T extends string>(\n props: SegmentedControlProps<T> & React.RefAttributes<HTMLDivElement>,\n) => React.ReactElement | null;\n"],"names":[],"mappings":";;;;AAQA,SAAS,iBACP,SACA,MACA,MACQ;AACR,QAAM,QAAQ,QAAQ;AACtB,WAAS,IAAI,GAAG,KAAK,OAAO,KAAK,GAAG;AAClC,UAAM,OAAO,OAAO,OAAO,IAAI,QAAQ,KAAK;AAC5C,QAAI,CAAC,QAAQ,GAAG,EAAE,SAAU,QAAO;AAAA,EACrC;AACA,SAAO;AACT;AAEA,SAAS,sBACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,aAAa,OAAqC,EAAE;AAE1D,QAAM,OAAO,CAAC,cAAsB,SAAiB;;AACnD,UAAM,SAAS,iBAAiB,SAAS,cAAc,IAAI;AAC3D,QAAI,WAAW,aAAc;AAC7B,aAAS,QAAQ,MAAM,EAAE,KAAK;AAC9B,qBAAW,QAAQ,MAAM,MAAzB,mBAA4B;AAAA,EAC9B;AAEA,QAAM,gBAAgB,CAAC,OAA4B,UAAkB;AACnE,QAAI,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,aAAa;AAC3D,YAAM,eAAA;AACN,WAAK,OAAO,CAAC;AAAA,IACf,WAAW,MAAM,QAAQ,eAAe,MAAM,QAAQ,WAAW;AAC/D,YAAM,eAAA;AACN,WAAK,OAAO,EAAE;AAAA,IAChB;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,WAAW,KAAK,OAAO,MAAM,OAAO,KAAK,GAAG,OAAO,IAAI,GAAG,SAAS;AAAA,MAClE,GAAG;AAAA,MAEH,UAAA,QAAQ,IAAI,CAAC,QAAQ,UAAU;AAC9B,cAAM,WAAW,OAAO,UAAU;AAClC,eACE;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,KAAK,CAAC,SAAS;AACb,yBAAW,QAAQ,KAAK,IAAI;AAAA,YAC9B;AAAA,YACA,MAAK;AAAA,YACL,MAAK;AAAA,YACL,gBAAc;AAAA,YACd,UAAU,WAAW,IAAI;AAAA,YACzB,UAAU,OAAO;AAAA,YACjB,WAAW,KAAK,OAAO,SAAS,YAAY,OAAO,IAAI;AAAA,YACvD,SAAS,MAAM,SAAS,OAAO,KAAK;AAAA,YACpC,WAAW,CAAC,UAAU,cAAc,OAAO,KAAK;AAAA,YAE/C,UAAA,OAAO;AAAA,UAAA;AAAA,UAbH,OAAO;AAAA,QAAA;AAAA,MAgBlB,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,MAAM,uBAAuB,WAAW,qBAAqB;AAC5D,qBAAkD,cAAc;AAM1D,MAAM,mBAAmB;"}
1
+ {"version":3,"file":"index35.js","sources":["../src/primitives/Row/Row.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { RowProps } from './Row.types';\nimport styles from './Row.module.css';\n\nconst gapClass: Record<string, string> = {\n none: styles.gapNone,\n '2xs': styles.gap2xs,\n xs: styles.gapXs,\n sm: styles.gapSm,\n md: styles.gapMd,\n lg: styles.gapLg,\n xl: styles.gapXl,\n '2xl': styles.gap2xl,\n '3xl': styles.gap3xl,\n};\n\nconst alignClass: Record<string, string> = {\n start: styles.alignStart,\n center: styles.alignCenter,\n end: styles.alignEnd,\n stretch: styles.alignStretch,\n baseline: styles.alignBaseline,\n};\n\nconst justifyClass: Record<string, string> = {\n start: styles.justifyStart,\n center: styles.justifyCenter,\n end: styles.justifyEnd,\n between: styles.justifyBetween,\n around: styles.justifyAround,\n evenly: styles.justifyEvenly,\n};\n\nexport const Row = forwardRef<HTMLDivElement, RowProps>(\n (\n {\n gap = 'md',\n align = 'stretch',\n justify = 'start',\n wrap = true,\n direction = 'row',\n className,\n children,\n ...props\n },\n ref,\n ) => (\n <div\n ref={ref}\n className={clsx(\n styles.root,\n gapClass[gap],\n alignClass[align],\n justifyClass[justify],\n wrap ? styles.wrap : styles.nowrap,\n direction === 'column' ? styles.dirColumn : styles.dirRow,\n className,\n )}\n {...props}\n >\n {children}\n </div>\n ),\n);\n\nRow.displayName = 'Row';\n"],"names":[],"mappings":";;;;AAKA,MAAM,WAAmC;AAAA,EACvC,MAAM,OAAO;AAAA,EACb,OAAO,OAAO;AAAA,EACd,IAAI,OAAO;AAAA,EACX,IAAI,OAAO;AAAA,EACX,IAAI,OAAO;AAAA,EACX,IAAI,OAAO;AAAA,EACX,IAAI,OAAO;AAAA,EACX,OAAO,OAAO;AAAA,EACd,OAAO,OAAO;AAChB;AAEA,MAAM,aAAqC;AAAA,EACzC,OAAO,OAAO;AAAA,EACd,QAAQ,OAAO;AAAA,EACf,KAAK,OAAO;AAAA,EACZ,SAAS,OAAO;AAAA,EAChB,UAAU,OAAO;AACnB;AAEA,MAAM,eAAuC;AAAA,EAC3C,OAAO,OAAO;AAAA,EACd,QAAQ,OAAO;AAAA,EACf,KAAK,OAAO;AAAA,EACZ,SAAS,OAAO;AAAA,EAChB,QAAQ,OAAO;AAAA,EACf,QAAQ,OAAO;AACjB;AAEO,MAAM,MAAM;AAAA,EACjB,CACE;AAAA,IACE,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,OAAO;AAAA,IACP,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QAEA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,OAAO;AAAA,QACP,SAAS,GAAG;AAAA,QACZ,WAAW,KAAK;AAAA,QAChB,aAAa,OAAO;AAAA,QACpB,OAAO,OAAO,OAAO,OAAO;AAAA,QAC5B,cAAc,WAAW,OAAO,YAAY,OAAO;AAAA,QACnD;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,IAAI,cAAc;"}
package/dist/index36.cjs CHANGED
@@ -2,11 +2,156 @@
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const jsxRuntime = require("react/jsx-runtime");
4
4
  const react = require("react");
5
- const clsx = require("./index48.cjs");
6
- const Select_module = require("./index51.cjs");
7
- const Select = react.forwardRef(
8
- ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("select", { ref, className: clsx.clsx(Select_module.default.root, className), ...props, children })
9
- );
10
- Select.displayName = "Select";
11
- exports.Select = Select;
5
+ const ReactECharts = require("echarts-for-react");
6
+ const clsx = require("./index50.cjs");
7
+ const constants = require("./index54.cjs");
8
+ const SankeyChartCard_module = require("./index68.cjs");
9
+ const COLOR_METRIC_OPTIONS = [
10
+ { value: "deviation", label: "Deviation" },
11
+ { value: "severity", label: "Severity" },
12
+ { value: "origin", label: "Origin" },
13
+ { value: "persistence", label: "Persistence" }
14
+ ];
15
+ const WIDTH_METRIC_OPTIONS = [
16
+ { value: "slots", label: "Slots" },
17
+ { value: "distinct_objects", label: "Distinct Objects" }
18
+ ];
19
+ const buildNodes = (rows) => {
20
+ const seen = /* @__PURE__ */ new Set();
21
+ const nodes = [];
22
+ for (const row of rows) {
23
+ if (!seen.has(row.source)) {
24
+ seen.add(row.source);
25
+ nodes.push({ name: row.source });
26
+ }
27
+ if (!seen.has(row.target)) {
28
+ seen.add(row.target);
29
+ nodes.push({ name: row.target });
30
+ }
31
+ }
32
+ return nodes;
33
+ };
34
+ const SankeyChartCard = ({
35
+ title,
36
+ rows,
37
+ isLoading = false,
38
+ error = null,
39
+ onRetry,
40
+ onChartReady,
41
+ actions,
42
+ className,
43
+ colorMetric = "deviation",
44
+ widthMetric = "slots",
45
+ onColorMetricChange,
46
+ onWidthMetricChange,
47
+ onNodeClick,
48
+ onNodeContextMenu,
49
+ maxNodes = constants.MAX_SANKEY_NODES
50
+ }) => {
51
+ const isTruncated = rows.length > maxNodes;
52
+ const visibleRows = isTruncated ? rows.slice(0, maxNodes) : rows;
53
+ const option = react.useMemo(() => {
54
+ const nodes = buildNodes(visibleRows);
55
+ const links = visibleRows.map((row) => ({
56
+ source: row.source,
57
+ target: row.target,
58
+ value: row.value,
59
+ lineStyle: row.color ? { color: row.color } : void 0
60
+ }));
61
+ return {
62
+ tooltip: { trigger: "item" },
63
+ series: [
64
+ {
65
+ type: "sankey",
66
+ data: nodes.map((node, i) => ({
67
+ ...node,
68
+ itemStyle: { color: constants.CHART_COLORS[i % constants.CHART_COLORS.length] }
69
+ })),
70
+ links,
71
+ emphasis: { focus: "adjacency" },
72
+ lineStyle: { color: "gradient", curveness: 0.5 }
73
+ }
74
+ ]
75
+ };
76
+ }, [visibleRows]);
77
+ const handleChartReady = (instance) => {
78
+ if (onNodeClick) {
79
+ instance.on("click", (params) => {
80
+ const p = params;
81
+ if (p.dataType === "node" && p.name) {
82
+ onNodeClick({ name: p.name, type: "node" });
83
+ }
84
+ });
85
+ }
86
+ if (onNodeContextMenu) {
87
+ instance.on("contextmenu", (params) => {
88
+ var _a, _b;
89
+ const p = params;
90
+ if (p.dataType === "node" && p.name) {
91
+ onNodeContextMenu(
92
+ { name: p.name, type: "node" },
93
+ { x: ((_a = p.event) == null ? void 0 : _a.offsetX) ?? 0, y: ((_b = p.event) == null ? void 0 : _b.offsetY) ?? 0 }
94
+ );
95
+ }
96
+ });
97
+ }
98
+ onChartReady == null ? void 0 : onChartReady(instance);
99
+ };
100
+ const hasToolbar = onColorMetricChange || onWidthMetricChange;
101
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(SankeyChartCard_module.default.root, className), children: [
102
+ /* @__PURE__ */ jsxRuntime.jsxs("header", { className: SankeyChartCard_module.default.header, children: [
103
+ /* @__PURE__ */ jsxRuntime.jsx("h3", { className: SankeyChartCard_module.default.title, children: title }),
104
+ actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: SankeyChartCard_module.default.headerActions, children: actions })
105
+ ] }),
106
+ hasToolbar && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: SankeyChartCard_module.default.toolbar, children: [
107
+ onColorMetricChange && /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
108
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: SankeyChartCard_module.default.toolbarLabel, children: "Color: " }),
109
+ /* @__PURE__ */ jsxRuntime.jsx(
110
+ "select",
111
+ {
112
+ className: SankeyChartCard_module.default.toolbarSelect,
113
+ value: colorMetric,
114
+ onChange: (e) => onColorMetricChange(e.target.value),
115
+ children: COLOR_METRIC_OPTIONS.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value))
116
+ }
117
+ )
118
+ ] }),
119
+ onWidthMetricChange && /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
120
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: SankeyChartCard_module.default.toolbarLabel, children: "Width: " }),
121
+ /* @__PURE__ */ jsxRuntime.jsx(
122
+ "select",
123
+ {
124
+ className: SankeyChartCard_module.default.toolbarSelect,
125
+ value: widthMetric,
126
+ onChange: (e) => onWidthMetricChange(e.target.value),
127
+ children: WIDTH_METRIC_OPTIONS.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value))
128
+ }
129
+ )
130
+ ] })
131
+ ] }),
132
+ isTruncated && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: SankeyChartCard_module.default.warning, children: [
133
+ "Showing ",
134
+ maxNodes,
135
+ " of ",
136
+ rows.length,
137
+ " flows. Some data has been truncated."
138
+ ] }),
139
+ isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: SankeyChartCard_module.default.loading, children: "Loading chart..." }),
140
+ !isLoading && error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: SankeyChartCard_module.default.error, children: [
141
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: error }),
142
+ onRetry && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: SankeyChartCard_module.default.retryButton, onClick: onRetry, children: "Retry" })
143
+ ] }),
144
+ !isLoading && !error && rows.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: SankeyChartCard_module.default.empty, children: "No flow data available." }),
145
+ !isLoading && !error && rows.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: SankeyChartCard_module.default.chartContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
146
+ ReactECharts,
147
+ {
148
+ option,
149
+ style: { height: "100%", minHeight: "25rem" },
150
+ onChartReady: handleChartReady
151
+ }
152
+ ) })
153
+ ] });
154
+ };
155
+ SankeyChartCard.displayName = "SankeyChartCard";
156
+ exports.SankeyChartCard = SankeyChartCard;
12
157
  //# sourceMappingURL=index36.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index36.cjs","sources":["../src/primitives/Select/Select.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport styles from './Select.module.css';\n\nexport interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {}\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n ({ className, children, ...props }, ref) => (\n <select ref={ref} className={clsx(styles.root, className)} {...props}>\n {children}\n </select>\n ),\n);\n\nSelect.displayName = 'Select';\n"],"names":["forwardRef","jsx","clsx","styles"],"mappings":";;;;;;AAMO,MAAM,SAASA,MAAAA;AAAAA,EACpB,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAClCC,2BAAAA,IAAC,YAAO,KAAU,WAAWC,KAAAA,KAAKC,sBAAO,MAAM,SAAS,GAAI,GAAG,OAC5D,SAAA,CACH;AAEJ;AAEA,OAAO,cAAc;;"}
1
+ {"version":3,"file":"index36.cjs","sources":["../src/charts/SankeyChartCard/SankeyChartCard.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport ReactECharts from 'echarts-for-react';\nimport clsx from 'clsx';\nimport type { SankeyChartCardProps } from './SankeyChartCard.types';\nimport type { EChartsInstance, SankeyColorMetric, SankeyWidthMetric } from '../../types/chart.types';\nimport { MAX_SANKEY_NODES, CHART_COLORS } from '../../constants';\nimport styles from './SankeyChartCard.module.css';\n\n/** Colour metric labels for the toolbar selector. */\nconst COLOR_METRIC_OPTIONS: { value: SankeyColorMetric; label: string }[] = [\n { value: 'deviation', label: 'Deviation' },\n { value: 'severity', label: 'Severity' },\n { value: 'origin', label: 'Origin' },\n { value: 'persistence', label: 'Persistence' },\n];\n\n/** Width metric labels for the toolbar selector. */\nconst WIDTH_METRIC_OPTIONS: { value: SankeyWidthMetric; label: string }[] = [\n { value: 'slots', label: 'Slots' },\n { value: 'distinct_objects', label: 'Distinct Objects' },\n];\n\n/** Build a unique node list from source/target pairs. */\nconst buildNodes = (rows: SankeyChartCardProps['rows']) => {\n const seen = new Set<string>();\n const nodes: { name: string }[] = [];\n\n for (const row of rows) {\n if (!seen.has(row.source)) {\n seen.add(row.source);\n nodes.push({ name: row.source });\n }\n if (!seen.has(row.target)) {\n seen.add(row.target);\n nodes.push({ name: row.target });\n }\n }\n\n return nodes;\n};\n\nexport const SankeyChartCard = ({\n title,\n rows,\n isLoading = false,\n error = null,\n onRetry,\n onChartReady,\n actions,\n className,\n colorMetric = 'deviation',\n widthMetric = 'slots',\n onColorMetricChange,\n onWidthMetricChange,\n onNodeClick,\n onNodeContextMenu,\n maxNodes = MAX_SANKEY_NODES,\n}: SankeyChartCardProps) => {\n const isTruncated = rows.length > maxNodes;\n const visibleRows = isTruncated ? rows.slice(0, maxNodes) : rows;\n\n const option = useMemo(() => {\n const nodes = buildNodes(visibleRows);\n const links = visibleRows.map((row) => ({\n source: row.source,\n target: row.target,\n value: row.value,\n lineStyle: row.color ? { color: row.color } : undefined,\n }));\n\n return {\n tooltip: { trigger: 'item' as const },\n series: [\n {\n type: 'sankey' as const,\n data: nodes.map((node, i) => ({\n ...node,\n itemStyle: { color: CHART_COLORS[i % CHART_COLORS.length] },\n })),\n links,\n emphasis: { focus: 'adjacency' as const },\n lineStyle: { color: 'gradient' as const, curveness: 0.5 },\n },\n ],\n };\n }, [visibleRows]);\n\n const handleChartReady = (instance: EChartsInstance) => {\n if (onNodeClick) {\n instance.on('click', (params: unknown) => {\n const p = params as { dataType?: string; name?: string };\n if (p.dataType === 'node' && p.name) {\n onNodeClick({ name: p.name, type: 'node' });\n }\n });\n }\n\n if (onNodeContextMenu) {\n instance.on('contextmenu', (params: unknown) => {\n const p = params as { dataType?: string; name?: string; event?: { offsetX?: number; offsetY?: number } };\n if (p.dataType === 'node' && p.name) {\n onNodeContextMenu(\n { name: p.name, type: 'node' },\n { x: p.event?.offsetX ?? 0, y: p.event?.offsetY ?? 0 },\n );\n }\n });\n }\n\n onChartReady?.(instance);\n };\n\n const hasToolbar = onColorMetricChange || onWidthMetricChange;\n\n return (\n <div className={clsx(styles.root, className)}>\n <header className={styles.header}>\n <h3 className={styles.title}>{title}</h3>\n {actions && <div className={styles.headerActions}>{actions}</div>}\n </header>\n\n {hasToolbar && (\n <div className={styles.toolbar}>\n {onColorMetricChange && (\n <label>\n <span className={styles.toolbarLabel}>Color: </span>\n <select\n className={styles.toolbarSelect}\n value={colorMetric}\n onChange={(e) => onColorMetricChange(e.target.value as SankeyColorMetric)}\n >\n {COLOR_METRIC_OPTIONS.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </select>\n </label>\n )}\n {onWidthMetricChange && (\n <label>\n <span className={styles.toolbarLabel}>Width: </span>\n <select\n className={styles.toolbarSelect}\n value={widthMetric}\n onChange={(e) => onWidthMetricChange(e.target.value as SankeyWidthMetric)}\n >\n {WIDTH_METRIC_OPTIONS.map((opt) => (\n <option key={opt.value} value={opt.value}>\n {opt.label}\n </option>\n ))}\n </select>\n </label>\n )}\n </div>\n )}\n\n {isTruncated && (\n <div className={styles.warning}>\n Showing {maxNodes} of {rows.length} flows. Some data has been truncated.\n </div>\n )}\n\n {isLoading && <div className={styles.loading}>Loading chart...</div>}\n\n {!isLoading && error && (\n <div className={styles.error}>\n <span>{error}</span>\n {onRetry && (\n <button type=\"button\" className={styles.retryButton} onClick={onRetry}>\n Retry\n </button>\n )}\n </div>\n )}\n\n {!isLoading && !error && rows.length === 0 && (\n <div className={styles.empty}>No flow data available.</div>\n )}\n\n {!isLoading && !error && rows.length > 0 && (\n <div className={styles.chartContainer}>\n <ReactECharts\n option={option}\n style={{ height: '100%', minHeight: '25rem' }}\n onChartReady={handleChartReady}\n />\n </div>\n )}\n </div>\n );\n};\n\nSankeyChartCard.displayName = 'SankeyChartCard';\n"],"names":["MAX_SANKEY_NODES","useMemo","CHART_COLORS","clsx","styles","jsxs","jsx"],"mappings":"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"}