npm - @langchain/macaw-components - Versions diffs - 1.0.0-beta.1 → 1.0.0-beta.6 - Mend

@langchain/macaw-components 1.0.0-beta.1 → 1.0.0-beta.6

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.

Files changed (185) hide show

package/dist/components/Attachment/Attachment.d.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { type IconComponent } from '../Icon/index.js';
+export interface AttachmentProps extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'onClick'> {
+    name: string;
+    contentType?: string | null;
+    icon?: IconComponent;
+    /** Noninteractive thumbnail content. The consumer owns its source and lifecycle. */
+    preview?: ReactNode;
+    /** Secondary information, inline in compact rows and stacked in large rows. */
+    metadata?: ReactNode;
+    variant?: 'file' | 'thumbnail';
+    /** File-row height: sm=24px, md=32px, lg=48px. Thumbnails use larger tiles. */
+    size?: 'sm' | 'md' | 'lg';
+    status?: 'ready' | 'loading' | 'uploading' | 'error';
+    onOpen?: () => void;
+    openLabel?: string;
+    onRemove?: () => void;
+    /** Sibling controls; use xs/sm/md buttons or smaller for sm/md/lg rows. */
+    actions?: ReactNode;
+}
+export declare const Attachment: import("react").ForwardRefExoticComponent<Omit<AttachmentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Attachment/Attachment.js ADDED Viewed

@@ -0,0 +1,165 @@
+import { cn } from "../../utils/cn.js";
+import { CONTROL_SIZES, VISUAL_ELEMENT_SIZES } from "../../utils/componentSizes.js";
+import { Text } from "../Text/Text.js";
+import { SpinnerIcon } from "../Spinner/Spinner.js";
+import { Button } from "../Button/Button.js";
+import { Icon } from "../Icon/Icon.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { t as getAttachmentIcon } from "../../_chunks/render-attachment-icon-BWBEMxXZ.js";
+import { forwardRef, useId } from "react";
+import { FileIcon } from "@phosphor-icons/react/dist/ssr/File";
+import { WarningCircleIcon } from "@phosphor-icons/react/dist/ssr/WarningCircle";
+import { XIcon } from "@phosphor-icons/react/dist/ssr/X";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/components/src/components/Attachment/Attachment.tsx
+var SIZE_STYLES = {
+	sm: {
+		height: CONTROL_SIZES.sm.heightClassName,
+		padding: "px-space-1",
+		media: VISUAL_ELEMENT_SIZES.xs.className,
+		thumbnail: "w-24"
+	},
+	md: {
+		height: CONTROL_SIZES.md.heightClassName,
+		padding: "px-space-1",
+		media: VISUAL_ELEMENT_SIZES.sm.className,
+		thumbnail: "w-32"
+	},
+	lg: {
+		height: "h-12",
+		padding: "px-space-2",
+		media: "size-9",
+		thumbnail: "w-40"
+	}
+};
+var Attachment = forwardRef(function Attachment({ name, contentType, icon, preview, metadata, variant = "file", size = "md", status = "ready", onOpen, openLabel = `View ${name}`, onRemove, actions, className, ...props }, ref) {
+	const statusId = useId();
+	const sizeStyles = SIZE_STYLES[size];
+	const isThumbnail = variant === "thumbnail";
+	const hasMediaBackground = isThumbnail || size !== "sm";
+	const stackedText = isThumbnail || size === "lg";
+	const isBusy = status === "loading" || status === "uploading";
+	const hasPreview = preview != null && status === "ready";
+	const description = status === "uploading" ? "Uploading…" : status === "loading" ? "Loading attachment…" : status === "error" ? "Upload failed." : void 0;
+	const removeButton = onRemove ? /* @__PURE__ */ jsx(IconButton, {
+		type: "button",
+		icon: XIcon,
+		iconWeight: "regular",
+		iconClassName: isThumbnail ? size === "sm" ? "size-2.5" : "size-3" : size === "sm" ? "size-3" : "size-3.5",
+		label: `Remove ${name}`,
+		color: "secondary",
+		variant: isThumbnail ? "normal" : "plain",
+		round: isThumbnail,
+		className: cn(isThumbnail && [
+			"absolute right-0 top-0",
+			"border-0 shadow-none hover:bg-elevated-hover",
+			"transition-opacity duration-fast motion-reduce:transition-none",
+			"[@media(hover:hover)]:group-[:not(:is(:hover,:focus-within))]/attachment:pointer-events-none",
+			"[@media(hover:hover)]:group-[:not(:is(:hover,:focus-within))]/attachment:opacity-0"
+		]),
+		size: size === "sm" ? "xxs" : size === "md" ? "xs" : "sm",
+		onClick: (event) => {
+			event.stopPropagation();
+			onRemove();
+		}
+	}) : null;
+	const media = hasPreview ? preview : /* @__PURE__ */ jsx(Icon, {
+		"aria-hidden": true,
+		icon: isBusy ? SpinnerIcon : status === "error" ? WarningCircleIcon : icon ?? getAttachmentIcon(contentType ?? null) ?? FileIcon,
+		size,
+		weight: "regular",
+		color: status === "error" ? "error" : hasMediaBackground ? "neutral" : void 0,
+		className: cn("rounded-xs", size === "sm" && sizeStyles.media, !hasMediaBackground && "bg-transparent dark:bg-transparent", status !== "error" && ["text-icon-secondary", hasMediaBackground && "bg-surface-level-2"])
+	});
+	const content = /* @__PURE__ */ jsxs("span", {
+		className: cn("flex min-w-0 flex-1 items-center", size === "sm" && !isThumbnail ? "gap-space-1" : "gap-space-2", isThumbnail && "w-full max-w-full flex-none flex-col items-stretch"),
+		children: [hasPreview || isThumbnail ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: cn("flex shrink-0 items-center justify-center overflow-hidden rounded-xs [&>img]:size-full [&>img]:object-cover", isThumbnail && status === "error" ? "bg-error-subtle dark:bg-error" : hasMediaBackground && "bg-surface-level-2", isThumbnail ? "relative aspect-square w-full [&>img]:absolute [&>img]:inset-0" : sizeStyles.media),
+			children: media
+		}) : media, /* @__PURE__ */ jsxs("span", {
+			className: cn("flex min-w-0 flex-1", stackedText ? "flex-col gap-space-1" : "items-baseline gap-space-2", isThumbnail && "w-full max-w-full flex-none"),
+			children: [
+				/* @__PURE__ */ jsx(Text, {
+					as: "span",
+					dir: "rtl",
+					variant: size === "sm" ? "xs" : size === "md" ? "sm" : "md",
+					className: cn("min-w-0 max-w-48 truncate text-left text-primary", isThumbnail && "w-full max-w-full"),
+					title: name,
+					children: /* @__PURE__ */ jsx("bdi", {
+						dir: "ltr",
+						children: name
+					})
+				}),
+				metadata != null && !description && /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					variant: "xs",
+					color: "quaternary",
+					className: cn("min-w-0 max-w-48 truncate", isThumbnail && "w-full max-w-full"),
+					title: typeof metadata === "string" ? metadata : void 0,
+					children: metadata
+				}),
+				/* @__PURE__ */ jsx("span", {
+					id: statusId,
+					role: "status",
+					"aria-live": "polite",
+					"aria-atomic": "true",
+					className: cn(description ? "min-w-0 max-w-full" : "sr-only", description && status === "error" && !stackedText && "max-w-[75%] shrink-0 grow"),
+					children: description && /* @__PURE__ */ jsxs(Text, {
+						as: "span",
+						variant: "xs",
+						title: description,
+						className: cn("block truncate text-tertiary", status === "error" && "text-error-secondary"),
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "sr-only",
+							children: [name, ": "]
+						}), description]
+					})
+				})
+			]
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "group",
+		"aria-label": name,
+		...props,
+		onClick: (event) => {
+			if (onOpen && event.target === event.currentTarget) {
+				event.stopPropagation();
+				onOpen();
+			}
+		},
+		className: cn("box-border flex min-w-0 max-w-full shrink-0 items-center gap-space-2 rounded-xs border border-subtle bg-surface-level-1", isThumbnail ? [
+			sizeStyles.thumbnail,
+			"group/attachment relative flex-col items-stretch",
+			size === "sm" ? "p-space-1" : "p-space-2"
+		] : [sizeStyles.height, sizeStyles.padding], status === "error" && "border-error", onOpen && "cursor-pointer", className),
+		children: [
+			onOpen ? /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				color: "secondary",
+				variant: "plain",
+				"aria-label": openLabel,
+				"aria-describedby": description ? statusId : void 0,
+				className: cn("min-w-0 flex-1 justify-start p-0 text-left", isThumbnail ? "h-auto w-full max-w-full flex-none whitespace-normal" : "h-full"),
+				onClick: (event) => {
+					event.stopPropagation();
+					onOpen();
+				},
+				children: content
+			}) : content,
+			isThumbnail && removeButton,
+			(actions != null || !isThumbnail && onRemove) && /* @__PURE__ */ jsxs("fieldset", {
+				"aria-label": `Actions for ${name}`,
+				className: cn("m-0 flex min-w-0 max-w-full shrink-0 items-center justify-end gap-space-1 border-0 p-0", isThumbnail && "flex-wrap"),
+				onClick: (event) => event.stopPropagation(),
+				children: [actions, !isThumbnail && removeButton]
+			})
+		]
+	});
+});
+//#endregion
+export { Attachment };
+//# sourceMappingURL=Attachment.js.map

