@mekari/pixel3-dropzone 0.0.15 → 0.0.16-dev.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.
Files changed (16) hide show
  1. package/dist/{chunk-CQO276YD.mjs → chunk-5JNHQ27U.mjs} +1 -1
  2. package/dist/{chunk-DEUKYB7V.mjs → chunk-5UURK6X5.mjs} +61 -24
  3. package/dist/{chunk-PB3KHIIV.mjs → chunk-GWHWG6GP.mjs} +4 -14
  4. package/dist/dropzone.js +62 -35
  5. package/dist/dropzone.mjs +3 -3
  6. package/dist/index.js +62 -35
  7. package/dist/index.mjs +3 -3
  8. package/dist/metafile-cjs.json +1 -1
  9. package/dist/metafile-esm.json +1 -1
  10. package/dist/modules/dropzone.hooks.d.mts +2 -12
  11. package/dist/modules/dropzone.hooks.d.ts +2 -12
  12. package/dist/modules/dropzone.hooks.js +4 -14
  13. package/dist/modules/dropzone.hooks.mjs +1 -1
  14. package/dist/modules/dropzone.props.js +1 -1
  15. package/dist/modules/dropzone.props.mjs +1 -1
  16. package/package.json +7 -7
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-5UURK6X5.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,39 @@ 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
+ }, null), _createVNode(MpText, {
121
+ "weight": "semiBold"
122
+ }, {
123
+ default: () => [placeholder, _createVNode(MpText, _mergeProps(browseButtonAttrs.value, {
124
+ "color": isNextTheme.value ? "text.link" : "blue.400"
125
+ }), {
89
126
  default: () => [_createTextVNode("Browse")]
90
127
  })]
91
128
  }), _createVNode(MpText, {
92
- "color": "gray.600"
129
+ "color": isNextTheme.value ? "text.secondary" : "gray.600"
93
130
  }, _isSlot(description) ? description : {
94
131
  default: () => [description]
95
132
  })]), !isLoading && !hasPreview.value && variant === "logo" && _createVNode("div", logoBoxAttrs.value, [_createVNode(MpIcon, {
96
133
  "name": "img",
97
- "variant": isInvalid ? "fill" : "outline",
98
- "color": isInvalid ? "red.400" : "gray.600"
134
+ "variant": "outline",
135
+ "color": iconColor.value
99
136
  }, null), _createVNode(MpText, {
100
- "color": isInvalid ? "red.400" : "gray.600"
137
+ "color": textColor.value
101
138
  }, _isSlot(placeholder) ? placeholder : {
102
139
  default: () => [placeholder]
103
140
  })]), !isLoading && !hasPreview.value && variant === "product" && _createVNode("div", productBoxAttrs.value, [_createVNode(MpIcon, {
104
141
  "name": "add-circular",
105
- "variant": isInvalid ? "fill" : "outline",
106
- "color": isInvalid ? "red.400" : "gray.600"
142
+ "variant": "outline",
143
+ "color": iconColor.value
107
144
  }, null), _createVNode(MpText, {
108
- "color": isInvalid ? "red.400" : "gray.600"
145
+ "color": textColor.value
109
146
  }, _isSlot(placeholder) ? placeholder : {
110
147
  default: () => [placeholder]
111
148
  })]), !isLoading && !hasPreview.value && variant === "avatar" && _createVNode("div", avatarBoxAttrs.value, [_createVNode(MpText, {
112
149
  "size": "h1",
113
- "color": isInvalid ? "red.400" : "gray.600"
150
+ "color": textColor.value
114
151
  }, _isSlot(placeholder) ? placeholder : {
115
152
  default: () => [placeholder]
116
153
  })])]), _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/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,39 @@ 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
+ }, null), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
490
+ "weight": "semiBold"
491
+ }, {
492
+ default: () => [placeholder, (0, import_vue2.createVNode)(import_pixel3_text.MpText, (0, import_vue2.mergeProps)(browseButtonAttrs.value, {
493
+ "color": isNextTheme.value ? "text.link" : "blue.400"
494
+ }), {
468
495
  default: () => [(0, import_vue2.createTextVNode)("Browse")]
469
496
  })]
470
497
  }), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
471
- "color": "gray.600"
498
+ "color": isNextTheme.value ? "text.secondary" : "gray.600"
472
499
  }, _isSlot(description) ? description : {
473
500
  default: () => [description]
474
501
  })]), !isLoading && !hasPreview.value && variant === "logo" && (0, import_vue2.createVNode)("div", logoBoxAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_icon.MpIcon, {
475
502
  "name": "img",
476
- "variant": isInvalid ? "fill" : "outline",
477
- "color": isInvalid ? "red.400" : "gray.600"
503
+ "variant": "outline",
504
+ "color": iconColor.value
478
505
  }, null), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
