@mekari/pixel3-dropzone 0.0.15 → 0.0.16-dev.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/dist/{chunk-CQO276YD.mjs → chunk-5JNHQ27U.mjs} +1 -1
  2. package/dist/{chunk-DEUKYB7V.mjs → chunk-7XRYSQYV.mjs} +62 -24
  3. package/dist/{chunk-PB3KHIIV.mjs → chunk-GWHWG6GP.mjs} +4 -14
  4. package/dist/chunk-VE4DE26L.mjs +0 -0
  5. package/dist/dropzone.d.mts +7 -6
  6. package/dist/dropzone.d.ts +7 -6
  7. package/dist/dropzone.js +63 -35
  8. package/dist/dropzone.mjs +3 -3
  9. package/dist/index.d.mts +1 -0
  10. package/dist/index.d.ts +1 -0
  11. package/dist/index.js +63 -35
  12. package/dist/index.mjs +4 -3
  13. package/dist/metafile-cjs.json +1 -1
  14. package/dist/metafile-esm.json +1 -1
  15. package/dist/modules/dropzone.hooks.d.mts +4 -13
  16. package/dist/modules/dropzone.hooks.d.ts +4 -13
  17. package/dist/modules/dropzone.hooks.js +4 -14
  18. package/dist/modules/dropzone.hooks.mjs +1 -1
  19. package/dist/modules/dropzone.props.d.mts +3 -2
  20. package/dist/modules/dropzone.props.d.ts +3 -2
  21. package/dist/modules/dropzone.props.js +1 -1
  22. package/dist/modules/dropzone.props.mjs +1 -1
  23. package/dist/modules/dropzone.types.d.mts +4 -0
  24. package/dist/modules/dropzone.types.d.ts +4 -0
  25. package/dist/modules/dropzone.types.js +18 -0
  26. package/dist/modules/dropzone.types.mjs +1 -0
  27. package/package.json +9 -8
package/dist/{chunk-CQO276YD.mjs → chunk-5JNHQ27U.mjs} RENAMED
@@ -28,7 +28,7 @@ var dropzoneProps = {
28
28
  },
29
29
  buttonText: {
30
30
  type: String,
31
- default: "Change file"
31
+ default: "Replace your file(s) here"
32
32
  },
33
33
  overlayVariant: {
34
34
  type: String,
package/dist/{chunk-DEUKYB7V.mjs → chunk-7XRYSQYV.mjs} RENAMED
@@ -1,20 +1,21 @@
1
1
  import {
2
2
  useDropzone
3
- } from "./chunk-PB3KHIIV.mjs";
3
+ } from "./chunk-GWHWG6GP.mjs";
4
4
  import {
5
5
  dropzoneEmit,
6
6
  dropzoneProps
7
- } from "./chunk-CQO276YD.mjs";
7
+ } from "./chunk-5JNHQ27U.mjs";
8
8
  import {
9
9
  __name
10
10
  } from "./chunk-QZ7VFGWC.mjs";
11
11
 
12
12
  // src/dropzone.tsx
13
- import { createTextVNode as _createTextVNode, createVNode as _createVNode, isVNode as _isVNode } from "vue";
14
- import { defineComponent } from "vue";
13
+ import { mergeProps as _mergeProps, createTextVNode as _createTextVNode, createVNode as _createVNode, isVNode as _isVNode } from "vue";
14
+ import { defineComponent, computed } from "vue";
15
15
  import { MpText } from "@mekari/pixel3-text";
16
16
  import { MpIcon } from "@mekari/pixel3-icon";
17
17
  import { MpSpinner } from "@mekari/pixel3-spinner";
18
+ import { usePixelTheme } from "@mekari/pixel3-utils";
18
19
  function _isSlot(s) {
19
20
  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !_isVNode(s);
20
21
  }