package/dist/components/Attachment/Attachment.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Attachment.js","names":[],"sources":["../../../src/components/Attachment/Attachment.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\nimport { forwardRef, useId } from 'react';\n\nimport { FileIcon } from '@phosphor-icons/react/dist/ssr/File';\nimport { WarningCircleIcon } from '@phosphor-icons/react/dist/ssr/WarningCircle';\nimport { XIcon } from '@phosphor-icons/react/dist/ssr/X';\n\nimport { cn } from '../../utils/cn';\nimport {\n CONTROL_SIZES,\n VISUAL_ELEMENT_SIZES,\n} from '../../utils/componentSizes';\nimport { Button } from '../Button';\nimport { Icon, type IconComponent } from '../Icon';\nimport { IconButton } from '../IconButton';\nimport { SpinnerIcon } from '../Spinner';\nimport { Text } from '../Text';\nimport { getAttachmentIcon } from './render-attachment-icon';\n\nexport interface AttachmentProps extends Omit<\n ComponentPropsWithRef<'div'>,\n 'children' | 'onClick'\n> {\n name: string;\n contentType?: string | null;\n icon?: IconComponent;\n /** Noninteractive thumbnail content. The consumer owns its source and lifecycle. */\n preview?: ReactNode;\n /** Secondary information, inline in compact rows and stacked in large rows. */\n metadata?: ReactNode;\n variant?: 'file' | 'thumbnail';\n /** File-row height: sm=24px, md=32px, lg=48px. Thumbnails use larger tiles. */\n size?: 'sm' | 'md' | 'lg';\n status?: 'ready' | 'loading' | 'uploading' | 'error';\n onOpen?: () => void;\n openLabel?: string;\n onRemove?: () => void;\n /** Sibling controls; use xs/sm/md buttons or smaller for sm/md/lg rows. */\n actions?: ReactNode;\n}\n\nconst SIZE_STYLES = {\n sm: {\n height: CONTROL_SIZES.sm.heightClassName,\n padding: 'px-space-1',\n media: VISUAL_ELEMENT_SIZES.xs.className,\n thumbnail: 'w-24',\n },\n md: {\n height: CONTROL_SIZES.md.heightClassName,\n padding: 'px-space-1',\n media: VISUAL_ELEMENT_SIZES.sm.className,\n thumbnail: 'w-32',\n },\n lg: {\n height: 'h-12',\n padding: 'px-space-2',\n media: 'size-9',\n thumbnail: 'w-40',\n },\n};\n\nexport const Attachment = forwardRef<HTMLDivElement, AttachmentProps>(\n function Attachment(\n {\n name,\n contentType,\n icon,\n preview,\n metadata,\n variant = 'file',\n size = 'md',\n status = 'ready',\n onOpen,\n openLabel = `View ${name}`,\n onRemove,\n actions,\n className,\n ...props\n },\n ref\n ) {\n const statusId = useId();\n const sizeStyles = SIZE_STYLES[size];\n const isThumbnail = variant === 'thumbnail';\n const hasMediaBackground = isThumbnail || size !== 'sm';\n const stackedText = isThumbnail || size === 'lg';\n const isBusy = status === 'loading' || status === 'uploading';\n const hasPreview = preview != null && status === 'ready';\n const description =\n status === 'uploading'\n ? 'Uploading…'\n : status === 'loading'\n ? 'Loading attachment…'\n : status === 'error'\n ? 'Upload failed.'\n : undefined;\n const removeButton = onRemove ? (\n <IconButton\n type=\"button\"\n icon={XIcon}\n iconWeight=\"regular\"\n iconClassName={\n isThumbnail\n ? size === 'sm'\n ? 'size-2.5'\n : 'size-3'\n : size === 'sm'\n ? 'size-3'\n : 'size-3.5'\n }\n label={`Remove ${name}`}\n color=\"secondary\"\n variant={isThumbnail ? 'normal' : 'plain'}\n round={isThumbnail}\n className={cn(\n isThumbnail && [\n 'absolute right-0 top-0',\n 'border-0 shadow-none hover:bg-elevated-hover',\n 'transition-opacity duration-fast motion-reduce:transition-none',\n '[@media(hover:hover)]:group-[:not(:is(:hover,:focus-within))]/attachment:pointer-events-none',\n '[@media(hover:hover)]:group-[:not(:is(:hover,:focus-within))]/attachment:opacity-0',\n ]\n )}\n size={size === 'sm' ? 'xxs' : size === 'md' ? 'xs' : 'sm'}\n onClick={(event) => {\n event.stopPropagation();\n onRemove();\n }}\n />\n ) : null;\n const media = hasPreview ? (\n preview\n ) : (\n <Icon\n aria-hidden\n icon={\n isBusy\n ? SpinnerIcon\n : status === 'error'\n ? WarningCircleIcon\n : (icon ?? getAttachmentIcon(contentType ?? null) ?? FileIcon)\n }\n size={size}\n weight=\"regular\"\n color={\n status === 'error'\n ? 'error'\n : hasMediaBackground\n ? 'neutral'\n : undefined\n }\n className={cn(\n 'rounded-xs',\n size === 'sm' && sizeStyles.media,\n !hasMediaBackground && 'bg-transparent dark:bg-transparent',\n status !== 'error' && [\n 'text-icon-secondary',\n hasMediaBackground && 'bg-surface-level-2',\n ]\n )}\n />\n );\n const content = (\n <span\n className={cn(\n 'flex min-w-0 flex-1 items-center',\n size === 'sm' && !isThumbnail ? 'gap-space-1' : 'gap-space-2',\n isThumbnail && 'w-full max-w-full flex-none flex-col items-stretch'\n )}\n >\n {hasPreview || isThumbnail ? (\n <span\n aria-hidden\n className={cn(\n 'flex shrink-0 items-center justify-center overflow-hidden rounded-xs [&>img]:size-full [&>img]:object-cover',\n isThumbnail && status === 'error'\n ? 'bg-error-subtle dark:bg-error'\n : hasMediaBackground && 'bg-surface-level-2',\n isThumbnail\n ? 'relative aspect-square w-full [&>img]:absolute [&>img]:inset-0'\n : sizeStyles.media\n )}\n >\n {media}\n </span>\n ) : (\n media\n )}\n <span\n className={cn(\n 'flex min-w-0 flex-1',\n stackedText ? 'flex-col gap-space-1' : 'items-baseline gap-space-2',\n isThumbnail && 'w-full max-w-full flex-none'\n )}\n >\n <Text\n as=\"span\"\n dir=\"rtl\"\n variant={size === 'sm' ? 'xs' : size === 'md' ? 'sm' : 'md'}\n className={cn(\n 'min-w-0 max-w-48 truncate text-left text-primary',\n isThumbnail && 'w-full max-w-full'\n )}\n title={name}\n >\n <bdi dir=\"ltr\">{name}</bdi>\n </Text>\n {metadata != null && !description && (\n <Text\n as=\"span\"\n variant=\"xs\"\n color=\"quaternary\"\n className={cn(\n 'min-w-0 max-w-48 truncate',\n isThumbnail && 'w-full max-w-full'\n )}\n title={typeof metadata === 'string' ? metadata : undefined}\n >\n {metadata}\n </Text>\n )}\n <span\n id={statusId}\n role=\"status\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n className={cn(\n description ? 'min-w-0 max-w-full' : 'sr-only',\n description &&\n status === 'error' &&\n !stackedText &&\n 'max-w-[75%] shrink-0 grow'\n )}\n >\n {description && (\n <Text\n as=\"span\"\n variant=\"xs\"\n title={description}\n className={cn(\n 'block truncate text-tertiary',\n status === 'error' && 'text-error-secondary'\n )}\n >\n <span className=\"sr-only\">{name}: </span>\n {description}\n </Text>\n )}\n </span>\n </span>\n </span>\n );\n\n return (\n <div\n ref={ref}\n role=\"group\"\n aria-label={name}\n {...props}\n onClick={(event) => {\n // Extend the preview button to the card's padding and gaps only.\n if (onOpen && event.target === event.currentTarget) {\n event.stopPropagation();\n onOpen();\n }\n }}\n className={cn(\n 'box-border flex min-w-0 max-w-full shrink-0 items-center gap-space-2 rounded-xs border border-subtle bg-surface-level-1',\n isThumbnail\n ? [\n sizeStyles.thumbnail,\n 'group/attachment relative flex-col items-stretch',\n size === 'sm' ? 'p-space-1' : 'p-space-2',\n ]\n : [sizeStyles.height, sizeStyles.padding],\n status === 'error' && 'border-error',\n onOpen && 'cursor-pointer',\n className\n )}\n >\n {onOpen ? (\n <Button\n type=\"button\"\n color=\"secondary\"\n variant=\"plain\"\n aria-label={openLabel}\n aria-describedby={description ? statusId : undefined}\n className={cn(\n 'min-w-0 flex-1 justify-start p-0 text-left',\n isThumbnail\n ? 'h-auto w-full max-w-full flex-none whitespace-normal'\n : 'h-full'\n )}\n onClick={(event) => {\n event.stopPropagation();\n onOpen();\n }}\n >\n {content}\n </Button>\n ) : (\n content\n )}\n {isThumbnail && removeButton}\n {(actions != null || (!isThumbnail && onRemove)) && (\n <fieldset\n aria-label={`Actions for ${name}`}\n className={cn(\n 'm-0 flex min-w-0 max-w-full shrink-0 items-center justify-end gap-space-1 border-0 p-0',\n isThumbnail && 'flex-wrap'\n )}\n onClick={(event) => event.stopPropagation()}\n >\n {actions}\n {!isThumbnail && removeButton}\n </fieldset>\n )}\n </div>\n );\n }\n);\n"],"mappings":"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"}

package/dist/components/Attachment/AttachmentList.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import type { ComponentPropsWithRef } from 'react';
+export interface AttachmentListProps extends ComponentPropsWithRef<'ul'> {
+    layout?: 'wrap' | 'scroll' | 'stack';
+}
+export declare const AttachmentList: import("react").ForwardRefExoticComponent<Omit<AttachmentListProps, "ref"> & import("react").RefAttributes<HTMLUListElement>>;

package/dist/components/Attachment/AttachmentList.js ADDED Viewed

@@ -0,0 +1,32 @@
+import { cn } from "../../utils/cn.js";
+import { Children, Fragment, forwardRef, isValidElement } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/components/src/components/Attachment/AttachmentList.tsx
+function flattenAttachments(children, parentKeys = []) {
+	return Children.toArray(children).flatMap((child, index) => {
+		const keys = [...parentKeys, isValidElement(child) && child.key != null ? String(child.key) : String(index)];
+		if (isValidElement(child) && child.type === Fragment) return flattenAttachments(child.props.children, keys);
+		return [{
+			key: JSON.stringify(keys),
+			child
+		}];
+	});
+}
+var AttachmentList = forwardRef(function AttachmentList({ children, layout = "wrap", className, "aria-label": ariaLabel = "Attachments", ...props }, ref) {
+	const items = flattenAttachments(children);
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx("ul", {
+		...props,
+		ref,
+		"aria-label": ariaLabel,
+		className: cn("m-0 flex min-w-0 list-none gap-space-2 p-0", layout === "wrap" && "flex-wrap", layout === "scroll" && "overflow-x-auto overscroll-x-contain", layout === "stack" && "flex-col", className),
+		children: items.map(({ key, child }) => /* @__PURE__ */ jsx("li", {
+			className: cn("min-w-0 max-w-full", layout === "scroll" && "shrink-0"),
+			children: child
+		}, key))
+	});
+});
+//#endregion
+export { AttachmentList };
+//# sourceMappingURL=AttachmentList.js.map

package/dist/components/Attachment/AttachmentList.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"AttachmentList.js","names":[],"sources":["../../../src/components/Attachment/AttachmentList.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\nimport { Children, Fragment, forwardRef, isValidElement } from 'react';\n\nimport { cn } from '../../utils/cn';\n\nexport interface AttachmentListProps extends ComponentPropsWithRef<'ul'> {\n layout?: 'wrap' | 'scroll' | 'stack';\n}\n\nfunction flattenAttachments(\n children: ReactNode,\n parentKeys: string[] = []\n): { key: string; child: ReactNode }[] {\n return Children.toArray(children).flatMap((child, index) => {\n const keys = [\n ...parentKeys,\n isValidElement(child) && child.key != null\n ? String(child.key)\n : String(index),\n ];\n if (\n isValidElement<{ children?: ReactNode }>(child) &&\n child.type === Fragment\n ) {\n return flattenAttachments(child.props.children, keys);\n }\n\n // Keep keys scoped to their fragments, even when sibling keys repeat.\n return [{ key: JSON.stringify(keys), child }];\n });\n}\n\nexport const AttachmentList = forwardRef<HTMLUListElement, AttachmentListProps>(\n function AttachmentList(\n {\n children,\n layout = 'wrap',\n className,\n 'aria-label': ariaLabel = 'Attachments',\n ...props\n },\n ref\n ) {\n const items = flattenAttachments(children);\n if (items.length === 0) {\n return null;\n }\n\n return (\n <ul\n {...props}\n ref={ref}\n aria-label={ariaLabel}\n className={cn(\n 'm-0 flex min-w-0 list-none gap-space-2 p-0',\n layout === 'wrap' && 'flex-wrap',\n layout === 'scroll' && 'overflow-x-auto overscroll-x-contain',\n layout === 'stack' && 'flex-col',\n className\n )}\n >\n {items.map(({ key, child }) => (\n <li\n key={key}\n className={cn(\n 'min-w-0 max-w-full',\n layout === 'scroll' && 'shrink-0'\n )}\n >\n {child}\n </li>\n ))}\n </ul>\n );\n }\n);\n"],"mappings":";;;;AASA,SAAS,mBACP,UACA,aAAuB,CAAC,GACa;CACrC,OAAO,SAAS,QAAQ,QAAQ,CAAC,CAAC,SAAS,OAAO,UAAU;EAC1D,MAAM,OAAO,CACX,GAAG,YACH,eAAe,KAAK,KAAK,MAAM,OAAO,OAClC,OAAO,MAAM,GAAG,IAChB,OAAO,KAAK,CAClB;EACA,IACE,eAAyC,KAAK,KAC9C,MAAM,SAAS,UAEf,OAAO,mBAAmB,MAAM,MAAM,UAAU,IAAI;EAItD,OAAO,CAAC;GAAE,KAAK,KAAK,UAAU,IAAI;GAAG;EAAM,CAAC;CAC9C,CAAC;AACH;AAEA,IAAa,iBAAiB,WAC5B,SAAS,eACP,EACE,UACA,SAAS,QACT,WACA,cAAc,YAAY,eAC1B,GAAG,SAEL,KACA;CACA,MAAM,QAAQ,mBAAmB,QAAQ;CACzC,IAAI,MAAM,WAAW,GACnB,OAAO;CAGT,OACE,oBAAC,MAAD;EACE,GAAI;EACC;EACL,cAAY;EACZ,WAAW,GACT,8CACA,WAAW,UAAU,aACrB,WAAW,YAAY,wCACvB,WAAW,WAAW,YACtB,SACF;EAEC,UAAA,MAAM,KAAK,EAAE,KAAK,YACjB,oBAAC,MAAD;GAEE,WAAW,GACT,sBACA,WAAW,YAAY,UACzB;GAEC,UAAA;EACC,GAPG,GAOH,CACL;CACC,CAAA;AAER,CACF"}

