@a-type/ui 6.1.30 → 6.1.32

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 (10) hide show
  1. package/dist/components/dialog/Dialog.module.css +2 -2
  2. package/dist/components/imageUploader/ImageUploader.module.css +2 -4
  3. package/dist/components/lightbox/Lightbox.js +1 -1
  4. package/dist/components/lightbox/Lightbox.js.map +1 -1
  5. package/dist/components/lightbox/Lightbox.module.css +8 -15
  6. package/package.json +1 -1
  7. package/src/components/dialog/Dialog.module.css +2 -2
  8. package/src/components/imageUploader/ImageUploader.module.css +2 -4
  9. package/src/components/lightbox/Lightbox.module.css +8 -15
  10. package/src/components/lightbox/Lightbox.tsx +1 -1
package/dist/components/dialog/Dialog.module.css CHANGED
@@ -96,6 +96,7 @@
96
96
  .actions {
97
97
  position: sticky;
98
98
  bottom: var(--m-sp-md);
99
+ margin-block-start: var(--m-sp-lg);
99
100
  z-index: 100;
100
101
  display: flex;
101
102
  flex-direction: row;
@@ -103,14 +104,13 @@
103
104
  align-items: center;
104
105
  justify-content: end;
105
106
  align-self: end;
106
- padding-bottom: 1px;
107
+ padding-bottom: --fn-literal(1px);
107
108
  @apply --mx-shadow;
108
109
  /* override blur in case user turned it off */
109
110
  --mx-shadow-value: 0 calc(-1 * var(--m-shadow-md-y)) 16px
110
111
  var(--m-shadow-md-spread) var(--m-gray-paper);
111
112
  @apply --mx-bg(var(--m-surface-ambient-bg));
112
113
  @apply --mx-bg-faded(50%);
113
- margin-block-start: var(--m-sp-md);
114
114
  gap: var(--m-sp-sm);
115
115
  border-radius: var(--m-surface-rd);
116
116
  }
package/dist/components/imageUploader/ImageUploader.module.css CHANGED
@@ -29,8 +29,8 @@
29
29
  top: var(--m-sp-sm);
30
30
  right: var(--m-sp-sm);
31
31
  z-index: 10;
32
- height: 32px;
33
- width: 32px;
32
+ height: --fn-literal(32px);
33
+ width: --fn-literal(32px);
34
34
  cursor: pointer;
35
35
  padding: var(--m-sp-sm);
36
36
  @apply --mx-bg(var(--m-surface-ambient-bg));
@@ -49,8 +49,6 @@
49
49
  }
50
50
 
