@tribepad/themis 1.0.0 → 1.0.1

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 (326) hide show
  1. package/dist/elements/Accordion/index.js +325 -66
  2. package/dist/elements/Accordion/index.js.map +1 -1
  3. package/dist/elements/Accordion/index.mjs +317 -3
  4. package/dist/elements/Accordion/index.mjs.map +1 -1
  5. package/dist/elements/Avatar/index.js +461 -45
  6. package/dist/elements/Avatar/index.js.map +1 -1
  7. package/dist/elements/Avatar/index.mjs +456 -3
  8. package/dist/elements/Avatar/index.mjs.map +1 -1
  9. package/dist/elements/Badge/index.js +238 -36
  10. package/dist/elements/Badge/index.js.map +1 -1
  11. package/dist/elements/Badge/index.mjs +234 -4
  12. package/dist/elements/Badge/index.mjs.map +1 -1
  13. package/dist/elements/Breadcrumbs/index.js +808 -39
  14. package/dist/elements/Breadcrumbs/index.js.map +1 -1
  15. package/dist/elements/Breadcrumbs/index.mjs +810 -7
  16. package/dist/elements/Breadcrumbs/index.mjs.map +1 -1
  17. package/dist/elements/Button/index.js +282 -19
  18. package/dist/elements/Button/index.js.map +1 -1
  19. package/dist/elements/Button/index.mjs +283 -4
  20. package/dist/elements/Button/index.mjs.map +1 -1
  21. package/dist/elements/ButtonGroup/index.js +229 -56
  22. package/dist/elements/ButtonGroup/index.js.map +1 -1
  23. package/dist/elements/ButtonGroup/index.mjs +222 -3
  24. package/dist/elements/ButtonGroup/index.mjs.map +1 -1
  25. package/dist/elements/Card/Card.d.ts.map +1 -1
  26. package/dist/elements/Card/index.js +563 -67
  27. package/dist/elements/Card/index.js.map +1 -1
  28. package/dist/elements/Card/index.mjs +560 -6
  29. package/dist/elements/Card/index.mjs.map +1 -1
  30. package/dist/elements/Carousel/index.js +782 -14
  31. package/dist/elements/Carousel/index.js.map +1 -1
  32. package/dist/elements/Carousel/index.mjs +786 -8
  33. package/dist/elements/Carousel/index.mjs.map +1 -1
  34. package/dist/elements/Chart/index.js +1833 -36
  35. package/dist/elements/Chart/index.js.map +1 -1
  36. package/dist/elements/Chart/index.mjs +1832 -4
  37. package/dist/elements/Chart/index.mjs.map +1 -1
  38. package/dist/elements/Checkbox/index.js +310 -39
  39. package/dist/elements/Checkbox/index.js.map +1 -1
  40. package/dist/elements/Checkbox/index.mjs +306 -4
  41. package/dist/elements/Checkbox/index.mjs.map +1 -1
  42. package/dist/elements/CheckboxGroup/index.js +445 -59
  43. package/dist/elements/CheckboxGroup/index.js.map +1 -1
  44. package/dist/elements/CheckboxGroup/index.mjs +439 -4
  45. package/dist/elements/CheckboxGroup/index.mjs.map +1 -1
  46. package/dist/elements/DatePicker/index.js +871 -89
  47. package/dist/elements/DatePicker/index.js.map +1 -1
  48. package/dist/elements/DatePicker/index.mjs +853 -4
  49. package/dist/elements/DatePicker/index.mjs.map +1 -1
  50. package/dist/elements/Dropdown/index.js +189 -35
  51. package/dist/elements/Dropdown/index.js.map +1 -1
  52. package/dist/elements/Dropdown/index.mjs +184 -2
  53. package/dist/elements/Dropdown/index.mjs.map +1 -1
  54. package/dist/elements/FileField/index.js +1532 -129
  55. package/dist/elements/FileField/index.js.map +1 -1
  56. package/dist/elements/FileField/index.mjs +1507 -7
  57. package/dist/elements/FileField/index.mjs.map +1 -1
  58. package/dist/elements/FormLayout/index.js +166 -11
  59. package/dist/elements/FormLayout/index.js.map +1 -1
  60. package/dist/elements/FormLayout/index.mjs +167 -2
  61. package/dist/elements/FormLayout/index.mjs.map +1 -1
  62. package/dist/elements/Modal/index.js +228 -46
  63. package/dist/elements/Modal/index.js.map +1 -1
  64. package/dist/elements/Modal/index.mjs +220 -1
  65. package/dist/elements/Modal/index.mjs.map +1 -1
  66. package/dist/elements/NumberField/index.js +659 -48
  67. package/dist/elements/NumberField/index.js.map +1 -1
  68. package/dist/elements/NumberField/index.mjs +654 -6
  69. package/dist/elements/NumberField/index.mjs.map +1 -1
  70. package/dist/elements/OTPInput/index.js +729 -6
  71. package/dist/elements/OTPInput/index.js.map +1 -1
  72. package/dist/elements/OTPInput/index.mjs +732 -2
  73. package/dist/elements/OTPInput/index.mjs.map +1 -1
  74. package/dist/elements/Panel/index.js +326 -27
  75. package/dist/elements/Panel/index.js.map +1 -1
  76. package/dist/elements/Panel/index.mjs +323 -2
  77. package/dist/elements/Panel/index.mjs.map +1 -1
  78. package/dist/elements/Progress/index.js +181 -22
  79. package/dist/elements/Progress/index.js.map +1 -1
  80. package/dist/elements/Progress/index.mjs +181 -3
  81. package/dist/elements/Progress/index.mjs.map +1 -1
  82. package/dist/elements/RadioGroup/index.js +358 -34
  83. package/dist/elements/RadioGroup/index.js.map +1 -1
  84. package/dist/elements/RadioGroup/index.mjs +359 -4
  85. package/dist/elements/RadioGroup/index.mjs.map +1 -1
  86. package/dist/elements/Resizable/components/ResizableHandle.d.ts +0 -8
  87. package/dist/elements/Resizable/components/ResizableHandle.d.ts.map +1 -1
  88. package/dist/elements/Resizable/components/ResizablePanel.d.ts +0 -8
  89. package/dist/elements/Resizable/components/ResizablePanel.d.ts.map +1 -1
  90. package/dist/elements/Resizable/components/ResizablePanelGroup.d.ts +0 -8
  91. package/dist/elements/Resizable/components/ResizablePanelGroup.d.ts.map +1 -1
  92. package/dist/elements/Resizable/components/ResizablePopover.d.ts +0 -8
  93. package/dist/elements/Resizable/components/ResizablePopover.d.ts.map +1 -1
  94. package/dist/elements/Resizable/index.js +1568 -51
  95. package/dist/elements/Resizable/index.js.map +1 -1
  96. package/dist/elements/Resizable/index.mjs +1566 -6
  97. package/dist/elements/Resizable/index.mjs.map +1 -1
  98. package/dist/elements/Select/index.js +580 -22
  99. package/dist/elements/Select/index.js.map +1 -1
  100. package/dist/elements/Select/index.mjs +582 -2
  101. package/dist/elements/Select/index.mjs.map +1 -1
  102. package/dist/elements/Skeleton/index.js +77 -15
  103. package/dist/elements/Skeleton/index.js.map +1 -1
  104. package/dist/elements/Skeleton/index.mjs +78 -3
  105. package/dist/elements/Skeleton/index.mjs.map +1 -1
  106. package/dist/elements/Switch/index.js +153 -21
  107. package/dist/elements/Switch/index.js.map +1 -1
  108. package/dist/elements/Switch/index.mjs +149 -5
  109. package/dist/elements/Switch/index.mjs.map +1 -1
  110. package/dist/elements/Table/index.js +589 -68
  111. package/dist/elements/Table/index.js.map +1 -1
  112. package/dist/elements/Table/index.mjs +578 -5
  113. package/dist/elements/Table/index.mjs.map +1 -1
  114. package/dist/elements/Tabs/index.js +328 -63
  115. package/dist/elements/Tabs/index.js.map +1 -1
  116. package/dist/elements/Tabs/index.mjs +320 -3
  117. package/dist/elements/Tabs/index.mjs.map +1 -1
  118. package/dist/elements/TextField/index.js +695 -51
  119. package/dist/elements/TextField/index.js.map +1 -1
  120. package/dist/elements/TextField/index.mjs +684 -7
  121. package/dist/elements/TextField/index.mjs.map +1 -1
  122. package/dist/elements/TimeField/index.js +244 -33
  123. package/dist/elements/TimeField/index.js.map +1 -1
  124. package/dist/elements/TimeField/index.mjs +238 -2
  125. package/dist/elements/TimeField/index.mjs.map +1 -1
  126. package/dist/elements/Toast/index.js +727 -48
  127. package/dist/elements/Toast/index.js.map +1 -1
  128. package/dist/elements/Toast/index.mjs +724 -5
  129. package/dist/elements/Toast/index.mjs.map +1 -1
  130. package/dist/elements/Tooltip/index.js +315 -49
  131. package/dist/elements/Tooltip/index.js.map +1 -1
  132. package/dist/elements/Tooltip/index.mjs +310 -4
  133. package/dist/elements/Tooltip/index.mjs.map +1 -1
  134. package/dist/elements/index.js +12417 -799
  135. package/dist/elements/index.js.map +1 -1
  136. package/dist/elements/index.mjs +12233 -40
  137. package/dist/elements/index.mjs.map +1 -1
  138. package/dist/index.js +12452 -825
  139. package/dist/index.js.map +1 -1
  140. package/dist/index.mjs +12262 -42
  141. package/dist/index.mjs.map +1 -1
  142. package/dist/schemas/index.js +47 -21
  143. package/dist/schemas/index.js.map +1 -1
  144. package/dist/schemas/index.mjs +47 -2
  145. package/dist/schemas/index.mjs.map +1 -1
  146. package/dist/styles/index.js +161 -147
  147. package/dist/styles/index.js.map +1 -1
  148. package/dist/styles/index.mjs +128 -2
  149. package/dist/styles/index.mjs.map +1 -1
  150. package/dist/utils/index.js +7 -7
  151. package/dist/utils/index.js.map +1 -1
  152. package/dist/utils/index.mjs +9 -2
  153. package/dist/utils/index.mjs.map +1 -1
  154. package/package.json +1 -1
  155. package/dist/Carousel-NTZX5TOW.js +0 -16
  156. package/dist/Carousel-NTZX5TOW.js.map +0 -1
  157. package/dist/Carousel-YH3DOQJU.mjs +0 -7
  158. package/dist/Carousel-YH3DOQJU.mjs.map +0 -1
  159. package/dist/chunk-2HIUTHMU.mjs +0 -234
  160. package/dist/chunk-2HIUTHMU.mjs.map +0 -1
  161. package/dist/chunk-34GTFTDO.js +0 -431
  162. package/dist/chunk-34GTFTDO.js.map +0 -1
  163. package/dist/chunk-3H7ASYR7.js +0 -250
  164. package/dist/chunk-3H7ASYR7.js.map +0 -1
  165. package/dist/chunk-3IEN7JOP.js +0 -316
  166. package/dist/chunk-3IEN7JOP.js.map +0 -1
  167. package/dist/chunk-3JHN4GAL.js +0 -326
  168. package/dist/chunk-3JHN4GAL.js.map +0 -1
  169. package/dist/chunk-3MJPASQU.js +0 -232
  170. package/dist/chunk-3MJPASQU.js.map +0 -1
  171. package/dist/chunk-3XD2JUL3.js +0 -572
  172. package/dist/chunk-3XD2JUL3.js.map +0 -1
  173. package/dist/chunk-3YOY2VJ6.js +0 -189
  174. package/dist/chunk-3YOY2VJ6.js.map +0 -1
  175. package/dist/chunk-4DU5JSXB.js +0 -408
  176. package/dist/chunk-4DU5JSXB.js.map +0 -1
  177. package/dist/chunk-4E4E2GSS.js +0 -352
  178. package/dist/chunk-4E4E2GSS.js.map +0 -1
  179. package/dist/chunk-4NHAP4AN.mjs +0 -3
  180. package/dist/chunk-4NHAP4AN.mjs.map +0 -1
  181. package/dist/chunk-4S33J5NY.mjs +0 -415
  182. package/dist/chunk-4S33J5NY.mjs.map +0 -1
  183. package/dist/chunk-5SMGRT3G.mjs +0 -354
  184. package/dist/chunk-5SMGRT3G.mjs.map +0 -1
  185. package/dist/chunk-5SVLJN2C.mjs +0 -22
  186. package/dist/chunk-5SVLJN2C.mjs.map +0 -1
  187. package/dist/chunk-66WTU4EB.mjs +0 -299
  188. package/dist/chunk-66WTU4EB.mjs.map +0 -1
  189. package/dist/chunk-6S25NMOT.mjs +0 -335
  190. package/dist/chunk-6S25NMOT.mjs.map +0 -1
  191. package/dist/chunk-6SP7UB3D.js +0 -4
  192. package/dist/chunk-6SP7UB3D.js.map +0 -1
  193. package/dist/chunk-6TYWWQHM.mjs +0 -565
  194. package/dist/chunk-6TYWWQHM.mjs.map +0 -1
  195. package/dist/chunk-A3YUJA6W.mjs +0 -384
  196. package/dist/chunk-A3YUJA6W.mjs.map +0 -1
  197. package/dist/chunk-A6KEDVUR.js +0 -61
  198. package/dist/chunk-A6KEDVUR.js.map +0 -1
  199. package/dist/chunk-A77RUEWL.js +0 -730
  200. package/dist/chunk-A77RUEWL.js.map +0 -1
  201. package/dist/chunk-AA4IKMPE.mjs +0 -3
  202. package/dist/chunk-AA4IKMPE.mjs.map +0 -1
  203. package/dist/chunk-AKIA6GW6.mjs +0 -163
  204. package/dist/chunk-AKIA6GW6.mjs.map +0 -1
  205. package/dist/chunk-AL6P275L.mjs +0 -435
  206. package/dist/chunk-AL6P275L.mjs.map +0 -1
  207. package/dist/chunk-AZ3RJYTB.js +0 -37
  208. package/dist/chunk-AZ3RJYTB.js.map +0 -1
  209. package/dist/chunk-B5Q4UPL6.js +0 -32
  210. package/dist/chunk-B5Q4UPL6.js.map +0 -1
  211. package/dist/chunk-B6DHPMDP.mjs +0 -335
  212. package/dist/chunk-B6DHPMDP.mjs.map +0 -1
  213. package/dist/chunk-BDXKKMBZ.mjs +0 -184
  214. package/dist/chunk-BDXKKMBZ.mjs.map +0 -1
  215. package/dist/chunk-BL6E2DLZ.mjs +0 -52
  216. package/dist/chunk-BL6E2DLZ.mjs.map +0 -1
  217. package/dist/chunk-CGFDS4XS.mjs +0 -121
  218. package/dist/chunk-CGFDS4XS.mjs.map +0 -1
  219. package/dist/chunk-CJIW5TKI.js +0 -139
  220. package/dist/chunk-CJIW5TKI.js.map +0 -1
  221. package/dist/chunk-CKNISJOQ.js +0 -314
  222. package/dist/chunk-CKNISJOQ.js.map +0 -1
  223. package/dist/chunk-D6CBOECS.mjs +0 -1757
  224. package/dist/chunk-D6CBOECS.mjs.map +0 -1
  225. package/dist/chunk-DDWEVC2S.js +0 -166
  226. package/dist/chunk-DDWEVC2S.js.map +0 -1
  227. package/dist/chunk-DZ556D2F.mjs +0 -176
  228. package/dist/chunk-DZ556D2F.mjs.map +0 -1
  229. package/dist/chunk-E2KQFV3O.mjs +0 -10
  230. package/dist/chunk-E2KQFV3O.mjs.map +0 -1
  231. package/dist/chunk-EMMLADSC.js +0 -126
  232. package/dist/chunk-EMMLADSC.js.map +0 -1
  233. package/dist/chunk-EP4WOI5D.mjs +0 -926
  234. package/dist/chunk-EP4WOI5D.mjs.map +0 -1
  235. package/dist/chunk-FJRXLJC2.mjs +0 -160
  236. package/dist/chunk-FJRXLJC2.mjs.map +0 -1
  237. package/dist/chunk-FKQI434R.js +0 -345
  238. package/dist/chunk-FKQI434R.js.map +0 -1
  239. package/dist/chunk-FPKEAJRZ.mjs +0 -100
  240. package/dist/chunk-FPKEAJRZ.mjs.map +0 -1
  241. package/dist/chunk-FWQYB22U.js +0 -183
  242. package/dist/chunk-FWQYB22U.js.map +0 -1
  243. package/dist/chunk-GD5GHTMA.js +0 -189
  244. package/dist/chunk-GD5GHTMA.js.map +0 -1
  245. package/dist/chunk-GE5XTSDZ.js +0 -447
  246. package/dist/chunk-GE5XTSDZ.js.map +0 -1
  247. package/dist/chunk-GVE47ZAX.mjs +0 -32
  248. package/dist/chunk-GVE47ZAX.mjs.map +0 -1
  249. package/dist/chunk-HK46BT5U.mjs +0 -18
  250. package/dist/chunk-HK46BT5U.mjs.map +0 -1
  251. package/dist/chunk-HQVRMR6N.js +0 -365
  252. package/dist/chunk-HQVRMR6N.js.map +0 -1
  253. package/dist/chunk-HSGBJPJO.mjs +0 -398
  254. package/dist/chunk-HSGBJPJO.mjs.map +0 -1
  255. package/dist/chunk-I3AUTOMZ.mjs +0 -125
  256. package/dist/chunk-I3AUTOMZ.mjs.map +0 -1
  257. package/dist/chunk-IEI5LD5C.mjs +0 -1161
  258. package/dist/chunk-IEI5LD5C.mjs.map +0 -1
  259. package/dist/chunk-IIPTC2X7.mjs +0 -118
  260. package/dist/chunk-IIPTC2X7.mjs.map +0 -1
  261. package/dist/chunk-J7TLHF2Q.js +0 -4
  262. package/dist/chunk-J7TLHF2Q.js.map +0 -1
  263. package/dist/chunk-JJOWXFXQ.mjs +0 -765
  264. package/dist/chunk-JJOWXFXQ.mjs.map +0 -1
  265. package/dist/chunk-JPTSS2OA.mjs +0 -3
  266. package/dist/chunk-JPTSS2OA.mjs.map +0 -1
  267. package/dist/chunk-KFXXRLTP.js +0 -396
  268. package/dist/chunk-KFXXRLTP.js.map +0 -1
  269. package/dist/chunk-KPRRBSG6.mjs +0 -272
  270. package/dist/chunk-KPRRBSG6.mjs.map +0 -1
  271. package/dist/chunk-NFSBGRDB.mjs +0 -57
  272. package/dist/chunk-NFSBGRDB.mjs.map +0 -1
  273. package/dist/chunk-NGJVCFTM.js +0 -219
  274. package/dist/chunk-NGJVCFTM.js.map +0 -1
  275. package/dist/chunk-NSQ6MZJ6.mjs +0 -728
  276. package/dist/chunk-NSQ6MZJ6.mjs.map +0 -1
  277. package/dist/chunk-NYQYHT76.mjs +0 -296
  278. package/dist/chunk-NYQYHT76.mjs.map +0 -1
  279. package/dist/chunk-OLJJGI5B.js +0 -1193
  280. package/dist/chunk-OLJJGI5B.js.map +0 -1
  281. package/dist/chunk-Q3572X2J.js +0 -292
  282. package/dist/chunk-Q3572X2J.js.map +0 -1
  283. package/dist/chunk-QH7N7D4I.mjs +0 -210
  284. package/dist/chunk-QH7N7D4I.mjs.map +0 -1
  285. package/dist/chunk-R7XUIV25.js +0 -466
  286. package/dist/chunk-R7XUIV25.js.map +0 -1
  287. package/dist/chunk-RFFO4KPM.js +0 -135
  288. package/dist/chunk-RFFO4KPM.js.map +0 -1
  289. package/dist/chunk-RFX7QKA7.mjs +0 -180
  290. package/dist/chunk-RFX7QKA7.mjs.map +0 -1
  291. package/dist/chunk-SN5LFAP3.js +0 -940
  292. package/dist/chunk-SN5LFAP3.js.map +0 -1
  293. package/dist/chunk-T4COXKQ3.js +0 -24
  294. package/dist/chunk-T4COXKQ3.js.map +0 -1
  295. package/dist/chunk-TS54QM27.js +0 -125
  296. package/dist/chunk-TS54QM27.js.map +0 -1
  297. package/dist/chunk-UE2S4PCX.mjs +0 -220
  298. package/dist/chunk-UE2S4PCX.mjs.map +0 -1
  299. package/dist/chunk-UTW3QX2A.mjs +0 -282
  300. package/dist/chunk-UTW3QX2A.mjs.map +0 -1
  301. package/dist/chunk-V74LGMAE.js +0 -1767
  302. package/dist/chunk-V74LGMAE.js.map +0 -1
  303. package/dist/chunk-VIREG536.js +0 -12
  304. package/dist/chunk-VIREG536.js.map +0 -1
  305. package/dist/chunk-VY7M7346.js +0 -4
  306. package/dist/chunk-VY7M7346.js.map +0 -1
  307. package/dist/chunk-W3TJOO7H.mjs +0 -319
  308. package/dist/chunk-W3TJOO7H.mjs.map +0 -1
  309. package/dist/chunk-WIUOB36M.js +0 -54
  310. package/dist/chunk-WIUOB36M.js.map +0 -1
  311. package/dist/chunk-WJGLM4CY.js +0 -291
  312. package/dist/chunk-WJGLM4CY.js.map +0 -1
  313. package/dist/chunk-WNURH5OO.mjs +0 -453
  314. package/dist/chunk-WNURH5OO.mjs.map +0 -1
  315. package/dist/chunk-X25TNRSD.mjs +0 -364
  316. package/dist/chunk-X25TNRSD.mjs.map +0 -1
  317. package/dist/chunk-Y3GT7ETK.js +0 -108
  318. package/dist/chunk-Y3GT7ETK.js.map +0 -1
  319. package/dist/chunk-Z4FRNOF6.mjs +0 -115
  320. package/dist/chunk-Z4FRNOF6.mjs.map +0 -1
  321. package/dist/chunk-ZMYLD3BN.js +0 -166
  322. package/dist/chunk-ZMYLD3BN.js.map +0 -1
  323. package/dist/chunk-ZP2KV6EX.js +0 -815
  324. package/dist/chunk-ZP2KV6EX.js.map +0 -1
  325. package/dist/chunk-ZVKXFELU.js +0 -366
  326. package/dist/chunk-ZVKXFELU.js.map +0 -1