479
- "color": isInvalid ? "red.400" : "gray.600"
506
+ "color": textColor.value
480
507
  }, _isSlot(placeholder) ? placeholder : {
481
508
  default: () => [placeholder]
482
509
  })]), !isLoading && !hasPreview.value && variant === "product" && (0, import_vue2.createVNode)("div", productBoxAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_icon.MpIcon, {
483
510
  "name": "add-circular",
484
- "variant": isInvalid ? "fill" : "outline",
485
- "color": isInvalid ? "red.400" : "gray.600"
511
+ "variant": "outline",
512
+ "color": iconColor.value
486
513
  }, null), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
487
- "color": isInvalid ? "red.400" : "gray.600"
514
+ "color": textColor.value
488
515
  }, _isSlot(placeholder) ? placeholder : {
489
516
  default: () => [placeholder]
490
517
  })]), !isLoading && !hasPreview.value && variant === "avatar" && (0, import_vue2.createVNode)("div", avatarBoxAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_text.MpText, {
491
518
  "size": "h1",
492
- "color": isInvalid ? "red.400" : "gray.600"
519
+ "color": textColor.value
493
520
  }, _isSlot(placeholder) ? placeholder : {
494
521
  default: () => [placeholder]
495
522
  })])]), (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-5UURK6X5.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.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,39 @@ 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
+ }, null), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
492
+ "weight": "semiBold"
493
+ }, {
494
+ default: () => [placeholder, (0, import_vue2.createVNode)(import_pixel3_text.MpText, (0, import_vue2.mergeProps)(browseButtonAttrs.value, {
495
+ "color": isNextTheme.value ? "text.link" : "blue.400"
496
+ }), {
470
497
  default: () => [(0, import_vue2.createTextVNode)("Browse")]
471
498
  })]
472
499
  }), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
473
- "color": "gray.600"
500
+ "color": isNextTheme.value ? "text.secondary" : "gray.600"
474
501
  }, _isSlot(description) ? description : {
475
502
  default: () => [description]
476
503
  })]), !isLoading && !hasPreview.value && variant === "logo" && (0, import_vue2.createVNode)("div", logoBoxAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_icon.MpIcon, {
477
504
  "name": "img",
478
- "variant": isInvalid ? "fill" : "outline",
479
- "color": isInvalid ? "red.400" : "gray.600"
505
+ "variant": "outline",
506
+ "color": iconColor.value
480
507
  }, null), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
481
- "color": isInvalid ? "red.400" : "gray.600"
508
+ "color": textColor.value
482
509
  }, _isSlot(placeholder) ? placeholder : {
483
510
  default: () => [placeholder]
484
511
  })]), !isLoading && !hasPreview.value && variant === "product" && (0, import_vue2.createVNode)("div", productBoxAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_icon.MpIcon, {
485
512
  "name": "add-circular",
486
- "variant": isInvalid ? "fill" : "outline",
487
- "color": isInvalid ? "red.400" : "gray.600"
513
+ "variant": "outline",
514
+ "color": iconColor.value
488
515
  }, null), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
489
- "color": isInvalid ? "red.400" : "gray.600"
516
+ "color": textColor.value
490
517
  }, _isSlot(placeholder) ? placeholder : {
491
518
  default: () => [placeholder]
492
519
  })]), !isLoading && !hasPreview.value && variant === "avatar" && (0, import_vue2.createVNode)("div", avatarBoxAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_text.MpText, {
493
520
  "size": "h1",
494
- "color": isInvalid ? "red.400" : "gray.600"
521
+ "color": textColor.value
495
522
  }, _isSlot(placeholder) ? placeholder : {
496
523
  default: () => [placeholder]
497
524
  })])]), (0, import_vue2.createVNode)("input", inputAttrs.value, null)]);
package/dist/index.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-5UURK6X5.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/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":2066,"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":5947,"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/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":"@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":6812},"src/modules/dropzone.props.ts":{"bytesInOutput":1274},"src/modules/dropzone.hooks.ts":{"bytesInOutput":7139}},"bytes":16328},"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":6672},"src/modules/dropzone.props.ts":{"bytesInOutput":1274},"src/modules/dropzone.hooks.ts":{"bytesInOutput":7139}},"bytes":16330},"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}}}
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":2066,"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":5947,"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/index.ts":{"bytes":125,"imports":[{"path":"src/dropzone.tsx","kind":"import-statement","original":"./dropzone"}],"format":"esm"}},"outputs":{"dist/dropzone.mjs":{"imports":[{"path":"dist/chunk-5UURK6X5.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-5UURK6X5.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/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0}},"bytes":171},"dist/chunk-5UURK6X5.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":5754}},"bytes":5976},"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}}}
package/dist/modules/dropzone.hooks.d.mts CHANGED
@@ -17,10 +17,6 @@ declare function useDropzone(props: DropzoneProps, emit: DropzoenEmits): {
17
17
  'data-variant': "default" | "logo" | "product" | "avatar";
18
18
  tabindex: number;
19
19
  class: string;
20
- style: {
21
- background: string;
22
- borderRadius: string;
23
- };
24
20
  }>;
