@pablo-v/avatar 0.1.0 → 0.1.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 (5) hide show
  1. package/dist/Avatar.d.ts.map +1 -1
  2. package/dist/Avatar.js +1 -1
  3. package/dist/Avatar.js.map +1 -1
  4. package/dist/avatar.css +67 -16
  5. package/package.json +3 -3
package/dist/Avatar.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,KAAK,qBAAqB,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAEvF,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACnD,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAElE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IAClF,gFAAgF;IAChF,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wEAAwE;IACxE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,oBAAoB;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,wBAAwB;IACxB,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC5B,4DAA4D;IAC5D,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAQD,2EAA2E;AAC3E,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,GAAG,EACH,QAAQ,EACR,IAAW,EACX,KAAgB,EAChB,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACR,EAAE,WAAW,+BAoCb;AAED,MAAM,WAAW,gBAAiB,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IACpE,2DAA2D;IAC3D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kEAAkE;IAClE,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED,kCAAkC;AAClC,wBAAgB,WAAW,CAAC,EAAE,GAAG,EAAE,IAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,+BAsB/F"}
1
+ {"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,KAAK,qBAAqB,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAEvF,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACnD,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAElE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IAClF,gFAAgF;IAChF,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wEAAwE;IACxE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,oBAAoB;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,wBAAwB;IACxB,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC5B,4DAA4D;IAC5D,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAQD,2EAA2E;AAC3E,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,GAAG,EACH,QAAQ,EACR,IAAW,EACX,KAAgB,EAChB,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACR,EAAE,WAAW,+BAsCb;AAED,MAAM,WAAW,gBAAiB,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IACpE,2DAA2D;IAC3D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kEAAkE;IAClE,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED,kCAAkC;AAClC,wBAAgB,WAAW,CAAC,EAAE,GAAG,EAAE,IAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,+BAsB/F"}
package/dist/Avatar.js CHANGED
@@ -16,7 +16,7 @@ export function Avatar({ name, src, fallback, size = 'md', shape = 'circle', sta
16
16
  // Cached images can finish before hydration attaches onLoad.
17
17
  if (img?.complete)
18
18
  img.naturalWidth ? setLoaded(src) : setFailed(src);
19
- }, onLoad: () => setLoaded(src), onError: () => setFailed(src) })), status && _jsx("span", { className: "pxl-avatar__status", "data-status": status, "aria-hidden": "true" })] }));
19
+ }, onLoad: () => setLoaded(src), onError: () => setFailed(src) })), status && (_jsx("span", { className: "pxl-avatar__status", "data-status": status, "aria-hidden": "true" }, status))] }));
20
20
  }
21
21
  /** Overlapping row of avatars. */
22
22
  export function AvatarGroup({ max, size = 'md', className, children, ...rest }) {
package/dist/Avatar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":"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"}
package/dist/avatar.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .pxl-avatar {
2
2
  --_size: var(--pxl-size-md);
3
- --_text: var(--pxl-text-sm);
3
+ --_text: var(--pxl-text-md);
4
4
  --_radius: var(--pxl-radius-full);
5
5
 
6
6
  position: relative;
@@ -11,10 +11,10 @@
11
11
  height: var(--_size);
12
12
  border-radius: var(--_radius);
13
13
  background: var(--pxl-gray-200);
14
- color: var(--pxl-fg-muted);
14
+ color: var(--pxl-fg);
15
15
  font-family: var(--pxl-font-sans);
16
16
  font-size: var(--_text);
17
- font-weight: 500;
17
+ font-weight: 600;
18
18
  line-height: 1;
19
19
  user-select: none;
20
20
  vertical-align: middle;
@@ -32,7 +32,7 @@
32
32
 
33
33
  .pxl-avatar[data-size="lg"] {
34
34
  --_size: var(--pxl-size-lg);
35
- --_text: var(--pxl-text-md);
35
+ --_text: var(--pxl-text-lg);
36
36
  }
37
37
 
38
38
  .pxl-avatar[data-shape="square"] {
@@ -45,8 +45,12 @@
45
45
  }
46
46
 
47
47
  .pxl-avatar__fallback {
48
- display: inline-flex;
49
- letter-spacing: 0.02em;
48
+ display: grid;
49
+ place-items: center;
50
+ width: 100%;
51
+ height: 100%;
52
+ min-width: 0;
53
+ letter-spacing: -0.02em;
50
54
  }
51
55
 
52
56
  .pxl-avatar__fallback > svg {
@@ -55,6 +59,7 @@
55
59
  }
56
60
 
57
61
  .pxl-avatar__image {
62
+ min-width: 0;
58
63
  width: 100%;
59
64
  height: 100%;
60
65
  border-radius: inherit;
@@ -72,7 +77,7 @@
72
77
  position: absolute;
73
78
  inset: 0;
74
79
  border-radius: inherit;
75
- box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pxl-fg) 10%, transparent);
80
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pxl-fg) 16%, transparent);
76
81
  content: "";