51
51
  .emptyControls {
52
- position: absolute;
53
- inset: 0;
54
52
  min-height: 120px;
55
53
  display: flex;
56
54
  flex-direction: column;
package/dist/components/lightbox/Lightbox.js CHANGED
@@ -16,7 +16,7 @@ export const LightboxContent = (props) => {
16
16
  };
17
17
  const LightboxContentInner = withClassName('div', cls.contentInner);
18
18
  function LightboxDefault({ children, }) {
19
- return (_jsxs(Dialog.Root, { children: [_jsx(Dialog.Trigger, { render: children }), _jsxs(Dialog.Portal, { children: [_jsx(LightboxOverlay, {}), _jsx(LightboxContent, { children: children })] })] }));
19
+ return (_jsxs(Dialog.Root, { children: [_jsx(Dialog.Trigger, { nativeButton: false, render: children }), _jsxs(Dialog.Portal, { children: [_jsx(LightboxOverlay, {}), _jsx(LightboxContent, { children: children })] })] }));
20
20
  }
21
21
  const LightboxImage = withClassName('img', cls.image);
22
22
  export const Lightbox = Object.assign(LightboxDefault, {
package/dist/components/lightbox/Lightbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Lightbox.js","sourceRoot":"","sources":["../../../src/components/lightbox/Lightbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EACN,MAAM,GAGN,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,GAAG,MAAM,uBAAuB,CAAC;AAMxC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC;AACxC,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAC,MAAM,CAAC,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;AAC1E,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC;AAC5C,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,CAClC,KAAC,MAAM,CAAC,KAAK,IAAC,SAAS,EAAE,GAAG,CAAC,KAAK,yBAAyB,CAC3D,CAAC;AACF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAuB,EAAE,EAAE,CAAC,CACzD,KAAC,MAAM,CAAC,KAAK,oBACR,KAAK,IACT,MAAM,EACL,KAAC,MAAM,kBAAY,OAAO,YACzB,KAAC,IAAI,IAAC,IAAI,EAAC,GAAG,GAAG,GACT,EAEV,SAAS,EAAE,GAAG,CAAC,KAAK,IACnB,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;AAE3E,MAAM,CAAC,MAAM,mBAAmB,GAAG,aAAa,CAAC,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;AAChF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAuB,EAAE,EAAE;IAC1D,OAAO,CACN,MAAC,mBAAmB,oBAAK,KAAK,eAC7B,KAAC,aAAa,KAAG,EACjB,KAAC,aAAa,IAAC,SAAS,EAAE,GAAG,CAAC,iBAAiB,GAAI,EACnD,KAAC,oBAAoB,cAAE,KAAK,CAAC,QAAQ,GAAwB,KACxC,CACtB,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,oBAAoB,GAAG,aAAa,CAAC,KAAK,EAAE,GAAG,CAAC,YAAY,CAAC,CAAC;AAEpE,SAAS,eAAe,CAAC,EACxB,QAAQ,GAGR;IACA,OAAO,CACN,MAAC,MAAM,CAAC,IAAI,eACX,KAAC,MAAM,CAAC,OAAO,IAAC,MAAM,EAAE,QAAQ,GAAmB,EACnD,MAAC,MAAM,CAAC,MAAM,eACb,KAAC,eAAe,KAAG,EACnB,KAAC,eAAe,cAAE,QAAQ,GAAmB,IAC9B,IACH,CACd,CAAC;AACH,CAAC;AAED,MAAM,aAAa,GAAG,aAAa,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC;AAEtD,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE;IACtD,OAAO,EAAE,eAAe;IACxB,OAAO,EAAE,eAAe;IACxB,KAAK,EAAE,aAAa;IACpB,IAAI,EAAE,YAAY;IAClB,OAAO,EAAE,eAAe;IACxB,KAAK,EAAE,aAAa;IACpB,KAAK,EAAE,aAAa;IACpB,MAAM,EAAE,cAAc;CACtB,CAAC,CAAC"}
1
+ {"version":3,"file":"Lightbox.js","sourceRoot":"","sources":["../../../src/components/lightbox/Lightbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EACN,MAAM,GAGN,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,GAAG,MAAM,uBAAuB,CAAC;AAMxC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC;AACxC,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAC,MAAM,CAAC,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;AAC1E,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC;AAC5C,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,CAClC,KAAC,MAAM,CAAC,KAAK,IAAC,SAAS,EAAE,GAAG,CAAC,KAAK,yBAAyB,CAC3D,CAAC;AACF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAuB,EAAE,EAAE,CAAC,CACzD,KAAC,MAAM,CAAC,KAAK,oBACR,KAAK,IACT,MAAM,EACL,KAAC,MAAM,kBAAY,OAAO,YACzB,KAAC,IAAI,IAAC,IAAI,EAAC,GAAG,GAAG,GACT,EAEV,SAAS,EAAE,GAAG,CAAC,KAAK,IACnB,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;AAE3E,MAAM,CAAC,MAAM,mBAAmB,GAAG,aAAa,CAAC,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;AAChF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAuB,EAAE,EAAE;IAC1D,OAAO,CACN,MAAC,mBAAmB,oBAAK,KAAK,eAC7B,KAAC,aAAa,KAAG,EACjB,KAAC,aAAa,IAAC,SAAS,EAAE,GAAG,CAAC,iBAAiB,GAAI,EACnD,KAAC,oBAAoB,cAAE,KAAK,CAAC,QAAQ,GAAwB,KACxC,CACtB,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,oBAAoB,GAAG,aAAa,CAAC,KAAK,EAAE,GAAG,CAAC,YAAY,CAAC,CAAC;AAEpE,SAAS,eAAe,CAAC,EACxB,QAAQ,GAGR;IACA,OAAO,CACN,MAAC,MAAM,CAAC,IAAI,eACX,KAAC,MAAM,CAAC,OAAO,IAAC,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,GAAmB,EACxE,MAAC,MAAM,CAAC,MAAM,eACb,KAAC,eAAe,KAAG,EACnB,KAAC,eAAe,cAAE,QAAQ,GAAmB,IAC9B,IACH,CACd,CAAC;AACH,CAAC;AAED,MAAM,aAAa,GAAG,aAAa,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC;AAEtD,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE;IACtD,OAAO,EAAE,eAAe;IACxB,OAAO,EAAE,eAAe;IACxB,KAAK,EAAE,aAAa;IACpB,IAAI,EAAE,YAAY;IAClB,OAAO,EAAE,eAAe;IACxB,KAAK,EAAE,aAAa;IACpB,KAAK,EAAE,aAAa;IACpB,MAAM,EAAE,cAAc;CACtB,CAAC,CAAC"}
package/dist/components/lightbox/Lightbox.module.css CHANGED
@@ -1,23 +1,14 @@
1
1
  @layer components {.trigger {
2
2
  cursor: pointer;
3
-
4
- &:focus {
5
- outline: none;
6
- }
7
-
8
- &:focus-visible {
9
- @apply --mx-shadow;
10
- --mx-ring-value: --fn-focus-ring();
11
- border-radius: var(--m-action-rd);
12
- }
3
+ @apply --mx-focus;
13
4
  }
14
5
 
15
6
  .title {
16
7
  position: absolute;
17
- width: 1px;
18
- height: 1px;
8
+ width: --fn-literal(1px);
9
+ height: --fn-literal(1px);
19
10
  padding: 0;
20
- margin: -1px;
11
+ margin: --fn-literal(-1px);
21
12
  overflow: hidden;
22
13
  clip: rect(0, 0, 0, 0);
23
14
  white-space: nowrap;
@@ -40,7 +31,8 @@
40
31
  @apply --mx-bg(var(--m-gray-ink));
41
32
  @apply --mx-bg-faded(50%);
42
33
 
43
- &[data-state='closed'] {
34
+ &[data-starting-style],
35
+ &[data-ending-style] {
44
36
  opacity: 0;
45
37
  }
46
38
  }
@@ -70,7 +62,8 @@
70
62
  opacity 0.2s ease,
71
63
  transform 0.2s ease;
72
64
 
73
- &[data-state='closed'] {
65
+ &[data-starting-style],
66
+ &[data-ending-style] {
74
67
  opacity: 0;
75
68
  transform: translate(-50%, -45%) scale(0.95);
76
69
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@a-type/ui",
3
- "version": "6.1.30",
3
+ "version": "6.1.32",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "url": "https://github.com/a-type/ui"
package/src/components/dialog/Dialog.module.css CHANGED
@@ -96,6 +96,7 @@
96
96
  .actions {
97
97
  position: sticky;
98
98
  bottom: var(--m-sp-md);
99
+ margin-block-start: var(--m-sp-lg);
99
100
  z-index: 100;
100
101
  display: flex;
101
102
  flex-direction: row;
@@ -103,14 +104,13 @@
103
104
  align-items: center;
104
105
  justify-content: end;
105
106
  align-self: end;
106
- padding-bottom: 1px;
107
+ padding-bottom: --fn-literal(1px);
107
108
  @apply --mx-shadow;
108
109
  /* override blur in case user turned it off */
109
110
  --mx-shadow-value: 0 calc(-1 * var(--m-shadow-md-y)) 16px
110
111
  var(--m-shadow-md-spread) var(--m-gray-paper);
111
112
  @apply --mx-bg(var(--m-surface-ambient-bg));
112
113
  @apply --mx-bg-faded(50%);
113
- margin-block-start: var(--m-sp-md);
114
114
  gap: var(--m-sp-sm);
115
115
  border-radius: var(--m-surface-rd);
116
116
  }
package/src/components/imageUploader/ImageUploader.module.css CHANGED
@@ -29,8 +29,8 @@
29
29
  top: var(--m-sp-sm);
30
30
  right: var(--m-sp-sm);
31
31
  z-index: 10;
32
- height: 32px;
33
- width: 32px;
32
+ height: --fn-literal(32px);
33
+ width: --fn-literal(32px);
34
34
  cursor: pointer;
35
35
  padding: var(--m-sp-sm);
36
36
  @apply --mx-bg(var(--m-surface-ambient-bg));
@@ -49,8 +49,6 @@
49
49
  }
50
50
 
51
51
  .emptyControls {
52
- position: absolute;
53
- inset: 0;
54
52
  min-height: 120px;
55
53
  display: flex;
56
54
  flex-direction: column;
package/src/components/lightbox/Lightbox.module.css CHANGED
@@ -1,23 +1,14 @@
1
1
  .trigger {
2
2
  cursor: pointer;
3
-
4
- &:focus {
5
- outline: none;
6
- }
7
-
8
- &:focus-visible {
9
- @apply --mx-shadow;
10
- --mx-ring-value: --fn-focus-ring();
11
- border-radius: var(--m-action-rd);
12
- }
3
+ @apply --mx-focus;
13
4
  }
14
5
 
15
6
  .title {
16
7
  position: absolute;
17
- width: 1px;
18
- height: 1px;
8
+ width: --fn-literal(1px);
9
+ height: --fn-literal(1px);
19
10
  padding: 0;
20
- margin: -1px;
11
+ margin: --fn-literal(-1px);
21
12
  overflow: hidden;
22
13
  clip: rect(0, 0, 0, 0);
23
14
  white-space: nowrap;
@@ -40,7 +31,8 @@
40
31
  @apply --mx-bg(var(--m-gray-ink));
41
32
  @apply --mx-bg-faded(50%);
42
33
 
43
- &[data-state='closed'] {
34
+ &[data-starting-style],
35
+ &[data-ending-style] {
44
36
  opacity: 0;
45
37
  }
46
38
  }
@@ -70,7 +62,8 @@
70
62
  opacity 0.2s ease,
71
63
  transform 0.2s ease;
72
64
 
73
- &[data-state='closed'] {
65
+ &[data-starting-style],
66
+ &[data-ending-style] {
74
67
  opacity: 0;
75
68
  transform: translate(-50%, -45%) scale(0.95);
76
69
  }
package/src/components/lightbox/Lightbox.tsx CHANGED
@@ -53,7 +53,7 @@ function LightboxDefault({
53
53
  }) {
54
54
  return (
55
55
  <Dialog.Root>
56
- <Dialog.Trigger render={children}></Dialog.Trigger>
56
+ <Dialog.Trigger nativeButton={false} render={children}></Dialog.Trigger>
57
57
  <Dialog.Portal>
58
58
  <LightboxOverlay />
59
59
  <LightboxContent>{children}</LightboxContent>