@moduix/react 2.5.1 → 2.7.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/README.md +24 -3
- package/THIRD_PARTY_NOTICES.md +49 -0
- package/dist/components/accordion/Accordion.js +20 -21
- package/dist/components/alert/Alert.js +18 -19
- package/dist/components/alert/Alert_module.css +3 -16
- package/dist/components/angle-slider/AngleSlider.d.ts +5 -11
- package/dist/components/angle-slider/AngleSlider.js +29 -71
- package/dist/components/aspect-ratio/AspectRatio.js +1 -2
- package/dist/components/aspect-ratio/AspectRatio_module.css +0 -13
- package/dist/components/avatar/Avatar.d.ts +3 -6
- package/dist/components/avatar/Avatar.js +14 -57
- package/dist/components/avatar/Avatar.module.js +1 -2
- package/dist/components/avatar/Avatar_module.css +0 -6
- package/dist/components/badge/Badge.d.ts +2 -2
- package/dist/components/badge/Badge.js +5 -10
- package/dist/components/badge/Badge_module.css +7 -14
- package/dist/components/bleed/Bleed.js +1 -2
- package/dist/components/breadcrumbs/Breadcrumbs.d.ts +1 -1
- package/dist/components/breadcrumbs/Breadcrumbs.js +16 -32
- package/dist/components/breadcrumbs/Breadcrumbs_module.css +12 -14
- package/dist/components/button/Button.d.ts +4 -4
- package/dist/components/button/Button.js +1 -2
- package/dist/components/button/Button_module.css +2 -8
- package/dist/components/card/Card.d.ts +15 -15
- package/dist/components/card/Card.js +30 -31
- package/dist/components/card/Card_module.css +2 -18
- package/dist/components/carousel/Carousel.d.ts +1 -1
- package/dist/components/carousel/Carousel.js +34 -35
- package/dist/components/carousel/Carousel_module.css +7 -0
- package/dist/components/chart/Chart.d.ts +9 -8
- package/dist/components/chart/Chart.js +21 -22
- package/dist/components/chart/Chart_module.css +0 -2
- package/dist/components/checkbox/Checkbox.d.ts +3 -2
- package/dist/components/checkbox/Checkbox.js +20 -43
- package/dist/components/clipboard/Clipboard.js +27 -27
- package/dist/components/close-button/CloseButton.js +1 -2
- package/dist/components/close-button/CloseButton_module.css +1 -10
- package/dist/components/collapsible/Collapsible.js +17 -20
- package/dist/components/collapsible/Collapsible_module.css +2 -4
- package/dist/components/color-picker/ColorPicker.d.ts +4 -3
- package/dist/components/color-picker/ColorPicker.js +79 -92
- package/dist/components/color-picker/ColorPicker_module.css +0 -1
- package/dist/components/combobox/Combobox.d.ts +5 -5
- package/dist/components/combobox/Combobox.js +51 -60
- package/dist/components/combobox/Combobox_module.css +0 -1
- package/dist/components/command-palette/CommandPalette.d.ts +7 -18
- package/dist/components/command-palette/CommandPalette.js +99 -126
- package/dist/components/command-palette/CommandPalette_module.css +11 -18
- package/dist/components/container/Container.js +1 -2
- package/dist/components/container/Container_module.css +1 -1
- package/dist/components/date-input/DateInput.d.ts +7 -9
- package/dist/components/date-input/DateInput.js +24 -54
- package/dist/components/date-input/DateInput_module.css +0 -1
- package/dist/components/date-picker/DatePicker.d.ts +1 -1
- package/dist/components/date-picker/DatePicker.js +84 -93
- package/dist/components/date-picker/DatePicker.module.js +1 -1
- package/dist/components/date-picker/DatePicker_module.css +5 -2
- package/dist/components/dialog/Dialog.d.ts +1 -1
- package/dist/components/dialog/Dialog.js +31 -32
- package/dist/components/drawer/Drawer.d.ts +6 -3
- package/dist/components/drawer/Drawer.js +63 -54
- package/dist/components/editable/Editable.d.ts +1 -1
- package/dist/components/editable/Editable.js +27 -28
- package/dist/components/empty/Empty.js +18 -19
- package/dist/components/field/Field.js +29 -30
- package/dist/components/fieldset/Fieldset.js +15 -16
- package/dist/components/file-upload/FileUpload.d.ts +3 -2
- package/dist/components/file-upload/FileUpload.js +52 -79
- package/dist/components/file-upload/FileUpload_module.css +4 -13
- package/dist/components/floating-panel/FloatingPanel.d.ts +3 -3
- package/dist/components/floating-panel/FloatingPanel.js +36 -37
- package/dist/components/floating-panel/FloatingPanel_module.css +4 -17
- package/dist/components/floating-panel/index.d.ts +1 -0
- package/dist/components/heading/Heading.js +1 -2
- package/dist/components/highlight/Highlight.js +1 -2
- package/dist/components/hover-card/HoverCard.d.ts +3 -2
- package/dist/components/hover-card/HoverCard.js +24 -15
- package/dist/components/hover-card/HoverCard.module.js +1 -0
- package/dist/components/hover-card/HoverCard_module.css +18 -3
- package/dist/components/hover-card/index.d.ts +1 -0
- package/dist/components/image/Image.js +1 -2
- package/dist/components/image-cropper/ImageCropper.d.ts +1 -1
- package/dist/components/image-cropper/ImageCropper.js +21 -22
- package/dist/components/input/Input.d.ts +4 -4
- package/dist/components/input/Input.js +1 -2
- package/dist/components/input-group/InputGroup.d.ts +5 -5
- package/dist/components/input-group/InputGroup.js +5 -6
- package/dist/components/json-tree-view/JsonTreeView.js +3 -4
- package/dist/components/json-tree-view/JsonTreeView_module.css +26 -10
- package/dist/components/kbd/Kbd.js +6 -7
- package/dist/components/lightbox/Lightbox.d.ts +1 -1
- package/dist/components/lightbox/Lightbox.js +38 -39
- package/dist/components/lightbox/Lightbox_module.css +0 -2
- package/dist/components/list/List.js +2 -3
- package/dist/components/listbox/Listbox.d.ts +5 -5
- package/dist/components/listbox/Listbox.js +50 -56
- package/dist/components/listbox/Listbox.module.js +2 -2
- package/dist/components/listbox/Listbox_module.css +3 -13
- package/dist/components/marquee/Marquee.js +18 -19
- package/dist/components/menu/Menu.d.ts +2 -1
- package/dist/components/menu/Menu.js +72 -79
- package/dist/components/menu/Menu.module.js +1 -1
- package/dist/components/menu/Menu_module.css +8 -8
- package/dist/components/native-select/NativeSelect.js +2 -3
- package/dist/components/native-select/NativeSelect_module.css +0 -1
- package/dist/components/navigation-menu/NavigationMenu.js +39 -58
- package/dist/components/navigation-menu/NavigationMenu.module.js +2 -3
- package/dist/components/navigation-menu/NavigationMenu_module.css +15 -32
- package/dist/components/number-input/NumberInput.js +25 -26
- package/dist/components/pagination/Pagination.js +28 -31
- package/dist/components/pagination/Pagination_module.css +1 -5
- package/dist/components/password-input/PasswordInput.js +20 -21
- package/dist/components/pin-input/PinInput.d.ts +3 -2
- package/dist/components/pin-input/PinInput.js +20 -61
- package/dist/components/popover/Popover.d.ts +5 -3
- package/dist/components/popover/Popover.js +41 -42
- package/dist/components/progress-circular/ProgressCircular.js +24 -25
- package/dist/components/progress-circular/ProgressCircular.module.js +1 -3
- package/dist/components/progress-circular/ProgressCircular_module.css +0 -10
- package/dist/components/progress-linear/ProgressLinear.js +21 -22
- package/dist/components/progress-linear/ProgressLinear.module.js +1 -5
- package/dist/components/progress-linear/ProgressLinear_module.css +0 -20
- package/dist/components/qr-code/QrCode.js +18 -19
- package/dist/components/radio-group/RadioGroup.d.ts +1 -0
- package/dist/components/radio-group/RadioGroup.js +25 -39
- package/dist/components/radio-group/RadioGroup_module.css +0 -1
- package/dist/components/rating-group/RatingGroup.d.ts +1 -0
- package/dist/components/rating-group/RatingGroup.js +19 -36
- package/dist/components/rating-group/RatingGroup_module.css +1 -1
- package/dist/components/scroll-area/ScrollArea.js +7 -8
- package/dist/components/segment-group/SegmentGroup.d.ts +1 -0
- package/dist/components/segment-group/SegmentGroup.js +28 -42
- package/dist/components/segment-group/SegmentGroup_module.css +4 -0
- package/dist/components/select/Select.d.ts +4 -7
- package/dist/components/select/Select.js +69 -119
- package/dist/components/select/Select.module.js +1 -1
- package/dist/components/select/Select_module.css +4 -31
- package/dist/components/separator/Separator.d.ts +6 -6
- package/dist/components/separator/Separator.js +1 -2
- package/dist/components/sidebar/Sidebar.d.ts +16 -16
- package/dist/components/sidebar/Sidebar.js +81 -86
- package/dist/components/sidebar/Sidebar.module.js +2 -3
- package/dist/components/sidebar/Sidebar_module.css +62 -158
- package/dist/components/signature-pad/SignaturePad.d.ts +5 -8
- package/dist/components/signature-pad/SignaturePad.js +28 -57
- package/dist/components/signature-pad/SignaturePad_module.css +0 -1
- package/dist/components/simple-grid/SimpleGrid.js +13 -8
- package/dist/components/skeleton/Skeleton.d.ts +2 -2
- package/dist/components/skeleton/Skeleton.js +1 -2
- package/dist/components/slider/Slider.d.ts +2 -2
- package/dist/components/slider/Slider.js +38 -52
- package/dist/components/spinner/Spinner.d.ts +2 -2
- package/dist/components/spinner/Spinner.js +1 -2
- package/dist/components/split-button/SplitButton.d.ts +7 -7
- package/dist/components/split-button/SplitButton.js +25 -17
- package/dist/components/splitter/Splitter.js +14 -15
- package/dist/components/splitter/Splitter_module.css +2 -10
- package/dist/components/stack/Stack.d.ts +6 -6
- package/dist/components/stack/Stack.js +4 -5
- package/dist/components/stack/Stack_module.css +1 -1
- package/dist/components/steps/Steps.js +35 -36
- package/dist/components/steps/Steps_module.css +2 -3
- package/dist/components/swap/Swap.js +9 -10
- package/dist/components/switch/Switch.d.ts +3 -2
- package/dist/components/switch/Switch.js +17 -40
- package/dist/components/switch/Switch_module.css +0 -1
- package/dist/components/table/Table.d.ts +5 -5
- package/dist/components/table/Table.js +35 -36
- package/dist/components/tabs/Tabs.js +18 -19
- package/dist/components/tabs/Tabs_module.css +5 -10
- package/dist/components/tag/Tag.js +5 -6
- package/dist/components/tag/Tag_module.css +2 -4
- package/dist/components/tags-input/TagsInput.d.ts +3 -3
- package/dist/components/tags-input/TagsInput.js +37 -91
- package/dist/components/tags-input/TagsInput_module.css +0 -1
- package/dist/components/text/Text.js +1 -2
- package/dist/components/textarea/Textarea.js +1 -2
- package/dist/components/timer/Timer.js +21 -22
- package/dist/components/toast/Toast.d.ts +1 -1
- package/dist/components/toast/Toast.js +15 -16
- package/dist/components/toast/Toast_module.css +1 -2
- package/dist/components/toc/Toc.js +29 -30
- package/dist/components/toc/Toc_module.css +2 -2
- package/dist/components/toggle/Toggle.js +6 -7
- package/dist/components/toggle-group/ToggleGroup.d.ts +1 -1
- package/dist/components/toggle-group/ToggleGroup.js +3 -4
- package/dist/components/tooltip/Tooltip.d.ts +1 -1
- package/dist/components/tooltip/Tooltip.js +17 -18
- package/dist/components/tooltip/Tooltip_module.css +1 -1
- package/dist/components/tour/Tour.d.ts +1 -1
- package/dist/components/tour/Tour.js +39 -40
- package/dist/components/tree-view/TreeView.d.ts +4 -4
- package/dist/components/tree-view/TreeView.js +47 -48
- package/dist/components/tree-view/TreeView_module.css +39 -12
- package/dist/components/typeset/Typeset.js +2 -3
- package/dist/components/typeset/Typeset_module.css +300 -159
- package/dist/internal/icons/ui/Icons.d.ts +9 -30
- package/dist/internal/icons/ui/Icons.js +67 -807
- package/dist/internal/icons/ui/index.d.ts +1 -1
- package/dist/styles/animations.css +310 -0
- package/dist/styles/style.css +168 -2
- package/package.json +23 -23
- package/dist/internal/normalizeClassName.d.ts +0 -1
- package/dist/internal/normalizeClassName.js +0 -2
|
@@ -3,22 +3,21 @@ import { jsx } from "react/jsx-runtime";
|
|
|
3
3
|
import { Field, useField, useFieldContext } from "@ark-ui/react/field";
|
|
4
4
|
import { clsx } from "clsx";
|
|
5
5
|
import { forwardRef } from "react";
|
|
6
|
-
import { normalizeClassName } from "../../internal/normalizeClassName.js";
|
|
7
6
|
import Field_module from "./Field.module.js";
|
|
8
7
|
const Field_FieldRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
|
|
9
8
|
return /*#__PURE__*/ jsx(Field.Root, {
|
|
10
9
|
ref: ref,
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
10
|
+
className: clsx(Field_module.root, className),
|
|
11
|
+
...props,
|
|
12
|
+
"data-slot": "field-root"
|
|
14
13
|
});
|
|
15
14
|
});
|
|
16
15
|
const Field_FieldRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
|
|
17
16
|
return /*#__PURE__*/ jsx(Field.RootProvider, {
|
|
18
17
|
ref: ref,
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
18
|
+
className: clsx(Field_module.root, className),
|
|
19
|
+
...props,
|
|
20
|
+
"data-slot": "field-root-provider"
|
|
22
21
|
});
|
|
23
22
|
});
|
|
24
23
|
const Field_FieldItem = /*#__PURE__*/ forwardRef(function({ className, children, value, ...props }, ref) {
|
|
@@ -26,9 +25,9 @@ const Field_FieldItem = /*#__PURE__*/ forwardRef(function({ className, children,
|
|
|
26
25
|
value: value,
|
|
27
26
|
children: /*#__PURE__*/ jsx("div", {
|
|
28
27
|
ref: ref,
|
|
29
|
-
|
|
30
|
-
className: clsx(Field_module.item, normalizeClassName(className)),
|
|
28
|
+
className: clsx(Field_module.item, className),
|
|
31
29
|
...props,
|
|
30
|
+
"data-slot": "field-item",
|
|
32
31
|
children: children
|
|
33
32
|
})
|
|
34
33
|
});
|
|
@@ -36,57 +35,57 @@ const Field_FieldItem = /*#__PURE__*/ forwardRef(function({ className, children,
|
|
|
36
35
|
const Field_FieldLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
|
|
37
36
|
return /*#__PURE__*/ jsx(Field.Label, {
|
|
38
37
|
ref: ref,
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
38
|
+
className: clsx(Field_module.label, className),
|
|
39
|
+
...props,
|
|
40
|
+
"data-slot": "field-label"
|
|
42
41
|
});
|
|
43
42
|
});
|
|
44
43
|
const Field_FieldInput = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
|
|
45
44
|
return /*#__PURE__*/ jsx(Field.Input, {
|
|
46
45
|
ref: ref,
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
46
|
+
className: clsx(Field_module.control, className),
|
|
47
|
+
...props,
|
|
48
|
+
"data-slot": "field-input"
|
|
50
49
|
});
|
|
51
50
|
});
|
|
52
51
|
const Field_FieldTextarea = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
|
|
53
52
|
return /*#__PURE__*/ jsx(Field.Textarea, {
|
|
54
53
|
ref: ref,
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
54
|
+
className: clsx(Field_module.control, Field_module.textarea, className),
|
|
55
|
+
...props,
|
|
56
|
+
"data-slot": "field-textarea"
|
|
58
57
|
});
|
|
59
58
|
});
|
|
60
59
|
const Field_FieldSelect = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
|
|
61
60
|
return /*#__PURE__*/ jsx(Field.Select, {
|
|
62
61
|
ref: ref,
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
62
|
+
className: clsx(Field_module.control, className),
|
|
63
|
+
...props,
|
|
64
|
+
"data-slot": "field-select"
|
|
66
65
|
});
|
|
67
66
|
});
|
|
68
67
|
const Field_FieldHelperText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
|
|
69
68
|
return /*#__PURE__*/ jsx(Field.HelperText, {
|
|
70
69
|
ref: ref,
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
70
|
+
className: clsx(Field_module.helperText, className),
|
|
71
|
+
...props,
|
|
72
|
+
"data-slot": "field-helper-text"
|
|
74
73
|
});
|
|
75
74
|
});
|
|
76
75
|
const Field_FieldErrorText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
|
|
77
76
|
return /*#__PURE__*/ jsx(Field.ErrorText, {
|
|
78
77
|
ref: ref,
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
78
|
+
className: clsx(Field_module.errorText, className),
|
|
79
|
+
...props,
|
|
80
|
+
"data-slot": "field-error-text"
|
|
82
81
|
});
|
|
83
82
|
});
|
|
84
83
|
const Field_FieldRequiredIndicator = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
|
|
85
84
|
return /*#__PURE__*/ jsx(Field.RequiredIndicator, {
|
|
86
85
|
ref: ref,
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
86
|
+
className: clsx(Field_module.requiredIndicator, className),
|
|
87
|
+
...props,
|
|
88
|
+
"data-slot": "field-required-indicator"
|
|
90
89
|
});
|
|
91
90
|
});
|
|
92
91
|
const Field_Field = Object.assign(Field_FieldRoot, {
|
|
@@ -3,46 +3,45 @@ import { jsx } from "react/jsx-runtime";
|
|
|
3
3
|
import { Fieldset, useFieldset, useFieldsetContext } from "@ark-ui/react/fieldset";
|
|
4
4
|
import { clsx } from "clsx";
|
|
5
5
|
import { forwardRef } from "react";
|
|
6
|
-
import { normalizeClassName } from "../../internal/normalizeClassName.js";
|
|
7
6
|
import Fieldset_module from "./Fieldset.module.js";
|
|
8
7
|
const Fieldset_FieldsetRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
|
|
9
8
|
return /*#__PURE__*/ jsx(Fieldset.Root, {
|
|
10
9
|
ref: ref,
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
10
|
+
className: clsx(Fieldset_module.root, className),
|
|
11
|
+
...props,
|
|
12
|
+
"data-slot": "fieldset-root"
|
|
14
13
|
});
|
|
15
14
|
});
|
|
16
15
|
const Fieldset_FieldsetRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
|
|
17
16
|
return /*#__PURE__*/ jsx(Fieldset.RootProvider, {
|
|
18
17
|
ref: ref,
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
18
|
+
className: clsx(Fieldset_module.root, className),
|
|
19
|
+
...props,
|
|
20
|
+
"data-slot": "fieldset-root-provider"
|
|
22
21
|
});
|
|
23
22
|
});
|
|
24
23
|
const Fieldset_FieldsetLegend = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
|
|
25
24
|
return /*#__PURE__*/ jsx(Fieldset.Legend, {
|
|
26
25
|
ref: ref,
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
26
|
+
className: clsx(Fieldset_module.legend, className),
|
|
27
|
+
...props,
|
|
28
|
+
"data-slot": "fieldset-legend"
|
|
30
29
|
});
|
|
31
30
|
});
|
|
32
31
|
const Fieldset_FieldsetHelperText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
|
|
33
32
|
return /*#__PURE__*/ jsx(Fieldset.HelperText, {
|
|
34
33
|
ref: ref,
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
34
|
+
className: clsx(Fieldset_module.helperText, className),
|
|
35
|
+
...props,
|
|
36
|
+
"data-slot": "fieldset-helper-text"
|
|
38
37
|
});
|
|
39
38
|
});
|
|
40
39
|
const Fieldset_FieldsetErrorText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
|
|
41
40
|
return /*#__PURE__*/ jsx(Fieldset.ErrorText, {
|
|
42
41
|
ref: ref,
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
42
|
+
className: clsx(Fieldset_module.errorText, className),
|
|
43
|
+
...props,
|
|
44
|
+
"data-slot": "fieldset-error-text"
|
|
46
45
|
});
|
|
47
46
|
});
|
|
48
47
|
const Fieldset_Fieldset = Object.assign(Fieldset_FieldsetRoot, {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { HTMLArkProps } from '@ark-ui/react/factory';
|
|
2
2
|
import { FileUpload as FileUploadPrimitive, useFileUpload, useFileUploadContext } from '@ark-ui/react/file-upload';
|
|
3
|
-
import type { ComponentProps
|
|
3
|
+
import type { ComponentProps } from 'react';
|
|
4
4
|
declare function FileUploadDropzoneIcon({ className, children, ...props }: HTMLArkProps<'span'>): import("react").JSX.Element;
|
|
5
5
|
declare function FileUploadItemPreviewIcon({ className, ...props }: ComponentProps<'svg'>): import("react").JSX.Element;
|
|
6
6
|
declare function FileUploadItemMetadata({ file, className, ...props }: HTMLArkProps<'div'> & {
|
|
@@ -10,7 +10,8 @@ declare function FileUploadItems(): import("react").JSX.Element[];
|
|
|
10
10
|
declare const FileUpload: import("react").ForwardRefExoticComponent<Omit<FileUploadPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
|
|
11
11
|
Root: import("react").ForwardRefExoticComponent<Omit<FileUploadPrimitive.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
12
12
|
RootProvider: import("react").ForwardRefExoticComponent<Omit<FileUploadPrimitive.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
13
|
-
Context: (props: FileUploadPrimitive.ContextProps) => ReactNode;
|
|
13
|
+
Context: (props: FileUploadPrimitive.ContextProps) => import("react").ReactNode;
|
|
14
|
+
HiddenInput: import("react").ForwardRefExoticComponent<FileUploadPrimitive.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
14
15
|
Label: import("react").ForwardRefExoticComponent<Omit<FileUploadPrimitive.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
|
|
15
16
|
Dropzone: import("react").ForwardRefExoticComponent<Omit<FileUploadPrimitive.DropzoneProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
16
17
|
DropzoneIcon: typeof FileUploadDropzoneIcon;
|
|
@@ -1,116 +1,98 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { ark } from "@ark-ui/react/factory";
|
|
4
4
|
import { FileUpload, useFileUpload, useFileUploadContext } from "@ark-ui/react/file-upload";
|
|
5
5
|
import { clsx } from "clsx";
|
|
6
|
-
import {
|
|
6
|
+
import { forwardRef } from "react";
|
|
7
7
|
import { CloseIcon, FileIcon, TrashIcon, UploadIcon } from "../../internal/icons/ui/index.js";
|
|
8
|
-
import { normalizeClassName } from "../../internal/normalizeClassName.js";
|
|
9
8
|
import { CloseButton } from "../close-button/index.js";
|
|
10
9
|
import FileUpload_module from "./FileUpload.module.js";
|
|
11
|
-
const FileUpload_FileUploadRoot = /*#__PURE__*/ forwardRef(function({
|
|
10
|
+
const FileUpload_FileUploadRoot = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
|
|
12
11
|
return /*#__PURE__*/ jsx(FileUpload.Root, {
|
|
13
12
|
ref: ref,
|
|
14
|
-
|
|
15
|
-
"data-slot": "file-upload-root",
|
|
16
|
-
className: clsx(FileUpload_module.root, normalizeClassName(className)),
|
|
13
|
+
className: clsx(FileUpload_module.root, className),
|
|
17
14
|
...props,
|
|
18
|
-
|
|
15
|
+
"data-slot": "file-upload-root"
|
|
19
16
|
});
|
|
20
17
|
});
|
|
21
|
-
const FileUpload_FileUploadRootProvider = /*#__PURE__*/ forwardRef(function({
|
|
18
|
+
const FileUpload_FileUploadRootProvider = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
|
|
22
19
|
return /*#__PURE__*/ jsx(FileUpload.RootProvider, {
|
|
23
20
|
ref: ref,
|
|
24
|
-
|
|
25
|
-
"data-slot": "file-upload-root-provider",
|
|
26
|
-
className: clsx(FileUpload_module.root, normalizeClassName(className)),
|
|
21
|
+
className: clsx(FileUpload_module.root, className),
|
|
27
22
|
...props,
|
|
28
|
-
|
|
23
|
+
"data-slot": "file-upload-root-provider"
|
|
29
24
|
});
|
|
30
25
|
});
|
|
31
26
|
const FileUpload_FileUploadLabel = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
|
|
32
27
|
return /*#__PURE__*/ jsx(FileUpload.Label, {
|
|
33
28
|
ref: ref,
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
29
|
+
className: clsx(FileUpload_module.label, className),
|
|
30
|
+
...props,
|
|
31
|
+
"data-slot": "file-upload-label"
|
|
37
32
|
});
|
|
38
33
|
});
|
|
39
34
|
const FileUpload_FileUploadDropzone = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
|
|
40
35
|
return /*#__PURE__*/ jsx(FileUpload.Dropzone, {
|
|
41
36
|
ref: ref,
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
37
|
+
className: clsx(FileUpload_module.dropzone, className),
|
|
38
|
+
...props,
|
|
39
|
+
"data-slot": "file-upload-dropzone"
|
|
45
40
|
});
|
|
46
41
|
});
|
|
47
42
|
function FileUploadDropzoneIcon({ className, children, ...props }) {
|
|
48
43
|
return /*#__PURE__*/ jsx(ark.span, {
|
|
49
44
|
"aria-hidden": "true",
|
|
50
|
-
|
|
51
|
-
className: clsx(FileUpload_module.dropzoneIcon, normalizeClassName(className)),
|
|
45
|
+
className: clsx(FileUpload_module.dropzoneIcon, className),
|
|
52
46
|
...props,
|
|
47
|
+
"data-slot": "file-upload-dropzone-icon",
|
|
53
48
|
children: children ?? /*#__PURE__*/ jsx(UploadIcon, {})
|
|
54
49
|
});
|
|
55
50
|
}
|
|
56
51
|
const FileUpload_FileUploadTrigger = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
|
|
57
52
|
return /*#__PURE__*/ jsx(FileUpload.Trigger, {
|
|
58
53
|
ref: ref,
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
54
|
+
className: clsx(FileUpload_module.trigger, className),
|
|
55
|
+
...props,
|
|
56
|
+
"data-slot": "file-upload-trigger"
|
|
62
57
|
});
|
|
63
58
|
});
|
|
64
|
-
function withHiddenInput(children, asChild) {
|
|
65
|
-
const hiddenInput = /*#__PURE__*/ jsx(FileUpload.HiddenInput, {
|
|
66
|
-
"data-slot": "file-upload-hidden-input"
|
|
67
|
-
});
|
|
68
|
-
if (!asChild) return /*#__PURE__*/ jsxs(Fragment, {
|
|
69
|
-
children: [
|
|
70
|
-
children,
|
|
71
|
-
hiddenInput
|
|
72
|
-
]
|
|
73
|
-
});
|
|
74
|
-
const child = Children.only(children);
|
|
75
|
-
return /*#__PURE__*/ cloneElement(child, {}, child.props.children, hiddenInput);
|
|
76
|
-
}
|
|
77
59
|
const FileUpload_FileUploadItemGroup = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
|
|
78
60
|
return /*#__PURE__*/ jsx(FileUpload.ItemGroup, {
|
|
79
61
|
ref: ref,
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
62
|
+
className: clsx(FileUpload_module.itemGroup, className),
|
|
63
|
+
...props,
|
|
64
|
+
"data-slot": "file-upload-item-group"
|
|
83
65
|
});
|
|
84
66
|
});
|
|
85
67
|
const FileUpload_FileUploadItem = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
|
|
86
68
|
return /*#__PURE__*/ jsx(FileUpload.Item, {
|
|
87
69
|
ref: ref,
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
70
|
+
className: clsx(FileUpload_module.item, className),
|
|
71
|
+
...props,
|
|
72
|
+
"data-slot": "file-upload-item"
|
|
91
73
|
});
|
|
92
74
|
});
|
|
93
75
|
const FileUpload_FileUploadItemPreview = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
|
|
94
76
|
return /*#__PURE__*/ jsx(FileUpload.ItemPreview, {
|
|
95
77
|
ref: ref,
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
78
|
+
className: clsx(FileUpload_module.itemPreview, className),
|
|
79
|
+
...props,
|
|
80
|
+
"data-slot": "file-upload-item-preview"
|
|
99
81
|
});
|
|
100
82
|
});
|
|
101
83
|
const FileUpload_FileUploadItemPreviewImage = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
|
|
102
84
|
return /*#__PURE__*/ jsx(FileUpload.ItemPreviewImage, {
|
|
103
85
|
ref: ref,
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
86
|
+
className: clsx(FileUpload_module.itemPreviewImage, className),
|
|
87
|
+
...props,
|
|
88
|
+
"data-slot": "file-upload-item-preview-image"
|
|
107
89
|
});
|
|
108
90
|
});
|
|
109
91
|
function FileUploadItemPreviewIcon({ className, ...props }) {
|
|
110
92
|
return /*#__PURE__*/ jsx(FileIcon, {
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
93
|
+
className: clsx(FileUpload_module.itemPreviewIcon, className),
|
|
94
|
+
...props,
|
|
95
|
+
"data-slot": "file-upload-item-preview-icon"
|
|
114
96
|
});
|
|
115
97
|
}
|
|
116
98
|
function getFileTypeLabel(file) {
|
|
@@ -123,24 +105,24 @@ function isImageFile(file) {
|
|
|
123
105
|
const FileUpload_FileUploadItemName = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
|
|
124
106
|
return /*#__PURE__*/ jsx(FileUpload.ItemName, {
|
|
125
107
|
ref: ref,
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
108
|
+
className: clsx(FileUpload_module.itemName, className),
|
|
109
|
+
...props,
|
|
110
|
+
"data-slot": "file-upload-item-name"
|
|
129
111
|
});
|
|
130
112
|
});
|
|
131
113
|
const FileUpload_FileUploadItemSizeText = /*#__PURE__*/ forwardRef(function({ className, ...props }, ref) {
|
|
132
114
|
return /*#__PURE__*/ jsx(FileUpload.ItemSizeText, {
|
|
133
115
|
ref: ref,
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
116
|
+
className: clsx(FileUpload_module.itemSizeText, className),
|
|
117
|
+
...props,
|
|
118
|
+
"data-slot": "file-upload-item-size-text"
|
|
137
119
|
});
|
|
138
120
|
});
|
|
139
121
|
function FileUploadItemMetadata({ file, className, ...props }) {
|
|
140
122
|
return /*#__PURE__*/ jsxs(ark.div, {
|
|
141
|
-
|
|
142
|
-
className: clsx(FileUpload_module.itemMetadata, normalizeClassName(className)),
|
|
123
|
+
className: clsx(FileUpload_module.itemMetadata, className),
|
|
143
124
|
...props,
|
|
125
|
+
"data-slot": "file-upload-item-metadata",
|
|
144
126
|
children: [
|
|
145
127
|
/*#__PURE__*/ jsx(ark.span, {
|
|
146
128
|
children: getFileTypeLabel(file)
|
|
@@ -152,9 +134,9 @@ function FileUploadItemMetadata({ file, className, ...props }) {
|
|
|
152
134
|
const FileUpload_FileUploadItemDeleteTrigger = /*#__PURE__*/ forwardRef(function({ className, children, ...props }, ref) {
|
|
153
135
|
return /*#__PURE__*/ jsx(FileUpload.ItemDeleteTrigger, {
|
|
154
136
|
ref: ref,
|
|
155
|
-
|
|
156
|
-
className: clsx(FileUpload_module.itemDeleteTrigger, normalizeClassName(className)),
|
|
137
|
+
className: clsx(FileUpload_module.itemDeleteTrigger, className),
|
|
157
138
|
...props,
|
|
139
|
+
"data-slot": "file-upload-item-delete-trigger",
|
|
158
140
|
children: children ?? /*#__PURE__*/ jsx(TrashIcon, {})
|
|
159
141
|
});
|
|
160
142
|
});
|
|
@@ -163,10 +145,8 @@ function FileUploadItems() {
|
|
|
163
145
|
return acceptedFiles.map((file)=>/*#__PURE__*/ jsxs(FileUpload_FileUploadItem, {
|
|
164
146
|
file: file,
|
|
165
147
|
children: [
|
|
166
|
-
|
|
167
|
-
children: /*#__PURE__*/ jsx(FileUpload_FileUploadItemPreviewImage, {})
|
|
168
|
-
}) : /*#__PURE__*/ jsx(FileUpload_FileUploadItemPreview, {
|
|
169
|
-
children: /*#__PURE__*/ jsx(FileUploadItemPreviewIcon, {})
|
|
148
|
+
/*#__PURE__*/ jsx(FileUpload_FileUploadItemPreview, {
|
|
149
|
+
children: isImageFile(file) ? /*#__PURE__*/ jsx(FileUpload_FileUploadItemPreviewImage, {}) : /*#__PURE__*/ jsx(FileUploadItemPreviewIcon, {})
|
|
170
150
|
}),
|
|
171
151
|
/*#__PURE__*/ jsx(FileUpload_FileUploadItemName, {}),
|
|
172
152
|
/*#__PURE__*/ jsx(FileUploadItemMetadata, {
|
|
@@ -180,24 +160,16 @@ function FileUploadItems() {
|
|
|
180
160
|
}
|
|
181
161
|
const FileUpload_FileUploadClearTrigger = /*#__PURE__*/ forwardRef(function({ asChild, className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }, ref) {
|
|
182
162
|
const clearLabel = ariaLabel ?? (null == ariaLabelledBy ? 'Clear files' : void 0);
|
|
183
|
-
const triggerClassName = clsx(FileUpload_module.clearTrigger, null != children && FileUpload_module.clearTriggerWithContent,
|
|
184
|
-
if (asChild) return /*#__PURE__*/ jsx(FileUpload.ClearTrigger, {
|
|
185
|
-
ref: ref,
|
|
186
|
-
asChild: true,
|
|
187
|
-
"data-slot": "file-upload-clear-trigger",
|
|
188
|
-
className: triggerClassName,
|
|
189
|
-
"aria-label": clearLabel,
|
|
190
|
-
"aria-labelledby": ariaLabelledBy,
|
|
191
|
-
...props,
|
|
192
|
-
children: children
|
|
193
|
-
});
|
|
163
|
+
const triggerClassName = clsx(FileUpload_module.clearTrigger, null != children && FileUpload_module.clearTriggerWithContent, className);
|
|
194
164
|
return /*#__PURE__*/ jsx(FileUpload.ClearTrigger, {
|
|
195
165
|
ref: ref,
|
|
196
166
|
asChild: true,
|
|
197
|
-
"data-slot": "file-upload-clear-trigger",
|
|
198
167
|
className: triggerClassName,
|
|
168
|
+
"aria-label": asChild ? clearLabel : void 0,
|
|
169
|
+
"aria-labelledby": asChild ? ariaLabelledBy : void 0,
|
|
199
170
|
...props,
|
|
200
|
-
|
|
171
|
+
"data-slot": "file-upload-clear-trigger",
|
|
172
|
+
children: asChild ? children : /*#__PURE__*/ jsx(CloseButton.Root, {
|
|
201
173
|
"aria-label": clearLabel,
|
|
202
174
|
"aria-labelledby": ariaLabelledBy,
|
|
203
175
|
children: children ?? /*#__PURE__*/ jsx(CloseIcon, {})
|
|
@@ -208,6 +180,7 @@ const FileUpload_FileUpload = Object.assign(FileUpload_FileUploadRoot, {
|
|
|
208
180
|
Root: FileUpload_FileUploadRoot,
|
|
209
181
|
RootProvider: FileUpload_FileUploadRootProvider,
|
|
210
182
|
Context: FileUpload.Context,
|
|
183
|
+
HiddenInput: FileUpload.HiddenInput,
|
|
211
184
|
Label: FileUpload_FileUploadLabel,
|
|
212
185
|
Dropzone: FileUpload_FileUploadDropzone,
|
|
213
186
|
DropzoneIcon: FileUploadDropzoneIcon,
|
|
@@ -241,10 +241,6 @@
|
|
|
241
241
|
overflow: hidden;
|
|
242
242
|
}
|
|
243
243
|
|
|
244
|
-
.item-ZdUuIF:has([data-slot="file-upload-item-preview"]) .itemName-LSyV_n {
|
|
245
|
-
grid-column: 2;
|
|
246
|
-
}
|
|
247
|
-
|
|
248
244
|
.itemSizeText-euWMRd {
|
|
249
245
|
color: var(--moduix-file-upload-item-size-color, var(--moduix-color-muted-foreground));
|
|
250
246
|
font-size: var(--moduix-file-upload-item-size-font-size, var(--moduix-text-xs));
|
|
@@ -252,14 +248,6 @@
|
|
|
252
248
|
grid-column: 1;
|
|
253
249
|
}
|
|
254
250
|
|
|
255
|
-
.item-ZdUuIF:has([data-slot="file-upload-item-preview"]) .itemSizeText-euWMRd {
|
|
256
|
-
grid-column: 2;
|
|
257
|
-
}
|
|
258
|
-
|
|
259
|
-
.item-ZdUuIF:has([data-slot="file-upload-item-preview"]) .itemMetadata-EmEskK {
|
|
260
|
-
grid-column: 2;
|
|
261
|
-
}
|
|
262
|
-
|
|
263
251
|
.itemDeleteTrigger-DgPANB {
|
|
264
252
|
box-sizing: border-box;
|
|
265
253
|
width: var(--moduix-file-upload-action-size, var(--moduix-size-sm));
|
|
@@ -312,6 +300,10 @@
|
|
|
312
300
|
grid-row: 1 / span 2;
|
|
313
301
|
}
|
|
314
302
|
|
|
303
|
+
.item-ZdUuIF:has([data-slot="file-upload-item-preview"]) .itemName-LSyV_n, .item-ZdUuIF:has([data-slot="file-upload-item-preview"]) .itemSizeText-euWMRd, .item-ZdUuIF:has([data-slot="file-upload-item-preview"]) .itemMetadata-EmEskK {
|
|
304
|
+
grid-column: 2;
|
|
305
|
+
}
|
|
306
|
+
|
|
315
307
|
.item-ZdUuIF:has([data-slot="file-upload-item-preview"]) .itemDeleteTrigger-DgPANB {
|
|
316
308
|
grid-column: 3;
|
|
317
309
|
}
|
|
@@ -353,7 +345,6 @@
|
|
|
353
345
|
--moduix-close-button-color: var(--moduix-file-upload-clear-trigger-color, var(--moduix-color-muted-foreground));
|
|
354
346
|
--moduix-close-button-color-hover: var(--moduix-file-upload-action-color-hover, var(--moduix-color-foreground));
|
|
355
347
|
--moduix-close-button-icon-size: var(--moduix-file-upload-action-icon-size, var(--moduix-spacing-4));
|
|
356
|
-
--moduix-close-button-transition: var(--moduix-file-upload-transition, var(--moduix-transition-default));
|
|
357
348
|
--moduix-close-button-focus-ring-width: var(--moduix-file-upload-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)));
|
|
358
349
|
--moduix-close-button-focus-ring-color: var(--moduix-file-upload-focus-ring-color, var(--moduix-color-ring));
|
|
359
350
|
--moduix-close-button-focus-ring-offset: var(--moduix-file-upload-focus-ring-offset, var(--moduix-border-width-sm));
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { FloatingPanel as FloatingPanelPrimitive, useFloatingPanel, useFloatingPanelContext, type FloatingPanelResizeTriggerAxis } from '@ark-ui/react/floating-panel';
|
|
2
2
|
import type { ComponentProps } from 'react';
|
|
3
|
-
import { type OverlayPortalProps } from '../../internal/overlayPortal';
|
|
4
|
-
declare const resizeTriggerAxes: ("
|
|
3
|
+
import { type OverlayPortalProps } from '../../internal/overlayPortal.js';
|
|
4
|
+
declare const resizeTriggerAxes: ("e" | "n" | "ne" | "nw" | "s" | "se" | "sw" | "w")[];
|
|
5
5
|
type FloatingPanelRootProps = ComponentProps<typeof FloatingPanelPrimitive.Root> & OverlayPortalProps;
|
|
6
6
|
type FloatingPanelRootProviderProps = ComponentProps<typeof FloatingPanelPrimitive.RootProvider> & OverlayPortalProps;
|
|
7
7
|
declare function FloatingPanelRoot({ closeOnEscape, lazyMount, persistRect, portalled, portalRef, unmountOnExit, ...props }: FloatingPanelRootProps): import("react").JSX.Element;
|
|
@@ -31,4 +31,4 @@ declare const FloatingPanel: typeof FloatingPanelRoot & {
|
|
|
31
31
|
useFloatingPanel: (props?: import("@ark-ui/react/floating-panel").UseFloatingPanelProps) => import("@ark-ui/react/floating-panel").UseFloatingPanelReturn;
|
|
32
32
|
useFloatingPanelContext: () => import("@ark-ui/react/floating-panel").UseFloatingPanelContext;
|
|
33
33
|
};
|
|
34
|
-
export { FloatingPanel, resizeTriggerAxes, useFloatingPanel, useFloatingPanelContext };
|
|
34
|
+
export { FloatingPanel, resizeTriggerAxes, useFloatingPanel, useFloatingPanelContext, type FloatingPanelRootProps, type FloatingPanelRootProviderProps, };
|