@pixpilot/shadcn-ui 1.8.0 → 1.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/avatar-upload/AvatarUpload.cjs +25 -19
- package/dist/avatar-upload/AvatarUpload.d.cts +6 -0
- package/dist/avatar-upload/AvatarUpload.d.ts +6 -0
- package/dist/avatar-upload/AvatarUpload.js +25 -19
- package/dist/avatar-upload/AvatarUploadComponents.cjs +20 -2
- package/dist/avatar-upload/AvatarUploadComponents.js +25 -8
- package/dist/avatar-upload/AvatarUploadItem.cjs +13 -4
- package/dist/avatar-upload/AvatarUploadItem.js +12 -4
- package/dist/file-upload/FileUpload.cjs +5 -10
- package/dist/file-upload/FileUpload.js +5 -10
- package/dist/file-upload/FileUploadItems.cjs +3 -3
- package/dist/file-upload/FileUploadItems.js +3 -3
- package/dist/file-upload/FileUploadListItem.cjs +3 -3
- package/dist/file-upload/FileUploadListItem.js +3 -3
- package/dist/file-upload/hooks/use-file-upload-progress-callbacks.cjs +5 -5
- package/dist/file-upload/hooks/use-file-upload-progress-callbacks.js +5 -5
- package/dist/file-upload/index.d.cts +1 -1
- package/dist/file-upload/index.d.ts +1 -1
- package/dist/file-upload/types/index.d.cts +6 -10
- package/dist/file-upload/types/index.d.ts +6 -10
- package/dist/file-upload-inline/FileUploadInline.cjs +4 -2
- package/dist/file-upload-inline/FileUploadInline.d.ts +2 -2
- package/dist/file-upload-inline/FileUploadInline.js +4 -2
- package/dist/file-upload-root/FileUploadRoot.cjs +13 -8
- package/dist/file-upload-root/FileUploadRoot.d.cts +2 -2
- package/dist/file-upload-root/FileUploadRoot.d.ts +2 -2
- package/dist/file-upload-root/FileUploadRoot.js +13 -8
- package/dist/file-upload-root/FileUploadRootItem.cjs +3 -3
- package/dist/file-upload-root/FileUploadRootItem.d.cts +2 -2
- package/dist/file-upload-root/FileUploadRootItem.d.ts +2 -2
- package/dist/file-upload-root/FileUploadRootItem.js +3 -3
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/input/Input.d.cts +2 -2
- package/dist/tags-input/TagsInput.d.ts +2 -2
- package/dist/tags-input/TagsInputInline.d.ts +2 -2
- package/dist/theme-toggle/ThemeModeDropdown.d.ts +2 -2
- package/dist/theme-toggle/ThemeModeSwitchInside.d.ts +2 -2
- package/dist/theme-toggle/ThemeModeSwitchOutside.d.ts +2 -2
- package/dist/theme-toggle/ThemeModeToggleButton.d.ts +2 -2
- package/package.json +3 -3
|
@@ -33,48 +33,54 @@ const sizeClasses = {
|
|
|
33
33
|
}
|
|
34
34
|
};
|
|
35
35
|
const AvatarUpload = (props) => {
|
|
36
|
-
const { className, messages, value, onAccept,
|
|
36
|
+
const { className, messages, value, onAccept, onFileSuccess, onFileError, onChange, size = "md", clearable = true,...rest } = props;
|
|
37
37
|
const { upload = "Upload", change = "Change" } = messages || {};
|
|
38
38
|
const currentSize = sizeClasses[size];
|
|
39
|
-
const [
|
|
39
|
+
const [selectedFile, setSelectedFile] = react.default.useState(null);
|
|
40
|
+
const [error, setError] = react.default.useState(null);
|
|
40
41
|
const imageUrl = value?.url;
|
|
41
42
|
const handleAccept = react.default.useCallback((acceptedFiles) => {
|
|
42
|
-
const
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}));
|
|
49
|
-
onAccept?.(nextFiles);
|
|
43
|
+
const nextFile = acceptedFiles[0];
|
|
44
|
+
setSelectedFile(nextFile == null ? null : {
|
|
45
|
+
file: nextFile,
|
|
46
|
+
id: `${nextFile.name}-${nextFile.lastModified.toString()}`
|
|
47
|
+
});
|
|
48
|
+
onAccept?.(nextFile == null ? [] : [nextFile]);
|
|
50
49
|
}, [onAccept]);
|
|
50
|
+
const handleClear = react.default.useCallback(() => {
|
|
51
|
+
setSelectedFile(null);
|
|
52
|
+
onChange?.(null);
|
|
53
|
+
}, [onChange]);
|
|
51
54
|
const hasImageUrl = imageUrl != null;
|
|
55
|
+
const showClearButton = clearable && (selectedFile != null || hasImageUrl);
|
|
52
56
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.FileUpload, {
|
|
53
57
|
...rest,
|
|
54
58
|
multiple: false,
|
|
55
59
|
onAccept: handleAccept,
|
|
56
|
-
className: require_utils.cn("w-fit", className),
|
|
60
|
+
className: require_utils.cn("w-fit ", className),
|
|
57
61
|
accept: "image/*",
|
|
58
62
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.FileUploadDropzone, {
|
|
59
|
-
className: currentSize.dropZone,
|
|
60
|
-
children:
|
|
61
|
-
file,
|
|
62
|
-
index: i,
|
|
63
|
+
className: require_utils.cn(error != null && "border-red-500", currentSize.dropZone),
|
|
64
|
+
children: selectedFile != null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.FileUploadList, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AvatarUploadItem.AvatarUploadItem, {
|
|
65
|
+
file: selectedFile.file,
|
|
63
66
|
currentSize,
|
|
64
67
|
change,
|
|
65
|
-
|
|
66
|
-
onError
|
|
67
|
-
|
|
68
|
+
onFileSuccess,
|
|
69
|
+
onError: setError,
|
|
70
|
+
onFileError,
|
|
71
|
+
onClear: showClearButton ? handleClear : void 0
|
|
72
|
+
}, selectedFile.id) }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_AvatarUploadComponents.MainWrapper, {
|
|
68
73
|
currentSize,
|
|
69
74
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AvatarUploadComponents.AvatarWrap, {
|
|
70
75
|
className: currentSize.avatar,
|
|
71
76
|
iconClass: currentSize.icon,
|
|
72
77
|
showChangeIcon: hasImageUrl,
|
|
78
|
+
onClear: showClearButton ? handleClear : void 0,
|
|
73
79
|
children: hasImageUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AvatarUploadComponents.Image, { src: imageUrl }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.UserCircle2, {
|
|
74
80
|
className: "text-muted-foreground w-full h-full",
|
|
75
81
|
strokeWidth: 1
|
|
76
82
|
})
|
|
77
|
-
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AvatarUploadComponents.MessageComponent, { message: hasImageUrl
|
|
83
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AvatarUploadComponents.MessageComponent, { message: hasImageUrl ? change : upload })]
|
|
78
84
|
})
|
|
79
85
|
})
|
|
80
86
|
});
|
|
@@ -10,6 +10,12 @@ interface AvatarUploadProps extends SingleFileUploadProps {
|
|
|
10
10
|
change?: string;
|
|
11
11
|
};
|
|
12
12
|
size?: keyof ComponentSizes;
|
|
13
|
+
/**
|
|
14
|
+
* When `true` (the default), a small × button is displayed on the avatar
|
|
15
|
+
* whenever there is an image loaded. Clicking it clears the current value.
|
|
16
|
+
* Set to `false` to hide the button.
|
|
17
|
+
*/
|
|
18
|
+
clearable?: boolean;
|
|
13
19
|
}
|
|
14
20
|
declare const AvatarUpload: React.FC<AvatarUploadProps>;
|
|
15
21
|
//#endregion
|
|
@@ -10,6 +10,12 @@ interface AvatarUploadProps extends SingleFileUploadProps {
|
|
|
10
10
|
change?: string;
|
|
11
11
|
};
|
|
12
12
|
size?: keyof ComponentSizes;
|
|
13
|
+
/**
|
|
14
|
+
* When `true` (the default), a small × button is displayed on the avatar
|
|
15
|
+
* whenever there is an image loaded. Clicking it clears the current value.
|
|
16
|
+
* Set to `false` to hide the button.
|
|
17
|
+
*/
|
|
18
|
+
clearable?: boolean;
|
|
13
19
|
}
|
|
14
20
|
declare const AvatarUpload: React.FC<AvatarUploadProps>;
|
|
15
21
|
//#endregion
|
|
@@ -28,48 +28,54 @@ const sizeClasses = {
|
|
|
28
28
|
}
|
|
29
29
|
};
|
|
30
30
|
const AvatarUpload = (props) => {
|
|
31
|
-
const { className, messages, value, onAccept,
|
|
31
|
+
const { className, messages, value, onAccept, onFileSuccess, onFileError, onChange, size = "md", clearable = true,...rest } = props;
|
|
32
32
|
const { upload = "Upload", change = "Change" } = messages || {};
|
|
33
33
|
const currentSize = sizeClasses[size];
|
|
34
|
-
const [
|
|
34
|
+
const [selectedFile, setSelectedFile] = React.useState(null);
|
|
35
|
+
const [error, setError] = React.useState(null);
|
|
35
36
|
const imageUrl = value?.url;
|
|
36
37
|
const handleAccept = React.useCallback((acceptedFiles) => {
|
|
37
|
-
const
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}));
|
|
44
|
-
onAccept?.(nextFiles);
|
|
38
|
+
const nextFile = acceptedFiles[0];
|
|
39
|
+
setSelectedFile(nextFile == null ? null : {
|
|
40
|
+
file: nextFile,
|
|
41
|
+
id: `${nextFile.name}-${nextFile.lastModified.toString()}`
|
|
42
|
+
});
|
|
43
|
+
onAccept?.(nextFile == null ? [] : [nextFile]);
|
|
45
44
|
}, [onAccept]);
|
|
45
|
+
const handleClear = React.useCallback(() => {
|
|
46
|
+
setSelectedFile(null);
|
|
47
|
+
onChange?.(null);
|
|
48
|
+
}, [onChange]);
|
|
46
49
|
const hasImageUrl = imageUrl != null;
|
|
50
|
+
const showClearButton = clearable && (selectedFile != null || hasImageUrl);
|
|
47
51
|
return /* @__PURE__ */ jsx(FileUpload, {
|
|
48
52
|
...rest,
|
|
49
53
|
multiple: false,
|
|
50
54
|
onAccept: handleAccept,
|
|
51
|
-
className: cn$1("w-fit", className),
|
|
55
|
+
className: cn$1("w-fit ", className),
|
|
52
56
|
accept: "image/*",
|
|
53
57
|
children: /* @__PURE__ */ jsx(FileUploadDropzone, {
|
|
54
|
-
className: currentSize.dropZone,
|
|
55
|
-
children:
|
|
56
|
-
file,
|
|
57
|
-
index: i,
|
|
58
|
+
className: cn$1(error != null && "border-red-500", currentSize.dropZone),
|
|
59
|
+
children: selectedFile != null ? /* @__PURE__ */ jsx(FileUploadList, { children: /* @__PURE__ */ jsx(AvatarUploadItem, {
|
|
60
|
+
file: selectedFile.file,
|
|
58
61
|
currentSize,
|
|
59
62
|
change,
|
|
60
|
-
|
|
61
|
-
onError
|
|
62
|
-
|
|
63
|
+
onFileSuccess,
|
|
64
|
+
onError: setError,
|
|
65
|
+
onFileError,
|
|
66
|
+
onClear: showClearButton ? handleClear : void 0
|
|
67
|
+
}, selectedFile.id) }) : /* @__PURE__ */ jsxs(MainWrapper, {
|
|
63
68
|
currentSize,
|
|
64
69
|
children: [/* @__PURE__ */ jsx(AvatarWrap, {
|
|
65
70
|
className: currentSize.avatar,
|
|
66
71
|
iconClass: currentSize.icon,
|
|
67
72
|
showChangeIcon: hasImageUrl,
|
|
73
|
+
onClear: showClearButton ? handleClear : void 0,
|
|
68
74
|
children: hasImageUrl ? /* @__PURE__ */ jsx(Image, { src: imageUrl }) : /* @__PURE__ */ jsx(UserCircle2, {
|
|
69
75
|
className: "text-muted-foreground w-full h-full",
|
|
70
76
|
strokeWidth: 1
|
|
71
77
|
})
|
|
72
|
-
}), /* @__PURE__ */ jsx(MessageComponent, { message: hasImageUrl
|
|
78
|
+
}), /* @__PURE__ */ jsx(MessageComponent, { message: hasImageUrl ? change : upload })]
|
|
73
79
|
})
|
|
74
80
|
})
|
|
75
81
|
});
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
|
|
2
2
|
const require_utils = require('../shadcn/src/lib/utils.cjs');
|
|
3
|
+
let __pixpilot_shadcn = require("@pixpilot/shadcn");
|
|
4
|
+
__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
|
|
3
5
|
let lucide_react = require("lucide-react");
|
|
4
6
|
lucide_react = require_rolldown_runtime.__toESM(lucide_react);
|
|
5
7
|
let react = require("react");
|
|
@@ -14,10 +16,26 @@ const MessageComponent = ({ message, className }) => {
|
|
|
14
16
|
children: message
|
|
15
17
|
});
|
|
16
18
|
};
|
|
17
|
-
const AvatarWrap = ({ children, className, iconClass, showChangeIcon }) => {
|
|
19
|
+
const AvatarWrap = ({ children, className, iconClass, showChangeIcon, onClear }) => {
|
|
18
20
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
19
21
|
className: require_utils.cn("relative", className),
|
|
20
|
-
children: [
|
|
22
|
+
children: [
|
|
23
|
+
children,
|
|
24
|
+
showChangeIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pencil, { className: require_utils.cn(`absolute bottom-0 right-0 bg-secondary text-secondary-foreground rounded-full p-1.5 shadow-md`, iconClass) }),
|
|
25
|
+
onClear != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
|
|
26
|
+
type: "button",
|
|
27
|
+
variant: "secondary",
|
|
28
|
+
size: "icon",
|
|
29
|
+
className: "-top-2.5 -right-2.5 absolute size-5.5 rounded-full",
|
|
30
|
+
"aria-label": "Clear avatar",
|
|
31
|
+
onClick: (e) => {
|
|
32
|
+
e.stopPropagation();
|
|
33
|
+
e.preventDefault();
|
|
34
|
+
onClear();
|
|
35
|
+
},
|
|
36
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "size-3" })
|
|
37
|
+
})
|
|
38
|
+
]
|
|
21
39
|
});
|
|
22
40
|
};
|
|
23
41
|
const Image = ({ src, className }) => {
|
|
@@ -1,31 +1,48 @@
|
|
|
1
|
-
import { cn } from "../shadcn/src/lib/utils.js";
|
|
2
|
-
import {
|
|
1
|
+
import { cn as cn$1 } from "../shadcn/src/lib/utils.js";
|
|
2
|
+
import { Button } from "@pixpilot/shadcn";
|
|
3
|
+
import { Pencil, X } from "lucide-react";
|
|
3
4
|
import React from "react";
|
|
4
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
6
|
|
|
6
7
|
//#region src/avatar-upload/AvatarUploadComponents.tsx
|
|
7
8
|
const MessageComponent = ({ message, className }) => {
|
|
8
9
|
return /* @__PURE__ */ jsx("p", {
|
|
9
|
-
className: cn("text-sm text-muted-foreground", className),
|
|
10
|
+
className: cn$1("text-sm text-muted-foreground", className),
|
|
10
11
|
children: message
|
|
11
12
|
});
|
|
12
13
|
};
|
|
13
|
-
const AvatarWrap = ({ children, className, iconClass, showChangeIcon }) => {
|
|
14
|
+
const AvatarWrap = ({ children, className, iconClass, showChangeIcon, onClear }) => {
|
|
14
15
|
return /* @__PURE__ */ jsxs("div", {
|
|
15
|
-
className: cn("relative", className),
|
|
16
|
-
children: [
|
|
16
|
+
className: cn$1("relative", className),
|
|
17
|
+
children: [
|
|
18
|
+
children,
|
|
19
|
+
showChangeIcon && /* @__PURE__ */ jsx(Pencil, { className: cn$1(`absolute bottom-0 right-0 bg-secondary text-secondary-foreground rounded-full p-1.5 shadow-md`, iconClass) }),
|
|
20
|
+
onClear != null && /* @__PURE__ */ jsx(Button, {
|
|
21
|
+
type: "button",
|
|
22
|
+
variant: "secondary",
|
|
23
|
+
size: "icon",
|
|
24
|
+
className: "-top-2.5 -right-2.5 absolute size-5.5 rounded-full",
|
|
25
|
+
"aria-label": "Clear avatar",
|
|
26
|
+
onClick: (e) => {
|
|
27
|
+
e.stopPropagation();
|
|
28
|
+
e.preventDefault();
|
|
29
|
+
onClear();
|
|
30
|
+
},
|
|
31
|
+
children: /* @__PURE__ */ jsx(X, { className: "size-3" })
|
|
32
|
+
})
|
|
33
|
+
]
|
|
17
34
|
});
|
|
18
35
|
};
|
|
19
36
|
const Image = ({ src, className }) => {
|
|
20
37
|
return /* @__PURE__ */ jsx("img", {
|
|
21
38
|
src,
|
|
22
39
|
alt: "Avatar preview",
|
|
23
|
-
className: cn("rounded-full object-cover w-full h-full", className)
|
|
40
|
+
className: cn$1("rounded-full object-cover w-full h-full", className)
|
|
24
41
|
});
|
|
25
42
|
};
|
|
26
43
|
const MainWrapper = ({ children, className, currentSize }) => {
|
|
27
44
|
return /* @__PURE__ */ jsx("div", {
|
|
28
|
-
className: cn("flex flex-col items-center relative", className, currentSize.main),
|
|
45
|
+
className: cn$1("flex flex-col items-center relative", className, currentSize.main),
|
|
29
46
|
children
|
|
30
47
|
});
|
|
31
48
|
};
|
|
@@ -7,15 +7,17 @@ let __pixpilot_shadcn = require("@pixpilot/shadcn");
|
|
|
7
7
|
__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
|
|
8
8
|
let lucide_react = require("lucide-react");
|
|
9
9
|
lucide_react = require_rolldown_runtime.__toESM(lucide_react);
|
|
10
|
+
let react = require("react");
|
|
11
|
+
react = require_rolldown_runtime.__toESM(react);
|
|
10
12
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
11
13
|
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
12
14
|
|
|
13
15
|
//#region src/avatar-upload/AvatarUploadItem.tsx
|
|
14
16
|
const AvatarUploadItem = (props) => {
|
|
15
|
-
const { file, currentSize, change,
|
|
17
|
+
const { file, currentSize, change = "Change", onFileSuccess, onFileError, onClear, onError } = props;
|
|
16
18
|
require_use_file_upload_progress_callbacks.useFileUploadProgressCallbacks(file, {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
+
onFileSuccess,
|
|
20
|
+
onFileError
|
|
19
21
|
});
|
|
20
22
|
const fileError = require_use_file_error.useFileError(file);
|
|
21
23
|
const isUploading = (0, __pixpilot_shadcn.useFileUpload)((store) => {
|
|
@@ -23,6 +25,12 @@ const AvatarUploadItem = (props) => {
|
|
|
23
25
|
if (store.files.get(file)?.status === "uploading") return true;
|
|
24
26
|
return false;
|
|
25
27
|
});
|
|
28
|
+
react.default.useEffect(() => {
|
|
29
|
+
if (fileError != null) onError?.(fileError);
|
|
30
|
+
return () => {
|
|
31
|
+
onError?.(null);
|
|
32
|
+
};
|
|
33
|
+
}, [fileError, onError]);
|
|
26
34
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.FileUploadItem, {
|
|
27
35
|
value: file,
|
|
28
36
|
className: "p-0 border-0 m-0",
|
|
@@ -34,12 +42,13 @@ const AvatarUploadItem = (props) => {
|
|
|
34
42
|
className: currentSize.avatar,
|
|
35
43
|
showChangeIcon: true,
|
|
36
44
|
iconClass: currentSize.icon,
|
|
45
|
+
onClear,
|
|
37
46
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AvatarUploadComponents.Image, { src: URL.createObjectURL(file) })
|
|
38
47
|
}), fileError != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TooltipProvider, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TooltipTrigger, {
|
|
39
48
|
asChild: true,
|
|
40
49
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
|
|
41
50
|
type: "button",
|
|
42
|
-
className: "absolute -top-
|
|
51
|
+
className: "absolute -top-3 -left-3 p-1",
|
|
43
52
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlertCircle, { className: "h-5 w-5 text-red-500" })
|
|
44
53
|
})
|
|
45
54
|
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TooltipContent, { children: fileError })] }) })]
|
|
@@ -4,14 +4,15 @@ import "../file-upload/index.js";
|
|
|
4
4
|
import { AvatarWrap, Image, MainWrapper, MessageComponent } from "./AvatarUploadComponents.js";
|
|
5
5
|
import { FileUploadItem, FileUploadItemProgress, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, cn, useFileUpload } from "@pixpilot/shadcn";
|
|
6
6
|
import { AlertCircle } from "lucide-react";
|
|
7
|
+
import React from "react";
|
|
7
8
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
9
|
|
|
9
10
|
//#region src/avatar-upload/AvatarUploadItem.tsx
|
|
10
11
|
const AvatarUploadItem = (props) => {
|
|
11
|
-
const { file, currentSize, change,
|
|
12
|
+
const { file, currentSize, change = "Change", onFileSuccess, onFileError, onClear, onError } = props;
|
|
12
13
|
useFileUploadProgressCallbacks(file, {
|
|
13
|
-
|
|
14
|
-
|
|
14
|
+
onFileSuccess,
|
|
15
|
+
onFileError
|
|
15
16
|
});
|
|
16
17
|
const fileError = useFileError(file);
|
|
17
18
|
const isUploading = useFileUpload((store) => {
|
|
@@ -19,6 +20,12 @@ const AvatarUploadItem = (props) => {
|
|
|
19
20
|
if (store.files.get(file)?.status === "uploading") return true;
|
|
20
21
|
return false;
|
|
21
22
|
});
|
|
23
|
+
React.useEffect(() => {
|
|
24
|
+
if (fileError != null) onError?.(fileError);
|
|
25
|
+
return () => {
|
|
26
|
+
onError?.(null);
|
|
27
|
+
};
|
|
28
|
+
}, [fileError, onError]);
|
|
22
29
|
return /* @__PURE__ */ jsx(FileUploadItem, {
|
|
23
30
|
value: file,
|
|
24
31
|
className: "p-0 border-0 m-0",
|
|
@@ -30,12 +37,13 @@ const AvatarUploadItem = (props) => {
|
|
|
30
37
|
className: currentSize.avatar,
|
|
31
38
|
showChangeIcon: true,
|
|
32
39
|
iconClass: currentSize.icon,
|
|
40
|
+
onClear,
|
|
33
41
|
children: /* @__PURE__ */ jsx(Image, { src: URL.createObjectURL(file) })
|
|
34
42
|
}), fileError != null && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
|
|
35
43
|
asChild: true,
|
|
36
44
|
children: /* @__PURE__ */ jsx("button", {
|
|
37
45
|
type: "button",
|
|
38
|
-
className: "absolute -top-
|
|
46
|
+
className: "absolute -top-3 -left-3 p-1",
|
|
39
47
|
children: /* @__PURE__ */ jsx(AlertCircle, { className: "h-5 w-5 text-red-500" })
|
|
40
48
|
})
|
|
41
49
|
}), /* @__PURE__ */ jsx(TooltipContent, { children: fileError })] }) })]
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
|
|
4
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
|
|
5
2
|
const require_use_file_upload_store = require('./hooks/use-file-upload-store.cjs');
|
|
6
3
|
const require_FileUploadItems = require('./FileUploadItems.cjs');
|
|
@@ -15,10 +12,8 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
|
15
12
|
|
|
16
13
|
//#region src/file-upload/FileUpload.tsx
|
|
17
14
|
function FileUpload(props) {
|
|
18
|
-
const { value, onChange, className, onAccept, maxFiles, preventDuplicates, onFileReject,
|
|
15
|
+
const { value, onChange, className, onAccept, maxFiles, preventDuplicates, onFileReject, onFileSuccess, onFileError,...rest } = props;
|
|
19
16
|
const multiple = props.multiple ?? true;
|
|
20
|
-
const onSuccess = multiple ? onFileSuccess : singleOnSuccess;
|
|
21
|
-
const onError = multiple ? onFileError : singleOnError;
|
|
22
17
|
const { handleAccept, displayFiles, deleteFile, getFile, orgValue } = require_use_file_upload_store.useFileUploadStore({
|
|
23
18
|
value,
|
|
24
19
|
onChange,
|
|
@@ -33,8 +28,8 @@ function FileUpload(props) {
|
|
|
33
28
|
const containerClasses = (0, __pixpilot_shadcn.cn)("p-1.5");
|
|
34
29
|
const handleError = react.useCallback((file, message) => {
|
|
35
30
|
if (onFileReject) onFileReject(file, message);
|
|
36
|
-
if (
|
|
37
|
-
}, [
|
|
31
|
+
if (onFileError) onFileError(file, message);
|
|
32
|
+
}, [onFileError, onFileReject]);
|
|
38
33
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.FileUpload, {
|
|
39
34
|
...rest,
|
|
40
35
|
value: orgValue,
|
|
@@ -66,8 +61,8 @@ function FileUpload(props) {
|
|
|
66
61
|
getFile,
|
|
67
62
|
maxFiles,
|
|
68
63
|
itemSize,
|
|
69
|
-
|
|
70
|
-
|
|
64
|
+
onFileSuccess,
|
|
65
|
+
onFileError,
|
|
71
66
|
className: containerClasses
|
|
72
67
|
})
|
|
73
68
|
})
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
|
|
4
1
|
import { useFileUploadStore } from "./hooks/use-file-upload-store.js";
|
|
5
2
|
import { FileUploadItems } from "./FileUploadItems.js";
|
|
6
3
|
import { FileUpload, FileUploadDropzone, cn } from "@pixpilot/shadcn";
|
|
@@ -10,10 +7,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
10
7
|
|
|
11
8
|
//#region src/file-upload/FileUpload.tsx
|
|
12
9
|
function FileUpload$1(props) {
|
|
13
|
-
const { value, onChange, className, onAccept, maxFiles, preventDuplicates, onFileReject,
|
|
10
|
+
const { value, onChange, className, onAccept, maxFiles, preventDuplicates, onFileReject, onFileSuccess, onFileError,...rest } = props;
|
|
14
11
|
const multiple = props.multiple ?? true;
|
|
15
|
-
const onSuccess = multiple ? onFileSuccess : singleOnSuccess;
|
|
16
|
-
const onError = multiple ? onFileError : singleOnError;
|
|
17
12
|
const { handleAccept, displayFiles, deleteFile, getFile, orgValue } = useFileUploadStore({
|
|
18
13
|
value,
|
|
19
14
|
onChange,
|
|
@@ -28,8 +23,8 @@ function FileUpload$1(props) {
|
|
|
28
23
|
const containerClasses = cn("p-1.5");
|
|
29
24
|
const handleError = React$1.useCallback((file, message) => {
|
|
30
25
|
if (onFileReject) onFileReject(file, message);
|
|
31
|
-
if (
|
|
32
|
-
}, [
|
|
26
|
+
if (onFileError) onFileError(file, message);
|
|
27
|
+
}, [onFileError, onFileReject]);
|
|
33
28
|
return /* @__PURE__ */ jsx(FileUpload, {
|
|
34
29
|
...rest,
|
|
35
30
|
value: orgValue,
|
|
@@ -61,8 +56,8 @@ function FileUpload$1(props) {
|
|
|
61
56
|
getFile,
|
|
62
57
|
maxFiles,
|
|
63
58
|
itemSize,
|
|
64
|
-
|
|
65
|
-
|
|
59
|
+
onFileSuccess,
|
|
60
|
+
onFileError,
|
|
66
61
|
className: containerClasses
|
|
67
62
|
})
|
|
68
63
|
})
|
|
@@ -11,7 +11,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
|
|
|
11
11
|
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
12
12
|
|
|
13
13
|
//#region src/file-upload/FileUploadItems.tsx
|
|
14
|
-
function FileUploadItems({ displayFiles, deleteFile, getFile, maxFiles, itemSize,
|
|
14
|
+
function FileUploadItems({ displayFiles, deleteFile, getFile, maxFiles, itemSize, onFileSuccess, onFileError, className }) {
|
|
15
15
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.FileUploadList, {
|
|
16
16
|
orientation: "horizontal",
|
|
17
17
|
forceMount: true,
|
|
@@ -24,8 +24,8 @@ function FileUploadItems({ displayFiles, deleteFile, getFile, maxFiles, itemSize
|
|
|
24
24
|
deleteFile,
|
|
25
25
|
getFile,
|
|
26
26
|
itemSize,
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
onFileSuccess,
|
|
28
|
+
onFileError
|
|
29
29
|
}, key);
|
|
30
30
|
}), maxFiles === void 0 || displayFiles.length < maxFiles ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
31
31
|
className: (0, __pixpilot_shadcn.cn)(itemSize, "flex items-center justify-center border-2 border-dashed rounded-md"),
|
|
@@ -7,7 +7,7 @@ import { Plus } from "lucide-react";
|
|
|
7
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
8
|
|
|
9
9
|
//#region src/file-upload/FileUploadItems.tsx
|
|
10
|
-
function FileUploadItems({ displayFiles, deleteFile, getFile, maxFiles, itemSize,
|
|
10
|
+
function FileUploadItems({ displayFiles, deleteFile, getFile, maxFiles, itemSize, onFileSuccess, onFileError, className }) {
|
|
11
11
|
return /* @__PURE__ */ jsxs(FileUploadList, {
|
|
12
12
|
orientation: "horizontal",
|
|
13
13
|
forceMount: true,
|
|
@@ -20,8 +20,8 @@ function FileUploadItems({ displayFiles, deleteFile, getFile, maxFiles, itemSize
|
|
|
20
20
|
deleteFile,
|
|
21
21
|
getFile,
|
|
22
22
|
itemSize,
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
onFileSuccess,
|
|
24
|
+
onFileError
|
|
25
25
|
}, key);
|
|
26
26
|
}), maxFiles === void 0 || displayFiles.length < maxFiles ? /* @__PURE__ */ jsx("div", {
|
|
27
27
|
className: cn(itemSize, "flex items-center justify-center border-2 border-dashed rounded-md"),
|
|
@@ -22,11 +22,11 @@ const Backdrop = ({ className, children }) => {
|
|
|
22
22
|
children
|
|
23
23
|
});
|
|
24
24
|
};
|
|
25
|
-
const FileUploadListItem = react.default.memo(({ fileMeta, deleteFile, getFile, itemSize,
|
|
25
|
+
const FileUploadListItem = react.default.memo(({ fileMeta, deleteFile, getFile, itemSize, onFileSuccess, onFileError }) => {
|
|
26
26
|
const file = getFile(fileMeta);
|
|
27
27
|
require_use_file_upload_progress_callbacks.useFileUploadProgressCallbacks(file, {
|
|
28
|
-
|
|
29
|
-
|
|
28
|
+
onFileSuccess,
|
|
29
|
+
onFileError
|
|
30
30
|
});
|
|
31
31
|
const storeFile = (0, __pixpilot_shadcn.useFileUpload)((store) => store.files.get(file));
|
|
32
32
|
const hasError = storeFile?.error != null;
|
|
@@ -16,11 +16,11 @@ const Backdrop = ({ className, children }) => {
|
|
|
16
16
|
children
|
|
17
17
|
});
|
|
18
18
|
};
|
|
19
|
-
const FileUploadListItem = React.memo(({ fileMeta, deleteFile, getFile, itemSize,
|
|
19
|
+
const FileUploadListItem = React.memo(({ fileMeta, deleteFile, getFile, itemSize, onFileSuccess, onFileError }) => {
|
|
20
20
|
const file = getFile(fileMeta);
|
|
21
21
|
useFileUploadProgressCallbacks(file, {
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
onFileSuccess,
|
|
23
|
+
onFileError
|
|
24
24
|
});
|
|
25
25
|
const storeFile = useFileUpload((store) => store.files.get(file));
|
|
26
26
|
const hasError = storeFile?.error != null;
|
|
@@ -7,7 +7,7 @@ react = require_rolldown_runtime.__toESM(react);
|
|
|
7
7
|
|
|
8
8
|
//#region src/file-upload/hooks/use-file-upload-progress-callbacks.ts
|
|
9
9
|
function useFileUploadProgressCallbacks(file, callBacks) {
|
|
10
|
-
const {
|
|
10
|
+
const { onFileSuccess, onFileError } = callBacks;
|
|
11
11
|
const fileMeta = (0, react.useMemo)(() => require_get_file_meta.getFileMeta(file), [file]);
|
|
12
12
|
const isChangeTrigged = (0, react.useRef)(false);
|
|
13
13
|
const isErrorTriggered = (0, react.useRef)(false);
|
|
@@ -27,21 +27,21 @@ function useFileUploadProgressCallbacks(file, callBacks) {
|
|
|
27
27
|
(0, react.useEffect)(() => {
|
|
28
28
|
if (isUploadSuccess && !isChangeTrigged.current) {
|
|
29
29
|
isChangeTrigged.current = true;
|
|
30
|
-
|
|
30
|
+
onFileSuccess?.(fileMeta);
|
|
31
31
|
}
|
|
32
32
|
}, [
|
|
33
33
|
isUploadSuccess,
|
|
34
|
-
|
|
34
|
+
onFileSuccess,
|
|
35
35
|
fileMeta
|
|
36
36
|
]);
|
|
37
37
|
(0, react.useEffect)(() => {
|
|
38
38
|
if (uploadError != null && !isErrorTriggered.current) {
|
|
39
39
|
isErrorTriggered.current = true;
|
|
40
|
-
|
|
40
|
+
onFileError?.(file, uploadError);
|
|
41
41
|
}
|
|
42
42
|
}, [
|
|
43
43
|
uploadError,
|
|
44
|
-
|
|
44
|
+
onFileError,
|
|
45
45
|
file
|
|
46
46
|
]);
|
|
47
47
|
}
|
|
@@ -4,7 +4,7 @@ import { useEffect, useMemo, useRef } from "react";
|
|
|
4
4
|
|
|
5
5
|
//#region src/file-upload/hooks/use-file-upload-progress-callbacks.ts
|
|
6
6
|
function useFileUploadProgressCallbacks(file, callBacks) {
|
|
7
|
-
const {
|
|
7
|
+
const { onFileSuccess, onFileError } = callBacks;
|
|
8
8
|
const fileMeta = useMemo(() => getFileMeta(file), [file]);
|
|
9
9
|
const isChangeTrigged = useRef(false);
|
|
10
10
|
const isErrorTriggered = useRef(false);
|
|
@@ -24,21 +24,21 @@ function useFileUploadProgressCallbacks(file, callBacks) {
|
|
|
24
24
|
useEffect(() => {
|
|
25
25
|
if (isUploadSuccess && !isChangeTrigged.current) {
|
|
26
26
|
isChangeTrigged.current = true;
|
|
27
|
-
|
|
27
|
+
onFileSuccess?.(fileMeta);
|
|
28
28
|
}
|
|
29
29
|
}, [
|
|
30
30
|
isUploadSuccess,
|
|
31
|
-
|
|
31
|
+
onFileSuccess,
|
|
32
32
|
fileMeta
|
|
33
33
|
]);
|
|
34
34
|
useEffect(() => {
|
|
35
35
|
if (uploadError != null && !isErrorTriggered.current) {
|
|
36
36
|
isErrorTriggered.current = true;
|
|
37
|
-
|
|
37
|
+
onFileError?.(file, uploadError);
|
|
38
38
|
}
|
|
39
39
|
}, [
|
|
40
40
|
uploadError,
|
|
41
|
-
|
|
41
|
+
onFileError,
|
|
42
42
|
file
|
|
43
43
|
]);
|
|
44
44
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { FileMetadata, FileUploadBaseProps, FileUploadProgressCallBacks, FileUploadProps,
|
|
1
|
+
import { FileMetadata, FileUploadBaseProps, FileUploadCallbacks, FileUploadProgressCallBacks, FileUploadProps, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, SingleFileUploadProps } from "./types/index.cjs";
|
|
2
2
|
import { FileUpload } from "./FileUpload.cjs";
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { FileMetadata, FileUploadBaseProps, FileUploadProgressCallBacks, FileUploadProps,
|
|
1
|
+
import { FileMetadata, FileUploadBaseProps, FileUploadCallbacks, FileUploadProgressCallBacks, FileUploadProps, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, SingleFileUploadProps } from "./types/index.js";
|
|
2
2
|
import { FileUpload } from "./FileUpload.js";
|
|
3
3
|
import "./hooks/index.js";
|
|
@@ -8,11 +8,7 @@ interface FileMetadata {
|
|
|
8
8
|
url?: string;
|
|
9
9
|
lastModified: number;
|
|
10
10
|
}
|
|
11
|
-
interface
|
|
12
|
-
onSuccess?: (fileMeta: FileMetadata) => void;
|
|
13
|
-
onError?: (file: File, error: string) => void;
|
|
14
|
-
}
|
|
15
|
-
interface MultiFileCallbacks {
|
|
11
|
+
interface FileUploadCallbacks {
|
|
16
12
|
onFileSuccess?: (fileMeta: FileMetadata) => void;
|
|
17
13
|
onFileError?: (file: File, error: string) => void;
|
|
18
14
|
}
|
|
@@ -26,16 +22,16 @@ type FileUploadProps$1 = ({
|
|
|
26
22
|
multiple: true;
|
|
27
23
|
value?: FileMetadata[];
|
|
28
24
|
onChange?: OnChangeMultipleFiles;
|
|
29
|
-
} & FileUploadBaseProps &
|
|
25
|
+
} & FileUploadBaseProps & FileUploadCallbacks) | ({
|
|
30
26
|
multiple?: false;
|
|
31
27
|
value?: FileMetadata | null;
|
|
32
28
|
onChange?: OnChangeSingleFile;
|
|
33
|
-
} & FileUploadBaseProps &
|
|
34
|
-
interface MultiFileUploadProps extends FileUploadBaseProps,
|
|
29
|
+
} & FileUploadBaseProps & FileUploadCallbacks);
|
|
30
|
+
interface MultiFileUploadProps extends FileUploadBaseProps, FileUploadCallbacks {
|
|
35
31
|
value?: FileMetadata[];
|
|
36
32
|
onChange?: OnChangeMultipleFiles;
|
|
37
33
|
}
|
|
38
|
-
interface SingleFileUploadProps extends Omit<FileUploadBaseProps, 'multiple'>,
|
|
34
|
+
interface SingleFileUploadProps extends Omit<FileUploadBaseProps, 'multiple'>, FileUploadCallbacks {
|
|
39
35
|
value?: FileMetadata | null;
|
|
40
36
|
onChange?: OnChangeSingleFile;
|
|
41
37
|
}
|
|
@@ -45,4 +41,4 @@ interface FileUploadProgressCallBacks {
|
|
|
45
41
|
onError: (file: File, error: Error) => void;
|
|
46
42
|
}
|
|
47
43
|
//#endregion
|
|
48
|
-
export { FileMetadata, FileUploadBaseProps, FileUploadProgressCallBacks, FileUploadProps$1 as FileUploadProps,
|
|
44
|
+
export { FileMetadata, FileUploadBaseProps, FileUploadCallbacks, FileUploadProgressCallBacks, FileUploadProps$1 as FileUploadProps, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, SingleFileUploadProps };
|
|
@@ -8,11 +8,7 @@ interface FileMetadata {
|
|
|
8
8
|
url?: string;
|
|
9
9
|
lastModified: number;
|
|
10
10
|
}
|
|
11
|
-
interface
|
|
12
|
-
onSuccess?: (fileMeta: FileMetadata) => void;
|
|
13
|
-
onError?: (file: File, error: string) => void;
|
|
14
|
-
}
|
|
15
|
-
interface MultiFileCallbacks {
|
|
11
|
+
interface FileUploadCallbacks {
|
|
16
12
|
onFileSuccess?: (fileMeta: FileMetadata) => void;
|
|
17
13
|
onFileError?: (file: File, error: string) => void;
|
|
18
14
|
}
|
|
@@ -26,16 +22,16 @@ type FileUploadProps$1 = ({
|
|
|
26
22
|
multiple: true;
|
|
27
23
|
value?: FileMetadata[];
|
|
28
24
|
onChange?: OnChangeMultipleFiles;
|
|
29
|
-
} & FileUploadBaseProps &
|
|
25
|
+
} & FileUploadBaseProps & FileUploadCallbacks) | ({
|
|
30
26
|
multiple?: false;
|
|
31
27
|
value?: FileMetadata | null;
|
|
32
28
|
onChange?: OnChangeSingleFile;
|
|
33
|
-
} & FileUploadBaseProps &
|
|
34
|
-
interface MultiFileUploadProps extends FileUploadBaseProps,
|
|
29
|
+
} & FileUploadBaseProps & FileUploadCallbacks);
|
|
30
|
+
interface MultiFileUploadProps extends FileUploadBaseProps, FileUploadCallbacks {
|
|
35
31
|
value?: FileMetadata[];
|
|
36
32
|
onChange?: OnChangeMultipleFiles;
|
|
37
33
|
}
|
|
38
|
-
interface SingleFileUploadProps extends Omit<FileUploadBaseProps, 'multiple'>,
|
|
34
|
+
interface SingleFileUploadProps extends Omit<FileUploadBaseProps, 'multiple'>, FileUploadCallbacks {
|
|
39
35
|
value?: FileMetadata | null;
|
|
40
36
|
onChange?: OnChangeSingleFile;
|
|
41
37
|
}
|
|
@@ -45,4 +41,4 @@ interface FileUploadProgressCallBacks {
|
|
|
45
41
|
onError: (file: File, error: Error) => void;
|
|
46
42
|
}
|
|
47
43
|
//#endregion
|
|
48
|
-
export { FileMetadata, FileUploadBaseProps, FileUploadProgressCallBacks, FileUploadProps$1 as FileUploadProps,
|
|
44
|
+
export { FileMetadata, FileUploadBaseProps, FileUploadCallbacks, FileUploadProgressCallBacks, FileUploadProps$1 as FileUploadProps, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, SingleFileUploadProps };
|
|
@@ -17,16 +17,18 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
|
17
17
|
* FileUploadInline - An inline file upload component using FileUpload primitives
|
|
18
18
|
*/
|
|
19
19
|
function FileUploadInline(props) {
|
|
20
|
-
const { value, onChange, className, disabled = require_defaults.defaultOptions.disabled, buttonText: buttonTextProp, showIcon = require_defaults.defaultOptions.showIcon, onAccept, preventDuplicates,...rest } = props;
|
|
21
|
-
const multiple =
|
|
20
|
+
const { value, onChange, className, disabled = require_defaults.defaultOptions.disabled, buttonText: buttonTextProp, showIcon = require_defaults.defaultOptions.showIcon, onAccept, multiple: multipleProp = false, preventDuplicates,...rest } = props;
|
|
21
|
+
const multiple = multipleProp ?? require_defaults.defaultOptions.multiple;
|
|
22
22
|
const buttonText = buttonTextProp ?? (multiple ? "Click to upload files" : "Click to upload a file");
|
|
23
23
|
const dropzoneClassName = (0, __pixpilot_shadcn.cn)("rounded-md border border-input border-solid flex-row bg-background px-3 py-0 display-block w-full cursor-pointer", "hover:bg-accent/50 transition-colors m-0", disabled && "cursor-not-allowed opacity-50");
|
|
24
24
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FileUploadRoot.FileUploadRoot, {
|
|
25
25
|
...rest,
|
|
26
26
|
value,
|
|
27
|
+
onChange,
|
|
27
28
|
onAccept,
|
|
28
29
|
disabled,
|
|
29
30
|
multiple,
|
|
31
|
+
preventDuplicates,
|
|
30
32
|
className: (0, __pixpilot_shadcn.cn)("space-y-2", className),
|
|
31
33
|
slots: { trigger: { className: dropzoneClassName } },
|
|
32
34
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { FileUploadInlineProps } from "./types.js";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime13 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/file-upload-inline/FileUploadInline.d.ts
|
|
5
5
|
/**
|
|
6
6
|
* FileUploadInline - An inline file upload component using FileUpload primitives
|
|
7
7
|
*/
|
|
8
|
-
declare function FileUploadInline(props: FileUploadInlineProps):
|
|
8
|
+
declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime13.JSX.Element;
|
|
9
9
|
//#endregion
|
|
10
10
|
export { FileUploadInline };
|
|
@@ -13,16 +13,18 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
13
13
|
* FileUploadInline - An inline file upload component using FileUpload primitives
|
|
14
14
|
*/
|
|
15
15
|
function FileUploadInline(props) {
|
|
16
|
-
const { value, onChange, className, disabled = defaultOptions.disabled, buttonText: buttonTextProp, showIcon = defaultOptions.showIcon, onAccept, preventDuplicates,...rest } = props;
|
|
17
|
-
const multiple =
|
|
16
|
+
const { value, onChange, className, disabled = defaultOptions.disabled, buttonText: buttonTextProp, showIcon = defaultOptions.showIcon, onAccept, multiple: multipleProp = false, preventDuplicates,...rest } = props;
|
|
17
|
+
const multiple = multipleProp ?? defaultOptions.multiple;
|
|
18
18
|
const buttonText = buttonTextProp ?? (multiple ? "Click to upload files" : "Click to upload a file");
|
|
19
19
|
const dropzoneClassName = cn("rounded-md border border-input border-solid flex-row bg-background px-3 py-0 display-block w-full cursor-pointer", "hover:bg-accent/50 transition-colors m-0", disabled && "cursor-not-allowed opacity-50");
|
|
20
20
|
return /* @__PURE__ */ jsx(FileUploadRoot, {
|
|
21
21
|
...rest,
|
|
22
22
|
value,
|
|
23
|
+
onChange,
|
|
23
24
|
onAccept,
|
|
24
25
|
disabled,
|
|
25
26
|
multiple,
|
|
27
|
+
preventDuplicates,
|
|
26
28
|
className: cn("space-y-2", className),
|
|
27
29
|
slots: { trigger: { className: dropzoneClassName } },
|
|
28
30
|
children: /* @__PURE__ */ jsxs(Button, {
|
|
@@ -17,10 +17,9 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
|
17
17
|
* FileUploadInline - An inline file upload component using FileUpload primitives
|
|
18
18
|
*/
|
|
19
19
|
function FileUploadRoot(props) {
|
|
20
|
-
const { value, onChange, className, disabled, children, onAccept, preventDuplicates, slots,
|
|
20
|
+
const { value, onChange, className, disabled, children, onAccept, maxFiles, preventDuplicates, slots, onFileSuccess, onFileError,...rest } = props;
|
|
21
21
|
const multiple = props.multiple ?? false;
|
|
22
|
-
const
|
|
23
|
-
const onError = multiple ? onFileError : singleOnError;
|
|
22
|
+
const effectiveMaxFiles = multiple ? maxFiles : 1;
|
|
24
23
|
const { handleAccept, displayFiles, deleteFile, getFile, orgValue } = require_use_file_upload_store.useFileUploadStore({
|
|
25
24
|
value,
|
|
26
25
|
onChange,
|
|
@@ -28,9 +27,14 @@ function FileUploadRoot(props) {
|
|
|
28
27
|
preventDuplicates
|
|
29
28
|
});
|
|
30
29
|
const handleFileAccept = (0, react.useCallback)((files) => {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
30
|
+
const acceptedFiles = multiple ? files : files.slice(0, 1);
|
|
31
|
+
onAccept?.(acceptedFiles);
|
|
32
|
+
handleAccept(acceptedFiles);
|
|
33
|
+
}, [
|
|
34
|
+
handleAccept,
|
|
35
|
+
multiple,
|
|
36
|
+
onAccept
|
|
37
|
+
]);
|
|
34
38
|
if (process.env.NODE_ENV !== "production") {
|
|
35
39
|
if (!children && !(slots && slots.trigger)) throw new Error("FileUploadRoot requires children or slots.trigger to be passed in.");
|
|
36
40
|
}
|
|
@@ -40,6 +44,7 @@ function FileUploadRoot(props) {
|
|
|
40
44
|
onAccept: handleFileAccept,
|
|
41
45
|
disabled,
|
|
42
46
|
multiple,
|
|
47
|
+
maxFiles: effectiveMaxFiles,
|
|
43
48
|
className: (0, __pixpilot_shadcn.cn)("space-y-2", className),
|
|
44
49
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(multiple || !multiple && displayFiles.length === 0) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.FileUploadDropzone, {
|
|
45
50
|
...slots?.dropzone || {},
|
|
@@ -60,8 +65,8 @@ function FileUploadRoot(props) {
|
|
|
60
65
|
file: getFile(data),
|
|
61
66
|
disabled,
|
|
62
67
|
onDelete: deleteFile,
|
|
63
|
-
|
|
64
|
-
|
|
68
|
+
onFileSuccess,
|
|
69
|
+
onFileError,
|
|
65
70
|
...slots?.fileItem || {}
|
|
66
71
|
}, key);
|
|
67
72
|
})
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { FileUploadRootProps } from "./types.cjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime13 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/file-upload-root/FileUploadRoot.d.ts
|
|
5
5
|
/**
|
|
6
6
|
* FileUploadInline - An inline file upload component using FileUpload primitives
|
|
7
7
|
*/
|
|
8
|
-
declare function FileUploadRoot(props: FileUploadRootProps):
|
|
8
|
+
declare function FileUploadRoot(props: FileUploadRootProps): react_jsx_runtime13.JSX.Element;
|
|
9
9
|
declare namespace FileUploadRoot {
|
|
10
10
|
var displayName: string;
|
|
11
11
|
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { FileUploadRootProps } from "./types.js";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime12 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/file-upload-root/FileUploadRoot.d.ts
|
|
5
5
|
/**
|
|
6
6
|
* FileUploadInline - An inline file upload component using FileUpload primitives
|
|
7
7
|
*/
|
|
8
|
-
declare function FileUploadRoot(props: FileUploadRootProps):
|
|
8
|
+
declare function FileUploadRoot(props: FileUploadRootProps): react_jsx_runtime12.JSX.Element;
|
|
9
9
|
declare namespace FileUploadRoot {
|
|
10
10
|
var displayName: string;
|
|
11
11
|
}
|
|
@@ -13,10 +13,9 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
13
13
|
* FileUploadInline - An inline file upload component using FileUpload primitives
|
|
14
14
|
*/
|
|
15
15
|
function FileUploadRoot(props) {
|
|
16
|
-
const { value, onChange, className, disabled, children, onAccept, preventDuplicates, slots,
|
|
16
|
+
const { value, onChange, className, disabled, children, onAccept, maxFiles, preventDuplicates, slots, onFileSuccess, onFileError,...rest } = props;
|
|
17
17
|
const multiple = props.multiple ?? false;
|
|
18
|
-
const
|
|
19
|
-
const onError = multiple ? onFileError : singleOnError;
|
|
18
|
+
const effectiveMaxFiles = multiple ? maxFiles : 1;
|
|
20
19
|
const { handleAccept, displayFiles, deleteFile, getFile, orgValue } = useFileUploadStore({
|
|
21
20
|
value,
|
|
22
21
|
onChange,
|
|
@@ -24,9 +23,14 @@ function FileUploadRoot(props) {
|
|
|
24
23
|
preventDuplicates
|
|
25
24
|
});
|
|
26
25
|
const handleFileAccept = useCallback((files) => {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
26
|
+
const acceptedFiles = multiple ? files : files.slice(0, 1);
|
|
27
|
+
onAccept?.(acceptedFiles);
|
|
28
|
+
handleAccept(acceptedFiles);
|
|
29
|
+
}, [
|
|
30
|
+
handleAccept,
|
|
31
|
+
multiple,
|
|
32
|
+
onAccept
|
|
33
|
+
]);
|
|
30
34
|
if (!children && !(slots && slots.trigger)) throw new Error("FileUploadRoot requires children or slots.trigger to be passed in.");
|
|
31
35
|
return /* @__PURE__ */ jsx(FileUpload, {
|
|
32
36
|
...rest,
|
|
@@ -34,6 +38,7 @@ function FileUploadRoot(props) {
|
|
|
34
38
|
onAccept: handleFileAccept,
|
|
35
39
|
disabled,
|
|
36
40
|
multiple,
|
|
41
|
+
maxFiles: effectiveMaxFiles,
|
|
37
42
|
className: cn("space-y-2", className),
|
|
38
43
|
children: /* @__PURE__ */ jsxs(Fragment, { children: [(multiple || !multiple && displayFiles.length === 0) && /* @__PURE__ */ jsx(FileUploadDropzone, {
|
|
39
44
|
...slots?.dropzone || {},
|
|
@@ -54,8 +59,8 @@ function FileUploadRoot(props) {
|
|
|
54
59
|
file: getFile(data),
|
|
55
60
|
disabled,
|
|
56
61
|
onDelete: deleteFile,
|
|
57
|
-
|
|
58
|
-
|
|
62
|
+
onFileSuccess,
|
|
63
|
+
onFileError,
|
|
59
64
|
...slots?.fileItem || {}
|
|
60
65
|
}, key);
|
|
61
66
|
})
|
|
@@ -55,10 +55,10 @@ const FileItemInnerWrapper = ({ children }) => {
|
|
|
55
55
|
children
|
|
56
56
|
});
|
|
57
57
|
};
|
|
58
|
-
const FileUploadRootItem = react.default.memo(({ file, name = "", size = 0, type = "", lastModified = 0, disabled = false, onDelete,
|
|
58
|
+
const FileUploadRootItem = react.default.memo(({ file, name = "", size = 0, type = "", lastModified = 0, disabled = false, onDelete, onFileError, onFileSuccess }) => {
|
|
59
59
|
require_use_file_upload_progress_callbacks.useFileUploadProgressCallbacks(file, {
|
|
60
|
-
|
|
61
|
-
|
|
60
|
+
onFileSuccess,
|
|
61
|
+
onFileError
|
|
62
62
|
});
|
|
63
63
|
const fileError = require_use_file_error.useFileError(file);
|
|
64
64
|
const isUploading = (0, __pixpilot_shadcn.useFileUpload)((store) => {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { FileMetadata,
|
|
1
|
+
import { FileMetadata, FileUploadCallbacks } from "../file-upload/types/index.cjs";
|
|
2
2
|
import { FileWithMetadata } from "../file-upload/utils/merge-file-metadata.cjs";
|
|
3
3
|
import React from "react";
|
|
4
4
|
|
|
5
5
|
//#region src/file-upload-root/FileUploadRootItem.d.ts
|
|
6
|
-
interface FileUploadRootItemProps extends Partial<FileMetadata>,
|
|
6
|
+
interface FileUploadRootItemProps extends Partial<FileMetadata>, FileUploadCallbacks {
|
|
7
7
|
file: File;
|
|
8
8
|
disabled?: boolean;
|
|
9
9
|
onDelete: (file: FileWithMetadata) => void;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { FileMetadata,
|
|
1
|
+
import { FileMetadata, FileUploadCallbacks } from "../file-upload/types/index.js";
|
|
2
2
|
import { FileWithMetadata } from "../file-upload/utils/merge-file-metadata.js";
|
|
3
3
|
import "../file-upload/utils/index.js";
|
|
4
4
|
import React from "react";
|
|
5
5
|
|
|
6
6
|
//#region src/file-upload-root/FileUploadRootItem.d.ts
|
|
7
|
-
interface FileUploadRootItemProps extends Partial<FileMetadata>,
|
|
7
|
+
interface FileUploadRootItemProps extends Partial<FileMetadata>, FileUploadCallbacks {
|
|
8
8
|
file: File;
|
|
9
9
|
disabled?: boolean;
|
|
10
10
|
onDelete: (file: FileWithMetadata) => void;
|
|
@@ -49,10 +49,10 @@ const FileItemInnerWrapper = ({ children }) => {
|
|
|
49
49
|
children
|
|
50
50
|
});
|
|
51
51
|
};
|
|
52
|
-
const FileUploadRootItem = React.memo(({ file, name = "", size = 0, type = "", lastModified = 0, disabled = false, onDelete,
|
|
52
|
+
const FileUploadRootItem = React.memo(({ file, name = "", size = 0, type = "", lastModified = 0, disabled = false, onDelete, onFileError, onFileSuccess }) => {
|
|
53
53
|
useFileUploadProgressCallbacks(file, {
|
|
54
|
-
|
|
55
|
-
|
|
54
|
+
onFileSuccess,
|
|
55
|
+
onFileError
|
|
56
56
|
});
|
|
57
57
|
const fileError = useFileError(file);
|
|
58
58
|
const isUploading = useFileUpload((store) => {
|
package/dist/index.d.cts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FileMetadata, FileUploadBaseProps, FileUploadProgressCallBacks, FileUploadProps,
|
|
1
|
+
import { FileMetadata, FileUploadBaseProps, FileUploadCallbacks, FileUploadProgressCallBacks, FileUploadProps, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, SingleFileUploadProps } from "./file-upload/types/index.cjs";
|
|
2
2
|
import { FileUpload } from "./file-upload/FileUpload.cjs";
|
|
3
3
|
import "./file-upload/index.cjs";
|
|
4
4
|
import { AbsoluteFill } from "./AbsoluteFill.cjs";
|
|
@@ -100,4 +100,4 @@ import "./toast/index.cjs";
|
|
|
100
100
|
import { ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, ToggleGroupValue } from "./ToggleGroup.cjs";
|
|
101
101
|
import { isSvgMarkupString, svgMarkupToMaskUrl } from "./utils/svg.cjs";
|
|
102
102
|
import { cn } from "@pixpilot/shadcn";
|
|
103
|
-
export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertToastProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonExtended, ButtonExtendedLoaderProps, ButtonExtendedProps, ButtonGroup, ButtonGroupProps, ButtonGroupSeparator, ButtonGroupText, ButtonProps, COLOR_PICKER_PALETTE_BUTTON_CLASSES, COMMON_COLORS, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerAlphaSlider, ColorPickerArea, ColorPickerBase, ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerButton, ColorPickerButtonProps, ColorPickerColorPalette, ColorPickerColorPaletteProps, ColorPickerCompactControls, ColorPickerCompactControlsProps, ColorPickerContent, ColorPickerContext, Consumer as ColorPickerContextContextConsumer, Provider as ColorPickerContextContextProvider, ColorPickerContextStates, ColorPickerControls, ColorPickerControlsProps, ColorPickerEyeDropper, ColorPickerFormatControls, ColorPickerFormatControlsProps, ColorPickerFormatInput, ColorPickerFormatInputProps, ColorPickerFormatSelect, ColorPickerFullControls, ColorPickerFullControlsProps, ColorPickerHueSlider, ColorPickerInput, ColorPickerInputProps, ColorPickerPaletteButton, ColorPickerPaletteButtonProps, ColorPickerPaletteSwatch, ColorPickerProps, ColorPickerRoot, ColorPickerRootProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, Dialog, DialogBody, DialogClose, DialogContent, DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogProvider, DialogProviderProps, DialogTitle, DialogTrigger, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, FileUploadRoot, FileUploadRootItem, FileUploadRootItemProps, FileUploadRootProps, FileUploadRootPropsBaseProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, IconToggle, IconToggleProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoadingOverlay, LoadingOverlayProps,
|
|
103
|
+
export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertToastProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonExtended, ButtonExtendedLoaderProps, ButtonExtendedProps, ButtonGroup, ButtonGroupProps, ButtonGroupSeparator, ButtonGroupText, ButtonProps, COLOR_PICKER_PALETTE_BUTTON_CLASSES, COMMON_COLORS, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerAlphaSlider, ColorPickerArea, ColorPickerBase, ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerButton, ColorPickerButtonProps, ColorPickerColorPalette, ColorPickerColorPaletteProps, ColorPickerCompactControls, ColorPickerCompactControlsProps, ColorPickerContent, ColorPickerContext, Consumer as ColorPickerContextContextConsumer, Provider as ColorPickerContextContextProvider, ColorPickerContextStates, ColorPickerControls, ColorPickerControlsProps, ColorPickerEyeDropper, ColorPickerFormatControls, ColorPickerFormatControlsProps, ColorPickerFormatInput, ColorPickerFormatInputProps, ColorPickerFormatSelect, ColorPickerFullControls, ColorPickerFullControlsProps, ColorPickerHueSlider, ColorPickerInput, ColorPickerInputProps, ColorPickerPaletteButton, ColorPickerPaletteButtonProps, ColorPickerPaletteSwatch, ColorPickerProps, ColorPickerRoot, ColorPickerRootProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, Dialog, DialogBody, DialogClose, DialogContent, DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogProvider, DialogProviderProps, DialogTitle, DialogTrigger, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadCallbacks, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, FileUploadRoot, FileUploadRootItem, FileUploadRootItemProps, FileUploadRootProps, FileUploadRootPropsBaseProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, IconToggle, IconToggleProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoadingOverlay, LoadingOverlayProps, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, Popover, PopoverAnchor, PopoverCloseButtonProps, PopoverContent, PopoverContentProps, PopoverContentUnstyled, PopoverTrigger, PresetColor, Rating, RatingButton, RatingButtonProps, RatingColor, RatingOption, RatingProps, RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectContentProps, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputInline, TagsInputInlineItem, TagsInputInlineProps, TagsInputProps, ThemeModeDropdown, ThemeModeDropdownProps, ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize, ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps, ThemeModeToggleButton, ThemeModeToggleButtonProps, ThemeProvider, ThemeProviderProps, ToastFunction, ToastMessage, Toaster, ToggleButton, ToggleButtonProps, ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, ToggleGroupValue, ToolbarItems, cn, isSvgMarkupString, showConfirmDialog, svgMarkupToMaskUrl, toast, useColorPickerContext, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FileMetadata, FileUploadBaseProps, FileUploadProgressCallBacks, FileUploadProps,
|
|
1
|
+
import { FileMetadata, FileUploadBaseProps, FileUploadCallbacks, FileUploadProgressCallBacks, FileUploadProps, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, SingleFileUploadProps } from "./file-upload/types/index.js";
|
|
2
2
|
import { FileUpload } from "./file-upload/FileUpload.js";
|
|
3
3
|
import "./file-upload/index.js";
|
|
4
4
|
import { AbsoluteFill } from "./AbsoluteFill.js";
|
|
@@ -100,4 +100,4 @@ import "./toast/index.js";
|
|
|
100
100
|
import { ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, ToggleGroupValue } from "./ToggleGroup.js";
|
|
101
101
|
import { isSvgMarkupString, svgMarkupToMaskUrl } from "./utils/svg.js";
|
|
102
102
|
import { cn } from "@pixpilot/shadcn";
|
|
103
|
-
export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertToastProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonExtended, ButtonExtendedLoaderProps, ButtonExtendedProps, ButtonGroup, ButtonGroupProps, ButtonGroupSeparator, ButtonGroupText, ButtonProps, COLOR_PICKER_PALETTE_BUTTON_CLASSES, COMMON_COLORS, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerAlphaSlider, ColorPickerArea, ColorPickerBase, ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerButton, ColorPickerButtonProps, ColorPickerColorPalette, ColorPickerColorPaletteProps, ColorPickerCompactControls, ColorPickerCompactControlsProps, ColorPickerContent, ColorPickerContext, Consumer as ColorPickerContextContextConsumer, Provider as ColorPickerContextContextProvider, ColorPickerContextStates, ColorPickerControls, ColorPickerControlsProps, ColorPickerEyeDropper, ColorPickerFormatControls, ColorPickerFormatControlsProps, ColorPickerFormatInput, ColorPickerFormatInputProps, ColorPickerFormatSelect, ColorPickerFullControls, ColorPickerFullControlsProps, ColorPickerHueSlider, ColorPickerInput, ColorPickerInputProps, ColorPickerPaletteButton, ColorPickerPaletteButtonProps, ColorPickerPaletteSwatch, ColorPickerProps, ColorPickerRoot, ColorPickerRootProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, Dialog, DialogBody, DialogClose, DialogContent, DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogProvider, DialogProviderProps, DialogTitle, DialogTrigger, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, FileUploadRoot, FileUploadRootItem, FileUploadRootItemProps, FileUploadRootProps, FileUploadRootPropsBaseProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, IconToggle, IconToggleProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoadingOverlay, LoadingOverlayProps,
|
|
103
|
+
export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertToastProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonExtended, ButtonExtendedLoaderProps, ButtonExtendedProps, ButtonGroup, ButtonGroupProps, ButtonGroupSeparator, ButtonGroupText, ButtonProps, COLOR_PICKER_PALETTE_BUTTON_CLASSES, COMMON_COLORS, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerAlphaSlider, ColorPickerArea, ColorPickerBase, ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerButton, ColorPickerButtonProps, ColorPickerColorPalette, ColorPickerColorPaletteProps, ColorPickerCompactControls, ColorPickerCompactControlsProps, ColorPickerContent, ColorPickerContext, Consumer as ColorPickerContextContextConsumer, Provider as ColorPickerContextContextProvider, ColorPickerContextStates, ColorPickerControls, ColorPickerControlsProps, ColorPickerEyeDropper, ColorPickerFormatControls, ColorPickerFormatControlsProps, ColorPickerFormatInput, ColorPickerFormatInputProps, ColorPickerFormatSelect, ColorPickerFullControls, ColorPickerFullControlsProps, ColorPickerHueSlider, ColorPickerInput, ColorPickerInputProps, ColorPickerPaletteButton, ColorPickerPaletteButtonProps, ColorPickerPaletteSwatch, ColorPickerProps, ColorPickerRoot, ColorPickerRootProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, Dialog, DialogBody, DialogClose, DialogContent, DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogProvider, DialogProviderProps, DialogTitle, DialogTrigger, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadCallbacks, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, FileUploadRoot, FileUploadRootItem, FileUploadRootItemProps, FileUploadRootProps, FileUploadRootPropsBaseProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, IconToggle, IconToggleProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoadingOverlay, LoadingOverlayProps, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, Popover, PopoverAnchor, PopoverCloseButtonProps, PopoverContent, PopoverContentProps, PopoverContentUnstyled, PopoverTrigger, PresetColor, Rating, RatingButton, RatingButtonProps, RatingColor, RatingOption, RatingProps, RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectContentProps, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputInline, TagsInputInlineItem, TagsInputInlineProps, TagsInputProps, ThemeModeDropdown, ThemeModeDropdownProps, ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize, ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps, ThemeModeToggleButton, ThemeModeToggleButtonProps, ThemeProvider, ThemeProviderProps, ToastFunction, ToastMessage, Toaster, ToggleButton, ToggleButtonProps, ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, ToggleGroupValue, ToolbarItems, cn, isSvgMarkupString, showConfirmDialog, svgMarkupToMaskUrl, toast, useColorPickerContext, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };
|
package/dist/input/Input.d.cts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime14 from "react/jsx-runtime";
|
|
2
2
|
import { InputProps } from "@pixpilot/shadcn";
|
|
3
3
|
import * as React$1 from "react";
|
|
4
4
|
|
|
@@ -10,6 +10,6 @@ type InputProps$1 = InputProps & {
|
|
|
10
10
|
prefixClassName?: string;
|
|
11
11
|
suffixClassName?: string;
|
|
12
12
|
};
|
|
13
|
-
declare function Input(props: InputProps$1):
|
|
13
|
+
declare function Input(props: InputProps$1): react_jsx_runtime14.JSX.Element;
|
|
14
14
|
//#endregion
|
|
15
15
|
export { Input, InputProps$1 as InputProps };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CommandOptionListItem } from "../CommandOptionList.js";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime16 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/tags-input/TagsInput.d.ts
|
|
5
5
|
interface TagsInputProps {
|
|
@@ -57,6 +57,6 @@ declare function TagsInput({
|
|
|
57
57
|
addOnTab,
|
|
58
58
|
onValidate,
|
|
59
59
|
addButtonVisibility
|
|
60
|
-
}: TagsInputProps):
|
|
60
|
+
}: TagsInputProps): react_jsx_runtime16.JSX.Element;
|
|
61
61
|
//#endregion
|
|
62
62
|
export { TagsInput, TagsInputProps };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ChangeEventHandler, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, Ref } from "react";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react_jsx_runtime15 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/tags-input/TagsInputInline.d.ts
|
|
5
5
|
interface TagsInputInlineItem {
|
|
@@ -75,6 +75,6 @@ declare function TagsInputInline({
|
|
|
75
75
|
canAddCurrentValue,
|
|
76
76
|
onAddCurrentInput,
|
|
77
77
|
showClear
|
|
78
|
-
}: TagsInputInlineProps):
|
|
78
|
+
}: TagsInputInlineProps): react_jsx_runtime15.JSX.Element;
|
|
79
79
|
//#endregion
|
|
80
80
|
export { TagsInputInline, TagsInputInlineItem, TagsInputInlineProps };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime18 from "react/jsx-runtime";
|
|
2
2
|
|
|
3
3
|
//#region src/theme-toggle/ThemeModeDropdown.d.ts
|
|
4
4
|
interface ThemeModeDropdownProps {
|
|
@@ -17,7 +17,7 @@ interface ThemeModeDropdownProps {
|
|
|
17
17
|
* Provides Light / Dark / System options.
|
|
18
18
|
* Pure component - requires themeValue and onChange props.
|
|
19
19
|
*/
|
|
20
|
-
declare function ThemeModeDropdown(props: ThemeModeDropdownProps):
|
|
20
|
+
declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime18.JSX.Element;
|
|
21
21
|
declare namespace ThemeModeDropdown {
|
|
22
22
|
var displayName: string;
|
|
23
23
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime19 from "react/jsx-runtime";
|
|
2
2
|
|
|
3
3
|
//#region src/theme-toggle/ThemeModeSwitchInside.d.ts
|
|
4
4
|
type ThemeModeSwitchInsideSize = 'sm' | 'md' | 'lg';
|
|
@@ -25,7 +25,7 @@ interface ThemeModeSwitchInsideProps {
|
|
|
25
25
|
* Icons are embedded within the switch control.
|
|
26
26
|
* Pure component - requires value and onChange props.
|
|
27
27
|
*/
|
|
28
|
-
declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps):
|
|
28
|
+
declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime19.JSX.Element;
|
|
29
29
|
declare namespace ThemeModeSwitchInside {
|
|
30
30
|
var displayName: string;
|
|
31
31
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime20 from "react/jsx-runtime";
|
|
2
2
|
|
|
3
3
|
//#region src/theme-toggle/ThemeModeSwitchOutside.d.ts
|
|
4
4
|
interface ThemeModeSwitchOutsideProps {
|
|
@@ -22,7 +22,7 @@ interface ThemeModeSwitchOutsideProps {
|
|
|
22
22
|
* Icons flank the switch control on either side.
|
|
23
23
|
* Pure component - requires value and onChange props.
|
|
24
24
|
*/
|
|
25
|
-
declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps):
|
|
25
|
+
declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime20.JSX.Element;
|
|
26
26
|
declare namespace ThemeModeSwitchOutside {
|
|
27
27
|
var displayName: string;
|
|
28
28
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react_jsx_runtime17 from "react/jsx-runtime";
|
|
2
2
|
|
|
3
3
|
//#region src/theme-toggle/ThemeModeToggleButton.d.ts
|
|
4
4
|
interface ThemeModeToggleButtonProps {
|
|
@@ -13,7 +13,7 @@ interface ThemeModeToggleButtonProps {
|
|
|
13
13
|
* Light/Dark toggle button.
|
|
14
14
|
* Pure component - toggles between light and dark.
|
|
15
15
|
*/
|
|
16
|
-
declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps):
|
|
16
|
+
declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime17.JSX.Element;
|
|
17
17
|
declare namespace ThemeModeToggleButton {
|
|
18
18
|
var displayName: string;
|
|
19
19
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pixpilot/shadcn-ui",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.10.0",
|
|
5
5
|
"description": "Custom UI components and utilities built with shadcn/ui.",
|
|
6
6
|
"author": "m.doaie <m.doaie@hotmail.com>",
|
|
7
7
|
"license": "MIT",
|
|
@@ -63,9 +63,9 @@
|
|
|
63
63
|
"@internal/eslint-config": "0.3.0",
|
|
64
64
|
"@internal/hooks": "0.0.0",
|
|
65
65
|
"@internal/prettier-config": "0.0.1",
|
|
66
|
-
"@internal/tsconfig": "0.1.0",
|
|
67
66
|
"@internal/tsdown-config": "0.1.0",
|
|
68
|
-
"@internal/vitest-config": "0.1.0"
|
|
67
|
+
"@internal/vitest-config": "0.1.0",
|
|
68
|
+
"@internal/tsconfig": "0.1.0"
|
|
69
69
|
},
|
|
70
70
|
"prettier": "@internal/prettier-config",
|
|
71
71
|
"scripts": {
|