@ktnpm_devops/react-component 0.4.1 → 0.5.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 (372) hide show
  1. package/dist/charts/Sparkline/Sparkline.d.ts +4 -0
  2. package/dist/charts/Sparkline/Sparkline.d.ts.map +1 -0
  3. package/dist/charts/Sparkline/Sparkline.types.d.ts +15 -0
  4. package/dist/charts/Sparkline/Sparkline.types.d.ts.map +1 -0
  5. package/dist/charts/Sparkline/index.d.ts +3 -0
  6. package/dist/charts/Sparkline/index.d.ts.map +1 -0
  7. package/dist/composites/Accordion/Accordion.d.ts +5 -0
  8. package/dist/composites/Accordion/Accordion.d.ts.map +1 -0
  9. package/dist/composites/Accordion/Accordion.types.d.ts +15 -0
  10. package/dist/composites/Accordion/Accordion.types.d.ts.map +1 -0
  11. package/dist/composites/Accordion/index.d.ts +3 -0
  12. package/dist/composites/Accordion/index.d.ts.map +1 -0
  13. package/dist/composites/DatePickerDropdown/DatePickerDropdown.d.ts +7 -0
  14. package/dist/composites/DatePickerDropdown/DatePickerDropdown.d.ts.map +1 -0
  15. package/dist/composites/DatePickerDropdown/DatePickerDropdown.types.d.ts +20 -0
  16. package/dist/composites/DatePickerDropdown/DatePickerDropdown.types.d.ts.map +1 -0
  17. package/dist/composites/DatePickerDropdown/index.d.ts +3 -0
  18. package/dist/composites/DatePickerDropdown/index.d.ts.map +1 -0
  19. package/dist/composites/FilterDropdown/FilterDropdown.d.ts +7 -0
  20. package/dist/composites/FilterDropdown/FilterDropdown.d.ts.map +1 -0
  21. package/dist/composites/FilterDropdown/FilterDropdown.types.d.ts +29 -0
  22. package/dist/composites/FilterDropdown/FilterDropdown.types.d.ts.map +1 -0
  23. package/dist/composites/FilterDropdown/index.d.ts +3 -0
  24. package/dist/composites/FilterDropdown/index.d.ts.map +1 -0
  25. package/dist/constants.d.ts +2 -0
  26. package/dist/constants.d.ts.map +1 -1
  27. package/dist/data/HeatmapMatrix/HeatmapMatrix.d.ts +4 -0
  28. package/dist/data/HeatmapMatrix/HeatmapMatrix.d.ts.map +1 -0
  29. package/dist/data/HeatmapMatrix/HeatmapMatrix.types.d.ts +40 -0
  30. package/dist/data/HeatmapMatrix/HeatmapMatrix.types.d.ts.map +1 -0
  31. package/dist/data/HeatmapMatrix/index.d.ts +3 -0
  32. package/dist/data/HeatmapMatrix/index.d.ts.map +1 -0
  33. package/dist/index.cjs +49 -29
  34. package/dist/index.cjs.map +1 -1
  35. package/dist/index.d.ts +16 -0
  36. package/dist/index.d.ts.map +1 -1
  37. package/dist/index.js +50 -30
  38. package/dist/index.js.map +1 -1
  39. package/dist/index10.cjs +14 -15
  40. package/dist/index10.cjs.map +1 -1
  41. package/dist/index10.js +15 -16
  42. package/dist/index10.js.map +1 -1
  43. package/dist/index11.cjs +15 -4
  44. package/dist/index11.cjs.map +1 -1
  45. package/dist/index11.js +15 -4
  46. package/dist/index11.js.map +1 -1
  47. package/dist/index12.cjs +4 -16
  48. package/dist/index12.cjs.map +1 -1
  49. package/dist/index12.js +4 -16
  50. package/dist/index12.js.map +1 -1
  51. package/dist/index13.cjs +16 -10
  52. package/dist/index13.cjs.map +1 -1
  53. package/dist/index13.js +16 -10
  54. package/dist/index13.js.map +1 -1
  55. package/dist/index14.cjs +10 -100
  56. package/dist/index14.cjs.map +1 -1
  57. package/dist/index14.js +11 -101
  58. package/dist/index14.js.map +1 -1
  59. package/dist/index15.cjs +100 -20
  60. package/dist/index15.cjs.map +1 -1
  61. package/dist/index15.js +101 -21
  62. package/dist/index15.js.map +1 -1
  63. package/dist/index16.cjs +20 -43
  64. package/dist/index16.cjs.map +1 -1
  65. package/dist/index16.js +21 -44
  66. package/dist/index16.js.map +1 -1
  67. package/dist/index17.cjs +38 -85
  68. package/dist/index17.cjs.map +1 -1
  69. package/dist/index17.js +40 -87
  70. package/dist/index17.js.map +1 -1
  71. package/dist/index18.cjs +85 -153
  72. package/dist/index18.cjs.map +1 -1
  73. package/dist/index18.js +87 -155
  74. package/dist/index18.js.map +1 -1
  75. package/dist/index19.cjs +150 -128
  76. package/dist/index19.cjs.map +1 -1
  77. package/dist/index19.js +150 -128
  78. package/dist/index19.js.map +1 -1
  79. package/dist/index20.cjs +121 -106
  80. package/dist/index20.cjs.map +1 -1
  81. package/dist/index20.js +122 -107
  82. package/dist/index20.js.map +1 -1
  83. package/dist/index21.cjs +121 -17
  84. package/dist/index21.cjs.map +1 -1
  85. package/dist/index21.js +121 -17
  86. package/dist/index21.js.map +1 -1
  87. package/dist/index22.cjs +17 -8
  88. package/dist/index22.cjs.map +1 -1
  89. package/dist/index22.js +18 -9
  90. package/dist/index22.js.map +1 -1
  91. package/dist/index23.cjs +152 -119
  92. package/dist/index23.cjs.map +1 -1
  93. package/dist/index23.js +153 -120
  94. package/dist/index23.js.map +1 -1
  95. package/dist/index24.cjs +125 -33
  96. package/dist/index24.cjs.map +1 -1
  97. package/dist/index24.js +126 -34
  98. package/dist/index24.js.map +1 -1
  99. package/dist/index25.cjs +71 -218
  100. package/dist/index25.cjs.map +1 -1
  101. package/dist/index25.js +73 -220
  102. package/dist/index25.js.map +1 -1
  103. package/dist/index26.cjs +6 -32
  104. package/dist/index26.cjs.map +1 -1
  105. package/dist/index26.js +7 -33
  106. package/dist/index26.js.map +1 -1
  107. package/dist/index27.cjs +120 -67
  108. package/dist/index27.cjs.map +1 -1
  109. package/dist/index27.js +121 -68
  110. package/dist/index27.js.map +1 -1
  111. package/dist/index28.cjs +37 -58
  112. package/dist/index28.cjs.map +1 -1
  113. package/dist/index28.js +38 -59
  114. package/dist/index28.js.map +1 -1
  115. package/dist/index29.cjs +208 -137
  116. package/dist/index29.cjs.map +1 -1
  117. package/dist/index29.js +209 -138
  118. package/dist/index29.js.map +1 -1
  119. package/dist/index30.cjs +32 -6
  120. package/dist/index30.cjs.map +1 -1
  121. package/dist/index30.js +33 -7
  122. package/dist/index30.js.map +1 -1
  123. package/dist/index31.cjs +78 -17
  124. package/dist/index31.cjs.map +1 -1
  125. package/dist/index31.js +78 -17
  126. package/dist/index31.js.map +1 -1
  127. package/dist/index32.cjs +55 -73
  128. package/dist/index32.cjs.map +1 -1
  129. package/dist/index32.js +57 -75
  130. package/dist/index32.js.map +1 -1
  131. package/dist/index33.cjs +145 -135
  132. package/dist/index33.cjs.map +1 -1
  133. package/dist/index33.js +146 -136
  134. package/dist/index33.js.map +1 -1
  135. package/dist/index34.cjs +66 -99
  136. package/dist/index34.cjs.map +1 -1
  137. package/dist/index34.js +68 -101
  138. package/dist/index34.js.map +1 -1
  139. package/dist/index35.cjs +8 -6
  140. package/dist/index35.cjs.map +1 -1
  141. package/dist/index35.js +8 -6
  142. package/dist/index35.js.map +1 -1
  143. package/dist/index36.cjs +16 -215
  144. package/dist/index36.cjs.map +1 -1
  145. package/dist/index36.js +16 -215
  146. package/dist/index36.js.map +1 -1
  147. package/dist/index37.cjs +76 -7
  148. package/dist/index37.cjs.map +1 -1
  149. package/dist/index37.js +78 -9
  150. package/dist/index37.js.map +1 -1
  151. package/dist/index38.cjs +145 -16
  152. package/dist/index38.cjs.map +1 -1
  153. package/dist/index38.js +144 -15
  154. package/dist/index38.js.map +1 -1
  155. package/dist/index39.cjs +66 -28
  156. package/dist/index39.cjs.map +1 -1
  157. package/dist/index39.js +65 -27
  158. package/dist/index39.js.map +1 -1
  159. package/dist/index40.cjs +106 -69
  160. package/dist/index40.cjs.map +1 -1
  161. package/dist/index40.js +105 -68
  162. package/dist/index40.js.map +1 -1
  163. package/dist/index41.cjs +49 -16
  164. package/dist/index41.cjs.map +1 -1
  165. package/dist/index41.js +48 -15
  166. package/dist/index41.js.map +1 -1
  167. package/dist/index42.cjs +8 -25
  168. package/dist/index42.cjs.map +1 -1
  169. package/dist/index42.js +7 -24
  170. package/dist/index42.js.map +1 -1
  171. package/dist/index43.cjs +218 -7
  172. package/dist/index43.cjs.map +1 -1
  173. package/dist/index43.js +217 -6
  174. package/dist/index43.js.map +1 -1
  175. package/dist/index44.cjs +10 -7
  176. package/dist/index44.cjs.map +1 -1
  177. package/dist/index44.js +9 -6
  178. package/dist/index44.js.map +1 -1
  179. package/dist/index45.cjs +18 -67
  180. package/dist/index45.cjs.map +1 -1
  181. package/dist/index45.js +18 -67
  182. package/dist/index45.js.map +1 -1
  183. package/dist/index46.cjs +67 -18
  184. package/dist/index46.cjs.map +1 -1
  185. package/dist/index46.js +66 -17
  186. package/dist/index46.js.map +1 -1
  187. package/dist/index47.cjs +15 -57
  188. package/dist/index47.cjs.map +1 -1
  189. package/dist/index47.js +15 -57
  190. package/dist/index47.js.map +1 -1
  191. package/dist/index48.cjs +2 -35
  192. package/dist/index48.cjs.map +1 -1
  193. package/dist/index48.js +3 -36
  194. package/dist/index48.js.map +1 -1
  195. package/dist/index49.cjs +22 -49
  196. package/dist/index49.cjs.map +1 -1
  197. package/dist/index49.js +22 -49
  198. package/dist/index49.js.map +1 -1
  199. package/dist/index50.cjs +15 -18
  200. package/dist/index50.cjs.map +1 -1
  201. package/dist/index50.js +15 -18
  202. package/dist/index50.js.map +1 -1
  203. package/dist/index51.cjs +69 -33
  204. package/dist/index51.cjs.map +1 -1
  205. package/dist/index51.js +68 -32
  206. package/dist/index51.js.map +1 -1
  207. package/dist/index52.cjs +22 -13
  208. package/dist/index52.cjs.map +1 -1
  209. package/dist/index52.js +23 -14
  210. package/dist/index52.js.map +1 -1
  211. package/dist/index53.cjs +13 -10
  212. package/dist/index53.cjs.map +1 -1
  213. package/dist/index53.js +14 -11
  214. package/dist/index53.js.map +1 -1
  215. package/dist/index54.cjs +11 -2
  216. package/dist/index54.cjs.map +1 -1
  217. package/dist/index54.js +11 -2
  218. package/dist/index54.js.map +1 -1
  219. package/dist/index55.cjs +20 -2
  220. package/dist/index55.cjs.map +1 -1
  221. package/dist/index55.js +21 -3
  222. package/dist/index55.js.map +1 -1
  223. package/dist/index56.cjs +2 -20
  224. package/dist/index56.cjs.map +1 -1
  225. package/dist/index56.js +3 -21
  226. package/dist/index56.js.map +1 -1
  227. package/dist/index57.cjs +1 -4
  228. package/dist/index57.cjs.map +1 -1
  229. package/dist/index57.js +1 -4
  230. package/dist/index57.js.map +1 -1
  231. package/dist/index58.cjs +30 -75
  232. package/dist/index58.cjs.map +1 -1
  233. package/dist/index58.js +30 -75
  234. package/dist/index58.js.map +1 -1
  235. package/dist/index59.cjs +13 -10
  236. package/dist/index59.cjs.map +1 -1
  237. package/dist/index59.js +13 -10
  238. package/dist/index59.js.map +1 -1
  239. package/dist/index60.cjs +15 -27
  240. package/dist/index60.cjs.map +1 -1
  241. package/dist/index60.js +15 -27
  242. package/dist/index60.js.map +1 -1
  243. package/dist/index61.cjs +16 -34
  244. package/dist/index61.cjs.map +1 -1
  245. package/dist/index61.js +16 -34
  246. package/dist/index61.js.map +1 -1
  247. package/dist/index62.cjs +10 -16
  248. package/dist/index62.cjs.map +1 -1
  249. package/dist/index62.js +11 -17
  250. package/dist/index62.js.map +1 -1
  251. package/dist/index63.cjs +13 -37
  252. package/dist/index63.cjs.map +1 -1
  253. package/dist/index63.js +14 -38
  254. package/dist/index63.js.map +1 -1
  255. package/dist/index64.cjs +16 -52
  256. package/dist/index64.cjs.map +1 -1
  257. package/dist/index64.js +16 -52
  258. package/dist/index64.js.map +1 -1
  259. package/dist/index65.cjs +49 -13
  260. package/dist/index65.cjs.map +1 -1
  261. package/dist/index65.js +49 -13
  262. package/dist/index65.js.map +1 -1
  263. package/dist/index66.cjs +36 -15
  264. package/dist/index66.cjs.map +1 -1
  265. package/dist/index66.js +37 -16
  266. package/dist/index66.js.map +1 -1
  267. package/dist/index67.cjs +42 -33
  268. package/dist/index67.cjs.map +1 -1
  269. package/dist/index67.js +42 -33
  270. package/dist/index67.js.map +1 -1
  271. package/dist/index68.cjs +43 -134
  272. package/dist/index68.cjs.map +1 -1
  273. package/dist/index68.js +42 -133
  274. package/dist/index68.js.map +1 -1
  275. package/dist/index69.cjs +2 -41
  276. package/dist/index69.cjs.map +1 -1
  277. package/dist/index69.js +3 -42
  278. package/dist/index69.js.map +1 -1
  279. package/dist/index70.cjs +27 -0
  280. package/dist/index70.cjs.map +1 -0
  281. package/dist/index70.js +27 -0
  282. package/dist/index70.js.map +1 -0
  283. package/dist/index71.cjs +27 -0
  284. package/dist/index71.cjs.map +1 -0
  285. package/dist/index71.js +27 -0
  286. package/dist/index71.js.map +1 -0
  287. package/dist/index72.cjs +12 -0
  288. package/dist/index72.cjs.map +1 -0
  289. package/dist/index72.js +12 -0
  290. package/dist/index72.js.map +1 -0
  291. package/dist/index73.cjs +39 -0
  292. package/dist/index73.cjs.map +1 -0
  293. package/dist/index73.js +39 -0
  294. package/dist/index73.js.map +1 -0
  295. package/dist/index74.cjs +36 -0
  296. package/dist/index74.cjs.map +1 -0
  297. package/dist/index74.js +36 -0
  298. package/dist/index74.js.map +1 -0
  299. package/dist/index75.cjs +72 -0
  300. package/dist/index75.cjs.map +1 -0
  301. package/dist/index75.js +72 -0
  302. package/dist/index75.js.map +1 -0
  303. package/dist/index76.cjs +27 -0
  304. package/dist/index76.cjs.map +1 -0
  305. package/dist/index76.js +27 -0
  306. package/dist/index76.js.map +1 -0
  307. package/dist/index77.cjs +136 -0
  308. package/dist/index77.cjs.map +1 -0
  309. package/dist/index77.js +136 -0
  310. package/dist/index77.js.map +1 -0
  311. package/dist/index78.cjs +48 -0
  312. package/dist/index78.cjs.map +1 -0
  313. package/dist/index78.js +48 -0
  314. package/dist/index78.js.map +1 -0
  315. package/dist/index79.cjs +87 -0
  316. package/dist/index79.cjs.map +1 -0
  317. package/dist/index79.js +87 -0
  318. package/dist/index79.js.map +1 -0
  319. package/dist/index80.cjs +60 -0
  320. package/dist/index80.cjs.map +1 -0
  321. package/dist/index80.js +60 -0
  322. package/dist/index80.js.map +1 -0
  323. package/dist/index81.cjs +36 -0
  324. package/dist/index81.cjs.map +1 -0
  325. package/dist/index81.js +36 -0
  326. package/dist/index81.js.map +1 -0
  327. package/dist/index82.cjs +33 -0
  328. package/dist/index82.cjs.map +1 -0
  329. package/dist/index82.js +33 -0
  330. package/dist/index82.js.map +1 -0
  331. package/dist/index83.cjs +42 -0
  332. package/dist/index83.cjs.map +1 -0
  333. package/dist/index83.js +42 -0
  334. package/dist/index83.js.map +1 -0
  335. package/dist/index84.cjs +60 -0
  336. package/dist/index84.cjs.map +1 -0
  337. package/dist/index84.js +60 -0
  338. package/dist/index84.js.map +1 -0
  339. package/dist/index85.cjs +12 -0
  340. package/dist/index85.cjs.map +1 -0
  341. package/dist/index85.js +12 -0
  342. package/dist/index85.js.map +1 -0
  343. package/dist/index86.cjs +18 -0
  344. package/dist/index86.cjs.map +1 -0
  345. package/dist/index86.js +18 -0
  346. package/dist/index86.js.map +1 -0
  347. package/dist/index9.cjs +45 -14
  348. package/dist/index9.cjs.map +1 -1
  349. package/dist/index9.js +46 -15
  350. package/dist/index9.js.map +1 -1
  351. package/dist/primitives/SegmentedControl/SegmentedControl.d.ts +8 -0
  352. package/dist/primitives/SegmentedControl/SegmentedControl.d.ts.map +1 -0
  353. package/dist/primitives/SegmentedControl/SegmentedControl.types.d.ts +25 -0
  354. package/dist/primitives/SegmentedControl/SegmentedControl.types.d.ts.map +1 -0
  355. package/dist/primitives/SegmentedControl/index.d.ts +3 -0
  356. package/dist/primitives/SegmentedControl/index.d.ts.map +1 -0
  357. package/dist/primitives/StatCard/StatCard.d.ts +4 -0
  358. package/dist/primitives/StatCard/StatCard.d.ts.map +1 -0
  359. package/dist/primitives/StatCard/StatCard.types.d.ts +16 -0
  360. package/dist/primitives/StatCard/StatCard.types.d.ts.map +1 -0
  361. package/dist/primitives/StatCard/index.d.ts +3 -0
  362. package/dist/primitives/StatCard/index.d.ts.map +1 -0
  363. package/dist/primitives/Toast/Toast.d.ts +5 -0
  364. package/dist/primitives/Toast/Toast.d.ts.map +1 -0
  365. package/dist/primitives/Toast/Toast.types.d.ts +28 -0
  366. package/dist/primitives/Toast/Toast.types.d.ts.map +1 -0
  367. package/dist/primitives/Toast/ToastProvider.d.ts +5 -0
  368. package/dist/primitives/Toast/ToastProvider.d.ts.map +1 -0
  369. package/dist/primitives/Toast/index.d.ts +4 -0
  370. package/dist/primitives/Toast/index.d.ts.map +1 -0
  371. package/dist/style.css +561 -0
  372. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"index37.cjs","sources":["../src/primitives/Textarea/Textarea.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport styles from './Textarea.module.css';\n\nexport interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n ({ className, ...props }, ref) => (\n <textarea ref={ref} className={clsx(styles.root, className)} {...props} />\n ),\n);\n\nTextarea.displayName = 'Textarea';\n"],"names":["forwardRef","jsx","clsx","styles"],"mappings":";;;;;;AAMO,MAAM,WAAWA,MAAAA;AAAAA,EACtB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxBC,2BAAAA,IAAC,YAAA,EAAS,KAAU,WAAWC,KAAAA,KAAKC,gBAAAA,QAAO,MAAM,SAAS,GAAI,GAAG,MAAA,CAAO;AAE5E;AAEA,SAAS,cAAc;;"}
