@mantine/dropzone 7.0.1 → 7.1.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 (4) hide show
  1. package/cjs/index.css +1 -83
  2. package/esm/index.css +1 -83
  3. package/esm/index.layer.css +1 -0
  4. package/package.json +5 -4
package/cjs/index.css CHANGED
@@ -1,83 +1 @@
1
- .m-d46a4834 {
2
- position: relative;
3
- background-color: var(--_dropzone-bg);
4
- border: calc(0.0625rem * var(--mantine-scale)) dashed var(--_dropzone-border-color);
5
- color: var(--_dropzone-color, var(--mantine-color-text));
6
- padding: var(--mantine-spacing-md);
7
- border-radius: var(--dropzone-radius);
8
- cursor: var(--_dropzone-cursor, pointer);
9
- user-select: none;
10
- transition:
11
- background-color 100ms ease,
12
- border-color 100ms ease;
13
- }
14
-
15
- .m-d46a4834[data-loading],
16
- .m-d46a4834:not([data-activate-on-click]) {
17
- --_dropzone-cursor: default;
18
- }
19
-
20
- [data-mantine-color-scheme='light'] .m-d46a4834 {
21
- --_dropzone-bg: var(--mantine-color-white);
22
- --_dropzone-border-color: var(--mantine-color-gray-4);
23
- }
24
-
25
- [data-mantine-color-scheme='dark'] .m-d46a4834 {
26
- --_dropzone-bg: var(--mantine-color-dark-6);
27
- --_dropzone-border-color: var(--mantine-color-dark-4);
28
- }
29
-
30
- @media (hover: hover) {
31
- [data-mantine-color-scheme='light'] .m-d46a4834:hover[data-activate-on-click]:not([data-loading]) {
32
- --_dropzone-bg: var(--mantine-color-gray-0);
33
- }
34
-
35
- [data-mantine-color-scheme='dark'] .m-d46a4834:hover[data-activate-on-click]:not([data-loading]) {
36
- --_dropzone-bg: var(--mantine-color-dark-5);
37
- }
38
- }
39
-
40
- @media (hover: none) {
41
- [data-mantine-color-scheme='light'] .m-d46a4834:active[data-activate-on-click]:not([data-loading]) {
42
- --_dropzone-bg: var(--mantine-color-gray-0);
43
- }
44
-
45
- [data-mantine-color-scheme='dark'] .m-d46a4834:active[data-activate-on-click]:not([data-loading]) {
46
- --_dropzone-bg: var(--mantine-color-dark-5);
47
- }
48
- }
49
-
50
- .m-d46a4834[data-accept] {
51
- --_dropzone-bg: var(--dropzone-accept-bg);
52
- --_dropzone-border-color: var(--dropzone-accept-bg);
53
- --_dropzone-color: var(--dropzone-accept-color);
54
- }
55
-
56
- .m-d46a4834[data-reject] {
57
- --_dropzone-bg: var(--dropzone-reject-bg);
58
- --_dropzone-border-color: var(--dropzone-reject-bg);
59
- --_dropzone-color: var(--dropzone-reject-color);
60
- }
61
-
62
- .m-b85f7144 {
63
- pointer-events: var(--_dropzone-inner-pointer-events, all);
64
- user-select: none;
65
- }
66
-
67
- .m-b85f7144[data-disable-pointer-events] {
68
- --_dropzone-inner-pointer-events: none;
69
- }
70
-
71
- .m-96f6e9ad {
72
- position: fixed;
73
- inset: 0;
74
- background-color: var(--mantine-color-body);
75
- display: flex;
76
- flex-direction: column;
77
- padding: var(--mantine-spacing-xs);
78
- transition: opacity 100ms ease;
79
- }
80
-
81
- .m-96f6e9ad .m-7946116d {
82
- flex: 1 1;
83
- }
1
+ .m-d46a4834{background-color:var(--_dropzone-bg);border:calc(.0625rem*var(--mantine-scale)) dashed var(--_dropzone-border-color);border-radius:var(--dropzone-radius);color:var(--_dropzone-color,var(--mantine-color-text));cursor:var(--_dropzone-cursor,pointer);padding:var(--mantine-spacing-md);position:relative;transition:background-color .1s ease,border-color .1s ease;user-select:none}.m-d46a4834:not([data-activate-on-click]),.m-d46a4834[data-loading]{--_dropzone-cursor:default}[data-mantine-color-scheme=light] .m-d46a4834{--_dropzone-bg:var(--mantine-color-white);--_dropzone-border-color:var(--mantine-color-gray-4)}[data-mantine-color-scheme=dark] .m-d46a4834{--_dropzone-bg:var(--mantine-color-dark-6);--_dropzone-border-color:var(--mantine-color-dark-4)}@media (hover:hover){[data-mantine-color-scheme=light] .m-d46a4834:hover[data-activate-on-click]:not([data-loading]){--_dropzone-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-d46a4834:hover[data-activate-on-click]:not([data-loading]){--_dropzone-bg:var(--mantine-color-dark-5)}}@media (hover:none){[data-mantine-color-scheme=light] .m-d46a4834:active[data-activate-on-click]:not([data-loading]){--_dropzone-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-d46a4834:active[data-activate-on-click]:not([data-loading]){--_dropzone-bg:var(--mantine-color-dark-5)}}.m-d46a4834[data-accept]{--_dropzone-bg:var(--dropzone-accept-bg);--_dropzone-border-color:var(--dropzone-accept-bg);--_dropzone-color:var(--dropzone-accept-color)}.m-d46a4834[data-reject]{--_dropzone-bg:var(--dropzone-reject-bg);--_dropzone-border-color:var(--dropzone-reject-bg);--_dropzone-color:var(--dropzone-reject-color)}.m-b85f7144{pointer-events:var(--_dropzone-inner-pointer-events,all);user-select:none}.m-b85f7144[data-disable-pointer-events]{--_dropzone-inner-pointer-events:none}.m-96f6e9ad{background-color:var(--mantine-color-body);display:flex;flex-direction:column;inset:0;padding:var(--mantine-spacing-xs);position:fixed;transition:opacity .1s ease}.m-96f6e9ad .m-7946116d{flex:1 1}
package/esm/index.css CHANGED
@@ -1,83 +1 @@
1
- .m-d46a4834 {
2
- position: relative;
3
- background-color: var(--_dropzone-bg);
4
- border: calc(0.0625rem * var(--mantine-scale)) dashed var(--_dropzone-border-color);
5
- color: var(--_dropzone-color, var(--mantine-color-text));
6
- padding: var(--mantine-spacing-md);
7
- border-radius: var(--dropzone-radius);
8
- cursor: var(--_dropzone-cursor, pointer);
9
- user-select: none;
10
- transition:
11
- background-color 100ms ease,
12
- border-color 100ms ease;
13
- }
14
-
15
- .m-d46a4834[data-loading],
16
- .m-d46a4834:not([data-activate-on-click]) {
17
- --_dropzone-cursor: default;
18
- }
19
-
20
- [data-mantine-color-scheme='light'] .m-d46a4834 {
21
- --_dropzone-bg: var(--mantine-color-white);
22
- --_dropzone-border-color: var(--mantine-color-gray-4);
23
- }
24
-
25
- [data-mantine-color-scheme='dark'] .m-d46a4834 {
26
- --_dropzone-bg: var(--mantine-color-dark-6);
27
- --_dropzone-border-color: var(--mantine-color-dark-4);
28
- }
29
-
30
- @media (hover: hover) {
31
- [data-mantine-color-scheme='light'] .m-d46a4834:hover[data-activate-on-click]:not([data-loading]) {
32
- --_dropzone-bg: var(--mantine-color-gray-0);
33
- }
34
-
35
- [data-mantine-color-scheme='dark'] .m-d46a4834:hover[data-activate-on-click]:not([data-loading]) {
36
- --_dropzone-bg: var(--mantine-color-dark-5);
37
- }
38
- }
39
-
40
- @media (hover: none) {
41
- [data-mantine-color-scheme='light'] .m-d46a4834:active[data-activate-on-click]:not([data-loading]) {
42
- --_dropzone-bg: var(--mantine-color-gray-0);
43
- }
44
-
45
- [data-mantine-color-scheme='dark'] .m-d46a4834:active[data-activate-on-click]:not([data-loading]) {
46
- --_dropzone-bg: var(--mantine-color-dark-5);
47
- }
48
- }
49
-
50
- .m-d46a4834[data-accept] {
51
- --_dropzone-bg: var(--dropzone-accept-bg);
52
- --_dropzone-border-color: var(--dropzone-accept-bg);
53
- --_dropzone-color: var(--dropzone-accept-color);
54
- }
55
-
56
- .m-d46a4834[data-reject] {
57
- --_dropzone-bg: var(--dropzone-reject-bg);
58
- --_dropzone-border-color: var(--dropzone-reject-bg);
59
- --_dropzone-color: var(--dropzone-reject-color);
60
- }
61
-
62
- .m-b85f7144 {
63
- pointer-events: var(--_dropzone-inner-pointer-events, all);
64
- user-select: none;
65
- }
66
-
67
- .m-b85f7144[data-disable-pointer-events] {
68
- --_dropzone-inner-pointer-events: none;
69
- }
70
-
71
- .m-96f6e9ad {
72
- position: fixed;
73
- inset: 0;
74
- background-color: var(--mantine-color-body);
75
- display: flex;
76
- flex-direction: column;
77
- padding: var(--mantine-spacing-xs);
78
- transition: opacity 100ms ease;
79
- }
80
-
81
- .m-96f6e9ad .m-7946116d {
82
- flex: 1 1;
83
- }
1
+ .m-d46a4834{background-color:var(--_dropzone-bg);border:calc(.0625rem*var(--mantine-scale)) dashed var(--_dropzone-border-color);border-radius:var(--dropzone-radius);color:var(--_dropzone-color,var(--mantine-color-text));cursor:var(--_dropzone-cursor,pointer);padding:var(--mantine-spacing-md);position:relative;transition:background-color .1s ease,border-color .1s ease;user-select:none}.m-d46a4834:not([data-activate-on-click]),.m-d46a4834[data-loading]{--_dropzone-cursor:default}[data-mantine-color-scheme=light] .m-d46a4834{--_dropzone-bg:var(--mantine-color-white);--_dropzone-border-color:var(--mantine-color-gray-4)}[data-mantine-color-scheme=dark] .m-d46a4834{--_dropzone-bg:var(--mantine-color-dark-6);--_dropzone-border-color:var(--mantine-color-dark-4)}@media (hover:hover){[data-mantine-color-scheme=light] .m-d46a4834:hover[data-activate-on-click]:not([data-loading]){--_dropzone-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-d46a4834:hover[data-activate-on-click]:not([data-loading]){--_dropzone-bg:var(--mantine-color-dark-5)}}@media (hover:none){[data-mantine-color-scheme=light] .m-d46a4834:active[data-activate-on-click]:not([data-loading]){--_dropzone-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-d46a4834:active[data-activate-on-click]:not([data-loading]){--_dropzone-bg:var(--mantine-color-dark-5)}}.m-d46a4834[data-accept]{--_dropzone-bg:var(--dropzone-accept-bg);--_dropzone-border-color:var(--dropzone-accept-bg);--_dropzone-color:var(--dropzone-accept-color)}.m-d46a4834[data-reject]{--_dropzone-bg:var(--dropzone-reject-bg);--_dropzone-border-color:var(--dropzone-reject-bg);--_dropzone-color:var(--dropzone-reject-color)}.m-b85f7144{pointer-events:var(--_dropzone-inner-pointer-events,all);user-select:none}.m-b85f7144[data-disable-pointer-events]{--_dropzone-inner-pointer-events:none}.m-96f6e9ad{background-color:var(--mantine-color-body);display:flex;flex-direction:column;inset:0;padding:var(--mantine-spacing-xs);position:fixed;transition:opacity .1s ease}.m-96f6e9ad .m-7946116d{flex:1 1}
package/esm/index.layer.css ADDED
@@ -0,0 +1 @@
1
+ @layer mantine {.m-d46a4834{background-color:var(--_dropzone-bg);border:calc(.0625rem*var(--mantine-scale)) dashed var(--_dropzone-border-color);border-radius:var(--dropzone-radius);color:var(--_dropzone-color,var(--mantine-color-text));cursor:var(--_dropzone-cursor,pointer);padding:var(--mantine-spacing-md);position:relative;transition:background-color .1s ease,border-color .1s ease;user-select:none}.m-d46a4834:not([data-activate-on-click]),.m-d46a4834[data-loading]{--_dropzone-cursor:default}[data-mantine-color-scheme=light] .m-d46a4834{--_dropzone-bg:var(--mantine-color-white);--_dropzone-border-color:var(--mantine-color-gray-4)}[data-mantine-color-scheme=dark] .m-d46a4834{--_dropzone-bg:var(--mantine-color-dark-6);--_dropzone-border-color:var(--mantine-color-dark-4)}@media (hover:hover){[data-mantine-color-scheme=light] .m-d46a4834:hover[data-activate-on-click]:not([data-loading]){--_dropzone-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-d46a4834:hover[data-activate-on-click]:not([data-loading]){--_dropzone-bg:var(--mantine-color-dark-5)}}@media (hover:none){[data-mantine-color-scheme=light] .m-d46a4834:active[data-activate-on-click]:not([data-loading]){--_dropzone-bg:var(--mantine-color-gray-0)}[data-mantine-color-scheme=dark] .m-d46a4834:active[data-activate-on-click]:not([data-loading]){--_dropzone-bg:var(--mantine-color-dark-5)}}.m-d46a4834[data-accept]{--_dropzone-bg:var(--dropzone-accept-bg);--_dropzone-border-color:var(--dropzone-accept-bg);--_dropzone-color:var(--dropzone-accept-color)}.m-d46a4834[data-reject]{--_dropzone-bg:var(--dropzone-reject-bg);--_dropzone-border-color:var(--dropzone-reject-bg);--_dropzone-color:var(--dropzone-reject-color)}.m-b85f7144{pointer-events:var(--_dropzone-inner-pointer-events,all);user-select:none}.m-b85f7144[data-disable-pointer-events]{--_dropzone-inner-pointer-events:none}.m-96f6e9ad{background-color:var(--mantine-color-body);display:flex;flex-direction:column;inset:0;padding:var(--mantine-spacing-xs);position:fixed;transition:opacity .1s ease}.m-96f6e9ad .m-7946116d{flex:1 1}}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@mantine/dropzone",
3
3
  "description": "Dropzone component built with Mantine theme and components",
4
- "version": "7.0.1",
4
+ "version": "7.1.0",
5
5
  "main": "./cjs/index.js",
6
6
  "types": "./lib/index.d.ts",
7
7
  "module": "./esm/index.mjs",
@@ -16,7 +16,8 @@
16
16
  "default": "./cjs/index.js"
17
17
  }
18
18
  },
19
- "./styles.css": "./esm/index.css"
19
+ "./styles.css": "./esm/index.css",
20
+ "./styles.layer.css": "./esm/index.layer.css"
20
21
  },
21
22
  "license": "MIT",
22
23
  "author": "Vitaly Rtishchev <rtivital@gmail.com>",
@@ -43,8 +44,8 @@
43
44
  "upload"
44
45
  ],
45
46
  "peerDependencies": {
46
- "@mantine/core": "7.0.1",
47
- "@mantine/hooks": "7.0.1",
47
+ "@mantine/core": "7.1.0",
48
+ "@mantine/hooks": "7.1.0",
48
49
  "react": "^18.2.0",
49
50
  "react-dom": "^18.2.0"
50
51
  },