@@ -1,4 +1,325 @@
1
- export { Panel, panelBodyVariants, panelCloseButtonVariants, panelContentVariants, panelFooterVariants, panelHeaderVariants } from '../../chunk-W3TJOO7H.mjs';
2
- import '../../chunk-E2KQFV3O.mjs';
1
+ "use client";
2
+ import { createContext, useState, useRef, useId, useCallback, useEffect, isValidElement, cloneElement, useContext } from 'react';
3
+ import { ModalOverlay, Modal, Dialog, Button } from 'react-aria-components';
4
+ import { cva } from 'class-variance-authority';
5
+ import { X } from 'lucide-react';
6
+ import { clsx } from 'clsx';
7
+ import { twMerge } from 'tailwind-merge';
8
+ import { jsx, jsxs } from 'react/jsx-runtime';
9
+
10
+ // src/elements/Panel/Panel.tsx
11
+ function cn(...inputs) {
12
+ return twMerge(clsx(inputs));
13
+ }
14
+ var panelContentVariants = cva(
15
+ [
16
+ "flex flex-col h-full",
17
+ "bg-[var(--content-background)] text-[var(--content-foreground)]",
18
+ "shadow-lg"
19
+ ],
20
+ {
21
+ variants: {
22
+ position: {
23
+ right: "border-l border-[var(--border)]",
24
+ left: "border-r border-[var(--border)]"
25
+ },
26
+ width: {
27
+ sm: "w-[300px]",
28
+ md: "w-[400px]",
29
+ lg: "w-[500px]",
30
+ xl: "w-[600px]",
31
+ auto: "w-auto"
32
+ }
33
+ },
34
+ defaultVariants: {
35
+ position: "right",
36
+ width: "md"
37
+ }
38
+ }
39
+ );
40
+ var panelHeaderVariants = cva([
41
+ "flex items-start justify-between",
42
+ "px-4 py-4",
43
+ "border-b border-[var(--border)]"
44
+ ]);
45
+ var panelBodyVariants = cva(["flex-1 overflow-y-auto", "px-4 py-4"]);
46
+ var panelFooterVariants = cva([
47
+ "flex items-center justify-end gap-2",
48
+ "px-4 py-4",
49
+ "border-t border-[var(--border)]"
50
+ ]);
51
+ var panelCloseButtonVariants = cva([
52
+ "inline-flex items-center justify-center rounded-md",
53
+ "min-h-[44px] min-w-[44px]",
54
+ "text-[var(--menu-muted)]",
55
+ "hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)]",
56
+ "focus-visible:outline-none focus-visible:ring-2",
57
+ "focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2"
58
+ // No transition - instant state changes (v1)
59
+ ]);
60
+ var PanelContext = createContext(null);
61
+ function usePanelContext() {
62
+ const context = useContext(PanelContext);
63
+ if (!context) {
64
+ throw new Error("Panel compound components must be used within a Panel");
65
+ }
66
+ return context;
67
+ }
68
+ function useMediaQuery(query) {
69
+ const [matches, setMatches] = useState(() => {
70
+ if (typeof window === "undefined") return false;
71
+ return window.matchMedia(query).matches;
72
+ });
73
+ useEffect(() => {
74
+ if (typeof window === "undefined") return;
75
+ const media = window.matchMedia(query);
76
+ if (media.matches !== matches) {
77
+ setMatches(media.matches);
78
+ }
79
+ const listener = (e) => setMatches(e.matches);
80
+ media.addEventListener("change", listener);
81
+ return () => media.removeEventListener("change", listener);
82
+ }, [query, matches]);
83
+ return matches;
84
+ }
85
+ function PanelRoot({
86
+ children,
87
+ isOpen: controlledIsOpen,
88
+ defaultOpen = false,
89
+ onOpenChange,
90
+ onClose,
91
+ position = "right",
92
+ width = "md",
93
+ mobileBreakpoint = 768
94
+ }) {
95
+ const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(defaultOpen);
96
+ const isControlled = controlledIsOpen !== void 0;
97
+ const isOpen = isControlled ? controlledIsOpen : uncontrolledIsOpen;
98
+ const triggerRef = useRef(null);
99
+ const uniqueId = useId();
100
+ const panelId = `panel-${uniqueId}`;
101
+ const titleId = `panel-title-${uniqueId}`;
102
+ const isMobile = useMediaQuery(`(max-width: ${mobileBreakpoint - 1}px)`);
103
+ const setIsOpen = useCallback(
104
+ (open) => {
105
+ if (!isControlled) {
106
+ setUncontrolledIsOpen(open);
107
+ }
108
+ onOpenChange?.(open);
109
+ },
110
+ [isControlled, onOpenChange]
111
+ );
112
+ const handleClose = useCallback(() => {
113
+ setIsOpen(false);
114
+ onClose?.();
115
+ if (triggerRef.current) {
116
+ window.requestAnimationFrame(() => {
117
+ triggerRef.current?.focus();
118
+ });
119
+ }
120
+ }, [setIsOpen, onClose]);
121
+ useEffect(() => {
122
+ if (!isOpen || isMobile) return;
123
+ const handleKeyDown = (e) => {
124
+ if (e.key === "Escape") {
125
+ e.preventDefault();
126
+ handleClose();
127
+ }
128
+ };
129
+ document.addEventListener("keydown", handleKeyDown);
130
+ return () => document.removeEventListener("keydown", handleKeyDown);
131
+ }, [isOpen, isMobile, handleClose]);
132
+ const contextValue = {
133
+ isOpen,
134
+ setIsOpen,
135
+ panelId,
136
+ titleId,
137
+ triggerRef,
138
+ position,
139
+ width,
140
+ mobileBreakpoint,
141
+ isMobile,
142
+ handleClose
143
+ };
144
+ return /* @__PURE__ */ jsx(PanelContext.Provider, { value: contextValue, children });
145
+ }
146
+ PanelRoot.displayName = "Panel";
147
+ function PanelTrigger({
148
+ children,
149
+ asChild = true
150
+ }) {
151
+ const { isOpen, setIsOpen, panelId, triggerRef } = usePanelContext();
152
+ const setRef = useCallback(
153
+ (element) => {
154
+ triggerRef.current = element;
155
+ },
156
+ [triggerRef]
157
+ );
158
+ const handlePress = useCallback(() => {
159
+ setIsOpen(!isOpen);
160
+ }, [setIsOpen, isOpen]);
161
+ if (asChild && isValidElement(children)) {
162
+ const childProps = children.props;
163
+ return cloneElement(children, {
164
+ ref: setRef,
165
+ "aria-expanded": isOpen,
166
+ "aria-controls": isOpen ? panelId : void 0,
167
+ "data-testid": "panel-trigger",
168
+ onPress: handlePress,
169
+ onClick: childProps.onClick ? () => {
170
+ childProps.onClick?.();
171
+ handlePress();
172
+ } : handlePress
173
+ });
174
+ }
175
+ return /* @__PURE__ */ jsx(
176
+ Button,
177
+ {
178
+ ref: setRef,
179
+ "aria-expanded": isOpen,
180
+ "aria-controls": isOpen ? panelId : void 0,
181
+ onPress: handlePress,
182
+ "data-testid": "panel-trigger",
183
+ children
184
+ }
185
+ );
186
+ }
187
+ PanelTrigger.displayName = "PanelTrigger";
188
+ function BuiltInCloseButton() {
189
+ const { handleClose } = usePanelContext();
190
+ return /* @__PURE__ */ jsx(
191
+ Button,
192
+ {
193
+ "aria-label": "Close panel",
194
+ "data-testid": "panel-close",
195
+ onPress: handleClose,
196
+ className: panelCloseButtonVariants(),
197
+ children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
198
+ }
199
+ );
200
+ }
201
+ function PanelContent({
202
+ children,
203
+ showClose = true,
204
+ className
205
+ }) {
206
+ const { isOpen, isMobile, panelId, titleId, position, width, handleClose } = usePanelContext();
207
+ if (!isOpen) return null;
208
+ if (isMobile) {
209
+ return /* @__PURE__ */ jsx(
210
+ ModalOverlay,
211
+ {
212
+ isDismissable: true,
213
+ isOpen,
214
+ onOpenChange: (open) => !open && handleClose(),
215
+ className: "fixed inset-0 z-50 bg-black/50",
216
+ children: /* @__PURE__ */ jsx(Modal, { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: /* @__PURE__ */ jsxs(
217
+ Dialog,
218
+ {
219
+ "aria-labelledby": titleId,
220
+ className: cn(
221
+ "w-full max-w-lg rounded-lg bg-[var(--content-background)] shadow-lg outline-none",
222
+ "flex max-h-[90vh] flex-col",
223
+ className
224
+ ),
225
+ children: [
226
+ showClose && /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2", children: /* @__PURE__ */ jsx(BuiltInCloseButton, {}) }),
227
+ children
228
+ ]
229
+ }
230
+ ) })
231
+ }
232
+ );
233
+ }
234
+ return /* @__PURE__ */ jsxs(
235
+ "aside",
236
+ {
237
+ id: panelId,
238
+ "aria-labelledby": titleId,
239
+ "data-testid": "panel-content",
240
+ className: cn(panelContentVariants({ position, width }), className),
241
+ children: [
242
+ children,
243
+ showClose && /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2", children: /* @__PURE__ */ jsx(BuiltInCloseButton, {}) })
244
+ ]
245
+ }
246
+ );
247
+ }
248
+ PanelContent.displayName = "PanelContent";
249
+ function PanelHeader({
250
+ children,
251
+ className
252
+ }) {
253
+ return /* @__PURE__ */ jsx("header", { className: cn(panelHeaderVariants(), className), children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children }) });
254
+ }
255
+ PanelHeader.displayName = "PanelHeader";
256
+ function PanelTitle({
257
+ children,
258
+ as: Tag = "h2",
259
+ className
260
+ }) {
261
+ const { titleId } = usePanelContext();
262
+ return /* @__PURE__ */ jsx(
263
+ Tag,
264
+ {
265
+ id: titleId,
266
+ "aria-live": "polite",
267
+ className: cn(
268
+ "text-lg font-semibold text-[var(--content-foreground)]",
269
+ className
270
+ ),
271
+ children
272
+ }
273
+ );
274
+ }
275
+ PanelTitle.displayName = "PanelTitle";
276
+ function PanelDescription({
277
+ children,
278
+ className
279
+ }) {
280
+ return /* @__PURE__ */ jsx("p", { className: cn("text-sm text-[var(--menu-muted)]", className), children });
281
+ }
282
+ PanelDescription.displayName = "PanelDescription";
283
+ function PanelBody({ children, className }) {
284
+ return /* @__PURE__ */ jsx("div", { className: cn(panelBodyVariants(), className), children });
285
+ }
286
+ PanelBody.displayName = "PanelBody";
287
+ function PanelFooter({
288
+ children,
289
+ className
290
+ }) {
291
+ return /* @__PURE__ */ jsx("footer", { className: cn(panelFooterVariants(), className), children });
292
+ }
293
+ PanelFooter.displayName = "PanelFooter";
294
+ function PanelClose({ children }) {
295
+ const { handleClose } = usePanelContext();
296
+ if (!isValidElement(children)) {
297
+ return null;
298
+ }
299
+ const childProps = children.props;
300
+ return cloneElement(children, {
301
+ onPress: () => {
302
+ childProps.onPress?.();
303
+ handleClose();
304
+ },
305
+ onClick: () => {
306
+ childProps.onClick?.();
307
+ handleClose();
308
+ }
309
+ });
310
+ }
311
+ PanelClose.displayName = "PanelClose";
312
+ var Panel = Object.assign(PanelRoot, {
313
+ Trigger: PanelTrigger,
314
+ Content: PanelContent,
315
+ Header: PanelHeader,
316
+ Title: PanelTitle,
317
+ Description: PanelDescription,
318
+ Body: PanelBody,
319
+ Footer: PanelFooter,
320
+ Close: PanelClose
321
+ });
322
+
323
+ export { Panel, panelBodyVariants, panelCloseButtonVariants, panelContentVariants, panelFooterVariants, panelHeaderVariants };
3
324
  //# sourceMappingURL=index.mjs.map
