@tribepad/themis 1.0.1 → 1.0.2

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 (301) hide show
  1. package/dist/elements/Accordion/index.js +1 -335
  2. package/dist/elements/Accordion/index.js.map +1 -1
  3. package/dist/elements/Accordion/index.mjs +1 -317
  4. package/dist/elements/Accordion/index.mjs.map +1 -1
  5. package/dist/elements/AlertDialog/AlertDialog.d.ts +43 -0
  6. package/dist/elements/AlertDialog/AlertDialog.d.ts.map +1 -0
  7. package/dist/elements/AlertDialog/AlertDialog.styles.d.ts +15 -0
  8. package/dist/elements/AlertDialog/AlertDialog.styles.d.ts.map +1 -0
  9. package/dist/elements/AlertDialog/AlertDialog.types.d.ts +72 -0
  10. package/dist/elements/AlertDialog/AlertDialog.types.d.ts.map +1 -0
  11. package/dist/elements/AlertDialog/index.d.ts +25 -0
  12. package/dist/elements/AlertDialog/index.d.ts.map +1 -0
  13. package/dist/elements/AlertDialog/index.js +3 -0
  14. package/dist/elements/AlertDialog/index.js.map +1 -0
  15. package/dist/elements/AlertDialog/index.mjs +3 -0
  16. package/dist/elements/AlertDialog/index.mjs.map +1 -0
  17. package/dist/elements/Avatar/index.js +1 -468
  18. package/dist/elements/Avatar/index.js.map +1 -1
  19. package/dist/elements/Avatar/index.mjs +1 -456
  20. package/dist/elements/Avatar/index.mjs.map +1 -1
  21. package/dist/elements/Badge/index.js +1 -243
  22. package/dist/elements/Badge/index.js.map +1 -1
  23. package/dist/elements/Badge/index.mjs +1 -234
  24. package/dist/elements/Badge/index.mjs.map +1 -1
  25. package/dist/elements/Breadcrumbs/index.js +1 -821
  26. package/dist/elements/Breadcrumbs/index.js.map +1 -1
  27. package/dist/elements/Breadcrumbs/index.mjs +1 -810
  28. package/dist/elements/Breadcrumbs/index.mjs.map +1 -1
  29. package/dist/elements/Button/Button.d.ts +26 -81
  30. package/dist/elements/Button/Button.d.ts.map +1 -1
  31. package/dist/elements/Button/Button.styles.d.ts +35 -0
  32. package/dist/elements/Button/Button.styles.d.ts.map +1 -0
  33. package/dist/elements/Button/Button.types.d.ts +20 -8
  34. package/dist/elements/Button/Button.types.d.ts.map +1 -1
  35. package/dist/elements/Button/index.js +1 -288
  36. package/dist/elements/Button/index.js.map +1 -1
  37. package/dist/elements/Button/index.mjs +1 -283
  38. package/dist/elements/Button/index.mjs.map +1 -1
  39. package/dist/elements/ButtonGroup/index.js +1 -237
  40. package/dist/elements/ButtonGroup/index.js.map +1 -1
  41. package/dist/elements/ButtonGroup/index.mjs +1 -222
  42. package/dist/elements/ButtonGroup/index.mjs.map +1 -1
  43. package/dist/elements/Card/index.js +1 -579
  44. package/dist/elements/Card/index.js.map +1 -1
  45. package/dist/elements/Card/index.mjs +1 -560
  46. package/dist/elements/Card/index.mjs.map +1 -1
  47. package/dist/elements/Carousel/Carousel.d.ts +1 -11
  48. package/dist/elements/Carousel/Carousel.d.ts.map +1 -1
  49. package/dist/elements/Carousel/LazyCarousel.d.ts +1 -1
  50. package/dist/elements/Carousel/LazyCarousel.d.ts.map +1 -1
  51. package/dist/elements/Carousel/index.js +1 -789
  52. package/dist/elements/Carousel/index.js.map +1 -1
  53. package/dist/elements/Carousel/index.mjs +1 -786
  54. package/dist/elements/Carousel/index.mjs.map +1 -1
  55. package/dist/elements/Chart/ChartContext.d.ts.map +1 -1
  56. package/dist/elements/Chart/index.js +1 -1842
  57. package/dist/elements/Chart/index.js.map +1 -1
  58. package/dist/elements/Chart/index.mjs +1 -1832
  59. package/dist/elements/Chart/index.mjs.map +1 -1
  60. package/dist/elements/Checkbox/index.js +1 -316
  61. package/dist/elements/Checkbox/index.js.map +1 -1
  62. package/dist/elements/Checkbox/index.mjs +1 -306
  63. package/dist/elements/Checkbox/index.mjs.map +1 -1
  64. package/dist/elements/CheckboxGroup/index.js +1 -455
  65. package/dist/elements/CheckboxGroup/index.js.map +1 -1
  66. package/dist/elements/CheckboxGroup/index.mjs +1 -439
  67. package/dist/elements/CheckboxGroup/index.mjs.map +1 -1
  68. package/dist/elements/Combobox/Combobox.d.ts +56 -0
  69. package/dist/elements/Combobox/Combobox.d.ts.map +1 -0
  70. package/dist/elements/Combobox/Combobox.styles.d.ts +29 -0
  71. package/dist/elements/Combobox/Combobox.styles.d.ts.map +1 -0
  72. package/dist/elements/Combobox/Combobox.types.d.ts +67 -0
  73. package/dist/elements/Combobox/Combobox.types.d.ts.map +1 -0
  74. package/dist/elements/Combobox/index.d.ts +20 -0
  75. package/dist/elements/Combobox/index.d.ts.map +1 -0
  76. package/dist/elements/Combobox/index.js +3 -0
  77. package/dist/elements/Combobox/index.js.map +1 -0
  78. package/dist/elements/Combobox/index.mjs +3 -0
  79. package/dist/elements/Combobox/index.mjs.map +1 -0
  80. package/dist/elements/DatePicker/DatePicker.d.ts +1 -1
  81. package/dist/elements/DatePicker/DatePicker.d.ts.map +1 -1
  82. package/dist/elements/DatePicker/index.js +1 -903
  83. package/dist/elements/DatePicker/index.js.map +1 -1
  84. package/dist/elements/DatePicker/index.mjs +1 -853
  85. package/dist/elements/DatePicker/index.mjs.map +1 -1
  86. package/dist/elements/Dropdown/Dropdown.d.ts +7 -15
  87. package/dist/elements/Dropdown/Dropdown.d.ts.map +1 -1
  88. package/dist/elements/Dropdown/Dropdown.styles.d.ts +22 -0
  89. package/dist/elements/Dropdown/Dropdown.styles.d.ts.map +1 -0
  90. package/dist/elements/Dropdown/index.d.ts +1 -0
  91. package/dist/elements/Dropdown/index.d.ts.map +1 -1
  92. package/dist/elements/Dropdown/index.js +1 -193
  93. package/dist/elements/Dropdown/index.js.map +1 -1
  94. package/dist/elements/Dropdown/index.mjs +1 -184
  95. package/dist/elements/Dropdown/index.mjs.map +1 -1
  96. package/dist/elements/FileField/index.js +1 -1539
  97. package/dist/elements/FileField/index.js.map +1 -1
  98. package/dist/elements/FileField/index.mjs +1 -1507
  99. package/dist/elements/FileField/index.mjs.map +1 -1
  100. package/dist/elements/FormLayout/index.js +1 -170
  101. package/dist/elements/FormLayout/index.js.map +1 -1
  102. package/dist/elements/FormLayout/index.mjs +1 -167
  103. package/dist/elements/FormLayout/index.mjs.map +1 -1
  104. package/dist/elements/Modal/Modal.d.ts +9 -14
  105. package/dist/elements/Modal/Modal.d.ts.map +1 -1
  106. package/dist/elements/Modal/Modal.styles.d.ts +29 -0
  107. package/dist/elements/Modal/Modal.styles.d.ts.map +1 -0
  108. package/dist/elements/Modal/index.d.ts +1 -0
  109. package/dist/elements/Modal/index.d.ts.map +1 -1
  110. package/dist/elements/Modal/index.js +1 -232
  111. package/dist/elements/Modal/index.js.map +1 -1
  112. package/dist/elements/Modal/index.mjs +1 -220
  113. package/dist/elements/Modal/index.mjs.map +1 -1
  114. package/dist/elements/NumberField/index.js +1 -666
  115. package/dist/elements/NumberField/index.js.map +1 -1
  116. package/dist/elements/NumberField/index.mjs +1 -654
  117. package/dist/elements/NumberField/index.mjs.map +1 -1
  118. package/dist/elements/OTPInput/OTPInput.d.ts.map +1 -1
  119. package/dist/elements/OTPInput/index.js +1 -734
  120. package/dist/elements/OTPInput/index.js.map +1 -1
  121. package/dist/elements/OTPInput/index.mjs +1 -732
  122. package/dist/elements/OTPInput/index.mjs.map +1 -1
  123. package/dist/elements/Pagination/Pagination.d.ts +45 -0
  124. package/dist/elements/Pagination/Pagination.d.ts.map +1 -0
  125. package/dist/elements/Pagination/Pagination.styles.d.ts +10 -0
  126. package/dist/elements/Pagination/Pagination.styles.d.ts.map +1 -0
  127. package/dist/elements/Pagination/Pagination.types.d.ts +55 -0
  128. package/dist/elements/Pagination/Pagination.types.d.ts.map +1 -0
  129. package/dist/elements/Pagination/index.d.ts +21 -0
  130. package/dist/elements/Pagination/index.d.ts.map +1 -0
  131. package/dist/elements/Pagination/index.js +3 -0
  132. package/dist/elements/Pagination/index.js.map +1 -0
  133. package/dist/elements/Pagination/index.mjs +3 -0
  134. package/dist/elements/Pagination/index.mjs.map +1 -0
  135. package/dist/elements/Panel/index.js +1 -330
  136. package/dist/elements/Panel/index.js.map +1 -1
  137. package/dist/elements/Panel/index.mjs +1 -323
  138. package/dist/elements/Panel/index.mjs.map +1 -1
  139. package/dist/elements/PasswordField/PasswordField.d.ts +27 -0
  140. package/dist/elements/PasswordField/PasswordField.d.ts.map +1 -0
  141. package/dist/elements/PasswordField/PasswordField.styles.d.ts +32 -0
  142. package/dist/elements/PasswordField/PasswordField.styles.d.ts.map +1 -0
  143. package/dist/elements/PasswordField/PasswordField.types.d.ts +100 -0
  144. package/dist/elements/PasswordField/PasswordField.types.d.ts.map +1 -0
  145. package/dist/elements/PasswordField/index.css +2 -0
  146. package/dist/elements/PasswordField/index.css.map +1 -0
  147. package/dist/elements/PasswordField/index.d.ts +20 -0
  148. package/dist/elements/PasswordField/index.d.ts.map +1 -0
  149. package/dist/elements/PasswordField/index.js +3 -0
  150. package/dist/elements/PasswordField/index.js.map +1 -0
  151. package/dist/elements/PasswordField/index.mjs +3 -0
  152. package/dist/elements/PasswordField/index.mjs.map +1 -0
  153. package/dist/elements/Progress/index.js +1 -187
  154. package/dist/elements/Progress/index.js.map +1 -1
  155. package/dist/elements/Progress/index.mjs +1 -181
  156. package/dist/elements/Progress/index.mjs.map +1 -1
  157. package/dist/elements/RadioGroup/index.js +1 -369
  158. package/dist/elements/RadioGroup/index.js.map +1 -1
  159. package/dist/elements/RadioGroup/index.mjs +1 -359
  160. package/dist/elements/RadioGroup/index.mjs.map +1 -1
  161. package/dist/elements/Resizable/index.js +1 -1580
  162. package/dist/elements/Resizable/index.js.map +1 -1
  163. package/dist/elements/Resizable/index.mjs +1 -1566
  164. package/dist/elements/Resizable/index.mjs.map +1 -1
  165. package/dist/elements/SearchField/SearchField.d.ts +27 -0
  166. package/dist/elements/SearchField/SearchField.d.ts.map +1 -0
  167. package/dist/elements/SearchField/SearchField.styles.d.ts +32 -0
  168. package/dist/elements/SearchField/SearchField.styles.d.ts.map +1 -0
  169. package/dist/elements/SearchField/SearchField.types.d.ts +45 -0
  170. package/dist/elements/SearchField/SearchField.types.d.ts.map +1 -0
  171. package/dist/elements/SearchField/index.css +2 -0
  172. package/dist/elements/SearchField/index.css.map +1 -0
  173. package/dist/elements/SearchField/index.d.ts +21 -0
  174. package/dist/elements/SearchField/index.d.ts.map +1 -0
  175. package/dist/elements/SearchField/index.js +3 -0
  176. package/dist/elements/SearchField/index.js.map +1 -0
  177. package/dist/elements/SearchField/index.mjs +3 -0
  178. package/dist/elements/SearchField/index.mjs.map +1 -0
  179. package/dist/elements/Select/Select.d.ts +19 -48
  180. package/dist/elements/Select/Select.d.ts.map +1 -1
  181. package/dist/elements/Select/Select.styles.d.ts +55 -0
  182. package/dist/elements/Select/Select.styles.d.ts.map +1 -0
  183. package/dist/elements/Select/index.js +1 -589
  184. package/dist/elements/Select/index.js.map +1 -1
  185. package/dist/elements/Select/index.mjs +1 -582
  186. package/dist/elements/Select/index.mjs.map +1 -1
  187. package/dist/elements/Skeleton/index.js +1 -82
  188. package/dist/elements/Skeleton/index.js.map +1 -1
  189. package/dist/elements/Skeleton/index.mjs +1 -78
  190. package/dist/elements/Skeleton/index.mjs.map +1 -1
  191. package/dist/elements/Switch/index.js +1 -179
  192. package/dist/elements/Switch/index.js.map +1 -1
  193. package/dist/elements/Switch/index.mjs +1 -173
  194. package/dist/elements/Switch/index.mjs.map +1 -1
  195. package/dist/elements/Table/Table.d.ts +3 -24
  196. package/dist/elements/Table/Table.d.ts.map +1 -1
  197. package/dist/elements/Table/Table.styles.d.ts +24 -0
  198. package/dist/elements/Table/Table.styles.d.ts.map +1 -0
  199. package/dist/elements/Table/index.js +1 -595
  200. package/dist/elements/Table/index.js.map +1 -1
  201. package/dist/elements/Table/index.mjs +1 -578
  202. package/dist/elements/Table/index.mjs.map +1 -1
  203. package/dist/elements/Tabs/index.js +1 -337
  204. package/dist/elements/Tabs/index.js.map +1 -1
  205. package/dist/elements/Tabs/index.mjs +1 -320
  206. package/dist/elements/Tabs/index.mjs.map +1 -1
  207. package/dist/elements/TextField/TextField.d.ts +6 -42
  208. package/dist/elements/TextField/TextField.d.ts.map +1 -1
  209. package/dist/elements/TextField/TextField.hooks.d.ts +63 -0
  210. package/dist/elements/TextField/TextField.hooks.d.ts.map +1 -0
  211. package/dist/elements/TextField/TextField.icons.d.ts +19 -0
  212. package/dist/elements/TextField/TextField.icons.d.ts.map +1 -0
  213. package/dist/elements/TextField/TextField.styles.d.ts +37 -0
  214. package/dist/elements/TextField/TextField.styles.d.ts.map +1 -0
  215. package/dist/elements/TextField/TextField.types.d.ts +3 -0
  216. package/dist/elements/TextField/TextField.types.d.ts.map +1 -1
  217. package/dist/elements/TextField/index.css +1 -22
  218. package/dist/elements/TextField/index.css.map +1 -1
  219. package/dist/elements/TextField/index.js +1 -902
  220. package/dist/elements/TextField/index.js.map +1 -1
  221. package/dist/elements/TextField/index.mjs +1 -882
  222. package/dist/elements/TextField/index.mjs.map +1 -1
  223. package/dist/elements/TimeField/index.js +1 -254
  224. package/dist/elements/TimeField/index.js.map +1 -1
  225. package/dist/elements/TimeField/index.mjs +1 -238
  226. package/dist/elements/TimeField/index.mjs.map +1 -1
  227. package/dist/elements/Toast/Toast.d.ts +0 -22
  228. package/dist/elements/Toast/Toast.d.ts.map +1 -1
  229. package/dist/elements/Toast/index.js +1 -737
  230. package/dist/elements/Toast/index.js.map +1 -1
  231. package/dist/elements/Toast/index.mjs +1 -724
  232. package/dist/elements/Toast/index.mjs.map +1 -1
  233. package/dist/elements/Tooltip/index.js +1 -323
  234. package/dist/elements/Tooltip/index.js.map +1 -1
  235. package/dist/elements/Tooltip/index.mjs +1 -310
  236. package/dist/elements/Tooltip/index.mjs.map +1 -1
  237. package/dist/elements/index.css +1 -22
  238. package/dist/elements/index.css.map +1 -1
  239. package/dist/elements/index.d.ts +13 -1
  240. package/dist/elements/index.d.ts.map +1 -1
  241. package/dist/elements/index.js +1 -12455
  242. package/dist/elements/index.js.map +1 -1
  243. package/dist/elements/index.mjs +1 -12233
  244. package/dist/elements/index.mjs.map +1 -1
  245. package/dist/index.css +1 -22
  246. package/dist/index.css.map +1 -1
  247. package/dist/index.js +2 -12490
  248. package/dist/index.js.map +1 -1
  249. package/dist/index.mjs +2 -12262
  250. package/dist/index.mjs.map +1 -1
  251. package/dist/schemas/index.js +2 -54
  252. package/dist/schemas/index.js.map +1 -1
  253. package/dist/schemas/index.mjs +2 -48
  254. package/dist/schemas/index.mjs.map +1 -1
  255. package/dist/styles/defaults.css +151 -0
  256. package/dist/styles/index.js +1 -166
  257. package/dist/styles/index.js.map +1 -1
  258. package/dist/styles/index.mjs +1 -129
  259. package/dist/styles/index.mjs.map +1 -1
  260. package/dist/utils/index.js +1 -12
  261. package/dist/utils/index.js.map +1 -1
  262. package/dist/utils/index.mjs +1 -10
  263. package/dist/utils/index.mjs.map +1 -1
  264. package/package.json +9 -7
  265. package/src/elements/Accordion/Accordion.stories.tsx +1 -1
  266. package/src/elements/AlertDialog/AlertDialog.stories.tsx +124 -0
  267. package/src/elements/Avatar/Avatar.stories.tsx +1 -1
  268. package/src/elements/Badge/Badge.stories.tsx +1 -1
  269. package/src/elements/Breadcrumbs/Breadcrumbs.stories.tsx +1 -1
  270. package/src/elements/Button/Button.stories.tsx +1 -1
  271. package/src/elements/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  272. package/src/elements/Card/Card.stories.tsx +1 -1
  273. package/src/elements/Carousel/Carousel.stories.tsx +1 -1
  274. package/src/elements/Chart/Chart.stories.tsx +1 -1
  275. package/src/elements/Checkbox/Checkbox.stories.tsx +1 -1
  276. package/src/elements/CheckboxGroup/CheckboxGroup.stories.tsx +1 -1
  277. package/src/elements/Combobox/Combobox.stories.tsx +133 -0
  278. package/src/elements/DatePicker/DatePicker.stories.tsx +1 -1
  279. package/src/elements/Dropdown/Dropdown.stories.tsx +1 -1
  280. package/src/elements/FileField/FileField.stories.tsx +1 -1
  281. package/src/elements/FileField/FileProgress.stories.tsx +1 -1
  282. package/src/elements/FormLayout/FormLayout.stories.tsx +1 -1
  283. package/src/elements/Modal/Modal.stories.tsx +1 -1
  284. package/src/elements/NumberField/NumberField.stories.tsx +1 -1
  285. package/src/elements/OTPInput/OTPInput.stories.tsx +1 -1
  286. package/src/elements/Pagination/Pagination.stories.tsx +203 -0
  287. package/src/elements/Panel/Panel.stories.tsx +1 -1
  288. package/src/elements/PasswordField/PasswordField.stories.tsx +167 -0
  289. package/src/elements/Progress/Progress.stories.tsx +1 -1
  290. package/src/elements/RadioGroup/RadioGroup.stories.tsx +1 -1
  291. package/src/elements/Resizable/Resizable.stories.tsx +1 -1
  292. package/src/elements/SearchField/SearchField.stories.tsx +146 -0
  293. package/src/elements/Select/Select.stories.tsx +1 -1
  294. package/src/elements/Skeleton/Skeleton.stories.tsx +1 -1
  295. package/src/elements/Switch/Switch.stories.tsx +1 -1
  296. package/src/elements/Table/Table.stories.tsx +1 -1
  297. package/src/elements/Tabs/Tabs.stories.tsx +1 -1
  298. package/src/elements/TextField/TextField.stories.tsx +1 -1
  299. package/src/elements/TimeField/TimeField.stories.tsx +1 -1
  300. package/src/elements/Toast/Toast.stories.tsx +1 -1
  301. package/src/elements/Tooltip/Tooltip.stories.tsx +1 -1