package/dist/components/Attachment/index.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export { Attachment } from './Attachment.js';
+export type { AttachmentProps } from './Attachment.js';
+export { AttachmentList } from './AttachmentList.js';
+export type { AttachmentListProps } from './AttachmentList.js';

package/dist/components/Attachment/index.js ADDED Viewed

@@ -0,0 +1,3 @@
+import { Attachment } from "./Attachment.js";
+import { AttachmentList } from "./AttachmentList.js";
+export { Attachment, AttachmentList };

package/dist/components/Attachment/render-attachment-icon.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import type { IconComponent } from '../../utils/icon-types.js';
+export declare const getAttachmentIcon: (contentType: string | null) => IconComponent | null;
+export declare const renderAttachmentIcon: (contentType: string | null, size: "small" | "default") => import("react").JSX.Element | null;

package/dist/components/Attachment/render-attachment-icon.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { n as renderAttachmentIcon, t as getAttachmentIcon } from "../../_chunks/render-attachment-icon-BWBEMxXZ.js";
2	+ export { getAttachmentIcon, renderAttachmentIcon };

package/dist/components/Avatar/Avatar.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { cn } from "../../utils/cn.js";
 import { VISUAL_ELEMENT_SIZES } from "../../utils/componentSizes.js";
-import { getColorByString } from "../../utils/get-color-by-string.js";
 import { Tooltip } from "../Tooltip/Tooltip.js";
+import { getColorByString } from "../../utils/get-color-by-string.js";
 import { forwardRef } from "react";
-import { sanitizeUrl } from "@braintree/sanitize-url";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { sanitizeUrl } from "@braintree/sanitize-url";
 //#region packages/components/src/components/Avatar/Avatar.tsx
 var BOX_SIZE = {
 	xxs: VISUAL_ELEMENT_SIZES.xxs.className,

package/dist/components/Badge/Badge.d.ts CHANGED Viewed

@@ -19,6 +19,8 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     children?: string | ReactElement<SVGSVGElement>;
     /** Font weight of text content */
     textWeight?: TextProps['weight'];
+    /** Muted, normal-weight text after the content, e.g. a count. */
+    suffix?: string;
 }
 declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
 export { Badge };

package/dist/components/Badge/Badge.js CHANGED Viewed

@@ -28,7 +28,7 @@ var SIZE_ICON_CLASSES = {
 	sm: "size-3",
 	md: "size-4"
 };