1
+ {"version":3,"file":"index37.cjs","sources":["../src/composites/Sidebar/Sidebar.tsx"],"sourcesContent":["import { createContext, useContext, useId, useState } from 'react';\nimport clsx from 'clsx';\nimport { SIDEBAR } from '../../constants';\nimport type { SidebarProps, SidebarSectionProps } from './Sidebar.types';\nimport styles from './Sidebar.module.css';\n\ninterface SidebarContextValue {\n isCollapsed: boolean;\n}\n\nconst SidebarContext = createContext<SidebarContextValue>({ isCollapsed: false });\n\n/** Hook to read sidebar collapsed state from context. */\nexport const useSidebarContext = () => useContext(SidebarContext);\n\n/* ------------------------------------------------------------------ */\n/* Sidebar.Section */\n/* ------------------------------------------------------------------ */\n\nconst SidebarSection = ({\n title,\n children,\n collapsible = false,\n defaultCollapsed = false,\n}: SidebarSectionProps) => {\n const { isCollapsed: sidebarCollapsed } = useSidebarContext();\n const [sectionCollapsed, setSectionCollapsed] = useState(defaultCollapsed);\n const titleId = useId();\n\n const isOpen = !collapsible || !sectionCollapsed;\n\n return (\n <div className={styles.section} role=\"group\" aria-labelledby={title ? titleId : undefined}>\n {title && !sidebarCollapsed && (\n collapsible ? (\n <button\n id={titleId}\n type=\"button\"\n className={styles.sectionToggle}\n onClick={() => setSectionCollapsed((prev) => !prev)}\n aria-expanded={isOpen}\n >\n <span className={styles.sectionTitle}>{title}</span>\n <span className={clsx(styles.sectionChevron, { [styles.sectionChevronOpen]: isOpen })}>\n <svg width={12} height={12} viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M3 4.5L6 7.5L9 4.5\" stroke=\"currentColor\" strokeWidth={1.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n </span>\n </button>\n ) : (\n <span id={titleId} className={styles.sectionTitle}>\n {title}\n </span>\n )\n )}\n {isOpen && <div className={styles.sectionItems}>{children}</div>}\n </div>\n );\n};\n\nSidebarSection.displayName = 'Sidebar.Section';\n\n/* ------------------------------------------------------------------ */\n/* Sidebar */\n/* ------------------------------------------------------------------ */\n\nconst SidebarRoot = ({\n isCollapsed = false,\n onToggleCollapse,\n width = SIDEBAR.WIDTH,\n collapsedWidth = SIDEBAR.COLLAPSED_WIDTH,\n header,\n footer,\n children,\n className,\n}: SidebarProps) => {\n const currentWidth = isCollapsed ? collapsedWidth : width;\n\n return (\n <SidebarContext.Provider value={{ isCollapsed }}>\n <nav\n className={clsx(styles.root, { [styles.collapsed]: isCollapsed }, className)}\n style={{ width: `${currentWidth}px` }}\n aria-label=\"Main navigation\"\n >\n {header && <div className={styles.header}>{header}</div>}\n\n <div className={styles.body}>{children}</div>\n\n {footer && <div className={styles.footer}>{footer}</div>}\n\n {onToggleCollapse && (\n <button\n type=\"button\"\n className={styles.toggle}\n onClick={onToggleCollapse}\n aria-expanded={!isCollapsed}\n aria-label=\"Toggle sidebar\"\n >\n <svg width={16} height={16} viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n {isCollapsed ? (\n <path d=\"M6 3L11 8L6 13\" stroke=\"currentColor\" strokeWidth={1.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n ) : (\n <path d=\"M10 3L5 8L10 13\" stroke=\"currentColor\" strokeWidth={1.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n )}\n </svg>\n </button>\n )}\n </nav>\n </SidebarContext.Provider>\n );\n};\n\nSidebarRoot.displayName = 'Sidebar';\n\n/** Compound Sidebar component. */\nexport const Sidebar = Object.assign(SidebarRoot, {\n Section: SidebarSection,\n});\n"],"names":["createContext","useContext","useState","useId","jsxs","styles","jsx","clsx","SIDEBAR"],"mappings":"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"}
package/dist/index37.js CHANGED
@@ -1,12 +1,81 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import { forwardRef } from "react";
3
- import { clsx } from "./index38.js";
4
- import styles from "./index54.js";
5
- const Textarea = forwardRef(
6
- ({ className, ...props }, ref) => /* @__PURE__ */ jsx("textarea", { ref, className: clsx(styles.root, className), ...props })
7
- );
8
- Textarea.displayName = "Textarea";
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { useContext, useState, useId, createContext } from "react";
3
+ import { clsx } from "./index47.js";
4
+ import { SIDEBAR } from "./index51.js";
5
+ import styles from "./index58.js";
6
+ const SidebarContext = createContext({ isCollapsed: false });
7
+ const useSidebarContext = () => useContext(SidebarContext);
8
+ const SidebarSection = ({
9
+ title,
10
+ children,
11
+ collapsible = false,
12
+ defaultCollapsed = false
13
+ }) => {
14
+ const { isCollapsed: sidebarCollapsed } = useSidebarContext();
15
+ const [sectionCollapsed, setSectionCollapsed] = useState(defaultCollapsed);
16
+ const titleId = useId();
17
+ const isOpen = !collapsible || !sectionCollapsed;
18
+ return /* @__PURE__ */ jsxs("div", { className: styles.section, role: "group", "aria-labelledby": title ? titleId : void 0, children: [
19
+ title && !sidebarCollapsed && (collapsible ? /* @__PURE__ */ jsxs(
20
+ "button",
21
+ {
22
+ id: titleId,
23
+ type: "button",
24
+ className: styles.sectionToggle,
25
+ onClick: () => setSectionCollapsed((prev) => !prev),
26
+ "aria-expanded": isOpen,
27
+ children: [
28
+ /* @__PURE__ */ jsx("span", { className: styles.sectionTitle, children: title }),
29
+ /* @__PURE__ */ jsx("span", { className: clsx(styles.sectionChevron, { [styles.sectionChevronOpen]: isOpen }), children: /* @__PURE__ */ jsx("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M3 4.5L6 7.5L9 4.5", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }) }) })
30
+ ]
31
+ }
32
+ ) : /* @__PURE__ */ jsx("span", { id: titleId, className: styles.sectionTitle, children: title })),
33
+ isOpen && /* @__PURE__ */ jsx("div", { className: styles.sectionItems, children })
34
+ ] });
35
+ };
36
+ SidebarSection.displayName = "Sidebar.Section";
37
+ const SidebarRoot = ({
38
+ isCollapsed = false,
39
+ onToggleCollapse,
40
+ width = SIDEBAR.WIDTH,
41
+ collapsedWidth = SIDEBAR.COLLAPSED_WIDTH,
42
+ header,
43
+ footer,
44
+ children,
45
+ className
46
+ }) => {
47
+ const currentWidth = isCollapsed ? collapsedWidth : width;
48
+ return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: { isCollapsed }, children: /* @__PURE__ */ jsxs(
49
+ "nav",
50
+ {
51
+ className: clsx(styles.root, { [styles.collapsed]: isCollapsed }, className),
52
+ style: { width: `${currentWidth}px` },
53
+ "aria-label": "Main navigation",
54
+ children: [
55
+ header && /* @__PURE__ */ jsx("div", { className: styles.header, children: header }),
56
+ /* @__PURE__ */ jsx("div", { className: styles.body, children }),
57
+ footer && /* @__PURE__ */ jsx("div", { className: styles.footer, children: footer }),
58
+ onToggleCollapse && /* @__PURE__ */ jsx(
59
+ "button",
60
+ {
61
+ type: "button",
62
+ className: styles.toggle,
63
+ onClick: onToggleCollapse,
64
+ "aria-expanded": !isCollapsed,
65
+ "aria-label": "Toggle sidebar",
66
+ children: /* @__PURE__ */ jsx("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: isCollapsed ? /* @__PURE__ */ jsx("path", { d: "M6 3L11 8L6 13", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }) : /* @__PURE__ */ jsx("path", { d: "M10 3L5 8L10 13", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }) })
67
+ }
68
+ )
69
+ ]
70
+ }
71
+ ) });
72
+ };
73
+ SidebarRoot.displayName = "Sidebar";
74
+ const Sidebar = Object.assign(SidebarRoot, {
75
+ Section: SidebarSection
76
+ });
9
77
  export {
10
- Textarea
78
+ Sidebar,
79
+ useSidebarContext
11
80
  };