@@ -27,6 +28,9 @@ var MpDropzone = defineComponent({
27
28
  emit,
28
29
  slots
29
30
  }) {
31
+ const {
32
+ isNextTheme
33
+ } = usePixelTheme();
30
34
  const {
31
35
  rootAttrs,
32
36
  wrapperAttrs,
@@ -57,24 +61,53 @@ var MpDropzone = defineComponent({
57
61
  isLoading,
58
62
  isInvalid
59
63
  } = props;
64
+ const overlayTextColor = computed(() => {
65
+ let color = "black";
66
+ if (overlayVariant === "white") {
67
+ if (isNextTheme.value) {
68
+ color = "neutral.1000";
69
+ } else {
70
+ color = "dark";
71
+ }
72
+ } else {
73
+ if (isNextTheme.value) {
74
+ color = "white";
75
+ } else {
76
+ color = "white";
77
+ }
78
+ }
79
+ return color;
80
+ });
81
+ const iconColor = computed(() => {
82
+ return isInvalid ? isNextTheme.value ? "icon.danger" : "red.400" : isNextTheme.value ? "icon.brand" : "gray.600";
83
+ });
84
+ const textColor = computed(() => {
85
+ return isInvalid ? isNextTheme.value ? "text.danger" : "red.400" : isNextTheme.value ? "text.secondary" : "gray.600";
86
+ });
60
87
  return _createVNode("div", rootAttrs.value, [children ? _createVNode("div", overlayWrapperAttrs.value, [_createVNode("div", overlayAttrs.value, [_createVNode(MpText, {
61
88
  "weight": "semiBold",
62
- "color": overlayVariant === "white" ? "dark" : "white"
89
+ "color": overlayTextColor.value
63
90
  }, _isSlot(placeholder) ? placeholder : {
64
91
  default: () => [placeholder]
65
92
  }), _createVNode(MpText, {
66
- "color": overlayVariant === "white" ? "dark" : "white"
93
+ "color": overlayTextColor.value
67
94
  }, _isSlot(description) ? description : {
68
95
  default: () => [description]
69
- })]), children]) : _createVNode("div", wrapperAttrs.value, [isLoading && _createVNode("div", boxAttrs.value, [_createVNode(MpSpinner, null, null), variant !== "avatar" && _createVNode(MpText, {
70
- "color": "gray.600"
96
+ })]), children]) : _createVNode("div", wrapperAttrs.value, [isLoading && _createVNode("div", boxAttrs.value, [_createVNode(MpSpinner, {
97
+ "color": isNextTheme.value ? "icon.brand" : "gray.600"
98
+ }, null), variant !== "avatar" && _createVNode(MpText, {
99
+ "color": isNextTheme.value ? "text.secondary" : "gray.600"
71
100
  }, _isSlot(loadingText) ? loadingText : {
72
101
  default: () => [loadingText]
73
- }), variant === "default" && _createVNode(MpText, cancelButtonAttrs.value, {
102
+ }), variant === "default" && _createVNode(MpText, _mergeProps(cancelButtonAttrs.value, {
103
+ "color": isNextTheme.value ? "text.danger" : "red.400"
104
+ }), {
74
105
  default: () => [_createTextVNode("Cancel")]
75
- })]), !isLoading && hasPreview.value && _createVNode("div", previewAttrs.value, [_createVNode(MpIcon, clearButtonAttrs.value, null), _createVNode("div", overlayPreviewAttrs.value, [_createVNode(MpIcon, {
76
- "name": "folder-open",
77
- "variant": "fill",
106
+ })]), !isLoading && hasPreview.value && _createVNode("div", previewAttrs.value, [_createVNode(MpIcon, _mergeProps(clearButtonAttrs.value, {
107
+ "color": isNextTheme.value ? "icon.danger" : "red.400"
108
+ }), null), _createVNode("div", overlayPreviewAttrs.value, [_createVNode(MpIcon, {
109
+ "name": "upload",
110
+ "variant": "outline",
78
111
  "color": "white"
79
112
  }, null), variant !== "avatar" && _createVNode(MpText, {
80
113
  "color": "white"
@@ -82,35 +115,40 @@ var MpDropzone = defineComponent({
82
115
  default: () => [buttonText]
83
116
  })]), _createVNode("img", imageAttrs.value, null)]), !isLoading && !hasPreview.value && variant === "default" && _createVNode("div", boxAttrs.value, [_createVNode(MpIcon, {
84
117
  "name": "upload",
85
- "variant": isInvalid ? "outline" : "duotone",
86
- "color": isInvalid ? "red.400" : "gray.600"
87
- }, null), _createVNode(MpText, null, {
88
- default: () => [placeholder, _createVNode(MpText, browseButtonAttrs.value, {
118
+ "variant": "outline",
119
+ "color": iconColor.value,
120
+ "style": "width: 80px; height: 80px;"
121
+ }, null), _createVNode(MpText, {
122
+ "weight": "semiBold"
123
+ }, {
124
+ default: () => [placeholder, _createVNode(MpText, _mergeProps(browseButtonAttrs.value, {
125
+ "color": isNextTheme.value ? "text.link" : "blue.400"
126
+ }), {
89
127
  default: () => [_createTextVNode("Browse")]
90
128
  })]
91
129
  }), _createVNode(MpText, {
92
- "color": "gray.600"
130
+ "color": isNextTheme.value ? "text.secondary" : "gray.600"
93
131
  }, _isSlot(description) ? description : {
94
132
  default: () => [description]
95
133
  })]), !isLoading && !hasPreview.value && variant === "logo" && _createVNode("div", logoBoxAttrs.value, [_createVNode(MpIcon, {
96
134
  "name": "img",
97
- "variant": isInvalid ? "fill" : "outline",
98
- "color": isInvalid ? "red.400" : "gray.600"
135
+ "variant": "outline",
136
+ "color": iconColor.value
99
137
  }, null), _createVNode(MpText, {
100
- "color": isInvalid ? "red.400" : "gray.600"
138
+ "color": textColor.value
101
139
  }, _isSlot(placeholder) ? placeholder : {
102
140
  default: () => [placeholder]
103
141
  })]), !isLoading && !hasPreview.value && variant === "product" && _createVNode("div", productBoxAttrs.value, [_createVNode(MpIcon, {
104
142
  "name": "add-circular",
105
- "variant": isInvalid ? "fill" : "outline",
106
- "color": isInvalid ? "red.400" : "gray.600"
143
+ "variant": "outline",
144
+ "color": iconColor.value
107
145
  }, null), _createVNode(MpText, {
108
- "color": isInvalid ? "red.400" : "gray.600"
146
+ "color": textColor.value
109
147
  }, _isSlot(placeholder) ? placeholder : {
110
148
  default: () => [placeholder]
111
149
  })]), !isLoading && !hasPreview.value && variant === "avatar" && _createVNode("div", avatarBoxAttrs.value, [_createVNode(MpText, {
112
150
  "size": "h1",
113
- "color": isInvalid ? "red.400" : "gray.600"
151
+ "color": textColor.value
114
152
  }, _isSlot(placeholder) ? placeholder : {
115
153
  default: () => [placeholder]
116
154
  })])]), _createVNode("input", inputAttrs.value, null)]);
package/dist/{chunk-PB3KHIIV.mjs → chunk-GWHWG6GP.mjs} RENAMED
@@ -50,11 +50,7 @@ function useDropzone(props, emit) {
50
50
  "data-disabled": isDisabled.value || void 0,
51
51
  "data-variant": variant.value,
52
52
  tabindex: isDisabled.value ? -1 : 0,
53
- class: dropzoneSlotRecipe().wrapper,
54
- style: {
55
- background: variant.value === "default" ? "var(--mp-colors-white)" : "var(--mp-colors-background)",
56
- borderRadius: variant.value === "avatar" ? "var(--mp-radii-full)" : "var(--mp-radii-md)"
57
- }
53
+ class: dropzoneSlotRecipe().wrapper
58
54
  };
59
55
  });
60
56
  const boxAttrs = computed(() => {
@@ -88,10 +84,10 @@ function useDropzone(props, emit) {
88
84
  const overlayAttrs = computed(() => {
89
85
  return {
90
86
  ref: overlay,
87
+ "data-overlay": overlayVariant.value,
91
88
  class: dropzoneSlotRecipe().overlay,
92
89
  style: {
93
- display: showOverlay.value ? "flex" : "none",
94
- background: overlayVariant.value === "white" ? "var(--mp-colors-whiteAlpha.300)" : "var(--mp-colors-overlay)"
90
+ display: showOverlay.value ? "flex" : "none"
95
91
  }
96
92
  };
97
93
  });
@@ -111,7 +107,6 @@ function useDropzone(props, emit) {
111
107
  });
112
108
  const cancelButtonAttrs = computed(() => {
113
109
  return {
114
- color: "red.400",
115
110
  style: {
116
111
  cursor: "pointer"
117
112
  },
@@ -122,7 +117,6 @@ function useDropzone(props, emit) {
122
117
  return {
123
118
  as: "span",
124
119
  weight: "semiBold",
125
- color: "blue.400",
126
120
  style: {
127
121
  cursor: "pointer"
128
122
  },
@@ -156,11 +150,7 @@ function useDropzone(props, emit) {
156
150
  class: dropzoneSlotRecipe().clearButton,
157
151
  name: "minus-circular",
158
152
  variant: "fill",
159
- color: "red.400",
160
- style: {
161
- top: variant.value === "avatar" ? "-4px" : "-10px",
162
- right: variant.value === "avatar" ? "-4px" : "-10px"
163
- },
153
+ "data-variant": variant.value,
164
154
  onClick: handleClear
165
155
  };
166
156
  });
package/dist/chunk-VE4DE26L.mjs ADDED
File without changes
package/dist/dropzone.d.mts CHANGED
@@ -1,4 +1,5 @@
1
1
  import * as vue_jsx_runtime from 'vue/jsx-runtime';
2
+ import { DropzoneVariant, DropzoneOverlayVariant } from './modules/dropzone.types.mjs';
2
3
  import * as vue from 'vue';
3
4
 
4
5
  declare const MpDropzone: vue.DefineComponent<{
@@ -7,7 +8,7 @@ declare const MpDropzone: vue.DefineComponent<{
7
8
  default: string;
8
9
  };
9
10
  variant: {
10
- type: vue.PropType<"default" | "logo" | "product" | "avatar">;
11
+ type: vue.PropType<DropzoneVariant>;
11
12
  default: string;
12
13
  };
13
14
  accept: {
@@ -33,7 +34,7 @@ declare const MpDropzone: vue.DefineComponent<{
33
34
  default: string;
34
35
  };
35
36
  overlayVariant: {
36
- type: vue.PropType<"white" | "black">;
37
+ type: vue.PropType<DropzoneOverlayVariant>;
37
38
  default: string;
38
39
  };
39
40
  isShowPreview: {
@@ -82,7 +83,7 @@ declare const MpDropzone: vue.DefineComponent<{
82
83
  default: string;
83
84
  };
84
85
  variant: {
85
- type: vue.PropType<"default" | "logo" | "product" | "avatar">;
86
+ type: vue.PropType<DropzoneVariant>;
86
87
  default: string;
87
88
  };
88
89
  accept: {
@@ -108,7 +109,7 @@ declare const MpDropzone: vue.DefineComponent<{
108
109
  default: string;
109
110
  };
110
111
  overlayVariant: {
111
- type: vue.PropType<"white" | "black">;
112
+ type: vue.PropType<DropzoneOverlayVariant>;
112
113
  default: string;
113
114
  };
114
115
  isShowPreview: {
@@ -155,12 +156,12 @@ declare const MpDropzone: vue.DefineComponent<{
155
156
  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
156
157
  }, {
157
158
  id: string;
158
- variant: "default" | "logo" | "product" | "avatar";
159
+ variant: DropzoneVariant;
159
160
  placeholder: string;
160
161
  description: string;
161
162
  loadingText: string;
162
163
  buttonText: string;
163
- overlayVariant: "white" | "black";
164
+ overlayVariant: DropzoneOverlayVariant;
164
165
  isShowPreview: boolean;
165
166
  isMultiple: boolean;
166
167
  isLoading: boolean;
package/dist/dropzone.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import * as vue_jsx_runtime from 'vue/jsx-runtime';
2
+ import { DropzoneVariant, DropzoneOverlayVariant } from './modules/dropzone.types.js';
2
3
  import * as vue from 'vue';
3
4
 
4
5
  declare const MpDropzone: vue.DefineComponent<{
@@ -7,7 +8,7 @@ declare const MpDropzone: vue.DefineComponent<{
7
8
  default: string;
8
9
  };
9
10
  variant: {
10
- type: vue.PropType<"default" | "logo" | "product" | "avatar">;
11
+ type: vue.PropType<DropzoneVariant>;
11
12
  default: string;
12
13
  };
13
14
  accept: {
@@ -33,7 +34,7 @@ declare const MpDropzone: vue.DefineComponent<{
33
34
  default: string;
34
35
  };
35
36
  overlayVariant: {
36
- type: vue.PropType<"white" | "black">;
37
+ type: vue.PropType<DropzoneOverlayVariant>;
37
38
  default: string;
38
39
  };
39
40
  isShowPreview: {
@@ -82,7 +83,7 @@ declare const MpDropzone: vue.DefineComponent<{
82
83
  default: string;
83
84
  };
84
85
  variant: {
85
- type: vue.PropType<"default" | "logo" | "product" | "avatar">;
86
+ type: vue.PropType<DropzoneVariant>;
86
87
  default: string;
87
88
  };
88
89
  accept: {
@@ -108,7 +109,7 @@ declare const MpDropzone: vue.DefineComponent<{
108
109
  default: string;
109
110
  };
110
111
  overlayVariant: {
111
- type: vue.PropType<"white" | "black">;
112
+ type: vue.PropType<DropzoneOverlayVariant>;
112
113
  default: string;
113
114
  };
114
115
  isShowPreview: {
@@ -155,12 +156,12 @@ declare const MpDropzone: vue.DefineComponent<{
155
156
  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
156
157
  }, {
157
158
  id: string;
158
- variant: "default" | "logo" | "product" | "avatar";
159
+ variant: DropzoneVariant;
159
160
  placeholder: string;
160
161
  description: string;
161
162
  loadingText: string;
162
163
  buttonText: string;
163
- overlayVariant: "white" | "black";
164
+ overlayVariant: DropzoneOverlayVariant;
164
165
  isShowPreview: boolean;
165
166
  isMultiple: boolean;
166
167
  isLoading: boolean;
package/dist/dropzone.js CHANGED
@@ -29,6 +29,7 @@ var import_vue3 = require("vue");
29
29
  var import_pixel3_text = require("@mekari/pixel3-text");
30
30
  var import_pixel3_icon = require("@mekari/pixel3-icon");
31
31
  var import_pixel3_spinner = require("@mekari/pixel3-spinner");
32
+ var import_pixel3_utils2 = require("@mekari/pixel3-utils");
32
33
 
33
34
  // src/modules/dropzone.props.ts
34
35
  var dropzoneProps = {
@@ -60,7 +61,7 @@ var dropzoneProps = {
60
61
  },
61
62
  buttonText: {
62
63
  type: String,
63
- default: "Change file"
64
+ default: "Replace your file(s) here"
64
65
  },
65
66
  overlayVariant: {
66
67
  type: String,
@@ -157,11 +158,7 @@ function useDropzone(props, emit) {
157
158
  "data-disabled": isDisabled.value || void 0,
158
159
  "data-variant": variant.value,
159
160
  tabindex: isDisabled.value ? -1 : 0,
160
- class: (0, import_recipes.dropzoneSlotRecipe)().wrapper,
161
- style: {
162
- background: variant.value === "default" ? "var(--mp-colors-white)" : "var(--mp-colors-background)",
163
- borderRadius: variant.value === "avatar" ? "var(--mp-radii-full)" : "var(--mp-radii-md)"
164
- }
161
+ class: (0, import_recipes.dropzoneSlotRecipe)().wrapper
165
162
  };
166
163
  });
167
164
  const boxAttrs = (0, import_vue.computed)(() => {
@@ -195,10 +192,10 @@ function useDropzone(props, emit) {
195
192
  const overlayAttrs = (0, import_vue.computed)(() => {
196
193
  return {
197
194
  ref: overlay,
195
+ "data-overlay": overlayVariant.value,
198
196
  class: (0, import_recipes.dropzoneSlotRecipe)().overlay,
199
197
  style: {
200
- display: showOverlay.value ? "flex" : "none",
201
- background: overlayVariant.value === "white" ? "var(--mp-colors-whiteAlpha.300)" : "var(--mp-colors-overlay)"
198
+ display: showOverlay.value ? "flex" : "none"
202
199
  }
203
200
  };
204
201
  });
@@ -218,7 +215,6 @@ function useDropzone(props, emit) {
218
215
  });
219
216
  const cancelButtonAttrs = (0, import_vue.computed)(() => {
220
217
  return {
221
- color: "red.400",
222
218
  style: {
223
219
  cursor: "pointer"
224
220
  },
@@ -229,7 +225,6 @@ function useDropzone(props, emit) {
229
225
  return {
230
226
  as: "span",
231
227
  weight: "semiBold",
232
- color: "blue.400",
233
228
  style: {
234
229
  cursor: "pointer"
235
230
  },
@@ -263,11 +258,7 @@ function useDropzone(props, emit) {
263
258
  class: (0, import_recipes.dropzoneSlotRecipe)().clearButton,
264
259
  name: "minus-circular",
265
260
  variant: "fill",
266
- color: "red.400",
267
- style: {
268
- top: variant.value === "avatar" ? "-4px" : "-10px",
269
- right: variant.value === "avatar" ? "-4px" : "-10px"
270
- },
261
+ "data-variant": variant.value,
271
262
  onClick: handleClear
272
263
  };
273
264
  });
@@ -406,6 +397,9 @@ var MpDropzone = (0, import_vue3.defineComponent)({
406
397
  emit,
407
398
  slots
408
399
  }) {
400
+ const {
401
+ isNextTheme
402
+ } = (0, import_pixel3_utils2.usePixelTheme)();
409
403
  const {
410
404
  rootAttrs,
411
405
  wrapperAttrs,
@@ -436,24 +430,53 @@ var MpDropzone = (0, import_vue3.defineComponent)({
436
430
  isLoading,
437
431
  isInvalid
438
432
  } = props;
433
+ const overlayTextColor = (0, import_vue3.computed)(() => {
434
+ let color = "black";
435
+ if (overlayVariant === "white") {
436
+ if (isNextTheme.value) {
437
+ color = "neutral.1000";
438
+ } else {
439
+ color = "dark";
440
+ }
441
+ } else {
442
+ if (isNextTheme.value) {
443
+ color = "white";
444
+ } else {
445
+ color = "white";
446
+ }
447
+ }
448
+ return color;
449
+ });
450
+ const iconColor = (0, import_vue3.computed)(() => {
451
+ return isInvalid ? isNextTheme.value ? "icon.danger" : "red.400" : isNextTheme.value ? "icon.brand" : "gray.600";
452
+ });
453
+ const textColor = (0, import_vue3.computed)(() => {
454
+ return isInvalid ? isNextTheme.value ? "text.danger" : "red.400" : isNextTheme.value ? "text.secondary" : "gray.600";
455
+ });
439
456
  return (0, import_vue2.createVNode)("div", rootAttrs.value, [children ? (0, import_vue2.createVNode)("div", overlayWrapperAttrs.value, [(0, import_vue2.createVNode)("div", overlayAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_text.MpText, {
440
457
  "weight": "semiBold",
441
- "color": overlayVariant === "white" ? "dark" : "white"
458
+ "color": overlayTextColor.value
442
459
  }, _isSlot(placeholder) ? placeholder : {
443
460
  default: () => [placeholder]
444
461
  }), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
445
- "color": overlayVariant === "white" ? "dark" : "white"
462
+ "color": overlayTextColor.value
446
463
  }, _isSlot(description) ? description : {
447
464
  default: () => [description]
448
- })]), children]) : (0, import_vue2.createVNode)("div", wrapperAttrs.value, [isLoading && (0, import_vue2.createVNode)("div", boxAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_spinner.MpSpinner, null, null), variant !== "avatar" && (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
449
- "color": "gray.600"
465
+ })]), children]) : (0, import_vue2.createVNode)("div", wrapperAttrs.value, [isLoading && (0, import_vue2.createVNode)("div", boxAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_spinner.MpSpinner, {
466
+ "color": isNextTheme.value ? "icon.brand" : "gray.600"
467
+ }, null), variant !== "avatar" && (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
468
+ "color": isNextTheme.value ? "text.secondary" : "gray.600"
450
469
  }, _isSlot(loadingText) ? loadingText : {
451
470
  default: () => [loadingText]
452
- }), variant === "default" && (0, import_vue2.createVNode)(import_pixel3_text.MpText, cancelButtonAttrs.value, {
471
+ }), variant === "default" && (0, import_vue2.createVNode)(import_pixel3_text.MpText, (0, import_vue2.mergeProps)(cancelButtonAttrs.value, {
472
+ "color": isNextTheme.value ? "text.danger" : "red.400"
473
+ }), {
453
474
  default: () => [(0, import_vue2.createTextVNode)("Cancel")]
454
- })]), !isLoading && hasPreview.value && (0, import_vue2.createVNode)("div", previewAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_icon.MpIcon, clearButtonAttrs.value, null), (0, import_vue2.createVNode)("div", overlayPreviewAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_icon.MpIcon, {
455
- "name": "folder-open",
456
- "variant": "fill",
475
+ })]), !isLoading && hasPreview.value && (0, import_vue2.createVNode)("div", previewAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_icon.MpIcon, (0, import_vue2.mergeProps)(clearButtonAttrs.value, {
476
+ "color": isNextTheme.value ? "icon.danger" : "red.400"
477
+ }), null), (0, import_vue2.createVNode)("div", overlayPreviewAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_icon.MpIcon, {
478
+ "name": "upload",
479
+ "variant": "outline",
457
480
  "color": "white"
458
481
  }, null), variant !== "avatar" && (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
459
482
  "color": "white"
@@ -461,35 +484,40 @@ var MpDropzone = (0, import_vue3.defineComponent)({
461
484
  default: () => [buttonText]
462
485
  })]), (0, import_vue2.createVNode)("img", imageAttrs.value, null)]), !isLoading && !hasPreview.value && variant === "default" && (0, import_vue2.createVNode)("div", boxAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_icon.MpIcon, {
463
486
  "name": "upload",
464
- "variant": isInvalid ? "outline" : "duotone",
465
- "color": isInvalid ? "red.400" : "gray.600"
466
- }, null), (0, import_vue2.createVNode)(import_pixel3_text.MpText, null, {
467
- default: () => [placeholder, (0, import_vue2.createVNode)(import_pixel3_text.MpText, browseButtonAttrs.value, {
487
+ "variant": "outline",
488
+ "color": iconColor.value,
489
+ "style": "width: 80px; height: 80px;"
490
+ }, null), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
491
+ "weight": "semiBold"
492
+ }, {
493
+ default: () => [placeholder, (0, import_vue2.createVNode)(import_pixel3_text.MpText, (0, import_vue2.mergeProps)(browseButtonAttrs.value, {
494
+ "color": isNextTheme.value ? "text.link" : "blue.400"
495
+ }), {
468
496
  default: () => [(0, import_vue2.createTextVNode)("Browse")]
469
497
  })]
470
498
  }), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
471
- "color": "gray.600"
499
+ "color": isNextTheme.value ? "text.secondary" : "gray.600"
472
500
  }, _isSlot(description) ? description : {
473
501
  default: () => [description]
474
502
  })]), !isLoading && !hasPreview.value && variant === "logo" && (0, import_vue2.createVNode)("div", logoBoxAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_icon.MpIcon, {
475
503
  "name": "img",
476
- "variant": isInvalid ? "fill" : "outline",
477
- "color": isInvalid ? "red.400" : "gray.600"
504
+ "variant": "outline",
505
+ "color": iconColor.value
478
506
  }, null), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
479
- "color": isInvalid ? "red.400" : "gray.600"
507
+ "color": textColor.value
480
508
  }, _isSlot(placeholder) ? placeholder : {
481
509
  default: () => [placeholder]
482
510
  })]), !isLoading && !hasPreview.value && variant === "product" && (0, import_vue2.createVNode)("div", productBoxAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_icon.MpIcon, {
483
511
  "name": "add-circular",
484
- "variant": isInvalid ? "fill" : "outline",
485
- "color": isInvalid ? "red.400" : "gray.600"
512
+ "variant": "outline",
513
+ "color": iconColor.value
486
514
  }, null), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
487
- "color": isInvalid ? "red.400" : "gray.600"
515
+ "color": textColor.value
488
516
  }, _isSlot(placeholder) ? placeholder : {
489
517
  default: () => [placeholder]
490
518
  })]), !isLoading && !hasPreview.value && variant === "avatar" && (0, import_vue2.createVNode)("div", avatarBoxAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_text.MpText, {
491
519
  "size": "h1",
492
- "color": isInvalid ? "red.400" : "gray.600"
520
+ "color": textColor.value
493
521
  }, _isSlot(placeholder) ? placeholder : {
494
522
  default: () => [placeholder]
495
523
  })])]), (0, import_vue2.createVNode)("input", inputAttrs.value, null)]);
package/dist/dropzone.mjs CHANGED
@@ -1,8 +1,8 @@
1
1
  import {
2
2
  MpDropzone
3
- } from "./chunk-DEUKYB7V.mjs";
4
- import "./chunk-PB3KHIIV.mjs";
5
- import "./chunk-CQO276YD.mjs";
3
+ } from "./chunk-7XRYSQYV.mjs";
4
+ import "./chunk-GWHWG6GP.mjs";
5
+ import "./chunk-5JNHQ27U.mjs";
6
6
  import "./chunk-QZ7VFGWC.mjs";
7
7
  export {
8
8
  MpDropzone
package/dist/index.d.mts CHANGED
@@ -1,3 +1,4 @@
1
1
  export { MpDropzone } from './dropzone.mjs';
2
+ export { DropzoneOverlayVariant, DropzoneVariant } from './modules/dropzone.types.mjs';
2
3
  import 'vue/jsx-runtime';
3
4
  import 'vue';
package/dist/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  export { MpDropzone } from './dropzone.js';
2
+ export { DropzoneOverlayVariant, DropzoneVariant } from './modules/dropzone.types.js';
2
3
  import 'vue/jsx-runtime';
3
4
  import 'vue';
package/dist/index.js CHANGED
@@ -31,6 +31,7 @@ var import_vue3 = require("vue");
31
31
  var import_pixel3_text = require("@mekari/pixel3-text");
32
32
  var import_pixel3_icon = require("@mekari/pixel3-icon");
33
33
  var import_pixel3_spinner = require("@mekari/pixel3-spinner");
34
+ var import_pixel3_utils2 = require("@mekari/pixel3-utils");
34
35
 
35
36
  // src/modules/dropzone.props.ts
36
37
  var dropzoneProps = {
@@ -62,7 +63,7 @@ var dropzoneProps = {
62
63
  },
63
64
  buttonText: {
64
65
  type: String,
65
- default: "Change file"
66
+ default: "Replace your file(s) here"
66
67
  },
67
68
  overlayVariant: {
68
69
  type: String,
@@ -159,11 +160,7 @@ function useDropzone(props, emit) {
159
160
  "data-disabled": isDisabled.value || void 0,
160
161
  "data-variant": variant.value,
161
162
  tabindex: isDisabled.value ? -1 : 0,
162
- class: (0, import_recipes.dropzoneSlotRecipe)().wrapper,
163
- style: {
164
- background: variant.value === "default" ? "var(--mp-colors-white)" : "var(--mp-colors-background)",
165
- borderRadius: variant.value === "avatar" ? "var(--mp-radii-full)" : "var(--mp-radii-md)"
166
- }
163
+ class: (0, import_recipes.dropzoneSlotRecipe)().wrapper
167
164
  };
168
165
  });
169
166
  const boxAttrs = (0, import_vue.computed)(() => {
@@ -197,10 +194,10 @@ function useDropzone(props, emit) {
197
194
  const overlayAttrs = (0, import_vue.computed)(() => {
198
195
  return {
199
196
  ref: overlay,
197
+ "data-overlay": overlayVariant.value,
200
198
  class: (0, import_recipes.dropzoneSlotRecipe)().overlay,
201
199
  style: {
202
- display: showOverlay.value ? "flex" : "none",
203
- background: overlayVariant.value === "white" ? "var(--mp-colors-whiteAlpha.300)" : "var(--mp-colors-overlay)"
200
+ display: showOverlay.value ? "flex" : "none"
204
201
  }
205
202
  };
206
203
  });
@@ -220,7 +217,6 @@ function useDropzone(props, emit) {
220
217
  });
221
218
  const cancelButtonAttrs = (0, import_vue.computed)(() => {
222
219
  return {
223
- color: "red.400",
224
220
  style: {
225
221
  cursor: "pointer"
226
222
  },
@@ -231,7 +227,6 @@ function useDropzone(props, emit) {
231
227
  return {
232
228
  as: "span",
233
229
  weight: "semiBold",
234
- color: "blue.400",
235
230
  style: {
236
231
  cursor: "pointer"
237
232
  },
@@ -265,11 +260,7 @@ function useDropzone(props, emit) {
265
260
  class: (0, import_recipes.dropzoneSlotRecipe)().clearButton,
266
261
  name: "minus-circular",
267
262
  variant: "fill",
268
- color: "red.400",
269
- style: {
270
- top: variant.value === "avatar" ? "-4px" : "-10px",
271
- right: variant.value === "avatar" ? "-4px" : "-10px"
272
- },
263
+ "data-variant": variant.value,
273
264
  onClick: handleClear
274
265
  };
275
266
  });
@@ -408,6 +399,9 @@ var MpDropzone = (0, import_vue3.defineComponent)({
408
399
  emit,
409
400
  slots
410
401
  }) {
402
+ const {
403
+ isNextTheme
404
+ } = (0, import_pixel3_utils2.usePixelTheme)();
411
405
  const {
412
406
  rootAttrs,
413
407
  wrapperAttrs,
@@ -438,24 +432,53 @@ var MpDropzone = (0, import_vue3.defineComponent)({
438
432
  isLoading,
439
433
  isInvalid
440
434
  } = props;
435
+ const overlayTextColor = (0, import_vue3.computed)(() => {
436
+ let color = "black";
437
+ if (overlayVariant === "white") {
438
+ if (isNextTheme.value) {
439
+ color = "neutral.1000";
440
+ } else {
441
+ color = "dark";
442
+ }
443
+ } else {
444
+ if (isNextTheme.value) {
445
+ color = "white";
446
+ } else {
447
+ color = "white";
448
+ }
449
+ }
450
+ return color;
451
+ });
452
+ const iconColor = (0, import_vue3.computed)(() => {
453
+ return isInvalid ? isNextTheme.value ? "icon.danger" : "red.400" : isNextTheme.value ? "icon.brand" : "gray.600";
454
+ });
455
+ const textColor = (0, import_vue3.computed)(() => {
456
+ return isInvalid ? isNextTheme.value ? "text.danger" : "red.400" : isNextTheme.value ? "text.secondary" : "gray.600";
457
+ });
441
458
  return (0, import_vue2.createVNode)("div", rootAttrs.value, [children ? (0, import_vue2.createVNode)("div", overlayWrapperAttrs.value, [(0, import_vue2.createVNode)("div", overlayAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_text.MpText, {
442
459
  "weight": "semiBold",
443
- "color": overlayVariant === "white" ? "dark" : "white"
460
+ "color": overlayTextColor.value
444
461
  }, _isSlot(placeholder) ? placeholder : {
445
462
  default: () => [placeholder]
446
463
  }), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
447
- "color": overlayVariant === "white" ? "dark" : "white"
464
+ "color": overlayTextColor.value
448
465
  }, _isSlot(description) ? description : {
449
466
  default: () => [description]
450
- })]), children]) : (0, import_vue2.createVNode)("div", wrapperAttrs.value, [isLoading && (0, import_vue2.createVNode)("div", boxAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_spinner.MpSpinner, null, null), variant !== "avatar" && (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
451
- "color": "gray.600"
467
+ })]), children]) : (0, import_vue2.createVNode)("div", wrapperAttrs.value, [isLoading && (0, import_vue2.createVNode)("div", boxAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_spinner.MpSpinner, {
468
+ "color": isNextTheme.value ? "icon.brand" : "gray.600"
469
+ }, null), variant !== "avatar" && (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
470
+ "color": isNextTheme.value ? "text.secondary" : "gray.600"
452
471
  }, _isSlot(loadingText) ? loadingText : {
453
472
  default: () => [loadingText]
454
- }), variant === "default" && (0, import_vue2.createVNode)(import_pixel3_text.MpText, cancelButtonAttrs.value, {
473
+ }), variant === "default" && (0, import_vue2.createVNode)(import_pixel3_text.MpText, (0, import_vue2.mergeProps)(cancelButtonAttrs.value, {
474
+ "color": isNextTheme.value ? "text.danger" : "red.400"
475
+ }), {
455
476
  default: () => [(0, import_vue2.createTextVNode)("Cancel")]
456
- })]), !isLoading && hasPreview.value && (0, import_vue2.createVNode)("div", previewAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_icon.MpIcon, clearButtonAttrs.value, null), (0, import_vue2.createVNode)("div", overlayPreviewAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_icon.MpIcon, {
457
- "name": "folder-open",
458
- "variant": "fill",
477
+ })]), !isLoading && hasPreview.value && (0, import_vue2.createVNode)("div", previewAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_icon.MpIcon, (0, import_vue2.mergeProps)(clearButtonAttrs.value, {
478
+ "color": isNextTheme.value ? "icon.danger" : "red.400"
479
+ }), null), (0, import_vue2.createVNode)("div", overlayPreviewAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_icon.MpIcon, {
480
+ "name": "upload",
481
+ "variant": "outline",
459
482
  "color": "white"
460
483
  }, null), variant !== "avatar" && (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
461
484
  "color": "white"
@@ -463,35 +486,40 @@ var MpDropzone = (0, import_vue3.defineComponent)({
463
486
  default: () => [buttonText]
464
487
  })]), (0, import_vue2.createVNode)("img", imageAttrs.value, null)]), !isLoading && !hasPreview.value && variant === "default" && (0, import_vue2.createVNode)("div", boxAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_icon.MpIcon, {
465
488
  "name": "upload",
466
- "variant": isInvalid ? "outline" : "duotone",
467
- "color": isInvalid ? "red.400" : "gray.600"
468
- }, null), (0, import_vue2.createVNode)(import_pixel3_text.MpText, null, {
469
- default: () => [placeholder, (0, import_vue2.createVNode)(import_pixel3_text.MpText, browseButtonAttrs.value, {
489
+ "variant": "outline",
490
+ "color": iconColor.value,
491
+ "style": "width: 80px; height: 80px;"
492
+ }, null), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
493
+ "weight": "semiBold"
494
+ }, {
495
+ default: () => [placeholder, (0, import_vue2.createVNode)(import_pixel3_text.MpText, (0, import_vue2.mergeProps)(browseButtonAttrs.value, {
496
+ "color": isNextTheme.value ? "text.link" : "blue.400"
497
+ }), {
470
498
  default: () => [(0, import_vue2.createTextVNode)("Browse")]
471
499
  })]
472
500
  }), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
473
- "color": "gray.600"
501
+ "color": isNextTheme.value ? "text.secondary" : "gray.600"
474
502
  }, _isSlot(description) ? description : {
475
503
  default: () => [description]
476
504
  })]), !isLoading && !hasPreview.value && variant === "logo" && (0, import_vue2.createVNode)("div", logoBoxAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_icon.MpIcon, {
477
505
  "name": "img",
478
- "variant": isInvalid ? "fill" : "outline",
479
- "color": isInvalid ? "red.400" : "gray.600"
506
+ "variant": "outline",
507
+ "color": iconColor.value
480
508
  }, null), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