4
325
  //# sourceMappingURL=index.mjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":[],"names":[],"mappings":"","file":"index.mjs"}
1
+ {"version":3,"sources":["../../../src/utils/cn.ts","../../../src/elements/Panel/Panel.tsx"],"names":["AriaButton","AriaModalOverlay","AriaModal","AriaDialog"],"mappings":"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","file":"index.mjs","sourcesContent":["/**\n * Class Name Utility\n * Merges Tailwind CSS classes with conflict resolution\n *\n * Combines clsx for conditional classes and tailwind-merge for deduplication\n *\n * @example\n * cn('px-2 py-1', 'px-4') // => 'py-1 px-4' (px-4 overrides px-2)\n * cn('text-red-500', condition && 'text-blue-500') // => conditional application\n */\n\nimport { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]): string {\n return twMerge(clsx(inputs));\n}\n","\"use client\";\n\n/**\n * Panel Component - Accessible Non-Modal Sidebar\n * Disclosure pattern + Complementary region for WCAG 2.2 AAA\n *\n * @see plan.md for architecture details\n * @see panel-prd.md for requirements\n * @see ADR 0007 for accessibility decisions\n */\n\nimport {\n type ReactElement,\n type MutableRefObject,\n createContext,\n useContext,\n useState,\n useId,\n useRef,\n useCallback,\n useEffect,\n cloneElement,\n isValidElement,\n} from \"react\";\nimport {\n Button as AriaButton,\n Modal as AriaModal,\n ModalOverlay as AriaModalOverlay,\n Dialog as AriaDialog,\n} from \"react-aria-components\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport type {\n PanelProps,\n PanelTriggerProps,\n PanelContentProps,\n PanelHeaderProps,\n PanelTitleProps,\n PanelDescriptionProps,\n PanelBodyProps,\n PanelFooterProps,\n PanelCloseProps,\n PanelPosition,\n PanelWidth,\n} from \"./Panel.types\";\n\n// ============================================================================\n// CVA Variants\n// ============================================================================\n\n/**\n * Panel content variants\n * Controls position-based styling and width\n */\nexport const panelContentVariants = cva(\n [\n \"flex flex-col h-full\",\n \"bg-[var(--content-background)] text-[var(--content-foreground)]\",\n \"shadow-lg\",\n ],\n {\n variants: {\n position: {\n right: \"border-l border-[var(--border)]\",\n left: \"border-r border-[var(--border)]\",\n },\n width: {\n sm: \"w-[300px]\",\n md: \"w-[400px]\",\n lg: \"w-[500px]\",\n xl: \"w-[600px]\",\n auto: \"w-auto\",\n },\n },\n defaultVariants: {\n position: \"right\",\n width: \"md\",\n },\n }\n);\n\n/**\n * Panel header variants\n */\nexport const panelHeaderVariants = cva([\n \"flex items-start justify-between\",\n \"px-4 py-4\",\n \"border-b border-[var(--border)]\",\n]);\n\n/**\n * Panel body variants\n */\nexport const panelBodyVariants = cva([\"flex-1 overflow-y-auto\", \"px-4 py-4\"]);\n\n/**\n * Panel footer variants\n */\nexport const panelFooterVariants = cva([\n \"flex items-center justify-end gap-2\",\n \"px-4 py-4\",\n \"border-t border-[var(--border)]\",\n]);\n\n/**\n * Close button variants\n */\nexport const panelCloseButtonVariants = cva([\n \"inline-flex items-center justify-center rounded-md\",\n \"min-h-[44px] min-w-[44px]\",\n \"text-[var(--menu-muted)]\",\n \"hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)]\",\n \"focus-visible:outline-none focus-visible:ring-2\",\n \"focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2\",\n // No transition - instant state changes (v1)\n]);\n\n// ============================================================================\n// Context\n// ============================================================================\n\ninterface PanelContextValue {\n isOpen: boolean;\n setIsOpen: (open: boolean) => void;\n panelId: string;\n titleId: string;\n triggerRef: MutableRefObject<HTMLElement | null>;\n position: PanelPosition;\n width: PanelWidth;\n mobileBreakpoint: number;\n isMobile: boolean;\n handleClose: () => void;\n}\n\nconst PanelContext = createContext<PanelContextValue | null>(null);\n\nfunction usePanelContext(): PanelContextValue {\n const context = useContext(PanelContext);\n if (!context) {\n throw new Error(\"Panel compound components must be used within a Panel\");\n }\n return context;\n}\n\n// ============================================================================\n// Hooks\n// ============================================================================\n\n/**\n * SSR-safe media query hook\n * Defaults to false on server (desktop mode)\n */\nfunction useMediaQuery(query: string): boolean {\n const [matches, setMatches] = useState(() => {\n // Default to false on server (desktop mode)\n if (typeof window === \"undefined\") return false;\n return window.matchMedia(query).matches;\n });\n\n useEffect(() => {\n if (typeof window === \"undefined\") return;\n const media = window.matchMedia(query);\n // Sync state after mount (handles SSR mismatch)\n if (media.matches !== matches) {\n setMatches(media.matches);\n }\n const listener = (e: MediaQueryListEvent) => setMatches(e.matches);\n media.addEventListener(\"change\", listener);\n return () => media.removeEventListener(\"change\", listener);\n }, [query, matches]);\n\n return matches;\n}\n\n// ============================================================================\n// Panel Root\n// ============================================================================\n\nfunction PanelRoot({\n children,\n isOpen: controlledIsOpen,\n defaultOpen = false,\n onOpenChange,\n onClose,\n position = \"right\",\n width = \"md\",\n mobileBreakpoint = 768,\n}: PanelProps): ReactElement {\n // State management (controlled/uncontrolled)\n const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(defaultOpen);\n const isControlled = controlledIsOpen !== undefined;\n const isOpen = isControlled ? controlledIsOpen : uncontrolledIsOpen;\n\n // Refs\n const triggerRef = useRef<HTMLElement | null>(null);\n\n // IDs for ARIA\n const uniqueId = useId();\n const panelId = `panel-${uniqueId}`;\n const titleId = `panel-title-${uniqueId}`;\n\n // Responsive detection\n const isMobile = useMediaQuery(`(max-width: ${mobileBreakpoint - 1}px)`);\n\n // State setter\n const setIsOpen = useCallback(\n (open: boolean) => {\n if (!isControlled) {\n setUncontrolledIsOpen(open);\n }\n onOpenChange?.(open);\n },\n [isControlled, onOpenChange]\n );\n\n // Close handler with focus restoration\n const handleClose = useCallback(() => {\n setIsOpen(false);\n onClose?.();\n // Return focus to trigger if it still exists in DOM\n if (triggerRef.current) {\n window.requestAnimationFrame(() => {\n triggerRef.current?.focus();\n });\n }\n }, [setIsOpen, onClose]);\n\n // Escape key handler (desktop only - mobile handled by React Aria)\n useEffect(() => {\n if (!isOpen || isMobile) return;\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") {\n e.preventDefault();\n handleClose();\n }\n };\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => document.removeEventListener(\"keydown\", handleKeyDown);\n }, [isOpen, isMobile, handleClose]);\n\n const contextValue: PanelContextValue = {\n isOpen,\n setIsOpen,\n panelId,\n titleId,\n triggerRef,\n position,\n width,\n mobileBreakpoint,\n isMobile,\n handleClose,\n };\n\n return (\n <PanelContext.Provider value={contextValue}>\n {children}\n </PanelContext.Provider>\n );\n}\nPanelRoot.displayName = \"Panel\";\n\n// ============================================================================\n// Panel.Trigger\n// ============================================================================\n\nfunction PanelTrigger({\n children,\n asChild = true,\n}: PanelTriggerProps): ReactElement | null {\n const { isOpen, setIsOpen, panelId, triggerRef } = usePanelContext();\n\n // Capture ref via callback ref pattern\n const setRef = useCallback(\n (element: HTMLElement | null) => {\n triggerRef.current = element;\n },\n [triggerRef]\n );\n\n const handlePress = useCallback(() => {\n setIsOpen(!isOpen);\n }, [setIsOpen, isOpen]);\n\n // If asChild, clone the child element and add props\n if (asChild && isValidElement(children)) {\n const childProps = children.props as unknown as {\n onPress?: () => void;\n onClick?: () => void;\n };\n return cloneElement(children, {\n ref: setRef,\n \"aria-expanded\": isOpen,\n \"aria-controls\": isOpen ? panelId : undefined,\n \"data-testid\": \"panel-trigger\",\n onPress: handlePress,\n onClick: childProps.onClick\n ? () => {\n childProps.onClick?.();\n handlePress();\n }\n : handlePress,\n } as unknown as Record<string, unknown>);\n }\n\n // Fallback: wrap in AriaButton\n return (\n <AriaButton\n ref={setRef}\n aria-expanded={isOpen}\n aria-controls={isOpen ? panelId : undefined}\n onPress={handlePress}\n data-testid=\"panel-trigger\"\n >\n {children}\n </AriaButton>\n );\n}\nPanelTrigger.displayName = \"PanelTrigger\";\n\n// ============================================================================\n// Built-in Close Button\n// ============================================================================\n\nfunction BuiltInCloseButton(): ReactElement {\n const { handleClose } = usePanelContext();\n\n return (\n <AriaButton\n aria-label=\"Close panel\"\n data-testid=\"panel-close\"\n onPress={handleClose}\n className={panelCloseButtonVariants()}\n >\n <X className=\"h-5 w-5\" />\n </AriaButton>\n );\n}\n\n// ============================================================================\n// Panel.Content\n// ============================================================================\n\nfunction PanelContent({\n children,\n showClose = true,\n className,\n}: PanelContentProps): ReactElement | null {\n const { isOpen, isMobile, panelId, titleId, position, width, handleClose } =\n usePanelContext();\n\n if (!isOpen) return null;\n\n // Mobile: Use React Aria Modal primitives\n if (isMobile) {\n return (\n <AriaModalOverlay\n isDismissable\n isOpen={isOpen}\n onOpenChange={(open) => !open && handleClose()}\n className=\"fixed inset-0 z-50 bg-black/50\"\n >\n <AriaModal className=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n <AriaDialog\n aria-labelledby={titleId}\n className={cn(\n \"w-full max-w-lg rounded-lg bg-[var(--content-background)] shadow-lg outline-none\",\n \"flex max-h-[90vh] flex-col\",\n className\n )}\n >\n {showClose && (\n <div className=\"absolute right-2 top-2\">\n <BuiltInCloseButton />\n </div>\n )}\n {children}\n </AriaDialog>\n </AriaModal>\n </AriaModalOverlay>\n );\n }\n\n // Desktop: Render aside in-place\n return (\n <aside\n id={panelId}\n aria-labelledby={titleId}\n data-testid=\"panel-content\"\n className={cn(panelContentVariants({ position, width }), className)}\n >\n {children}\n {showClose && (\n <div className=\"absolute right-2 top-2\">\n <BuiltInCloseButton />\n </div>\n )}\n </aside>\n );\n}\nPanelContent.displayName = \"PanelContent\";\n\n// ============================================================================\n// Panel.Header\n// ============================================================================\n\nfunction PanelHeader({\n children,\n className,\n}: PanelHeaderProps): ReactElement | null {\n // Note: We use a <header> element but DON'T add role=\"banner\"\n // because banner landmarks should not be contained in other landmarks (like aside)\n // The header element still provides structural meaning for the panel\n return (\n <header className={cn(panelHeaderVariants(), className)}>\n <div className=\"flex flex-col gap-1\">{children}</div>\n </header>\n );\n}\nPanelHeader.displayName = \"PanelHeader\";\n\n// ============================================================================\n// Panel.Title\n// ============================================================================\n\nfunction PanelTitle({\n children,\n as: Tag = \"h2\",\n className,\n}: PanelTitleProps): ReactElement | null {\n const { titleId } = usePanelContext();\n\n return (\n <Tag\n id={titleId}\n // aria-live=\"polite\" announces title changes to screen readers\n // This is important for master-detail patterns where panel content\n // updates when selecting different items (e.g., candidate profiles)\n aria-live=\"polite\"\n className={cn(\n \"text-lg font-semibold text-[var(--content-foreground)]\",\n className\n )}\n >\n {children}\n </Tag>\n );\n}\nPanelTitle.displayName = \"PanelTitle\";\n\n// ============================================================================\n// Panel.Description\n// ============================================================================\n\nfunction PanelDescription({\n children,\n className,\n}: PanelDescriptionProps): ReactElement | null {\n return (\n <p className={cn(\"text-sm text-[var(--menu-muted)]\", className)}>\n {children}\n </p>\n );\n}\nPanelDescription.displayName = \"PanelDescription\";\n\n// ============================================================================\n// Panel.Body\n// ============================================================================\n\nfunction PanelBody({ children, className }: PanelBodyProps): ReactElement | null {\n return <div className={cn(panelBodyVariants(), className)}>{children}</div>;\n}\nPanelBody.displayName = \"PanelBody\";\n\n// ============================================================================\n// Panel.Footer\n// ============================================================================\n\nfunction PanelFooter({\n children,\n className,\n}: PanelFooterProps): ReactElement | null {\n // Note: We use a <footer> element but DON'T add role=\"contentinfo\"\n // because contentinfo landmarks should not be contained in other landmarks (like aside)\n // The footer element still provides structural meaning for the panel\n return (\n <footer className={cn(panelFooterVariants(), className)}>\n {children}\n </footer>\n );\n}\nPanelFooter.displayName = \"PanelFooter\";\n\n// ============================================================================\n// Panel.Close\n// ============================================================================\n\nfunction PanelClose({ children }: PanelCloseProps): ReactElement | null {\n const { handleClose } = usePanelContext();\n\n if (!isValidElement(children)) {\n return null;\n }\n\n // Clone the child and add onPress/onClick handler\n const childProps = children.props as unknown as {\n onPress?: () => void;\n onClick?: () => void;\n };\n\n return cloneElement(children, {\n onPress: () => {\n childProps.onPress?.();\n handleClose();\n },\n onClick: () => {\n childProps.onClick?.();\n handleClose();\n },\n } as unknown as Record<string, unknown>);\n}\nPanelClose.displayName = \"PanelClose\";\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\n/**\n * Panel Component\n *\n * Accessible non-modal sidebar panel using the disclosure pattern with\n * a complementary region for WCAG 2.2 AAA compliance.\n *\n * @example\n * ```tsx\n * <Panel>\n * <Panel.Trigger>\n * <Button>Open Panel</Button>\n * </Panel.Trigger>\n * <Panel.Content>\n * <Panel.Header>\n * <Panel.Title>Panel Title</Panel.Title>\n * <Panel.Description>Optional description</Panel.Description>\n * </Panel.Header>\n * <Panel.Body>\n * Panel content here\n * </Panel.Body>\n * <Panel.Footer>\n * <Button>Action</Button>\n * </Panel.Footer>\n * </Panel.Content>\n * </Panel>\n * ```\n */\nexport const Panel = Object.assign(PanelRoot, {\n Trigger: PanelTrigger,\n Content: PanelContent,\n Header: PanelHeader,\n Title: PanelTitle,\n Description: PanelDescription,\n Body: PanelBody,\n Footer: PanelFooter,\n Close: PanelClose,\n});\n\n// Named exports for individual components\nexport {\n PanelRoot,\n PanelTrigger,\n PanelContent,\n PanelHeader,\n PanelTitle,\n PanelDescription,\n PanelBody,\n PanelFooter,\n PanelClose,\n};\n\n// Export CVA variant types for customization\nexport type PanelContentVariants = VariantProps<typeof panelContentVariants>;\n"]}
@@ -1,30 +1,189 @@
1
+ "use client";
1
2
  'use strict';