-var Badge = forwardRef(({ variant = "default", color, size, rounded = "full", leftDecorator: LeftIcon, rightDecorator: RightIcon, iconWeight, className, children, textWeight, ...props }, ref) => {
+var Badge = forwardRef(({ variant = "default", color, size, rounded = "full", leftDecorator: LeftIcon, rightDecorator: RightIcon, iconWeight, className, children, textWeight, suffix, ...props }, ref) => {
 	const isString = typeof children === "string";
 	const isManifestPreview = variant === "manifestPreview";
 	const resolvedColor = color ?? (isManifestPreview ? "plain" : "secondary");
@@ -67,6 +67,17 @@ var Badge = forwardRef(({ variant = "default", color, size, rounded = "full", le
 				className: "tracking-tight",
 				children
 			}) : children,
+			suffix && /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: ", "
+			}),
+			suffix && /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				variant: SIZE_TEXT_VARIANT[resolvedSize],
+				weight: "normal",
+				className: "tracking-tight text-tertiary",
+				children: suffix
+			}),
 			RightIcon && /* @__PURE__ */ jsx(RightIcon, {
 				"aria-hidden": true,
 				className: cn(SIZE_ICON_CLASSES[resolvedSize], "flex-shrink-0"),

package/dist/components/Badge/Badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Badge.js","names":[],"sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { forwardRef } from 'react';\n\nimport { cn } from '../../utils/cn';\nimport type { IconComponent, IconWeight } from '../../utils/icon-types';\nimport { Text, type TextProps } from '../Text';\n\n// Only allow string or SVG icon as children\ninterface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n /** Badge style preset /\n variant?: 'default' \| 'manifestPreview';\n rounded?: 'full' \| 'none' \| 'xs' \| 'sm';\n /* Badge color scheme /\n color?:\n \| 'primary'\n \| 'secondary'\n \| 'success'\n \| 'error'\n \| 'warning'\n \| 'special'\n \| 'plain';\n /* Text-label height. /\n size?: 'xxs' \| 'xs' \| 'sm' \| 'md';\n /* Left decorator icon /\n leftDecorator?: IconComponent;\n\n /* Right decorator icon /\n rightDecorator?: IconComponent;\n\n /* Phosphor weight used for decorator icons. /\n iconWeight?: IconWeight;\n\n /* Badge content /\n children?: string \| ReactElement<SVGSVGElement>;\n\n /* Font weight of text content /\n textWeight?: TextProps['weight'];\n}\n\ntype BadgeSize = NonNullable<BadgeProps['size']>;\n\n/* Exact outer heights: xxs/xs=16px, sm=20px, md=24px. */\nconst SIZE_BOX_CLASSES: Record<BadgeSize, string> = {\n xxs: 'h-4 gap-space-1 px-space-1',\n xs: 'h-4 gap-space-1 px-space-1',\n sm: 'h-5 gap-space-1 px-space-1',\n md: 'h-6 gap-space-1 px-space-2',\n};\n\nconst SIZE_TEXT_VARIANT: Record<BadgeSize, 'xs' \| 'sm'> = {\n xxs: 'xs',\n xs: 'xs',\n sm: 'sm',\n md: 'sm',\n};\n\nconst SIZE_DEFAULT_WEIGHT: Record<\n BadgeSize,\n NonNullable<TextProps['weight']>\n> = {\n xxs: 'normal',\n xs: 'medium',\n sm: 'medium',\n md: 'medium',\n};\n\nconst SIZE_ICON_CLASSES: Record<BadgeSize, string> = {\n xxs: 'size-3',\n xs: 'size-3',\n sm: 'size-3',\n md: 'size-4',\n};\n\nconst Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n (\n {\n variant = 'default',\n color,\n size,\n rounded = 'full',\n leftDecorator: LeftIcon,\n rightDecorator: RightIcon,\n iconWeight,\n className,\n children,\n textWeight,\n ...props\n },\n ref\n ) => {\n const isString = typeof children === 'string';\n const isManifestPreview = variant === 'manifestPreview';\n const resolvedColor = color ?? (isManifestPreview ? 'plain' : 'secondary');\n const resolvedSize = size ?? (isManifestPreview ? 'sm' : 'md');\n const resolvedTextWeight = textWeight ?? SIZE_DEFAULT_WEIGHT[resolvedSize];\n const baseStyles = cn(\n 'box-border inline-flex items-center justify-center border border-transparent',\n SIZE_BOX_CLASSES[resolvedSize],\n {\n // TODO: we're only going to have 2 variants for the rounded prop. need to remove/rename the rounded prop\n 'rounded-xs':\n rounded === 'xs' \|\| rounded === 'sm' \|\| rounded === 'none',\n 'rounded-full': rounded === 'full',\n border: resolvedColor === 'plain',\n }\n );\n\n const getColorStyles = () => {\n switch (resolvedColor) {\n case 'primary':\n return 'bg-brand-secondary text-brand-primary';\n case 'success':\n return 'bg-success-secondary text-success-secondary';\n case 'error':\n return 'bg-error-secondary text-error-secondary';\n case 'warning':\n return 'bg-warning-secondary text-warning-secondary';\n case 'special':\n return 'bg-ls-acid-50 text-ls-acid-700 dark:bg-ls-acid-200';\n case 'plain':\n return 'bg-primary text-primary border-secondary';\n case 'secondary':\n default:\n return 'bg-tertiary text-secondary';\n }\n };\n\n return (\n <span\n ref={ref}\n className={cn(\n baseStyles,\n getColorStyles(),\n isManifestPreview &&\n 'min-w-0 max-w-full overflow-hidden whitespace-nowrap [&>span]:truncate',\n isManifestPreview && color == null && 'bg-transparent text-secondary',\n className\n )}\n {...props}\n >\n {LeftIcon && (\n <LeftIcon\n aria-hidden\n className={cn(SIZE_ICON_CLASSES[resolvedSize], 'flex-shrink-0')}\n weight={iconWeight}\n />\n )}\n {isString ? (\n <Text\n as=\"span\"\n variant={SIZE_TEXT_VARIANT[resolvedSize]}\n weight={resolvedTextWeight}\n className=\"tracking-tight\"\n >\n {children}\n </Text>\n ) : (\n children\n )}\n {RightIcon && (\n <RightIcon\n aria-hidden\n className={cn(SIZE_ICON_CLASSES[resolvedSize], 'flex-shrink-0')}\n weight={iconWeight}\n />\n )}\n </span>\n );\n }\n);\n\nBadge.displayName = 'Badge';\n\nexport { Badge };\nexport type { BadgeProps };\n"],"mappings":";;;;;;~~AA0CA~~,IAAM,mBAA8C;CAClD,KAAK;CACL,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,oBAAoD;CACxD,KAAK;CACL,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,sBAGF;CACF,KAAK;CACL,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,oBAA+C;CACnD,KAAK;CACL,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,QAAQ,YAEV,EACE,UAAU,WACV,OACA,MACA,UAAU,QACV,eAAe,UACf,gBAAgB,WAChB,YACA,WACA,UACA,YACA,GAAG,SAEL,QACG;CACH,MAAM,WAAW,OAAO,aAAa;CACrC,MAAM,oBAAoB,YAAY;CACtC,MAAM,gBAAgB,UAAU,oBAAoB,UAAU;CAC9D,MAAM,eAAe,SAAS,oBAAoB,OAAO;CACzD,MAAM,qBAAqB,cAAc,oBAAoB;CAC7D,MAAM,aAAa,GACjB,gFACA,iBAAiB,eACjB;EAEE,cACE,YAAY,QAAQ,YAAY,QAAQ,YAAY;EACtD,gBAAgB,YAAY;EAC5B,QAAQ,kBAAkB;CAC5B,CACF;CAEA,MAAM,uBAAuB;EAC3B,QAAQ,eAAR;GACE,KAAK,WACH,OAAO;GACT,KAAK,WACH,OAAO;GACT,KAAK,SACH,OAAO;GACT,KAAK,WACH,OAAO;GACT,KAAK,WACH,OAAO;GACT,KAAK,SACH,OAAO;GAET,SACE,OAAO;EACX;CACF;CAEA,OACE,qBAAC,QAAD;EACO;EACL,WAAW,GACT,YACA,eAAe,GACf,qBACE,0EACF,qBAAqB,SAAS,QAAQ,iCACtC,SACF;EACA,GAAI;EAVN,UAAA;GAYG,YACC,oBAAC,UAAD;IACE,eAAA;IACA,WAAW,GAAG,kBAAkB,eAAe,eAAe;IAC9D,QAAQ;GACT,CAAA;GAEF,WACC,oBAAC,MAAD;IACE,IAAG;IACH,SAAS,kBAAkB;IAC3B,QAAQ;IACR,WAAU;IAET;GACG,CAAA,IAEN;GAED,aACC,oBAAC,WAAD;IACE,eAAA;IACA,WAAW,GAAG,kBAAkB,eAAe,eAAe;IAC9D,QAAQ;GACT,CAAA;EAEC;;AAEV,CACF;AAEA,MAAM,cAAc"}
1	+ {"version":3,"file":"Badge.js","names":[],"sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { forwardRef } from 'react';\n\nimport { cn } from '../../utils/cn';\nimport type { IconComponent, IconWeight } from '../../utils/icon-types';\nimport { Text, type TextProps } from '../Text';\n\n// Only allow string or SVG icon as children\ninterface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n /** Badge style preset /\n variant?: 'default' \| 'manifestPreview';\n rounded?: 'full' \| 'none' \| 'xs' \| 'sm';\n /* Badge color scheme /\n color?:\n \| 'primary'\n \| 'secondary'\n \| 'success'\n \| 'error'\n \| 'warning'\n \| 'special'\n \| 'plain';\n /* Text-label height. /\n size?: 'xxs' \| 'xs' \| 'sm' \| 'md';\n /* Left decorator icon /\n leftDecorator?: IconComponent;\n\n /* Right decorator icon /\n rightDecorator?: IconComponent;\n\n /* Phosphor weight used for decorator icons. /\n iconWeight?: IconWeight;\n\n /* Badge content /\n children?: string \| ReactElement<SVGSVGElement>;\n\n /* Font weight of text content /\n textWeight?: TextProps['weight'];\n\n /* Muted, normal-weight text after the content, e.g. a count. /\n suffix?: string;\n}\n\ntype BadgeSize = NonNullable<BadgeProps['size']>;\n\n/* Exact outer heights: xxs/xs=16px, sm=20px, md=24px. */\nconst SIZE_BOX_CLASSES: Record<BadgeSize, string> = {\n xxs: 'h-4 gap-space-1 px-space-1',\n xs: 'h-4 gap-space-1 px-space-1',\n sm: 'h-5 gap-space-1 px-space-1',\n md: 'h-6 gap-space-1 px-space-2',\n};\n\nconst SIZE_TEXT_VARIANT: Record<BadgeSize, 'xs' \| 'sm'> = {\n xxs: 'xs',\n xs: 'xs',\n sm: 'sm',\n md: 'sm',\n};\n\nconst SIZE_DEFAULT_WEIGHT: Record<\n BadgeSize,\n NonNullable<TextProps['weight']>\n> = {\n xxs: 'normal',\n xs: 'medium',\n sm: 'medium',\n md: 'medium',\n};\n\nconst SIZE_ICON_CLASSES: Record<BadgeSize, string> = {\n xxs: 'size-3',\n xs: 'size-3',\n sm: 'size-3',\n md: 'size-4',\n};\n\nconst Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n (\n {\n variant = 'default',\n color,\n size,\n rounded = 'full',\n leftDecorator: LeftIcon,\n rightDecorator: RightIcon,\n iconWeight,\n className,\n children,\n textWeight,\n suffix,\n ...props\n },\n ref\n ) => {\n const isString = typeof children === 'string';\n const isManifestPreview = variant === 'manifestPreview';\n const resolvedColor = color ?? (isManifestPreview ? 'plain' : 'secondary');\n const resolvedSize = size ?? (isManifestPreview ? 'sm' : 'md');\n const resolvedTextWeight = textWeight ?? SIZE_DEFAULT_WEIGHT[resolvedSize];\n const baseStyles = cn(\n 'box-border inline-flex items-center justify-center border border-transparent',\n SIZE_BOX_CLASSES[resolvedSize],\n {\n // TODO: we're only going to have 2 variants for the rounded prop. need to remove/rename the rounded prop\n 'rounded-xs':\n rounded === 'xs' \|\| rounded === 'sm' \|\| rounded === 'none',\n 'rounded-full': rounded === 'full',\n border: resolvedColor === 'plain',\n }\n );\n\n const getColorStyles = () => {\n switch (resolvedColor) {\n case 'primary':\n return 'bg-brand-secondary text-brand-primary';\n case 'success':\n return 'bg-success-secondary text-success-secondary';\n case 'error':\n return 'bg-error-secondary text-error-secondary';\n case 'warning':\n return 'bg-warning-secondary text-warning-secondary';\n case 'special':\n return 'bg-ls-acid-50 text-ls-acid-700 dark:bg-ls-acid-200';\n case 'plain':\n return 'bg-primary text-primary border-secondary';\n case 'secondary':\n default:\n return 'bg-tertiary text-secondary';\n }\n };\n\n return (\n <span\n ref={ref}\n className={cn(\n baseStyles,\n getColorStyles(),\n isManifestPreview &&\n 'min-w-0 max-w-full overflow-hidden whitespace-nowrap [&>span]:truncate',\n isManifestPreview && color == null && 'bg-transparent text-secondary',\n className\n )}\n {...props}\n >\n {LeftIcon && (\n <LeftIcon\n aria-hidden\n className={cn(SIZE_ICON_CLASSES[resolvedSize], 'flex-shrink-0')}\n weight={iconWeight}\n />\n )}\n {isString ? (\n <Text\n as=\"span\"\n variant={SIZE_TEXT_VARIANT[resolvedSize]}\n weight={resolvedTextWeight}\n className=\"tracking-tight\"\n >\n {children}\n </Text>\n ) : (\n children\n )}\n {suffix && <span className=\"sr-only\">, </span>}\n {suffix && (\n <Text\n as=\"span\"\n variant={SIZE_TEXT_VARIANT[resolvedSize]}\n weight=\"normal\"\n className=\"tracking-tight text-tertiary\"\n >\n {suffix}\n </Text>\n )}\n {RightIcon && (\n <RightIcon\n aria-hidden\n className={cn(SIZE_ICON_CLASSES[resolvedSize], 'flex-shrink-0')}\n weight={iconWeight}\n />\n )}\n </span>\n );\n }\n);\n\nBadge.displayName = 'Badge';\n\nexport { Badge };\nexport type { BadgeProps };\n"],"mappings":";;;;;;AA6CA,IAAM,mBAA8C;CAClD,KAAK;CACL,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,oBAAoD;CACxD,KAAK;CACL,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,sBAGF;CACF,KAAK;CACL,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,oBAA+C;CACnD,KAAK;CACL,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAM,QAAQ,YAEV,EACE,UAAU,WACV,OACA,MACA,UAAU,QACV,eAAe,UACf,gBAAgB,WAChB,YACA,WACA,UACA,YACA,QACA,GAAG,SAEL,QACG;CACH,MAAM,WAAW,OAAO,aAAa;CACrC,MAAM,oBAAoB,YAAY;CACtC,MAAM,gBAAgB,UAAU,oBAAoB,UAAU;CAC9D,MAAM,eAAe,SAAS,oBAAoB,OAAO;CACzD,MAAM,qBAAqB,cAAc,oBAAoB;CAC7D,MAAM,aAAa,GACjB,gFACA,iBAAiB,eACjB;EAEE,cACE,YAAY,QAAQ,YAAY,QAAQ,YAAY;EACtD,gBAAgB,YAAY;EAC5B,QAAQ,kBAAkB;CAC5B,CACF;CAEA,MAAM,uBAAuB;EAC3B,QAAQ,eAAR;GACE,KAAK,WACH,OAAO;GACT,KAAK,WACH,OAAO;GACT,KAAK,SACH,OAAO;GACT,KAAK,WACH,OAAO;GACT,KAAK,WACH,OAAO;GACT,KAAK,SACH,OAAO;GAET,SACE,OAAO;EACX;CACF;CAEA,OACE,qBAAC,QAAD;EACO;EACL,WAAW,GACT,YACA,eAAe,GACf,qBACE,0EACF,qBAAqB,SAAS,QAAQ,iCACtC,SACF;EACA,GAAI;EAVN,UAAA;GAYG,YACC,oBAAC,UAAD;IACE,eAAA;IACA,WAAW,GAAG,kBAAkB,eAAe,eAAe;IAC9D,QAAQ;GACT,CAAA;GAEF,WACC,oBAAC,MAAD;IACE,IAAG;IACH,SAAS,kBAAkB;IAC3B,QAAQ;IACR,WAAU;IAET;GACG,CAAA,IAEN;GAED,UAAU,oBAAC,QAAD;IAAM,WAAU;IAAU,UAAA;GAAQ,CAAA;GAC5C,UACC,oBAAC,MAAD;IACE,IAAG;IACH,SAAS,kBAAkB;IAC3B,QAAO;IACP,WAAU;IAET,UAAA;GACG,CAAA;GAEP,aACC,oBAAC,WAAD;IACE,eAAA;IACA,WAAW,GAAG,kBAAkB,eAAe,eAAe;IAC9D,QAAQ;GACT,CAAA;EAEC;;AAEV,CACF;AAEA,MAAM,cAAc"}

package/dist/components/Banner/Banner.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { cn } from "../../utils/cn.js";
 import { Text } from "../Text/Text.js";
-import { XIcon } from "../../icons/PaddedPhosphorIcons.js";
 import { Icon } from "../Icon/Icon.js";
 import { IconButton } from "../IconButton/IconButton.js";
+import { XIcon } from "../../icons/PaddedPhosphorIcons.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckCircleIcon } from "@phosphor-icons/react/dist/ssr/CheckCircle";

package/dist/components/Button/Button.js CHANGED Viewed

@@ -2,8 +2,8 @@ import { cn } from "../../utils/cn.js";
 import { CONTROL_SIZES } from "../../utils/componentSizes.js";
 import { Text } from "../Text/Text.js";
 import { Badge } from "../Badge/Badge.js";
-import { buttonStyleMap } from "./constants.js";
 import { Spinner } from "../Spinner/Spinner.js";
+import { buttonStyleMap } from "./constants.js";
 import { cloneElement, forwardRef, isValidElement } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region packages/components/src/components/Button/Button.tsx

package/dist/components/Button/constants.js CHANGED Viewed

@@ -8,8 +8,8 @@ var buttonStyleMap = {
 	"primary-outlined-disabled": "bg-brand-muted border border-transparent text-brand-disabled",
 	"primary-plain-disabled": "bg-brand-muted border border-transparent text-brand-disabled",
 	"primary-underlined-disabled": "bg-transparent text-brand-disabled border border-transparent",
-	"secondary-normal-enabled": "bg-elevated text-secondary border border-subtle dark:border-muted hover:bg-elevated-hover/80",
-	"secondary-outlined-enabled": "bg-elevated text-secondary border border-subtle dark:border-muted hover:bg-elevated-hover/80",
+	"secondary-normal-enabled": "bg-elevated text-secondary border border-subtle hover:bg-elevated-hover/80",
+	"secondary-outlined-enabled": "bg-elevated text-secondary border border-subtle hover:bg-elevated-hover/80",
 	"secondary-plain-enabled": "bg-transparent text-secondary border border-transparent hover:bg-elevated-hover/80 dark:hover:bg-elevated-hover/40",
 	"secondary-underlined-enabled": "text-secondary hover:text-secondary-hover border-b button-secondary-underlined-border hover:button-secondary-underlined-border-hover",
 	"secondary-normal-disabled": "bg-surface-level-1-hover dark:bg-disabled border border-transparent text-disabled",

package/dist/components/Button/constants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"constants.js","names":[],"sources":["../../../src/components/Button/constants.ts"],"sourcesContent":["// Define styles for each specific combination\nexport const buttonStyleMap = {\n // Primary variants - enabled\n 'primary-normal-enabled':\n 'button-primary-bg button-primary-foreground border button-primary-border hover:border-transparent hover:button-primary-bg-hover dark:hover:button-primary-bg-hover dark:hover:border-transparent',\n 'primary-outlined-enabled':\n 'bg-transparent text-brand-secondary border border-brand-strong hover:text-brand-primary hover:bg-brand-muted dark:border-brand dark:hover:bg-brand-subtle dark:hover:button-primary-border dark:hover:text-brand-primary',\n 'primary-plain-enabled':\n 'bg-transparent text-brand-400 dark:text-brand-700 border border-transparent hover:text-brand-secondary dark:hover:text-brand-primary hover:bg-brand-muted/80',\n 'primary-underlined-enabled':\n 'bg-transparent button-primary-underlined-foreground border-b button-primary-underlined-border hover:button-primary-underlined-border-hover hover:button-primary-underlined-foreground-hover',\n\n // Primary variants - disabled\n 'primary-normal-disabled':\n 'bg-brand-muted border border-brand-disabled text-brand-disabled',\n 'primary-outlined-disabled':\n 'bg-brand-muted border border-transparent text-brand-disabled',\n 'primary-plain-disabled':\n 'bg-brand-muted border border-transparent text-brand-disabled',\n 'primary-underlined-disabled':\n 'bg-transparent text-brand-disabled border border-transparent',\n\n // Secondary variants - enabled\n 'secondary-normal-enabled':\n 'bg-elevated text-secondary border border-subtle ~~dark:border-muted~~ hover:bg-elevated-hover/80',\n 'secondary-outlined-enabled':\n 'bg-elevated text-secondary border border-subtle ~~dark:border-muted~~ hover:bg-elevated-hover/80',\n 'secondary-plain-enabled':\n 'bg-transparent text-secondary border border-transparent hover:bg-elevated-hover/80 dark:hover:bg-elevated-hover/40',\n 'secondary-underlined-enabled':\n 'text-secondary hover:text-secondary-hover border-b button-secondary-underlined-border hover:button-secondary-underlined-border-hover',\n\n // Secondary variants - disabled\n 'secondary-normal-disabled':\n 'bg-surface-level-1-hover dark:bg-disabled border border-transparent text-disabled',\n 'secondary-outlined-disabled':\n 'bg-surface-level-1-hover dark:bg-disabled border border-transparent text-disabled',\n 'secondary-plain-disabled':\n 'bg-surface-level-1-hover dark:bg-disabled border border-transparent text-disabled',\n 'secondary-underlined-disabled': 'text-disabled border border-transparent',\n\n // Error variants - enabled\n 'error-normal-enabled':\n 'bg-error-strong dark:bg-error-secondary text-white border border-red-600 hover:bg-red-700 dark:hover:bg-error',\n 'error-outlined-enabled':\n 'bg-transparent text-error-secondary border border-red-700 hover:bg-error',\n 'error-plain-enabled':\n 'bg-transparent text-error-secondary border border-transparent hover:bg-error/80',\n 'error-underlined-enabled':\n 'bg-transparent text-error-secondary border-b button-error-underlined-border hover:button-error-underlined-border-hover hover:button-error-underlined-foreground-hover',\n\n // Error variants - disabled\n 'error-normal-disabled':\n 'bg-error border border-transparent button-error-disabled-foreground',\n 'error-outlined-disabled':\n 'bg-transparent button-error-disabled-foreground border button-error-disabled-border',\n 'error-plain-disabled':\n 'bg-transparent button-error-disabled-foreground border border-transparent',\n 'error-underlined-disabled':\n 'bg-transparent button-error-disabled-foreground border border-transparent',\n};\n"],"mappings":";AACA,IAAa,iBAAiB;CAE5B,0BACE;CACF,4BACE;CACF,yBACE;CACF,8BACE;CAGF,2BACE;CACF,6BACE;CACF,0BACE;CACF,+BACE;CAGF,4BACE;CACF,8BACE;CACF,2BACE;CACF,gCACE;CAGF,6BACE;CACF,+BACE;CACF,4BACE;CACF,iCAAiC;CAGjC,wBACE;CACF,0BACE;CACF,uBACE;CACF,4BACE;CAGF,yBACE;CACF,2BACE;CACF,wBACE;CACF,6BACE;AACJ"}
1	+ {"version":3,"file":"constants.js","names":[],"sources":["../../../src/components/Button/constants.ts"],"sourcesContent":["// Define styles for each specific combination\nexport const buttonStyleMap = {\n // Primary variants - enabled\n 'primary-normal-enabled':\n 'button-primary-bg button-primary-foreground border button-primary-border hover:border-transparent hover:button-primary-bg-hover dark:hover:button-primary-bg-hover dark:hover:border-transparent',\n 'primary-outlined-enabled':\n 'bg-transparent text-brand-secondary border border-brand-strong hover:text-brand-primary hover:bg-brand-muted dark:border-brand dark:hover:bg-brand-subtle dark:hover:button-primary-border dark:hover:text-brand-primary',\n 'primary-plain-enabled':\n 'bg-transparent text-brand-400 dark:text-brand-700 border border-transparent hover:text-brand-secondary dark:hover:text-brand-primary hover:bg-brand-muted/80',\n 'primary-underlined-enabled':\n 'bg-transparent button-primary-underlined-foreground border-b button-primary-underlined-border hover:button-primary-underlined-border-hover hover:button-primary-underlined-foreground-hover',\n\n // Primary variants - disabled\n 'primary-normal-disabled':\n 'bg-brand-muted border border-brand-disabled text-brand-disabled',\n 'primary-outlined-disabled':\n 'bg-brand-muted border border-transparent text-brand-disabled',\n 'primary-plain-disabled':\n 'bg-brand-muted border border-transparent text-brand-disabled',\n 'primary-underlined-disabled':\n 'bg-transparent text-brand-disabled border border-transparent',\n\n // Secondary variants - enabled\n 'secondary-normal-enabled':\n 'bg-elevated text-secondary border border-subtle hover:bg-elevated-hover/80',\n 'secondary-outlined-enabled':\n 'bg-elevated text-secondary border border-subtle hover:bg-elevated-hover/80',\n 'secondary-plain-enabled':\n 'bg-transparent text-secondary border border-transparent hover:bg-elevated-hover/80 dark:hover:bg-elevated-hover/40',\n 'secondary-underlined-enabled':\n 'text-secondary hover:text-secondary-hover border-b button-secondary-underlined-border hover:button-secondary-underlined-border-hover',\n\n // Secondary variants - disabled\n 'secondary-normal-disabled':\n 'bg-surface-level-1-hover dark:bg-disabled border border-transparent text-disabled',\n 'secondary-outlined-disabled':\n 'bg-surface-level-1-hover dark:bg-disabled border border-transparent text-disabled',\n 'secondary-plain-disabled':\n 'bg-surface-level-1-hover dark:bg-disabled border border-transparent text-disabled',\n 'secondary-underlined-disabled': 'text-disabled border border-transparent',\n\n // Error variants - enabled\n 'error-normal-enabled':\n 'bg-error-strong dark:bg-error-secondary text-white border border-red-600 hover:bg-red-700 dark:hover:bg-error',\n 'error-outlined-enabled':\n 'bg-transparent text-error-secondary border border-red-700 hover:bg-error',\n 'error-plain-enabled':\n 'bg-transparent text-error-secondary border border-transparent hover:bg-error/80',\n 'error-underlined-enabled':\n 'bg-transparent text-error-secondary border-b button-error-underlined-border hover:button-error-underlined-border-hover hover:button-error-underlined-foreground-hover',\n\n // Error variants - disabled\n 'error-normal-disabled':\n 'bg-error border border-transparent button-error-disabled-foreground',\n 'error-outlined-disabled':\n 'bg-transparent button-error-disabled-foreground border button-error-disabled-border',\n 'error-plain-disabled':\n 'bg-transparent button-error-disabled-foreground border border-transparent',\n 'error-underlined-disabled':\n 'bg-transparent button-error-disabled-foreground border border-transparent',\n};\n"],"mappings":";AACA,IAAa,iBAAiB;CAE5B,0BACE;CACF,4BACE;CACF,yBACE;CACF,8BACE;CAGF,2BACE;CACF,6BACE;CACF,0BACE;CACF,+BACE;CAGF,4BACE;CACF,8BACE;CACF,2BACE;CACF,gCACE;CAGF,6BACE;CACF,+BACE;CACF,4BACE;CACF,iCAAiC;CAGjC,wBACE;CACF,0BACE;CACF,uBACE;CACF,4BACE;CAGF,yBACE;CACF,2BACE;CACF,wBACE;CACF,6BACE;AACJ"}

package/dist/components/ChartCard/ChartCard.d.ts CHANGED Viewed

@@ -9,10 +9,7 @@ export type ChartCardState = 'ready' | 'loading' | 'error';
 export interface ChartCardProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     /** Visible chart title rendered in the card header. */
     title: ReactNode;
-    /**
-     * Optional secondary text rendered beneath the title. Truncated to a single
-     * line to match the title's overflow behavior.
-     */
+    /** Optional secondary text rendered beneath the title. */
     description?: ReactNode;
     /** Visual state of the card. Fetching and retry behavior remain external. */
     state?: ChartCardState;

package/dist/components/ChartCard/ChartCard.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { cn } from "../../utils/cn.js";
 import { Text } from "../Text/Text.js";
-import { DotsSixVerticalIcon, XCloseIcon } from "../../icons/PaddedPhosphorIcons.js";
 import { IconButton } from "../IconButton/IconButton.js";
+import { DotsSixVerticalIcon, XCloseIcon } from "../../icons/PaddedPhosphorIcons.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "../DropdownMenu/DropdownMenu.js";
 import { EmptyState } from "../EmptyState/EmptyState.js";
 import { Skeleton } from "../Skeleton/Skeleton.js";
@@ -97,7 +97,7 @@ var ChartCard = forwardRef(({ title, description, children, state = "ready", ske
 					}), description != null && description !== "" && /* @__PURE__ */ jsx(Text, {
 						variant: "xs",
 						color: "quaternary",
-						className: "min-w-0 truncate",
+						className: "min-w-0 break-words",
 						children: description
 					})]
 				})]