12
81
  //# sourceMappingURL=index37.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index37.js","sources":["../src/primitives/Textarea/Textarea.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport styles from './Textarea.module.css';\n\nexport interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n ({ className, ...props }, ref) => (\n <textarea ref={ref} className={clsx(styles.root, className)} {...props} />\n ),\n);\n\nTextarea.displayName = 'Textarea';\n"],"names":[],"mappings":";;;;AAMO,MAAM,WAAW;AAAA,EACtB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QACxB,oBAAC,YAAA,EAAS,KAAU,WAAW,KAAK,OAAO,MAAM,SAAS,GAAI,GAAG,MAAA,CAAO;AAE5E;AAEA,SAAS,cAAc;"}
1
+ {"version":3,"file":"index37.js","sources":["../src/composites/Sidebar/Sidebar.tsx"],"sourcesContent":["import { createContext, useContext, useId, useState } from 'react';\nimport clsx from 'clsx';\nimport { SIDEBAR } from '../../constants';\nimport type { SidebarProps, SidebarSectionProps } from './Sidebar.types';\nimport styles from './Sidebar.module.css';\n\ninterface SidebarContextValue {\n isCollapsed: boolean;\n}\n\nconst SidebarContext = createContext<SidebarContextValue>({ isCollapsed: false });\n\n/** Hook to read sidebar collapsed state from context. */\nexport const useSidebarContext = () => useContext(SidebarContext);\n\n/* ------------------------------------------------------------------ */\n/* Sidebar.Section */\n/* ------------------------------------------------------------------ */\n\nconst SidebarSection = ({\n title,\n children,\n collapsible = false,\n defaultCollapsed = false,\n}: SidebarSectionProps) => {\n const { isCollapsed: sidebarCollapsed } = useSidebarContext();\n const [sectionCollapsed, setSectionCollapsed] = useState(defaultCollapsed);\n const titleId = useId();\n\n const isOpen = !collapsible || !sectionCollapsed;\n\n return (\n <div className={styles.section} role=\"group\" aria-labelledby={title ? titleId : undefined}>\n {title && !sidebarCollapsed && (\n collapsible ? (\n <button\n id={titleId}\n type=\"button\"\n className={styles.sectionToggle}\n onClick={() => setSectionCollapsed((prev) => !prev)}\n aria-expanded={isOpen}\n >\n <span className={styles.sectionTitle}>{title}</span>\n <span className={clsx(styles.sectionChevron, { [styles.sectionChevronOpen]: isOpen })}>\n <svg width={12} height={12} viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M3 4.5L6 7.5L9 4.5\" stroke=\"currentColor\" strokeWidth={1.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n </span>\n </button>\n ) : (\n <span id={titleId} className={styles.sectionTitle}>\n {title}\n </span>\n )\n )}\n {isOpen && <div className={styles.sectionItems}>{children}</div>}\n </div>\n );\n};\n\nSidebarSection.displayName = 'Sidebar.Section';\n\n/* ------------------------------------------------------------------ */\n/* Sidebar */\n/* ------------------------------------------------------------------ */\n\nconst SidebarRoot = ({\n isCollapsed = false,\n onToggleCollapse,\n width = SIDEBAR.WIDTH,\n collapsedWidth = SIDEBAR.COLLAPSED_WIDTH,\n header,\n footer,\n children,\n className,\n}: SidebarProps) => {\n const currentWidth = isCollapsed ? collapsedWidth : width;\n\n return (\n <SidebarContext.Provider value={{ isCollapsed }}>\n <nav\n className={clsx(styles.root, { [styles.collapsed]: isCollapsed }, className)}\n style={{ width: `${currentWidth}px` }}\n aria-label=\"Main navigation\"\n >\n {header && <div className={styles.header}>{header}</div>}\n\n <div className={styles.body}>{children}</div>\n\n {footer && <div className={styles.footer}>{footer}</div>}\n\n {onToggleCollapse && (\n <button\n type=\"button\"\n className={styles.toggle}\n onClick={onToggleCollapse}\n aria-expanded={!isCollapsed}\n aria-label=\"Toggle sidebar\"\n >\n <svg width={16} height={16} viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n {isCollapsed ? (\n <path d=\"M6 3L11 8L6 13\" stroke=\"currentColor\" strokeWidth={1.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n ) : (\n <path d=\"M10 3L5 8L10 13\" stroke=\"currentColor\" strokeWidth={1.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n )}\n </svg>\n </button>\n )}\n </nav>\n </SidebarContext.Provider>\n );\n};\n\nSidebarRoot.displayName = 'Sidebar';\n\n/** Compound Sidebar component. */\nexport const Sidebar = Object.assign(SidebarRoot, {\n Section: SidebarSection,\n});\n"],"names":[],"mappings":"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"}
package/dist/index38.cjs CHANGED
@@ -1,18 +1,147 @@
1
1
  "use strict";
