@dxos/react-ui 0.4.7-main.e015b9e → 0.4.7-main.ea67fec
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 +10 -20
- 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/Input/Input.d.ts +1 -1
- package/dist/types/src/components/ThemeProvider/TranslationsProvider.d.ts +6 -1
- package/dist/types/src/components/ThemeProvider/TranslationsProvider.d.ts.map +1 -1
- package/dist/types/src/components/ThemeProvider/index.d.ts +1 -1
- package/dist/types/src/components/ThemeProvider/index.d.ts.map +1 -1
- package/package.json +8 -8
- package/src/components/Avatars/Avatar.stories.tsx +19 -24
- package/src/components/Avatars/Avatar.tsx +7 -16
- package/src/components/Avatars/AvatarGroup.stories.tsx +5 -3
- package/src/components/ThemeProvider/TranslationsProvider.tsx +6 -1
- package/src/components/ThemeProvider/index.ts +1 -1
|
@@ -33,6 +33,7 @@ import { initReactI18next, useTranslation as useI18NextTranslation } from "react
|
|
|
33
33
|
var initialLng = "en-US";
|
|
34
34
|
var initialNs = "dxos-common";
|
|
35
35
|
var initialDtLocale = dtLocaleEnUs;
|
|
36
|
+
var toLocalizedString = (label, t) => Array.isArray(label) ? t(...label) : label;
|
|
36
37
|
var resources = {
|
|
37
38
|
[initialLng]: {
|
|
38
39
|
[initialNs]: {
|
|
@@ -147,12 +148,11 @@ import { Root as AvatarRootPrimitive, Fallback as AvatarFallbackPrimitive } from
|
|
|
147
148
|
import { createContext as createContext2 } from "@radix-ui/react-context";
|
|
148
149
|
import { Primitive as Primitive2 } from "@radix-ui/react-primitive";
|
|
149
150
|
import { Slot as Slot2 } from "@radix-ui/react-slot";
|
|
150
|
-
import {
|
|
151
|
-
import React3, { forwardRef as forwardRef2, useMemo } from "react";
|
|
151
|
+
import React3, { forwardRef as forwardRef2 } from "react";
|
|
152
152
|
import { useId } from "@dxos/react-hooks";
|
|
153
153
|
var AVATAR_NAME = "Avatar";
|
|
154
154
|
var [AvatarProvider, useAvatarContext] = createContext2(AVATAR_NAME);
|
|
155
|
-
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 }) => {
|
|
156
156
|
const labelId = useId("avatar__label", propsLabelId);
|
|
157
157
|
const descriptionId = useId("avatar__description", propsDescriptionId);
|
|
158
158
|
const maskId = useId("avatar__mask", propsMaskId);
|
|
@@ -165,12 +165,12 @@ var AvatarRoot = ({ size = 10, variant = "circle", status, animation, children,
|
|
|
165
165
|
status,
|
|
166
166
|
animation,
|
|
167
167
|
inGroup,
|
|
168
|
-
|
|
168
|
+
hue
|
|
169
169
|
}, children);
|
|
170
170
|
};
|
|
171
171
|
var rx = "0.25rem";
|
|
172
172
|
var AvatarFrame = /* @__PURE__ */ forwardRef2(({ classNames, children, ...props }, forwardedRef) => {
|
|
173
|
-
const { size, variant, labelId, descriptionId, maskId, inGroup, status, animation,
|
|
173
|
+
const { size, variant, labelId, descriptionId, maskId, inGroup, status, animation, hue } = useAvatarContext("AvatarFrame");
|
|
174
174
|
const { tx } = useThemeContext();
|
|
175
175
|
const numericSize = size === "px" ? 1 : Number(size);
|
|
176
176
|
const sizePx = numericSize * 4;
|
|
@@ -212,13 +212,12 @@ var AvatarFrame = /* @__PURE__ */ forwardRef2(({ classNames, children, ...props
|
|
|
212
212
|
y: ringGap + ringWidth,
|
|
213
213
|
rx
|
|
214
214
|
}))), variant === "circle" ? /* @__PURE__ */ React3.createElement("circle", {
|
|
215
|
-
className:
|
|
215
|
+
className: hue ? tx("hue.fill", "avatar__frame__circle", {
|
|
216
|
+
hue
|
|
217
|
+
}) : "fill-[var(--surface-bg)]",
|
|
216
218
|
cx: "50%",
|
|
217
219
|
cy: "50%",
|
|
218
|
-
r
|
|
219
|
-
...color ? {
|
|
220
|
-
fill: color
|
|
221
|
-
} : {}
|
|
220
|
+
r
|
|
222
221
|
}) : /* @__PURE__ */ React3.createElement("rect", {
|
|
223
222
|
className: "avatarFrameFill fill-[var(--surface-bg)]",
|
|
224
223
|
x: ringGap + ringWidth,
|
|
@@ -318,14 +317,6 @@ var AvatarFallback = /* @__PURE__ */ forwardRef2(({ delayMs, text, ...props }, f
|
|
|
318
317
|
large: !isTextOnly
|
|
319
318
|
}, text.toLocaleUpperCase())));
|
|
320
319
|
});
|
|
321
|
-
var getJdenticonHref = (value, size) => `data:image/svg+xml;utf8,${encodeURIComponent(toSvg(value, size === "px" ? 1 : size * 4, {
|
|
322
|
-
padding: 0
|
|
323
|
-
}))}`;
|
|
324
|
-
var useJdenticonHref = (value, size) => {
|
|
325
|
-
return useMemo(() => getJdenticonHref(value, size), [
|
|
326
|
-
value
|
|
327
|
-
]);
|
|
328
|
-
};
|
|
329
320
|
var Avatar = {
|
|
330
321
|
Root: AvatarRoot,
|
|
331
322
|
Frame: AvatarFrame,
|
|
@@ -2159,13 +2150,12 @@ export {
|
|
|
2159
2150
|
Trans,
|
|
2160
2151
|
Tree,
|
|
2161
2152
|
TreeItem,
|
|
2162
|
-
getJdenticonHref,
|
|
2163
2153
|
hasIosKeyboard,
|
|
2154
|
+
toLocalizedString,
|
|
2164
2155
|
useAvatarContext,
|
|
2165
2156
|
useButtonGroupContext,
|
|
2166
2157
|
useDensityContext,
|
|
2167
2158
|
useElevationContext,
|
|
2168
|
-
useJdenticonHref,
|
|
2169
2159
|
useListContext,
|
|
2170
2160
|
useListItemContext,
|
|
2171
2161
|
useMainContext,
|