@luscii-healthtech/web-ui 58.10.0 → 58.10.1

package/dist/esm/components/Avatar/Avatar.js

@@ -15,7 +15,20 @@ function checkImageValidity(src) {
     image.src = src;
   });
 }
-const Avatar = ({ color = "slate", size = "medium", applyGroupOffset, src, alt, defaultImage, initials, children, className }) => {
+const legacySizeAliases = {
+  xsmall: "xs",
+  small: "s",
+  medium: "m"
+};
+const avatarSizeTokens = {
+  xs: "var(--ui-semantic-size-lg)",
+  s: "var(--ui-semantic-size-xl)",
+  m: "var(--ui-semantic-size-5xl)"
+};
+function resolveSize(size) {
+  return size in legacySizeAliases ? legacySizeAliases[size] : size;
+}
+const Avatar = ({ color, isSelf, size = "m", applyGroupOffset, src, alt, defaultImage, initials, children, className }) => {
   const [hasValidImage, setHasValidImage] = useState(false);
   useEffect(() => {
     let mounted = true;
@@ -30,29 +43,42 @@ const Avatar = ({ color = "slate", size = "medium", applyGroupOffset, src, alt,
       mounted = false;
     };
   }, [defaultImage, src]);
+  const resolvedSize = resolveSize(size);
+  const sizeStyle = resolvedSize === "large" ? void 0 : {
+    width: avatarSizeTokens[resolvedSize],
+    height: avatarSizeTokens[resolvedSize]
+  };
   const sizeClassName = classNames("ui:rounded-full", {
-    "ui:h-32 ui:w-32": size === "large",
-    "ui:h-16 ui:w-16": size === "medium",
-    "ui:h-9 ui:w-9": size === "small",
-    "ui:h-6 ui:w-6": size === "xsmall"
+    "ui:h-32 ui:w-32": resolvedSize === "large"
   });
   const groupOffsetClassNames = classNames({
-    "ui:-ml-[calc(theme('spacing.32')/4)]": size === "large" && applyGroupOffset,
-    "ui:-ml-[calc(theme('spacing.16')/4)]": size === "medium" && applyGroupOffset,
-    "ui:-ml-[calc(theme('spacing.9')/4)]": size === "small" && applyGroupOffset,
-    "ui:-ml-[calc(theme('spacing.6')/4)]": size === "xsmall" && applyGroupOffset
+    "ui:-ml-[calc(theme('spacing.32')/4)]": resolvedSize === "large" && applyGroupOffset
   });
+  const groupOffsetStyle = applyGroupOffset && resolvedSize !== "large" ? { marginLeft: `calc(${avatarSizeTokens[resolvedSize]} / -4)` } : void 0;
+  const resolvedIsSelf = isSelf !== null && isSelf !== void 0 ? isSelf : color === "primary";
   const colorClassName = classNames({
-    "ui:bg-neutral-200 ui:text-on-surface": color === "slate",
-    "ui:bg-primary ui:text-white": color === "primary"
-  });
-  const containerClassName = classNames(className, sizeClassName, groupOffsetClassNames, colorClassName, "ui:flex ui:items-center ui:justify-center");
-  const textClassName = classNames({
-    "ui:text-5xl": size === "large",
-    "ui:text-2xl": size === "medium",
-    "ui:text-sm": size === "small" || size === "xsmall"
+    "ui:bg-background-brand-primary-default ui:text-text-inverse-primary-default": resolvedIsSelf,
+    "ui:bg-background-neutral-tertiary-default ui:text-text-neutral-primary-default": !resolvedIsSelf
   });
-  const imageClassName = classNames(sizeClassName);
+  const containerClassName = classNames(
+    className,
+    sizeClassName,
+    groupOffsetClassNames,
+    colorClassName,
+    /**
+     * The design system puts a 1px inverse border on every avatar. It
+     * sits inside the box (`border-box`), so the sizes above stay exact.
+     */
+    "ui:border ui:border-solid ui:border-border-inverse-primary-default",
+    /**
+     * `shrink-0` keeps the avatar circular when it is a flex child, for
+     * example inside an `AvatarGroup`, where the negative margins would
+     * otherwise let the flex algorithm squash it.
+     */
+    "ui:flex ui:shrink-0 ui:items-center ui:justify-center"
+  );
+  const textVariant = resolvedSize === "m" ? "body-base-regular" : "body-small-regular";
+  const imageClassName = classNames("ui:rounded-full ui:h-full ui:w-full ui:object-cover");
   const renderAvatar = () => {
     const elementToRender = initials !== null && initials !== void 0 ? initials : children;
     if (defaultImage) {
@@ -60,13 +86,13 @@ const Avatar = ({ color = "slate", size = "medium", applyGroupOffset, src, alt,
     } else if (hasValidImage) {
       return jsx("img", { className: imageClassName, src, alt });
     } else {
-      if (size === "xsmall") {
-        return jsxs(Fragment, { children: [jsx(Text, { variant: "sm", color: "current", "aria-hidden": true, children: elementToRender }), jsx(ScreenReaderText, { children: alt })] });
+      if (resolvedSize === "large") {
+        return jsxs(Fragment, { children: [jsx("span", { className: "ui:text-5xl", "aria-hidden": true, children: elementToRender }), jsx(ScreenReaderText, { children: alt })] });
       }
-      return jsxs(Fragment, { children: [jsx("span", { className: textClassName, "aria-hidden": true, children: elementToRender }), jsx(ScreenReaderText, { children: alt })] });
+      return jsxs(Fragment, { children: [jsx(Text, { variant: textVariant, color: "current", "aria-hidden": true, children: elementToRender }), jsx(ScreenReaderText, { children: alt })] });
     }
   };
-  return jsx("div", { className: containerClassName, children: jsx("div", { children: renderAvatar() }) });
+  return jsx("div", { className: containerClassName, style: Object.assign(Object.assign({}, sizeStyle), groupOffsetStyle), children: renderAvatar() });
 };
 function ScreenReaderText({ children }) {
   return jsx("span", { className: "ui:sr-only", children });

package/dist/esm/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
+{"version":3,"file":"Avatar.js","sources":["../../../../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/dist/esm/components/Avatar/AvatarGroup.js

@@ -27,12 +27,20 @@ const AvatarGroup = (props) => {
       "ui:outline-slate-100": props.outlineColor === "slate-100",
       "ui:outline-white": props.outlineColor === "white"
     }, {
-      "ui:outline-2": child.props.size === "xsmall" || child.props.size === "small",
-      "ui:outline-4": child.props.size === "medium",
-      "ui:outline-8": child.props.size === "large"
+      "ui:outline-2": isOneOfSizes(child.props.size, [
+        "xs",
+        "xsmall",
+        "s",
+        "small"
+      ]),
+      "ui:outline-4": isOneOfSizes(child.props.size, ["m", "medium"]),
+      "ui:outline-8": isOneOfSizes(child.props.size, ["large"])
     }) }));
   }), jsx(MoreAvatarsLabel, Object.assign({}, props, { maxAvatars }))] }));
 };
