@spear-ai/spectral 1.13.1 → 1.14.2

package/dist/Alert.js

@@ -1,61 +1,73 @@
-'use client'
-import './styles/main.css'
-import { CheckSquareIcon as e } from "./Icons/CheckSquareIcon.js";
-import { CloseCircleIcon as t } from "./Icons/CloseCircleIcon.js";
-import { InfoIcon as n } from "./Icons/InfoIcon.js";
-import { WarningIcon as r } from "./Icons/WarningIcon.js";
-import { t as i } from "./twUtils-BpqlKSeB.js";
-import { AlertBase as a, AlertCloseButton as o, AlertDescription as s, AlertHeader as c, AlertPortal as l, AlertTitle as u } from "./Alert/AlertBase.js";
-import { useCallback as d, useEffect as f, useRef as p } from "react";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
+'use client';
+import { CheckSquareIcon } from "./Icons/CheckSquareIcon.js";
+import { CloseCircleIcon } from "./Icons/CloseCircleIcon.js";
+import { InfoIcon } from "./Icons/InfoIcon.js";
+import { WarningIcon } from "./Icons/WarningIcon.js";
+import { cn } from "./utils/twUtils.js";
+import { AlertBase, AlertCloseButton, AlertDescription, AlertHeader, AlertPortal, AlertTitle } from "./Alert/AlertBase.js";
+import { useCallback, useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
 //#region src/components/Alert/Alert.tsx
-var g = ({ className: g, description: _, icon: v, id: y, onClose: b, title: x, variant: S = "default" }) => {
-	let C = p(null), w = v ?? {
-		info: /* @__PURE__ */ m(n, { className: "text-alert-info-text" }),
-		success: /* @__PURE__ */ m(e, { className: "text-alert-success-text" }),
-		warning: /* @__PURE__ */ m(r, { className: "text-alert-warning-text" }),
-		danger: /* @__PURE__ */ m(t, { className: "text-alert-danger-text" }),
+const Alert = ({ className, description, icon, id, onClose, title, variant = "default" }) => {
+	const wrapperRef = useRef(null);
+	const displayIcon = icon ?? {
+		info: /* @__PURE__ */ jsx(InfoIcon, { className: "text-alert-info-text" }),
+		success: /* @__PURE__ */ jsx(CheckSquareIcon, { className: "text-alert-success-text" }),
+		warning: /* @__PURE__ */ jsx(WarningIcon, { className: "text-alert-warning-text" }),
+		danger: /* @__PURE__ */ jsx(CloseCircleIcon, { className: "text-alert-danger-text" }),
 		default: null
-	}[S], T = d(() => {
-		C.current && (C.current.style.opacity = "0", setTimeout(() => {
-			C.current && (C.current.style.display = "none"), b?.();
-		}, 300));
-	}, [b]);
-	f(() => {
-		let e = (e) => {
-			e.key === "Escape" && C.current && (e.preventDefault(), T());
+	}[variant];
+	const closeAlert = useCallback(() => {
+		if (wrapperRef.current) {
+			wrapperRef.current.style.opacity = "0";
+			setTimeout(() => {
+				if (wrapperRef.current) wrapperRef.current.style.display = "none";
+				onClose?.();
+			}, 300);
+		}
+	}, [onClose]);
+	useEffect(() => {
+		const handleEscapeKey = (e) => {
+			if (e.key === "Escape" && wrapperRef.current) {
+				e.preventDefault();
+				closeAlert();
+			}
 		};
-		return document.addEventListener("keydown", e), () => {
-			document.removeEventListener("keydown", e);
+		document.addEventListener("keydown", handleEscapeKey);
+		return () => {
+			document.removeEventListener("keydown", handleEscapeKey);
 		};
-	}, [T]);
-	let E = d(() => {
-		T();
-	}, [T]);
-	return /* @__PURE__ */ m(l, { children: /* @__PURE__ */ h(a, {
-		"aria-live": new Set(["danger", "warning"]).has(S) ? "assertive" : "polite",
-		className: i("alert-wrapper transition-opacity duration-300", g),
+	}, [closeAlert]);
+	const handleClose = useCallback(() => {
+		closeAlert();
+	}, [closeAlert]);
+	return /* @__PURE__ */ jsx(AlertPortal, { children: /* @__PURE__ */ jsxs(AlertBase, {
+		"aria-live": new Set(["danger", "warning"]).has(variant) ? "assertive" : "polite",
+		className: cn("alert-wrapper transition-opacity duration-300", className),
 		"data-slot": "alert",
-		"data-variant": S,
-		id: y,
-		ref: C,
-		variant: S,
-		children: [/* @__PURE__ */ h(c, { children: [
-			w,
-			/* @__PURE__ */ m(u, {
-				variant: S,
-				children: x
+		"data-variant": variant,
+		id,
+		ref: wrapperRef,
+		variant,
+		children: [/* @__PURE__ */ jsxs(AlertHeader, { children: [
+			displayIcon,
+			/* @__PURE__ */ jsx(AlertTitle, {
+				variant,
+				children: title
 			}),
-			/* @__PURE__ */ m(o, {
-				onClick: E,
-				variant: S
+			/* @__PURE__ */ jsx(AlertCloseButton, {
+				onClick: handleClose,
+				variant
 			})
-		] }), _ && /* @__PURE__ */ m(s, {
-			className: w ? "ml-8" : void 0,
-			variant: S,
-			children: _
+		] }), description && /* @__PURE__ */ jsx(AlertDescription, {
+			className: displayIcon ? "ml-8" : void 0,
+			variant,
+			children: description
 		})]
 	}) });
 };
+
 //#endregion
-export { g as Alert };
+export { Alert };
+//# sourceMappingURL=Alert.js.map

package/dist/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","names":[],"sources":["../src/components/Alert/Alert.tsx"],"sourcesContent":["import { CheckSquareIcon, CloseCircleIcon, InfoIcon, WarningIcon } from '@components/Icons'\nimport { cn } from '@utils/twUtils'\nimport { type ReactNode, useCallback, useEffect, useRef } from 'react'\nimport { AlertBase, AlertCloseButton, AlertDescription, AlertHeader, AlertPortal, AlertTitle } from './AlertBase'\n\nexport interface AlertProps {\n  className?: string\n  description: string | ReactNode | undefined\n  icon?: ReactNode\n  id: string | undefined\n  onClose?: () => void\n  title: string | undefined\n  variant?: 'default' | 'info' | 'success' | 'warning' | 'danger'\n}\n\nexport const Alert = ({ className, description, icon, id, onClose, title, variant = 'default' }: AlertProps) => {\n  const wrapperRef = useRef<HTMLDivElement | null>(null)\n\n  const variantIconMap = {\n    info: <InfoIcon className='text-alert-info-text' />,\n    success: <CheckSquareIcon className='text-alert-success-text' />,\n    warning: <WarningIcon className='text-alert-warning-text' />,\n    danger: <CloseCircleIcon className='text-alert-danger-text' />,\n    default: null,\n  } as const\n\n  const displayIcon = icon ?? variantIconMap[variant]\n\n  const closeAlert = useCallback(() => {\n    if (wrapperRef.current) {\n      wrapperRef.current.style.opacity = '0'\n      setTimeout(() => {\n        if (wrapperRef.current) {\n          wrapperRef.current.style.display = 'none'\n        }\n        onClose?.()\n      }, 300)\n    }\n  }, [onClose])\n\n  useEffect(() => {\n    const handleEscapeKey = (e: globalThis.KeyboardEvent) => {\n      if (e.key === 'Escape' && wrapperRef.current) {\n        e.preventDefault()\n        closeAlert()\n      }\n    }\n\n    document.addEventListener('keydown', handleEscapeKey)\n\n    return () => {\n      document.removeEventListener('keydown', handleEscapeKey)\n    }\n  }, [closeAlert])\n\n  const handleClose = useCallback(() => {\n    closeAlert()\n  }, [closeAlert])\n\n  const URGENT_VARIANTS = new Set(['danger', 'warning'])\n  const ariaLive = URGENT_VARIANTS.has(variant) ? 'assertive' : 'polite'\n\n  return (\n    <AlertPortal>\n      <AlertBase aria-live={ariaLive} className={cn('alert-wrapper transition-opacity duration-300', className)} data-slot='alert' data-variant={variant} id={id} ref={wrapperRef} variant={variant}>\n        <AlertHeader>\n          {displayIcon}\n          <AlertTitle variant={variant}>{title}</AlertTitle>\n          <AlertCloseButton onClick={handleClose} variant={variant} />\n        </AlertHeader>\n        {description && (\n          <AlertDescription className={displayIcon ? 'ml-8' : undefined} variant={variant}>\n            {description}\n          </AlertDescription>\n        )}\n      </AlertBase>\n    </AlertPortal>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAeA,MAAa,SAAS,EAAE,WAAW,aAAa,MAAM,IAAI,SAAS,OAAO,UAAU,gBAA4B;CAC9G,MAAM,aAAa,OAA8B,KAAK;CAUtD,MAAM,cAAc,QAAQ;EAP1B,MAAM,oBAAC,UAAD,EAAU,WAAU,wBAAyB;EACnD,SAAS,oBAAC,iBAAD,EAAiB,WAAU,2BAA4B;EAChE,SAAS,oBAAC,aAAD,EAAa,WAAU,2BAA4B;EAC5D,QAAQ,oBAAC,iBAAD,EAAiB,WAAU,0BAA2B;EAC9D,SAAS;EAG+B,CAAC;CAE3C,MAAM,aAAa,kBAAkB;AACnC,MAAI,WAAW,SAAS;AACtB,cAAW,QAAQ,MAAM,UAAU;AACnC,oBAAiB;AACf,QAAI,WAAW,QACb,YAAW,QAAQ,MAAM,UAAU;AAErC,eAAW;MACV,IAAI;;IAER,CAAC,QAAQ,CAAC;AAEb,iBAAgB;EACd,MAAM,mBAAmB,MAAgC;AACvD,OAAI,EAAE,QAAQ,YAAY,WAAW,SAAS;AAC5C,MAAE,gBAAgB;AAClB,gBAAY;;;AAIhB,WAAS,iBAAiB,WAAW,gBAAgB;AAErD,eAAa;AACX,YAAS,oBAAoB,WAAW,gBAAgB;;IAEzD,CAAC,WAAW,CAAC;CAEhB,MAAM,cAAc,kBAAkB;AACpC,cAAY;IACX,CAAC,WAAW,CAAC;AAKhB,QACE,oBAAC,aAAD,YACE,qBAAC,WAAD;EAAW,aAJE,IADW,IAAI,CAAC,UAAU,UAAU,CACrB,CAAC,IAAI,QAAQ,GAAG,cAAc;EAI1B,WAAW,GAAG,iDAAiD,UAAU;EAAE,aAAU;EAAQ,gBAAc;EAAa;EAAI,KAAK;EAAqB;YAAtL,CACE,qBAAC,aAAD;GACG;GACD,oBAAC,YAAD;IAAqB;cAAU;IAAmB;GAClD,oBAAC,kBAAD;IAAkB,SAAS;IAAsB;IAAW;GAChD,KACb,eACC,oBAAC,kBAAD;GAAkB,WAAW,cAAc,SAAS;GAAoB;aACrE;GACgB,EAEX;KACA"}

package/dist/Avatar.d.ts

@@ -1,14 +1,27 @@
-import { ReactElement, ReactNode } from 'react';
+'use client';
+import { ReactElement, ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/Avatar/Avatar.d.ts
 type AvatarSize = 'sm' | 'md' | 'lg';
-export interface AvatarProps {
-    alt?: string;
-    className?: string;
-    fallback?: ReactNode | string;
-    icon?: ReactElement;
-    imageSource?: string;
-    size?: AvatarSize;
-    userFullName?: string;
+interface AvatarProps {
+  alt?: string;
+  className?: string;
+  fallback?: ReactNode | string;
+  icon?: ReactElement;
+  imageSource?: string;
+  size?: AvatarSize;
+  userFullName?: string;
 }
-export declare const Avatar: ({ alt, className, fallback, icon, imageSource, size, userFullName }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+declare const Avatar: ({
+  alt,
+  className,
+  fallback,
+  icon,
+  imageSource,
+  size,
+  userFullName
+}: AvatarProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Avatar, AvatarProps };
 //# sourceMappingURL=Avatar.d.ts.map

package/dist/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","names":[],"sources":["../src/components/Avatar/Avatar.tsx"],"mappings":";;;;;KAIK,UAAA;AAAA,UAEY,WAAA;EACf,GAAA;EACA,SAAA;EACA,QAAA,GAAW,SAAA;EACX,IAAA,GAAO,YAAA;EACP,WAAA;EACA,IAAA,GAAO,UAAA;EACP,YAAA;AAAA;AAAA,cAiCW,MAAA;EAAM,GAAA;EAAA,SAAA;EAAA,QAAA;EAAA,IAAA;EAAA,WAAA;EAAA,IAAA;EAAA;AAAA,GAAgF,WAAA,KAAW,oBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/Avatar.js

@@ -1,84 +1,103 @@
-'use client'
-import './styles/main.css'
-import { UserIcon as e } from "./Icons/UserIcon.js";
-import { t } from "./twUtils-BpqlKSeB.js";
-import { cloneElement as n, isValidElement as r, useEffect as i, useState as a } from "react";
-import { jsx as o } from "react/jsx-runtime";
+'use client';
+import { UserIcon } from "./Icons/UserIcon.js";
+import { cn } from "./utils/twUtils.js";
+import { cloneElement, isValidElement, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
 //#region src/components/Avatar/Avatar.tsx
-var s = {
+const sizeClasses = {
 	sm: "h-8 w-8",
 	md: "h-10 w-10",
 	lg: "h-12 w-12"
-}, c = {
+};
+const textSizeClasses = {
 	sm: "text-xs",
 	md: "text-base",
 	lg: "text-xl"
-}, l = {
+};
+const iconSizes = {
 	sm: 24,
 	md: 32,
 	lg: 40
-}, u = (e) => {
-	let t = e.trim();
-	if (!t) return "?";
-	let n = t.split(/\s+/).filter(Boolean);
-	return n.length === 0 ? "?" : n.length === 1 ? n[0].charAt(0).toUpperCase() : (n[0].charAt(0) + n[n.length - 1].charAt(0)).toUpperCase();
-}, d = ({ alt: d, className: f, fallback: p, icon: m, imageSource: h, size: g = "md", userFullName: _ }) => {
-	let [v, y] = a("loading");
-	return i(() => {
-		if (!h) return;
-		y("loading");
-		let e = new Image();
-		return e.src = h, e.onload = () => y("loaded"), e.onerror = () => y("error"), () => {
-			e.onload = null, e.onerror = null;
+};
+const getInitials = (name) => {
+	const trimmed = name.trim();
+	if (!trimmed) return "?";
+	const words = trimmed.split(/\s+/).filter(Boolean);
+	if (words.length === 0) return "?";
+	if (words.length === 1) return words[0].charAt(0).toUpperCase();
+	return (words[0].charAt(0) + words[words.length - 1].charAt(0)).toUpperCase();
+};
+const Avatar = ({ alt, className, fallback, icon, imageSource, size = "md", userFullName }) => {
+	const [imageStatus, setImageStatus] = useState("loading");
+	useEffect(() => {
+		if (!imageSource) return;
+		setImageStatus("loading");
+		const img = new Image();
+		img.src = imageSource;
+		img.onload = () => setImageStatus("loaded");
+		img.onerror = () => setImageStatus("error");
+		return () => {
+			img.onload = null;
+			img.onerror = null;
 		};
-	}, [h]), /* @__PURE__ */ o("div", {
-		className: t("relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-level-two", s[g], f),
+	}, [imageSource]);
+	const renderContent = () => {
+		if (userFullName) return /* @__PURE__ */ jsx("span", {
+			"aria-label": userFullName + " avatar",
+			className: cn("font-bold tracking-tighter flex h-full w-full items-center justify-center text-text-primary font-stretch-condensed", textSizeClasses[size]),
+			"data-testid": "spectral-avatar-initials",
+			children: getInitials(userFullName)
+		});
+		if (icon) {
+			const iconSize = iconSizes[size];
+			return /* @__PURE__ */ jsx("span", {
+				className: "flex h-full w-full items-center justify-center",
+				children: isValidElement(icon) ? (() => {
+					const baseIconProps = {
+						className: cn("shrink-0", icon.props.className),
+						"aria-hidden": "true"
+					};
+					if (icon.type.displayName?.includes("Icon") ?? false) return cloneElement(icon, {
+						...baseIconProps,
+						size: iconSize
+					});
+					return cloneElement(icon, baseIconProps);
+				})() : icon
+			});
+		}
+		if (imageSource && imageStatus === "loaded") return /* @__PURE__ */ jsx("img", {
+			alt: alt ?? "Avatar",
+			"aria-label": alt ?? "Avatar",
+			className: "inset-0 absolute h-full w-full rounded-full object-cover",
+			"data-testid": "spectral-avatar-image",
+			role: "img",
+			src: imageSource
+		});
+		if (imageSource && imageStatus === "error" && fallback) return /* @__PURE__ */ jsx("span", {
+			className: "flex h-full w-full items-center justify-center",
+			"data-testid": "spectral-avatar-img-error-fallback",
+			children: fallback
+		});
+		if (fallback) return /* @__PURE__ */ jsx("span", {
+			className: cn("flex h-full w-full items-center justify-center text-text-primary", textSizeClasses[size]),
+			"data-testid": "spectral-avatar-fallback",
+			children: fallback
+		});
+		if (imageSource && imageStatus === "loading") return /* @__PURE__ */ jsx("span", {
+			className: "motion-safe:animate-pulse flex h-full w-full items-center justify-center",
+			"data-testid": "spectral-avatar-loading"
+		});
+		return /* @__PURE__ */ jsx(UserIcon, {});
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-level-two", sizeClasses[size], className),
 		"data-slot": "avatar",
 		"data-testid": "spectral-avatar",
-		children: (() => {
-			if (_) return /* @__PURE__ */ o("span", {
-				"aria-label": _ + " avatar",
-				className: t("font-bold tracking-tighter flex h-full w-full items-center justify-center text-text-primary font-stretch-condensed", c[g]),
-				"data-testid": "spectral-avatar-initials",
-				children: u(_)
-			});
-			if (m) {
-				let e = l[g];
-				return /* @__PURE__ */ o("span", {
-					className: "flex h-full w-full items-center justify-center",
-					children: r(m) ? (() => {
-						let r = {
-							className: t("shrink-0", m.props.className),
-							"aria-hidden": "true"
-						};
-						return m.type.displayName?.includes("Icon") ?? !1 ? n(m, {
-							...r,
-							size: e
-						}) : n(m, r);
-					})() : m
-				});
-			}
-			return h && v === "loaded" ? /* @__PURE__ */ o("img", {
-				alt: d ?? "Avatar",
-				"aria-label": d ?? "Avatar",
-				className: "inset-0 absolute h-full w-full rounded-full object-cover",
-				"data-testid": "spectral-avatar-image",
-				role: "img",
-				src: h
-			}) : h && v === "error" && p ? /* @__PURE__ */ o("span", {
-				className: "flex h-full w-full items-center justify-center",
-				"data-testid": "spectral-avatar-img-error-fallback",
-				children: p
-			}) : p ? /* @__PURE__ */ o("span", {
-				className: t("flex h-full w-full items-center justify-center text-text-primary", c[g]),
-				"data-testid": "spectral-avatar-fallback",
-				children: p
-			}) : h && v === "loading" ? /* @__PURE__ */ o("span", {
-				className: "motion-safe:animate-pulse flex h-full w-full items-center justify-center",
-				"data-testid": "spectral-avatar-loading"
-			}) : /* @__PURE__ */ o(e, {});
-		})()
+		children: renderContent()
 	});
 };
+
 //#endregion
-export { d as Avatar };
+export { Avatar };
+//# sourceMappingURL=Avatar.js.map

package/dist/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","names":[],"sources":["../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { UserIcon } from '@components/Icons/UserIcon'\nimport { cn } from '@utils/twUtils'\nimport { cloneElement, isValidElement, useEffect, useState, type ComponentType, type ReactElement, type ReactNode } from 'react'\n\ntype AvatarSize = 'sm' | 'md' | 'lg'\n\nexport interface AvatarProps {\n  alt?: string\n  className?: string\n  fallback?: ReactNode | string\n  icon?: ReactElement\n  imageSource?: string\n  size?: AvatarSize\n  userFullName?: string\n}\n\nconst sizeClasses = {\n  sm: 'h-8 w-8',\n  md: 'h-10 w-10',\n  lg: 'h-12 w-12',\n}\n\nconst textSizeClasses = {\n  sm: 'text-xs',\n  md: 'text-base',\n  lg: 'text-xl',\n}\n\nconst iconSizes = {\n  sm: 24,\n  md: 32,\n  lg: 40,\n}\n\nconst getInitials = (name: string): string => {\n  const trimmed = name.trim()\n  if (!trimmed) return '?'\n\n  const words = trimmed.split(/\\s+/).filter(Boolean)\n\n  if (words.length === 0) return '?'\n  if (words.length === 1) return words[0].charAt(0).toUpperCase()\n\n  return (words[0].charAt(0) + words[words.length - 1].charAt(0)).toUpperCase()\n}\n\nexport const Avatar = ({ alt, className, fallback, icon, imageSource, size = 'md', userFullName }: AvatarProps) => {\n  const [imageStatus, setImageStatus] = useState<'loading' | 'loaded' | 'error'>('loading')\n\n  useEffect(() => {\n    if (!imageSource) return\n\n    setImageStatus('loading')\n\n    const img = new Image()\n    img.src = imageSource\n\n    img.onload = () => setImageStatus('loaded')\n    img.onerror = () => setImageStatus('error')\n\n    return () => {\n      img.onload = null\n      img.onerror = null\n    }\n  }, [imageSource])\n\n  const renderContent = () => {\n    if (userFullName) {\n      return (\n        <span\n          // cannot use template literals in aria-label or oxlint validation fails: https://www.w3.org/WAI/ARIA/apg/patterns/img/#labeling\n          aria-label={userFullName + ' avatar'}\n          className={cn('font-bold tracking-tighter flex h-full w-full items-center justify-center text-text-primary font-stretch-condensed', textSizeClasses[size as keyof typeof textSizeClasses])}\n          data-testid='spectral-avatar-initials'\n        >\n          {getInitials(userFullName)}\n        </span>\n      )\n    }\n\n    if (icon) {\n      const iconSize = iconSizes[size as keyof typeof iconSizes]\n\n      return (\n        <span className='flex h-full w-full items-center justify-center'>\n          {isValidElement(icon)\n            ? (() => {\n                const baseIconProps = {\n                  className: cn('shrink-0', (icon.props as { className?: string }).className),\n                  'aria-hidden': 'true' as const,\n                }\n\n                // Check if this is an icon component that accepts size prop\n                const componentType = icon.type as ComponentType<unknown> & { displayName?: string }\n                const isIconComponent = componentType.displayName?.includes('Icon') ?? false\n\n                if (isIconComponent) {\n                  const iconPropsWithSize = {\n                    ...baseIconProps,\n                    size: iconSize,\n                  }\n                  return cloneElement(icon, iconPropsWithSize)\n                }\n\n                return cloneElement(icon, baseIconProps)\n              })()\n            : icon}\n        </span>\n      )\n    }\n\n    if (imageSource && imageStatus === 'loaded') {\n      return <img alt={alt ?? 'Avatar'} aria-label={alt ?? 'Avatar'} className='inset-0 absolute h-full w-full rounded-full object-cover' data-testid='spectral-avatar-image' role='img' src={imageSource} />\n    }\n\n    if (imageSource && imageStatus === 'error' && fallback) {\n      return (\n        <span className='flex h-full w-full items-center justify-center' data-testid='spectral-avatar-img-error-fallback'>\n          {fallback}\n        </span>\n      )\n    }\n\n    // Show fallback while image is loading or if no image provided\n    if (fallback) {\n      return (\n        <span className={cn('flex h-full w-full items-center justify-center text-text-primary', textSizeClasses[size as keyof typeof textSizeClasses])} data-testid='spectral-avatar-fallback'>\n          {fallback}\n        </span>\n      )\n    }\n\n    // Show empty/skeleton state while image is loading\n    if (imageSource && imageStatus === 'loading') {\n      return <span className='motion-safe:animate-pulse flex h-full w-full items-center justify-center' data-testid='spectral-avatar-loading' />\n    }\n\n    // Last resort: (only when no imageSource and no fallback)\n    return <UserIcon />\n  }\n\n  return (\n    <div className={cn('relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-level-two', sizeClasses[size as keyof typeof sizeClasses], className)} data-slot='avatar' data-testid='spectral-avatar'>\n      {renderContent()}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAgBA,MAAM,cAAc;CAClB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,kBAAkB;CACtB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,YAAY;CAChB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,eAAe,SAAyB;CAC5C,MAAM,UAAU,KAAK,MAAM;AAC3B,KAAI,CAAC,QAAS,QAAO;CAErB,MAAM,QAAQ,QAAQ,MAAM,MAAM,CAAC,OAAO,QAAQ;AAElD,KAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,KAAI,MAAM,WAAW,EAAG,QAAO,MAAM,GAAG,OAAO,EAAE,CAAC,aAAa;AAE/D,SAAQ,MAAM,GAAG,OAAO,EAAE,GAAG,MAAM,MAAM,SAAS,GAAG,OAAO,EAAE,EAAE,aAAa;;AAG/E,MAAa,UAAU,EAAE,KAAK,WAAW,UAAU,MAAM,aAAa,OAAO,MAAM,mBAAgC;CACjH,MAAM,CAAC,aAAa,kBAAkB,SAAyC,UAAU;AAEzF,iBAAgB;AACd,MAAI,CAAC,YAAa;AAElB,iBAAe,UAAU;EAEzB,MAAM,MAAM,IAAI,OAAO;AACvB,MAAI,MAAM;AAEV,MAAI,eAAe,eAAe,SAAS;AAC3C,MAAI,gBAAgB,eAAe,QAAQ;AAE3C,eAAa;AACX,OAAI,SAAS;AACb,OAAI,UAAU;;IAEf,CAAC,YAAY,CAAC;CAEjB,MAAM,sBAAsB;AAC1B,MAAI,aACF,QACE,oBAAC,QAAD;GAEE,cAAY,eAAe;GAC3B,WAAW,GAAG,sHAAsH,gBAAgB,MAAsC;GAC1L,eAAY;aAEX,YAAY,aAAa;GACrB;AAIX,MAAI,MAAM;GACR,MAAM,WAAW,UAAU;AAE3B,UACE,oBAAC,QAAD;IAAM,WAAU;cACb,eAAe,KAAK,UACV;KACL,MAAM,gBAAgB;MACpB,WAAW,GAAG,YAAa,KAAK,MAAiC,UAAU;MAC3E,eAAe;MAChB;AAMD,SAHsB,KAAK,KACW,aAAa,SAAS,OAAO,IAAI,MAOrE,QAAO,aAAa,MAAM;MAHxB,GAAG;MACH,MAAM;MAEmC,CAAC;AAG9C,YAAO,aAAa,MAAM,cAAc;QACtC,GACJ;IACC;;AAIX,MAAI,eAAe,gBAAgB,SACjC,QAAO,oBAAC,OAAD;GAAK,KAAK,OAAO;GAAU,cAAY,OAAO;GAAU,WAAU;GAA2D,eAAY;GAAwB,MAAK;GAAM,KAAK;GAAe;AAGzM,MAAI,eAAe,gBAAgB,WAAW,SAC5C,QACE,oBAAC,QAAD;GAAM,WAAU;GAAiD,eAAY;aAC1E;GACI;AAKX,MAAI,SACF,QACE,oBAAC,QAAD;GAAM,WAAW,GAAG,oEAAoE,gBAAgB,MAAsC;GAAE,eAAY;aACzJ;GACI;AAKX,MAAI,eAAe,gBAAgB,UACjC,QAAO,oBAAC,QAAD;GAAM,WAAU;GAA2E,eAAY;GAA4B;AAI5I,SAAO,oBAAC,UAAD,EAAY;;AAGrB,QACE,oBAAC,OAAD;EAAK,WAAW,GAAG,uGAAuG,YAAY,OAAmC,UAAU;EAAE,aAAU;EAAS,eAAY;YACjN,eAAe;EACZ"}

package/dist/Badge.d.ts

@@ -1,11 +1,22 @@
-import { VariantProps } from 'class-variance-authority';
-import { ComponentProps } from 'react';
-export type BadgeProps = ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
-    asChild?: boolean;
+'use client';
+import { ComponentProps } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { VariantProps } from "class-variance-authority";
+import * as _$class_variance_authority_types0 from "class-variance-authority/types";
+
+//#region src/components/Badge/Badge.d.ts
+type BadgeProps = ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
+  asChild?: boolean;
 };
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export declare const Badge: ({ asChild, className, variant, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+  variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+declare const Badge: ({
+  asChild,
+  className,
+  variant,
+  ...props
+}: BadgeProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Badge, BadgeProps };
 //# sourceMappingURL=Badge.d.ts.map

package/dist/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","names":[],"sources":["../src/components/Badge/Badge.tsx"],"mappings":";;;;;;;KAKY,UAAA,GAAa,cAAA,WAAyB,YAAA,QAAoB,aAAA;EAAmB,OAAA;AAAA;AAAA,cAEnF,aAAA,GAAa,KAAA;;IAelB,iCAAA,CAAA,SAAA;AAAA,cAEY,KAAA;EAAK,OAAA;EAAA,SAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAAuD,UAAA,KAAU,oBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/Badge.js

@@ -1,12 +1,12 @@
-'use client'
-import './styles/main.css'
-import { t as e } from "./twUtils-BpqlKSeB.js";
-import { t } from "./dist-tMzzRwxG.js";
-import { Slot as n } from "./primitives/slot.js";
+'use client';
+import { cn } from "./utils/twUtils.js";
+import { Slot } from "./primitives/slot.js";
 import "react";
-import { jsx as r } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+
 //#region src/components/Badge/Badge.tsx
-var i = t("rounded-sm px-2 py-0.5 text-xs font-medium [&>svg]:size-3 gap-1 focus-visible:border-ring focus-visible:ring-ring/50 inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] aria-invalid:border-danger-200 aria-invalid:ring-danger-200 [&>svg]:pointer-events-none", {
+const badgeVariants = cva(`rounded-sm px-2 py-0.5 text-xs font-medium [&>svg]:size-3 gap-1 focus-visible:border-ring focus-visible:ring-ring/50 inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] aria-invalid:border-danger-200 aria-invalid:ring-danger-200 [&>svg]:pointer-events-none`, {
 	variants: { variant: {
 		default: "bg-badge-primary-bg text-text-primary group-aria-pressed:bg-badge-primary-bg--active group-data-[state=on]:bg-badge-primary-bg--active [a&]:hover:bg-badge-primary-bg--hover",
 		secondary: "[a&]:hover:bg-badge-secondary-bg--hover bg-badge-secondary-bg text-badge-secondary-text",
@@ -14,11 +14,16 @@ var i = t("rounded-sm px-2 py-0.5 text-xs font-medium [&>svg]:size-3 gap-1 focus
 		outline: "[a&]:hover:text-accent-foreground border border-badge-outline-border text-text-primary [a&]:hover:bg-accent"
 	} },
 	defaultVariants: { variant: "default" }
-}), a = ({ asChild: t = !1, className: a, variant: o, ...s }) => /* @__PURE__ */ r(t ? n : "span", {
-	className: e(i({ variant: o }), a),
-	"data-slot": "badge",
-	"data-testid": "spectral-badge",
-	...s
 });
+const Badge = ({ asChild = false, className, variant, ...props }) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "span", {
+		className: cn(badgeVariants({ variant }), className),
+		"data-slot": "badge",
+		"data-testid": "spectral-badge",
+		...props
+	});
+};
+
 //#endregion
-export { a as Badge };
+export { Badge };
+//# sourceMappingURL=Badge.js.map

package/dist/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","names":[],"sources":["../src/components/Badge/Badge.tsx"],"sourcesContent":["import { Slot } from '@primitives/slot'\nimport { cn } from '@utils/twUtils'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { type ComponentProps } from 'react'\n\nexport type BadgeProps = ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }\n\nconst badgeVariants = cva(\n  `rounded-sm px-2 py-0.5 text-xs font-medium [&>svg]:size-3 gap-1 focus-visible:border-ring focus-visible:ring-ring/50 inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] aria-invalid:border-danger-200 aria-invalid:ring-danger-200 [&>svg]:pointer-events-none`,\n  {\n    variants: {\n      variant: {\n        default: 'bg-badge-primary-bg text-text-primary group-aria-pressed:bg-badge-primary-bg--active group-data-[state=on]:bg-badge-primary-bg--active [a&]:hover:bg-badge-primary-bg--hover',\n        secondary: '[a&]:hover:bg-badge-secondary-bg--hover bg-badge-secondary-bg text-badge-secondary-text',\n        destructive: 'bg-badge-destructive-bg text-text-primary focus-visible:ring-badge-destructive-border [a&]:hover:bg-danger-400',\n        outline: '[a&]:hover:text-accent-foreground border border-badge-outline-border text-text-primary [a&]:hover:bg-accent',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport const Badge = ({ asChild = false, className, variant, ...props }: BadgeProps) => {\n  const Comp = asChild ? Slot : 'span'\n\n  return <Comp className={cn(badgeVariants({ variant }), className)} data-slot='badge' data-testid='spectral-badge' {...props} />\n}\n"],"mappings":";;;;;;;;AAOA,MAAM,gBAAgB,IACpB,gWACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,WAAW;EACX,aAAa;EACb,SAAS;EACV,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;AAED,MAAa,SAAS,EAAE,UAAU,OAAO,WAAW,SAAS,GAAG,YAAwB;AAGtF,QAAO,oBAFM,UAAU,OAAO,QAEvB;EAAM,WAAW,GAAG,cAAc,EAAE,SAAS,CAAC,EAAE,UAAU;EAAE,aAAU;EAAQ,eAAY;EAAiB,GAAI;EAAS"}

package/dist/Button.d.ts

@@ -1,29 +1,57 @@
-import { AsChildProp } from './primitives/slot';
-import { VariantProps } from 'class-variance-authority';
-import { ButtonHTMLAttributes, MouseEvent, ReactNode, Ref } from 'react';
+'use client';
+import { AsChildProp } from "./primitives/slot.js";
+import { ButtonHTMLAttributes, MouseEvent, ReactNode, Ref } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { VariantProps } from "class-variance-authority";
+import * as _$class_variance_authority_types0 from "class-variance-authority/types";
+
+//#region src/components/Button/Button.d.ts
 declare const buttonVariants: (props?: ({
-    variant?: "secondary" | "outline" | "primary" | "ghost" | "unstyled" | null | undefined;
-    size?: "small" | "default" | "fullWidth" | null | undefined;
-    state?: "default" | "error" | "loading" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface ButtonProps extends AsChildProp, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, VariantProps<typeof buttonVariants> {
-    dataTestId?: string;
-    disabled?: boolean;
-    endIcon?: ReactNode;
-    errorMessage?: string | ReactNode;
-    label?: string;
-    onClick?: (event: MouseEvent<HTMLElement>) => void;
-    size?: 'small' | 'default' | 'fullWidth';
-    startIcon?: ReactNode;
-    state?: 'default' | 'error' | 'loading';
-    type?: 'button' | 'submit' | 'reset';
-    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'unstyled';
+  variant?: "ghost" | "outline" | "primary" | "secondary" | "unstyled" | null | undefined;
+  size?: "default" | "fullWidth" | "small" | null | undefined;
+  state?: "default" | "error" | "loading" | null | undefined;
+} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+interface ButtonProps extends AsChildProp, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, VariantProps<typeof buttonVariants> {
+  dataTestId?: string;
+  disabled?: boolean;
+  endIcon?: ReactNode;
+  errorMessage?: string | ReactNode;
+  label?: string;
+  messageReserveLines?: number;
+  messageReserveSpace?: boolean;
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+  size?: 'small' | 'default' | 'fullWidth';
+  startIcon?: ReactNode;
+  state?: 'default' | 'error' | 'loading';
+  type?: 'button' | 'submit' | 'reset';
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'unstyled';
 }
-export declare const Button: {
-    ({ asChild, children, className, dataTestId, disabled, endIcon, errorMessage, id, label, onClick, ref, size, startIcon, state, type, variant, ...props }: ButtonProps & {
-        ref?: Ref<HTMLButtonElement>;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export {};
+declare function Button({
+  asChild,
+  children,
+  className,
+  dataTestId,
+  disabled,
+  endIcon,
+  errorMessage,
+  id,
+  label,
+  messageReserveLines,
+  messageReserveSpace,
+  onClick,
+  ref,
+  size,
+  startIcon,
+  state,
+  type,
+  variant,
+  ...props
+}: ButtonProps & {
+  ref?: Ref<HTMLButtonElement>;
+}): _$react_jsx_runtime0.JSX.Element;
+declare namespace Button {
+  var displayName: string;
+}
+//#endregion
+export { Button, ButtonProps };
 //# sourceMappingURL=Button.d.ts.map

package/dist/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","names":[],"sources":["../src/components/Button/Button.tsx"],"mappings":";;;;;;;;cAOM,cAAA,GAAc,KAAA;;;;IA4BnB,iCAAA,CAAA,SAAA;AAAA,UAEgB,WAAA,SAAoB,WAAA,EAAa,IAAA,CAAK,oBAAA,CAAqB,iBAAA,aAA8B,YAAA,QAAoB,cAAA;EAC5H,UAAA;EACA,QAAA;EACA,OAAA,GAAU,SAAA;EACV,YAAA,YAAwB,SAAA;EACxB,KAAA;EACA,mBAAA;EACA,mBAAA;EACA,OAAA,IAAW,KAAA,EAAO,UAAA,CAAW,WAAA;EAC7B,IAAA;EACA,SAAA,GAAY,SAAA;EACZ,KAAA;EACA,IAAA;EACA,OAAA;AAAA;AAAA;EAIA,OAAA;EACA,QAAA;EACA,SAAA;EACA,UAAA;EACA,QAAA;EACA,OAAA;EACA,YAAA;EACA,EAAA;EACA,KAAA;EACA,mBAAA;EACA,mBAAA;EACA,OAAA;EACA,GAAA;EACA,IAAA;EACA,SAAA;EACA,KAAA;EACA,IAAA;EACA,OAAA;EAAA,GACG;AAAA,GACF,WAAA;EACD,GAAA,GAAM,GAAA,CAAI,iBAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}