77
82
  pointer-events: none;
78
83
  }
@@ -80,19 +85,21 @@
80
85
  /* The presence marker is a single pixel cell, ringed by the page colour. */
81
86
  .pxl-avatar__status {
82
87
  position: absolute;
83
- right: -1px;
84
- bottom: -1px;
88
+ inset-inline-end: 0;
89
+ bottom: 0;
85
90
  z-index: 1;
86
- width: max(6px, calc(var(--_size) / 5));
87
- height: max(6px, calc(var(--_size) / 5));
91
+ display: grid;
92
+ place-items: center;
93
+ width: max(8px, calc(var(--_size) / 5));
94
+ height: max(8px, calc(var(--_size) / 5));
88
95
  border-radius: var(--pxl-radius-xs);
89
- background: var(--pxl-gray-500);
96
+ background: var(--pxl-gray-600);
90
97
  box-shadow: 0 0 0 2px var(--pxl-bg);
91
- animation: pxl-pop-in var(--pxl-dur-base) var(--pxl-ease-out);
98
+ animation: pxl-pop-in var(--pxl-dur-base) var(--pxl-ease-out) both;
92
99
  }
93
100
 
94
101
  .pxl-avatar[data-shape="square"] .pxl-avatar__status {
95
- right: -2px;
102
+ inset-inline-end: -2px;
96
103
  bottom: -2px;
97
104
  }
98
105
 
@@ -108,6 +115,27 @@
108
115
  background: var(--pxl-danger);
109
116
  }
110
117
 
118
+ .pxl-avatar__status[data-status="busy"]::after {
119
+ width: 4px;
120
+ height: 2px;
121
+ background: var(--pxl-bg);
122
+ content: "";
123
+ }
124
+
125
+ .pxl-avatar__status[data-status="away"]::after {
126
+ width: 3px;
127
+ height: 3px;
128
+ border-inline-start: 1px solid var(--pxl-bg);
129
+ border-bottom: 1px solid var(--pxl-bg);
130
+ content: "";
131
+ }
132
+
133
+ .pxl-avatar__status[data-status="offline"] {
134
+ box-sizing: border-box;
135
+ border: 2px solid var(--pxl-gray-600);
136
+ background: var(--pxl-bg);
137
+ }
138
+
111
139
  .pxl-avatar-group {
112
140
  display: inline-flex;
113
141
  }
@@ -121,13 +149,36 @@
121
149
  }
122
150
 
123
151
  .pxl-avatar__more {
124
- background: var(--pxl-gray-100);
152
+ background: var(--pxl-fg);
153
+ color: var(--pxl-bg);
125
154
  font-family: var(--pxl-font-mono);
155
+ font-size: var(--pxl-text-xs);
156
+ font-weight: 500;
126
157
  font-variant-numeric: tabular-nums;
127
158
  }
128
159
 
129
160
  @media (forced-colors: active) {
130
- .pxl-avatar__status {
161
+ .pxl-avatar::after {
162
+ border: 1px solid CanvasText;
163
+ }
164
+
165
+ .pxl-avatar__status[data-status] {
131
166
  background: CanvasText;
167
+ outline: 2px solid Canvas;
168
+ forced-color-adjust: none;
169
+ }
170
+
171
+ .pxl-avatar__status[data-status="offline"] {
172
+ border-color: CanvasText;
173
+ background: Canvas;
174
+ }
175
+
176
+ .pxl-avatar__status[data-status]::after {
177
+ border-color: Canvas;
178
+ background: Canvas;
179
+ }
180
+
181
+ .pxl-avatar__status[data-status="away"]::after {
182
+ background: transparent;
132
183
  }
133
184
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pablo-v/avatar",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "description": "Photo avatar with initials fallback, presence status and groups",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -28,11 +28,11 @@
28
28
  "dist"
29
29
  ],
30
30
  "dependencies": {
31
- "@pablo-v/core": "^0.2.1"
31
+ "@pablo-v/core": "^0.2.2"
32
32
  },
33
33
  "peerDependencies": {
34
34
  "react": "^19.0.0",
35
- "@pablo-v/tokens": "^0.2.4"
35
+ "@pablo-v/tokens": "^0.2.5"
36
36
  },
37
37
  "publishConfig": {
38
38
  "access": "public"