481
- "color": isInvalid ? "red.400" : "gray.600"
509
+ "color": textColor.value
482
510
  }, _isSlot(placeholder) ? placeholder : {
483
511
  default: () => [placeholder]
484
512
  })]), !isLoading && !hasPreview.value && variant === "product" && (0, import_vue2.createVNode)("div", productBoxAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_icon.MpIcon, {
485
513
  "name": "add-circular",
486
- "variant": isInvalid ? "fill" : "outline",
487
- "color": isInvalid ? "red.400" : "gray.600"
514
+ "variant": "outline",
515
+ "color": iconColor.value
488
516
  }, null), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
489
- "color": isInvalid ? "red.400" : "gray.600"
517
+ "color": textColor.value
490
518
  }, _isSlot(placeholder) ? placeholder : {
491
519
  default: () => [placeholder]
492
520
  })]), !isLoading && !hasPreview.value && variant === "avatar" && (0, import_vue2.createVNode)("div", avatarBoxAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_text.MpText, {
493
521
  "size": "h1",
494
- "color": isInvalid ? "red.400" : "gray.600"
522
+ "color": textColor.value
495
523
  }, _isSlot(placeholder) ? placeholder : {
496
524
  default: () => [placeholder]
497
525
  })])]), (0, import_vue2.createVNode)("input", inputAttrs.value, null)]);
