@wallarm-org/design-system 2.9.0 → 3.0.0-rc-feat-WDS-191.1

package/dist/components/Avatar/Avatar.d.ts

@@ -1,4 +1,4 @@
-import type { ButtonHTMLAttributes, FC, HTMLAttributes, Ref } from 'react';
+import { type ButtonHTMLAttributes, type FC, type HTMLAttributes, type Ref } from 'react';
 import { Avatar as ArkAvatar } from '@ark-ui/react/avatar';
 import type { VariantProps } from 'class-variance-authority';
 import { type TestableProps } from '../../utils/testId.js';
@@ -26,7 +26,8 @@ type AvatarRootProps = ({
 export type AvatarProps = AvatarBaseProps & AvatarRootProps;
 /**
  * A user's photo on a rounded plate, falling back to initials or an icon while the photo loads,
- * when it fails, or when there is none.
+ * when it fails, or when there is none. Add `AvatarContent` for the user item: plate + name
+ * (+ description) in one row.
  */
 export declare const Avatar: FC<AvatarProps>;
 export {};

package/dist/components/Avatar/Avatar.js

@@ -1,11 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
+import { Children, isValidElement } from "react";
 import { Avatar } from "@ark-ui/react/avatar";
 import { cn } from "../../utils/cn.js";
 import { TestIdProvider } from "../../utils/testId.js";
+import { AvatarContent } from "./AvatarContent.js";
+import { AvatarSizeProvider } from "./AvatarContext.js";
 import { avatarVariants } from "./classes.js";
 const Avatar_Avatar = (t0)=>{
-    const $ = c(50);
+    const $ = c(53);
     let children;
     let className;
     let disabled;
@@ -15,14 +18,14 @@ const Avatar_Avatar = (t0)=>{
     let onStatusChange;
     let props;
     let ref;
-    let size;
     let t1;
     let t2;
+    let t3;
     let testId;
     let type;
     let value;
     if ($[0] !== t0) {
-        ({ ref, id, size, as: t1, asChild: t2, disabled, type, name, value, form, onStatusChange, className, children, "data-testid": testId, ...props } = t0);
+        ({ ref, id, size: t1, as: t2, asChild: t3, disabled, type, name, value, form, onStatusChange, className, children, "data-testid": testId, ...props } = t0);
         $[0] = t0;
         $[1] = children;
         $[2] = className;
@@ -33,9 +36,9 @@ const Avatar_Avatar = (t0)=>{
         $[7] = onStatusChange;
         $[8] = props;
         $[9] = ref;
-        $[10] = size;
-        $[11] = t1;
-        $[12] = t2;
+        $[10] = t1;
+        $[11] = t2;
+        $[12] = t3;
         $[13] = testId;
         $[14] = type;
         $[15] = value;
@@ -49,63 +52,66 @@ const Avatar_Avatar = (t0)=>{
         onStatusChange = $[7];
         props = $[8];
         ref = $[9];
-        size = $[10];
-        t1 = $[11];
-        t2 = $[12];
+        t1 = $[10];
+        t2 = $[11];
+        t3 = $[12];
         testId = $[13];
         type = $[14];
         value = $[15];
     }
-    const Tag = void 0 === t1 ? "span" : t1;
-    const asChild = void 0 === t2 ? false : t2;
-    const role = props.role ?? (props["aria-label"] && !asChild && "button" !== Tag ? "img" : void 0);
-    let t3;
+    const size = void 0 === t1 ? "lg" : t1;
+    const Tag = void 0 === t2 ? "span" : t2;
+    const asChild = void 0 === t3 ? false : t3;
+    const hasContent = Children.toArray(children).some(_temp);
+    const role = props.role ?? (!props["aria-label"] || asChild || "button" === Tag || hasContent ? void 0 : "img");
+    let t4;
     if ($[16] !== Tag || $[17] !== asChild || $[18] !== disabled || $[19] !== form || $[20] !== name || $[21] !== value) {
-        t3 = asChild || "button" === Tag ? Object.fromEntries(Object.entries({
+        t4 = asChild || "button" === Tag ? Object.fromEntries(Object.entries({
             disabled,
             name,
             value,
             form
-        }).filter(_temp)) : {};
+        }).filter(_temp2)) : {};
         $[16] = Tag;
         $[17] = asChild;
         $[18] = disabled;
         $[19] = form;
         $[20] = name;
         $[21] = value;
-        $[22] = t3;
-    } else t3 = $[22];
-    const buttonAttributes = t3;
-    let t4;
+        $[22] = t4;
+    } else t4 = $[22];
+    const buttonAttributes = t4;
+    const t5 = size ?? "lg";
+    let t6;
     if ($[23] !== id) {
-        t4 = id ? {
+        t6 = id ? {
             root: id
         } : void 0;
         $[23] = id;
-        $[24] = t4;
-    } else t4 = $[24];
-    const t5 = ref;
-    let t6;
+        $[24] = t6;
+    } else t6 = $[24];
+    const t7 = ref;
+    let t8;
     if ($[25] !== asChild || $[26] !== type) {
-        t6 = asChild && type ? {
+        t8 = asChild && type ? {
             type
         } : {};
         $[25] = asChild;
         $[26] = type;
-        $[27] = t6;
-    } else t6 = $[27];
-    let t7;
+        $[27] = t8;
+    } else t8 = $[27];
+    let t9;
     if ($[28] !== className || $[29] !== size) {
-        t7 = cn(avatarVariants({
+        t9 = cn(avatarVariants({
             size
         }), className);
         $[28] = className;
         $[29] = size;
-        $[30] = t7;
-    } else t7 = $[30];
-    let t8;
+        $[30] = t9;
+    } else t9 = $[30];
+    let t10;
     if ($[31] !== Tag || $[32] !== asChild || $[33] !== children || $[34] !== type) {
-        t8 = asChild ? children : /*#__PURE__*/ jsx(Tag, {
+        t10 = asChild ? children : /*#__PURE__*/ jsx(Tag, {
             type: "button" === Tag ? type ?? "button" : void 0,
             children: children
         });
@@ -113,50 +119,63 @@ const Avatar_Avatar = (t0)=>{
         $[32] = asChild;
         $[33] = children;
         $[34] = type;
-        $[35] = t8;
-    } else t8 = $[35];
-    let t9;
-    if ($[36] !== buttonAttributes || $[37] !== onStatusChange || $[38] !== props || $[39] !== role || $[40] !== t4 || $[41] !== t5 || $[42] !== t6 || $[43] !== t7 || $[44] !== t8 || $[45] !== testId) {
-        t9 = /*#__PURE__*/ jsx(Avatar.Root, {
+        $[35] = t10;
+    } else t10 = $[35];
+    let t11;
+    if ($[36] !== buttonAttributes || $[37] !== onStatusChange || $[38] !== props || $[39] !== role || $[40] !== t10 || $[41] !== t6 || $[42] !== t7 || $[43] !== t8 || $[44] !== t9 || $[45] !== testId) {
+        t11 = /*#__PURE__*/ jsx(Avatar.Root, {
             "data-slot": "avatar",
             ...props,
-            ids: t4,
+            ids: t6,
             ...buttonAttributes,
-            ref: t5,
+            ref: t7,
             role: role,
-            ...t6,
+            ...t8,
             "data-testid": testId,
             onStatusChange: onStatusChange,
-            className: t7,
+            className: t9,
             asChild: true,
-            children: t8
+            children: t10
         });
         $[36] = buttonAttributes;
         $[37] = onStatusChange;
         $[38] = props;
         $[39] = role;
-        $[40] = t4;
-        $[41] = t5;
-        $[42] = t6;
-        $[43] = t7;
-        $[44] = t8;
+        $[40] = t10;
+        $[41] = t6;
+        $[42] = t7;
+        $[43] = t8;
+        $[44] = t9;
         $[45] = testId;
-        $[46] = t9;
-    } else t9 = $[46];
-    let t10;
-    if ($[47] !== t9 || $[48] !== testId) {
-        t10 = /*#__PURE__*/ jsx(TestIdProvider, {
+        $[46] = t11;
+    } else t11 = $[46];
+    let t12;
+    if ($[47] !== t11 || $[48] !== t5) {
+        t12 = /*#__PURE__*/ jsx(AvatarSizeProvider, {
+            value: t5,
+            children: t11
+        });
+        $[47] = t11;
+        $[48] = t5;
+        $[49] = t12;
+    } else t12 = $[49];
+    let t13;
+    if ($[50] !== t12 || $[51] !== testId) {
+        t13 = /*#__PURE__*/ jsx(TestIdProvider, {
             value: testId,
-            children: t9
+            children: t12
         });
-        $[47] = t9;
-        $[48] = testId;
-        $[49] = t10;
-    } else t10 = $[49];
-    return t10;
+        $[50] = t12;
+        $[51] = testId;
+        $[52] = t13;
+    } else t13 = $[52];
+    return t13;
 };
 Avatar_Avatar.displayName = "Avatar";
-function _temp(t0) {
+function _temp(child) {
+    return /*#__PURE__*/ isValidElement(child) && child.type === AvatarContent;
+}
+function _temp2(t0) {
     const [, v] = t0;
     return void 0 !== v;
 }

package/dist/components/Avatar/AvatarContent.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+export interface AvatarContentProps extends HTMLAttributes<HTMLSpanElement> {
+    ref?: Ref<HTMLSpanElement>;
+}
+/** The text beside the plate — `AvatarName` with an optional `AvatarDescription` under it. */
+export declare const AvatarContent: FC<AvatarContentProps>;

package/dist/components/Avatar/AvatarContent.js

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { avatarContentClassNames } from "./classes.js";
+const AvatarContent = (t0)=>{
+    const $ = c(11);
+    let className;
+    let props;
+    let ref;
+    if ($[0] !== t0) {
+        ({ ref, className, ...props } = t0);
+        $[0] = t0;
+        $[1] = className;
+        $[2] = props;
+        $[3] = ref;
+    } else {
+        className = $[1];
+        props = $[2];
+        ref = $[3];
+    }
+    const testId = useTestId("content");
+    let t1;
+    if ($[4] !== className) {
+        t1 = cn(avatarContentClassNames, className);
+        $[4] = className;
+        $[5] = t1;
+    } else t1 = $[5];
+    let t2;
+    if ($[6] !== props || $[7] !== ref || $[8] !== t1 || $[9] !== testId) {
+        t2 = /*#__PURE__*/ jsx("span", {
+            ...props,
+            ref: ref,
+            "data-slot": "avatar-content",
+            "data-testid": testId,
+            className: t1
+        });
+        $[6] = props;
+        $[7] = ref;
+        $[8] = t1;
+        $[9] = testId;
+        $[10] = t2;
+    } else t2 = $[10];
+    return t2;
+};
+AvatarContent.displayName = "AvatarContent";
+export { AvatarContent };

package/dist/components/Avatar/AvatarContext.d.ts

@@ -0,0 +1,4 @@
+import type { AvatarSize } from './classes.js';
+/** Hands the root's `size` to the plate layers and the name/description text. */
+export declare const AvatarSizeProvider: import("react").Provider<AvatarSize>;
+export declare const useAvatarSize: () => AvatarSize;

package/dist/components/Avatar/AvatarContext.js

@@ -0,0 +1,5 @@
+import { createContext, useContext } from "react";
+const AvatarSizeContext = createContext("lg");
+const AvatarSizeProvider = AvatarSizeContext.Provider;
+const useAvatarSize = ()=>useContext(AvatarSizeContext);
+export { AvatarSizeProvider, useAvatarSize };

package/dist/components/Avatar/AvatarDescription.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+export interface AvatarDescriptionProps extends HTMLAttributes<HTMLSpanElement> {
+    ref?: Ref<HTMLSpanElement>;
+}
+/** A second line under the name (e.g. the email), on one line, truncated with an ellipsis; the full text shows in a tooltip when it overflows. */
+export declare const AvatarDescription: FC<AvatarDescriptionProps>;

package/dist/components/Avatar/AvatarDescription.js

@@ -0,0 +1,87 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { OverflowTooltip, OverflowTooltipContent, OverflowTooltipTrigger } from "../OverflowTooltip/index.js";
+import { useAvatarSize } from "./AvatarContext.js";
+import { avatarDescriptionVariants } from "./classes.js";
+const AvatarDescription = (t0)=>{
+    const $ = c(21);
+    let children;
+    let className;
+    let props;
+    let ref;
+    if ($[0] !== t0) {
+        ({ ref, className, children, ...props } = t0);
+        $[0] = t0;
+        $[1] = children;
+        $[2] = className;
+        $[3] = props;
+        $[4] = ref;
+    } else {
+        children = $[1];
+        className = $[2];
+        props = $[3];
+        ref = $[4];
+    }
+    const testId = useTestId("description");
+    const size = useAvatarSize();
+    const t1 = ref;
+    let t2;
+    if ($[5] !== className || $[6] !== size) {
+        t2 = cn(avatarDescriptionVariants({
+            size
+        }), className);
+        $[5] = className;
+        $[6] = size;
+        $[7] = t2;
+    } else t2 = $[7];
+    let t3;
+    if ($[8] !== children || $[9] !== props || $[10] !== t2 || $[11] !== testId) {
+        t3 = /*#__PURE__*/ jsx("span", {
+            ...props,
+            "data-slot": "avatar-description",
+            "data-testid": testId,
+            className: t2,
+            children: children
+        });
+        $[8] = children;
+        $[9] = props;
+        $[10] = t2;
+        $[11] = testId;
+        $[12] = t3;
+    } else t3 = $[12];
+    let t4;
+    if ($[13] !== t1 || $[14] !== t3) {
+        t4 = /*#__PURE__*/ jsx(OverflowTooltipTrigger, {
+            ref: t1,
+            children: t3
+        });
+        $[13] = t1;
+        $[14] = t3;
+        $[15] = t4;
+    } else t4 = $[15];
+    let t5;
+    if ($[16] !== children) {
+        t5 = /*#__PURE__*/ jsx(OverflowTooltipContent, {
+            children: children
+        });
+        $[16] = children;
+        $[17] = t5;
+    } else t5 = $[17];
+    let t6;
+    if ($[18] !== t4 || $[19] !== t5) {
+        t6 = /*#__PURE__*/ jsxs(OverflowTooltip, {
+            children: [
+                t4,
+                t5
+            ]
+        });
+        $[18] = t4;
+        $[19] = t5;
+        $[20] = t6;
+    } else t6 = $[20];
+    return t6;
+};
+AvatarDescription.displayName = "AvatarDescription";
+export { AvatarDescription };

package/dist/components/Avatar/AvatarFallback.d.ts

@@ -2,10 +2,10 @@ import type { ComponentType, FC, HTMLAttributes, Ref } from 'react';
 import { type SvgIconProps } from '../../icons/index.js';
 export interface AvatarFallbackProps extends HTMLAttributes<HTMLSpanElement> {
     ref?: Ref<HTMLSpanElement>;
-    /** Initials are taken from this: first letter of the first and of the last word. */
+    /** Initials are taken from this: first letter of the first and of the last word (first word only at `sm`). */
     name?: string;
     /** Shown when there are no children and `name` gives no initials. */
     icon?: ComponentType<SvgIconProps>;
 }
-/** Shown while the photo loads, when it fails, and when there is none. */
+/** The plate: shown while the photo loads, when it fails, and when there is none. */
 export declare const AvatarFallback: FC<AvatarFallbackProps>;

package/dist/components/Avatar/AvatarFallback.js

@@ -5,9 +5,10 @@ import { UserRound } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import { getInitials } from "../../utils/getInitials.js";
 import { useTestId } from "../../utils/testId.js";
-import { avatarFallbackClassNames } from "./classes.js";
+import { useAvatarSize } from "./AvatarContext.js";
+import { avatarFallbackVariants, avatarPlateVariants } from "./classes.js";
 const AvatarFallback = (t0)=>{
-    const $ = c(22);
+    const $ = c(24);
     let children;
     let className;
     let name;
@@ -33,51 +34,57 @@ const AvatarFallback = (t0)=>{
     }
     const Icon = void 0 === t1 ? UserRound : t1;
     const testId = useTestId("fallback");
+    const size = useAvatarSize();
     let t2;
-    if ($[7] !== name) {
-        t2 = name ? getInitials(name) : "";
+    if ($[7] !== name || $[8] !== size) {
+        t2 = name ? "sm" === size ? name.trim().split(/\s+/).map(getInitials).find(Boolean) ?? "" : getInitials(name) : "";
         $[7] = name;
-        $[8] = t2;
-    } else t2 = $[8];
+        $[8] = size;
+        $[9] = t2;
+    } else t2 = $[9];
     const initials = t2;
     const showsInitials = null == children && "" !== initials;
-    const t3 = showsInitials && "text-text-primary";
+    let t3;
+    if ($[10] !== className || $[11] !== showsInitials || $[12] !== size) {
+        t3 = cn(avatarPlateVariants({
+            size
+        }), avatarFallbackVariants({
+            initials: showsInitials
+        }), className);
+        $[10] = className;
+        $[11] = showsInitials;
+        $[12] = size;
+        $[13] = t3;
+    } else t3 = $[13];
     let t4;
-    if ($[9] !== className || $[10] !== t3) {
-        t4 = cn(avatarFallbackClassNames, t3, className);
-        $[9] = className;
-        $[10] = t3;
-        $[11] = t4;
-    } else t4 = $[11];
-    let t5;
-    if ($[12] !== Icon || $[13] !== children || $[14] !== initials) {
-        t5 = children ?? (initials || /*#__PURE__*/ jsx(Icon, {
+    if ($[14] !== Icon || $[15] !== children || $[16] !== initials) {
+        t4 = children ?? (initials || /*#__PURE__*/ jsx(Icon, {
             size: "md"
         }));
-        $[12] = Icon;
-        $[13] = children;
-        $[14] = initials;
-        $[15] = t5;
-    } else t5 = $[15];
-    let t6;
-    if ($[16] !== props || $[17] !== ref || $[18] !== t4 || $[19] !== t5 || $[20] !== testId) {
-        t6 = /*#__PURE__*/ jsx(Avatar.Fallback, {
+        $[14] = Icon;
+        $[15] = children;
+        $[16] = initials;
+        $[17] = t4;
+    } else t4 = $[17];
+    let t5;
+    if ($[18] !== props || $[19] !== ref || $[20] !== t3 || $[21] !== t4 || $[22] !== testId) {
+        t5 = /*#__PURE__*/ jsx(Avatar.Fallback, {
             "aria-hidden": true,
             ...props,
             ref: ref,
             "data-slot": "avatar-fallback",
             "data-testid": testId,
-            className: t4,
-            children: t5
+            className: t3,
+            children: t4
         });
-        $[16] = props;
-        $[17] = ref;
-        $[18] = t4;
-        $[19] = t5;
-        $[20] = testId;
-        $[21] = t6;
-    } else t6 = $[21];
-    return t6;
+        $[18] = props;
+        $[19] = ref;
+        $[20] = t3;
+        $[21] = t4;
+        $[22] = testId;
+        $[23] = t5;
+    } else t5 = $[23];
+    return t5;
 };
 AvatarFallback.displayName = "AvatarFallback";
 export { AvatarFallback };

package/dist/components/Avatar/AvatarImage.js

@@ -3,9 +3,10 @@ import { c } from "react/compiler-runtime";
 import { Avatar } from "@ark-ui/react/avatar";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
-import { avatarImageClassNames } from "./classes.js";
+import { useAvatarSize } from "./AvatarContext.js";
+import { avatarImageClassNames, avatarPlateVariants } from "./classes.js";
 const AvatarImage = (t0)=>{
-    const $ = c(13);
+    const $ = c(14);
     let className;
     let props;
     let ref;
@@ -25,14 +26,18 @@ const AvatarImage = (t0)=>{
     }
     const alt = void 0 === t1 ? "" : t1;
     const testId = useTestId("image");
+    const size = useAvatarSize();
     let t2;
-    if ($[5] !== className) {
-        t2 = cn(avatarImageClassNames, className);
+    if ($[5] !== className || $[6] !== size) {
+        t2 = cn(avatarPlateVariants({
+            size
+        }), avatarImageClassNames, className);
         $[5] = className;
-        $[6] = t2;
-    } else t2 = $[6];
+        $[6] = size;
+        $[7] = t2;
+    } else t2 = $[7];
     let t3;
-    if ($[7] !== alt || $[8] !== props || $[9] !== ref || $[10] !== t2 || $[11] !== testId) {
+    if ($[8] !== alt || $[9] !== props || $[10] !== ref || $[11] !== t2 || $[12] !== testId) {
         t3 = /*#__PURE__*/ jsx(Avatar.Image, {
             ...props,
             ref: ref,
@@ -41,13 +46,13 @@ const AvatarImage = (t0)=>{
             "data-testid": testId,
             className: t2
         });
-        $[7] = alt;
-        $[8] = props;
-        $[9] = ref;
-        $[10] = t2;
-        $[11] = testId;
-        $[12] = t3;
-    } else t3 = $[12];
+        $[8] = alt;
+        $[9] = props;
+        $[10] = ref;
+        $[11] = t2;
+        $[12] = testId;
+        $[13] = t3;
+    } else t3 = $[13];
     return t3;
 };
 AvatarImage.displayName = "AvatarImage";

package/dist/components/Avatar/AvatarName.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+export interface AvatarNameProps extends HTMLAttributes<HTMLSpanElement> {
+    ref?: Ref<HTMLSpanElement>;
+}
+/** The person's name, on one line, truncated with an ellipsis; the full text shows in a tooltip when it overflows. */
+export declare const AvatarName: FC<AvatarNameProps>;