@dxos/react-ui 0.4.7-main.77593d4 → 0.4.7-main.7a94090
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.
- package/dist/lib/browser/index.mjs +13 -22
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/types/src/components/Avatars/Avatar.d.ts +3 -5
- package/dist/types/src/components/Avatars/Avatar.d.ts.map +1 -1
- package/dist/types/src/components/Avatars/Avatar.stories.d.ts +3 -3
- package/dist/types/src/components/Avatars/Avatar.stories.d.ts.map +1 -1
- package/dist/types/src/components/Avatars/AvatarGroup.d.ts +1 -1
- package/dist/types/src/components/Avatars/AvatarGroup.stories.d.ts.map +1 -1
- package/dist/types/src/components/Buttons/Button.d.ts.map +1 -1
- package/dist/types/src/components/Input/Input.d.ts +1 -1
- package/package.json +9 -9
- package/src/components/Avatars/Avatar.stories.tsx +21 -25
- package/src/components/Avatars/Avatar.tsx +9 -18
- package/src/components/Avatars/AvatarGroup.stories.tsx +5 -3
- package/src/components/Buttons/Button.tsx +3 -0
- package/src/components/ThemeProvider/ThemeProvider.tsx +1 -1
|
@@ -148,12 +148,11 @@ import { Root as AvatarRootPrimitive, Fallback as AvatarFallbackPrimitive } from
|
|
|
148
148
|
import { createContext as createContext2 } from "@radix-ui/react-context";
|
|
149
149
|
import { Primitive as Primitive2 } from "@radix-ui/react-primitive";
|
|
150
150
|
import { Slot as Slot2 } from "@radix-ui/react-slot";
|
|
151
|
-
import {
|
|
152
|
-
import React3, { forwardRef as forwardRef2, useMemo } from "react";
|
|
151
|
+
import React3, { forwardRef as forwardRef2 } from "react";
|
|
153
152
|
import { useId } from "@dxos/react-hooks";
|
|
154
153
|
var AVATAR_NAME = "Avatar";
|
|
155
154
|
var [AvatarProvider, useAvatarContext] = createContext2(AVATAR_NAME);
|
|
156
|
-
var AvatarRoot = ({ size = 10, variant = "circle", status, animation, children, labelId: propsLabelId, descriptionId: propsDescriptionId, maskId: propsMaskId, inGroup,
|
|
155
|
+
var AvatarRoot = ({ size = 10, variant = "circle", status, animation, children, labelId: propsLabelId, descriptionId: propsDescriptionId, maskId: propsMaskId, inGroup, hue }) => {
|
|
157
156
|
const labelId = useId("avatar__label", propsLabelId);
|
|
158
157
|
const descriptionId = useId("avatar__description", propsDescriptionId);
|
|
159
158
|
const maskId = useId("avatar__mask", propsMaskId);
|
|
@@ -166,17 +165,17 @@ var AvatarRoot = ({ size = 10, variant = "circle", status, animation, children,
|
|
|
166
165
|
status,
|
|
167
166
|
animation,
|
|
168
167
|
inGroup,
|
|
169
|
-
|
|
168
|
+
hue
|
|
170
169
|
}, children);
|
|
171
170
|
};
|
|
172
171
|
var rx = "0.25rem";
|
|
173
172
|
var AvatarFrame = /* @__PURE__ */ forwardRef2(({ classNames, children, ...props }, forwardedRef) => {
|
|
174
|
-
const { size, variant, labelId, descriptionId, maskId, inGroup, status, animation,
|
|
173
|
+
const { size, variant, labelId, descriptionId, maskId, inGroup, status, animation, hue } = useAvatarContext("AvatarFrame");
|
|
175
174
|
const { tx } = useThemeContext();
|
|
176
175
|
const numericSize = size === "px" ? 1 : Number(size);
|
|
177
176
|
const sizePx = numericSize * 4;
|
|
178
|
-
const ringWidth = numericSize > 4 ? 2 : numericSize > 3 ? 1 : 1;
|
|
179
|
-
const ringGap = numericSize > 12 ? 3 : numericSize > 4 ? 2 : numericSize > 3 ? 1 : 0;
|
|
177
|
+
const ringWidth = status ? numericSize > 4 ? 2 : numericSize > 3 ? 1 : 1 : 0;
|
|
178
|
+
const ringGap = status ? numericSize > 12 ? 3 : numericSize > 4 ? 2 : numericSize > 3 ? 1 : 0 : 0;
|
|
180
179
|
const r = sizePx / 2 - ringGap - ringWidth;
|
|
181
180
|
return /* @__PURE__ */ React3.createElement(AvatarRootPrimitive, {
|
|
182
181
|
role: "img",
|
|
@@ -213,13 +212,12 @@ var AvatarFrame = /* @__PURE__ */ forwardRef2(({ classNames, children, ...props
|
|
|
213
212
|
y: ringGap + ringWidth,
|
|
214
213
|
rx
|
|
215
214
|
}))), variant === "circle" ? /* @__PURE__ */ React3.createElement("circle", {
|
|
216
|
-
className:
|
|
215
|
+
className: hue ? tx("hue.fill", "avatar__frame__circle", {
|
|
216
|
+
hue
|
|
217
|
+
}) : "fill-[var(--surface-bg)]",
|
|
217
218
|
cx: "50%",
|
|
218
219
|
cy: "50%",
|
|
219
|
-
r
|
|
220
|
-
...color ? {
|
|
221
|
-
fill: color
|
|
222
|
-
} : {}
|
|
220
|
+
r
|
|
223
221
|
}) : /* @__PURE__ */ React3.createElement("rect", {
|
|
224
222
|
className: "avatarFrameFill fill-[var(--surface-bg)]",
|
|
225
223
|
x: ringGap + ringWidth,
|
|
@@ -319,14 +317,6 @@ var AvatarFallback = /* @__PURE__ */ forwardRef2(({ delayMs, text, ...props }, f
|
|
|
319
317
|
large: !isTextOnly
|
|
320
318
|
}, text.toLocaleUpperCase())));
|
|
321
319
|
});
|
|
322
|
-
var getJdenticonHref = (value, size) => `data:image/svg+xml;utf8,${encodeURIComponent(toSvg(value, size === "px" ? 1 : size * 4, {
|
|
323
|
-
padding: 0
|
|
324
|
-
}))}`;
|
|
325
|
-
var useJdenticonHref = (value, size) => {
|
|
326
|
-
return useMemo(() => getJdenticonHref(value, size), [
|
|
327
|
-
value
|
|
328
|
-
]);
|
|
329
|
-
};
|
|
330
320
|
var Avatar = {
|
|
331
321
|
Root: AvatarRoot,
|
|
332
322
|
Frame: AvatarFrame,
|
|
@@ -511,6 +501,9 @@ var Button = /* @__PURE__ */ forwardRef6(({ classNames, children, density: props
|
|
|
511
501
|
return /* @__PURE__ */ React7.createElement(Root3, {
|
|
512
502
|
ref,
|
|
513
503
|
...props,
|
|
504
|
+
"data-variant": variant,
|
|
505
|
+
"data-density": density,
|
|
506
|
+
"data-props": inGroup ? "grouped" : "",
|
|
514
507
|
className: tx("button.root", "button", {
|
|
515
508
|
variant,
|
|
516
509
|
inGroup,
|
|
@@ -2160,14 +2153,12 @@ export {
|
|
|
2160
2153
|
Trans,
|
|
2161
2154
|
Tree,
|
|
2162
2155
|
TreeItem,
|
|
2163
|
-
getJdenticonHref,
|
|
2164
2156
|
hasIosKeyboard,
|
|
2165
2157
|
toLocalizedString,
|
|
2166
2158
|
useAvatarContext,
|
|
2167
2159
|
useButtonGroupContext,
|
|
2168
2160
|
useDensityContext,
|
|
2169
2161
|
useElevationContext,
|
|
2170
|
-
useJdenticonHref,
|
|
2171
2162
|
useListContext,
|
|
2172
2163
|
useListItemContext,
|
|
2173
2164
|
useMainContext,
|