2
- Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
- function r(e) {
4
- var t, f, n = "";
5
- if ("string" == typeof e || "number" == typeof e) n += e;
6
- else if ("object" == typeof e) if (Array.isArray(e)) {
7
- var o = e.length;
8
- for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
9
- } else for (f in e) e[f] && (n && (n += " "), n += f);
10
- return n;
11
- }
12
- function clsx() {
13
- for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
14
- return n;
15
- }
16
- exports.clsx = clsx;
17
- exports.default = clsx;
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const jsxRuntime = require("react/jsx-runtime");
4
+ const react = require("react");
5
+ const clsx = require("./index47.cjs");
6
+ const useClickOutside = require("./index4.cjs");
7
+ const useEscapeKey = require("./index5.cjs");
8
+ const constants = require("./index51.cjs");
9
+ const SingleSelectDropdown_module = require("./index80.cjs");
10
+ const SingleSelectDropdown = ({
11
+ label,
12
+ options,
13
+ selected,
14
+ onSelect,
15
+ customTriggerLabel,
16
+ onClear,
17
+ showClearButton = false
18
+ }) => {
19
+ const [isOpen, setIsOpen] = react.useState(false);
20
+ const [searchTerm, setSearchTerm] = react.useState("");
21
+ const [focusedIndex, setFocusedIndex] = react.useState(-1);
22
+ const containerRef = react.useRef(null);
23
+ const listRef = react.useRef(null);
24
+ const close = react.useCallback(() => {
25
+ setIsOpen(false);
26
+ setSearchTerm("");
27
+ setFocusedIndex(-1);
28
+ }, []);
29
+ useClickOutside.useClickOutside(containerRef, close);
30
+ useEscapeKey.useEscapeKey(close, isOpen);
31
+ const filteredOptions = react.useMemo(() => {
32
+ if (!searchTerm.trim()) return options;
33
+ const term = searchTerm.trim().toLowerCase();
34
+ return options.filter((opt) => {
35
+ const lbl = opt.label ?? opt.value;
36
+ return lbl.toLowerCase().includes(term) || opt.value.toLowerCase().includes(term);
37
+ });
38
+ }, [options, searchTerm]);
39
+ const handleSelect = (value) => {
40
+ onSelect(value);
41
+ close();
42
+ };
43
+ const handleClear = (e) => {
44
+ e.stopPropagation();
45
+ onClear == null ? void 0 : onClear();
46
+ close();
47
+ };
48
+ const handleKeyDown = (e) => {
49
+ if (!isOpen) return;
50
+ if (e.key === "ArrowDown") {
51
+ e.preventDefault();
52
+ setFocusedIndex((prev) => Math.min(prev + 1, filteredOptions.length - 1));
53
+ } else if (e.key === "ArrowUp") {
54
+ e.preventDefault();
55
+ setFocusedIndex((prev) => Math.max(prev - 1, 0));
56
+ } else if (e.key === "Enter" && focusedIndex >= 0 && focusedIndex < filteredOptions.length) {
57
+ e.preventDefault();
58
+ handleSelect(filteredOptions[focusedIndex].value);
59
+ }
60
+ };
61
+ const selectedOption = options.find((o) => o.value === selected);
62
+ const displayLabel = customTriggerLabel || (selectedOption == null ? void 0 : selectedOption.label) || (selectedOption == null ? void 0 : selectedOption.value) || "Select";
63
+ const showClear = showClearButton && selected !== null;
64
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: SingleSelectDropdown_module.default.root, ref: containerRef, onKeyDown: handleKeyDown, children: [
65
+ /* @__PURE__ */ jsxRuntime.jsx(
66
+ "button",
67
+ {
68
+ type: "button",
69
+ className: clsx.clsx(SingleSelectDropdown_module.default.trigger, { [SingleSelectDropdown_module.default.active]: isOpen }),
70
+ onClick: () => {
71
+ setIsOpen((prev) => !prev);
72
+ setFocusedIndex(-1);
73
+ },
74
+ "aria-expanded": isOpen,
75
+ "aria-haspopup": "listbox",
76
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: SingleSelectDropdown_module.default.triggerContent, children: [
77
+ /* @__PURE__ */ jsxRuntime.jsx("svg", { className: SingleSelectDropdown_module.default.chevron, width: constants.ICON_SIZE.MD, height: constants.ICON_SIZE.MD, viewBox: constants.SVG_VIEWBOX, fill: "none", stroke: "currentColor", strokeWidth: constants.SVG_STROKE_WIDTH, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" }) }),
78
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: SingleSelectDropdown_module.default.label, children: label }),
79
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: SingleSelectDropdown_module.default.value, children: displayLabel }),
80
+ showClear && /* @__PURE__ */ jsxRuntime.jsx(
81
+ "span",
82
+ {
83
+ className: SingleSelectDropdown_module.default.clear,
84
+ onClick: handleClear,
85
+ role: "button",
86
+ tabIndex: 0,
87
+ "aria-label": `Clear ${label}`,
88
+ onKeyDown: (e) => {
89
+ if (e.key === "Enter" || e.key === " ") {
90
+ e.preventDefault();
91
+ handleClear(e);
92
+ }
93
+ },
94
+ children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: constants.ICON_SIZE.SM, height: constants.ICON_SIZE.SM, viewBox: constants.SVG_VIEWBOX, fill: "none", stroke: "currentColor", strokeWidth: constants.SVG_STROKE_WIDTH, strokeLinecap: "round", strokeLinejoin: "round", children: [
95
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
96
+ /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
97
+ ] })
98
+ }
99
+ )
100
+ ] })
101
+ }
102
+ ),
103
+ isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: SingleSelectDropdown_module.default.panel, role: "listbox", ref: listRef, children: [
104
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: SingleSelectDropdown_module.default.searchContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
105
+ "input",
106
+ {
107
+ type: "search",
108
+ className: SingleSelectDropdown_module.default.search,
109
+ placeholder: `Search ${label.toLowerCase()}`,
110
+ value: searchTerm,
111
+ onChange: (e) => {
112
+ setSearchTerm(e.target.value);
113
+ setFocusedIndex(-1);
114
+ },
115
+ onClick: (e) => e.stopPropagation()
116
+ }
117
+ ) }),
118
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: SingleSelectDropdown_module.default.list, children: [
119
+ filteredOptions.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: SingleSelectDropdown_module.default.noResults, children: "No matches found" }),
120
+ filteredOptions.map((opt, i) => {
121
+ const isSelected = opt.value === selected;
122
+ const isFocused = i === focusedIndex;
123
+ return /* @__PURE__ */ jsxRuntime.jsx(
124
+ "button",
125
+ {
126
+ type: "button",
127
+ className: clsx.clsx(SingleSelectDropdown_module.default.option, {
128
+ [SingleSelectDropdown_module.default.selected]: isSelected,
129
+ [SingleSelectDropdown_module.default.focused]: isFocused
130
+ }),
131
+ onClick: () => handleSelect(opt.value),
132
+ role: "option",
133
+ "aria-selected": isSelected,
134
+ children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: SingleSelectDropdown_module.default.optionLabel, children: [
135
+ opt.label ?? opt.value,
136
+ opt.count !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: SingleSelectDropdown_module.default.optionCount, children: opt.count })
137
+ ] })
138
+ },
139
+ opt.value
140
+ );
141
+ })
142
+ ] })
143
+ ] })
144
+ ] });
145
+ };
146
+ exports.SingleSelectDropdown = SingleSelectDropdown;
18
147
  //# sourceMappingURL=index38.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index38.cjs","sources":["../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;"],"names":[],"mappings":";;AAAA,SAAS,EAAE,GAAE;AAAC,MAAI,GAAE,GAAE,IAAE;AAAG,MAAG,YAAU,OAAO,KAAG,YAAU,OAAO,EAAE,MAAG;AAAA,WAAU,YAAU,OAAO,EAAE,KAAG,MAAM,QAAQ,CAAC,GAAE;AAAC,QAAI,IAAE,EAAE;AAAO,SAAI,IAAE,GAAE,IAAE,GAAE,IAAI,GAAE,CAAC,MAAI,IAAE,EAAE,EAAE,CAAC,CAAC,OAAK,MAAI,KAAG,MAAK,KAAG;AAAA,EAAE,MAAM,MAAI,KAAK,EAAE,GAAE,CAAC,MAAI,MAAI,KAAG,MAAK,KAAG;AAAG,SAAO;AAAC;AAAQ,SAAS,OAAM;AAAC,WAAQ,GAAE,GAAE,IAAE,GAAE,IAAE,IAAG,IAAE,UAAU,QAAO,IAAE,GAAE,IAAI,EAAC,IAAE,UAAU,CAAC,OAAK,IAAE,EAAE,CAAC,OAAK,MAAI,KAAG,MAAK,KAAG;AAAG,SAAO;AAAC;;;","x_google_ignoreList":[0]}
