@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,1541 +1,3 @@
1
1
  "use client";
2
- 'use strict';
3
-
4
- var react = require('react');
5
- var reactAriaComponents = require('react-aria-components');
6
- var classVarianceAuthority = require('class-variance-authority');
7
- var lucideReact = require('lucide-react');
8
- var clsx = require('clsx');
9
- var tailwindMerge = require('tailwind-merge');
10
- var jsxRuntime = require('react/jsx-runtime');
11
- var zod = require('zod');
12
-
13
- // src/elements/FileField/FileField.tsx
14
- function cn(...inputs) {
15
- return tailwindMerge.twMerge(clsx.clsx(inputs));
16
- }
17
- var PRESSED_STYLES = "data-[pressed]:scale-[0.97]";
18
- var HOVER_STYLES = "data-[hovered]:shadow-md";
19
- var HIGH_CONTRAST_HOVER = "hc:data-[hovered]:outline hc:data-[hovered]:outline-2 hc:data-[hovered]:outline-foreground";
20
- var HIGH_CONTRAST_PRESSED = "hc:data-[pressed]:outline hc:data-[pressed]:outline-2 hc:data-[pressed]:outline-offset-1 hc:data-[pressed]:outline-foreground";
21
- var ButtonGroupContext = react.createContext(null);
22
- ButtonGroupContext.displayName = "ButtonGroupContext";
23
- function useButtonGroupContext() {
24
- return react.useContext(ButtonGroupContext);
25
- }
26
- var ButtonGroupItemContext = react.createContext(null);
27
- ButtonGroupItemContext.displayName = "ButtonGroupItemContext";
28
- function useButtonGroupItemContext() {
29
- return react.useContext(ButtonGroupItemContext);
30
- }
31
- classVarianceAuthority.cva("inline-flex items-center gap-0", {
32
- variants: {
33
- orientation: {
34
- horizontal: "flex-row",
35
- vertical: "flex-col w-full"
36
- }
37
- },
38
- defaultVariants: {
39
- orientation: "horizontal"
40
- }
41
- });
42
- var buttonGroupItemVariants = classVarianceAuthority.cva("", {
43
- variants: {
44
- orientation: {
45
- // min-w-[44px] ensures visual layer fills touch target width (for icon buttons)
46
- horizontal: "min-w-[44px]",
47
- // flex (overrides inline-flex) + min-h-[44px] makes visual layer fill touch target,
48
- // eliminating gaps between stacked buttons in vertical orientation
49
- vertical: "flex min-h-[44px]"
50
- },
51
- position: {
52
- first: "",
53
- middle: "",
54
- last: "",
55
- only: ""
56
- // Single button - no modifications needed
57
- }
58
- },
59
- compoundVariants: [
60
- // ==========================================================================
61
- // Horizontal Orientation
62
- // ==========================================================================
63
- {
64
- orientation: "horizontal",
65
- position: "first",
66
- className: "rounded-r-none border-r-0"
67
- },
68
- {
69
- orientation: "horizontal",
70
- position: "middle",
71
- className: "rounded-none border-r-0"
72
- },
73
- {
74
- orientation: "horizontal",
75
- position: "last",
76
- className: "rounded-l-none"
77
- },
78
- // ==========================================================================
79
- // Vertical Orientation
80
- // Note: w-full is handled by Button's effectiveFullWidth for both layers
81
- // ==========================================================================
82
- {
83
- orientation: "vertical",
84
- position: "first",
85
- className: "rounded-b-none border-b-0"
86
- },
87
- {
88
- orientation: "vertical",
89
- position: "middle",
90
- className: "rounded-none border-b-0"
91
- },
92
- {
93
- orientation: "vertical",
94
- position: "last",
95
- className: "rounded-t-none"
96
- }
97
- ],
98
- defaultVariants: {
99
- orientation: "horizontal",
100
- position: "only"
101
- }
102
- });
103
- classVarianceAuthority.cva("bg-[var(--border)]", {
104
- variants: {
105
- orientation: {
106
- horizontal: "w-px h-6 mx-1",
107
- vertical: "h-px w-full my-1"
108
- }
109
- },
110
- defaultVariants: {
111
- orientation: "horizontal"
112
- }
113
- });
114
- var buttonOuterVariants = classVarianceAuthority.cva(
115
- "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",
116
- {
117
- variants: {
118
- fullWidth: {
119
- true: "w-full",
120
- false: ""
121
- },
122
- inVerticalGroup: {
123
- true: "items-stretch",
124
- false: "items-center"
125
- }
126
- },
127
- defaultVariants: {
128
- fullWidth: false,
129
- inVerticalGroup: false
130
- }
131
- }
132
- );
133
- var buttonVisualVariants = classVarianceAuthority.cva(
134
- "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",
135
- {
136
- variants: {
137
- variant: {
138
- 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",
139
- destructive: "bg-[var(--destructive-background)] text-[var(--destructive-foreground)] shadow-md hover:bg-[var(--destructive-background)]/90 data-[pressed]:bg-[var(--destructive-background)]/80",
140
- outline: "border border-[var(--input-border)] bg-[var(--page-background)] hover:bg-[var(--input-border)] data-[pressed]:bg-[var(--input-border)]",
141
- secondary: "bg-[var(--secondary)] text-[var(--secondary-foreground)] shadow-md hover:bg-[var(--secondary)]/80 data-[pressed]:bg-[var(--secondary)]/70",
142
- ghost: "hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)] data-[pressed]:bg-[var(--accent)]",
143
- link: "text-[var(--text-link)] underline-offset-4 hover:underline data-[pressed]:text-[var(--text-link-hover)]"
144
- },
145
- fullWidth: {
146
- true: "w-full",
147
- false: ""
148
- },
149
- visualSize: {
150
- default: "h-10 px-4 py-2",
151
- sm: "h-9 rounded-md px-3 text-xs",
152
- lg: "h-11 rounded-md px-8",
153
- icon: "h-10 w-10",
154
- dot: "h-5 w-5 rounded-full p-0 min-h-0 min-w-0"
155
- },
156
- paywall: {
157
- true: "!bg-[var(--paywall)] !text-[var(--paywall-foreground)] !shadow-md hover:!bg-[var(--paywall)]/90 !cursor-not-allowed !border-transparent",
158
- false: ""
159
- }
160
- },
161
- defaultVariants: {
162
- variant: "default",
163
- visualSize: "default",
164
- paywall: false
165
- }
166
- }
167
- );
168
- var Button = react.memo(react.forwardRef(
169
- ({
170
- className,
171
- buttonVisualClassName,
172
- variant,
173
- size,
174
- visualSize,
175
- fullWidth,
176
- loading = false,
177
- loadingText = "Loading...",
178
- shortcut,
179
- children,
180
- isDisabled,
181
- paywall = false,
182
- paywallRedirect,
183
- paywallDescription,
184
- onPress,
185
- ...props
186
- }, ref) => {
187
- const paywallDescriptionId = react.useId();
188
- const groupContext = useButtonGroupContext();
189
- const itemContext = useButtonGroupItemContext();
190
- const effectiveVariant = variant ?? groupContext?.variant ?? "default";
191
- const effectiveSize = size ?? groupContext?.size;
192
- const effectiveIsDisabled = isDisabled ?? groupContext?.isDisabled ?? false;
193
- const isInVerticalGroup = groupContext?.orientation === "vertical";
194
- const effectiveFullWidth = fullWidth || isInVerticalGroup;
195
- const positionClassName = itemContext ? buttonGroupItemVariants({
196
- orientation: groupContext?.orientation ?? "horizontal",
197
- position: itemContext.position
198
- }) : "";
199
- const effectiveVisualSize = visualSize ?? effectiveSize ?? "default";
200
- if (process.env.NODE_ENV !== "production") {
201
- if ((effectiveVisualSize === "dot" || effectiveVisualSize === "icon") && !props["aria-label"] && !children) {
202
- console.warn(
203
- '[Button] visualSize="dot" or "icon" requires aria-label when no visible text is provided (WCAG 1.1.1)'
204
- );
205
- }
206
- }
207
- const handlePress = (e) => {
208
- if (paywall) {
209
- if (paywallRedirect) {
210
- window.open(paywallRedirect, "_blank", "noopener,noreferrer");
211
- }
212
- return;
213
- }
214
- onPress?.(e);
215
- };
216
- const computedIsDisabled = effectiveIsDisabled || loading || void 0;
217
- return /* @__PURE__ */ jsxRuntime.jsx(
218
- reactAriaComponents.Button,
219
- {
220
- ref,
221
- isDisabled: computedIsDisabled,
222
- "aria-disabled": paywall ? true : void 0,
223
- "aria-describedby": paywall ? paywallDescriptionId : void 0,
224
- onPress: handlePress,
225
- className: cn(buttonOuterVariants({ fullWidth: effectiveFullWidth, inVerticalGroup: isInVerticalGroup }), className),
226
- ...props,
227
- children: (renderProps) => (
228
- /* Layer 2: Visual Button */
229
- /* @__PURE__ */ jsxRuntime.jsxs(
230
- "span",
231
- {
232
- className: cn(
233
- buttonVisualVariants({
234
- variant: effectiveVariant,
235
- visualSize: effectiveVisualSize,
236
- paywall,
237
- fullWidth: effectiveFullWidth
238
- }),
239
- // Position styling from ButtonGroup context (border-radius adjustments)
240
- positionClassName,
241
- buttonVisualClassName,
242
- // Layer 2 interaction styles (no focus - focus ring is on Layer 1)
243
- PRESSED_STYLES,
244
- HOVER_STYLES,
245
- HIGH_CONTRAST_HOVER,
246
- HIGH_CONTRAST_PRESSED
247
- ),
248
- "data-pressed": renderProps.isPressed || void 0,
249
- children: [
250
- loading && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
251
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "motion-safe:animate-spin", "aria-hidden": "true" }),
252
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", "aria-live": "polite", children: loadingText })
253
- ] }),
254
- !loading && children,
255
- paywall && /* @__PURE__ */ jsxRuntime.jsx(
256
- lucideReact.Zap,
257
- {
258
- "data-testid": "zap-icon",
259
- "aria-hidden": "true",
260
- className: "ml-1"
261
- }
262
- ),
263
- paywall && /* @__PURE__ */ jsxRuntime.jsxs("span", { id: paywallDescriptionId, className: "sr-only", children: [
264
- "Premium feature: ",
265
- paywallDescription || "Upgrade required to access this feature"
266
- ] }),
267
- renderProps.isFocusVisible && shortcut && /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "ml-auto hidden text-xs opacity-60 lg:inline", children: shortcut }),
268
- renderProps.isPressed && /* @__PURE__ */ jsxRuntime.jsx(
269
- "span",
270
- {
271
- className: "absolute inset-0 rounded-[inherit] bg-current opacity-10 motion-safe:animate-in motion-safe:zoom-in-95",
272
- "aria-hidden": "true"
273
- }
274
- )
275
- ]
276
- }
277
- )
278
- )
279
- }
280
- );
281
- }
282
- ));
283
- Button.displayName = "Button";
284
-
285
- // src/styles/shared-variants.ts
286
- var FOCUS_WITHIN_RING = [
287
- "focus-within:outline-none",
288
- "focus-within:ring-2",
289
- "focus-within:ring-[var(--ring)]",
290
- "focus-within:ring-offset-2"
291
- ];
292
- var FOCUS_VISIBLE_RING = [
293
- "focus-visible:outline-none",
294
- "focus-visible:ring-2",
295
- "focus-visible:ring-[var(--ring)]",
296
- "focus-visible:ring-offset-2"
297
- ];
298
- var DISABLED_STANDARD = [
299
- "disabled:pointer-events-none",
300
- "disabled:opacity-50"
301
- ];
302
- var TEXT_SIZE_SMALL_SCALE = {
303
- sm: "text-xs",
304
- default: "text-sm",
305
- lg: "text-base"
306
- };
307
- var TEXT_SIZE_MEDIUM_SCALE = {
308
- sm: "text-sm",
309
- default: "text-base",
310
- lg: "text-lg"
311
- };
312
- var TOUCH_TARGET_MIN = [
313
- "min-h-[44px]",
314
- "min-w-[44px]"
315
- ];
316
- var ERROR_MESSAGE_BASE = [
317
- "flex",
318
- "items-center",
319
- "gap-1.5",
320
- "text-[var(--destructive)]"
321
- ];
322
- var SUCCESS_MESSAGE_BASE = [
323
- "flex",
324
- "items-center",
325
- "gap-1.5",
326
- "text-[var(--success)]"
327
- ];
328
- var DESCRIPTION_BASE = [
329
- "text-[var(--menu-muted)]"
330
- ];
331
- var LABEL_BASE = [
332
- "font-medium",
333
- "text-[var(--content-foreground)]"
334
- ];
335
- var TRANSITION_COLORS = [
336
- "transition-colors",
337
- "duration-200"
338
- ];
339
- function combineStyles(...styles) {
340
- return styles.flatMap((s) => Array.isArray(s) ? [...s] : [s]);
341
- }
342
-
343
- // src/elements/FileField/FileField.variants.ts
344
- var fileFieldContainerVariants = classVarianceAuthority.cva(
345
- "flex flex-col gap-1.5 w-full",
346
- {
347
- variants: {
348
- size: TEXT_SIZE_MEDIUM_SCALE
349
- },
350
- defaultVariants: {
351
- size: "default"
352
- }
353
- }
354
- );
355
- var fileFieldDropZoneVariants = classVarianceAuthority.cva(
356
- combineStyles(
357
- "flex flex-col items-center justify-center rounded-md border-2 border-dashed",
358
- "bg-[var(--content-background)] text-[var(--content-foreground)]",
359
- TRANSITION_COLORS,
360
- FOCUS_WITHIN_RING
361
- ),
362
- {
363
- variants: {
364
- size: {
365
- sm: "min-h-[100px] p-4 gap-2",
366
- default: "min-h-[140px] p-6 gap-3",
367
- lg: "min-h-[180px] p-8 gap-4"
368
- },
369
- isDragOver: {
370
- true: "border-[var(--primary)] bg-[var(--primary)]/5",
371
- false: "border-[var(--input)] hover:border-[var(--primary)]/50"
372
- },
373
- isInvalid: {
374
- true: "border-[var(--destructive)] bg-[var(--destructive)]/5",
375
- false: ""
376
- },
377
- isDisabled: {
378
- true: "opacity-50 cursor-not-allowed pointer-events-none",
379
- false: "cursor-pointer"
380
- }
381
- },
382
- compoundVariants: [
383
- {
384
- isInvalid: true,
385
- isDragOver: true,
386
- className: "border-[var(--destructive)] bg-[var(--destructive)]/5"
387
- }
388
- ],
389
- defaultVariants: {
390
- size: "default",
391
- isDragOver: false,
392
- isInvalid: false,
393
- isDisabled: false
394
- }
395
- }
396
- );
397
- var fileFieldTriggerVariants = classVarianceAuthority.cva(
398
- combineStyles(
399
- "inline-flex items-center justify-center gap-2 rounded-md font-medium",
400
- TRANSITION_COLORS,
401
- TOUCH_TARGET_MIN,
402
- FOCUS_VISIBLE_RING,
403
- DISABLED_STANDARD
404
- ),
405
- {
406
- variants: {
407
- size: {
408
- sm: "px-3 py-2 text-xs",
409
- default: "px-4 py-2 text-sm",
410
- lg: "px-6 py-3 text-base"
411
- },
412
- variant: {
413
- default: "bg-[var(--primary)] text-[var(--primary-foreground)] hover:bg-[var(--primary)]/90",
414
- outline: "border border-[var(--input)] bg-transparent hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)]"
415
- }
416
- },
417
- defaultVariants: {
418
- size: "default",
419
- variant: "default"
420
- }
421
- }
422
- );
423
- var fileFieldListVariants = classVarianceAuthority.cva(
424
- "flex flex-col gap-2 mt-3",
425
- {
426
- variants: {
427
- size: {
428
- sm: "gap-1.5",
429
- default: "gap-2",
430
- lg: "gap-3"
431
- }
432
- },
433
- defaultVariants: {
434
- size: "default"
435
- }
436
- }
437
- );
438
- var fileFieldListHeaderVariants = classVarianceAuthority.cva(
439
- "flex items-center justify-between mb-1",
440
- {
441
- variants: {
442
- size: TEXT_SIZE_SMALL_SCALE
443
- },
444
- defaultVariants: {
445
- size: "default"
446
- }
447
- }
448
- );
449
- var fileFieldItemVariants = classVarianceAuthority.cva(
450
- "flex items-center justify-between gap-3 bg-[var(--accent-background)] rounded-md border border-[var(--border)]",
451
- {
452
- variants: {
453
- size: {
454
- sm: "px-2 py-1.5 text-xs",
455
- default: "px-3 py-2 text-sm",
456
- lg: "px-4 py-3 text-base"
457
- }
458
- },
459
- defaultVariants: {
460
- size: "default"
461
- }
462
- }
463
- );
464
- var fileFieldRemoveButtonVariants = classVarianceAuthority.cva(
465
- combineStyles(
466
- "inline-flex items-center justify-center rounded-full",
467
- TOUCH_TARGET_MIN,
468
- "-mr-2 -my-1",
469
- // Negative margin for visual sizing
470
- "text-[var(--menu-muted)] hover:text-[var(--destructive)] hover:bg-[var(--destructive)]/10",
471
- "transition-colors",
472
- "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]"
473
- ),
474
- {
475
- variants: {
476
- size: {
477
- sm: "",
478
- default: "",
479
- lg: ""
480
- }
481
- },
482
- defaultVariants: {
483
- size: "default"
484
- }
485
- }
486
- );
487
- var fileFieldErrorVariants = classVarianceAuthority.cva(
488
- combineStyles(ERROR_MESSAGE_BASE, "font-medium"),
489
- {
490
- variants: {
491
- size: TEXT_SIZE_SMALL_SCALE
492
- },
493
- defaultVariants: {
494
- size: "default"
495
- }
496
- }
497
- );
498
- var fileFieldSuccessVariants = classVarianceAuthority.cva(
499
- combineStyles(SUCCESS_MESSAGE_BASE, "font-medium"),
500
- {
501
- variants: {
502
- size: TEXT_SIZE_SMALL_SCALE
503
- },
504
- defaultVariants: {
505
- size: "default"
506
- }
507
- }
508
- );
509
- var fileFieldDescriptionVariants = classVarianceAuthority.cva(
510
- DESCRIPTION_BASE,
511
- {
512
- variants: {
513
- size: TEXT_SIZE_SMALL_SCALE
514
- },
515
- defaultVariants: {
516
- size: "default"
517
- }
518
- }
519
- );
520
- var fileFieldLabelVariants = classVarianceAuthority.cva(
521
- LABEL_BASE,
522
- {
523
- variants: {
524
- size: TEXT_SIZE_MEDIUM_SCALE,
525
- isRequired: {
526
- true: "after:content-['*'] after:ml-0.5 after:text-[var(--destructive)]",
527
- false: ""
528
- }
529
- },
530
- defaultVariants: {
531
- size: "default",
532
- isRequired: false
533
- }
534
- }
535
- );
536
-
537
- // src/elements/FileField/utils.ts
538
- function formatFileSize(bytes) {
539
- if (bytes === 0) return "0 B";
540
- const k = 1024;
541
- const sizes = ["B", "KB", "MB", "GB"];
542
- const i = Math.floor(Math.log(bytes) / Math.log(k));
543
- const size = parseFloat((bytes / Math.pow(k, i)).toFixed(1));
544
- const formatted = size % 1 === 0 ? size.toFixed(0) : size.toFixed(1);
545
- return `${formatted} ${sizes[i]}`;
546
- }
547
- function truncateFileName(name, maxLength = 30) {
548
- if (name.length <= maxLength) return name;
549
- const lastDotIndex = name.lastIndexOf(".");
550
- if (lastDotIndex === -1) {
551
- return `${name.slice(0, maxLength - 3)}...`;
552
- }
553
- const ext = name.slice(lastDotIndex);
554
- const base = name.slice(0, lastDotIndex);
555
- const availableLength = maxLength - ext.length - 3;
556
- if (availableLength < 1) {
557
- return `...${ext}`;
558
- }
559
- const truncatedBase = base.slice(0, availableLength);
560
- return `${truncatedBase}...${ext}`;
561
- }
562
- function isFileTypeAccepted(file, acceptedTypes) {
563
- if (!acceptedTypes || acceptedTypes.length === 0) return true;
564
- return acceptedTypes.some((type) => {
565
- if (type.endsWith("/*")) {
566
- const category = type.slice(0, -2);
567
- return file.type.startsWith(`${category}/`);
568
- }
569
- if (type.includes("/")) {
570
- return file.type === type;
571
- }
572
- if (type.startsWith(".")) {
573
- return file.name.toLowerCase().endsWith(type.toLowerCase());
574
- }
575
- return false;
576
- });
577
- }
578
- function getFileIcon(file) {
579
- if (file.type.startsWith("image/")) return "image";
580
- if (file.type.startsWith("video/")) return "video";
581
- if (file.type.startsWith("audio/")) return "audio";
582
- return "file";
583
- }
584
- function deduplicateFiles(existing, incoming) {
585
- const result = [...existing];
586
- for (const file of incoming) {
587
- const existingIndex = result.findIndex((f) => f.name === file.name);
588
- if (existingIndex >= 0) {
589
- result[existingIndex] = file;
590
- } else {
591
- result.push(file);
592
- }
593
- }
594
- return result;
595
- }
596
- function formatAcceptedTypes(acceptedTypes) {
597
- if (!acceptedTypes || acceptedTypes.length === 0) return "any file";
598
- const formatted = acceptedTypes.map((type) => {
599
- if (type === "image/*") return "images";
600
- if (type === "video/*") return "videos";
601
- if (type === "audio/*") return "audio";
602
- if (type.startsWith(".")) {
603
- return type.slice(1).toUpperCase();
604
- }
605
- if (type.includes("/")) {
606
- const parts = type.split("/");
607
- const subtype = parts[1] ?? type;
608
- return subtype.toUpperCase();
609
- }
610
- return type;
611
- });
612
- return formatted.join(", ");
613
- }
614
- var RESIZE_THRESHOLD = 2 * 1024 * 1024;
615
- function isImageFile(file) {
616
- if (file.type.startsWith("image/")) {
617
- return true;
618
- }
619
- const imageExtensions = /\.(jpg|jpeg|png|gif|webp|svg|bmp|ico|avif|heic|heif|tiff|tif)$/i;
620
- return imageExtensions.test(file.name);
621
- }
622
- async function createResizedPreview(file, maxDimension = 200) {
623
- return new Promise((resolve, reject) => {
624
- const img = new window.Image();
625
- const objectUrl = URL.createObjectURL(file);
626
- img.onload = () => {
627
- URL.revokeObjectURL(objectUrl);
628
- const scale = Math.min(
629
- maxDimension / img.width,
630
- maxDimension / img.height,
631
- 1
632
- // Don't upscale
633
- );
634
- const width = Math.round(img.width * scale);
635
- const height = Math.round(img.height * scale);
636
- const canvas = document.createElement("canvas");
637
- canvas.width = width;
638
- canvas.height = height;
639
- const ctx = canvas.getContext("2d");
640
- if (!ctx) {
641
- reject(new Error("Canvas context unavailable"));
642
- return;
643
- }
644
- ctx.drawImage(img, 0, 0, width, height);
645
- canvas.toBlob(
646
- (blob) => {
647
- if (blob) {
648
- resolve(URL.createObjectURL(blob));
649
- } else {
650
- reject(new Error("Failed to create blob"));
651
- }
652
- },
653
- "image/jpeg",
654
- 0.8
655
- // Quality for JPEG compression
656
- );
657
- };
658
- img.onerror = () => {
659
- URL.revokeObjectURL(objectUrl);
660
- reject(new Error("Failed to load image"));
661
- };
662
- img.src = objectUrl;
663
- });
664
- }
665
- async function generatePreview(file, maxDimension = 200) {
666
- if (file.size > RESIZE_THRESHOLD) {
667
- return createResizedPreview(file, maxDimension);
668
- }
669
- return URL.createObjectURL(file);
670
- }
671
- function useFilePreview(file, options = {}) {
672
- const { enabled = true, maxBytes = 10 * 1024 * 1024, maxDimension = 200 } = options;
673
- const [preview, setPreview] = react.useState(null);
674
- const [isLoading, setIsLoading] = react.useState(false);
675
- const [error, setError] = react.useState(null);
676
- const isImage = isImageFile(file);
677
- react.useEffect(() => {
678
- if (!enabled || !isImage) {
679
- setPreview(null);
680
- setIsLoading(false);
681
- setError(null);
682
- return;
683
- }
684
- if (file.size > maxBytes) {
685
- setPreview(null);
686
- setIsLoading(false);
687
- setError("File too large for preview");
688
- return;
689
- }
690
- let isActive = true;
691
- let objectUrl = null;
692
- const generatePreviewAsync = async () => {
693
- setIsLoading(true);
694
- setError(null);
695
- try {
696
- objectUrl = await generatePreview(file, maxDimension);
697
- if (isActive) {
698
- setPreview(objectUrl);
699
- setIsLoading(false);
700
- } else {
701
- URL.revokeObjectURL(objectUrl);
702
- }
703
- } catch (err) {
704
- if (isActive) {
705
- setError(err instanceof Error ? err.message : "Failed to generate preview");
706
- setIsLoading(false);
707
- setPreview(null);
708
- }
709
- }
710
- };
711
- generatePreviewAsync();
712
- return () => {
713
- isActive = false;
714
- if (objectUrl) {
715
- URL.revokeObjectURL(objectUrl);
716
- }
717
- setPreview((prev) => {
718
- if (prev) {
719
- URL.revokeObjectURL(prev);
720
- }
721
- return null;
722
- });
723
- };
724
- }, [file, enabled, maxBytes, maxDimension, isImage]);
725
- return { preview, isLoading, error, isImage };
726
- }
727
- function FilePreview({
728
- file,
729
- size = 64,
730
- maxBytes = 10 * 1024 * 1024,
731
- renderPreview,
732
- className
733
- }) {
734
- const { preview, isLoading, error, isImage } = useFilePreview(file, {
735
- enabled: true,
736
- maxBytes,
737
- maxDimension: size * 2
738
- // Generate at 2x for retina displays
739
- });
740
- const sizeStyles = {
741
- width: size,
742
- height: size,
743
- minWidth: size,
744
- minHeight: size
745
- };
746
- if (!isImage && renderPreview) {
747
- return /* @__PURE__ */ jsxRuntime.jsx(
748
- "div",
749
- {
750
- className: cn(
751
- "flex items-center justify-center rounded-md overflow-hidden",
752
- "bg-[var(--accent-background)]",
753
- className
754
- ),
755
- style: sizeStyles,
756
- children: renderPreview(file)
757
- }
758
- );
759
- }
760
- if (isLoading) {
761
- return /* @__PURE__ */ jsxRuntime.jsx(
762
- "div",
763
- {
764
- className: cn(
765
- "flex items-center justify-center rounded-md overflow-hidden",
766
- "bg-[var(--accent-background)]",
767
- className
768
- ),
769
- style: sizeStyles,
770
- "aria-busy": "true",
771
- "aria-label": `Loading preview for ${file.name}`,
772
- children: /* @__PURE__ */ jsxRuntime.jsx(
773
- lucideReact.Loader2,
774
- {
775
- className: "h-4 w-4 animate-spin text-[var(--menu-muted)]",
776
- "aria-hidden": "true"
777
- }
778
- )
779
- }
780
- );
781
- }
782
- if (isImage && preview && !error) {
783
- return /* @__PURE__ */ jsxRuntime.jsx(
784
- "div",
785
- {
786
- className: cn(
787
- "flex items-center justify-center rounded-md overflow-hidden",
788
- "bg-[var(--accent-background)]",
789
- className
790
- ),
791
- style: sizeStyles,
792
- children: /* @__PURE__ */ jsxRuntime.jsx(
793
- "img",
794
- {
795
- src: preview,
796
- alt: file.name,
797
- className: "w-full h-full object-cover",
798
- loading: "lazy"
799
- }
800
- )
801
- }
802
- );
803
- }
804
- const iconType = getFileIcon(file);
805
- const IconComponent = getIconForType(iconType);
806
- const iconSize = Math.max(16, Math.floor(size * 0.4));
807
- return /* @__PURE__ */ jsxRuntime.jsx(
808
- "div",
809
- {
810
- className: cn(
811
- "flex items-center justify-center rounded-md overflow-hidden",
812
- "bg-[var(--accent-background)]",
813
- className
814
- ),
815
- style: sizeStyles,
816
- "aria-label": error ? `Preview unavailable for ${file.name}` : void 0,
817
- children: /* @__PURE__ */ jsxRuntime.jsx(
818
- IconComponent,
819
- {
820
- className: "text-[var(--menu-muted)]",
821
- style: { width: iconSize, height: iconSize },
822
- "aria-hidden": "true"
823
- }
824
- )
825
- }
826
- );
827
- }
828
- function getIconForType(iconType) {
829
- switch (iconType) {
830
- case "image":
831
- return lucideReact.ImageIcon;
832
- case "video":
833
- return lucideReact.VideoIcon;
834
- case "audio":
835
- return lucideReact.AudioLines;
836
- default:
837
- return lucideReact.FileIcon;
838
- }
839
- }
840
- var fileProgressVariants = classVarianceAuthority.cva(
841
- ["flex", "flex-col", "gap-1", "w-full"],
842
- {
843
- variants: {
844
- size: {
845
- sm: "text-xs",
846
- default: "text-sm",
847
- lg: "text-base"
848
- }
849
- },
850
- defaultVariants: {
851
- size: "default"
852
- }
853
- }
854
- );
855
- var fileProgressTrackVariants = classVarianceAuthority.cva(
856
- ["rounded-full", "bg-[var(--accent-background)]", "overflow-hidden"],
857
- {
858
- variants: {
859
- size: {
860
- sm: "h-1.5",
861
- default: "h-2",
862
- lg: "h-3"
863
- }
864
- },
865
- defaultVariants: {
866
- size: "default"
867
- }
868
- }
869
- );
870
- var fileProgressBarVariants = classVarianceAuthority.cva(
871
- ["h-full", "rounded-full", "transition-all", "duration-300"],
872
- {
873
- variants: {
874
- status: {
875
- pending: [
876
- "bg-gradient-to-r",
877
- "from-[var(--menu-muted)]",
878
- "via-[var(--accent-background)]",
879
- "to-[var(--menu-muted)]",
880
- "bg-[length:200%_100%]",
881
- "animate-progress-shimmer"
882
- ],
883
- uploading: "bg-[var(--primary)]",
884
- complete: "bg-[var(--success)]",
885
- error: "bg-[var(--destructive)]"
886
- }
887
- },
888
- defaultVariants: {
889
- status: "pending"
890
- }
891
- }
892
- );
893
- var fileProgressHeaderVariants = classVarianceAuthority.cva(
894
- ["flex", "items-center", "justify-between", "gap-2"],
895
- {
896
- variants: {
897
- size: {
898
- sm: "text-xs",
899
- default: "text-sm",
900
- lg: "text-base"
901
- }
902
- },
903
- defaultVariants: {
904
- size: "default"
905
- }
906
- }
907
- );
908
- var fileProgressErrorVariants = classVarianceAuthority.cva(
909
- [
910
- "flex",
911
- "items-center",
912
- "justify-between",
913
- "gap-2",
914
- "mt-1",
915
- "text-[var(--destructive)]"
916
- ],
917
- {
918
- variants: {
919
- size: {
920
- sm: "text-xs",
921
- default: "text-sm",
922
- lg: "text-base"
923
- }
924
- },
925
- defaultVariants: {
926
- size: "default"
927
- }
928
- }
929
- );
930
- var fileProgressRetryVariants = classVarianceAuthority.cva(
931
- [
932
- "underline",
933
- "hover:no-underline",
934
- "min-h-[44px]",
935
- "min-w-[44px]",
936
- "inline-flex",
937
- "items-center",
938
- "justify-center",
939
- // Negative margin to visually appear smaller while maintaining touch target
940
- "-mr-3",
941
- "-my-2",
942
- // Focus styling
943
- "focus-visible:outline-none",
944
- "focus-visible:ring-2",
945
- "focus-visible:ring-[var(--ring)]",
946
- "focus-visible:ring-offset-2",
947
- "rounded"
948
- ],
949
- {
950
- variants: {
951
- size: {
952
- sm: "text-xs",
953
- default: "text-sm",
954
- lg: "text-base"
955
- }
956
- },
957
- defaultVariants: {
958
- size: "default"
959
- }
960
- }
961
- );
962
- function getStatusText(status, progress) {
963
- switch (status) {
964
- case "pending":
965
- return "Waiting...";
966
- case "uploading":
967
- return `${progress}%`;
968
- case "complete":
969
- return "Complete";
970
- case "error":
971
- return "Failed";
972
- }
973
- }
974
- function FileProgress({
975
- file,
976
- progress,
977
- status,
978
- error,
979
- onRetry,
980
- size = "default",
981
- className
982
- }) {
983
- const isIndeterminate = status === "pending";
984
- const errorId = `progress-error-${file.name.replace(/[^a-zA-Z0-9]/g, "-")}`;
985
- const statusText = getStatusText(status, progress);
986
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(fileProgressVariants({ size }), className), children: [
987
- /* @__PURE__ */ jsxRuntime.jsx(
988
- reactAriaComponents.ProgressBar,
989
- {
990
- "aria-label": file.name,
991
- value: isIndeterminate ? void 0 : progress,
992
- isIndeterminate,
993
- "aria-describedby": status === "error" && error ? errorId : void 0,
994
- children: ({ percentage, valueText }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
995
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fileProgressHeaderVariants({ size }), children: [
996
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", title: file.name, children: truncateFileName(file.name, 30) }),
997
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--menu-muted)] flex-shrink-0", children: status === "error" ? "Failed" : valueText ?? statusText })
998
- ] }),
999
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: fileProgressTrackVariants({ size }), children: /* @__PURE__ */ jsxRuntime.jsx(
1000
- "div",
1001
- {
1002
- className: fileProgressBarVariants({ status }),
1003
- style: {
1004
- width: isIndeterminate ? "100%" : `${percentage ?? 0}%`
1005
- }
1006
- }
1007
- ) })
1008
- ] })
1009
- }
1010
- ),
1011
- status === "error" && error && /* @__PURE__ */ jsxRuntime.jsxs(
1012
- "div",
1013
- {
1014
- id: errorId,
1015
- className: fileProgressErrorVariants({ size }),
1016
- children: [
1017
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: error }),
1018
- onRetry && /* @__PURE__ */ jsxRuntime.jsx(
1019
- reactAriaComponents.Button,
1020
- {
1021
- onPress: onRetry,
1022
- className: fileProgressRetryVariants({ size }),
1023
- children: "Retry"
1024
- }
1025
- )
1026
- ]
1027
- }
1028
- ),
1029
- /* @__PURE__ */ jsxRuntime.jsxs(
1030
- "div",
1031
- {
1032
- "aria-live": "polite",
1033
- "aria-atomic": "true",
1034
- className: "sr-only",
1035
- children: [
1036
- status === "complete" && `${file.name} upload complete`,
1037
- status === "error" && `${file.name} upload failed${error ? `: ${error}` : ""}`
1038
- ]
1039
- }
1040
- )
1041
- ] });
1042
- }
1043
- FileProgress.displayName = "FileProgress";
1044
- var FileField = react.forwardRef(
1045
- function FileField2({
1046
- // Required
1047
- label,
1048
- // File selection
1049
- acceptedFileTypes,
1050
- allowsMultiple = false,
1051
- // Constraints
1052
- maxFileSize,
1053
- maxFiles,
1054
- // Display
1055
- description,
1056
- errorMessage,
1057
- successMessage,
1058
- triggerText,
1059
- // States
1060
- isRequired,
1061
- isDisabled,
1062
- isInvalid,
1063
- isValid,
1064
- // Variants
1065
- size = "default",
1066
- // Form integration
1067
- name,
1068
- id,
1069
- className,
1070
- // Value (controlled)
1071
- value = [],
1072
- // Events
1073
- onChange,
1074
- validate,
1075
- // Phase 1: Image Previews
1076
- showPreviews = false,
1077
- previewSize = 64,
1078
- maxPreviewBytes = 10 * 1024 * 1024,
1079
- renderPreview,
1080
- // Phase 1: Upload Progress (will be used later)
1081
- showProgress = false,
1082
- uploadProgress,
1083
- uploadStatus,
1084
- uploadErrors,
1085
- onRetry,
1086
- // Standard
1087
- "data-testid": dataTestId,
1088
- "aria-label": _ariaLabel,
1089
- "aria-labelledby": _ariaLabelledBy,
1090
- "aria-describedby": ariaDescribedBy,
1091
- ...props
1092
- }, ref) {
1093
- const generatedId = react.useId();
1094
- const fieldId = id ?? generatedId;
1095
- const labelId = `${fieldId}-label`;
1096
- const descriptionId = `${fieldId}-description`;
1097
- const errorId = `${fieldId}-error`;
1098
- const [isDragOver, setIsDragOver] = react.useState(false);
1099
- const [internalError, setInternalError] = react.useState(null);
1100
- const dragCounterRef = react.useRef(0);
1101
- const displayError = errorMessage ?? internalError;
1102
- const hasError = isInvalid || !!displayError;
1103
- const describedByParts = [];
1104
- if (ariaDescribedBy) describedByParts.push(ariaDescribedBy);
1105
- if (description) describedByParts.push(descriptionId);
1106
- if (displayError) describedByParts.push(errorId);
1107
- const describedBy = describedByParts.length > 0 ? describedByParts.join(" ") : void 0;
1108
- const validateFiles = react.useCallback(
1109
- (files, existingFiles = []) => {
1110
- const validFiles = [];
1111
- const errors = [];
1112
- for (const file of files) {
1113
- if (acceptedFileTypes && !isFileTypeAccepted(file, acceptedFileTypes)) {
1114
- errors.push(`"${file.name}" has an invalid file type`);
1115
- continue;
1116
- }
1117
- if (maxFileSize && file.size > maxFileSize) {
1118
- errors.push(
1119
- `"${file.name}" exceeds the maximum size of ${formatFileSize(maxFileSize)}`
1120
- );
1121
- continue;
1122
- }
1123
- validFiles.push(file);
1124
- }
1125
- if (maxFiles && allowsMultiple) {
1126
- const combined = deduplicateFiles(existingFiles, validFiles);
1127
- if (combined.length > maxFiles) {
1128
- errors.push(`Maximum ${maxFiles} files allowed`);
1129
- return { valid: [], errors };
1130
- }
1131
- }
1132
- return { valid: validFiles, errors };
1133
- },
1134
- [acceptedFileTypes, maxFileSize, maxFiles, allowsMultiple]
1135
- );
1136
- const processFiles = react.useCallback(
1137
- (fileList) => {
1138
- if (!fileList || fileList.length === 0) return;
1139
- setInternalError(null);
1140
- const newFiles = Array.from(fileList);
1141
- const existingFiles = allowsMultiple ? value : [];
1142
- const { valid, errors } = validateFiles(newFiles, existingFiles);
1143
- if (errors.length > 0) {
1144
- setInternalError(errors[0] ?? "Invalid file");
1145
- return;
1146
- }
1147
- if (validate && valid.length > 0) {
1148
- const customError = validate(
1149
- allowsMultiple ? deduplicateFiles(existingFiles, valid) : valid
1150
- );
1151
- if (customError) {
1152
- setInternalError(customError);
1153
- return;
1154
- }
1155
- }
1156
- let finalFiles;
1157
- if (allowsMultiple) {
1158
- finalFiles = deduplicateFiles(existingFiles, valid);
1159
- } else {
1160
- finalFiles = valid.slice(0, 1);
1161
- }
1162
- onChange?.(finalFiles);
1163
- },
1164
- [allowsMultiple, value, validateFiles, validate, onChange]
1165
- );
1166
- const handleSelect = react.useCallback(
1167
- (fileList) => {
1168
- processFiles(fileList);
1169
- },
1170
- [processFiles]
1171
- );
1172
- const handleRemove = react.useCallback(
1173
- (fileToRemove) => {
1174
- const newFiles = value.filter((f) => f !== fileToRemove);
1175
- onChange?.(newFiles);
1176
- },
1177
- [value, onChange]
1178
- );
1179
- const handleClearAll = react.useCallback(() => {
1180
- onChange?.([]);
1181
- }, [onChange]);
1182
- const handleDragEnter = react.useCallback(
1183
- (e) => {
1184
- e.preventDefault();
1185
- e.stopPropagation();
1186
- if (isDisabled) return;
1187
- dragCounterRef.current++;
1188
- setIsDragOver(true);
1189
- },
1190
- [isDisabled]
1191
- );
1192
- const handleDragOver = react.useCallback(
1193
- (e) => {
1194
- e.preventDefault();
1195
- e.stopPropagation();
1196
- },
1197
- []
1198
- );
1199
- const handleDragLeave = react.useCallback(
1200
- (e) => {
1201
- e.preventDefault();
1202
- e.stopPropagation();
1203
- dragCounterRef.current--;
1204
- if (dragCounterRef.current === 0) {
1205
- setIsDragOver(false);
1206
- }
1207
- },
1208
- []
1209
- );
1210
- const handleDrop = react.useCallback(
1211
- (e) => {
1212
- e.preventDefault();
1213
- e.stopPropagation();
1214
- dragCounterRef.current = 0;
1215
- setIsDragOver(false);
1216
- if (isDisabled) return;
1217
- const files = e.dataTransfer?.files;
1218
- processFiles(files ?? null);
1219
- },
1220
- [isDisabled, processFiles]
1221
- );
1222
- const getIconComponent = (file) => {
1223
- const iconType = getFileIcon(file);
1224
- switch (iconType) {
1225
- case "image":
1226
- return lucideReact.ImageIcon;
1227
- case "video":
1228
- return lucideReact.VideoIcon;
1229
- case "audio":
1230
- return lucideReact.AudioLines;
1231
- default:
1232
- return lucideReact.FileIcon;
1233
- }
1234
- };
1235
- const acceptString = acceptedFileTypes?.join(",");
1236
- return /* @__PURE__ */ jsxRuntime.jsxs(
1237
- "div",
1238
- {
1239
- ref,
1240
- id: fieldId,
1241
- className: cn(fileFieldContainerVariants({ size }), className),
1242
- "data-testid": dataTestId ?? "file-field",
1243
- ...props,
1244
- children: [
1245
- /* @__PURE__ */ jsxRuntime.jsx(
1246
- "label",
1247
- {
1248
- id: labelId,
1249
- className: fileFieldLabelVariants({ size, isRequired }),
1250
- children: label
1251
- }
1252
- ),
1253
- /* @__PURE__ */ jsxRuntime.jsxs(
1254
- "div",
1255
- {
1256
- role: "group",
1257
- "data-testid": `${dataTestId ?? "file-field"}-dropzone`,
1258
- className: cn(
1259
- "drop-zone",
1260
- // Added for test selectors
1261
- fileFieldDropZoneVariants({
1262
- size,
1263
- isDragOver,
1264
- isInvalid: hasError,
1265
- isDisabled
1266
- })
1267
- ),
1268
- onDragEnter: handleDragEnter,
1269
- onDragOver: handleDragOver,
1270
- onDragLeave: handleDragLeave,
1271
- onDrop: handleDrop,
1272
- "aria-labelledby": labelId,
1273
- "aria-describedby": describedBy,
1274
- "aria-disabled": isDisabled || void 0,
1275
- children: [
1276
- /* @__PURE__ */ jsxRuntime.jsx(
1277
- reactAriaComponents.FileTrigger,
1278
- {
1279
- acceptedFileTypes,
1280
- allowsMultiple,
1281
- onSelect: handleSelect,
1282
- children: /* @__PURE__ */ jsxRuntime.jsxs(
1283
- Button,
1284
- {
1285
- variant: "outline",
1286
- isDisabled,
1287
- buttonVisualClassName: fileFieldTriggerVariants({ size }),
1288
- children: [
1289
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { className: "h-4 w-4", "aria-hidden": "true" }),
1290
- isDragOver ? "Drop files here" : triggerText ?? (allowsMultiple ? "Choose files" : "Choose file")
1291
- ]
1292
- }
1293
- )
1294
- }
1295
- ),
1296
- name && /* @__PURE__ */ jsxRuntime.jsx(
1297
- "input",
1298
- {
1299
- type: "file",
1300
- name,
1301
- accept: acceptString,
1302
- multiple: allowsMultiple,
1303
- disabled: isDisabled,
1304
- className: "sr-only",
1305
- tabIndex: -1,
1306
- "aria-hidden": "true"
1307
- }
1308
- )
1309
- ]
1310
- }
1311
- ),
1312
- description && /* @__PURE__ */ jsxRuntime.jsx(
1313
- "p",
1314
- {
1315
- id: descriptionId,
1316
- className: fileFieldDescriptionVariants({ size }),
1317
- children: description
1318
- }
1319
- ),
1320
- value.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fileFieldListVariants({ size }), children: [
1321
- value.length >= 2 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: fileFieldListHeaderVariants({ size }), children: [
1322
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[var(--menu-muted)]", children: [
1323
- value.length,
1324
- " files selected"
1325
- ] }),
1326
- /* @__PURE__ */ jsxRuntime.jsx(
1327
- Button,
1328
- {
1329
- variant: "link",
1330
- visualSize: "sm",
1331
- onPress: handleClearAll,
1332
- buttonVisualClassName: cn(
1333
- "text-[var(--menu-muted)] hover:text-[var(--destructive)]",
1334
- "underline-offset-4 hover:underline"
1335
- ),
1336
- "aria-label": "Clear all files",
1337
- children: "Clear all"
1338
- }
1339
- )
1340
- ] }),
1341
- /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2", children: value.map((file, index) => {
1342
- const IconComponent = getIconComponent(file);
1343
- const effectivePreviewSize = size === "sm" ? Math.min(previewSize, 40) : size === "lg" ? Math.min(previewSize, 80) : Math.min(previewSize, 48);
1344
- const fileStatus = uploadStatus?.[index];
1345
- const fileProgress = uploadProgress?.[index] ?? 0;
1346
- const fileError = uploadErrors?.get(index);
1347
- const showProgressForFile = showProgress && fileStatus !== void 0;
1348
- return /* @__PURE__ */ jsxRuntime.jsx(
1349
- "li",
1350
- {
1351
- className: showProgressForFile ? "p-3" : fileFieldItemVariants({ size }),
1352
- children: showProgressForFile ? /* @__PURE__ */ jsxRuntime.jsx(
1353
- FileProgress,
1354
- {
1355
- file,
1356
- progress: fileProgress,
1357
- status: fileStatus,
1358
- error: fileError,
1359
- onRetry: onRetry ? () => onRetry(index) : void 0,
1360
- size
1361
- }
1362
- ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1363
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
1364
- showPreviews ? /* @__PURE__ */ jsxRuntime.jsx(
1365
- FilePreview,
1366
- {
1367
- file,
1368
- size: effectivePreviewSize,
1369
- maxBytes: maxPreviewBytes,
1370
- renderPreview,
1371
- className: "flex-shrink-0"
1372
- }
1373
- ) : /* @__PURE__ */ jsxRuntime.jsx(
1374
- IconComponent,
1375
- {
1376
- className: "h-4 w-4 flex-shrink-0 text-[var(--menu-muted)]",
1377
- "aria-hidden": "true"
1378
- }
1379
- ),
1380
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", title: file.name, children: truncateFileName(file.name, 30) }),
1381
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--menu-muted)] flex-shrink-0", children: formatFileSize(file.size) })
1382
- ] }),
1383
- /* @__PURE__ */ jsxRuntime.jsx(
1384
- Button,
1385
- {
1386
- variant: "ghost",
1387
- visualSize: "icon",
1388
- onPress: () => handleRemove(file),
1389
- buttonVisualClassName: fileFieldRemoveButtonVariants({ size }),
1390
- "aria-label": `Remove ${file.name}`,
1391
- isDisabled,
1392
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4", "aria-hidden": "true" })
1393
- }
1394
- )
1395
- ] })
1396
- },
1397
- `${file.name}-${index}`
1398
- );
1399
- }) })
1400
- ] }),
1401
- displayError && /* @__PURE__ */ jsxRuntime.jsx(
1402
- "p",
1403
- {
1404
- id: errorId,
1405
- role: "alert",
1406
- className: fileFieldErrorVariants({ size }),
1407
- children: displayError
1408
- }
1409
- ),
1410
- !displayError && isValid && successMessage && /* @__PURE__ */ jsxRuntime.jsx("p", { className: fileFieldSuccessVariants({ size }), children: successMessage })
1411
- ]
1412
- }
1413
- );
1414
- }
1415
- );
1416
- FileField.displayName = "FileField";
1417
- var BaseComponentPropsSchema = zod.z.object({
1418
- // Styling
1419
- className: zod.z.string().optional(),
1420
- // React
1421
- children: zod.z.any().optional(),
1422
- // ReactNode not directly supported by Zod
1423
- id: zod.z.string().optional(),
1424
- // Accessibility (WCAG 2.2 AA requirements)
1425
- "aria-label": zod.z.string().optional(),
1426
- "aria-labelledby": zod.z.string().optional(),
1427
- "aria-describedby": zod.z.string().optional(),
1428
- "aria-live": zod.z.enum(["off", "polite", "assertive"]).optional(),
1429
- "aria-hidden": zod.z.boolean().optional(),
1430
- // Testing & Development
1431
- "data-testid": zod.z.string().optional()
1432
- });
1433
-
1434
- // src/elements/FileField/FileField.types.ts
1435
- var FileFieldPropsSchema = BaseComponentPropsSchema.extend({
1436
- // Required
1437
- /** Label text for the file field (required for accessibility) */
1438
- label: zod.z.string(),
1439
- // File selection
1440
- /**
1441
- * Array of accepted file types (MIME types or extensions)
1442
- * @example ['application/pdf', 'image/*', '.docx']
1443
- */
1444
- acceptedFileTypes: zod.z.array(zod.z.string()).optional(),
1445
- /** Allow selecting multiple files */
1446
- allowsMultiple: zod.z.boolean().default(false),
1447
- // Constraints
1448
- /** Maximum file size in bytes */
1449
- maxFileSize: zod.z.number().optional(),
1450
- /** Maximum number of files (only applies when allowsMultiple is true) */
1451
- maxFiles: zod.z.number().optional(),
1452
- // Display
1453
- /** Description text shown below the drop zone */
1454
- description: zod.z.string().optional(),
1455
- /** Error message from external validation */
1456
- errorMessage: zod.z.string().optional(),
1457
- /** Success message when files are valid */
1458
- successMessage: zod.z.string().optional(),
1459
- /** Custom text for the trigger button */
1460
- triggerText: zod.z.string().optional(),
1461
- // States
1462
- /** Mark field as required */
1463
- isRequired: zod.z.boolean().optional(),
1464
- /** Disable the field */
1465
- isDisabled: zod.z.boolean().optional(),
1466
- /** Show invalid state styling */
1467
- isInvalid: zod.z.boolean().optional(),
1468
- /** Show valid state styling */
1469
- isValid: zod.z.boolean().optional(),
1470
- // Variants
1471
- /** Size variant */
1472
- size: zod.z.enum(["sm", "default", "lg"]).default("default"),
1473
- // Form integration
1474
- /** Name attribute for form association */
1475
- name: zod.z.string().optional(),
1476
- // === Phase 1: Image Previews ===
1477
- /** Enable image thumbnail previews (default: false) */
1478
- showPreviews: zod.z.boolean().default(false),
1479
- /** Maximum preview dimension in pixels (default: 64) */
1480
- previewSize: zod.z.number().min(16).max(256).default(64),
1481
- /** Maximum file size for preview generation in bytes (default: 10MB) */
1482
- maxPreviewBytes: zod.z.number().default(10 * 1024 * 1024),
1483
- // === Phase 1: Upload Progress ===
1484
- /** Enable upload progress display (default: false) */
1485
- showProgress: zod.z.boolean().default(false),
1486
- /** Progress values per file (0-100), indexed parallel to files array */
1487
- uploadProgress: zod.z.array(zod.z.number().min(0).max(100)).optional(),
1488
- /** Upload status per file, indexed parallel to files array */
1489
- uploadStatus: zod.z.array(zod.z.enum(["pending", "uploading", "complete", "error"])).optional()
1490
- }).refine(
1491
- (data) => !(data.successMessage && data.errorMessage),
1492
- {
1493
- message: "Cannot provide both successMessage and errorMessage. Use one based on validation state.",
1494
- path: ["successMessage"]
1495
- }
1496
- ).refine(
1497
- (data) => {
1498
- if (typeof process !== "undefined" && process.env.NODE_ENV === "development") {
1499
- if (data.isValid && data.isInvalid) {
1500
- console.error(
1501
- "[FileField] Both isValid and isInvalid are true. isInvalid takes precedence."
1502
- );
1503
- }
1504
- }
1505
- return true;
1506
- }
1507
- );
1508
-
1509
- exports.FileField = FileField;
1510
- exports.FileFieldPropsSchema = FileFieldPropsSchema;
1511
- exports.FilePreview = FilePreview;
1512
- exports.FileProgress = FileProgress;
1513
- exports.RESIZE_THRESHOLD = RESIZE_THRESHOLD;
1514
- exports.createResizedPreview = createResizedPreview;
1515
- exports.deduplicateFiles = deduplicateFiles;
1516
- exports.fileFieldContainerVariants = fileFieldContainerVariants;
1517
- exports.fileFieldDescriptionVariants = fileFieldDescriptionVariants;
1518
- exports.fileFieldDropZoneVariants = fileFieldDropZoneVariants;
1519
- exports.fileFieldErrorVariants = fileFieldErrorVariants;
1520
- exports.fileFieldItemVariants = fileFieldItemVariants;
1521
- exports.fileFieldLabelVariants = fileFieldLabelVariants;
1522
- exports.fileFieldListVariants = fileFieldListVariants;
1523
- exports.fileFieldRemoveButtonVariants = fileFieldRemoveButtonVariants;
1524
- exports.fileFieldSuccessVariants = fileFieldSuccessVariants;
1525
- exports.fileFieldTriggerVariants = fileFieldTriggerVariants;
1526
- exports.fileProgressBarVariants = fileProgressBarVariants;
1527
- exports.fileProgressErrorVariants = fileProgressErrorVariants;
1528
- exports.fileProgressHeaderVariants = fileProgressHeaderVariants;
1529
- exports.fileProgressRetryVariants = fileProgressRetryVariants;
1530
- exports.fileProgressTrackVariants = fileProgressTrackVariants;
1531
- exports.fileProgressVariants = fileProgressVariants;
1532
- exports.formatAcceptedTypes = formatAcceptedTypes;
1533
- exports.formatFileSize = formatFileSize;
1534
- exports.generatePreview = generatePreview;
1535
- exports.getFileIcon = getFileIcon;
1536
- exports.isFileTypeAccepted = isFileTypeAccepted;
1537
- exports.isImageFile = isImageFile;
1538
- exports.truncateFileName = truncateFileName;
1539
- exports.useFilePreview = useFilePreview;
1540
- //# sourceMappingURL=index.js.map
2
+ 'use strict';var react=require('react'),reactAriaComponents=require('react-aria-components'),lucideReact=require('lucide-react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),classVarianceAuthority=require('class-variance-authority'),jsxRuntime=require('react/jsx-runtime'),zod=require('zod');function b(...e){return tailwindMerge.twMerge(clsx.clsx(e))}var pe=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}}),me=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 ge="data-[pressed]:scale-[0.97]";var ve="data-[hovered]:shadow-md";var te="hc:data-[hovered]:outline hc:data-[hovered]:outline-2 hc:data-[hovered]:outline-foreground",re="hc:data-[pressed]:outline hc:data-[pressed]:outline-2 hc:data-[pressed]:outline-offset-1 hc:data-[pressed]:outline-foreground";var dt=react.createContext(null);dt.displayName="ButtonGroupContext";function ut(){return react.useContext(dt)}var ct=react.createContext(null);ct.displayName="ButtonGroupItemContext";function ft(){return react.useContext(ct)}classVarianceAuthority.cva("inline-flex items-center gap-0",{variants:{orientation:{horizontal:"flex-row",vertical:"flex-col w-full"}},defaultVariants:{orientation:"horizontal"}});var pt=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 B=react.memo(react.forwardRef(({className:e,buttonVisualClassName:r,variant:t,size:i,visualSize:a,fullWidth:o,loading:d=false,loadingText:m="Loading...",shortcut:u,children:c,isDisabled:g,paywall:s=false,paywallRedirect:E,paywallDescription:N,onPress:f,...F},le)=>{let Y=react.useId(),v=ut(),T=ft(),U=t??v?.variant??"default",de=i??v?.size,z=g??v?.isDisabled??false,X=v?.orientation==="vertical",q=o||X,ue=T?pt({orientation:v?.orientation??"horizontal",position:T.position}):"",H=a??de??"default";return process.env.NODE_ENV!=="production"&&(H==="dot"||H==="icon")&&!F["aria-label"]&&!c&&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:le,isDisabled:z||d||void 0,"aria-disabled":s?true:void 0,"aria-describedby":s?Y:void 0,onPress:P=>{if(s){E&&window.open(E,"_blank","noopener,noreferrer");return}f?.(P);},className:b(pe({fullWidth:q,inVerticalGroup:X}),e),...F,children:P=>jsxRuntime.jsxs("span",{className:b(me({variant:U,visualSize:H,paywall:s,fullWidth:q}),ue,r,ge,ve,te,re),"data-pressed":P.isPressed||void 0,children:[d&&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:m})]}),!d&&c,s&&jsxRuntime.jsx(lucideReact.Zap,{"data-testid":"zap-icon","aria-hidden":"true",className:"ml-1"}),s&&jsxRuntime.jsxs("span",{id:Y,className:"sr-only",children:["Premium feature: ",N||"Upgrade required to access this feature"]}),P.isFocusVisible&&u&&jsxRuntime.jsx("kbd",{className:"ml-auto hidden text-xs opacity-60 lg:inline",children:u}),P.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"})]})})}));B.displayName="Button";var Se=["focus-within:outline-none","focus-within:ring-2","focus-within:ring-[var(--ring)]","focus-within:ring-offset-2"],Ee=["focus-visible:outline-none","focus-visible:ring-2","focus-visible:ring-[var(--ring)]","focus-visible:ring-offset-2"];var Fe=["disabled:pointer-events-none","disabled:opacity-50"];var L={sm:"text-xs",default:"text-sm",lg:"text-base"},ie={sm:"text-sm",default:"text-base",lg:"text-lg"},ae=["min-h-[44px]","min-w-[44px]"];var Ie=["flex","items-center","gap-1.5","text-[var(--destructive)]"],Ve=["flex","items-center","gap-1.5","text-[var(--success)]"],ye=["text-[var(--menu-muted)]"],Ne=["font-medium","text-[var(--content-foreground)]"];var ne=["transition-colors","duration-200"];function A(...e){return e.flatMap(r=>Array.isArray(r)?[...r]:[r])}var Te=classVarianceAuthority.cva("flex flex-col gap-1.5 w-full",{variants:{size:ie},defaultVariants:{size:"default"}}),_e=classVarianceAuthority.cva(A("flex flex-col items-center justify-center rounded-md border-2 border-dashed","bg-[var(--content-background)] text-[var(--content-foreground)]",ne,Se),{variants:{size:{sm:"min-h-[100px] p-4 gap-2",default:"min-h-[140px] p-6 gap-3",lg:"min-h-[180px] p-8 gap-4"},isDragOver:{true:"border-[var(--primary)] bg-[var(--primary)]/5",false:"border-[var(--input)] hover:border-[var(--primary)]/50"},isInvalid:{true:"border-[var(--destructive)] bg-[var(--destructive)]/5",false:""},isDisabled:{true:"opacity-50 cursor-not-allowed pointer-events-none",false:"cursor-pointer"}},compoundVariants:[{isInvalid:true,isDragOver:true,className:"border-[var(--destructive)] bg-[var(--destructive)]/5"}],defaultVariants:{size:"default",isDragOver:false,isInvalid:false,isDisabled:false}}),Pe=classVarianceAuthority.cva(A("inline-flex items-center justify-center gap-2 rounded-md font-medium",ne,ae,Ee,Fe),{variants:{size:{sm:"px-3 py-2 text-xs",default:"px-4 py-2 text-sm",lg:"px-6 py-3 text-base"},variant:{default:"bg-[var(--primary)] text-[var(--primary-foreground)] hover:bg-[var(--primary)]/90",outline:"border border-[var(--input)] bg-transparent hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)]"}},defaultVariants:{size:"default",variant:"default"}}),Re=classVarianceAuthority.cva("flex flex-col gap-2 mt-3",{variants:{size:{sm:"gap-1.5",default:"gap-2",lg:"gap-3"}},defaultVariants:{size:"default"}}),mt=classVarianceAuthority.cva("flex items-center justify-between mb-1",{variants:{size:L},defaultVariants:{size:"default"}}),Ae=classVarianceAuthority.cva("flex items-center justify-between gap-3 bg-[var(--accent-background)] rounded-md border border-[var(--border)]",{variants:{size:{sm:"px-2 py-1.5 text-xs",default:"px-3 py-2 text-sm",lg:"px-4 py-3 text-base"}},defaultVariants:{size:"default"}}),we=classVarianceAuthority.cva(A("inline-flex items-center justify-center rounded-full",ae,"-mr-2 -my-1","text-[var(--menu-muted)] hover:text-[var(--destructive)] hover:bg-[var(--destructive)]/10","transition-colors","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]"),{variants:{size:{sm:"",default:"",lg:""}},defaultVariants:{size:"default"}}),Ce=classVarianceAuthority.cva(A(Ie,"font-medium"),{variants:{size:L},defaultVariants:{size:"default"}}),Oe=classVarianceAuthority.cva(A(Ve,"font-medium"),{variants:{size:L},defaultVariants:{size:"default"}}),Be=classVarianceAuthority.cva(ye,{variants:{size:L},defaultVariants:{size:"default"}}),Le=classVarianceAuthority.cva(Ne,{variants:{size:ie,isRequired:{true:"after:content-['*'] after:ml-0.5 after:text-[var(--destructive)]",false:""}},defaultVariants:{size:"default",isRequired:false}});function oe(e){if(e===0)return "0 B";let r=1024,t=["B","KB","MB","GB"],i=Math.floor(Math.log(e)/Math.log(r)),a=parseFloat((e/Math.pow(r,i)).toFixed(1));return `${a%1===0?a.toFixed(0):a.toFixed(1)} ${t[i]}`}function $(e,r=30){if(e.length<=r)return e;let t=e.lastIndexOf(".");if(t===-1)return `${e.slice(0,r-3)}...`;let i=e.slice(t),a=e.slice(0,t),o=r-i.length-3;return o<1?`...${i}`:`${a.slice(0,o)}...${i}`}function De(e,r){return !r||r.length===0?true:r.some(t=>{if(t.endsWith("/*")){let i=t.slice(0,-2);return e.type.startsWith(`${i}/`)}return t.includes("/")?e.type===t:t.startsWith(".")?e.name.toLowerCase().endsWith(t.toLowerCase()):false})}function j(e){return e.type.startsWith("image/")?"image":e.type.startsWith("video/")?"video":e.type.startsWith("audio/")?"audio":"file"}function W(e,r){let t=[...e];for(let i of r){let a=t.findIndex(o=>o.name===i.name);a>=0?t[a]=i:t.push(i);}return t}function jt(e){return !e||e.length===0?"any file":e.map(t=>t==="image/*"?"images":t==="video/*"?"videos":t==="audio/*"?"audio":t.startsWith(".")?t.slice(1).toUpperCase():t.includes("/")?(t.split("/")[1]??t).toUpperCase():t).join(", ")}var gt=2*1024*1024;function Ue(e){return e.type.startsWith("image/")?true:/\.(jpg|jpeg|png|gif|webp|svg|bmp|ico|avif|heic|heif|tiff|tif)$/i.test(e.name)}async function vt(e,r=200){return new Promise((t,i)=>{let a=new window.Image,o=URL.createObjectURL(e);a.onload=()=>{URL.revokeObjectURL(o);let d=Math.min(r/a.width,r/a.height,1),m=Math.round(a.width*d),u=Math.round(a.height*d),c=document.createElement("canvas");c.width=m,c.height=u;let g=c.getContext("2d");if(!g){i(new Error("Canvas context unavailable"));return}g.drawImage(a,0,0,m,u),c.toBlob(s=>{s?t(URL.createObjectURL(s)):i(new Error("Failed to create blob"));},"image/jpeg",.8);},a.onerror=()=>{URL.revokeObjectURL(o),i(new Error("Failed to load image"));},a.src=o;})}async function ze(e,r=200){return e.size>gt?vt(e,r):URL.createObjectURL(e)}function Ge(e,r={}){let{enabled:t=true,maxBytes:i=10*1024*1024,maxDimension:a=200}=r,[o,d]=react.useState(null),[m,u]=react.useState(false),[c,g]=react.useState(null),s=Ue(e);return react.useEffect(()=>{if(!t||!s){d(null),u(false),g(null);return}if(e.size>i){d(null),u(false),g("File too large for preview");return}let E=true,N=null;return (async()=>{u(true),g(null);try{N=await ze(e,a),E?(d(N),u(!1)):URL.revokeObjectURL(N);}catch(F){E&&(g(F instanceof Error?F.message:"Failed to generate preview"),u(false),d(null));}})(),()=>{E=false,N&&URL.revokeObjectURL(N),d(F=>(F&&URL.revokeObjectURL(F),null));}},[e,t,i,a,s]),{preview:o,isLoading:m,error:c,isImage:s}}function Me({file:e,size:r=64,maxBytes:t=10*1024*1024,renderPreview:i,className:a}){let{preview:o,isLoading:d,error:m,isImage:u}=Ge(e,{enabled:true,maxBytes:t,maxDimension:r*2}),c={width:r,height:r,minWidth:r,minHeight:r};if(!u&&i)return jsxRuntime.jsx("div",{className:b("flex items-center justify-center rounded-md overflow-hidden","bg-[var(--accent-background)]",a),style:c,children:i(e)});if(d)return jsxRuntime.jsx("div",{className:b("flex items-center justify-center rounded-md overflow-hidden","bg-[var(--accent-background)]",a),style:c,"aria-busy":"true","aria-label":`Loading preview for ${e.name}`,children:jsxRuntime.jsx(lucideReact.Loader2,{className:"h-4 w-4 animate-spin text-[var(--menu-muted)]","aria-hidden":"true"})});if(u&&o&&!m)return jsxRuntime.jsx("div",{className:b("flex items-center justify-center rounded-md overflow-hidden","bg-[var(--accent-background)]",a),style:c,children:jsxRuntime.jsx("img",{src:o,alt:e.name,className:"w-full h-full object-cover",loading:"lazy"})});let g=j(e),s=Kt(g),E=Math.max(16,Math.floor(r*.4));return jsxRuntime.jsx("div",{className:b("flex items-center justify-center rounded-md overflow-hidden","bg-[var(--accent-background)]",a),style:c,"aria-label":m?`Preview unavailable for ${e.name}`:void 0,children:jsxRuntime.jsx(s,{className:"text-[var(--menu-muted)]",style:{width:E,height:E},"aria-hidden":"true"})})}function Kt(e){switch(e){case "image":return lucideReact.ImageIcon;case "video":return lucideReact.VideoIcon;case "audio":return lucideReact.AudioLines;default:return lucideReact.FileIcon}}var ke=classVarianceAuthority.cva(["flex","flex-col","gap-1","w-full"],{variants:{size:{sm:"text-xs",default:"text-sm",lg:"text-base"}},defaultVariants:{size:"default"}}),$e=classVarianceAuthority.cva(["rounded-full","bg-[var(--accent-background)]","overflow-hidden"],{variants:{size:{sm:"h-1.5",default:"h-2",lg:"h-3"}},defaultVariants:{size:"default"}}),je=classVarianceAuthority.cva(["h-full","rounded-full","transition-all","duration-300"],{variants:{status:{pending:["bg-gradient-to-r","from-[var(--menu-muted)]","via-[var(--accent-background)]","to-[var(--menu-muted)]","bg-[length:200%_100%]","animate-progress-shimmer"],uploading:"bg-[var(--primary)]",complete:"bg-[var(--success)]",error:"bg-[var(--destructive)]"}},defaultVariants:{status:"pending"}}),We=classVarianceAuthority.cva(["flex","items-center","justify-between","gap-2"],{variants:{size:{sm:"text-xs",default:"text-sm",lg:"text-base"}},defaultVariants:{size:"default"}}),Ze=classVarianceAuthority.cva(["flex","items-center","justify-between","gap-2","mt-1","text-[var(--destructive)]"],{variants:{size:{sm:"text-xs",default:"text-sm",lg:"text-base"}},defaultVariants:{size:"default"}}),Ye=classVarianceAuthority.cva(["underline","hover:no-underline","min-h-[44px]","min-w-[44px]","inline-flex","items-center","justify-center","-mr-3","-my-2","focus-visible:outline-none","focus-visible:ring-2","focus-visible:ring-[var(--ring)]","focus-visible:ring-offset-2","rounded"],{variants:{size:{sm:"text-xs",default:"text-sm",lg:"text-base"}},defaultVariants:{size:"default"}});function tr(e,r){switch(e){case "pending":return "Waiting...";case "uploading":return `${r}%`;case "complete":return "Complete";case "error":return "Failed"}}function se({file:e,progress:r,status:t,error:i,onRetry:a,size:o="default",className:d}){let m=t==="pending",u=`progress-error-${e.name.replace(/[^a-zA-Z0-9]/g,"-")}`,c=tr(t,r);return jsxRuntime.jsxs("div",{className:b(ke({size:o}),d),children:[jsxRuntime.jsx(reactAriaComponents.ProgressBar,{"aria-label":e.name,value:m?void 0:r,isIndeterminate:m,"aria-describedby":t==="error"&&i?u:void 0,children:({percentage:g,valueText:s})=>jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs("div",{className:We({size:o}),children:[jsxRuntime.jsx("span",{className:"truncate",title:e.name,children:$(e.name,30)}),jsxRuntime.jsx("span",{className:"text-[var(--menu-muted)] flex-shrink-0",children:t==="error"?"Failed":s??c})]}),jsxRuntime.jsx("div",{className:$e({size:o}),children:jsxRuntime.jsx("div",{className:je({status:t}),style:{width:m?"100%":`${g??0}%`}})})]})}),t==="error"&&i&&jsxRuntime.jsxs("div",{id:u,className:Ze({size:o}),children:[jsxRuntime.jsx("span",{children:i}),a&&jsxRuntime.jsx(reactAriaComponents.Button,{onPress:a,className:Ye({size:o}),children:"Retry"})]}),jsxRuntime.jsxs("div",{"aria-live":"polite","aria-atomic":"true",className:"sr-only",children:[t==="complete"&&`${e.name} upload complete`,t==="error"&&`${e.name} upload failed${i?`: ${i}`:""}`]})]})}se.displayName="FileProgress";var bt=react.forwardRef(function({label:r,acceptedFileTypes:t,allowsMultiple:i=false,maxFileSize:a,maxFiles:o,description:d,errorMessage:m,successMessage:u,triggerText:c,isRequired:g,isDisabled:s,isInvalid:E,isValid:N,size:f="default",name:F,id:le,className:Y,value:v=[],onChange:T,validate:U,showPreviews:de=false,previewSize:z=64,maxPreviewBytes:X=10*1024*1024,renderPreview:q,showProgress:ue=false,uploadProgress:H,uploadStatus:Xe,uploadErrors:qe,onRetry:P,"data-testid":Qe,"aria-label":gr,"aria-labelledby":vr,"aria-describedby":Ke,...St},Et){let Ft=react.useId(),Q=le??Ft,Je=`${Q}-label`,et=`${Q}-description`,tt=`${Q}-error`,[rt,ce]=react.useState(false),[It,fe]=react.useState(null),K=react.useRef(0),G=m??It,Vt=E||!!G,M=[];Ke&&M.push(Ke),d&&M.push(et),G&&M.push(tt);let yt=M.length>0?M.join(" "):void 0,it=react.useCallback((n,x=[])=>{let I=[],h=[];for(let S of n){if(t&&!De(S,t)){h.push(`"${S.name}" has an invalid file type`);continue}if(a&&S.size>a){h.push(`"${S.name}" exceeds the maximum size of ${oe(a)}`);continue}I.push(S);}return o&&i&&W(x,I).length>o?(h.push(`Maximum ${o} files allowed`),{valid:[],errors:h}):{valid:I,errors:h}},[t,a,o,i]),J=react.useCallback(n=>{if(!n||n.length===0)return;fe(null);let x=Array.from(n),I=i?v:[],{valid:h,errors:S}=it(x,I);if(S.length>0){fe(S[0]??"Invalid file");return}if(U&&h.length>0){let ee=U(i?W(I,h):h);if(ee){fe(ee);return}}let k;i?k=W(I,h):k=h.slice(0,1),T?.(k);},[i,v,it,U,T]),Nt=react.useCallback(n=>{J(n);},[J]),Tt=react.useCallback(n=>{let x=v.filter(I=>I!==n);T?.(x);},[v,T]),_t=react.useCallback(()=>{T?.([]);},[T]),Pt=react.useCallback(n=>{n.preventDefault(),n.stopPropagation(),!s&&(K.current++,ce(true));},[s]),Rt=react.useCallback(n=>{n.preventDefault(),n.stopPropagation();},[]),At=react.useCallback(n=>{n.preventDefault(),n.stopPropagation(),K.current--,K.current===0&&ce(false);},[]),wt=react.useCallback(n=>{if(n.preventDefault(),n.stopPropagation(),K.current=0,ce(false),s)return;let x=n.dataTransfer?.files;J(x??null);},[s,J]),Ct=n=>{switch(j(n)){case "image":return lucideReact.ImageIcon;case "video":return lucideReact.VideoIcon;case "audio":return lucideReact.AudioLines;default:return lucideReact.FileIcon}},Ot=t?.join(",");return jsxRuntime.jsxs("div",{ref:Et,id:Q,className:b(Te({size:f}),Y),"data-testid":Qe??"file-field",...St,children:[jsxRuntime.jsx("label",{id:Je,className:Le({size:f,isRequired:g}),children:r}),jsxRuntime.jsxs("div",{role:"group","data-testid":`${Qe??"file-field"}-dropzone`,className:b("drop-zone",_e({size:f,isDragOver:rt,isInvalid:Vt,isDisabled:s})),onDragEnter:Pt,onDragOver:Rt,onDragLeave:At,onDrop:wt,"aria-labelledby":Je,"aria-describedby":yt,"aria-disabled":s||void 0,children:[jsxRuntime.jsx(reactAriaComponents.FileTrigger,{acceptedFileTypes:t,allowsMultiple:i,onSelect:Nt,children:jsxRuntime.jsxs(B,{variant:"outline",isDisabled:s,buttonVisualClassName:Pe({size:f}),children:[jsxRuntime.jsx(lucideReact.Upload,{className:"h-4 w-4","aria-hidden":"true"}),rt?"Drop files here":c??(i?"Choose files":"Choose file")]})}),F&&jsxRuntime.jsx("input",{type:"file",name:F,accept:Ot,multiple:i,disabled:s,className:"sr-only",tabIndex:-1,"aria-hidden":"true"})]}),d&&jsxRuntime.jsx("p",{id:et,className:Be({size:f}),children:d}),v.length>0&&jsxRuntime.jsxs("div",{className:Re({size:f}),children:[v.length>=2&&jsxRuntime.jsxs("div",{className:mt({size:f}),children:[jsxRuntime.jsxs("span",{className:"text-[var(--menu-muted)]",children:[v.length," files selected"]}),jsxRuntime.jsx(B,{variant:"link",visualSize:"sm",onPress:_t,buttonVisualClassName:b("text-[var(--menu-muted)] hover:text-[var(--destructive)]","underline-offset-4 hover:underline"),"aria-label":"Clear all files",children:"Clear all"})]}),jsxRuntime.jsx("ul",{className:"space-y-2",children:v.map((n,x)=>{let I=Ct(n),h=f==="sm"?Math.min(z,40):f==="lg"?Math.min(z,80):Math.min(z,48),S=Xe?.[x],k=H?.[x]??0,ee=qe?.get(x),at=ue&&S!==void 0;return jsxRuntime.jsx("li",{className:at?"p-3":Ae({size:f}),children:at?jsxRuntime.jsx(se,{file:n,progress:k,status:S,error:ee,onRetry:P?()=>P(x):void 0,size:f}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs("div",{className:"flex items-center gap-2 min-w-0",children:[de?jsxRuntime.jsx(Me,{file:n,size:h,maxBytes:X,renderPreview:q,className:"flex-shrink-0"}):jsxRuntime.jsx(I,{className:"h-4 w-4 flex-shrink-0 text-[var(--menu-muted)]","aria-hidden":"true"}),jsxRuntime.jsx("span",{className:"truncate",title:n.name,children:$(n.name,30)}),jsxRuntime.jsx("span",{className:"text-[var(--menu-muted)] flex-shrink-0",children:oe(n.size)})]}),jsxRuntime.jsx(B,{variant:"ghost",visualSize:"icon",onPress:()=>Tt(n),buttonVisualClassName:we({size:f}),"aria-label":`Remove ${n.name}`,isDisabled:s,children:jsxRuntime.jsx(lucideReact.X,{className:"h-4 w-4","aria-hidden":"true"})})]})},`${n.name}-${x}`)})})]}),G&&jsxRuntime.jsx("p",{id:tt,role:"alert",className:Ce({size:f}),children:G}),!G&&N&&u&&jsxRuntime.jsx("p",{className:Oe({size:f}),children:u})]})});bt.displayName="FileField";var ht=zod.z.object({className:zod.z.string().optional(),children:zod.z.any().optional(),id:zod.z.string().optional(),"aria-label":zod.z.string().optional(),"aria-labelledby":zod.z.string().optional(),"aria-describedby":zod.z.string().optional(),"aria-live":zod.z.enum(["off","polite","assertive"]).optional(),"aria-hidden":zod.z.boolean().optional(),"data-testid":zod.z.string().optional()});var mr=ht.extend({label:zod.z.string(),acceptedFileTypes:zod.z.array(zod.z.string()).optional(),allowsMultiple:zod.z.boolean().default(false),maxFileSize:zod.z.number().optional(),maxFiles:zod.z.number().optional(),description:zod.z.string().optional(),errorMessage:zod.z.string().optional(),successMessage:zod.z.string().optional(),triggerText:zod.z.string().optional(),isRequired:zod.z.boolean().optional(),isDisabled:zod.z.boolean().optional(),isInvalid:zod.z.boolean().optional(),isValid:zod.z.boolean().optional(),size:zod.z.enum(["sm","default","lg"]).default("default"),name:zod.z.string().optional(),showPreviews:zod.z.boolean().default(false),previewSize:zod.z.number().min(16).max(256).default(64),maxPreviewBytes:zod.z.number().default(10*1024*1024),showProgress:zod.z.boolean().default(false),uploadProgress:zod.z.array(zod.z.number().min(0).max(100)).optional(),uploadStatus:zod.z.array(zod.z.enum(["pending","uploading","complete","error"])).optional()}).refine(e=>!(e.successMessage&&e.errorMessage),{message:"Cannot provide both successMessage and errorMessage. Use one based on validation state.",path:["successMessage"]}).refine(e=>(typeof process<"u"&&process.env.NODE_ENV==="development"&&e.isValid&&e.isInvalid&&console.error("[FileField] Both isValid and isInvalid are true. isInvalid takes precedence."),true));exports.FileField=bt;exports.FileFieldPropsSchema=mr;exports.FilePreview=Me;exports.FileProgress=se;exports.RESIZE_THRESHOLD=gt;exports.createResizedPreview=vt;exports.deduplicateFiles=W;exports.fileFieldContainerVariants=Te;exports.fileFieldDescriptionVariants=Be;exports.fileFieldDropZoneVariants=_e;exports.fileFieldErrorVariants=Ce;exports.fileFieldItemVariants=Ae;exports.fileFieldLabelVariants=Le;exports.fileFieldListVariants=Re;exports.fileFieldRemoveButtonVariants=we;exports.fileFieldSuccessVariants=Oe;exports.fileFieldTriggerVariants=Pe;exports.fileProgressBarVariants=je;exports.fileProgressErrorVariants=Ze;exports.fileProgressHeaderVariants=We;exports.fileProgressRetryVariants=Ye;exports.fileProgressTrackVariants=$e;exports.fileProgressVariants=ke;exports.formatAcceptedTypes=jt;exports.formatFileSize=oe;exports.generatePreview=ze;exports.getFileIcon=j;exports.isFileTypeAccepted=De;exports.isImageFile=Ue;exports.truncateFileName=$;exports.useFilePreview=Ge;//# sourceMappingURL=index.js.map
1541
3
  //# sourceMappingURL=index.js.map