+function isOneOfSizes(size, sizes) {
+  return typeof size === "string" && sizes.includes(size);
+}
 function MoreAvatarsLabel(props) {
   const { children, maxAvatars, moreAvatarsLabel } = props;
   if (!moreAvatarsLabel) {

package/dist/esm/components/Avatar/AvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","sources":["../../../../../../src/components/Avatar/AvatarGroup.tsx"],"sourcesContent":[null],"names":["_jsxs","React","_jsx"],"mappings":"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"}
+{"version":3,"file":"AvatarGroup.js","sources":["../../../../../../src/components/Avatar/AvatarGroup.tsx"],"sourcesContent":[null],"names":["_jsxs","React","_jsx"],"mappings":"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"}

package/dist/esm/components/Select/SelectOptionAvatar.js

@@ -4,13 +4,12 @@ import { Avatar } from '../Avatar/Avatar.js';
 const SelectOptionAvatar = ({ avatar }) => {
   var _a, _b;
   return jsx(Avatar, {
-    size: "xsmall",
-    color: avatar.isSelf ? "primary" : "slate",
+    size: "xs",
+    isSelf: avatar.isSelf,
     // First code point + combining marks, so a decomposed "Ángela" keeps its accent.
     initials: (_b = (_a = avatar.initials.trim().match(/^.\p{M}*/u)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : "",
     src: avatar.src,
-    alt: avatar.alt,
-    className: "ui:shrink-0 ui:border ui:border-solid ui:border-border-neutral-secondary-default"
+    alt: avatar.alt
   });
 };
 

package/dist/esm/components/Select/SelectOptionAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectOptionAvatar.js","sources":["../../../../../../src/components/Select/SelectOptionAvatar.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAoBO,MAAM,kBAAA,GAAmD,CAAC,EAC/D,MAAA,EAAM,KACH;;AAAC,EAAA,OACJA,IAAC,MAAA,EAAM;AAAA,IACL,IAAA,EAAK,QAAA;AAAA,IACL,KAAA,EAAO,MAAA,CAAO,MAAA,GAAS,SAAA,GAAY,OAAA;AAAA;AAAA,IAEnC,QAAA,EAAA,CAAU,MAAA,EAAA,GAAA,MAAA,CAAO,SAAS,IAAA,EAAI,CAAG,MAAM,WAAW,CAAA,MAAC,QAAA,EAAA,KAAA,MAAA,GAAA,SAAA,EAAA,CAAG,CAAC,OAAC,IAAA,IAAA,EAAA,KAAA,SAAA,EAAA,GAAI,EAAA;AAAA,IAC5D,KAAK,MAAA,CAAO,GAAA;AAAA,IACZ,KAAK,MAAA,CAAO,GAAA;AAAA,IACZ,SAAA,EAAU;AAAA,GAAkF,CAAA;;;;;"}
+{"version":3,"file":"SelectOptionAvatar.js","sources":["../../../../../../src/components/Select/SelectOptionAvatar.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAaO,MAAM,kBAAA,GAAmD,CAAC,EAC/D,MAAA,EAAM,KACH;;AAAC,EAAA,OACJA,IAAC,MAAA,EAAM;AAAA,IACL,IAAA,EAAK,IAAA;AAAA,IACL,QAAQ,MAAA,CAAO,MAAA;AAAA;AAAA,IAEf,QAAA,EAAA,CAAU,MAAA,EAAA,GAAA,MAAA,CAAO,SAAS,IAAA,EAAI,CAAG,MAAM,WAAW,CAAA,MAAC,QAAA,EAAA,KAAA,MAAA,GAAA,SAAA,EAAA,CAAG,CAAC,OAAC,IAAA,IAAA,EAAA,KAAA,SAAA,EAAA,GAAI,EAAA;AAAA,IAC5D,KAAK,MAAA,CAAO,GAAA;AAAA,IACZ,KAAK,MAAA,CAAO;AAAA,GAAG,CAAA;;;;;"}

package/dist/index.development.js

@@ -2270,7 +2270,20 @@ function checkImageValidity(src) {
     image.src = src;
   });
 }
-const Avatar = ({ color = "slate", size = "medium", applyGroupOffset, src, alt, defaultImage, initials, children, className }) => {
+const legacySizeAliases = {
+  xsmall: "xs",
+  small: "s",
+  medium: "m"
+};
+const avatarSizeTokens = {
+  xs: "var(--ui-semantic-size-lg)",
+  s: "var(--ui-semantic-size-xl)",
+  m: "var(--ui-semantic-size-5xl)"
+};
+function resolveSize(size) {
+  return size in legacySizeAliases ? legacySizeAliases[size] : size;
+}
+const Avatar = ({ color, isSelf, size = "m", applyGroupOffset, src, alt, defaultImage, initials, children, className }) => {
   const [hasValidImage, setHasValidImage] = React.useState(false);
   React.useEffect(() => {
     let mounted = true;
@@ -2285,29 +2298,42 @@ const Avatar = ({ color = "slate", size = "medium", applyGroupOffset, src, alt,
       mounted = false;
     };
   }, [defaultImage, src]);
+  const resolvedSize = resolveSize(size);
+  const sizeStyle = resolvedSize === "large" ? void 0 : {
+    width: avatarSizeTokens[resolvedSize],
+    height: avatarSizeTokens[resolvedSize]
+  };
   const sizeClassName = classNames__default.default("ui:rounded-full", {
-    "ui:h-32 ui:w-32": size === "large",
-    "ui:h-16 ui:w-16": size === "medium",
-    "ui:h-9 ui:w-9": size === "small",
-    "ui:h-6 ui:w-6": size === "xsmall"
+    "ui:h-32 ui:w-32": resolvedSize === "large"
   });
   const groupOffsetClassNames = classNames__default.default({
-    "ui:-ml-[calc(theme('spacing.32')/4)]": size === "large" && applyGroupOffset,
-    "ui:-ml-[calc(theme('spacing.16')/4)]": size === "medium" && applyGroupOffset,
-    "ui:-ml-[calc(theme('spacing.9')/4)]": size === "small" && applyGroupOffset,
-    "ui:-ml-[calc(theme('spacing.6')/4)]": size === "xsmall" && applyGroupOffset
+    "ui:-ml-[calc(theme('spacing.32')/4)]": resolvedSize === "large" && applyGroupOffset
   });
+  const groupOffsetStyle = applyGroupOffset && resolvedSize !== "large" ? { marginLeft: `calc(${avatarSizeTokens[resolvedSize]} / -4)` } : void 0;
+  const resolvedIsSelf = isSelf !== null && isSelf !== void 0 ? isSelf : color === "primary";
   const colorClassName = classNames__default.default({
-    "ui:bg-neutral-200 ui:text-on-surface": color === "slate",
-    "ui:bg-primary ui:text-white": color === "primary"
-  });
-  const containerClassName = classNames__default.default(className, sizeClassName, groupOffsetClassNames, colorClassName, "ui:flex ui:items-center ui:justify-center");
-  const textClassName = classNames__default.default({
-    "ui:text-5xl": size === "large",
-    "ui:text-2xl": size === "medium",
-    "ui:text-sm": size === "small" || size === "xsmall"
+    "ui:bg-background-brand-primary-default ui:text-text-inverse-primary-default": resolvedIsSelf,
+    "ui:bg-background-neutral-tertiary-default ui:text-text-neutral-primary-default": !resolvedIsSelf
   });
-  const imageClassName = classNames__default.default(sizeClassName);
+  const containerClassName = classNames__default.default(
+    className,
+    sizeClassName,
+    groupOffsetClassNames,
+    colorClassName,
+    /**
+     * The design system puts a 1px inverse border on every avatar. It
+     * sits inside the box (`border-box`), so the sizes above stay exact.
+     */
+    "ui:border ui:border-solid ui:border-border-inverse-primary-default",
+    /**
+     * `shrink-0` keeps the avatar circular when it is a flex child, for
+     * example inside an `AvatarGroup`, where the negative margins would
+     * otherwise let the flex algorithm squash it.
+     */
+    "ui:flex ui:shrink-0 ui:items-center ui:justify-center"
+  );
+  const textVariant = resolvedSize === "m" ? "body-base-regular" : "body-small-regular";
+  const imageClassName = classNames__default.default("ui:rounded-full ui:h-full ui:w-full ui:object-cover");
   const renderAvatar = () => {
     const elementToRender = initials !== null && initials !== void 0 ? initials : children;
     if (defaultImage) {
@@ -2315,13 +2341,13 @@ const Avatar = ({ color = "slate", size = "medium", applyGroupOffset, src, alt,
     } else if (hasValidImage) {
       return jsxRuntime.jsx("img", { className: imageClassName, src, alt });
     } else {
-      if (size === "xsmall") {
-        return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text, { variant: "sm", color: "current", "aria-hidden": true, children: elementToRender }), jsxRuntime.jsx(ScreenReaderText, { children: alt })] });
+      if (resolvedSize === "large") {
+        return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "ui:text-5xl", "aria-hidden": true, children: elementToRender }), jsxRuntime.jsx(ScreenReaderText, { children: alt })] });
       }
-      return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: textClassName, "aria-hidden": true, children: elementToRender }), jsxRuntime.jsx(ScreenReaderText, { children: alt })] });
+      return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text, { variant: textVariant, color: "current", "aria-hidden": true, children: elementToRender }), jsxRuntime.jsx(ScreenReaderText, { children: alt })] });
     }
   };