1
+ {"version":3,"file":"index38.cjs","sources":["../src/composites/SingleSelectDropdown/SingleSelectDropdown.tsx"],"sourcesContent":["import { useState, useRef, useMemo, useCallback } from 'react';\nimport clsx from 'clsx';\nimport { useClickOutside } from '../../hooks/useClickOutside';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport { ICON_SIZE, SVG_VIEWBOX, SVG_STROKE_WIDTH } from '../../constants';\nimport styles from './SingleSelectDropdown.module.css';\n\nexport interface SingleSelectOption {\n value: string;\n label?: string;\n count?: number;\n}\n\nexport interface SingleSelectDropdownProps {\n /** Label displayed on the trigger. */\n label: string;\n /** Available options. */\n options: SingleSelectOption[];\n /** Currently selected value (controlled). `null` means no selection. */\n selected: string | null;\n /** Called when the user selects an option. */\n onSelect: (value: string) => void;\n /** Override the trigger value label. */\n customTriggerLabel?: string;\n /** Called when the user clears the selection. */\n onClear?: () => void;\n /** Show clear button when a value is selected. */\n showClearButton?: boolean;\n}\n\nexport const SingleSelectDropdown = ({\n label,\n options,\n selected,\n onSelect,\n customTriggerLabel,\n onClear,\n showClearButton = false,\n}: SingleSelectDropdownProps) => {\n const [isOpen, setIsOpen] = useState(false);\n const [searchTerm, setSearchTerm] = useState('');\n const [focusedIndex, setFocusedIndex] = useState(-1);\n const containerRef = useRef<HTMLDivElement>(null);\n const listRef = useRef<HTMLDivElement>(null);\n\n const close = useCallback(() => {\n setIsOpen(false);\n setSearchTerm('');\n setFocusedIndex(-1);\n }, []);\n\n useClickOutside(containerRef, close);\n useEscapeKey(close, isOpen);\n\n const filteredOptions = useMemo(() => {\n if (!searchTerm.trim()) return options;\n const term = searchTerm.trim().toLowerCase();\n return options.filter((opt) => {\n const lbl = opt.label ?? opt.value;\n return lbl.toLowerCase().includes(term) || opt.value.toLowerCase().includes(term);\n });\n }, [options, searchTerm]);\n\n const handleSelect = (value: string) => {\n onSelect(value);\n close();\n };\n\n const handleClear = (e: React.MouseEvent) => {\n e.stopPropagation();\n onClear?.();\n close();\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (!isOpen) return;\n\n if (e.key === 'ArrowDown') {\n e.preventDefault();\n setFocusedIndex((prev) => Math.min(prev + 1, filteredOptions.length - 1));\n } else if (e.key === 'ArrowUp') {\n e.preventDefault();\n setFocusedIndex((prev) => Math.max(prev - 1, 0));\n } else if (e.key === 'Enter' && focusedIndex >= 0 && focusedIndex < filteredOptions.length) {\n e.preventDefault();\n handleSelect(filteredOptions[focusedIndex].value);\n }\n };\n\n const selectedOption = options.find((o) => o.value === selected);\n const displayLabel = customTriggerLabel || selectedOption?.label || selectedOption?.value || 'Select';\n const showClear = showClearButton && selected !== null;\n\n return (\n <div className={styles.root} ref={containerRef} onKeyDown={handleKeyDown}>\n <button\n type=\"button\"\n className={clsx(styles.trigger, { [styles.active]: isOpen })}\n onClick={() => {\n setIsOpen((prev) => !prev);\n setFocusedIndex(-1);\n }}\n aria-expanded={isOpen}\n aria-haspopup=\"listbox\"\n >\n <div className={styles.triggerContent}>\n <svg className={styles.chevron} width={ICON_SIZE.MD} height={ICON_SIZE.MD} viewBox={SVG_VIEWBOX} fill=\"none\" stroke=\"currentColor\" strokeWidth={SVG_STROKE_WIDTH} strokeLinecap=\"round\" strokeLinejoin=\"round\">\n <polyline points=\"6 9 12 15 18 9\" />\n </svg>\n <span className={styles.label}>{label}</span>\n <span className={styles.value}>{displayLabel}</span>\n {showClear && (\n <span\n className={styles.clear}\n onClick={handleClear}\n role=\"button\"\n tabIndex={0}\n aria-label={`Clear ${label}`}\n onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleClear(e as unknown as React.MouseEvent); } }}\n >\n <svg width={ICON_SIZE.SM} height={ICON_SIZE.SM} viewBox={SVG_VIEWBOX} fill=\"none\" stroke=\"currentColor\" strokeWidth={SVG_STROKE_WIDTH} strokeLinecap=\"round\" strokeLinejoin=\"round\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n </svg>\n </span>\n )}\n </div>\n </button>\n\n {isOpen && (\n <div className={styles.panel} role=\"listbox\" ref={listRef}>\n <div className={styles.searchContainer}>\n <input\n type=\"search\"\n className={styles.search}\n placeholder={`Search ${label.toLowerCase()}`}\n value={searchTerm}\n onChange={(e) => {\n setSearchTerm(e.target.value);\n setFocusedIndex(-1);\n }}\n onClick={(e) => e.stopPropagation()}\n />\n </div>\n <div className={styles.list}>\n {filteredOptions.length === 0 && (\n <div className={styles.noResults}>No matches found</div>\n )}\n {filteredOptions.map((opt, i) => {\n const isSelected = opt.value === selected;\n const isFocused = i === focusedIndex;\n return (\n <button\n key={opt.value}\n type=\"button\"\n className={clsx(styles.option, {\n [styles.selected]: isSelected,\n [styles.focused]: isFocused,\n })}\n onClick={() => handleSelect(opt.value)}\n role=\"option\"\n aria-selected={isSelected}\n >\n <span className={styles.optionLabel}>\n {opt.label ?? opt.value}\n {opt.count !== undefined && (\n <span className={styles.optionCount}>{opt.count}</span>\n )}\n </span>\n </button>\n );\n })}\n </div>\n </div>\n )}\n </div>\n );\n};\n"],"names":["useState","useRef","useCallback","useClickOutside","useEscapeKey","useMemo","jsxs","styles","jsx","clsx","ICON_SIZE","SVG_VIEWBOX","SVG_STROKE_WIDTH"],"mappings":"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"}
package/dist/index38.js CHANGED
@@ -1,18 +1,147 @@
1
- function r(e) {
2
- var t, f, n = "";
3
- if ("string" == typeof e || "number" == typeof e) n += e;
4
- else if ("object" == typeof e) if (Array.isArray(e)) {
5
- var o = e.length;
6
- for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
7
- } else for (f in e) e[f] && (n && (n += " "), n += f);
8
- return n;
9
- }
10
- function clsx() {
11
- for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
12
- return n;
13
- }
1
+ import { jsxs, jsx } from "react/jsx-runtime";
2
+ import { useState, useRef, useCallback, useMemo } from "react";
3
+ import { clsx } from "./index47.js";
4
+ import { useClickOutside } from "./index4.js";
5
+ import { useEscapeKey } from "./index5.js";
6
+ import { SVG_STROKE_WIDTH, SVG_VIEWBOX, ICON_SIZE } from "./index51.js";
7
+ import styles from "./index80.js";
8
+ const SingleSelectDropdown = ({
9
+ label,
10
+ options,
11
+ selected,
12
+ onSelect,
13
+ customTriggerLabel,
14
+ onClear,
15
+ showClearButton = false
16
+ }) => {
17
+ const [isOpen, setIsOpen] = useState(false);
18
+ const [searchTerm, setSearchTerm] = useState("");
19
+ const [focusedIndex, setFocusedIndex] = useState(-1);
20
+ const containerRef = useRef(null);
21
+ const listRef = useRef(null);
22
+ const close = useCallback(() => {
23
+ setIsOpen(false);
24
+ setSearchTerm("");
25
+ setFocusedIndex(-1);
26
+ }, []);
27
+ useClickOutside(containerRef, close);
28
+ useEscapeKey(close, isOpen);
29
+ const filteredOptions = useMemo(() => {
30
+ if (!searchTerm.trim()) return options;
31
+ const term = searchTerm.trim().toLowerCase();
32
+ return options.filter((opt) => {
33
+ const lbl = opt.label ?? opt.value;
34
+ return lbl.toLowerCase().includes(term) || opt.value.toLowerCase().includes(term);
35
+ });
36
+ }, [options, searchTerm]);
37
+ const handleSelect = (value) => {
38
+ onSelect(value);
39
+ close();
40
+ };
41
+ const handleClear = (e) => {
42
+ e.stopPropagation();
43
+ onClear == null ? void 0 : onClear();
44
+ close();
45
+ };
46
+ const handleKeyDown = (e) => {
47
+ if (!isOpen) return;
48
+ if (e.key === "ArrowDown") {
49
+ e.preventDefault();
50
+ setFocusedIndex((prev) => Math.min(prev + 1, filteredOptions.length - 1));
51
+ } else if (e.key === "ArrowUp") {
52
+ e.preventDefault();
53
+ setFocusedIndex((prev) => Math.max(prev - 1, 0));
54
+ } else if (e.key === "Enter" && focusedIndex >= 0 && focusedIndex < filteredOptions.length) {
55
+ e.preventDefault();
56
+ handleSelect(filteredOptions[focusedIndex].value);
57
+ }
58
+ };
59
+ const selectedOption = options.find((o) => o.value === selected);
60
+ const displayLabel = customTriggerLabel || (selectedOption == null ? void 0 : selectedOption.label) || (selectedOption == null ? void 0 : selectedOption.value) || "Select";
61
+ const showClear = showClearButton && selected !== null;
62
+ return /* @__PURE__ */ jsxs("div", { className: styles.root, ref: containerRef, onKeyDown: handleKeyDown, children: [
63
+ /* @__PURE__ */ jsx(
64
+ "button",
65
+ {
66
+ type: "button",
67
+ className: clsx(styles.trigger, { [styles.active]: isOpen }),
68
+ onClick: () => {
69
+ setIsOpen((prev) => !prev);
70
+ setFocusedIndex(-1);
71
+ },
72
+ "aria-expanded": isOpen,
73
+ "aria-haspopup": "listbox",
74
+ children: /* @__PURE__ */ jsxs("div", { className: styles.triggerContent, children: [
75
+ /* @__PURE__ */ jsx("svg", { className: styles.chevron, width: ICON_SIZE.MD, height: ICON_SIZE.MD, viewBox: SVG_VIEWBOX, fill: "none", stroke: "currentColor", strokeWidth: SVG_STROKE_WIDTH, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" }) }),
76
+ /* @__PURE__ */ jsx("span", { className: styles.label, children: label }),
77
+ /* @__PURE__ */ jsx("span", { className: styles.value, children: displayLabel }),
78
+ showClear && /* @__PURE__ */ jsx(
79
+ "span",
80
+ {
81
+ className: styles.clear,
82
+ onClick: handleClear,
83
+ role: "button",
84
+ tabIndex: 0,
85
+ "aria-label": `Clear ${label}`,
86
+ onKeyDown: (e) => {
87
+ if (e.key === "Enter" || e.key === " ") {
88
+ e.preventDefault();
89
+ handleClear(e);
90
+ }
91
+ },
92
+ children: /* @__PURE__ */ jsxs("svg", { width: ICON_SIZE.SM, height: ICON_SIZE.SM, viewBox: SVG_VIEWBOX, fill: "none", stroke: "currentColor", strokeWidth: SVG_STROKE_WIDTH, strokeLinecap: "round", strokeLinejoin: "round", children: [
93
+ /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
94
+ /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
95
+ ] })
96
+ }
97
+ )
98
+ ] })
99
+ }
100
+ ),
101
+ isOpen && /* @__PURE__ */ jsxs("div", { className: styles.panel, role: "listbox", ref: listRef, children: [
102
+ /* @__PURE__ */ jsx("div", { className: styles.searchContainer, children: /* @__PURE__ */ jsx(
103
+ "input",
104
+ {
105
+ type: "search",
106
+ className: styles.search,
107
+ placeholder: `Search ${label.toLowerCase()}`,
108
+ value: searchTerm,
109
+ onChange: (e) => {
110
+ setSearchTerm(e.target.value);
111
+ setFocusedIndex(-1);
112
+ },
113
+ onClick: (e) => e.stopPropagation()
114
+ }
115
+ ) }),
116
+ /* @__PURE__ */ jsxs("div", { className: styles.list, children: [
117
+ filteredOptions.length === 0 && /* @__PURE__ */ jsx("div", { className: styles.noResults, children: "No matches found" }),
118
+ filteredOptions.map((opt, i) => {
119
+ const isSelected = opt.value === selected;
120
+ const isFocused = i === focusedIndex;
121
+ return /* @__PURE__ */ jsx(
122
+ "button",
123
+ {
124
+ type: "button",
125
+ className: clsx(styles.option, {
126
+ [styles.selected]: isSelected,
127
+ [styles.focused]: isFocused
128
+ }),
129
+ onClick: () => handleSelect(opt.value),
130
+ role: "option",
131
+ "aria-selected": isSelected,
132
+ children: /* @__PURE__ */ jsxs("span", { className: styles.optionLabel, children: [
133
+ opt.label ?? opt.value,
134
+ opt.count !== void 0 && /* @__PURE__ */ jsx("span", { className: styles.optionCount, children: opt.count })
135
+ ] })
136
+ },
137
+ opt.value
138
+ );
139
+ })
140
+ ] })
141
+ ] })
142
+ ] });
143
+ };
14
144
  export {
15
- clsx,
16
- clsx as default
145
+ SingleSelectDropdown
17
146
  };
18
147
  //# sourceMappingURL=index38.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index38.js","sources":["../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;"],"names":[],"mappings":"AAAA,SAAS,EAAE,GAAE;AAAC,MAAI,GAAE,GAAE,IAAE;AAAG,MAAG,YAAU,OAAO,KAAG,YAAU,OAAO,EAAE,MAAG;AAAA,WAAU,YAAU,OAAO,EAAE,KAAG,MAAM,QAAQ,CAAC,GAAE;AAAC,QAAI,IAAE,EAAE;AAAO,SAAI,IAAE,GAAE,IAAE,GAAE,IAAI,GAAE,CAAC,MAAI,IAAE,EAAE,EAAE,CAAC,CAAC,OAAK,MAAI,KAAG,MAAK,KAAG;AAAA,EAAE,MAAM,MAAI,KAAK,EAAE,GAAE,CAAC,MAAI,MAAI,KAAG,MAAK,KAAG;AAAG,SAAO;AAAC;AAAQ,SAAS,OAAM;AAAC,WAAQ,GAAE,GAAE,IAAE,GAAE,IAAE,IAAG,IAAE,UAAU,QAAO,IAAE,GAAE,IAAI,EAAC,IAAE,UAAU,CAAC,OAAK,IAAE,EAAE,CAAC,OAAK,MAAI,KAAG,MAAK,KAAG;AAAG,SAAO;AAAC;","x_google_ignoreList":[0]}
1
+ {"version":3,"file":"index38.js","sources":["../src/composites/SingleSelectDropdown/SingleSelectDropdown.tsx"],"sourcesContent":["import { useState, useRef, useMemo, useCallback } from 'react';\nimport clsx from 'clsx';\nimport { useClickOutside } from '../../hooks/useClickOutside';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport { ICON_SIZE, SVG_VIEWBOX, SVG_STROKE_WIDTH } from '../../constants';\nimport styles from './SingleSelectDropdown.module.css';\n\nexport interface SingleSelectOption {\n value: string;\n label?: string;\n count?: number;\n}\n\nexport interface SingleSelectDropdownProps {\n /** Label displayed on the trigger. */\n label: string;\n /** Available options. */\n options: SingleSelectOption[];\n /** Currently selected value (controlled). `null` means no selection. */\n selected: string | null;\n /** Called when the user selects an option. */\n onSelect: (value: string) => void;\n /** Override the trigger value label. */\n customTriggerLabel?: string;\n /** Called when the user clears the selection. */\n onClear?: () => void;\n /** Show clear button when a value is selected. */\n showClearButton?: boolean;\n}\n\nexport const SingleSelectDropdown = ({\n label,\n options,\n selected,\n onSelect,\n customTriggerLabel,\n onClear,\n showClearButton = false,\n}: SingleSelectDropdownProps) => {\n const [isOpen, setIsOpen] = useState(false);\n const [searchTerm, setSearchTerm] = useState('');\n const [focusedIndex, setFocusedIndex] = useState(-1);\n const containerRef = useRef<HTMLDivElement>(null);\n const listRef = useRef<HTMLDivElement>(null);\n\n const close = useCallback(() => {\n setIsOpen(false);\n setSearchTerm('');\n setFocusedIndex(-1);\n }, []);\n\n useClickOutside(containerRef, close);\n useEscapeKey(close, isOpen);\n\n const filteredOptions = useMemo(() => {\n if (!searchTerm.trim()) return options;\n const term = searchTerm.trim().toLowerCase();\n return options.filter((opt) => {\n const lbl = opt.label ?? opt.value;\n return lbl.toLowerCase().includes(term) || opt.value.toLowerCase().includes(term);\n });\n }, [options, searchTerm]);\n\n const handleSelect = (value: string) => {\n onSelect(value);\n close();\n };\n\n const handleClear = (e: React.MouseEvent) => {\n e.stopPropagation();\n onClear?.();\n close();\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (!isOpen) return;\n\n if (e.key === 'ArrowDown') {\n e.preventDefault();\n setFocusedIndex((prev) => Math.min(prev + 1, filteredOptions.length - 1));\n } else if (e.key === 'ArrowUp') {\n e.preventDefault();\n setFocusedIndex((prev) => Math.max(prev - 1, 0));\n } else if (e.key === 'Enter' && focusedIndex >= 0 && focusedIndex < filteredOptions.length) {\n e.preventDefault();\n handleSelect(filteredOptions[focusedIndex].value);\n }\n };\n\n const selectedOption = options.find((o) => o.value === selected);\n const displayLabel = customTriggerLabel || selectedOption?.label || selectedOption?.value || 'Select';\n const showClear = showClearButton && selected !== null;\n\n return (\n <div className={styles.root} ref={containerRef} onKeyDown={handleKeyDown}>\n <button\n type=\"button\"\n className={clsx(styles.trigger, { [styles.active]: isOpen })}\n onClick={() => {\n setIsOpen((prev) => !prev);\n setFocusedIndex(-1);\n }}\n aria-expanded={isOpen}\n aria-haspopup=\"listbox\"\n >\n <div className={styles.triggerContent}>\n <svg className={styles.chevron} width={ICON_SIZE.MD} height={ICON_SIZE.MD} viewBox={SVG_VIEWBOX} fill=\"none\" stroke=\"currentColor\" strokeWidth={SVG_STROKE_WIDTH} strokeLinecap=\"round\" strokeLinejoin=\"round\">\n <polyline points=\"6 9 12 15 18 9\" />\n </svg>\n <span className={styles.label}>{label}</span>\n <span className={styles.value}>{displayLabel}</span>\n {showClear && (\n <span\n className={styles.clear}\n onClick={handleClear}\n role=\"button\"\n tabIndex={0}\n aria-label={`Clear ${label}`}\n onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleClear(e as unknown as React.MouseEvent); } }}\n >\n <svg width={ICON_SIZE.SM} height={ICON_SIZE.SM} viewBox={SVG_VIEWBOX} fill=\"none\" stroke=\"currentColor\" strokeWidth={SVG_STROKE_WIDTH} strokeLinecap=\"round\" strokeLinejoin=\"round\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n </svg>\n </span>\n )}\n </div>\n </button>\n\n {isOpen && (\n <div className={styles.panel} role=\"listbox\" ref={listRef}>\n <div className={styles.searchContainer}>\n <input\n type=\"search\"\n className={styles.search}\n placeholder={`Search ${label.toLowerCase()}`}\n value={searchTerm}\n onChange={(e) => {\n setSearchTerm(e.target.value);\n setFocusedIndex(-1);\n }}\n onClick={(e) => e.stopPropagation()}\n />\n </div>\n <div className={styles.list}>\n {filteredOptions.length === 0 && (\n <div className={styles.noResults}>No matches found</div>\n )}\n {filteredOptions.map((opt, i) => {\n const isSelected = opt.value === selected;\n const isFocused = i === focusedIndex;\n return (\n <button\n key={opt.value}\n type=\"button\"\n className={clsx(styles.option, {\n [styles.selected]: isSelected,\n [styles.focused]: isFocused,\n })}\n onClick={() => handleSelect(opt.value)}\n role=\"option\"\n aria-selected={isSelected}\n >\n <span className={styles.optionLabel}>\n {opt.label ?? opt.value}\n {opt.count !== undefined && (\n <span className={styles.optionCount}>{opt.count}</span>\n )}\n </span>\n </button>\n );\n })}\n </div>\n </div>\n )}\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
package/dist/index39.cjs CHANGED
@@ -1,30 +1,68 @@
1
1
  "use strict";
2
- Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
- const root = "krc-root-Kdtyn";
4
- const primary = "krc-primary-6l6aH";
5
- const secondary = "krc-secondary-29n8Y";
6
- const outline = "krc-outline-U1Mlr";
7
- const ghost = "krc-ghost-5wRsR";
8
- const danger = "krc-danger-gL4NM";
9
- const sm = "krc-sm-zP51s";
10
- const lg = "krc-lg-ZefGA";
11
- const styles = {
12
- root,
13
- primary,
14
- secondary,
15
- outline,
16
- ghost,
17
- danger,
18
- sm,
19
- lg
20
- };
21
- exports.danger = danger;
22
- exports.default = styles;
23
- exports.ghost = ghost;
24
- exports.lg = lg;
25
- exports.outline = outline;
26
- exports.primary = primary;
27
- exports.root = root;
28
- exports.secondary = secondary;
29
- exports.sm = sm;
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ const jsxRuntime = require("react/jsx-runtime");
4
+ const react = require("react");
5
+ const clsx = require("./index47.cjs");
6
+ const Sparkline_module = require("./index72.cjs");
7
+ const PAD = 3;
8
+ const Sparkline = react.forwardRef(
9
+ ({
10
+ values,
11
+ highlightLast = true,
12
+ width = 120,
13
+ height = 30,
14
+ strokeColor,
15
+ className,
16
+ "aria-label": ariaLabel,
17
+ ...props
18
+ }, ref) => {
19
+ const n = values.length;
20
+ const min = n ? Math.min(...values) : 0;
21
+ const max = n ? Math.max(...values) : 0;
22
+ const range = max - min || 1;
23
+ const x = (i) => n <= 1 ? width / 2 : i * width / (n - 1);
24
+ const y = (v) => height - (v - min) / range * (height - PAD * 2) - PAD;
25
+ const points = values.map((v, i) => `${x(i).toFixed(1)},${y(v).toFixed(1)}`).join(" ");
26
+ const lastIndex = n - 1;
27
+ return /* @__PURE__ */ jsxRuntime.jsxs(
28
+ "svg",
29
+ {
30
+ ref,
31
+ className: clsx.clsx(Sparkline_module.default.root, className),
32
+ width,
33
+ height,
34
+ viewBox: `0 0 ${width} ${height}`,
35
+ role: ariaLabel ? "img" : void 0,
36
+ "aria-label": ariaLabel,
37
+ "aria-hidden": ariaLabel ? void 0 : true,
38
+ ...props,
39
+ children: [
40
+ n > 1 && /* @__PURE__ */ jsxRuntime.jsx(
41
+ "polyline",
42
+ {
43
+ className: Sparkline_module.default.line,
44
+ points,
45
+ fill: "none",
46
+ stroke: strokeColor ?? "currentColor",
47
+ strokeWidth: "1.5",
48
+ strokeLinecap: "round",
49
+ strokeLinejoin: "round"
50
+ }
51
+ ),
52
+ highlightLast && n > 0 && /* @__PURE__ */ jsxRuntime.jsx(
53
+ "circle",
54
+ {
55
+ className: Sparkline_module.default.dot,
56
+ cx: x(lastIndex).toFixed(1),
57
+ cy: y(values[lastIndex]).toFixed(1),
58
+ r: "3"
59
+ }
60
+ )
61
+ ]
62
+ }
63
+ );
64
+ }
65
+ );
66
+ Sparkline.displayName = "Sparkline";
67
+ exports.Sparkline = Sparkline;
30
68
  //# sourceMappingURL=index39.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index39.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index39.cjs","sources":["../src/charts/Sparkline/Sparkline.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { SparklineProps } from './Sparkline.types';\nimport styles from './Sparkline.module.css';\n\n/** Vertical inset (px) so the highlighted endpoint dot is not clipped. */\nconst PAD = 3;\n\nexport const Sparkline = forwardRef<SVGSVGElement, SparklineProps>(\n (\n {\n values,\n highlightLast = true,\n width = 120,\n height = 30,\n strokeColor,\n className,\n 'aria-label': ariaLabel,\n ...props\n },\n ref,\n ) => {\n const n = values.length;\n const min = n ? Math.min(...values) : 0;\n const max = n ? Math.max(...values) : 0;\n const range = max - min || 1;\n const x = (i: number) => (n <= 1 ? width / 2 : (i * width) / (n - 1));\n const y = (v: number) => height - ((v - min) / range) * (height - PAD * 2) - PAD;\n const points = values.map((v, i) => `${x(i).toFixed(1)},${y(v).toFixed(1)}`).join(' ');\n const lastIndex = n - 1;\n\n return (\n <svg\n ref={ref}\n className={clsx(styles.root, className)}\n width={width}\n height={height}\n viewBox={`0 0 ${width} ${height}`}\n role={ariaLabel ? 'img' : undefined}\n aria-label={ariaLabel}\n aria-hidden={ariaLabel ? undefined : true}\n {...props}\n >\n {n > 1 && (\n <polyline\n className={styles.line}\n points={points}\n fill=\"none\"\n stroke={strokeColor ?? 'currentColor'}\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n )}\n {highlightLast && n > 0 && (\n <circle\n className={styles.dot}\n cx={x(lastIndex).toFixed(1)}\n cy={y(values[lastIndex]).toFixed(1)}\n r=\"3\"\n />\n )}\n </svg>\n );\n },\n);\n\nSparkline.displayName = 'Sparkline';\n"],"names":["forwardRef","jsxs","clsx","styles","jsx"],"mappings":";;;;;;AAMA,MAAM,MAAM;AAEL,MAAM,YAAYA,MAAAA;AAAAA,EACvB,CACE;AAAA,IACE;AAAA,IACA,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,IAAI,OAAO;AACjB,UAAM,MAAM,IAAI,KAAK,IAAI,GAAG,MAAM,IAAI;AACtC,UAAM,MAAM,IAAI,KAAK,IAAI,GAAG,MAAM,IAAI;AACtC,UAAM,QAAQ,MAAM,OAAO;AAC3B,UAAM,IAAI,CAAC,MAAe,KAAK,IAAI,QAAQ,IAAK,IAAI,SAAU,IAAI;AAClE,UAAM,IAAI,CAAC,MAAc,UAAW,IAAI,OAAO,SAAU,SAAS,MAAM,KAAK;AAC7E,UAAM,SAAS,OAAO,IAAI,CAAC,GAAG,MAAM,GAAG,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,EAAE,KAAK,GAAG;AACrF,UAAM,YAAY,IAAI;AAEtB,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,KAAAA,KAAKC,yBAAO,MAAM,SAAS;AAAA,QACtC;AAAA,QACA;AAAA,QACA,SAAS,OAAO,KAAK,IAAI,MAAM;AAAA,QAC/B,MAAM,YAAY,QAAQ;AAAA,QAC1B,cAAY;AAAA,QACZ,eAAa,YAAY,SAAY;AAAA,QACpC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,IAAI,KACHC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,iBAAAA,QAAO;AAAA,cAClB;AAAA,cACA,MAAK;AAAA,cACL,QAAQ,eAAe;AAAA,cACvB,aAAY;AAAA,cACZ,eAAc;AAAA,cACd,gBAAe;AAAA,YAAA;AAAA,UAAA;AAAA,UAGlB,iBAAiB,IAAI,KACpBC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD,iBAAAA,QAAO;AAAA,cAClB,IAAI,EAAE,SAAS,EAAE,QAAQ,CAAC;AAAA,cAC1B,IAAI,EAAE,OAAO,SAAS,CAAC,EAAE,QAAQ,CAAC;AAAA,cAClC,GAAE;AAAA,YAAA;AAAA,UAAA;AAAA,QACJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,UAAU,cAAc;;"}