@wallarm-org/design-system 2.9.0 → 3.0.0-rc-feat-code-connect.1

package/dist/components/Avatar/AvatarName.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 { avatarNameVariants } from "./classes.js";
+const AvatarName = (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("name");
+    const size = useAvatarSize();
+    const t1 = ref;
+    let t2;
+    if ($[5] !== className || $[6] !== size) {
+        t2 = cn(avatarNameVariants({
+            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-name",
+            "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;
+};
+AvatarName.displayName = "AvatarName";
+export { AvatarName };

package/dist/components/Avatar/AvatarOverlay.js

@@ -3,9 +3,10 @@ import { c } from "react/compiler-runtime";
 import { RefreshCcw } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
-import { avatarOverlayClassNames } from "./classes.js";
+import { useAvatarSize } from "./AvatarContext.js";
+import { avatarOverlayClassNames, avatarPlateVariants } from "./classes.js";
 const AvatarOverlay = (t0)=>{
-    const $ = c(17);
+    const $ = c(18);
     let children;
     let className;
     let props;
@@ -28,23 +29,27 @@ const AvatarOverlay = (t0)=>{
     }
     const visible = void 0 === t1 ? false : t1;
     const testId = useTestId("overlay");
+    const size = useAvatarSize();
     const t2 = visible ? "" : void 0;
     let t3;
-    if ($[6] !== className) {
-        t3 = cn(avatarOverlayClassNames, className);
+    if ($[6] !== className || $[7] !== size) {
+        t3 = cn(avatarPlateVariants({
+            size
+        }), avatarOverlayClassNames, className);
         $[6] = className;
-        $[7] = t3;
-    } else t3 = $[7];
+        $[7] = size;
+        $[8] = t3;
+    } else t3 = $[8];
     let t4;
-    if ($[8] !== children) {
+    if ($[9] !== children) {
         t4 = children ?? /*#__PURE__*/ jsx(RefreshCcw, {
             size: "md"
         });
-        $[8] = children;
-        $[9] = t4;
-    } else t4 = $[9];
+        $[9] = children;
+        $[10] = t4;
+    } else t4 = $[10];
     let t5;
-    if ($[10] !== props || $[11] !== ref || $[12] !== t2 || $[13] !== t3 || $[14] !== t4 || $[15] !== testId) {
+    if ($[11] !== props || $[12] !== ref || $[13] !== t2 || $[14] !== t3 || $[15] !== t4 || $[16] !== testId) {
         t5 = /*#__PURE__*/ jsx("span", {
             ...props,
             ref: ref,
@@ -55,14 +60,14 @@ const AvatarOverlay = (t0)=>{
             className: t3,
             children: t4
         });
-        $[10] = props;
-        $[11] = ref;
-        $[12] = t2;
-        $[13] = t3;
-        $[14] = t4;
-        $[15] = testId;
-        $[16] = t5;
-    } else t5 = $[16];
+        $[11] = props;
+        $[12] = ref;
+        $[13] = t2;
+        $[14] = t3;
+        $[15] = t4;
+        $[16] = testId;
+        $[17] = t5;
+    } else t5 = $[17];
     return t5;
 };
 AvatarOverlay.displayName = "AvatarOverlay";

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

@@ -1,6 +1,21 @@
+import { type VariantProps } from 'class-variance-authority';
 export declare const avatarVariants: (props?: ({
-    size?: "sm" | "xs" | null | undefined;
+    size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type AvatarSize = NonNullable<VariantProps<typeof avatarVariants>['size']>;
+/** Box shared by every plate layer: one grid cell, the plate size and radius, clipped. */
+export declare const avatarPlateVariants: (props?: ({
+    size?: "lg" | "md" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const avatarImageClassNames: string;
-export declare const avatarFallbackClassNames: string;
+export declare const avatarFallbackVariants: (props?: ({
+    initials?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const avatarOverlayClassNames: string;
+export declare const avatarContentClassNames: string;
+export declare const avatarNameVariants: (props?: ({
+    size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const avatarDescriptionVariants: (props?: ({
+    size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/Avatar/classes.js

@@ -1,17 +1,65 @@
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
-const avatarVariants = cva(cn('group/avatar inline-grid shrink-0 place-items-center overflow-hidden align-middle *:col-start-1 *:row-start-1', 'border border-border-primary bg-states-primary-hover text-icon-primary font-sans font-medium', 'branded:border-border-brand branded:bg-states-brand-hover branded:text-icon-brand', 'has-[>img[data-state=visible]]:border-0', 'hover:not-disabled:[&:has(>[data-slot=avatar-overlay])>[data-slot=avatar-fallback]]:invisible', 'focus-visible:[&:has(>[data-slot=avatar-overlay])>[data-slot=avatar-fallback]]:invisible', '[&:has(>[data-slot=avatar-overlay][data-visible])>[data-slot=avatar-fallback]]:invisible', 'enabled:cursor-pointer disabled:cursor-not-allowed', 'focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-focus-primary'), {
+const avatarVariants = cva(cn('group/avatar inline-grid shrink-0 items-center gap-x-6 align-middle font-sans', 'has-[>[data-slot=avatar-content]]:max-w-full', 'hover:not-disabled:[&:has(>[data-slot=avatar-overlay])>[data-slot=avatar-fallback]]:text-transparent', 'hover:not-disabled:[&:has(>[data-slot=avatar-overlay])>[data-slot=avatar-fallback]>*]:invisible', 'focus-visible:[&:has(>[data-slot=avatar-overlay])>[data-slot=avatar-fallback]]:text-transparent', 'focus-visible:[&:has(>[data-slot=avatar-overlay])>[data-slot=avatar-fallback]>*]:invisible', '[&:has(>[data-slot=avatar-overlay][data-visible])>[data-slot=avatar-fallback]]:text-transparent', '[&:has(>[data-slot=avatar-overlay][data-visible])>[data-slot=avatar-fallback]>*]:invisible', 'enabled:cursor-pointer disabled:cursor-not-allowed', 'focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-focus-primary'), {
     variants: {
         size: {
-            xs: 'size-24 rounded-8 text-2xs',
-            sm: 'size-32 rounded-12 text-xs'
+            sm: 'rounded-8',
+            md: 'rounded-8',
+            lg: 'rounded-12'
         }
     },
     defaultVariants: {
-        size: 'sm'
+        size: 'lg'
     }
 });
-const avatarImageClassNames = cn('size-full object-cover data-[state=hidden]:hidden');
-const avatarFallbackClassNames = cn('inline-flex items-center justify-center select-none data-[state=hidden]:hidden');
-const avatarOverlayClassNames = cn('hidden size-full place-items-center text-icon-primary', 'group-hover/avatar:grid group-focus-visible/avatar:grid group-disabled/avatar:not-data-[visible]:hidden', 'data-[visible]:grid', 'group-has-[>img[data-state=visible]]/avatar:bg-component-avatar-overlay');
-export { avatarFallbackClassNames, avatarImageClassNames, avatarOverlayClassNames, avatarVariants };
+const avatarPlateVariants = cva('col-start-1 row-start-1 overflow-hidden', {
+    variants: {
+        size: {
+            sm: 'size-20 rounded-8',
+            md: 'size-24 rounded-8',
+            lg: 'size-32 rounded-12'
+        }
+    },
+    defaultVariants: {
+        size: 'lg'
+    }
+});
+const avatarImageClassNames = cn('bg-states-primary-hover object-cover data-[state=hidden]:hidden');
+const avatarFallbackVariants = cva(cn('inline-flex items-center justify-center select-none data-[state=hidden]:hidden', 'border border-border-primary bg-states-primary-hover font-medium text-xs', 'branded:border-border-brand branded:bg-states-brand-hover'), {
+    variants: {
+        initials: {
+            true: 'text-text-primary branded:text-text-brand',
+            false: 'text-icon-primary branded:text-icon-brand'
+        }
+    },
+    defaultVariants: {
+        initials: false
+    }
+});
+const avatarOverlayClassNames = cn('hidden place-items-center text-icon-primary', 'group-hover/avatar:grid group-focus-visible/avatar:grid group-disabled/avatar:not-data-[visible]:hidden', 'data-[visible]:grid', 'group-has-[>img[data-state=visible]]/avatar:bg-component-avatar-overlay');
+const avatarContentClassNames = cn('col-start-2 row-start-1 flex min-w-0 flex-col text-left');
+const avatarNameVariants = cva('truncate font-normal text-text-primary', {
+    variants: {
+        size: {
+            sm: 'text-sm',
+            md: 'text-sm',
+            lg: 'text-sm'
+        }
+    },
+    defaultVariants: {
+        size: 'lg'
+    }
+});
+const avatarDescriptionVariants = cva('truncate font-normal text-text-secondary', {
+    variants: {
+        size: {
+            sm: 'text-xs',
+            md: 'text-xs',
+            lg: 'text-xs'
+        }
+    },
+    defaultVariants: {
+        size: 'lg'
+    }
+});
+export { avatarContentClassNames, avatarDescriptionVariants, avatarFallbackVariants, avatarImageClassNames, avatarNameVariants, avatarOverlayClassNames, avatarPlateVariants, avatarVariants };

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

@@ -1,4 +1,7 @@
 export { Avatar, type AvatarProps, type AvatarStatusChangeDetails } from './Avatar.js';
+export { AvatarContent, type AvatarContentProps } from './AvatarContent.js';
+export { AvatarDescription, type AvatarDescriptionProps } from './AvatarDescription.js';
 export { AvatarFallback, type AvatarFallbackProps } from './AvatarFallback.js';
 export { AvatarImage, type AvatarImageProps } from './AvatarImage.js';
+export { AvatarName, type AvatarNameProps } from './AvatarName.js';
 export { AvatarOverlay, type AvatarOverlayProps } from './AvatarOverlay.js';

package/dist/components/Avatar/index.js

@@ -1,4 +1,7 @@
 export { Avatar } from "./Avatar.js";
+export { AvatarContent } from "./AvatarContent.js";
+export { AvatarDescription } from "./AvatarDescription.js";
 export { AvatarFallback } from "./AvatarFallback.js";
 export { AvatarImage } from "./AvatarImage.js";
+export { AvatarName } from "./AvatarName.js";
 export { AvatarOverlay } from "./AvatarOverlay.js";

package/dist/components/NavRail/NavRailItem.js

@@ -93,7 +93,7 @@ const NavRailItem = (t0)=>{
         t8 = /*#__PURE__*/ jsx("span", {
             className: "flex shrink-0 items-center justify-center",
             children: hasPlate ? /*#__PURE__*/ jsxs(Avatar, {
-                size: "xs",
+                size: "md",
                 "data-slot": "nav-rail-item-avatar",
                 className: "-m-4",
                 children: [

package/dist/index.d.ts

@@ -17,7 +17,7 @@ export { Alert, AlertClose, type AlertCloseProps, type AlertColor, AlertContent,
 export { AnimatedBackground, type AnimatedBackgroundProps, } from './components/AnimatedBackground/index.js';
 export { AppShell, AppShellHeader, type AppShellHeaderProps, type AppShellProps, AppShellRail, type AppShellRailProps, AppShellRemote, type AppShellRemoteProps, } from './components/AppShell/index.js';
 export { Attribute, AttributeActions, AttributeActionsContent, type AttributeActionsContentProps, AttributeActionsItem, type AttributeActionsItemProps, type AttributeActionsProps, AttributeActionsTarget, type AttributeActionsTargetProps, AttributeLabel, AttributeLabelDescription, type AttributeLabelDescriptionProps, AttributeLabelInfo, type AttributeLabelInfoProps, type AttributeLabelProps, type AttributeProps, AttributeValue, type AttributeValueProps, } from './components/Attribute/index.js';
-export { Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, AvatarOverlay, type AvatarOverlayProps, type AvatarProps, type AvatarStatusChangeDetails, } from './components/Avatar/index.js';
+export { Avatar, AvatarContent, type AvatarContentProps, AvatarDescription, type AvatarDescriptionProps, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, AvatarName, type AvatarNameProps, AvatarOverlay, type AvatarOverlayProps, type AvatarProps, type AvatarStatusChangeDetails, } from './components/Avatar/index.js';
 export { Badge, type BadgeProps } from './components/Badge/index.js';
 export { Banner, BannerClose, type BannerCloseProps, BannerContent, type BannerContentProps, BannerControls, type BannerControlsProps, BannerDescription, type BannerDescriptionProps, BannerIcon, type BannerIconProps, BannerLink, type BannerLinkProps, type BannerProps, BannerTitle, type BannerTitleProps, type BannerVariant, } from './components/Banner/index.js';
 export { Breadcrumbs, BreadcrumbsEllipsis, type BreadcrumbsEllipsisProps, BreadcrumbsItem, type BreadcrumbsItemProps, type BreadcrumbsProps, BreadcrumbsScopeSwitcher, type BreadcrumbsScopeSwitcherProps, BreadcrumbsSeparator, type BreadcrumbsSeparatorProps, type ScopeSwitcherItem, } from './components/Breadcrumbs/index.js';

package/dist/index.js

@@ -6,7 +6,7 @@ export { Alert, AlertClose, AlertContent, AlertControls, AlertDescription, Alert
 export { AnimatedBackground } from "./components/AnimatedBackground/index.js";
 export { AppShell, AppShellHeader, AppShellRail, AppShellRemote } from "./components/AppShell/index.js";
 export { Attribute, AttributeActions, AttributeActionsContent, AttributeActionsItem, AttributeActionsTarget, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue } from "./components/Attribute/index.js";
-export { Avatar, AvatarFallback, AvatarImage, AvatarOverlay } from "./components/Avatar/index.js";
+export { Avatar, AvatarContent, AvatarDescription, AvatarFallback, AvatarImage, AvatarName, AvatarOverlay } from "./components/Avatar/index.js";
 export { Badge } from "./components/Badge/index.js";
 export { Banner, BannerClose, BannerContent, BannerControls, BannerDescription, BannerIcon, BannerLink, BannerTitle } from "./components/Banner/index.js";
 export { Breadcrumbs, BreadcrumbsEllipsis, BreadcrumbsItem, BreadcrumbsScopeSwitcher, BreadcrumbsSeparator } from "./components/Breadcrumbs/index.js";