@@ -1,1582 +1,3 @@
1
1
  "use client";
2
- 'use strict';
3
-
4
- var react = require('react');
5
- var clsx = require('clsx');
6
- var tailwindMerge = require('tailwind-merge');
7
- var jsxRuntime = require('react/jsx-runtime');
8
- var zod = require('zod');
9
- var classVarianceAuthority = require('class-variance-authority');
10
- var lucideReact = require('lucide-react');
11
- var reactAriaComponents = require('react-aria-components');
12
-
13
- // src/elements/Resizable/components/ResizablePanelGroup.tsx
14
- function cn(...inputs) {
15
- return tailwindMerge.twMerge(clsx.clsx(inputs));
16
- }
17
- var ResizableContext = react.createContext(
18
- null
19
- );
20
- ResizableContext.displayName = "ResizableContext";
21
- function useResizableContext() {
22
- const context = react.useContext(ResizableContext);
23
- if (!context) {
24
- throw new Error(
25
- "useResizableContext must be used within a ResizablePanelGroup. Make sure ResizablePanel and ResizableHandle are children of ResizablePanelGroup."
26
- );
27
- }
28
- return context;
29
- }
30
- function useResizableProvider({
31
- direction,
32
- groupLabel,
33
- sizes: controlledSizes,
34
- onSizesChange
35
- }) {
36
- const [internalSizes, setInternalSizes] = react.useState([]);
37
- const [panels, setPanels] = react.useState([]);
38
- const containerRef = react.useRef(null);
39
- const liveRegionRef = react.useRef(null);
40
- const announceTimeoutRef = react.useRef(null);
41
- const sizesInitializedRef = react.useRef(false);
42
- const isControlled = controlledSizes !== void 0;
43
- const sizes = isControlled ? controlledSizes : internalSizes;
44
- const setSizes = react.useCallback(
45
- (newSizes) => {
46
- if (isControlled) {
47
- onSizesChange?.(newSizes);
48
- } else {
49
- setInternalSizes(newSizes);
50
- }
51
- },
52
- [isControlled, onSizesChange]
53
- );
54
- const registerPanel = react.useCallback((index, info) => {
55
- setPanels((prev) => {
56
- const newPanels = [...prev];
57
- newPanels[index] = info;
58
- return newPanels;
59
- });
60
- }, []);
61
- const unregisterPanel = react.useCallback((index) => {
62
- setPanels((prev) => {
63
- const newPanels = [...prev];
64
- delete newPanels[index];
65
- return newPanels.filter(Boolean);
66
- });
67
- }, []);
68
- react.useEffect(() => {
69
- if (isControlled || sizesInitializedRef.current) return;
70
- const registeredPanels = panels.filter(Boolean);
71
- const panelCount = registeredPanels.length;
72
- if (panelCount < 2) return;
73
- const needsInit = sizes.length < panelCount || sizes.some((s) => s === void 0);
74
- if (needsInit) {
75
- const newSizes = [];
76
- const equalSize = 100 / panelCount;
77
- for (let i = 0; i < panelCount; i++) {
78
- newSizes[i] = equalSize;
79
- }
80
- sizesInitializedRef.current = true;
81
- setInternalSizes(newSizes);
82
- }
83
- }, [panels, sizes, isControlled]);
84
- react.useEffect(() => {
85
- return () => {
86
- if (announceTimeoutRef.current) {
87
- clearTimeout(announceTimeoutRef.current);
88
- }
89
- if (liveRegionRef.current) {
90
- document.body.removeChild(liveRegionRef.current);
91
- liveRegionRef.current = null;
92
- }
93
- };
94
- }, []);
95
- const announce = react.useCallback((message) => {
96
- if (!liveRegionRef.current) {
97
- const liveRegion = document.createElement("div");
98
- liveRegion.setAttribute("aria-live", "polite");
99
- liveRegion.setAttribute("aria-atomic", "true");
100
- liveRegion.className = "sr-only";
101
- liveRegion.style.cssText = "position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;";
102
- document.body.appendChild(liveRegion);
103
- liveRegionRef.current = liveRegion;
104
- }
105
- liveRegionRef.current.textContent = message;
106
- if (announceTimeoutRef.current) {
107
- clearTimeout(announceTimeoutRef.current);
108
- }
109
- announceTimeoutRef.current = setTimeout(() => {
110
- if (liveRegionRef.current) {
111
- liveRegionRef.current.textContent = "";
112
- }
113
- }, 1e3);
114
- }, []);
115
- return {
116
- direction,
117
- groupLabel,
118
- sizes,
119
- setSizes,
120
- panels,
121
- registerPanel,
122
- unregisterPanel,
123
- announce,
124
- containerRef
125
- };
126
- }
127
- var ResizablePanelGroup = react.forwardRef(function ResizablePanelGroup2({ direction, groupLabel, sizes, onSizesChange, className, children }, ref) {
128
- const contextValue = useResizableProvider({
129
- direction,
130
- groupLabel,
131
- sizes,
132
- onSizesChange
133
- });
134
- react.useImperativeHandle(
135
- ref,
136
- () => contextValue.containerRef.current,
137
- [contextValue.containerRef]
138
- );
139
- return /* @__PURE__ */ jsxRuntime.jsx(ResizableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
140
- "div",
141
- {
142
- ref: contextValue.containerRef,
143
- role: "group",
144
- "aria-label": `${groupLabel}, ${direction}`,
145
- "data-direction": direction,
146
- className: cn(
147
- "flex h-full w-full",
148
- direction === "horizontal" ? "flex-row" : "flex-col",
149
- className
150
- ),
151
- children
152
- }
153
- ) });
154
- });
155
- ResizablePanelGroup.displayName = "ResizablePanelGroup";
156
- var DEFAULT_MIN_SIZE = 10;
157
- var DEFAULT_MAX_SIZE = 90;
158
- var LONG_PRESS_THRESHOLD = 300;
159
- var ResizePresetSchema = zod.z.object({
160
- label: zod.z.string().min(1),
161
- sizes: zod.z.array(zod.z.number().min(0).max(100))
162
- });
163
- var ResizablePanelGroupPropsSchema = zod.z.object({
164
- /** Layout direction */
165
- direction: zod.z.enum(["horizontal", "vertical"]),
166
- /** REQUIRED: Label for screen reader identification of this group */
167
- groupLabel: zod.z.string().min(1),
168
- /** Controlled mode: current sizes as percentages */
169
- sizes: zod.z.array(zod.z.number().min(0).max(100)).optional(),
170
- /** Callback when sizes change */
171
- onSizesChange: zod.z.function().optional(),
172
- /** Additional CSS classes */
173
- className: zod.z.string().optional(),
174
- /** Panel children */
175
- children: zod.z.custom()
176
- });
177
- var ResizablePanelPropsSchema = zod.z.object({
178
- /** REQUIRED: Name for screen reader identification */
179
- name: zod.z.string().min(1),
180
- /** Default size as percentage (auto-distributes equally if omitted) */
181
- defaultSize: zod.z.number().min(0).max(100).optional(),
182
- /** Minimum size as percentage */
183
- minSize: zod.z.number().min(0).max(100).optional().default(DEFAULT_MIN_SIZE),
184
- /** Maximum size as percentage */
185
- maxSize: zod.z.number().min(0).max(100).optional().default(DEFAULT_MAX_SIZE),
186
- /** Whether panel can collapse to 0% */
187
- collapsible: zod.z.boolean().optional().default(false),
188
- /** Callback when panel collapses */
189
- onCollapse: zod.z.function().optional(),
190
- /** Callback when panel expands from collapsed */
191
- onExpand: zod.z.function().optional(),
192
- /** Callback when panel resizes */
193
- onResize: zod.z.function().optional(),
194
- /** Additional CSS classes */
195
- className: zod.z.string().optional(),
196
- /** Panel content */
197
- children: zod.z.custom()
198
- });
199
- var ResizableHandlePropsSchema = zod.z.object({
200
- /** Whether to show the visual grip indicator */
201
- withHandle: zod.z.boolean().optional().default(true),
202
- /** Size presets for quick adjustment */
203
- presets: zod.z.array(ResizePresetSchema).optional(),
204
- /** Whether the handle is disabled */
205
- disabled: zod.z.boolean().optional().default(false),
206
- /** Additional CSS classes */
207
- className: zod.z.string().optional()
208
- });
209
- var resizableHandleVariants = classVarianceAuthority.cva(
210
- [
211
- // Base styles - 44px touch target
212
- "relative flex items-center justify-center",
213
- "shrink-0",
214
- "bg-transparent",
215
- "transition-colors duration-150",
216
- // Focus styles
217
- "focus-visible:outline-none focus-visible:ring-2",
218
- "focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2",
219
- // Touch target padding for accessibility
220
- "touch-none select-none"
221
- ],
222
- {
223
- variants: {
224
- direction: {
225
- horizontal: [
226
- "w-3 min-w-[12px]",
227
- "cursor-col-resize",
228
- "hover:bg-[var(--accent)]/50",
229
- // Ensure 44px touch target via padding
230
- "before:absolute before:inset-y-0 before:-inset-x-4",
231
- "before:min-w-[44px]"
232
- ],
233
- vertical: [
234
- "h-3 min-h-[12px]",
235
- "cursor-row-resize",
236
- "hover:bg-[var(--accent)]/50",
237
- // Ensure 44px touch target via padding
238
- "before:absolute before:inset-x-0 before:-inset-y-4",
239
- "before:min-h-[44px]"
240
- ]
241
- },
242
- disabled: {
243
- true: "cursor-not-allowed opacity-50 pointer-events-none",
244
- false: ""
245
- },
246
- isDragging: {
247
- true: "bg-[var(--accent)]",
248
- false: ""
249
- }
250
- },
251
- defaultVariants: {
252
- direction: "horizontal",
253
- disabled: false,
254
- isDragging: false
255
- }
256
- }
257
- );
258
- var resizableGripVariants = classVarianceAuthority.cva(
259
- [
260
- "flex items-center justify-center",
261
- "rounded-full",
262
- "bg-[var(--border)]",
263
- "text-[var(--menu-muted)]"
264
- ],
265
- {
266
- variants: {
267
- direction: {
268
- horizontal: "h-8 w-1",
269
- vertical: "h-1 w-8"
270
- }
271
- },
272
- defaultVariants: {
273
- direction: "horizontal"
274
- }
275
- }
276
- );
277
- var ResizablePanel = react.forwardRef(
278
- function ResizablePanel2({
279
- name,
280
- defaultSize: _defaultSize,
281
- minSize = DEFAULT_MIN_SIZE,
282
- maxSize = DEFAULT_MAX_SIZE,
283
- collapsible = false,
284
- onCollapse,
285
- onExpand,
286
- onResize,
287
- className,
288
- children
289
- }, ref) {
290
- const { sizes, registerPanel, unregisterPanel, containerRef } = useResizableContext();
291
- const internalRef = react.useRef(null);
292
- const [panelIndex, setPanelIndex] = react.useState(-1);
293
- const prevSizeRef = react.useRef(null);
294
- const isRegisteredRef = react.useRef(false);
295
- const registeredIndexRef = react.useRef(-1);
296
- react.useEffect(() => {
297
- const panel = internalRef.current;
298
- const container = containerRef.current;
299
- if (!panel || !container) return;
300
- const allPanels = container.querySelectorAll("[data-resizable-panel]");
301
- let foundIndex = -1;
302
- for (let i = 0; i < allPanels.length; i++) {
303
- if (allPanels[i] === panel) {
304
- foundIndex = i;
305
- break;
306
- }
307
- }
308
- if (foundIndex === -1) return;
309
- if (panelIndex !== foundIndex) {
310
- setPanelIndex(foundIndex);
311
- }
312
- if (!isRegisteredRef.current) {
313
- isRegisteredRef.current = true;
314
- registeredIndexRef.current = foundIndex;
315
- registerPanel(foundIndex, {
316
- name,
317
- minSize,
318
- maxSize,
319
- collapsible
320
- });
321
- }
322
- return () => {
323
- if (isRegisteredRef.current) {
324
- unregisterPanel(registeredIndexRef.current);
325
- isRegisteredRef.current = false;
326
- }
327
- };
328
- }, [containerRef, registerPanel, unregisterPanel, name, minSize, maxSize, collapsible, panelIndex]);
329
- const currentSize = panelIndex >= 0 ? sizes[panelIndex] ?? 50 : 50;
330
- react.useEffect(() => {
331
- if (prevSizeRef.current === null) {
332
- prevSizeRef.current = currentSize;
333
- return;
334
- }
335
- const wasCollapsed = prevSizeRef.current === 0;
336
- const isCollapsed = currentSize === 0;
337
- if (!wasCollapsed && isCollapsed && onCollapse) {
338
- onCollapse();
339
- } else if (wasCollapsed && !isCollapsed && onExpand) {
340
- onExpand();
341
- }
342
- if (onResize && prevSizeRef.current !== currentSize) {
343
- onResize(currentSize);
344
- }
345
- prevSizeRef.current = currentSize;
346
- }, [currentSize, onCollapse, onExpand, onResize]);
347
- return /* @__PURE__ */ jsxRuntime.jsx(
348
- "div",
349
- {
350
- ref: (node) => {
351
- internalRef.current = node;
352
- if (typeof ref === "function") {
353
- ref(node);
354
- } else if (ref) {
355
- ref.current = node;
356
- }
357
- },
358
- role: "region",
359
- "aria-label": name,
360
- "data-resizable-panel": "",
361
- "data-panel-name": name,
362
- "data-panel-index": panelIndex,
363
- "data-collapsed": currentSize === 0,
364
- style: {
365
- flexBasis: `${currentSize}%`,
366
- flexGrow: 0,
367
- flexShrink: 0,
368
- overflow: "hidden"
369
- },
370
- className: cn("relative", className),
371
- children
372
- }
373
- );
374
- }
375
- );
376
- ResizablePanel.displayName = "ResizablePanel";
377
- function clampSize(size, min, max) {
378
- return Math.max(min, Math.min(max, size));
379
- }
380
- function calculateNewSizes(sizes, panels, leftIndex, rightIndex, delta) {
381
- const newSizes = [...sizes];
382
- const leftPanel = panels[leftIndex];
383
- const rightPanel = panels[rightIndex];
384
- if (!leftPanel || !rightPanel) return sizes;
385
- const leftSize = sizes[leftIndex] ?? 50;
386
- const rightSize = sizes[rightIndex] ?? 50;
387
- let newLeftSize = leftSize + delta;
388
- let newRightSize = rightSize - delta;
389
- const leftMin = leftPanel.collapsible ? 0 : leftPanel.minSize;
390
- const leftMax = leftPanel.maxSize;
391
- const rightMin = rightPanel.collapsible ? 0 : rightPanel.minSize;
392
- const rightMax = rightPanel.maxSize;
393
- newLeftSize = clampSize(newLeftSize, leftMin, leftMax);
394
- newRightSize = leftSize + rightSize - newLeftSize;
395
- newRightSize = clampSize(newRightSize, rightMin, rightMax);
396
- newLeftSize = leftSize + rightSize - newRightSize;
397
- newSizes[leftIndex] = newLeftSize;
398
- newSizes[rightIndex] = newRightSize;
399
- return newSizes;
400
- }
401
- function useResizable({
402
- direction,
403
- sizes,
404
- setSizes,
405
- panels,
406
- containerRef,
407
- leftPanelIndex,
408
- rightPanelIndex,
409
- disabled = false,
410
- announce,
411
- groupLabel,
412
- onOpenPopover
413
- }) {
414
- const [isDragging, setIsDragging] = react.useState(false);
415
- const dragStartRef = react.useRef(null);
416
- const longPressTimerRef = react.useRef(null);
417
- const pointerDownTimeRef = react.useRef(0);
418
- const wasLongPressRef = react.useRef(false);
419
- const panelsRef = react.useRef(panels);
420
- const sizesRef = react.useRef(sizes);
421
- const setSizesRef = react.useRef(setSizes);
422
- const handlePointerMoveRef = react.useRef(() => {
423
- });
424
- const handlePointerUpRef = react.useRef(() => {
425
- });
426
- react.useEffect(() => {
427
- panelsRef.current = panels;
428
- sizesRef.current = sizes;
429
- setSizesRef.current = setSizes;
430
- }, [panels, sizes, setSizes]);
431
- const getContainerSize = react.useCallback(() => {
432
- const container = containerRef.current;
433
- if (!container) return 0;
434
- return direction === "horizontal" ? container.offsetWidth : container.offsetHeight;
435
- }, [containerRef, direction]);
436
- const pixelsToPercent = react.useCallback(
437
- (pixels) => {
438
- const containerSize = getContainerSize();
439
- if (containerSize === 0) return 0;
440
- return pixels / containerSize * 100;
441
- },
442
- [getContainerSize]
443
- );
444
- const onPointerMove = react.useCallback((e) => {
445
- handlePointerMoveRef.current(e);
446
- }, []);
447
- const onPointerUp = react.useCallback(() => {
448
- handlePointerUpRef.current();
449
- }, []);
450
- const handlePointerMove = react.useCallback(
451
- (event) => {
452
- if (!dragStartRef.current || disabled) return;
453
- const position = direction === "horizontal" ? event.clientX : event.clientY;
454
- const delta = position - dragStartRef.current.position;
455
- const percentDelta = pixelsToPercent(delta);
456
- const newSizes = calculateNewSizes(
457
- dragStartRef.current.sizes,
458
- panelsRef.current,
459
- leftPanelIndex,
460
- rightPanelIndex,
461
- percentDelta
462
- );
463
- setSizesRef.current(newSizes);
464
- },
465
- [
466
- direction,
467
- disabled,
468
- leftPanelIndex,
469
- pixelsToPercent,
470
- rightPanelIndex
471
- ]
472
- );
473
- const handlePointerUp = react.useCallback(() => {
474
- if (longPressTimerRef.current) {
475
- clearTimeout(longPressTimerRef.current);
476
- longPressTimerRef.current = null;
477
- }
478
- const duration = Date.now() - pointerDownTimeRef.current;
479
- const wasTap = duration < LONG_PRESS_THRESHOLD && !wasLongPressRef.current;
480
- if (wasTap && onOpenPopover && !disabled) {
481
- onOpenPopover();
482
- }
483
- if (isDragging) {
484
- setIsDragging(false);
485
- const leftPanel = panelsRef.current[leftPanelIndex];
486
- const newSize = Math.round(sizesRef.current[leftPanelIndex] ?? 50);
487
- if (announce && leftPanel && groupLabel) {
488
- announce(
489
- `${leftPanel.name} in ${groupLabel} resized to ${newSize} percent`
490
- );
491
- }
492
- }
493
- dragStartRef.current = null;
494
- wasLongPressRef.current = false;
495
- document.removeEventListener("pointermove", onPointerMove);
496
- document.removeEventListener("pointerup", onPointerUp);
497
- document.removeEventListener("pointercancel", onPointerUp);
498
- document.body.style.cursor = "";
499
- document.body.style.userSelect = "";
500
- }, [
501
- announce,
502
- disabled,
503
- groupLabel,
504
- isDragging,
505
- leftPanelIndex,
506
- onOpenPopover,
507
- onPointerMove,
508
- onPointerUp
509
- ]);
510
- react.useEffect(() => {
511
- handlePointerMoveRef.current = handlePointerMove;
512
- handlePointerUpRef.current = handlePointerUp;
513
- });
514
- const handlePointerDown = react.useCallback(
515
- (event) => {
516
- if (disabled) return;
517
- event.preventDefault();
518
- const position = direction === "horizontal" ? event.clientX : event.clientY;
519
- pointerDownTimeRef.current = Date.now();
520
- wasLongPressRef.current = false;
521
- dragStartRef.current = {
522
- position,
523
- sizes: [...sizes],
524
- containerSize: getContainerSize()
525
- };
526
- longPressTimerRef.current = setTimeout(() => {
527
- wasLongPressRef.current = true;
528
- setIsDragging(true);
529
- document.body.style.cursor = direction === "horizontal" ? "col-resize" : "row-resize";
530
- document.body.style.userSelect = "none";
531
- }, LONG_PRESS_THRESHOLD);
532
- document.addEventListener("pointermove", onPointerMove);
533
- document.addEventListener("pointerup", onPointerUp);
534
- document.addEventListener("pointercancel", onPointerUp);
535
- if (event.pointerType === "mouse") {
536
- if (longPressTimerRef.current) {
537
- clearTimeout(longPressTimerRef.current);
538
- longPressTimerRef.current = null;
539
- }
540
- wasLongPressRef.current = true;
541
- setIsDragging(true);
542
- document.body.style.cursor = direction === "horizontal" ? "col-resize" : "row-resize";
543
- document.body.style.userSelect = "none";
544
- }
545
- },
546
- [
547
- direction,
548
- disabled,
549
- getContainerSize,
550
- onPointerMove,
551
- onPointerUp,
552
- sizes
553
- ]
554
- );
555
- const handleKeyDown = react.useCallback(
556
- (event) => {
557
- if (disabled) return;
558
- const step = event.shiftKey ? 10 : 1;
559
- let delta = 0;
560
- switch (event.key) {
561
- case "ArrowLeft":
562
- case "ArrowUp":
563
- delta = -step;
564
- break;
565
- case "ArrowRight":
566
- case "ArrowDown":
567
- delta = step;
568
- break;
569
- case "Home": {
570
- const leftPanel = panels[leftPanelIndex];
571
- if (leftPanel) {
572
- const minSize = leftPanel.collapsible ? 0 : leftPanel.minSize;
573
- delta = minSize - (sizes[leftPanelIndex] ?? 50);
574
- }
575
- break;
576
- }
577
- case "End": {
578
- const leftPanel = panels[leftPanelIndex];
579
- if (leftPanel) {
580
- delta = leftPanel.maxSize - (sizes[leftPanelIndex] ?? 50);
581
- }
582
- break;
583
- }
584
- case "Enter":
585
- case " ":
586
- event.preventDefault();
587
- onOpenPopover?.();
588
- return;
589
- default:
590
- return;
591
- }
592
- if (delta !== 0) {
593
- event.preventDefault();
594
- const newSizes = calculateNewSizes(
595
- sizes,
596
- panels,
597
- leftPanelIndex,
598
- rightPanelIndex,
599
- delta
600
- );
601
- setSizes(newSizes);
602
- const leftPanel = panels[leftPanelIndex];
603
- const newSize = Math.round(newSizes[leftPanelIndex] ?? 50);
604
- if (announce && leftPanel && groupLabel) {
605
- announce(
606
- `${leftPanel.name} in ${groupLabel} resized to ${newSize} percent`
607
- );
608
- }
609
- }
610
- },
611
- [
612
- announce,
613
- disabled,
614
- groupLabel,
615
- leftPanelIndex,
616
- onOpenPopover,
617
- panels,
618
- rightPanelIndex,
619
- setSizes,
620
- sizes
621
- ]
622
- );
623
- react.useEffect(() => {
624
- const moveHandler = onPointerMove;
625
- const upHandler = onPointerUp;
626
- return () => {
627
- if (longPressTimerRef.current) {
628
- clearTimeout(longPressTimerRef.current);
629
- }
630
- document.removeEventListener("pointermove", moveHandler);
631
- document.removeEventListener("pointerup", upHandler);
632
- document.removeEventListener("pointercancel", upHandler);
633
- };
634
- }, [onPointerMove, onPointerUp]);
635
- return {
636
- isDragging,
637
- handlePointerDown,
638
- handleKeyDown
639
- };
640
- }
641
- var PRESSED_STYLES = "data-[pressed]:scale-[0.97]";
642
- var HOVER_STYLES = "data-[hovered]:shadow-md";
643
- var HIGH_CONTRAST_HOVER = "hc:data-[hovered]:outline hc:data-[hovered]:outline-2 hc:data-[hovered]:outline-foreground";
644
- var HIGH_CONTRAST_PRESSED = "hc:data-[pressed]:outline hc:data-[pressed]:outline-2 hc:data-[pressed]:outline-offset-1 hc:data-[pressed]:outline-foreground";
645
- var ButtonGroupContext = react.createContext(null);
646
- ButtonGroupContext.displayName = "ButtonGroupContext";
647
- function useButtonGroupContext() {
648
- return react.useContext(ButtonGroupContext);
649
- }
650
- var ButtonGroupItemContext = react.createContext(null);
651
- ButtonGroupItemContext.displayName = "ButtonGroupItemContext";
652
- function useButtonGroupItemContext() {
653
- return react.useContext(ButtonGroupItemContext);
654
- }
655
- classVarianceAuthority.cva("inline-flex items-center gap-0", {
656
- variants: {
657
- orientation: {
658
- horizontal: "flex-row",
659
- vertical: "flex-col w-full"
660
- }
661
- },
662
- defaultVariants: {
663
- orientation: "horizontal"
664
- }
665
- });
666
- var buttonGroupItemVariants = classVarianceAuthority.cva("", {
667
- variants: {
668
- orientation: {
669
- // min-w-[44px] ensures visual layer fills touch target width (for icon buttons)
670
- horizontal: "min-w-[44px]",
671
- // flex (overrides inline-flex) + min-h-[44px] makes visual layer fill touch target,
672
- // eliminating gaps between stacked buttons in vertical orientation
673
- vertical: "flex min-h-[44px]"
674
- },
675
- position: {
676
- first: "",
677
- middle: "",
678
- last: "",
679
- only: ""
680
- // Single button - no modifications needed
681
- }
682
- },
683
- compoundVariants: [
684
- // ==========================================================================
685
- // Horizontal Orientation
686
- // ==========================================================================
687
- {
688
- orientation: "horizontal",
689
- position: "first",
690
- className: "rounded-r-none border-r-0"
691
- },
692
- {
693
- orientation: "horizontal",
694
- position: "middle",
695
- className: "rounded-none border-r-0"
696
- },
697
- {
698
- orientation: "horizontal",
699
- position: "last",
700
- className: "rounded-l-none"
701
- },
702
- // ==========================================================================
703
- // Vertical Orientation
704
- // Note: w-full is handled by Button's effectiveFullWidth for both layers
705
- // ==========================================================================
706
- {
707
- orientation: "vertical",
708
- position: "first",
709
- className: "rounded-b-none border-b-0"
710
- },
711
- {
712
- orientation: "vertical",
713
- position: "middle",
714
- className: "rounded-none border-b-0"
715
- },
716
- {
717
- orientation: "vertical",
718
- position: "last",
719
- className: "rounded-t-none"
720
- }
721
- ],
722
- defaultVariants: {
723
- orientation: "horizontal",
724
- position: "only"
725
- }
726
- });
727
- classVarianceAuthority.cva("bg-[var(--border)]", {
728
- variants: {
729
- orientation: {
730
- horizontal: "w-px h-6 mx-1",
731
- vertical: "h-px w-full my-1"
732
- }
733
- },
734
- defaultVariants: {
735
- orientation: "horizontal"
736
- }
737
- });
738
- var buttonOuterVariants = classVarianceAuthority.cva(
739
- "inline-flex justify-center min-h-[44px] min-w-[44px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
740
- {
741
- variants: {
742
- fullWidth: {
743
- true: "w-full",
744
- false: ""
745
- },
746
- inVerticalGroup: {
747
- true: "items-stretch",
748
- false: "items-center"
749
- }
750
- },
751
- defaultVariants: {
752
- fullWidth: false,
753
- inVerticalGroup: false
754
- }
755
- }
756
- );
757
- var buttonVisualVariants = classVarianceAuthority.cva(
758
- "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 relative cursor-pointer",
759
- {
760
- variants: {
761
- variant: {
762
- default: "bg-[var(--primary-action)] text-[var(--primary-action-foreground)] shadow-md hover:bg-[var(--primary-action-hover)] data-[pressed]:bg-[var(--primary-action)]/80",
763
- destructive: "bg-[var(--destructive-background)] text-[var(--destructive-foreground)] shadow-md hover:bg-[var(--destructive-background)]/90 data-[pressed]:bg-[var(--destructive-background)]/80",
764
- outline: "border border-[var(--input-border)] bg-[var(--page-background)] hover:bg-[var(--input-border)] data-[pressed]:bg-[var(--input-border)]",
765
- secondary: "bg-[var(--secondary)] text-[var(--secondary-foreground)] shadow-md hover:bg-[var(--secondary)]/80 data-[pressed]:bg-[var(--secondary)]/70",
766
- ghost: "hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)] data-[pressed]:bg-[var(--accent)]",
767
- link: "text-[var(--text-link)] underline-offset-4 hover:underline data-[pressed]:text-[var(--text-link-hover)]"
768
- },
769
- fullWidth: {
770
- true: "w-full",
771
- false: ""
772
- },
773
- visualSize: {
774
- default: "h-10 px-4 py-2",
775
- sm: "h-9 rounded-md px-3 text-xs",
776
- lg: "h-11 rounded-md px-8",
777
- icon: "h-10 w-10",
778
- dot: "h-5 w-5 rounded-full p-0 min-h-0 min-w-0"
779
- },
780
- paywall: {
781
- true: "!bg-[var(--paywall)] !text-[var(--paywall-foreground)] !shadow-md hover:!bg-[var(--paywall)]/90 !cursor-not-allowed !border-transparent",
782
- false: ""
783
- }
784
- },
785
- defaultVariants: {
786
- variant: "default",
787
- visualSize: "default",
788
- paywall: false
789
- }
790
- }
791
- );
792
- var Button = react.memo(react.forwardRef(
793
- ({
794
- className,
795
- buttonVisualClassName,
796
- variant,
797
- size,
798
- visualSize,
799
- fullWidth,
800
- loading = false,
801
- loadingText = "Loading...",
802
- shortcut,
803
- children,
804
- isDisabled,
805
- paywall = false,
806
- paywallRedirect,
807
- paywallDescription,
808
- onPress,
809
- ...props
810
- }, ref) => {
811
- const paywallDescriptionId = react.useId();
812
- const groupContext = useButtonGroupContext();
813
- const itemContext = useButtonGroupItemContext();
814
- const effectiveVariant = variant ?? groupContext?.variant ?? "default";
815
- const effectiveSize = size ?? groupContext?.size;
816
- const effectiveIsDisabled = isDisabled ?? groupContext?.isDisabled ?? false;
817
- const isInVerticalGroup = groupContext?.orientation === "vertical";
818
- const effectiveFullWidth = fullWidth || isInVerticalGroup;
819
- const positionClassName = itemContext ? buttonGroupItemVariants({
820
- orientation: groupContext?.orientation ?? "horizontal",
821
- position: itemContext.position
822
- }) : "";
823
- const effectiveVisualSize = visualSize ?? effectiveSize ?? "default";
824
- if (process.env.NODE_ENV !== "production") {
825
- if ((effectiveVisualSize === "dot" || effectiveVisualSize === "icon") && !props["aria-label"] && !children) {
826
- console.warn(
827
- '[Button] visualSize="dot" or "icon" requires aria-label when no visible text is provided (WCAG 1.1.1)'
828
- );
829
- }
830
- }
831
- const handlePress = (e) => {
832
- if (paywall) {
833
- if (paywallRedirect) {
834
- window.open(paywallRedirect, "_blank", "noopener,noreferrer");
835
- }
836
- return;
837
- }
838
- onPress?.(e);
839
- };
840
- const computedIsDisabled = effectiveIsDisabled || loading || void 0;
841
- return /* @__PURE__ */ jsxRuntime.jsx(
842
- reactAriaComponents.Button,
843
- {
844
- ref,
845
- isDisabled: computedIsDisabled,
846
- "aria-disabled": paywall ? true : void 0,
847
- "aria-describedby": paywall ? paywallDescriptionId : void 0,
848
- onPress: handlePress,
849
- className: cn(buttonOuterVariants({ fullWidth: effectiveFullWidth, inVerticalGroup: isInVerticalGroup }), className),
850
- ...props,
851
- children: (renderProps) => (
852
- /* Layer 2: Visual Button */
853
- /* @__PURE__ */ jsxRuntime.jsxs(
854
- "span",
855
- {
856
- className: cn(
857
- buttonVisualVariants({
858
- variant: effectiveVariant,
859
- visualSize: effectiveVisualSize,
860
- paywall,
861
- fullWidth: effectiveFullWidth
862
- }),
863
- // Position styling from ButtonGroup context (border-radius adjustments)
864
- positionClassName,
865
- buttonVisualClassName,
866
- // Layer 2 interaction styles (no focus - focus ring is on Layer 1)
867
- PRESSED_STYLES,
868
- HOVER_STYLES,
869
- HIGH_CONTRAST_HOVER,
870
- HIGH_CONTRAST_PRESSED
871
- ),
872
- "data-pressed": renderProps.isPressed || void 0,
873
- children: [
874
- loading && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
875
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "motion-safe:animate-spin", "aria-hidden": "true" }),
876
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", "aria-live": "polite", children: loadingText })
877
- ] }),
878
- !loading && children,
879
- paywall && /* @__PURE__ */ jsxRuntime.jsx(
880
- lucideReact.Zap,
881
- {
882
- "data-testid": "zap-icon",
883
- "aria-hidden": "true",
884
- className: "ml-1"
885
- }
886
- ),
887
- paywall && /* @__PURE__ */ jsxRuntime.jsxs("span", { id: paywallDescriptionId, className: "sr-only", children: [
888
- "Premium feature: ",
889
- paywallDescription || "Upgrade required to access this feature"
890
- ] }),
891
- renderProps.isFocusVisible && shortcut && /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "ml-auto hidden text-xs opacity-60 lg:inline", children: shortcut }),
892
- renderProps.isPressed && /* @__PURE__ */ jsxRuntime.jsx(
893
- "span",
894
- {
895
- className: "absolute inset-0 rounded-[inherit] bg-current opacity-10 motion-safe:animate-in motion-safe:zoom-in-95",
896
- "aria-hidden": "true"
897
- }
898
- )
899
- ]
900
- }
901
- )
902
- )
903
- }
904
- );
905
- }
906
- ));
907
- Button.displayName = "Button";
908
- var DEFAULT_MAX_VALUE = 4294967295;
909
- var DEFAULT_MIN_VALUE = 0;
910
- var NEGATIVE_MIN_VALUE = -2147483647;
911
- zod.z.object({
912
- // Value props
913
- /** Current value (controlled mode) */
914
- value: zod.z.number().nullable().optional(),
915
- /** Default value (uncontrolled mode) */
916
- defaultValue: zod.z.number().optional(),
917
- // Constraint props
918
- /** Minimum allowed value (default: 0) */
919
- minValue: zod.z.number().optional(),
920
- /** Maximum allowed value (default: 4294967295 / UINT32_MAX) */
921
- maxValue: zod.z.number().optional(),
922
- /** Allow negative numbers (sets minValue to -2147483647 if not explicitly set) */
923
- allowNegative: zod.z.boolean().optional(),
924
- /** Step increment for stepper buttons and arrow keys (default: 1) */
925
- step: zod.z.number().positive().optional(),
926
- // Formatting props
927
- /** Intl.NumberFormat options for locale-aware formatting */
928
- formatOptions: zod.z.custom().optional(),
929
- // State props
930
- /** Whether the field is disabled */
931
- isDisabled: zod.z.boolean().optional(),
932
- /** Whether the field is read-only */
933
- isReadOnly: zod.z.boolean().optional(),
934
- /** Whether the field is required */
935
- isRequired: zod.z.boolean().optional(),
936
- /** Whether the field is in an invalid state */
937
- isInvalid: zod.z.boolean().optional(),
938
- /** Whether scroll wheel adjustment is disabled */
939
- isWheelDisabled: zod.z.boolean().optional(),
940
- // Validation props
941
- /** Custom validation function that returns an error message or null */
942
- validate: zod.z.function().optional(),
943
- /** Validation behavior: 'native' for HTML5 validation, 'aria' for ARIA-only */
944
- validationBehavior: zod.z.enum(["native", "aria"]).default("native"),
945
- // Display props
946
- /** Field label (required for accessibility) */
947
- label: zod.z.string(),
948
- /** Description text below the field */
949
- description: zod.z.string().optional(),
950
- /** Error message string or render function */
951
- errorMessage: zod.z.union([zod.z.string(), zod.z.function()]).optional(),
952
- // Stepper props
953
- /** Layout for stepper buttons */
954
- stepperLayout: zod.z.enum(["sides", "stacked", "hidden"]).default("sides"),
955
- /** Custom aria-label for increment button */
956
- incrementAriaLabel: zod.z.string().optional(),
957
- /** Custom aria-label for decrement button */
958
- decrementAriaLabel: zod.z.string().optional(),
959
- // Form props
960
- /** Name attribute for form submission */
961
- name: zod.z.string().optional(),
962
- // Variant props
963
- /** Size variant */
964
- size: zod.z.enum(["sm", "default", "lg"]).default("default"),
965
- // Event props
966
- /** Called when the numeric value changes */
967
- onChange: zod.z.function().optional(),
968
- /** Called when the field gains focus */
969
- onFocus: zod.z.function().optional(),
970
- /** Called when the field loses focus */
971
- onBlur: zod.z.function().optional(),
972
- /** Called when focus state changes */
973
- onFocusChange: zod.z.function().optional(),
974
- // Standard props
975
- /** Additional CSS classes */
976
- className: zod.z.string().optional(),
977
- /** Whether to auto-focus on mount */
978
- autoFocus: zod.z.boolean().optional()
979
- });
980
- var numberFieldVariants = classVarianceAuthority.cva(
981
- [
982
- // Base styles
983
- "inline-flex items-center rounded-md border",
984
- "bg-[var(--content-background)] text-[var(--content-foreground)]",
985
- "transition-colors duration-200",
986
- // Focus within
987
- "focus-within:ring-2 focus-within:ring-[var(--ring)] focus-within:ring-offset-2",
988
- // Disabled
989
- "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
990
- ],
991
- {
992
- variants: {
993
- size: {
994
- sm: "h-9 text-sm",
995
- default: "h-10 text-base",
996
- lg: "h-12 text-lg"
997
- },
998
- isInvalid: {
999
- true: "border-[var(--destructive)] focus-within:ring-[var(--destructive)]",
1000
- false: "border-[var(--input)] hover:border-[var(--input)]/80"
1001
- }
1002
- },
1003
- defaultVariants: {
1004
- size: "default",
1005
- isInvalid: false
1006
- }
1007
- }
1008
- );
1009
- var numberFieldInputVariants = classVarianceAuthority.cva(
1010
- [
1011
- // Base styles
1012
- "flex-1 bg-transparent text-center tabular-nums",
1013
- "min-w-0",
1014
- // Allow shrinking
1015
- // Focus
1016
- "focus:outline-none",
1017
- // Hide native spinners
1018
- "[appearance:textfield]",
1019
- "[&::-webkit-outer-spin-button]:appearance-none",
1020
- "[&::-webkit-inner-spin-button]:appearance-none"
1021
- ],
1022
- {
1023
- variants: {
1024
- size: {
1025
- sm: "px-2 text-sm",
1026
- default: "px-3 text-base",
1027
- lg: "px-4 text-lg"
1028
- }
1029
- },
1030
- defaultVariants: {
1031
- size: "default"
1032
- }
1033
- }
1034
- );
1035
- var numberFieldStepperVariants = classVarianceAuthority.cva(
1036
- [
1037
- // Base styles
1038
- "flex items-center justify-center",
1039
- "transition-colors duration-150",
1040
- "select-none",
1041
- // Hover
1042
- "hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)]",
1043
- // Focus
1044
- "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]",
1045
- "focus-visible:ring-inset",
1046
- // Active (pressed)
1047
- "active:bg-[var(--accent)]/80",
1048
- // Disabled
1049
- "disabled:pointer-events-none disabled:opacity-50"
1050
- ],
1051
- {
1052
- variants: {
1053
- size: {
1054
- sm: "min-w-8 min-h-8 text-sm",
1055
- default: "min-w-10 min-h-10 text-base",
1056
- lg: "min-w-12 min-h-12 text-lg"
1057
- },
1058
- position: {
1059
- left: "rounded-l-md border-r border-[var(--input)]",
1060
- right: "rounded-r-md border-l border-[var(--input)]",
1061
- top: "rounded-tr-md border-b border-l border-[var(--input)] h-1/2",
1062
- bottom: "rounded-br-md border-l border-[var(--input)] h-1/2"
1063
- }
1064
- },
1065
- defaultVariants: {
1066
- size: "default"
1067
- }
1068
- }
1069
- );
1070
- var numberFieldLabelVariants = classVarianceAuthority.cva(
1071
- [
1072
- "block font-medium text-[var(--content-foreground)]",
1073
- "mb-1.5",
1074
- // Required indicator
1075
- 'data-[required]:after:content-["*"] data-[required]:after:ml-0.5',
1076
- "data-[required]:after:text-[var(--destructive)]"
1077
- ],
1078
- {
1079
- variants: {
1080
- size: {
1081
- sm: "text-sm",
1082
- default: "text-sm",
1083
- lg: "text-base"
1084
- }
1085
- },
1086
- defaultVariants: {
1087
- size: "default"
1088
- }
1089
- }
1090
- );
1091
- var numberFieldDescriptionVariants = classVarianceAuthority.cva(
1092
- [
1093
- "text-[var(--menu-muted)]",
1094
- "mt-1"
1095
- ],
1096
- {
1097
- variants: {
1098
- size: {
1099
- sm: "text-xs",
1100
- default: "text-sm",
1101
- lg: "text-base"
1102
- }
1103
- },
1104
- defaultVariants: {
1105
- size: "default"
1106
- }
1107
- }
1108
- );
1109
- var numberFieldErrorVariants = classVarianceAuthority.cva(
1110
- [
1111
- "flex items-center gap-1",
1112
- "text-[var(--destructive)]",
1113
- "mt-1"
1114
- ],
1115
- {
1116
- variants: {
1117
- size: {
1118
- sm: "text-xs",
1119
- default: "text-sm",
1120
- lg: "text-base"
1121
- }
1122
- },
1123
- defaultVariants: {
1124
- size: "default"
1125
- }
1126
- }
1127
- );
1128
- var NumberField = react.forwardRef(
1129
- ({
1130
- // Display props
1131
- label,
1132
- description,
1133
- errorMessage,
1134
- // Variant props
1135
- size = "default",
1136
- stepperLayout = "sides",
1137
- // Custom props
1138
- allowNegative = false,
1139
- incrementAriaLabel,
1140
- decrementAriaLabel,
1141
- // Constraint props (apply defaults)
1142
- minValue,
1143
- maxValue,
1144
- // Standard props
1145
- className,
1146
- isInvalid,
1147
- isRequired,
1148
- isDisabled,
1149
- isReadOnly,
1150
- // All other props go to AriaNumberField
1151
- ...props
1152
- }, ref) => {
1153
- const effectiveMinValue = minValue ?? (allowNegative ? NEGATIVE_MIN_VALUE : DEFAULT_MIN_VALUE);
1154
- const effectiveMaxValue = maxValue ?? DEFAULT_MAX_VALUE;
1155
- const showSteppers = stepperLayout !== "hidden" && !isReadOnly;
1156
- const isStackedLayout = stepperLayout === "stacked";
1157
- return /* @__PURE__ */ jsxRuntime.jsxs(
1158
- reactAriaComponents.NumberField,
1159
- {
1160
- ref,
1161
- className: cn("group flex flex-col", className),
1162
- minValue: effectiveMinValue,
1163
- maxValue: effectiveMaxValue,
1164
- isInvalid,
1165
- isRequired,
1166
- isDisabled,
1167
- isReadOnly,
1168
- ...props,
1169
- children: [
1170
- /* @__PURE__ */ jsxRuntime.jsx(
1171
- reactAriaComponents.Label,
1172
- {
1173
- className: cn(numberFieldLabelVariants({ size })),
1174
- "data-required": isRequired || void 0,
1175
- children: label
1176
- }
1177
- ),
1178
- /* @__PURE__ */ jsxRuntime.jsxs(
1179
- reactAriaComponents.Group,
1180
- {
1181
- className: cn(
1182
- numberFieldVariants({
1183
- size,
1184
- isInvalid: isInvalid ?? false
1185
- }),
1186
- isStackedLayout && "pr-0"
1187
- ),
1188
- children: [
1189
- showSteppers && !isStackedLayout && /* @__PURE__ */ jsxRuntime.jsx(
1190
- Button,
1191
- {
1192
- slot: "decrement",
1193
- variant: "ghost",
1194
- className: "!min-h-0 !min-w-0",
1195
- buttonVisualClassName: cn(
1196
- numberFieldStepperVariants({
1197
- size,
1198
- position: "left"
1199
- })
1200
- ),
1201
- "aria-label": decrementAriaLabel ?? "Decrease value",
1202
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "h-4 w-4", "aria-hidden": "true" })
1203
- }
1204
- ),
1205
- /* @__PURE__ */ jsxRuntime.jsx(
1206
- reactAriaComponents.Input,
1207
- {
1208
- className: cn(numberFieldInputVariants({ size }))
1209
- }
1210
- ),
1211
- showSteppers && isStackedLayout && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full", children: [
1212
- /* @__PURE__ */ jsxRuntime.jsx(
1213
- Button,
1214
- {
1215
- slot: "increment",
1216
- variant: "ghost",
1217
- className: "!min-h-0 !min-w-0",
1218
- buttonVisualClassName: cn(
1219
- numberFieldStepperVariants({
1220
- size,
1221
- position: "top"
1222
- })
1223
- ),
1224
- "aria-label": incrementAriaLabel ?? "Increase value",
1225
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3 w-3", "aria-hidden": "true" })
1226
- }
1227
- ),
1228
- /* @__PURE__ */ jsxRuntime.jsx(
1229
- Button,
1230
- {
1231
- slot: "decrement",
1232
- variant: "ghost",
1233
- className: "!min-h-0 !min-w-0",
1234
- buttonVisualClassName: cn(
1235
- numberFieldStepperVariants({
1236
- size,
1237
- position: "bottom"
1238
- })
1239
- ),
1240
- "aria-label": decrementAriaLabel ?? "Decrease value",
1241
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "h-3 w-3", "aria-hidden": "true" })
1242
- }
1243
- )
1244
- ] }),
1245
- showSteppers && !isStackedLayout && /* @__PURE__ */ jsxRuntime.jsx(
1246
- Button,
1247
- {
1248
- slot: "increment",
1249
- variant: "ghost",
1250
- className: "!min-h-0 !min-w-0",
1251
- buttonVisualClassName: cn(
1252
- numberFieldStepperVariants({
1253
- size,
1254
- position: "right"
1255
- })
1256
- ),
1257
- "aria-label": incrementAriaLabel ?? "Increase value",
1258
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4", "aria-hidden": "true" })
1259
- }
1260
- )
1261
- ]
1262
- }
1263
- ),
1264
- description && /* @__PURE__ */ jsxRuntime.jsx(
1265
- reactAriaComponents.Text,
1266
- {
1267
- slot: "description",
1268
- className: cn(numberFieldDescriptionVariants({ size })),
1269
- children: description
1270
- }
1271
- ),
1272
- /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.FieldError, { className: cn(numberFieldErrorVariants({ size })), children: errorMessage })
1273
- ]
1274
- }
1275
- );
1276
- }
1277
- );
1278
- NumberField.displayName = "NumberField";
1279
- var ResizablePopover = react.forwardRef(
1280
- function ResizablePopover2({
1281
- isOpen,
1282
- onOpenChange,
1283
- groupLabel,
1284
- leftPanel,
1285
- rightPanel,
1286
- leftSize,
1287
- rightSize,
1288
- onSizesChange,
1289
- presets,
1290
- triggerRef,
1291
- direction
1292
- }, _ref) {
1293
- const [originalSizes, setOriginalSizes] = react.useState({ left: leftSize, right: rightSize });
1294
- const wasOpenRef = react.useRef(false);
1295
- react.useEffect(() => {
1296
- if (isOpen && !wasOpenRef.current) {
1297
- setOriginalSizes({ left: leftSize, right: rightSize });
1298
- }
1299
- wasOpenRef.current = isOpen;
1300
- }, [isOpen, leftSize, rightSize]);
1301
- const handleLeftChange = react.useCallback(
1302
- (value) => {
1303
- if (value === null) return;
1304
- const newLeft = Math.max(
1305
- leftPanel.collapsible ? 0 : leftPanel.minSize,
1306
- Math.min(leftPanel.maxSize, value)
1307
- );
1308
- const newRight = 100 - newLeft;
1309
- const rightMin = rightPanel.collapsible ? 0 : rightPanel.minSize;
1310
- const rightMax = rightPanel.maxSize;
1311
- if (newRight < rightMin || newRight > rightMax) {
1312
- return;
1313
- }
1314
- onSizesChange(newLeft, newRight);
1315
- },
1316
- [leftPanel, rightPanel, onSizesChange]
1317
- );
1318
- const handleRightChange = react.useCallback(
1319
- (value) => {
1320
- if (value === null) return;
1321
- const newRight = Math.max(
1322
- rightPanel.collapsible ? 0 : rightPanel.minSize,
1323
- Math.min(rightPanel.maxSize, value)
1324
- );
1325
- const newLeft = 100 - newRight;
1326
- const leftMin = leftPanel.collapsible ? 0 : leftPanel.minSize;
1327
- const leftMax = leftPanel.maxSize;
1328
- if (newLeft < leftMin || newLeft > leftMax) {
1329
- return;
1330
- }
1331
- onSizesChange(newLeft, newRight);
1332
- },
1333
- [leftPanel, rightPanel, onSizesChange]
1334
- );
1335
- const handlePreset = react.useCallback(
1336
- (preset) => {
1337
- const leftSize2 = preset.sizes[0];
1338
- const rightSize2 = preset.sizes[1];
1339
- if (leftSize2 !== void 0 && rightSize2 !== void 0) {
1340
- onSizesChange(leftSize2, rightSize2);
1341
- }
1342
- },
1343
- [onSizesChange]
1344
- );
1345
- const handleCancel = react.useCallback(() => {
1346
- onSizesChange(originalSizes.left, originalSizes.right);
1347
- onOpenChange(false);
1348
- }, [onSizesChange, onOpenChange, originalSizes]);
1349
- const handleClose = react.useCallback(() => {
1350
- onOpenChange(false);
1351
- }, [onOpenChange]);
1352
- if (!isOpen) return null;
1353
- const placement = direction === "horizontal" ? "bottom" : "right";
1354
- return /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.DialogTrigger, { isOpen, onOpenChange, children: [
1355
- /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Button, { className: "sr-only", children: "Open resize controls" }),
1356
- /* @__PURE__ */ jsxRuntime.jsx(
1357
- reactAriaComponents.Popover,
1358
- {
1359
- triggerRef,
1360
- placement,
1361
- offset: 8,
1362
- className: cn(
1363
- "w-72",
1364
- "rounded-lg border border-[var(--border)]",
1365
- "bg-[var(--popover)] text-[var(--popover-foreground)]",
1366
- "shadow-lg",
1367
- "outline-none",
1368
- "animate-in fade-in-0 zoom-in-95",
1369
- "data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95"
1370
- ),
1371
- children: /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.Dialog, { className: "outline-none", children: [
1372
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b border-[var(--border)] px-4 py-3", children: [
1373
- /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-sm font-medium", children: [
1374
- "Resize: ",
1375
- groupLabel
1376
- ] }),
1377
- /* @__PURE__ */ jsxRuntime.jsx(
1378
- reactAriaComponents.Button,
1379
- {
1380
- onPress: handleClose,
1381
- className: cn(
1382
- "inline-flex items-center justify-center rounded-md",
1383
- "min-h-[44px] min-w-[44px]",
1384
- "text-[var(--menu-muted)]",
1385
- "hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)]",
1386
- "focus-visible:outline-none focus-visible:ring-2",
1387
- "focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2"
1388
- ),
1389
- "aria-label": "Close",
1390
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
1391
- }
1392
- )
1393
- ] }),
1394
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 px-4 py-4", children: [
1395
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
1396
- NumberField,
1397
- {
1398
- label: `${leftPanel.name} (%)`,
1399
- value: Math.round(leftSize),
1400
- onChange: handleLeftChange,
1401
- minValue: leftPanel.collapsible ? 0 : leftPanel.minSize,
1402
- maxValue: leftPanel.maxSize,
1403
- step: 1,
1404
- stepperLayout: "sides"
1405
- }
1406
- ) }),
1407
- /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
1408
- NumberField,
1409
- {
1410
- label: `${rightPanel.name} (%)`,
1411
- value: Math.round(rightSize),
1412
- onChange: handleRightChange,
1413
- minValue: rightPanel.collapsible ? 0 : rightPanel.minSize,
1414
- maxValue: rightPanel.maxSize,
1415
- step: 1,
1416
- stepperLayout: "sides"
1417
- }
1418
- ) }),
1419
- presets && presets.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-[var(--border)] pt-4", children: [
1420
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-xs font-medium text-[var(--menu-muted)]", children: "Presets" }),
1421
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: presets.map((preset, index) => /* @__PURE__ */ jsxRuntime.jsx(
1422
- Button,
1423
- {
1424
- variant: "outline",
1425
- size: "sm",
1426
- onPress: () => handlePreset(preset),
1427
- children: preset.label
1428
- },
1429
- index
1430
- )) })
1431
- ] })
1432
- ] }),
1433
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end border-t border-[var(--border)] px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", onPress: handleCancel, children: "Cancel" }) })
1434
- ] })
1435
- }
1436
- )
1437
- ] });
1438
- }
1439
- );
1440
- ResizablePopover.displayName = "ResizablePopover";
1441
- var ResizableHandle = react.forwardRef(
1442
- function ResizableHandle2({ withHandle = true, presets, disabled = false, className }, ref) {
1443
- const {
1444
- direction,
1445
- groupLabel,
1446
- sizes,
1447
- setSizes,
1448
- panels,
1449
- announce,
1450
- containerRef
1451
- } = useResizableContext();
1452
- const internalRef = react.useRef(null);
1453
- const handleRef = ref || internalRef;
1454
- const [handleIndex, setHandleIndex] = react.useState(0);
1455
- react.useEffect(() => {
1456
- const handle = handleRef.current;
1457
- const container = containerRef.current;
1458
- if (!handle || !container) return;
1459
- const handles = container.querySelectorAll('[role="slider"]');
1460
- let index = 0;
1461
- handles.forEach((h, i) => {
1462
- if (h === handle) {
1463
- index = i;
1464
- }
1465
- });
1466
- setHandleIndex(index);
1467
- }, [containerRef, handleRef]);
1468
- const leftPanelIndex = handleIndex;
1469
- const rightPanelIndex = handleIndex + 1;
1470
- const leftPanel = panels[leftPanelIndex];
1471
- const rightPanel = panels[rightPanelIndex];
1472
- const leftSize = sizes[leftPanelIndex] ?? 50;
1473
- const rightSize = sizes[rightPanelIndex] ?? 50;
1474
- const [isPopoverOpen, setIsPopoverOpen] = react.useState(false);
1475
- const handlePopoverSizesChange = react.useCallback(
1476
- (newLeftSize, newRightSize) => {
1477
- const newSizes = [...sizes];
1478
- newSizes[leftPanelIndex] = newLeftSize;
1479
- newSizes[rightPanelIndex] = newRightSize;
1480
- setSizes(newSizes);
1481
- },
1482
- [sizes, setSizes, leftPanelIndex, rightPanelIndex]
1483
- );
1484
- const { isDragging, handlePointerDown, handleKeyDown } = useResizable({
1485
- direction,
1486
- sizes,
1487
- setSizes,
1488
- panels,
1489
- containerRef,
1490
- leftPanelIndex,
1491
- rightPanelIndex,
1492
- disabled,
1493
- announce,
1494
- groupLabel,
1495
- onOpenPopover: () => setIsPopoverOpen(true)
1496
- });
1497
- const ariaLabel = leftPanel && rightPanel ? `Resize handle between ${leftPanel.name} and ${rightPanel.name} in ${groupLabel}` : `Resize handle in ${groupLabel}`;
1498
- const GripIcon = direction === "horizontal" ? lucideReact.GripVertical : lucideReact.GripHorizontal;
1499
- const leftPanelInfo = leftPanel ?? {
1500
- name: "Panel 1",
1501
- minSize: DEFAULT_MIN_SIZE,
1502
- maxSize: DEFAULT_MAX_SIZE,
1503
- collapsible: false
1504
- };
1505
- const rightPanelInfo = rightPanel ?? {
1506
- name: "Panel 2",
1507
- minSize: DEFAULT_MIN_SIZE,
1508
- maxSize: DEFAULT_MAX_SIZE,
1509
- collapsible: false
1510
- };
1511
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1512
- /* @__PURE__ */ jsxRuntime.jsx(
1513
- "div",
1514
- {
1515
- ref: handleRef,
1516
- role: "slider",
1517
- tabIndex: disabled ? -1 : 0,
1518
- "aria-label": ariaLabel,
1519
- "aria-valuenow": Math.round(leftSize),
1520
- "aria-valuemin": leftPanel?.collapsible ? 0 : leftPanel?.minSize ?? 0,
1521
- "aria-valuemax": leftPanel?.maxSize ?? 100,
1522
- "aria-orientation": direction,
1523
- "aria-disabled": disabled,
1524
- "data-direction": direction,
1525
- "data-dragging": isDragging,
1526
- "data-disabled": disabled,
1527
- onPointerDown: handlePointerDown,
1528
- onKeyDown: handleKeyDown,
1529
- className: cn(
1530
- resizableHandleVariants({
1531
- direction,
1532
- disabled,
1533
- isDragging
1534
- }),
1535
- className
1536
- ),
1537
- children: withHandle && /* @__PURE__ */ jsxRuntime.jsx(
1538
- "div",
1539
- {
1540
- className: cn(resizableGripVariants({ direction })),
1541
- "aria-hidden": "true",
1542
- children: /* @__PURE__ */ jsxRuntime.jsx(GripIcon, { className: "h-4 w-4" })
1543
- }
1544
- )
1545
- }
1546
- ),
1547
- /* @__PURE__ */ jsxRuntime.jsx(
1548
- ResizablePopover,
1549
- {
1550
- isOpen: isPopoverOpen,
1551
- onOpenChange: setIsPopoverOpen,
1552
- groupLabel,
1553
- leftPanel: leftPanelInfo,
1554
- rightPanel: rightPanelInfo,
1555
- leftSize,
1556
- rightSize,
1557
- onSizesChange: handlePopoverSizesChange,
1558
- presets,
1559
- triggerRef: handleRef,
1560
- direction
1561
- }
1562
- )
1563
- ] });
1564
- }
1565
- );
1566
- ResizableHandle.displayName = "ResizableHandle";
1567
-
1568
- exports.DEFAULT_MAX_SIZE = DEFAULT_MAX_SIZE;
1569
- exports.DEFAULT_MIN_SIZE = DEFAULT_MIN_SIZE;
1570
- exports.LONG_PRESS_THRESHOLD = LONG_PRESS_THRESHOLD;
1571
- exports.ResizableHandle = ResizableHandle;
1572
- exports.ResizableHandlePropsSchema = ResizableHandlePropsSchema;
1573
- exports.ResizablePanel = ResizablePanel;
1574
- exports.ResizablePanelGroup = ResizablePanelGroup;
1575
- exports.ResizablePanelGroupPropsSchema = ResizablePanelGroupPropsSchema;
1576
- exports.ResizablePanelPropsSchema = ResizablePanelPropsSchema;
1577
- exports.ResizePresetSchema = ResizePresetSchema;
1578
- exports.resizableGripVariants = resizableGripVariants;
1579
- exports.resizableHandleVariants = resizableHandleVariants;
1580
- exports.useResizableContext = useResizableContext;
1581
- //# sourceMappingURL=index.js.map
2
+ 'use strict';var react=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime'),zod=require('zod'),classVarianceAuthority=require('class-variance-authority'),lucideReact=require('lucide-react'),reactAriaComponents=require('react-aria-components');function N(...p){return tailwindMerge.twMerge(clsx.clsx(p))}var ee=react.createContext(null);ee.displayName="ResizableContext";function W(){let p=react.useContext(ee);if(!p)throw new Error("useResizableContext must be used within a ResizablePanelGroup. Make sure ResizablePanel and ResizableHandle are children of ResizablePanelGroup.");return p}function Se({direction:p,groupLabel:o,sizes:f,onSizesChange:n}){let[l,e]=react.useState([]),[a,i]=react.useState([]),t=react.useRef(null),s=react.useRef(null),v=react.useRef(null),c=react.useRef(false),P=f!==void 0,R=P?f:l,h=react.useCallback(b=>{P?n?.(b):e(b);},[P,n]),E=react.useCallback((b,r)=>{i(g=>{let w=[...g];return w[b]=r,w});},[]),L=react.useCallback(b=>{i(r=>{let g=[...r];return delete g[b],g.filter(Boolean)});},[]);react.useEffect(()=>{if(P||c.current)return;let r=a.filter(Boolean).length;if(r<2)return;if(R.length<r||R.some(w=>w===void 0)){let w=[],d=100/r;for(let u=0;u<r;u++)w[u]=d;c.current=true,e(w);}},[a,R,P]),react.useEffect(()=>()=>{v.current&&clearTimeout(v.current),s.current&&(document.body.removeChild(s.current),s.current=null);},[]);let y=react.useCallback(b=>{if(!s.current){let r=document.createElement("div");r.setAttribute("aria-live","polite"),r.setAttribute("aria-atomic","true"),r.className="sr-only",r.style.cssText="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;",document.body.appendChild(r),s.current=r;}s.current.textContent=b,v.current&&clearTimeout(v.current),v.current=setTimeout(()=>{s.current&&(s.current.textContent="");},1e3);},[]);return {direction:p,groupLabel:o,sizes:R,setSizes:h,panels:a,registerPanel:E,unregisterPanel:L,announce:y,containerRef:t}}var ye=react.forwardRef(function({direction:o,groupLabel:f,sizes:n,onSizesChange:l,className:e,children:a},i){let t=Se({direction:o,groupLabel:f,sizes:n,onSizesChange:l});return react.useImperativeHandle(i,()=>t.containerRef.current,[t.containerRef]),jsxRuntime.jsx(ee.Provider,{value:t,children:jsxRuntime.jsx("div",{ref:t.containerRef,role:"group","aria-label":`${f}, ${o}`,"data-direction":o,className:N("flex h-full w-full",o==="horizontal"?"flex-row":"flex-col",e),children:a})})});ye.displayName="ResizablePanelGroup";var U=10,$=90,te=300,Ee=zod.z.object({label:zod.z.string().min(1),sizes:zod.z.array(zod.z.number().min(0).max(100))}),lt=zod.z.object({direction:zod.z.enum(["horizontal","vertical"]),groupLabel:zod.z.string().min(1),sizes:zod.z.array(zod.z.number().min(0).max(100)).optional(),onSizesChange:zod.z.function().optional(),className:zod.z.string().optional(),children:zod.z.custom()}),ut=zod.z.object({name:zod.z.string().min(1),defaultSize:zod.z.number().min(0).max(100).optional(),minSize:zod.z.number().min(0).max(100).optional().default(U),maxSize:zod.z.number().min(0).max(100).optional().default($),collapsible:zod.z.boolean().optional().default(false),onCollapse:zod.z.function().optional(),onExpand:zod.z.function().optional(),onResize:zod.z.function().optional(),className:zod.z.string().optional(),children:zod.z.custom()}),ct=zod.z.object({withHandle:zod.z.boolean().optional().default(true),presets:zod.z.array(Ee).optional(),disabled:zod.z.boolean().optional().default(false),className:zod.z.string().optional()}),se=classVarianceAuthority.cva(["relative flex items-center justify-center","shrink-0","bg-transparent","transition-colors duration-150","focus-visible:outline-none focus-visible:ring-2","focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2","touch-none select-none"],{variants:{direction:{horizontal:["w-3 min-w-[12px]","cursor-col-resize","hover:bg-[var(--accent)]/50","before:absolute before:inset-y-0 before:-inset-x-4","before:min-w-[44px]"],vertical:["h-3 min-h-[12px]","cursor-row-resize","hover:bg-[var(--accent)]/50","before:absolute before:inset-x-0 before:-inset-y-4","before:min-h-[44px]"]},disabled:{true:"cursor-not-allowed opacity-50 pointer-events-none",false:""},isDragging:{true:"bg-[var(--accent)]",false:""}},defaultVariants:{direction:"horizontal",disabled:false,isDragging:false}}),le=classVarianceAuthority.cva(["flex items-center justify-center","rounded-full","bg-[var(--border)]","text-[var(--menu-muted)]"],{variants:{direction:{horizontal:"h-8 w-1",vertical:"h-1 w-8"}},defaultVariants:{direction:"horizontal"}});var Ve=react.forwardRef(function({name:o,defaultSize:f,minSize:n=U,maxSize:l=$,collapsible:e=false,onCollapse:a,onExpand:i,onResize:t,className:s,children:v},c){let{sizes:P,registerPanel:R,unregisterPanel:h,containerRef:E}=W(),L=react.useRef(null),[y,b]=react.useState(-1),r=react.useRef(null),g=react.useRef(false),w=react.useRef(-1);react.useEffect(()=>{let u=L.current,x=E.current;if(!u||!x)return;let V=x.querySelectorAll("[data-resizable-panel]"),T=-1;for(let F=0;F<V.length;F++)if(V[F]===u){T=F;break}if(T!==-1)return y!==T&&b(T),g.current||(g.current=true,w.current=T,R(T,{name:o,minSize:n,maxSize:l,collapsible:e})),()=>{g.current&&(h(w.current),g.current=false);}},[E,R,h,o,n,l,e,y]);let d=y>=0?P[y]??50:50;return react.useEffect(()=>{if(r.current===null){r.current=d;return}let u=r.current===0,x=d===0;!u&&x&&a?a():u&&!x&&i&&i(),t&&r.current!==d&&t(d),r.current=d;},[d,a,i,t]),jsxRuntime.jsx("div",{ref:u=>{L.current=u,typeof c=="function"?c(u):c&&(c.current=u);},role:"region","aria-label":o,"data-resizable-panel":"","data-panel-name":o,"data-panel-index":y,"data-collapsed":d===0,style:{flexBasis:`${d}%`,flexGrow:0,flexShrink:0,overflow:"hidden"},className:N("relative",s),children:v})});Ve.displayName="ResizablePanel";function Te(p,o,f){return Math.max(o,Math.min(f,p))}function Le(p,o,f,n,l){let e=[...p],a=o[f],i=o[n];if(!a||!i)return p;let t=p[f]??50,s=p[n]??50,v=t+l,c=s-l,P=a.collapsible?0:a.minSize,R=a.maxSize,h=i.collapsible?0:i.minSize,E=i.maxSize;return v=Te(v,P,R),c=t+s-v,c=Te(c,h,E),v=t+s-c,e[f]=v,e[n]=c,e}function De({direction:p,sizes:o,setSizes:f,panels:n,containerRef:l,leftPanelIndex:e,rightPanelIndex:a,disabled:i=false,announce:t,groupLabel:s,onOpenPopover:v}){let[c,P]=react.useState(false),R=react.useRef(null),h=react.useRef(null),E=react.useRef(0),L=react.useRef(false),y=react.useRef(n),b=react.useRef(o),r=react.useRef(f),g=react.useRef(()=>{}),w=react.useRef(()=>{});react.useEffect(()=>{y.current=n,b.current=o,r.current=f;},[n,o,f]);let d=react.useCallback(()=>{let S=l.current;return S?p==="horizontal"?S.offsetWidth:S.offsetHeight:0},[l,p]),u=react.useCallback(S=>{let C=d();return C===0?0:S/C*100},[d]),x=react.useCallback(S=>{g.current(S);},[]),V=react.useCallback(()=>{w.current();},[]),T=react.useCallback(S=>{if(!R.current||i)return;let I=(p==="horizontal"?S.clientX:S.clientY)-R.current.position,D=u(I),_=Le(R.current.sizes,y.current,e,a,D);r.current(_);},[p,i,e,u,a]),F=react.useCallback(()=>{if(h.current&&(clearTimeout(h.current),h.current=null),Date.now()-E.current<te&&!L.current&&v&&!i&&v(),c){P(false);let I=y.current[e],D=Math.round(b.current[e]??50);t&&I&&s&&t(`${I.name} in ${s} resized to ${D} percent`);}R.current=null,L.current=false,document.removeEventListener("pointermove",x),document.removeEventListener("pointerup",V),document.removeEventListener("pointercancel",V),document.body.style.cursor="",document.body.style.userSelect="";},[t,i,s,c,e,v,x,V]);react.useEffect(()=>{g.current=T,w.current=F;});let K=react.useCallback(S=>{if(i)return;S.preventDefault();let C=p==="horizontal"?S.clientX:S.clientY;E.current=Date.now(),L.current=false,R.current={position:C,sizes:[...o],containerSize:d()},h.current=setTimeout(()=>{L.current=true,P(true),document.body.style.cursor=p==="horizontal"?"col-resize":"row-resize",document.body.style.userSelect="none";},te),document.addEventListener("pointermove",x),document.addEventListener("pointerup",V),document.addEventListener("pointercancel",V),S.pointerType==="mouse"&&(h.current&&(clearTimeout(h.current),h.current=null),L.current=true,P(true),document.body.style.cursor=p==="horizontal"?"col-resize":"row-resize",document.body.style.userSelect="none");},[p,i,d,x,V,o]),G=react.useCallback(S=>{if(i)return;let C=S.shiftKey?10:1,I=0;switch(S.key){case "ArrowLeft":case "ArrowUp":I=-C;break;case "ArrowRight":case "ArrowDown":I=C;break;case "Home":{let D=n[e];D&&(I=(D.collapsible?0:D.minSize)-(o[e]??50));break}case "End":{let D=n[e];D&&(I=D.maxSize-(o[e]??50));break}case "Enter":case " ":S.preventDefault(),v?.();return;default:return}if(I!==0){S.preventDefault();let D=Le(o,n,e,a,I);f(D);let _=n[e],k=Math.round(D[e]??50);t&&_&&s&&t(`${_.name} in ${s} resized to ${k} percent`);}},[t,i,s,e,v,n,a,f,o]);return react.useEffect(()=>{let S=x,C=V;return ()=>{h.current&&clearTimeout(h.current),document.removeEventListener("pointermove",S),document.removeEventListener("pointerup",C),document.removeEventListener("pointercancel",C);}},[x,V]),{isDragging:c,handlePointerDown:K,handleKeyDown:G}}var ce=classVarianceAuthority.cva("inline-flex justify-center min-h-[44px] min-w-[44px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",{variants:{fullWidth:{true:"w-full",false:""},inVerticalGroup:{true:"items-stretch",false:"items-center"}},defaultVariants:{fullWidth:false,inVerticalGroup:false}}),de=classVarianceAuthority.cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 relative cursor-pointer",{variants:{variant:{default:"bg-[var(--primary-action)] text-[var(--primary-action-foreground)] shadow-md hover:bg-[var(--primary-action-hover)] data-[pressed]:bg-[var(--primary-action)]/80",destructive:"bg-[var(--destructive-background)] text-[var(--destructive-foreground)] shadow-md hover:bg-[var(--destructive-background)]/90 data-[pressed]:bg-[var(--destructive-background)]/80",outline:"border border-[var(--input-border)] bg-[var(--page-background)] hover:bg-[var(--input-border)] data-[pressed]:bg-[var(--input-border)]",secondary:"bg-[var(--secondary)] text-[var(--secondary-foreground)] shadow-md hover:bg-[var(--secondary)]/80 data-[pressed]:bg-[var(--secondary)]/70",ghost:"hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)] data-[pressed]:bg-[var(--accent)]",link:"text-[var(--text-link)] underline-offset-4 hover:underline data-[pressed]:text-[var(--text-link-hover)]"},fullWidth:{true:"w-full",false:""},visualSize:{default:"h-10 px-4 py-2",sm:"h-9 rounded-md px-3 text-xs",lg:"h-11 rounded-md px-8",icon:"h-10 w-10",dot:"h-5 w-5 rounded-full p-0 min-h-0 min-w-0"},paywall:{true:"!bg-[var(--paywall)] !text-[var(--paywall-foreground)] !shadow-md hover:!bg-[var(--paywall)]/90 !cursor-not-allowed !border-transparent",false:""}},defaultVariants:{variant:"default",visualSize:"default",paywall:false}});var me="data-[pressed]:scale-[0.97]";var pe="data-[hovered]:shadow-md";var re="hc:data-[hovered]:outline hc:data-[hovered]:outline-2 hc:data-[hovered]:outline-foreground",oe="hc:data-[pressed]:outline hc:data-[pressed]:outline-2 hc:data-[pressed]:outline-offset-1 hc:data-[pressed]:outline-foreground";var _e=react.createContext(null);_e.displayName="ButtonGroupContext";function Me(){return react.useContext(_e)}var Fe=react.createContext(null);Fe.displayName="ButtonGroupItemContext";function Ge(){return react.useContext(Fe)}classVarianceAuthority.cva("inline-flex items-center gap-0",{variants:{orientation:{horizontal:"flex-row",vertical:"flex-col w-full"}},defaultVariants:{orientation:"horizontal"}});var Be=classVarianceAuthority.cva("",{variants:{orientation:{horizontal:"min-w-[44px]",vertical:"flex min-h-[44px]"},position:{first:"",middle:"",last:"",only:""}},compoundVariants:[{orientation:"horizontal",position:"first",className:"rounded-r-none border-r-0"},{orientation:"horizontal",position:"middle",className:"rounded-none border-r-0"},{orientation:"horizontal",position:"last",className:"rounded-l-none"},{orientation:"vertical",position:"first",className:"rounded-b-none border-b-0"},{orientation:"vertical",position:"middle",className:"rounded-none border-b-0"},{orientation:"vertical",position:"last",className:"rounded-t-none"}],defaultVariants:{orientation:"horizontal",position:"only"}});classVarianceAuthority.cva("bg-[var(--border)]",{variants:{orientation:{horizontal:"w-px h-6 mx-1",vertical:"h-px w-full my-1"}},defaultVariants:{orientation:"horizontal"}});var M=react.memo(react.forwardRef(({className:p,buttonVisualClassName:o,variant:f,size:n,visualSize:l,fullWidth:e,loading:a=false,loadingText:i="Loading...",shortcut:t,children:s,isDisabled:v,paywall:c=false,paywallRedirect:P,paywallDescription:R,onPress:h,...E},L)=>{let y=react.useId(),b=Me(),r=Ge(),g=f??b?.variant??"default",w=n??b?.size,d=v??b?.isDisabled??false,u=b?.orientation==="vertical",x=e||u,V=r?Be({orientation:b?.orientation??"horizontal",position:r.position}):"",T=l??w??"default";return process.env.NODE_ENV!=="production"&&(T==="dot"||T==="icon")&&!E["aria-label"]&&!s&&console.warn('[Button] visualSize="dot" or "icon" requires aria-label when no visible text is provided (WCAG 1.1.1)'),jsxRuntime.jsx(reactAriaComponents.Button,{ref:L,isDisabled:d||a||void 0,"aria-disabled":c?true:void 0,"aria-describedby":c?y:void 0,onPress:G=>{if(c){P&&window.open(P,"_blank","noopener,noreferrer");return}h?.(G);},className:N(ce({fullWidth:x,inVerticalGroup:u}),p),...E,children:G=>jsxRuntime.jsxs("span",{className:N(de({variant:g,visualSize:T,paywall:c,fullWidth:x}),V,o,me,pe,re,oe),"data-pressed":G.isPressed||void 0,children:[a&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(lucideReact.Loader2,{className:"motion-safe:animate-spin","aria-hidden":"true"}),jsxRuntime.jsx("span",{className:"sr-only","aria-live":"polite",children:i})]}),!a&&s,c&&jsxRuntime.jsx(lucideReact.Zap,{"data-testid":"zap-icon","aria-hidden":"true",className:"ml-1"}),c&&jsxRuntime.jsxs("span",{id:y,className:"sr-only",children:["Premium feature: ",R||"Upgrade required to access this feature"]}),G.isFocusVisible&&t&&jsxRuntime.jsx("kbd",{className:"ml-auto hidden text-xs opacity-60 lg:inline",children:t}),G.isPressed&&jsxRuntime.jsx("span",{className:"absolute inset-0 rounded-[inherit] bg-current opacity-10 motion-safe:animate-in motion-safe:zoom-in-95","aria-hidden":"true"})]})})}));M.displayName="Button";var Oe=4294967295,ke=0,Ue=-2147483647;zod.z.object({value:zod.z.number().nullable().optional(),defaultValue:zod.z.number().optional(),minValue:zod.z.number().optional(),maxValue:zod.z.number().optional(),allowNegative:zod.z.boolean().optional(),step:zod.z.number().positive().optional(),formatOptions:zod.z.custom().optional(),isDisabled:zod.z.boolean().optional(),isReadOnly:zod.z.boolean().optional(),isRequired:zod.z.boolean().optional(),isInvalid:zod.z.boolean().optional(),isWheelDisabled:zod.z.boolean().optional(),validate:zod.z.function().optional(),validationBehavior:zod.z.enum(["native","aria"]).default("native"),label:zod.z.string(),description:zod.z.string().optional(),errorMessage:zod.z.union([zod.z.string(),zod.z.function()]).optional(),stepperLayout:zod.z.enum(["sides","stacked","hidden"]).default("sides"),incrementAriaLabel:zod.z.string().optional(),decrementAriaLabel:zod.z.string().optional(),name:zod.z.string().optional(),size:zod.z.enum(["sm","default","lg"]).default("default"),onChange:zod.z.function().optional(),onFocus:zod.z.function().optional(),onBlur:zod.z.function().optional(),onFocusChange:zod.z.function().optional(),className:zod.z.string().optional(),autoFocus:zod.z.boolean().optional()});var $e=classVarianceAuthority.cva(["inline-flex items-center rounded-md border","bg-[var(--content-background)] text-[var(--content-foreground)]","transition-colors duration-200","focus-within:ring-2 focus-within:ring-[var(--ring)] focus-within:ring-offset-2","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"],{variants:{size:{sm:"h-9 text-sm",default:"h-10 text-base",lg:"h-12 text-lg"},isInvalid:{true:"border-[var(--destructive)] focus-within:ring-[var(--destructive)]",false:"border-[var(--input)] hover:border-[var(--input)]/80"}},defaultVariants:{size:"default",isInvalid:false}}),je=classVarianceAuthority.cva(["flex-1 bg-transparent text-center tabular-nums","min-w-0","focus:outline-none","[appearance:textfield]","[&::-webkit-outer-spin-button]:appearance-none","[&::-webkit-inner-spin-button]:appearance-none"],{variants:{size:{sm:"px-2 text-sm",default:"px-3 text-base",lg:"px-4 text-lg"}},defaultVariants:{size:"default"}}),X=classVarianceAuthority.cva(["flex items-center justify-center","transition-colors duration-150","select-none","hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)]","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]","focus-visible:ring-inset","active:bg-[var(--accent)]/80","disabled:pointer-events-none disabled:opacity-50"],{variants:{size:{sm:"min-w-8 min-h-8 text-sm",default:"min-w-10 min-h-10 text-base",lg:"min-w-12 min-h-12 text-lg"},position:{left:"rounded-l-md border-r border-[var(--input)]",right:"rounded-r-md border-l border-[var(--input)]",top:"rounded-tr-md border-b border-l border-[var(--input)] h-1/2",bottom:"rounded-br-md border-l border-[var(--input)] h-1/2"}},defaultVariants:{size:"default"}}),qe=classVarianceAuthority.cva(["block font-medium text-[var(--content-foreground)]","mb-1.5",'data-[required]:after:content-["*"] data-[required]:after:ml-0.5',"data-[required]:after:text-[var(--destructive)]"],{variants:{size:{sm:"text-sm",default:"text-sm",lg:"text-base"}},defaultVariants:{size:"default"}}),Ye=classVarianceAuthority.cva(["text-[var(--menu-muted)]","mt-1"],{variants:{size:{sm:"text-xs",default:"text-sm",lg:"text-base"}},defaultVariants:{size:"default"}}),We=classVarianceAuthority.cva(["flex items-center gap-1","text-[var(--destructive)]","mt-1"],{variants:{size:{sm:"text-xs",default:"text-sm",lg:"text-base"}},defaultVariants:{size:"default"}});var ae=react.forwardRef(({label:p,description:o,errorMessage:f,size:n="default",stepperLayout:l="sides",allowNegative:e=false,incrementAriaLabel:a,decrementAriaLabel:i,minValue:t,maxValue:s,className:v,isInvalid:c,isRequired:P,isDisabled:R,isReadOnly:h,...E},L)=>{let y=t??(e?Ue:ke),b=s??Oe,r=l!=="hidden"&&!h,g=l==="stacked";return jsxRuntime.jsxs(reactAriaComponents.NumberField,{ref:L,className:N("group flex flex-col",v),minValue:y,maxValue:b,isInvalid:c,isRequired:P,isDisabled:R,isReadOnly:h,...E,children:[jsxRuntime.jsx(reactAriaComponents.Label,{className:N(qe({size:n})),"data-required":P||void 0,children:p}),jsxRuntime.jsxs(reactAriaComponents.Group,{className:N($e({size:n,isInvalid:c??false}),g&&"pr-0"),children:[r&&!g&&jsxRuntime.jsx(M,{slot:"decrement",variant:"ghost",className:"!min-h-0 !min-w-0",buttonVisualClassName:N(X({size:n,position:"left"})),"aria-label":i??"Decrease value",children:jsxRuntime.jsx(lucideReact.Minus,{className:"h-4 w-4","aria-hidden":"true"})}),jsxRuntime.jsx(reactAriaComponents.Input,{className:N(je({size:n}))}),r&&g&&jsxRuntime.jsxs("div",{className:"flex flex-col h-full",children:[jsxRuntime.jsx(M,{slot:"increment",variant:"ghost",className:"!min-h-0 !min-w-0",buttonVisualClassName:N(X({size:n,position:"top"})),"aria-label":a??"Increase value",children:jsxRuntime.jsx(lucideReact.Plus,{className:"h-3 w-3","aria-hidden":"true"})}),jsxRuntime.jsx(M,{slot:"decrement",variant:"ghost",className:"!min-h-0 !min-w-0",buttonVisualClassName:N(X({size:n,position:"bottom"})),"aria-label":i??"Decrease value",children:jsxRuntime.jsx(lucideReact.Minus,{className:"h-3 w-3","aria-hidden":"true"})})]}),r&&!g&&jsxRuntime.jsx(M,{slot:"increment",variant:"ghost",className:"!min-h-0 !min-w-0",buttonVisualClassName:N(X({size:n,position:"right"})),"aria-label":a??"Increase value",children:jsxRuntime.jsx(lucideReact.Plus,{className:"h-4 w-4","aria-hidden":"true"})})]}),o&&jsxRuntime.jsx(reactAriaComponents.Text,{slot:"description",className:N(Ye({size:n})),children:o}),jsxRuntime.jsx(reactAriaComponents.FieldError,{className:N(We({size:n})),children:f})]})});ae.displayName="NumberField";var he=react.forwardRef(function({isOpen:o,onOpenChange:f,groupLabel:n,leftPanel:l,rightPanel:e,leftSize:a,rightSize:i,onSizesChange:t,presets:s,triggerRef:v,direction:c},P){let[R,h]=react.useState({left:a,right:i}),E=react.useRef(false);react.useEffect(()=>{o&&!E.current&&h({left:a,right:i}),E.current=o;},[o,a,i]);let L=react.useCallback(d=>{if(d===null)return;let u=Math.max(l.collapsible?0:l.minSize,Math.min(l.maxSize,d)),x=100-u,V=e.collapsible?0:e.minSize,T=e.maxSize;x<V||x>T||t(u,x);},[l,e,t]),y=react.useCallback(d=>{if(d===null)return;let u=Math.max(e.collapsible?0:e.minSize,Math.min(e.maxSize,d)),x=100-u,V=l.collapsible?0:l.minSize,T=l.maxSize;x<V||x>T||t(x,u);},[l,e,t]),b=react.useCallback(d=>{let u=d.sizes[0],x=d.sizes[1];u!==void 0&&x!==void 0&&t(u,x);},[t]),r=react.useCallback(()=>{t(R.left,R.right),f(false);},[t,f,R]),g=react.useCallback(()=>{f(false);},[f]);return o?jsxRuntime.jsxs(reactAriaComponents.DialogTrigger,{isOpen:o,onOpenChange:f,children:[jsxRuntime.jsx(reactAriaComponents.Button,{className:"sr-only",children:"Open resize controls"}),jsxRuntime.jsx(reactAriaComponents.Popover,{triggerRef:v,placement:c==="horizontal"?"bottom":"right",offset:8,className:N("w-72","rounded-lg border border-[var(--border)]","bg-[var(--popover)] text-[var(--popover-foreground)]","shadow-lg","outline-none","animate-in fade-in-0 zoom-in-95","data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95"),children:jsxRuntime.jsxs(reactAriaComponents.Dialog,{className:"outline-none",children:[jsxRuntime.jsxs("div",{className:"flex items-center justify-between border-b border-[var(--border)] px-4 py-3",children:[jsxRuntime.jsxs("h3",{className:"text-sm font-medium",children:["Resize: ",n]}),jsxRuntime.jsx(reactAriaComponents.Button,{onPress:g,className:N("inline-flex items-center justify-center rounded-md","min-h-[44px] min-w-[44px]","text-[var(--menu-muted)]","hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)]","focus-visible:outline-none focus-visible:ring-2","focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2"),"aria-label":"Close",children:jsxRuntime.jsx(lucideReact.X,{className:"h-4 w-4"})})]}),jsxRuntime.jsxs("div",{className:"space-y-4 px-4 py-4",children:[jsxRuntime.jsx("div",{children:jsxRuntime.jsx(ae,{label:`${l.name} (%)`,value:Math.round(a),onChange:L,minValue:l.collapsible?0:l.minSize,maxValue:l.maxSize,step:1,stepperLayout:"sides"})}),jsxRuntime.jsx("div",{children:jsxRuntime.jsx(ae,{label:`${e.name} (%)`,value:Math.round(i),onChange:y,minValue:e.collapsible?0:e.minSize,maxValue:e.maxSize,step:1,stepperLayout:"sides"})}),s&&s.length>0&&jsxRuntime.jsxs("div",{className:"border-t border-[var(--border)] pt-4",children:[jsxRuntime.jsx("div",{className:"mb-2 text-xs font-medium text-[var(--menu-muted)]",children:"Presets"}),jsxRuntime.jsx("div",{className:"flex flex-wrap gap-2",children:s.map((d,u)=>jsxRuntime.jsx(M,{variant:"outline",size:"sm",onPress:()=>b(d),children:d.label},u))})]})]}),jsxRuntime.jsx("div",{className:"flex justify-end border-t border-[var(--border)] px-4 py-3",children:jsxRuntime.jsx(M,{variant:"ghost",size:"sm",onPress:r,children:"Cancel"})})]})})]}):null});he.displayName="ResizablePopover";var Qe=react.forwardRef(function({withHandle:o=true,presets:f,disabled:n=false,className:l},e){let{direction:a,groupLabel:i,sizes:t,setSizes:s,panels:v,announce:c,containerRef:P}=W(),R=react.useRef(null),h=e||R,[E,L]=react.useState(0);react.useEffect(()=>{let D=h.current,_=P.current;if(!D||!_)return;let k=_.querySelectorAll('[role="slider"]'),ze=0;k.forEach((et,tt)=>{et===D&&(ze=tt);}),L(ze);},[P,h]);let y=E,b=E+1,r=v[y],g=v[b],w=t[y]??50,d=t[b]??50,[u,x]=react.useState(false),V=react.useCallback((D,_)=>{let k=[...t];k[y]=D,k[b]=_,s(k);},[t,s,y,b]),{isDragging:T,handlePointerDown:F,handleKeyDown:K}=De({direction:a,sizes:t,setSizes:s,panels:v,containerRef:P,leftPanelIndex:y,rightPanelIndex:b,disabled:n,announce:c,groupLabel:i,onOpenPopover:()=>x(true)}),G=r&&g?`Resize handle between ${r.name} and ${g.name} in ${i}`:`Resize handle in ${i}`,S=a==="horizontal"?lucideReact.GripVertical:lucideReact.GripHorizontal,C=r??{name:"Panel 1",minSize:U,maxSize:$,collapsible:false},I=g??{name:"Panel 2",minSize:U,maxSize:$,collapsible:false};return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{ref:h,role:"slider",tabIndex:n?-1:0,"aria-label":G,"aria-valuenow":Math.round(w),"aria-valuemin":r?.collapsible?0:r?.minSize??0,"aria-valuemax":r?.maxSize??100,"aria-orientation":a,"aria-disabled":n,"data-direction":a,"data-dragging":T,"data-disabled":n,onPointerDown:F,onKeyDown:K,className:N(se({direction:a,disabled:n,isDragging:T}),l),children:o&&jsxRuntime.jsx("div",{className:N(le({direction:a})),"aria-hidden":"true",children:jsxRuntime.jsx(S,{className:"h-4 w-4"})})}),jsxRuntime.jsx(he,{isOpen:u,onOpenChange:x,groupLabel:i,leftPanel:C,rightPanel:I,leftSize:w,rightSize:d,onSizesChange:V,presets:f,triggerRef:h,direction:a})]})});Qe.displayName="ResizableHandle";exports.DEFAULT_MAX_SIZE=$;exports.DEFAULT_MIN_SIZE=U;exports.LONG_PRESS_THRESHOLD=te;exports.ResizableHandle=Qe;exports.ResizableHandlePropsSchema=ct;exports.ResizablePanel=Ve;exports.ResizablePanelGroup=ye;exports.ResizablePanelGroupPropsSchema=lt;exports.ResizablePanelPropsSchema=ut;exports.ResizePresetSchema=Ee;exports.resizableGripVariants=le;exports.resizableHandleVariants=se;exports.useResizableContext=W;//# sourceMappingURL=index.js.map
1582
3
  //# sourceMappingURL=index.js.map