@neasg/design-system 0.4.2 → 0.4.3

package/dist/avatar.d.ts

@@ -7,29 +7,35 @@ export type AvatarSize = "sm" | "md";
 interface AvatarProps extends Omit<React.ComponentPropsWithoutRef<typeof AvatarRoot>, "children"> {
     src?: string | null;
     alt?: string;
-    fallback: React.ReactNode;
+    fallback?: React.ReactNode;
     size?: AvatarSize;
+    loading?: boolean;
     imageClassName?: string;
     fallbackClassName?: string;
 }
 interface AvatarProfileProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "role"> {
     src?: string | null;
     alt?: string;
-    fallback: React.ReactNode;
+    fallback?: React.ReactNode;
     size?: AvatarSize;
+    loading?: boolean;
     name?: React.ReactNode;
     role?: React.ReactNode;
     rolePlacement?: "above" | "below";
+    topInfo?: React.ReactNode;
+    bottomInfo?: React.ReactNode;
     avatarClassName?: string;
     imageClassName?: string;
     fallbackClassName?: string;
     contentClassName?: string;
     nameClassName?: string;
     roleClassName?: string;
+    topInfoClassName?: string;
+    bottomInfoClassName?: string;
     avatarOverlay?: React.ReactNode;
 }
-declare function Avatar({ src, alt, fallback, size, className, imageClassName, fallbackClassName, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
-declare function AvatarProfile({ src, alt, fallback, size, name, role, rolePlacement, className, avatarClassName, imageClassName, fallbackClassName, contentClassName, nameClassName, roleClassName, avatarOverlay, ...props }: AvatarProfileProps): import("react/jsx-runtime").JSX.Element;
+declare function Avatar({ src, alt, fallback, size, loading, className, imageClassName, fallbackClassName, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+declare function AvatarProfile({ src, alt, fallback, size, loading, name, role, rolePlacement, topInfo, bottomInfo, className, avatarClassName, imageClassName, fallbackClassName, contentClassName, nameClassName, roleClassName, topInfoClassName, bottomInfoClassName, avatarOverlay, ...props }: AvatarProfileProps): import("react/jsx-runtime").JSX.Element;
 export { Avatar, AvatarProfile, AvatarRoot, AvatarImage, AvatarFallback };
 export type AvatarRootProps = React.ComponentPropsWithoutRef<typeof AvatarRoot>;
 export type { AvatarProps, AvatarProfileProps };

package/dist/avatar.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { cn } from "./lib/utils";
+import { Skeleton } from "./skeleton";
 const AvatarRoot = React.forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Root, { ref: ref, className: cn("relative flex shrink-0 overflow-hidden rounded-full", className), ...props })));
 AvatarRoot.displayName = "AvatarRoot";
 const AvatarImage = React.forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Image, { ref: ref, className: cn("aspect-square size-full", className), ...props })));
@@ -13,13 +14,25 @@ const avatarSizeClasses = {
     sm: "h-8 w-8 text-xs",
     md: "h-10 w-10 text-sm",
 };
