@tribepad/themis 1.0.1 → 1.0.3
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.
- package/dist/elements/Accordion/index.js +1 -335
- package/dist/elements/Accordion/index.js.map +1 -1
- package/dist/elements/Accordion/index.mjs +1 -317
- package/dist/elements/Accordion/index.mjs.map +1 -1
- package/dist/elements/AlertDialog/AlertDialog.d.ts +43 -0
- package/dist/elements/AlertDialog/AlertDialog.d.ts.map +1 -0
- package/dist/elements/AlertDialog/AlertDialog.styles.d.ts +15 -0
- package/dist/elements/AlertDialog/AlertDialog.styles.d.ts.map +1 -0
- package/dist/elements/AlertDialog/AlertDialog.types.d.ts +72 -0
- package/dist/elements/AlertDialog/AlertDialog.types.d.ts.map +1 -0
- package/dist/elements/AlertDialog/index.d.ts +25 -0
- package/dist/elements/AlertDialog/index.d.ts.map +1 -0
- package/dist/elements/AlertDialog/index.js +3 -0
- package/dist/elements/AlertDialog/index.js.map +1 -0
- package/dist/elements/AlertDialog/index.mjs +3 -0
- package/dist/elements/AlertDialog/index.mjs.map +1 -0
- package/dist/elements/Avatar/index.js +1 -468
- package/dist/elements/Avatar/index.js.map +1 -1
- package/dist/elements/Avatar/index.mjs +1 -456
- package/dist/elements/Avatar/index.mjs.map +1 -1
- package/dist/elements/Badge/index.js +1 -243
- package/dist/elements/Badge/index.js.map +1 -1
- package/dist/elements/Badge/index.mjs +1 -234
- package/dist/elements/Badge/index.mjs.map +1 -1
- package/dist/elements/Breadcrumbs/index.js +1 -821
- package/dist/elements/Breadcrumbs/index.js.map +1 -1
- package/dist/elements/Breadcrumbs/index.mjs +1 -810
- package/dist/elements/Breadcrumbs/index.mjs.map +1 -1
- package/dist/elements/Button/Button.d.ts +26 -81
- package/dist/elements/Button/Button.d.ts.map +1 -1
- package/dist/elements/Button/Button.styles.d.ts +35 -0
- package/dist/elements/Button/Button.styles.d.ts.map +1 -0
- package/dist/elements/Button/Button.types.d.ts +20 -8
- package/dist/elements/Button/Button.types.d.ts.map +1 -1
- package/dist/elements/Button/index.js +1 -288
- package/dist/elements/Button/index.js.map +1 -1
- package/dist/elements/Button/index.mjs +1 -283
- package/dist/elements/Button/index.mjs.map +1 -1
- package/dist/elements/ButtonGroup/index.js +1 -237
- package/dist/elements/ButtonGroup/index.js.map +1 -1
- package/dist/elements/ButtonGroup/index.mjs +1 -222
- package/dist/elements/ButtonGroup/index.mjs.map +1 -1
- package/dist/elements/Card/index.js +1 -579
- package/dist/elements/Card/index.js.map +1 -1
- package/dist/elements/Card/index.mjs +1 -560
- package/dist/elements/Card/index.mjs.map +1 -1
- package/dist/elements/Carousel/Carousel.d.ts +1 -11
- package/dist/elements/Carousel/Carousel.d.ts.map +1 -1
- package/dist/elements/Carousel/LazyCarousel.d.ts +1 -1
- package/dist/elements/Carousel/LazyCarousel.d.ts.map +1 -1
- package/dist/elements/Carousel/index.js +1 -789
- package/dist/elements/Carousel/index.js.map +1 -1
- package/dist/elements/Carousel/index.mjs +1 -786
- package/dist/elements/Carousel/index.mjs.map +1 -1
- package/dist/elements/Chart/ChartContext.d.ts.map +1 -1
- package/dist/elements/Chart/index.js +1 -1842
- package/dist/elements/Chart/index.js.map +1 -1
- package/dist/elements/Chart/index.mjs +1 -1832
- package/dist/elements/Chart/index.mjs.map +1 -1
- package/dist/elements/Checkbox/index.js +1 -316
- package/dist/elements/Checkbox/index.js.map +1 -1
- package/dist/elements/Checkbox/index.mjs +1 -306
- package/dist/elements/Checkbox/index.mjs.map +1 -1
- package/dist/elements/CheckboxGroup/index.js +1 -455
- package/dist/elements/CheckboxGroup/index.js.map +1 -1
- package/dist/elements/CheckboxGroup/index.mjs +1 -439
- package/dist/elements/CheckboxGroup/index.mjs.map +1 -1
- package/dist/elements/Combobox/Combobox.d.ts +56 -0
- package/dist/elements/Combobox/Combobox.d.ts.map +1 -0
- package/dist/elements/Combobox/Combobox.styles.d.ts +29 -0
- package/dist/elements/Combobox/Combobox.styles.d.ts.map +1 -0
- package/dist/elements/Combobox/Combobox.types.d.ts +67 -0
- package/dist/elements/Combobox/Combobox.types.d.ts.map +1 -0
- package/dist/elements/Combobox/index.d.ts +20 -0
- package/dist/elements/Combobox/index.d.ts.map +1 -0
- package/dist/elements/Combobox/index.js +3 -0
- package/dist/elements/Combobox/index.js.map +1 -0
- package/dist/elements/Combobox/index.mjs +3 -0
- package/dist/elements/Combobox/index.mjs.map +1 -0
- package/dist/elements/DatePicker/DatePicker.d.ts +1 -1
- package/dist/elements/DatePicker/DatePicker.d.ts.map +1 -1
- package/dist/elements/DatePicker/index.js +1 -903
- package/dist/elements/DatePicker/index.js.map +1 -1
- package/dist/elements/DatePicker/index.mjs +1 -853
- package/dist/elements/DatePicker/index.mjs.map +1 -1
- package/dist/elements/Dropdown/Dropdown.d.ts +7 -15
- package/dist/elements/Dropdown/Dropdown.d.ts.map +1 -1
- package/dist/elements/Dropdown/Dropdown.styles.d.ts +22 -0
- package/dist/elements/Dropdown/Dropdown.styles.d.ts.map +1 -0
- package/dist/elements/Dropdown/index.d.ts +1 -0
- package/dist/elements/Dropdown/index.d.ts.map +1 -1
- package/dist/elements/Dropdown/index.js +1 -193
- package/dist/elements/Dropdown/index.js.map +1 -1
- package/dist/elements/Dropdown/index.mjs +1 -184
- package/dist/elements/Dropdown/index.mjs.map +1 -1
- package/dist/elements/FileField/index.js +1 -1539
- package/dist/elements/FileField/index.js.map +1 -1
- package/dist/elements/FileField/index.mjs +1 -1507
- package/dist/elements/FileField/index.mjs.map +1 -1
- package/dist/elements/FormLayout/index.js +1 -170
- package/dist/elements/FormLayout/index.js.map +1 -1
- package/dist/elements/FormLayout/index.mjs +1 -167
- package/dist/elements/FormLayout/index.mjs.map +1 -1
- package/dist/elements/Modal/Modal.d.ts +9 -14
- package/dist/elements/Modal/Modal.d.ts.map +1 -1
- package/dist/elements/Modal/Modal.styles.d.ts +29 -0
- package/dist/elements/Modal/Modal.styles.d.ts.map +1 -0
- package/dist/elements/Modal/index.d.ts +1 -0
- package/dist/elements/Modal/index.d.ts.map +1 -1
- package/dist/elements/Modal/index.js +1 -232
- package/dist/elements/Modal/index.js.map +1 -1
- package/dist/elements/Modal/index.mjs +1 -220
- package/dist/elements/Modal/index.mjs.map +1 -1
- package/dist/elements/NumberField/NumberField.variants.d.ts +1 -1
- package/dist/elements/NumberField/index.js +1 -666
- package/dist/elements/NumberField/index.js.map +1 -1
- package/dist/elements/NumberField/index.mjs +1 -654
- package/dist/elements/NumberField/index.mjs.map +1 -1
- package/dist/elements/OTPInput/OTPInput.d.ts.map +1 -1
- package/dist/elements/OTPInput/index.js +1 -734
- package/dist/elements/OTPInput/index.js.map +1 -1
- package/dist/elements/OTPInput/index.mjs +1 -732
- package/dist/elements/OTPInput/index.mjs.map +1 -1
- package/dist/elements/Pagination/Pagination.d.ts +45 -0
- package/dist/elements/Pagination/Pagination.d.ts.map +1 -0
- package/dist/elements/Pagination/Pagination.styles.d.ts +10 -0
- package/dist/elements/Pagination/Pagination.styles.d.ts.map +1 -0
- package/dist/elements/Pagination/Pagination.types.d.ts +55 -0
- package/dist/elements/Pagination/Pagination.types.d.ts.map +1 -0
- package/dist/elements/Pagination/index.d.ts +21 -0
- package/dist/elements/Pagination/index.d.ts.map +1 -0
- package/dist/elements/Pagination/index.js +3 -0
- package/dist/elements/Pagination/index.js.map +1 -0
- package/dist/elements/Pagination/index.mjs +3 -0
- package/dist/elements/Pagination/index.mjs.map +1 -0
- package/dist/elements/Panel/index.js +1 -330
- package/dist/elements/Panel/index.js.map +1 -1
- package/dist/elements/Panel/index.mjs +1 -323
- package/dist/elements/Panel/index.mjs.map +1 -1
- package/dist/elements/PasswordField/PasswordField.d.ts +27 -0
- package/dist/elements/PasswordField/PasswordField.d.ts.map +1 -0
- package/dist/elements/PasswordField/PasswordField.styles.d.ts +32 -0
- package/dist/elements/PasswordField/PasswordField.styles.d.ts.map +1 -0
- package/dist/elements/PasswordField/PasswordField.types.d.ts +100 -0
- package/dist/elements/PasswordField/PasswordField.types.d.ts.map +1 -0
- package/dist/elements/PasswordField/index.css +2 -0
- package/dist/elements/PasswordField/index.css.map +1 -0
- package/dist/elements/PasswordField/index.d.ts +20 -0
- package/dist/elements/PasswordField/index.d.ts.map +1 -0
- package/dist/elements/PasswordField/index.js +3 -0
- package/dist/elements/PasswordField/index.js.map +1 -0
- package/dist/elements/PasswordField/index.mjs +3 -0
- package/dist/elements/PasswordField/index.mjs.map +1 -0
- package/dist/elements/Progress/index.js +1 -187
- package/dist/elements/Progress/index.js.map +1 -1
- package/dist/elements/Progress/index.mjs +1 -181
- package/dist/elements/Progress/index.mjs.map +1 -1
- package/dist/elements/RadioGroup/index.js +1 -369
- package/dist/elements/RadioGroup/index.js.map +1 -1
- package/dist/elements/RadioGroup/index.mjs +1 -359
- package/dist/elements/RadioGroup/index.mjs.map +1 -1
- package/dist/elements/Resizable/index.js +1 -1580
- package/dist/elements/Resizable/index.js.map +1 -1
- package/dist/elements/Resizable/index.mjs +1 -1566
- package/dist/elements/Resizable/index.mjs.map +1 -1
- package/dist/elements/SearchField/SearchField.d.ts +27 -0
- package/dist/elements/SearchField/SearchField.d.ts.map +1 -0
- package/dist/elements/SearchField/SearchField.styles.d.ts +32 -0
- package/dist/elements/SearchField/SearchField.styles.d.ts.map +1 -0
- package/dist/elements/SearchField/SearchField.types.d.ts +45 -0
- package/dist/elements/SearchField/SearchField.types.d.ts.map +1 -0
- package/dist/elements/SearchField/index.css +2 -0
- package/dist/elements/SearchField/index.css.map +1 -0
- package/dist/elements/SearchField/index.d.ts +21 -0
- package/dist/elements/SearchField/index.d.ts.map +1 -0
- package/dist/elements/SearchField/index.js +3 -0
- package/dist/elements/SearchField/index.js.map +1 -0
- package/dist/elements/SearchField/index.mjs +3 -0
- package/dist/elements/SearchField/index.mjs.map +1 -0
- package/dist/elements/Select/Select.d.ts +19 -48
- package/dist/elements/Select/Select.d.ts.map +1 -1
- package/dist/elements/Select/Select.styles.d.ts +55 -0
- package/dist/elements/Select/Select.styles.d.ts.map +1 -0
- package/dist/elements/Select/index.js +1 -589
- package/dist/elements/Select/index.js.map +1 -1
- package/dist/elements/Select/index.mjs +1 -582
- package/dist/elements/Select/index.mjs.map +1 -1
- package/dist/elements/Skeleton/index.js +1 -82
- package/dist/elements/Skeleton/index.js.map +1 -1
- package/dist/elements/Skeleton/index.mjs +1 -78
- package/dist/elements/Skeleton/index.mjs.map +1 -1
- package/dist/elements/Switch/index.js +1 -179
- package/dist/elements/Switch/index.js.map +1 -1
- package/dist/elements/Switch/index.mjs +1 -173
- package/dist/elements/Switch/index.mjs.map +1 -1
- package/dist/elements/Table/Table.d.ts +3 -24
- package/dist/elements/Table/Table.d.ts.map +1 -1
- package/dist/elements/Table/Table.styles.d.ts +24 -0
- package/dist/elements/Table/Table.styles.d.ts.map +1 -0
- package/dist/elements/Table/index.js +1 -595
- package/dist/elements/Table/index.js.map +1 -1
- package/dist/elements/Table/index.mjs +1 -578
- package/dist/elements/Table/index.mjs.map +1 -1
- package/dist/elements/Tabs/Tabs.d.ts +5 -3
- package/dist/elements/Tabs/Tabs.d.ts.map +1 -1
- package/dist/elements/Tabs/Tabs.types.d.ts +15 -0
- package/dist/elements/Tabs/Tabs.types.d.ts.map +1 -1
- package/dist/elements/Tabs/index.js +1 -337
- package/dist/elements/Tabs/index.js.map +1 -1
- package/dist/elements/Tabs/index.mjs +1 -320
- package/dist/elements/Tabs/index.mjs.map +1 -1
- package/dist/elements/TextField/TextField.d.ts +6 -42
- package/dist/elements/TextField/TextField.d.ts.map +1 -1
- package/dist/elements/TextField/TextField.hooks.d.ts +63 -0
- package/dist/elements/TextField/TextField.hooks.d.ts.map +1 -0
- package/dist/elements/TextField/TextField.icons.d.ts +19 -0
- package/dist/elements/TextField/TextField.icons.d.ts.map +1 -0
- package/dist/elements/TextField/TextField.styles.d.ts +37 -0
- package/dist/elements/TextField/TextField.styles.d.ts.map +1 -0
- package/dist/elements/TextField/TextField.types.d.ts +3 -0
- package/dist/elements/TextField/TextField.types.d.ts.map +1 -1
- package/dist/elements/TextField/index.css +1 -22
- package/dist/elements/TextField/index.css.map +1 -1
- package/dist/elements/TextField/index.js +1 -902
- package/dist/elements/TextField/index.js.map +1 -1
- package/dist/elements/TextField/index.mjs +1 -882
- package/dist/elements/TextField/index.mjs.map +1 -1
- package/dist/elements/TimeField/index.js +1 -254
- package/dist/elements/TimeField/index.js.map +1 -1
- package/dist/elements/TimeField/index.mjs +1 -238
- package/dist/elements/TimeField/index.mjs.map +1 -1
- package/dist/elements/Toast/Toast.d.ts +0 -22
- package/dist/elements/Toast/Toast.d.ts.map +1 -1
- package/dist/elements/Toast/index.js +1 -737
- package/dist/elements/Toast/index.js.map +1 -1
- package/dist/elements/Toast/index.mjs +1 -724
- package/dist/elements/Toast/index.mjs.map +1 -1
- package/dist/elements/Tooltip/index.js +1 -323
- package/dist/elements/Tooltip/index.js.map +1 -1
- package/dist/elements/Tooltip/index.mjs +1 -310
- package/dist/elements/Tooltip/index.mjs.map +1 -1
- package/dist/elements/index.css +1 -22
- package/dist/elements/index.css.map +1 -1
- package/dist/elements/index.d.ts +13 -1
- package/dist/elements/index.d.ts.map +1 -1
- package/dist/elements/index.js +1 -12455
- package/dist/elements/index.js.map +1 -1
- package/dist/elements/index.mjs +1 -12233
- package/dist/elements/index.mjs.map +1 -1
- package/dist/index.css +1 -22
- package/dist/index.css.map +1 -1
- package/dist/index.js +2 -12490
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -12262
- package/dist/index.mjs.map +1 -1
- package/dist/schemas/index.js +2 -54
- package/dist/schemas/index.js.map +1 -1
- package/dist/schemas/index.mjs +2 -48
- package/dist/schemas/index.mjs.map +1 -1
- package/dist/styles/defaults.css +151 -0
- package/dist/styles/index.js +1 -166
- package/dist/styles/index.js.map +1 -1
- package/dist/styles/index.mjs +1 -129
- package/dist/styles/index.mjs.map +1 -1
- package/dist/styles/shared-variants.d.ts +3 -3
- package/dist/styles/shared-variants.d.ts.map +1 -1
- package/dist/utils/index.js +1 -12
- package/dist/utils/index.js.map +1 -1
- package/dist/utils/index.mjs +1 -10
- package/dist/utils/index.mjs.map +1 -1
- package/package.json +9 -7
- package/src/elements/Accordion/Accordion.stories.tsx +1 -1
- package/src/elements/AlertDialog/AlertDialog.stories.tsx +124 -0
- package/src/elements/Avatar/Avatar.stories.tsx +1 -1
- package/src/elements/Badge/Badge.stories.tsx +1 -1
- package/src/elements/Breadcrumbs/Breadcrumbs.stories.tsx +1 -1
- package/src/elements/Button/Button.stories.tsx +1 -1
- package/src/elements/ButtonGroup/ButtonGroup.stories.tsx +1 -1
- package/src/elements/Card/Card.stories.tsx +1 -1
- package/src/elements/Carousel/Carousel.stories.tsx +1 -1
- package/src/elements/Chart/Chart.stories.tsx +1 -1
- package/src/elements/Checkbox/Checkbox.stories.tsx +1 -1
- package/src/elements/CheckboxGroup/CheckboxGroup.stories.tsx +4 -4
- package/src/elements/Combobox/Combobox.stories.tsx +133 -0
- package/src/elements/DatePicker/DatePicker.stories.tsx +1 -1
- package/src/elements/Dropdown/Dropdown.stories.tsx +1 -1
- package/src/elements/FileField/FileField.stories.tsx +2 -2
- package/src/elements/FileField/FileProgress.stories.tsx +1 -1
- package/src/elements/FormLayout/FormLayout.stories.tsx +1 -1
- package/src/elements/Modal/Modal.stories.tsx +1 -1
- package/src/elements/NumberField/NumberField.stories.tsx +1 -1
- package/src/elements/OTPInput/OTPInput.stories.tsx +1 -1
- package/src/elements/Pagination/Pagination.stories.tsx +203 -0
- package/src/elements/Panel/Panel.stories.tsx +1 -1
- package/src/elements/PasswordField/PasswordField.stories.tsx +167 -0
- package/src/elements/Progress/Progress.stories.tsx +7 -2
- package/src/elements/RadioGroup/RadioGroup.stories.tsx +3 -3
- package/src/elements/Resizable/Resizable.stories.tsx +1 -1
- package/src/elements/SearchField/SearchField.stories.tsx +146 -0
- package/src/elements/Select/Select.stories.tsx +1 -1
- package/src/elements/Skeleton/Skeleton.stories.tsx +1 -1
- package/src/elements/Switch/Switch.stories.tsx +1 -1
- package/src/elements/Table/Table.stories.tsx +1 -1
- package/src/elements/Tabs/Tabs.stories.tsx +46 -2
- package/src/elements/TextField/TextField.stories.tsx +1 -1
- package/src/elements/TimeField/TimeField.stories.tsx +1 -1
- package/src/elements/Toast/Toast.stories.tsx +1 -1
- 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-background)]"],Ve=["flex","items-center","gap-1.5","text-[var(--success-background)]"],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-border)] hover:border-[var(--primary)]/50"},isInvalid:{true:"border-[var(--destructive-background)] bg-[var(--destructive-background)]/5",false:""},isDisabled:{true:"opacity-50 cursor-not-allowed pointer-events-none",false:"cursor-pointer"}},compoundVariants:[{isInvalid:true,isDragOver:true,className:"border-[var(--destructive-background)] bg-[var(--destructive-background)]/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-border)] 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-background)] hover:bg-[var(--destructive-background)]/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-background)]",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 ke({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 Me=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-background)]",error:"bg-[var(--destructive-background)]"}},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-background)]"],{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(Me({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,k=[];Ke&&k.push(Ke),d&&k.push(et),G&&k.push(tt);let yt=k.length>0?k.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 M;i?M=W(I,h):M=h.slice(0,1),T?.(M);},[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-background)]","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],M=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:M,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(ke,{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=ke;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=Me;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
|