2
3
 
3
- var chunkDDWEVC2S_js = require('../../chunk-DDWEVC2S.js');
4
- require('../../chunk-VIREG536.js');
5
- require('../../chunk-T4COXKQ3.js');
4
+ var react = require('react');
5
+ var reactAriaComponents = require('react-aria-components');
6
+ var classVarianceAuthority = require('class-variance-authority');
7
+ var clsx = require('clsx');
8
+ var tailwindMerge = require('tailwind-merge');
9
+ var jsxRuntime = require('react/jsx-runtime');
10
+ var zod = require('zod');
6
11
 
7
-
8
-
9
- Object.defineProperty(exports, "Progress", {
10
- enumerable: true,
11
- get: function () { return chunkDDWEVC2S_js.Progress; }
12
- });
13
- Object.defineProperty(exports, "ProgressPropsSchema", {
14
- enumerable: true,
15
- get: function () { return chunkDDWEVC2S_js.ProgressPropsSchema; }
12
+ // src/elements/Progress/Progress.tsx
13
+ function cn(...inputs) {
14
+ return tailwindMerge.twMerge(clsx.clsx(inputs));
15
+ }
16
+ var progressTrackVariants = classVarianceAuthority.cva(
17
+ // Base styles - track container
18
+ "relative w-full overflow-hidden rounded-full bg-[var(--accent-background)]",
19
+ {
20
+ variants: {
21
+ size: {
22
+ sm: "h-1",
23
+ // 4px
24
+ default: "h-2",
25
+ // 8px
26
+ lg: "h-3"
27
+ // 12px
28
+ }
29
+ },
30
+ defaultVariants: {
31
+ size: "default"
32
+ }
33
+ }
34
+ );
35
+ var progressIndicatorVariants = classVarianceAuthority.cva(
36
+ // Base styles - indicator with smooth transition
37
+ "h-full rounded-full transition-all duration-300 ease-out",
38
+ {
39
+ variants: {
40
+ variant: {
41
+ default: "bg-[var(--primary)]",
42
+ success: "bg-[var(--success,hsl(142,76%,36%))]",
43
+ warning: "bg-[var(--warning,hsl(38,92%,50%))]",
44
+ destructive: "bg-[var(--destructive)]"
45
+ }
46
+ },
47
+ defaultVariants: {
48
+ variant: "default"
49
+ }
50
+ }
51
+ );
52
+ var progressContainerVariants = classVarianceAuthority.cva("flex w-full gap-2", {
53
+ variants: {
54
+ labelPosition: {
55
+ top: "flex-col",
56
+ side: "flex-row items-center"
57
+ }
58
+ },
59
+ defaultVariants: {
60
+ labelPosition: "top"
61
+ }
16
62
  });
17
- Object.defineProperty(exports, "progressContainerVariants", {
18
- enumerable: true,
19
- get: function () { return chunkDDWEVC2S_js.progressContainerVariants; }
63
+ var Progress = react.memo(
64
+ react.forwardRef(
65
+ ({
66
+ value,
67
+ minValue = 0,
68
+ maxValue = 100,
69
+ isIndeterminate = false,
70
+ label,
71
+ showValueLabel = true,
72
+ valueLabel,
73
+ formatOptions,
74
+ labelPosition = "top",
75
+ variant = "default",
76
+ size = "default",
77
+ className,
78
+ "aria-label": ariaLabel,
79
+ "aria-labelledby": ariaLabelledBy,
80
+ "aria-describedby": ariaDescribedBy,
81
+ ...props
82
+ }, ref) => {
83
+ const labelId = react.useId();
84
+ const shouldShowValueLabel = showValueLabel && !isIndeterminate;
85
+ return /* @__PURE__ */ jsxRuntime.jsx(
86
+ reactAriaComponents.ProgressBar,
87
+ {
88
+ ref,
89
+ value: isIndeterminate ? void 0 : value,
90
+ minValue,
91
+ maxValue,
92
+ isIndeterminate,
93
+ formatOptions: formatOptions ?? { style: "percent" },
94
+ "aria-label": ariaLabel,
95
+ "aria-labelledby": label ? labelId : ariaLabelledBy,
96
+ "aria-describedby": ariaDescribedBy,
97
+ className: cn(progressContainerVariants({ labelPosition }), className),
98
+ ...props,
99
+ children: ({ percentage, valueText }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
100
+ (label || shouldShowValueLabel) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-sm", children: [
101
+ label && /* @__PURE__ */ jsxRuntime.jsx(
102
+ "span",
103
+ {
104
+ id: labelId,
105
+ className: "font-medium text-[var(--content-foreground)]",
106
+ children: label
107
+ }
108
+ ),
109
+ shouldShowValueLabel && /* @__PURE__ */ jsxRuntime.jsx(
110
+ "span",
111
+ {
112
+ "aria-hidden": "true",
113
+ className: "text-[var(--menu-muted)]",
114
+ children: valueLabel ?? valueText
115
+ }
116
+ )
117
+ ] }),
118
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: progressTrackVariants({ size }), children: /* @__PURE__ */ jsxRuntime.jsx(
119
+ "div",
120
+ {
121
+ className: cn(
122
+ progressIndicatorVariants({ variant }),
123
+ isIndeterminate && "motion-safe:animate-pulse"
124
+ ),
125
+ style: {
126
+ width: isIndeterminate ? "100%" : `${percentage ?? 0}%`
127
+ }
128
+ }
129
+ ) })
130
+ ] })
131
+ }
132
+ );
133
+ }
134
+ )
135
+ );
136
+ Progress.displayName = "Progress";
137
+ var BaseComponentPropsSchema = zod.z.object({
138
+ // Styling
139
+ className: zod.z.string().optional(),
140
+ // React
141
+ children: zod.z.any().optional(),
142
+ // ReactNode not directly supported by Zod
143
+ id: zod.z.string().optional(),
144
+ // Accessibility (WCAG 2.2 AA requirements)
145
+ "aria-label": zod.z.string().optional(),
146
+ "aria-labelledby": zod.z.string().optional(),
147
+ "aria-describedby": zod.z.string().optional(),
148
+ "aria-live": zod.z.enum(["off", "polite", "assertive"]).optional(),
149
+ "aria-hidden": zod.z.boolean().optional(),
150
+ // Testing & Development
151
+ "data-testid": zod.z.string().optional()
20
152
  });