package/dist/index.mjs CHANGED
@@ -1,9 +1,10 @@
1
1
  import {
2
2
  MpDropzone
3
- } from "./chunk-DEUKYB7V.mjs";
4
- import "./chunk-PB3KHIIV.mjs";
5
- import "./chunk-CQO276YD.mjs";
3
+ } from "./chunk-7XRYSQYV.mjs";
4
+ import "./chunk-GWHWG6GP.mjs";
5
+ import "./chunk-5JNHQ27U.mjs";
6
6
  import "./chunk-QZ7VFGWC.mjs";
7
+ import "./chunk-VE4DE26L.mjs";
7
8
  export {
8
9
  MpDropzone
9
10
  };
package/dist/metafile-cjs.json CHANGED
@@ -1 +1 @@
1
- {"inputs":{"src/modules/dropzone.props.ts":{"bytes":2052,"imports":[],"format":"esm"},"src/modules/dropzone.hooks.ts":{"bytes":6942,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/dropzone.tsx":{"bytes":4803,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-spinner","kind":"import-statement","external":true},{"path":"src/modules/dropzone.props.ts","kind":"import-statement","original":"./modules/dropzone.props"},{"path":"src/modules/dropzone.hooks.ts","kind":"import-statement","original":"./modules/dropzone.hooks"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":125,"imports":[{"path":"src/dropzone.tsx","kind":"import-statement","original":"./dropzone"}],"format":"esm"}},"outputs":{"dist/dropzone.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true},{"path":"@mekari/pixel3-icon","kind":"require-call","external":true},{"path":"@mekari/pixel3-spinner","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/dropzone.tsx","inputs":{"src/dropzone.tsx":{"bytesInOutput":5574},"src/modules/dropzone.props.ts":{"bytesInOutput":1260},"src/modules/dropzone.hooks.ts":{"bytesInOutput":7624}},"bytes":15561},"dist/index.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true},{"path":"@mekari/pixel3-icon","kind":"require-call","external":true},{"path":"@mekari/pixel3-spinner","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":125},"src/dropzone.tsx":{"bytesInOutput":5434},"src/modules/dropzone.props.ts":{"bytesInOutput":1260},"src/modules/dropzone.hooks.ts":{"bytesInOutput":7624}},"bytes":15563},"dist/modules/dropzone.hooks.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/dropzone.hooks.ts","inputs":{"src/modules/dropzone.hooks.ts":{"bytesInOutput":7784}},"bytes":8812},"dist/modules/dropzone.props.js":{"imports":[],"exports":[],"entryPoint":"src/modules/dropzone.props.ts","inputs":{"src/modules/dropzone.props.ts":{"bytesInOutput":1460}},"bytes":2416}}}
1
+ {"inputs":{"src/modules/dropzone.props.ts":{"bytes":2126,"imports":[],"format":"esm"},"src/modules/dropzone.hooks.ts":{"bytes":6446,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/dropzone.tsx":{"bytes":5994,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-spinner","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"src/modules/dropzone.props.ts","kind":"import-statement","original":"./modules/dropzone.props"},{"path":"src/modules/dropzone.hooks.ts","kind":"import-statement","original":"./modules/dropzone.hooks"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/dropzone.types.ts":{"bytes":213,"imports":[],"format":"esm"},"src/index.ts":{"bytes":167,"imports":[{"path":"src/dropzone.tsx","kind":"import-statement","original":"./dropzone"},{"path":"src/modules/dropzone.types.ts","kind":"import-statement","original":"./modules/dropzone.types"}],"format":"esm"}},"outputs":{"dist/dropzone.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true},{"path":"@mekari/pixel3-icon","kind":"require-call","external":true},{"path":"@mekari/pixel3-spinner","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/dropzone.tsx","inputs":{"src/dropzone.tsx":{"bytesInOutput":6859},"src/modules/dropzone.props.ts":{"bytesInOutput":1274},"src/modules/dropzone.hooks.ts":{"bytesInOutput":7139}},"bytes":16375},"dist/index.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true},{"path":"@mekari/pixel3-icon","kind":"require-call","external":true},{"path":"@mekari/pixel3-spinner","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":125},"src/dropzone.tsx":{"bytesInOutput":6719},"src/modules/dropzone.props.ts":{"bytesInOutput":1274},"src/modules/dropzone.hooks.ts":{"bytesInOutput":7139}},"bytes":16377},"dist/modules/dropzone.hooks.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/dropzone.hooks.ts","inputs":{"src/modules/dropzone.hooks.ts":{"bytesInOutput":7299}},"bytes":8327},"dist/modules/dropzone.props.js":{"imports":[],"exports":[],"entryPoint":"src/modules/dropzone.props.ts","inputs":{"src/modules/dropzone.props.ts":{"bytesInOutput":1474}},"bytes":2430},"dist/modules/dropzone.types.js":{"imports":[],"exports":[],"entryPoint":"src/modules/dropzone.types.ts","inputs":{"src/modules/dropzone.types.ts":{"bytesInOutput":88}},"bytes":793}}}
package/dist/metafile-esm.json CHANGED
@@ -1 +1 @@
1
- {"inputs":{"src/modules/dropzone.props.ts":{"bytes":2052,"imports":[],"format":"esm"},"src/modules/dropzone.hooks.ts":{"bytes":6942,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/dropzone.tsx":{"bytes":4803,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-spinner","kind":"import-statement","external":true},{"path":"src/modules/dropzone.props.ts","kind":"import-statement","original":"./modules/dropzone.props"},{"path":"src/modules/dropzone.hooks.ts","kind":"import-statement","original":"./modules/dropzone.hooks"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":125,"imports":[{"path":"src/dropzone.tsx","kind":"import-statement","original":"./dropzone"}],"format":"esm"}},"outputs":{"dist/dropzone.mjs":{"imports":[{"path":"dist/chunk-DEUKYB7V.mjs","kind":"import-statement"},{"path":"dist/chunk-PB3KHIIV.mjs","kind":"import-statement"},{"path":"dist/chunk-CQO276YD.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpDropzone"],"entryPoint":"src/dropzone.tsx","inputs":{},"bytes":171},"dist/index.mjs":{"imports":[{"path":"dist/chunk-DEUKYB7V.mjs","kind":"import-statement"},{"path":"dist/chunk-PB3KHIIV.mjs","kind":"import-statement"},{"path":"dist/chunk-CQO276YD.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpDropzone"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0}},"bytes":171},"dist/chunk-DEUKYB7V.mjs":{"imports":[{"path":"dist/chunk-PB3KHIIV.mjs","kind":"import-statement"},{"path":"dist/chunk-CQO276YD.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-spinner","kind":"import-statement","external":true}],"exports":["MpDropzone"],"inputs":{"src/dropzone.tsx":{"bytesInOutput":4610}},"bytes":4832},"dist/modules/dropzone.hooks.mjs":{"imports":[{"path":"dist/chunk-PB3KHIIV.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["useDropzone"],"entryPoint":"src/modules/dropzone.hooks.ts","inputs":{},"bytes":113},"dist/chunk-PB3KHIIV.mjs":{"imports":[{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true}],"exports":["useDropzone"],"inputs":{"src/modules/dropzone.hooks.ts":{"bytesInOutput":7035}},"bytes":7145},"dist/modules/dropzone.props.mjs":{"imports":[{"path":"dist/chunk-CQO276YD.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["dropzoneEmit","dropzoneProps"],"entryPoint":"src/modules/dropzone.props.ts","inputs":{},"bytes":149},"dist/chunk-CQO276YD.mjs":{"imports":[],"exports":["dropzoneEmit","dropzoneProps"],"inputs":{"src/modules/dropzone.props.ts":{"bytesInOutput":1260}},"bytes":1338},"dist/chunk-QZ7VFGWC.mjs":{"imports":[],"exports":["__name"],"inputs":{},"bytes":151}}}
1
+ {"inputs":{"src/modules/dropzone.props.ts":{"bytes":2126,"imports":[],"format":"esm"},"src/modules/dropzone.hooks.ts":{"bytes":6446,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/dropzone.tsx":{"bytes":5994,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-spinner","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"src/modules/dropzone.props.ts","kind":"import-statement","original":"./modules/dropzone.props"},{"path":"src/modules/dropzone.hooks.ts","kind":"import-statement","original":"./modules/dropzone.hooks"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/dropzone.types.ts":{"bytes":213,"imports":[],"format":"esm"},"src/index.ts":{"bytes":167,"imports":[{"path":"src/dropzone.tsx","kind":"import-statement","original":"./dropzone"},{"path":"src/modules/dropzone.types.ts","kind":"import-statement","original":"./modules/dropzone.types"}],"format":"esm"}},"outputs":{"dist/dropzone.mjs":{"imports":[{"path":"dist/chunk-7XRYSQYV.mjs","kind":"import-statement"},{"path":"dist/chunk-GWHWG6GP.mjs","kind":"import-statement"},{"path":"dist/chunk-5JNHQ27U.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpDropzone"],"entryPoint":"src/dropzone.tsx","inputs":{},"bytes":171},"dist/index.mjs":{"imports":[{"path":"dist/chunk-7XRYSQYV.mjs","kind":"import-statement"},{"path":"dist/chunk-GWHWG6GP.mjs","kind":"import-statement"},{"path":"dist/chunk-5JNHQ27U.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"dist/chunk-VE4DE26L.mjs","kind":"import-statement"}],"exports":["MpDropzone"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0}},"bytes":202},"dist/chunk-7XRYSQYV.mjs":{"imports":[{"path":"dist/chunk-GWHWG6GP.mjs","kind":"import-statement"},{"path":"dist/chunk-5JNHQ27U.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"@mekari/pixel3-spinner","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"exports":["MpDropzone"],"inputs":{"src/dropzone.tsx":{"bytesInOutput":5801}},"bytes":6023},"dist/modules/dropzone.hooks.mjs":{"imports":[{"path":"dist/chunk-GWHWG6GP.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["useDropzone"],"entryPoint":"src/modules/dropzone.hooks.ts","inputs":{},"bytes":113},"dist/chunk-GWHWG6GP.mjs":{"imports":[{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true}],"exports":["useDropzone"],"inputs":{"src/modules/dropzone.hooks.ts":{"bytesInOutput":6550}},"bytes":6660},"dist/modules/dropzone.props.mjs":{"imports":[{"path":"dist/chunk-5JNHQ27U.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["dropzoneEmit","dropzoneProps"],"entryPoint":"src/modules/dropzone.props.ts","inputs":{},"bytes":149},"dist/chunk-5JNHQ27U.mjs":{"imports":[],"exports":["dropzoneEmit","dropzoneProps"],"inputs":{"src/modules/dropzone.props.ts":{"bytesInOutput":1274}},"bytes":1352},"dist/chunk-QZ7VFGWC.mjs":{"imports":[],"exports":["__name"],"inputs":{},"bytes":151},"dist/modules/dropzone.types.mjs":{"imports":[{"path":"dist/chunk-VE4DE26L.mjs","kind":"import-statement"}],"exports":[],"entryPoint":"src/modules/dropzone.types.ts","inputs":{},"bytes":32},"dist/chunk-VE4DE26L.mjs":{"imports":[],"exports":[],"inputs":{"src/modules/dropzone.types.ts":{"bytesInOutput":0}},"bytes":0}}}
package/dist/modules/dropzone.hooks.d.mts CHANGED
@@ -1,3 +1,4 @@
1
+ import { DropzoneVariant, DropzoneOverlayVariant } from './dropzone.types.mjs';
1
2
  import * as vue from 'vue';
2
3
  import { DropzoneProps, DropzoenEmits } from './dropzone.props.mjs';
3
4
 
@@ -14,13 +15,9 @@ declare function useDropzone(props: DropzoneProps, emit: DropzoenEmits): {
14
15
  wrapperAttrs: vue.ComputedRef<{
15
16
  'data-invalid': true | undefined;
16
17
  'data-disabled': true | undefined;
17
- 'data-variant': "default" | "logo" | "product" | "avatar";
18
+ 'data-variant': DropzoneVariant;
18
19
  tabindex: number;
19
20
  class: string;
20
- style: {
21
- background: string;
22
- borderRadius: string;
23
- };
24
21
  }>;
25
22
  boxAttrs: vue.ComputedRef<{
26
23
  class: string;
@@ -42,10 +39,10 @@ declare function useDropzone(props: DropzoneProps, emit: DropzoenEmits): {
42
39
  }>;
43
40
  overlayAttrs: vue.ComputedRef<{
44
41
  ref: vue.Ref<any>;
42
+ 'data-overlay': DropzoneOverlayVariant;
45
43
  class: string;
46
44
  style: {
47
45
  display: string;
48
- background: string;
49
46
  };
50
47
  }>;
51
48
  inputAttrs: vue.ComputedRef<{
@@ -69,7 +66,6 @@ declare function useDropzone(props: DropzoneProps, emit: DropzoenEmits): {
69
66
  };
70
67
  }>;
71
68
  cancelButtonAttrs: vue.ComputedRef<{
72
- color: string;
73
69
  style: {
74
70
  cursor: string;
75
71
  };
@@ -78,7 +74,6 @@ declare function useDropzone(props: DropzoneProps, emit: DropzoenEmits): {
78
74
  browseButtonAttrs: vue.ComputedRef<{
79
75
  as: "span";
80
76
  weight: "semiBold";
81
- color: string;
82
77
  style: {
83
78
  cursor: string;
84
79
  };
@@ -96,11 +91,7 @@ declare function useDropzone(props: DropzoneProps, emit: DropzoenEmits): {
96
91
  class: string;
97
92
  name: "minus-circular";
98
93
  variant: "fill";
99
- color: "red.400";
100
- style: {
101
- top: string;
102
- right: string;
103
- };
94
+ 'data-variant': DropzoneVariant;
104
95
  onClick: (e: Event) => void;
105
96
  }>;
106
97
  hasPreview: vue.ComputedRef<string | false>;
package/dist/modules/dropzone.hooks.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { DropzoneVariant, DropzoneOverlayVariant } from './dropzone.types.js';
1
2
  import * as vue from 'vue';
2
3
  import { DropzoneProps, DropzoenEmits } from './dropzone.props.js';
3
4
 
@@ -14,13 +15,9 @@ declare function useDropzone(props: DropzoneProps, emit: DropzoenEmits): {
14
15
  wrapperAttrs: vue.ComputedRef<{
15
16
  'data-invalid': true | undefined;
16
17
  'data-disabled': true | undefined;
17
- 'data-variant': "default" | "logo" | "product" | "avatar";
18
+ 'data-variant': DropzoneVariant;
18
19
  tabindex: number;
19
20
  class: string;
20
- style: {
21
- background: string;
22
- borderRadius: string;
23
- };
24
21
  }>;
25
22
  boxAttrs: vue.ComputedRef<{
26
23
  class: string;
@@ -42,10 +39,10 @@ declare function useDropzone(props: DropzoneProps, emit: DropzoenEmits): {
42
39
  }>;
43
40
  overlayAttrs: vue.ComputedRef<{
44
41
  ref: vue.Ref<any>;
42
+ 'data-overlay': DropzoneOverlayVariant;
45
43
  class: string;
46
44
  style: {
47
45
  display: string;
48
- background: string;
49
46
  };
50
47
  }>;
51
48
  inputAttrs: vue.ComputedRef<{
@@ -69,7 +66,6 @@ declare function useDropzone(props: DropzoneProps, emit: DropzoenEmits): {
69
66
  };
70
67
  }>;
71
68
  cancelButtonAttrs: vue.ComputedRef<{
72
- color: string;
73
69
  style: {
74
70
  cursor: string;
75
71
  };
@@ -78,7 +74,6 @@ declare function useDropzone(props: DropzoneProps, emit: DropzoenEmits): {
78
74
  browseButtonAttrs: vue.ComputedRef<{
79
75
  as: "span";
80
76
  weight: "semiBold";
81
- color: string;
82
77
  style: {
83
78
  cursor: string;
84
79
  };
@@ -96,11 +91,7 @@ declare function useDropzone(props: DropzoneProps, emit: DropzoenEmits): {
96
91
  class: string;
97
92
  name: "minus-circular";
98
93
  variant: "fill";
99
- color: "red.400";
100
- style: {
101
- top: string;
102
- right: string;
103
- };
94
+ 'data-variant': DropzoneVariant;
104
95
  onClick: (e: Event) => void;
105
96
  }>;
106
97
  hasPreview: vue.ComputedRef<string | false>;
package/dist/modules/dropzone.hooks.js CHANGED
@@ -71,11 +71,7 @@ function useDropzone(props, emit) {
71
71
  "data-disabled": isDisabled.value || void 0,
72
72
  "data-variant": variant.value,
73
73
  tabindex: isDisabled.value ? -1 : 0,
74
- class: (0, import_recipes.dropzoneSlotRecipe)().wrapper,
75
- style: {
76
- background: variant.value === "default" ? "var(--mp-colors-white)" : "var(--mp-colors-background)",
77
- borderRadius: variant.value === "avatar" ? "var(--mp-radii-full)" : "var(--mp-radii-md)"
78
- }
74
+ class: (0, import_recipes.dropzoneSlotRecipe)().wrapper
79
75
  };
80
76
  });
81
77
  const boxAttrs = (0, import_vue.computed)(() => {
@@ -109,10 +105,10 @@ function useDropzone(props, emit) {
109
105
  const overlayAttrs = (0, import_vue.computed)(() => {
110
106
  return {
111
107
  ref: overlay,
108
+ "data-overlay": overlayVariant.value,
112
109
  class: (0, import_recipes.dropzoneSlotRecipe)().overlay,
113
110
  style: {
114
- display: showOverlay.value ? "flex" : "none",
115
- background: overlayVariant.value === "white" ? "var(--mp-colors-whiteAlpha.300)" : "var(--mp-colors-overlay)"
111
+ display: showOverlay.value ? "flex" : "none"
116
112
  }
117
113
  };
118
114
  });
@@ -132,7 +128,6 @@ function useDropzone(props, emit) {
132
128
  });
133
129
  const cancelButtonAttrs = (0, import_vue.computed)(() => {
134
130
  return {
135
- color: "red.400",
136
131
  style: {
137
132
  cursor: "pointer"
138
133
  },
@@ -143,7 +138,6 @@ function useDropzone(props, emit) {
143
138
  return {
144
139
  as: "span",
145
140
  weight: "semiBold",
146
- color: "blue.400",
147
141
  style: {
148
142
  cursor: "pointer"
149
143
  },
@@ -177,11 +171,7 @@ function useDropzone(props, emit) {
177
171
  class: (0, import_recipes.dropzoneSlotRecipe)().clearButton,
178
172
  name: "minus-circular",
179
173
  variant: "fill",
180
- color: "red.400",
181
- style: {
182
- top: variant.value === "avatar" ? "-4px" : "-10px",
183
- right: variant.value === "avatar" ? "-4px" : "-10px"
184
- },
174
+ "data-variant": variant.value,
185
175
  onClick: handleClear
186
176
  };
187
177
  });
package/dist/modules/dropzone.hooks.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  useDropzone
3
- } from "../chunk-PB3KHIIV.mjs";
3
+ } from "../chunk-GWHWG6GP.mjs";
4
4
  import "../chunk-QZ7VFGWC.mjs";
5
5
  export {
6
6
  useDropzone
package/dist/modules/dropzone.props.d.mts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { PropType, ExtractPropTypes } from 'vue';
2
+ import { DropzoneVariant, DropzoneOverlayVariant } from './dropzone.types.mjs';
2
3
 
3
4
  declare const dropzoneProps: {
4
5
  id: {
@@ -6,7 +7,7 @@ declare const dropzoneProps: {
6
7
  default: string;
7
8
  };
8
9
  variant: {
9
- type: PropType<"default" | "logo" | "product" | "avatar">;
10
+ type: PropType<DropzoneVariant>;
10
11
  default: string;
11
12
  };
12
13
  accept: {
@@ -32,7 +33,7 @@ declare const dropzoneProps: {
32
33
  default: string;
33
34
  };
34
35
  overlayVariant: {
35
- type: PropType<"white" | "black">;
36
+ type: PropType<DropzoneOverlayVariant>;
36
37
  default: string;
37
38
  };
38
39
  isShowPreview: {
package/dist/modules/dropzone.props.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { PropType, ExtractPropTypes } from 'vue';
2
+ import { DropzoneVariant, DropzoneOverlayVariant } from './dropzone.types.js';
2
3
 
3
4
  declare const dropzoneProps: {
4
5
  id: {
@@ -6,7 +7,7 @@ declare const dropzoneProps: {
6
7
  default: string;
7
8
  };
8
9
  variant: {
9
- type: PropType<"default" | "logo" | "product" | "avatar">;
10
+ type: PropType<DropzoneVariant>;
10
11
  default: string;
11
12
  };
12
13
  accept: {
@@ -32,7 +33,7 @@ declare const dropzoneProps: {
32
33
  default: string;
33
34
  };
34
35
  overlayVariant: {
35
- type: PropType<"white" | "black">;
36
+ type: PropType<DropzoneOverlayVariant>;
36
37
  default: string;
37
38
  };
38
39
  isShowPreview: {
package/dist/modules/dropzone.props.js CHANGED
@@ -53,7 +53,7 @@ var dropzoneProps = {
53
53
  },
54
54
  buttonText: {
55
55
  type: String,
56
- default: "Change file"
56
+ default: "Replace your file(s) here"
57
57
  },
58
58
  overlayVariant: {
59
59
  type: String,
package/dist/modules/dropzone.props.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  dropzoneEmit,
3
3
  dropzoneProps
4
- } from "../chunk-CQO276YD.mjs";
4
+ } from "../chunk-5JNHQ27U.mjs";
5
5
  import "../chunk-QZ7VFGWC.mjs";
6
6
  export {
7
7
  dropzoneEmit,
package/dist/modules/dropzone.types.d.mts ADDED
@@ -0,0 +1,4 @@
1
+ type DropzoneVariant = 'default' | 'logo' | 'product' | 'avatar';
2
+ type DropzoneOverlayVariant = 'white' | 'black';
3
+
4
+ export { DropzoneOverlayVariant, DropzoneVariant };
package/dist/modules/dropzone.types.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ type DropzoneVariant = 'default' | 'logo' | 'product' | 'avatar';
2
+ type DropzoneOverlayVariant = 'white' | 'black';
3
+
4
+ export { DropzoneOverlayVariant, DropzoneVariant };
package/dist/modules/dropzone.types.js ADDED
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __copyProps = (to, from, except, desc) => {
7
+ if (from && typeof from === "object" || typeof from === "function") {
8
+ for (let key of __getOwnPropNames(from))
9
+ if (!__hasOwnProp.call(to, key) && key !== except)
10
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
11
+ }
12
+ return to;
13
+ };
14
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
15
+
16
+ // src/modules/dropzone.types.ts
17
+ var dropzone_types_exports = {};
18
+ module.exports = __toCommonJS(dropzone_types_exports);
package/dist/modules/dropzone.types.mjs ADDED
@@ -0,0 +1 @@
1
+ import "../chunk-VE4DE26L.mjs";
package/package.json CHANGED
@@ -1,19 +1,19 @@
1
1
  {
2
2
  "name": "@mekari/pixel3-dropzone",
3
3
  "description": "Dropzone component for mekari pixel 3",
4
- "version": "0.0.15",
4
+ "version": "0.0.16-dev.1",
5
5
  "main": "dist/index.js",
6
6
  "license": "MIT",
7
7
  "files": [
8
8
  "dist"
9
9
  ],
10
10
  "dependencies": {
11
- "@mekari/pixel3-icon": "0.0.16",
12
- "@mekari/pixel3-spinner": "0.0.16",
13
- "@mekari/pixel3-styled-system": "0.1.1",
14
- "@mekari/pixel3-text": "0.0.15",
15
- "@mekari/pixel3-utils": "0.0.6",
16
- "@mekari/pixel3-tooltip": "0.0.15"
11
+ "@mekari/pixel3-icon": "0.0.17-dev.1",
12
+ "@mekari/pixel3-spinner": "0.0.17-dev.1",
13
+ "@mekari/pixel3-styled-system": "0.1.2-dev.1",
14
+ "@mekari/pixel3-text": "0.0.16-dev.1",
15
+ "@mekari/pixel3-tooltip": "0.0.16-dev.1",
16
+ "@mekari/pixel3-utils": "0.0.7-dev.1"
17
17
  },
18
18
  "peerDependencies": {
19
19
  "vue": "^3.4.9"
@@ -40,6 +40,7 @@
40
40
  "build:types": "tsup src --dts-only",
41
41
  "types:check": "tsc --noEmit",
42
42
  "replace-config": "clean-package",
43
- "restore-config": "clean-package restore"
43
+ "restore-config": "clean-package restore",
44
+ "types:vue": "vue-tsc --noEmit"
44
45
  }
45
46
  }