25
21
  boxAttrs: vue.ComputedRef<{
26
22
  class: string;
@@ -42,10 +38,10 @@ declare function useDropzone(props: DropzoneProps, emit: DropzoenEmits): {
42
38
  }>;
43
39
  overlayAttrs: vue.ComputedRef<{
44
40
  ref: vue.Ref<any>;
41
+ 'data-overlay': "white" | "black";
45
42
  class: string;
46
43
  style: {
47
44
  display: string;
48
- background: string;
49
45
  };
50
46
  }>;
51
47
  inputAttrs: vue.ComputedRef<{
@@ -69,7 +65,6 @@ declare function useDropzone(props: DropzoneProps, emit: DropzoenEmits): {
69
65
  };
70
66
  }>;
71
67
  cancelButtonAttrs: vue.ComputedRef<{
72
- color: string;
73
68
  style: {
74
69
  cursor: string;
75
70
  };
@@ -78,7 +73,6 @@ declare function useDropzone(props: DropzoneProps, emit: DropzoenEmits): {
78
73
  browseButtonAttrs: vue.ComputedRef<{
79
74
  as: "span";
80
75
  weight: "semiBold";
81
- color: string;
82
76
  style: {
83
77
  cursor: string;
84
78
  };
@@ -96,11 +90,7 @@ declare function useDropzone(props: DropzoneProps, emit: DropzoenEmits): {
96
90
  class: string;
97
91
  name: "minus-circular";
98
92
  variant: "fill";
99
- color: "red.400";
100
- style: {
101
- top: string;
102
- right: string;
103
- };
93
+ 'data-variant': "default" | "logo" | "product" | "avatar";
104
94
  onClick: (e: Event) => void;
105
95
  }>;
106
96
  hasPreview: vue.ComputedRef<string | false>;
package/dist/modules/dropzone.hooks.d.ts CHANGED
@@ -17,10 +17,6 @@ declare function useDropzone(props: DropzoneProps, emit: DropzoenEmits): {
17
17
  'data-variant': "default" | "logo" | "product" | "avatar";
18
18
  tabindex: number;
19
19
  class: string;
20
- style: {
21
- background: string;
22
- borderRadius: string;
23
- };
24
20
  }>;
25
21
  boxAttrs: vue.ComputedRef<{
26
22
  class: string;
@@ -42,10 +38,10 @@ declare function useDropzone(props: DropzoneProps, emit: DropzoenEmits): {
42
38
  }>;
43
39
  overlayAttrs: vue.ComputedRef<{
44
40
  ref: vue.Ref<any>;
41
+ 'data-overlay': "white" | "black";
45
42
  class: string;
46
43
  style: {
47
44
  display: string;
48
- background: string;
49
45
  };
50
46
  }>;
51
47
  inputAttrs: vue.ComputedRef<{
@@ -69,7 +65,6 @@ declare function useDropzone(props: DropzoneProps, emit: DropzoenEmits): {
69
65
  };
70
66
  }>;
71
67
  cancelButtonAttrs: vue.ComputedRef<{
72
- color: string;
73
68
  style: {
74
69
  cursor: string;
75
70
  };
@@ -78,7 +73,6 @@ declare function useDropzone(props: DropzoneProps, emit: DropzoenEmits): {
78
73
  browseButtonAttrs: vue.ComputedRef<{
79
74
  as: "span";
80
75
  weight: "semiBold";
81
- color: string;
82
76
  style: {
83
77
  cursor: string;
84
78
  };
@@ -96,11 +90,7 @@ declare function useDropzone(props: DropzoneProps, emit: DropzoenEmits): {
96
90
  class: string;
97
91
  name: "minus-circular";
98
92
  variant: "fill";
99
- color: "red.400";
100
- style: {
101
- top: string;
102
- right: string;
103
- };
93
+ 'data-variant': "default" | "logo" | "product" | "avatar";
104
94
  onClick: (e: Event) => void;
105
95
  }>;
106
96
  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.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/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.0",
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.0",
12
+ "@mekari/pixel3-spinner": "0.0.17-dev.0",
13
+ "@mekari/pixel3-styled-system": "0.1.2-dev.0",
14
+ "@mekari/pixel3-text": "0.0.16-dev.0",
15
+ "@mekari/pixel3-tooltip": "0.0.16-dev.0",
16
+ "@mekari/pixel3-utils": "0.0.7-dev.0"
17
17
  },
18
18
  "peerDependencies": {
19
19
  "vue": "^3.4.9"