21
- Object.defineProperty(exports, "progressIndicatorVariants", {
22
- enumerable: true,
23
- get: function () { return chunkDDWEVC2S_js.progressIndicatorVariants; }
24
- });
25
- Object.defineProperty(exports, "progressTrackVariants", {
26
- enumerable: true,
27
- get: function () { return chunkDDWEVC2S_js.progressTrackVariants; }
153
+
154
+ // src/elements/Progress/Progress.types.ts
155
+ var ProgressPropsSchema = BaseComponentPropsSchema.extend({
156
+ // Value props
157
+ /** Current progress value (0-100 by default) */
158
+ value: zod.z.number().optional(),
159
+ /** Minimum value (default: 0) */
160
+ minValue: zod.z.number().optional().default(0),
161
+ /** Maximum value (default: 100) */
162
+ maxValue: zod.z.number().optional().default(100),
163
+ /** When true, shows indeterminate animation (unknown progress) */
164
+ isIndeterminate: zod.z.boolean().optional(),
165
+ // Label props
166
+ /** Label text displayed above or beside the progress bar */
167
+ label: zod.z.string().optional(),
168
+ /** Show/hide the value label (default: true) */
169
+ showValueLabel: zod.z.boolean().optional().default(true),
170
+ /** Custom value label text (overrides formatted value) */
171
+ valueLabel: zod.z.string().optional(),
172
+ /** Label position relative to progress bar */
173
+ labelPosition: zod.z.enum(["top", "side"]).optional().default("top"),
174
+ // Note: formatOptions is Intl.NumberFormatOptions which can't be validated by Zod
175
+ // It's handled in the TypeScript interface instead
176
+ // Variants
177
+ /** Color variant for semantic meaning */
178
+ variant: zod.z.enum(["default", "success", "warning", "destructive"]).optional().default("default"),
179
+ /** Size variant controlling track height */
180
+ size: zod.z.enum(["sm", "default", "lg"]).optional().default("default")
28
181
  });
182
+
183
+ exports.Progress = Progress;
184
+ exports.ProgressPropsSchema = ProgressPropsSchema;
185
+ exports.progressContainerVariants = progressContainerVariants;
186
+ exports.progressIndicatorVariants = progressIndicatorVariants;
187
+ exports.progressTrackVariants = progressTrackVariants;
29
188
  //# sourceMappingURL=index.js.map
30
189
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
1
+ {"version":3,"sources":["../../../src/utils/cn.ts","../../../src/elements/Progress/Progress.tsx","../../../src/schemas/BaseComponentProps.ts","../../../src/elements/Progress/Progress.types.ts"],"names":["twMerge","clsx","cva","memo","forwardRef","useId","jsx","AriaProgressBar","jsxs","Fragment","z"],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Class Name Utility\n * Merges Tailwind CSS classes with conflict resolution\n *\n * Combines clsx for conditional classes and tailwind-merge for deduplication\n *\n * @example\n * cn('px-2 py-1', 'px-4') // => 'py-1 px-4' (px-4 overrides px-2)\n * cn('text-red-500', condition && 'text-blue-500') // => conditional application\n */\n\nimport { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]): string {\n return twMerge(clsx(inputs));\n}\n","\"use client\";\n\n/**\n * Progress Component\n * Accessible progress bar with React Aria primitives and CVA styling\n *\n * @see React Aria ProgressBar: https://react-aria.adobe.com/ProgressBar\n * @see ShadCN Progress: https://ui.shadcn.com/docs/components/progress\n * @see spec.md FR-009 (WCAG 2.2 AAA - 7:1 contrast ratio)\n * @see constitution.md Principle IV (Accessibility First)\n */\n\nimport { forwardRef, memo, useId } from 'react';\nimport { ProgressBar as AriaProgressBar } from 'react-aria-components';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport type { ProgressProps } from './Progress.types';\n\n/**\n * Progress track variants (the background container)\n * Controls size/height of the progress bar\n */\nconst progressTrackVariants = cva(\n // Base styles - track container\n 'relative w-full overflow-hidden rounded-full bg-[var(--accent-background)]',\n {\n variants: {\n size: {\n sm: 'h-1', // 4px\n default: 'h-2', // 8px\n lg: 'h-3', // 12px\n },\n },\n defaultVariants: {\n size: 'default',\n },\n }\n);\n\n/**\n * Progress indicator variants (the filled portion)\n * Controls color and animation based on variant and state\n */\nconst progressIndicatorVariants = cva(\n // Base styles - indicator with smooth transition\n 'h-full rounded-full transition-all duration-300 ease-out',\n {\n variants: {\n variant: {\n default: 'bg-[var(--primary)]',\n success: 'bg-[var(--success,hsl(142,76%,36%))]',\n warning: 'bg-[var(--warning,hsl(38,92%,50%))]',\n destructive: 'bg-[var(--destructive)]',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }\n);\n\n/**\n * Progress container variants (wrapper with label positioning)\n */\nconst progressContainerVariants = cva('flex w-full gap-2', {\n variants: {\n labelPosition: {\n top: 'flex-col',\n side: 'flex-row items-center',\n },\n },\n defaultVariants: {\n labelPosition: 'top',\n },\n});\n\nexport interface ProgressComponentProps\n extends Omit<ProgressProps, 'children' | 'size' | 'variant'>,\n VariantProps<typeof progressTrackVariants>,\n VariantProps<typeof progressIndicatorVariants> {\n /** Size variant controlling track height */\n size?: 'sm' | 'default' | 'lg';\n /** Color variant for semantic meaning */\n variant?: 'default' | 'success' | 'warning' | 'destructive';\n}\n\n/**\n * Progress Component\n * Displays determinate or indeterminate progress indicators\n *\n * Features:\n * - WCAG 2.2 AAA compliant (7:1 contrast ratio)\n * - Determinate and indeterminate modes\n * - Custom value formatting via Intl.NumberFormat\n * - 3 size variants (sm, default, lg)\n * - 4 color variants (default, success, warning, destructive)\n * - Label support with flexible positioning\n * - Theme-aware styling via semantic CSS tokens\n */\nconst Progress = memo(\n forwardRef<HTMLDivElement, ProgressComponentProps>(\n (\n {\n value,\n minValue = 0,\n maxValue = 100,\n isIndeterminate = false,\n label,\n showValueLabel = true,\n valueLabel,\n formatOptions,\n labelPosition = 'top',\n variant = 'default',\n size = 'default',\n className,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n ...props\n },\n ref\n ) => {\n const labelId = useId();\n\n // Determine if we should show the value label\n const shouldShowValueLabel = showValueLabel && !isIndeterminate;\n\n return (\n <AriaProgressBar\n ref={ref}\n value={isIndeterminate ? undefined : value}\n minValue={minValue}\n maxValue={maxValue}\n isIndeterminate={isIndeterminate}\n formatOptions={formatOptions ?? { style: 'percent' }}\n aria-label={ariaLabel}\n aria-labelledby={label ? labelId : ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n className={cn(progressContainerVariants({ labelPosition }), className)}\n {...props}\n >\n {({ percentage, valueText }) => (\n <>\n {/* Label row with optional value display */}\n {(label || shouldShowValueLabel) && (\n <div className=\"flex justify-between text-sm\">\n {label && (\n <span\n id={labelId}\n className=\"font-medium text-[var(--content-foreground)]\"\n >\n {label}\n </span>\n )}\n {shouldShowValueLabel && (\n <span\n aria-hidden=\"true\"\n className=\"text-[var(--menu-muted)]\"\n >\n {valueLabel ?? valueText}\n </span>\n )}\n </div>\n )}\n\n {/* Progress track and indicator */}\n <div className={progressTrackVariants({ size })}>\n <div\n className={cn(\n progressIndicatorVariants({ variant }),\n isIndeterminate && 'motion-safe:animate-pulse'\n )}\n style={{\n width: isIndeterminate ? '100%' : `${percentage ?? 0}%`,\n }}\n />\n </div>\n </>\n )}\n </AriaProgressBar>\n );\n }\n )\n);\n\nProgress.displayName = 'Progress';\n\nexport {\n Progress,\n progressTrackVariants,\n progressIndicatorVariants,\n progressContainerVariants,\n};\n","import { z } from 'zod';\n\n/**\n * Base props schema for all Themis components\n * Ensures consistent accessibility and styling APIs across the library\n *\n * @see spec.md FR-009 to FR-014 (Accessibility Requirements)\n * @see constitution.md Principle IV (Accessibility First - WCAG 2.2 AA minimum)\n */\nexport const BaseComponentPropsSchema = z.object({\n // Styling\n className: z.string().optional(),\n\n // React\n children: z.any().optional(), // ReactNode not directly supported by Zod\n id: z.string().optional(),\n\n // Accessibility (WCAG 2.2 AA requirements)\n 'aria-label': z.string().optional(),\n 'aria-labelledby': z.string().optional(),\n 'aria-describedby': z.string().optional(),\n 'aria-live': z.enum(['off', 'polite', 'assertive']).optional(),\n 'aria-hidden': z.boolean().optional(),\n\n // Testing & Development\n 'data-testid': z.string().optional(),\n});\n\nexport type BaseComponentProps = z.infer<typeof BaseComponentPropsSchema>;\n","import { z } from 'zod';\nimport { BaseComponentPropsSchema } from '../../schemas/BaseComponentProps';\n\n/**\n * Progress props schema extending BaseComponentProps\n *\n * @see React Aria ProgressBar: https://react-aria.adobe.com/ProgressBar\n * @see ShadCN Progress: https://ui.shadcn.com/docs/components/progress\n * @see tasks.md Phase 1.1 (Type System)\n * @see spec.md FR-009 (WCAG 2.2 AAA - 7:1 contrast ratio)\n * @see constitution.md Principle IV (Accessibility First)\n */\nexport const ProgressPropsSchema = BaseComponentPropsSchema.extend({\n // Value props\n /** Current progress value (0-100 by default) */\n value: z.number().optional(),\n /** Minimum value (default: 0) */\n minValue: z.number().optional().default(0),\n /** Maximum value (default: 100) */\n maxValue: z.number().optional().default(100),\n /** When true, shows indeterminate animation (unknown progress) */\n isIndeterminate: z.boolean().optional(),\n\n // Label props\n /** Label text displayed above or beside the progress bar */\n label: z.string().optional(),\n /** Show/hide the value label (default: true) */\n showValueLabel: z.boolean().optional().default(true),\n /** Custom value label text (overrides formatted value) */\n valueLabel: z.string().optional(),\n /** Label position relative to progress bar */\n labelPosition: z.enum(['top', 'side']).optional().default('top'),\n\n // Note: formatOptions is Intl.NumberFormatOptions which can't be validated by Zod\n // It's handled in the TypeScript interface instead\n\n // Variants\n /** Color variant for semantic meaning */\n variant: z\n .enum(['default', 'success', 'warning', 'destructive'])\n .optional()\n .default('default'),\n /** Size variant controlling track height */\n size: z.enum(['sm', 'default', 'lg']).optional().default('default'),\n});\n\nexport type ProgressProps = z.infer<typeof ProgressPropsSchema> & {\n /** Number format options for value display (default: { style: 'percent' }) */\n formatOptions?: Intl.NumberFormatOptions;\n};\n\n/**\n * Progress variant type for CVA\n */\nexport type ProgressVariant = NonNullable<ProgressProps['variant']>;\n\n/**\n * Progress size type for CVA\n */\nexport type ProgressSize = NonNullable<ProgressProps['size']>;\n\n/**\n * Progress label position type\n */\nexport type ProgressLabelPosition = NonNullable<ProgressProps['labelPosition']>;\n"]}