-function Avatar({ src, alt = "", fallback, size = "sm", className, imageClassName, fallbackClassName, ...props }) {
+function Avatar({ src, alt = "", fallback, size = "sm", loading = false, className, imageClassName, fallbackClassName, ...props }) {
+    if (loading) {
+        return (_jsx(Skeleton, { className: cn("shrink-0 rounded-full", avatarSizeClasses[size], className), ...props }));
+    }
     return (_jsxs(AvatarRoot, { className: cn(avatarSizeClasses[size], className), ...props, children: [src ? (_jsx(AvatarImage, { src: src, alt: alt, className: imageClassName })) : null, _jsx(AvatarFallback, { className: cn("bg-green-100 font-medium text-green-800", fallbackClassName), children: fallback })] }));
 }
-function AvatarProfile({ src, alt = "", fallback, size = "sm", name, role, rolePlacement = "above", className, avatarClassName, imageClassName, fallbackClassName, contentClassName, nameClassName, roleClassName, avatarOverlay, ...props }) {
-    const hasMeta = name !== undefined || role !== undefined;
-    const roleNode = role ? (_jsx("span", { className: cn("text-[10px] font-medium uppercase tracking-wide text-muted-foreground", roleClassName), children: role })) : null;
-    const nameNode = name ? (_jsx("span", { className: cn("truncate text-sm font-medium text-foreground", nameClassName), children: name })) : null;
-    return (_jsxs("div", { className: cn("flex items-center gap-2", className), ...props, children: [_jsxs("div", { className: "relative shrink-0", children: [_jsx(Avatar, { src: src, alt: alt, fallback: fallback, size: size, className: avatarClassName, imageClassName: imageClassName, fallbackClassName: fallbackClassName }), avatarOverlay] }), hasMeta ? (_jsxs("div", { className: cn("flex min-w-0 flex-1 flex-col", contentClassName), children: [rolePlacement === "above" ? roleNode : null, nameNode, rolePlacement === "below" ? roleNode : null] })) : null] }));
+function AvatarProfile({ src, alt = "", fallback, size = "sm", loading = false, name, role, rolePlacement = "above", topInfo, bottomInfo, className, avatarClassName, imageClassName, fallbackClassName, contentClassName, nameClassName, roleClassName, topInfoClassName, bottomInfoClassName, avatarOverlay, ...props }) {
+    const resolvedTop = topInfo !== null && topInfo !== void 0 ? topInfo : (rolePlacement === "above" ? role : undefined);
+    const resolvedBottom = bottomInfo !== null && bottomInfo !== void 0 ? bottomInfo : (rolePlacement === "below" ? role : undefined);
+    if (loading) {
+        return (_jsxs("div", { className: cn("flex items-center gap-2", className), "aria-busy": "true", ...props, children: [_jsx(Skeleton, { className: cn("shrink-0 rounded-full", avatarSizeClasses[size], avatarClassName) }), _jsxs("div", { className: cn("flex min-w-0 flex-1 flex-col gap-1.5", contentClassName), children: [resolvedTop !== undefined ? (_jsx(Skeleton, { className: "h-3 w-20" })) : null, _jsx(Skeleton, { className: "h-4 w-32" }), resolvedBottom !== undefined ? (_jsx(Skeleton, { className: "h-3 w-20" })) : null] })] }));
+    }
+    const hasMeta = name !== undefined ||
+        resolvedTop !== undefined ||
+        resolvedBottom !== undefined;
+    const infoBaseClass = "truncate text-[10px] leading-tight font-medium uppercase tracking-wide text-muted-foreground";
+    const topNode = resolvedTop !== undefined && resolvedTop !== null ? (_jsx("span", { className: cn(infoBaseClass, topInfo !== undefined ? topInfoClassName : roleClassName), children: resolvedTop })) : null;
+    const bottomNode = resolvedBottom !== undefined && resolvedBottom !== null ? (_jsx("span", { className: cn(infoBaseClass, bottomInfo !== undefined ? bottomInfoClassName : roleClassName), children: resolvedBottom })) : null;
+    const nameNode = name ? (_jsx("span", { className: cn("truncate text-sm leading-tight font-medium text-foreground", nameClassName), children: name })) : null;
+    return (_jsxs("div", { className: cn("flex items-center gap-2", className), ...props, children: [_jsxs("div", { className: "relative shrink-0", children: [_jsx(Avatar, { src: src, alt: alt, fallback: fallback, size: size, className: avatarClassName, imageClassName: imageClassName, fallbackClassName: fallbackClassName }), avatarOverlay] }), hasMeta ? (_jsxs("div", { className: cn("flex min-w-0 flex-1 flex-col", contentClassName), children: [topNode, nameNode, bottomNode] })) : null] }));
 }
 export { Avatar, AvatarProfile, AvatarRoot, AvatarImage, AvatarFallback };

package/dist/command.d.ts

@@ -45,7 +45,7 @@ declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
+}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;

package/dist/label-value.js

@@ -16,6 +16,6 @@ function LabelValue({ label, value, className, labelClassName, hideIfEmpty = fal
     if (!loading && hideIfEmpty && empty) {
         return null;
     }
-    return (_jsxs("div", { className: cn("min-w-0 h-full space-y-1", className), children: [!hideLabel && (loading ? (_jsx(Skeleton, { className: "h-3.5 w-20" })) : (_jsxs(Typography, { as: "p", variant: "label", className: labelClassName, children: [label, required ? (_jsx("span", { "aria-hidden": "true", className: "ml-0.5 text-destructive", children: "*" })) : null] }))), loading ? (_jsx(Skeleton, { className: "h-4 w-32" })) : (_jsx("div", { className: cn("min-w-0 break-words text-sm text-foreground", empty && "italic text-muted-foreground/60"), children: empty ? "-" : value }))] }));
+    return (_jsxs("div", { className: cn("min-w-0 h-full space-y-1", className), children: [!hideLabel && (loading ? (_jsx(Skeleton, { className: "h-3.5 w-20" })) : (_jsxs(Typography, { as: "p", variant: "label", className: cn("leading-tight", labelClassName), children: [label, required ? (_jsx("span", { "aria-hidden": "true", className: "ml-0.5 text-destructive", children: "*" })) : null] }))), loading ? (_jsx(Skeleton, { className: "h-4 w-32" })) : (_jsx("div", { className: cn("min-w-0 break-words text-sm text-foreground", empty && "italic text-muted-foreground/60"), children: empty ? "-" : value }))] }));
 }
 export { LabelValue };

package/dist/link.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const linkVariants: (props?: ({
-    variant?: "default" | "inherit" | "subtle" | null | undefined;
+    variant?: "inherit" | "default" | "subtle" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>, VariantProps<typeof linkVariants> {
 }

package/dist/typography.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const typographyVariants: (props?: ({
-    variant?: "label" | "body" | "caption" | "title" | "heading" | "subheading" | "bodySm" | "eyebrow" | null | undefined;
+    variant?: "title" | "heading" | "label" | "body" | "caption" | "subheading" | "bodySm" | "eyebrow" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface TypographyProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
     as?: keyof React.JSX.IntrinsicElements;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neasg/design-system",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "NEA shared design system primitives, theme tokens, and Storybook docs.",
   "license": "UNLICENSED",
   "type": "module",