package/dist/components/ChartCard/ChartCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChartCard.js","names":[],"sources":["../../../src/components/ChartCard/ChartCard.tsx"],"sourcesContent":["import {\n forwardRef,\n useId,\n type ButtonHTMLAttributes,\n type HTMLAttributes,\n type ReactNode,\n} from 'react';\n\nimport { ArrowsInSimpleIcon } from '@phosphor-icons/react/dist/ssr/ArrowsInSimple';\nimport { ArrowsOutSimpleIcon } from '@phosphor-icons/react/dist/ssr/ArrowsOutSimple';\nimport { DotsThreeVerticalIcon } from '@phosphor-icons/react/dist/ssr/DotsThreeVertical';\nimport { WarningIcon } from '@phosphor-icons/react/dist/ssr/Warning';\n\nimport {\n DotsSixVerticalIcon,\n XCloseIcon,\n} from '../../icons/PaddedPhosphorIcons';\nimport { cn } from '../../utils/cn';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuTrigger,\n} from '../DropdownMenu';\nimport { EmptyState } from '../EmptyState';\nimport { IconButton } from '../IconButton';\nimport { Skeleton } from '../Skeleton';\nimport { Text } from '../Text';\nimport {\n ChartCardSkeleton,\n type ChartCardSkeletonVariant,\n} from './ChartCardSkeleton';\n\nexport interface ChartCardActionButtonProps extends Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n 'children' \| 'color'\n> {\n /** Accessible label and tooltip text. /\n label?: string;\n}\n\nexport type ChartCardVariant = 'default' \| 'full-width';\n\nexport type ChartCardState = 'ready' \| 'loading' \| 'error';\n\nconst ChartCardLoadingState = () => (\n <div\n role=\"status\"\n className=\"flex min-h-[13.5rem] flex-1 flex-col gap-space-2\"\n >\n <div className=\"relative min-h-0 flex-1\">\n <Skeleton className=\"size-full rounded-md\" />\n <Text\n variant=\"sm\"\n color=\"placeholder\"\n className=\"absolute inset-0 flex items-center justify-center\"\n >\n Loading...\n </Text>\n </div>\n <div aria-hidden=\"true\" className=\"flex min-w-0 items-center gap-space-2\">\n <Skeleton className=\"h-4 w-20\" />\n <Skeleton className=\"h-4 w-24\" />\n <Skeleton className=\"h-4 w-40\" />\n <Skeleton className=\"h-4 w-12\" />\n </div>\n </div>\n);\n\nconst ChartCardErrorState = () => (\n <div role=\"alert\" className=\"flex min-h-0 flex-1 rounded-md\">\n <EmptyState\n icon={WarningIcon}\n iconWeight=\"fill\"\n title=\"There was an error while loading the chart.\"\n description=\"Refresh the page to try again.\"\n className=\"flex-1\"\n size=\"sm\"\n />\n </div>\n);\n\nexport interface ChartCardProps extends Omit<\n HTMLAttributes<HTMLElement>,\n 'title'\n> {\n /* Visible chart title rendered in the card header. /\n title: ReactNode;\n /\n Optional secondary text rendered beneath the title. Truncated to a single\n * line to match the title's overflow behavior.\n /\n description?: ReactNode;\n /* Visual state of the card. Fetching and retry behavior remain external. /\n state?: ChartCardState;\n /* Chart-shaped loading state. Omit for the generic placeholder. /\n skeletonVariant?: ChartCardSkeletonVariant;\n /* Size the loading plot to match a compact or fixed-height chart. /\n skeletonClassName?: string;\n /* Layout state for the card. Full-width cards hide their move handle. /\n variant?: ChartCardVariant;\n /* Whether to show the chart's move handle. Requires dragHandleProps. /\n isMovable?: boolean;\n /\n Props for the move handle. Pass the listeners and attributes from the\n * dashboard's drag-and-drop implementation; the card owns only the visual\n * affordance.\n /\n dragHandleProps?: ChartCardActionButtonProps;\n /* Props for the optional expand button. Expansion state remains external. /\n expandButtonProps?: ChartCardActionButtonProps;\n /* Props for the optional close button. Closing behavior remains external. /\n closeButtonProps?: ChartCardActionButtonProps;\n /* Feature-owned controls rendered in the top-right header action area. /\n headerActions?: ReactNode;\n /\n Feature-owned menu items rendered inside the card's overflow menu. The\n * card supplies the trigger, positioning, and menu surface.\n /\n menuItems?: ReactNode;\n /* Classes applied to the chart-and-legend content region. /\n contentClassName?: string;\n}\n\n/\n A lightweight, chart-library-agnostic container for dashboard\n * visualizations. ChartCard standardizes the shell and header actions while\n * leaving data fetching, chart rendering, drag behavior, and expansion\n * behavior to the consuming feature.\n */\nexport const ChartCard = forwardRef<HTMLElement, ChartCardProps>(\n (\n {\n title,\n description,\n children,\n state = 'ready',\n skeletonVariant,\n skeletonClassName,\n variant = 'default',\n isMovable = false,\n dragHandleProps,\n expandButtonProps,\n closeButtonProps,\n headerActions,\n menuItems,\n className,\n contentClassName,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-busy': ariaBusy,\n ...props\n },\n ref\n ) => {\n const titleId = useId();\n const isFullWidth = variant === 'full-width';\n const isLoading = state === 'loading';\n const showDragHandle =\n isMovable && dragHandleProps != null && !isFullWidth && !isLoading;\n\n const {\n label: dragHandleLabel = 'Move chart',\n className: dragHandleClassName,\n onClick: onDragHandleClick,\n ...dragButtonProps\n } = dragHandleProps ?? {};\n const {\n label: expandButtonLabel = isFullWidth\n ? 'Minimize chart'\n : 'Expand chart',\n className: expandButtonClassName,\n onClick: onExpandClick,\n ...expandActionProps\n } = expandButtonProps ?? {};\n const {\n label: closeButtonLabel = 'Close chart',\n className: closeButtonClassName,\n onClick: onCloseClick,\n ...closeActionProps\n } = closeButtonProps ?? {};\n\n return (\n <section\n ref={ref}\n aria-labelledby={ariaLabelledBy ?? titleId}\n aria-busy={ariaBusy ?? (isLoading \|\| undefined)}\n className={cn(\n 'flex min-w-0 flex-col overflow-hidden border border-muted bg-surface-level-1',\n isFullWidth && 'w-full',\n className\n )}\n {...props}\n >\n <div className=\"flex min-w-0 items-center justify-between gap-space-3 pl-space-3 pr-space-2 pt-space-2\">\n <div className=\"flex min-w-0 flex-1 items-center\">\n {showDragHandle && (\n <IconButton\n {...dragButtonProps}\n icon={DotsSixVerticalIcon}\n iconWeight=\"regular\"\n label={dragHandleLabel}\n size=\"xs\"\n variant=\"plain\"\n color=\"secondary\"\n iconClassName=\"size-4 text-icon-primary\"\n className={cn(\n 'cursor-grab touch-none active:cursor-grabbing',\n dragHandleClassName\n )}\n onClick={(event) => {\n event.stopPropagation();\n onDragHandleClick?.(event);\n }}\n />\n )}\n <div className=\"flex min-w-0 flex-1 flex-col gap-space-1\">\n <Text\n id={titleId}\n as=\"h3\"\n variant=\"sm\"\n weight=\"semibold\"\n className=\"min-w-0 truncate\"\n >\n {title}\n </Text>\n {description != null && description !== '' && (\n <Text\n variant=\"xs\"\n color=\"quaternary\"\n className=\"min-w-0 truncate\"\n >\n {description}\n </Text>\n )}\n </div>\n </div>\n\n {!isLoading && (\n <div\n className={cn(\n 'flex shrink-0 items-center',\n Boolean(headerActions) && 'gap-space-1'\n )}\n >\n {!!headerActions && (\n <div className=\"flex items-center pr-space-1\">\n {headerActions}\n </div>\n )}\n {expandButtonProps != null && (\n <IconButton\n {...expandActionProps}\n icon={isFullWidth ? ArrowsInSimpleIcon : ArrowsOutSimpleIcon}\n label={expandButtonLabel}\n size=\"xs\"\n variant=\"plain\"\n color=\"secondary\"\n iconClassName=\"size-4 text-icon-primary\"\n className={expandButtonClassName}\n onClick={(event) => {\n event.stopPropagation();\n onExpandClick?.(event);\n }}\n />\n )}\n {!!menuItems && (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <IconButton\n icon={DotsThreeVerticalIcon}\n iconWeight=\"regular\"\n label=\"More chart actions\"\n size=\"xs\"\n variant=\"plain\"\n color=\"secondary\"\n iconClassName=\"size-4 text-icon-primary\"\n onClick={(event) => event.stopPropagation()}\n />\n </DropdownMenuTrigger>\n <DropdownMenuContent\n align=\"end\"\n preventClickThrough\n onClick={(event) => event.stopPropagation()}\n >\n {menuItems}\n </DropdownMenuContent>\n </DropdownMenu>\n )}\n {closeButtonProps != null && (\n <IconButton\n {...closeActionProps}\n icon={XCloseIcon}\n label={closeButtonLabel}\n size=\"xs\"\n variant=\"plain\"\n color=\"secondary\"\n iconClassName=\"text-icon-primary\"\n className={closeButtonClassName}\n onClick={(event) => {\n event.stopPropagation();\n onCloseClick?.(event);\n }}\n />\n )}\n </div>\n )}\n </div>\n\n <div\n className={cn(\n 'flex min-h-0 flex-1 flex-col gap-space-2 px-space-3 py-space-2',\n contentClassName\n )}\n >\n {state === 'loading' ? (\n skeletonVariant ? (\n <ChartCardSkeleton\n variant={skeletonVariant}\n className={skeletonClassName}\n />\n ) : (\n <ChartCardLoadingState />\n )\n ) : state === 'error' ? (\n <ChartCardErrorState />\n ) : (\n children\n )}\n </div>\n </section>\n );\n }\n);\n\nChartCard.displayName = 'ChartCard';\n"],"mappings":"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"}
1	+ {"version":3,"file":"ChartCard.js","names":[],"sources":["../../../src/components/ChartCard/ChartCard.tsx"],"sourcesContent":["import {\n forwardRef,\n useId,\n type ButtonHTMLAttributes,\n type HTMLAttributes,\n type ReactNode,\n} from 'react';\n\nimport { ArrowsInSimpleIcon } from '@phosphor-icons/react/dist/ssr/ArrowsInSimple';\nimport { ArrowsOutSimpleIcon } from '@phosphor-icons/react/dist/ssr/ArrowsOutSimple';\nimport { DotsThreeVerticalIcon } from '@phosphor-icons/react/dist/ssr/DotsThreeVertical';\nimport { WarningIcon } from '@phosphor-icons/react/dist/ssr/Warning';\n\nimport {\n DotsSixVerticalIcon,\n XCloseIcon,\n} from '../../icons/PaddedPhosphorIcons';\nimport { cn } from '../../utils/cn';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuTrigger,\n} from '../DropdownMenu';\nimport { EmptyState } from '../EmptyState';\nimport { IconButton } from '../IconButton';\nimport { Skeleton } from '../Skeleton';\nimport { Text } from '../Text';\nimport {\n ChartCardSkeleton,\n type ChartCardSkeletonVariant,\n} from './ChartCardSkeleton';\n\nexport interface ChartCardActionButtonProps extends Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n 'children' \| 'color'\n> {\n /** Accessible label and tooltip text. /\n label?: string;\n}\n\nexport type ChartCardVariant = 'default' \| 'full-width';\n\nexport type ChartCardState = 'ready' \| 'loading' \| 'error';\n\nconst ChartCardLoadingState = () => (\n <div\n role=\"status\"\n className=\"flex min-h-[13.5rem] flex-1 flex-col gap-space-2\"\n >\n <div className=\"relative min-h-0 flex-1\">\n <Skeleton className=\"size-full rounded-md\" />\n <Text\n variant=\"sm\"\n color=\"placeholder\"\n className=\"absolute inset-0 flex items-center justify-center\"\n >\n Loading...\n </Text>\n </div>\n <div aria-hidden=\"true\" className=\"flex min-w-0 items-center gap-space-2\">\n <Skeleton className=\"h-4 w-20\" />\n <Skeleton className=\"h-4 w-24\" />\n <Skeleton className=\"h-4 w-40\" />\n <Skeleton className=\"h-4 w-12\" />\n </div>\n </div>\n);\n\nconst ChartCardErrorState = () => (\n <div role=\"alert\" className=\"flex min-h-0 flex-1 rounded-md\">\n <EmptyState\n icon={WarningIcon}\n iconWeight=\"fill\"\n title=\"There was an error while loading the chart.\"\n description=\"Refresh the page to try again.\"\n className=\"flex-1\"\n size=\"sm\"\n />\n </div>\n);\n\nexport interface ChartCardProps extends Omit<\n HTMLAttributes<HTMLElement>,\n 'title'\n> {\n /* Visible chart title rendered in the card header. /\n title: ReactNode;\n /* Optional secondary text rendered beneath the title. /\n description?: ReactNode;\n /* Visual state of the card. Fetching and retry behavior remain external. /\n state?: ChartCardState;\n /* Chart-shaped loading state. Omit for the generic placeholder. /\n skeletonVariant?: ChartCardSkeletonVariant;\n /* Size the loading plot to match a compact or fixed-height chart. /\n skeletonClassName?: string;\n /* Layout state for the card. Full-width cards hide their move handle. /\n variant?: ChartCardVariant;\n /* Whether to show the chart's move handle. Requires dragHandleProps. /\n isMovable?: boolean;\n /\n Props for the move handle. Pass the listeners and attributes from the\n * dashboard's drag-and-drop implementation; the card owns only the visual\n * affordance.\n /\n dragHandleProps?: ChartCardActionButtonProps;\n /* Props for the optional expand button. Expansion state remains external. /\n expandButtonProps?: ChartCardActionButtonProps;\n /* Props for the optional close button. Closing behavior remains external. /\n closeButtonProps?: ChartCardActionButtonProps;\n /* Feature-owned controls rendered in the top-right header action area. /\n headerActions?: ReactNode;\n /\n Feature-owned menu items rendered inside the card's overflow menu. The\n * card supplies the trigger, positioning, and menu surface.\n /\n menuItems?: ReactNode;\n /* Classes applied to the chart-and-legend content region. /\n contentClassName?: string;\n}\n\n/\n A lightweight, chart-library-agnostic container for dashboard\n * visualizations. ChartCard standardizes the shell and header actions while\n * leaving data fetching, chart rendering, drag behavior, and expansion\n * behavior to the consuming feature.\n */\nexport const ChartCard = forwardRef<HTMLElement, ChartCardProps>(\n (\n {\n title,\n description,\n children,\n state = 'ready',\n skeletonVariant,\n skeletonClassName,\n variant = 'default',\n isMovable = false,\n dragHandleProps,\n expandButtonProps,\n closeButtonProps,\n headerActions,\n menuItems,\n className,\n contentClassName,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-busy': ariaBusy,\n ...props\n },\n ref\n ) => {\n const titleId = useId();\n const isFullWidth = variant === 'full-width';\n const isLoading = state === 'loading';\n const showDragHandle =\n isMovable && dragHandleProps != null && !isFullWidth && !isLoading;\n\n const {\n label: dragHandleLabel = 'Move chart',\n className: dragHandleClassName,\n onClick: onDragHandleClick,\n ...dragButtonProps\n } = dragHandleProps ?? {};\n const {\n label: expandButtonLabel = isFullWidth\n ? 'Minimize chart'\n : 'Expand chart',\n className: expandButtonClassName,\n onClick: onExpandClick,\n ...expandActionProps\n } = expandButtonProps ?? {};\n const {\n label: closeButtonLabel = 'Close chart',\n className: closeButtonClassName,\n onClick: onCloseClick,\n ...closeActionProps\n } = closeButtonProps ?? {};\n\n return (\n <section\n ref={ref}\n aria-labelledby={ariaLabelledBy ?? titleId}\n aria-busy={ariaBusy ?? (isLoading \|\| undefined)}\n className={cn(\n 'flex min-w-0 flex-col overflow-hidden border border-muted bg-surface-level-1',\n isFullWidth && 'w-full',\n className\n )}\n {...props}\n >\n <div className=\"flex min-w-0 items-center justify-between gap-space-3 pl-space-3 pr-space-2 pt-space-2\">\n <div className=\"flex min-w-0 flex-1 items-center\">\n {showDragHandle && (\n <IconButton\n {...dragButtonProps}\n icon={DotsSixVerticalIcon}\n iconWeight=\"regular\"\n label={dragHandleLabel}\n size=\"xs\"\n variant=\"plain\"\n color=\"secondary\"\n iconClassName=\"size-4 text-icon-primary\"\n className={cn(\n 'cursor-grab touch-none active:cursor-grabbing',\n dragHandleClassName\n )}\n onClick={(event) => {\n event.stopPropagation();\n onDragHandleClick?.(event);\n }}\n />\n )}\n <div className=\"flex min-w-0 flex-1 flex-col gap-space-1\">\n <Text\n id={titleId}\n as=\"h3\"\n variant=\"sm\"\n weight=\"semibold\"\n className=\"min-w-0 truncate\"\n >\n {title}\n </Text>\n {description != null && description !== '' && (\n <Text\n variant=\"xs\"\n color=\"quaternary\"\n className=\"min-w-0 break-words\"\n >\n {description}\n </Text>\n )}\n </div>\n </div>\n\n {!isLoading && (\n <div\n className={cn(\n 'flex shrink-0 items-center',\n Boolean(headerActions) && 'gap-space-1'\n )}\n >\n {!!headerActions && (\n <div className=\"flex items-center pr-space-1\">\n {headerActions}\n </div>\n )}\n {expandButtonProps != null && (\n <IconButton\n {...expandActionProps}\n icon={isFullWidth ? ArrowsInSimpleIcon : ArrowsOutSimpleIcon}\n label={expandButtonLabel}\n size=\"xs\"\n variant=\"plain\"\n color=\"secondary\"\n iconClassName=\"size-4 text-icon-primary\"\n className={expandButtonClassName}\n onClick={(event) => {\n event.stopPropagation();\n onExpandClick?.(event);\n }}\n />\n )}\n {!!menuItems && (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <IconButton\n icon={DotsThreeVerticalIcon}\n iconWeight=\"regular\"\n label=\"More chart actions\"\n size=\"xs\"\n variant=\"plain\"\n color=\"secondary\"\n iconClassName=\"size-4 text-icon-primary\"\n onClick={(event) => event.stopPropagation()}\n />\n </DropdownMenuTrigger>\n <DropdownMenuContent\n align=\"end\"\n preventClickThrough\n onClick={(event) => event.stopPropagation()}\n >\n {menuItems}\n </DropdownMenuContent>\n </DropdownMenu>\n )}\n {closeButtonProps != null && (\n <IconButton\n {...closeActionProps}\n icon={XCloseIcon}\n label={closeButtonLabel}\n size=\"xs\"\n variant=\"plain\"\n color=\"secondary\"\n iconClassName=\"text-icon-primary\"\n className={closeButtonClassName}\n onClick={(event) => {\n event.stopPropagation();\n onCloseClick?.(event);\n }}\n />\n )}\n </div>\n )}\n </div>\n\n <div\n className={cn(\n 'flex min-h-0 flex-1 flex-col gap-space-2 px-space-3 py-space-2',\n contentClassName\n )}\n >\n {state === 'loading' ? (\n skeletonVariant ? (\n <ChartCardSkeleton\n variant={skeletonVariant}\n className={skeletonClassName}\n />\n ) : (\n <ChartCardLoadingState />\n )\n ) : state === 'error' ? (\n <ChartCardErrorState />\n ) : (\n children\n )}\n </div>\n </section>\n );\n }\n);\n\nChartCard.displayName = 'ChartCard';\n"],"mappings":"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"}

package/dist/components/ChartCard/ChartCardSkeleton.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'react';
-export type ChartCardSkeletonVariant = 'bar' | 'line' | 'donut' | 'metric' | 'sparkline';
+export type ChartCardSkeletonVariant = 'bar' | 'line' | 'donut' | 'metric' | 'sparkline' | 'sankey';
 export declare const ChartCardSkeleton: ({ variant, className, style, }: {
     variant: ChartCardSkeletonVariant;
     className?: string;

package/dist/components/ChartCard/ChartCardSkeleton.js CHANGED Viewed

@@ -48,6 +48,43 @@ var ChartCardSkeleton = ({ variant, className, style }) => /* @__PURE__ */ jsxs(
 			className: "flex min-h-0 flex-1 items-center justify-center",
 			children: /* @__PURE__ */ jsx("div", { className: "size-32 animate-pulse rounded-full border-[1.5rem] border-muted motion-reduce:animate-none" })
 		}),
+		variant === "sankey" && /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: "relative min-h-0 flex-1",
+			children: /* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 400 192",
+				preserveAspectRatio: "none",
+				focusable: "false",
+				fill: "var(--bg-surface-level-3)",
+				className: "absolute inset-0 size-full animate-pulse motion-reduce:animate-none",
+				children: [/* @__PURE__ */ jsx("g", {
+					opacity: .5,
+					children: [0, 184].map((offset) => /* @__PURE__ */ jsxs("g", {
+						transform: `translate(${offset} 0)`,
+						children: [
+							/* @__PURE__ */ jsx("path", { d: "M20 12H196V60H20Z" }),
+							/* @__PURE__ */ jsx("path", { d: "M20 60C108 60 108 108 196 108V132C108 132 108 84 20 84Z" }),
+							/* @__PURE__ */ jsx("path", { d: "M20 108C108 108 108 60 196 60V84C108 84 108 132 20 132Z" }),
+							/* @__PURE__ */ jsx("path", { d: "M20 132H196V180H20Z" })
+						]
+					}, offset))
+				}), [
+					12,
+					196,
+					380
+				].map((x) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+					x,
+					y: 12,
+					width: 8,
+					height: 72
+				}), /* @__PURE__ */ jsx("rect", {
+					x,
+					y: 108,
+					width: 8,
+					height: 72
+				})] }, x))]
+			})
+		}),
 		variant === "metric" && /* @__PURE__ */ jsxs("div", {
 			className: "flex min-h-0 flex-1 flex-col justify-center gap-space-2",
 			children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-1/2 motion-reduce:animate-none" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-2/3 motion-reduce:animate-none" })]