-  return jsxRuntime.jsx("div", { className: containerClassName, children: jsxRuntime.jsx("div", { children: renderAvatar() }) });
+  return jsxRuntime.jsx("div", { className: containerClassName, style: Object.assign(Object.assign({}, sizeStyle), groupOffsetStyle), children: renderAvatar() });
 };
 function ScreenReaderText({ children }) {
   return jsxRuntime.jsx("span", { className: "ui:sr-only", children });
@@ -2347,12 +2373,20 @@ const AvatarGroup = (props) => {
       "ui:outline-slate-100": props.outlineColor === "slate-100",
       "ui:outline-white": props.outlineColor === "white"
     }, {
-      "ui:outline-2": child.props.size === "xsmall" || child.props.size === "small",
-      "ui:outline-4": child.props.size === "medium",
-      "ui:outline-8": child.props.size === "large"
+      "ui:outline-2": isOneOfSizes(child.props.size, [
+        "xs",
+        "xsmall",
+        "s",
+        "small"
+      ]),
+      "ui:outline-4": isOneOfSizes(child.props.size, ["m", "medium"]),
+      "ui:outline-8": isOneOfSizes(child.props.size, ["large"])
     }) }));
   }), jsxRuntime.jsx(MoreAvatarsLabel, Object.assign({}, props, { maxAvatars }))] }));
 };
+function isOneOfSizes(size, sizes) {
+  return typeof size === "string" && sizes.includes(size);
+}
 function MoreAvatarsLabel(props) {
   const { children, maxAvatars, moreAvatarsLabel } = props;
   if (!moreAvatarsLabel) {
@@ -4466,13 +4500,12 @@ const SelectLoadingIndicator = (props) => jsxRuntime.jsx(LoadingIndicator, Objec
 const SelectOptionAvatar = ({ avatar }) => {
   var _a, _b;
   return jsxRuntime.jsx(Avatar, {
-    size: "xsmall",
-    color: avatar.isSelf ? "primary" : "slate",
+    size: "xs",
+    isSelf: avatar.isSelf,
     // First code point + combining marks, so a decomposed "Ángela" keeps its accent.
     initials: (_b = (_a = avatar.initials.trim().match(/^.\p{M}*/u)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : "",
     src: avatar.src,
-    alt: avatar.alt,
-    className: "ui:shrink-0 ui:border ui:border-solid ui:border-border-neutral-secondary-default"
+    alt: avatar.alt
   });
 };