@aloudata/aloudata-design 3.0.0-beta.8 → 3.0.0

package/dist/AProgress/index.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-interface AProgressProps {
+export interface AProgressProps {
     percent?: number;
     type?: 'line' | 'circle' | 'dashboard';
     status?: 'success' | 'exception' | 'normal' | 'active';

package/dist/AProgress/index.js

@@ -6,10 +6,11 @@ function AProgress(props) {
 	const { percent = 0, type = "line", status, showInfo = true, strokeColor = "var(--action-primary-normal)", trailColor = "var(--background-neutral-subtle)", strokeWidth, width = 120, format, className, style, size } = props;
 	const clampedPercent = Math.min(100, Math.max(0, percent));
 	const resolvedStatus = status || (clampedPercent >= 100 ? "success" : "normal");
-	const statusColor = resolvedStatus === "success" ? "var(--content-positive-primary)" : resolvedStatus === "exception" ? "var(--content-negative-primary)" : strokeColor;
+	const statusColor = resolvedStatus === "success" ? "var(--content-positive-secondary)" : resolvedStatus === "exception" ? "var(--content-negative-secondary)" : resolvedStatus === "active" ? "var(--content-informative-secondary)" : strokeColor;
+	const resolvedStrokeWidth = strokeWidth || (size === "small" ? 3 : 4);
 	if (type === "circle" || type === "dashboard") {
 		const circleSize = width;
-		const sw = strokeWidth || 6;
+		const sw = resolvedStrokeWidth;
 		const radius = (circleSize - sw) / 2;
 		const circumference = 2 * Math.PI * radius;
 		const dashOffset = circumference * (1 - clampedPercent / 100);
@@ -45,12 +46,20 @@ function AProgress(props) {
 					className: "tw-transition-all tw-duration-300"
 				})]
 			}), showInfo && /* @__PURE__ */ jsx("span", {
-				className: "tw-absolute tw-text-sm tw-font-medium",
+				className: "tw-absolute tw-z-[1] tw-inline-flex tw-items-center tw-justify-center tw-rounded-full tw-text-sm tw-font-medium",
+				style: {
+					minWidth: "4ch",
+					padding: "0 4px",
+					color: "var(--content-primary)",
+					backgroundColor: "var(--background-neutral-surface)",
+					fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
+					fontVariantNumeric: "tabular-nums"
+				},
 				children: format ? format(clampedPercent) : `${clampedPercent}%`
 			})]
 		});
 	}
-	const lineHeight = strokeWidth || (size === "small" ? 6 : 8);
+	const lineHeight = resolvedStrokeWidth;
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("ald-progress ald-progress-line tw-w-full", className),
 		style,
@@ -70,7 +79,12 @@ function AProgress(props) {
 					}
 				})
 			}), showInfo && /* @__PURE__ */ jsx("span", {
-				className: "ald-progress-text tw-whitespace-nowrap tw-text-sm",
+				className: "ald-progress-text tw-inline-block tw-whitespace-nowrap tw-text-left tw-text-sm",
+				style: {
+					minWidth: "4ch",
+					fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
+					fontVariantNumeric: "tabular-nums"
+				},
 				children: format ? format(clampedPercent) : `${clampedPercent}%`
 			})]
 		})

package/dist/AProgress/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/AProgress/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../lib/utils';\n\ninterface AProgressProps {\n  percent?: number;\n  type?: 'line' | 'circle' | 'dashboard';\n  status?: 'success' | 'exception' | 'normal' | 'active';\n  showInfo?: boolean;\n  strokeColor?: string;\n  trailColor?: string;\n  strokeWidth?: number;\n  width?: number;\n  format?: (percent?: number) => React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n  size?: 'default' | 'small';\n}\n\nfunction AProgress(props: AProgressProps) {\n  const {\n    percent = 0,\n    type = 'line',\n    status,\n    showInfo = true,\n    strokeColor = 'var(--action-primary-normal)',\n    trailColor = 'var(--background-neutral-subtle)',\n    strokeWidth,\n    width = 120,\n    format,\n    className,\n    style,\n    size,\n  } = props;\n\n  const clampedPercent = Math.min(100, Math.max(0, percent));\n  const resolvedStatus =\n    status || (clampedPercent >= 100 ? 'success' : 'normal');\n\n  const statusColor =\n    resolvedStatus === 'success'\n      ? 'var(--content-positive-primary)'\n      : resolvedStatus === 'exception'\n      ? 'var(--content-negative-primary)'\n      : strokeColor;\n\n  if (type === 'circle' || type === 'dashboard') {\n    const circleSize = width;\n    const sw = strokeWidth || 6;\n    const radius = (circleSize - sw) / 2;\n    const circumference = 2 * Math.PI * radius;\n    const dashOffset = circumference * (1 - clampedPercent / 100);\n\n    return (\n      <div\n        className={cn(\n          'ald-progress ald-progress-circle tw-relative tw-inline-flex tw-items-center tw-justify-center',\n          className,\n        )}\n        style={{ width: circleSize, height: circleSize, ...style }}\n      >\n        <svg\n          viewBox={`0 0 ${circleSize} ${circleSize}`}\n          width={circleSize}\n          height={circleSize}\n        >\n          <circle\n            cx={circleSize / 2}\n            cy={circleSize / 2}\n            r={radius}\n            fill=\"none\"\n            stroke={trailColor}\n            strokeWidth={sw}\n          />\n          <circle\n            cx={circleSize / 2}\n            cy={circleSize / 2}\n            r={radius}\n            fill=\"none\"\n            stroke={statusColor}\n            strokeWidth={sw}\n            strokeLinecap=\"round\"\n            strokeDasharray={circumference}\n            strokeDashoffset={dashOffset}\n            transform={`rotate(-90 ${circleSize / 2} ${circleSize / 2})`}\n            className=\"tw-transition-all tw-duration-300\"\n          />\n        </svg>\n        {showInfo && (\n          <span className=\"tw-absolute tw-text-sm tw-font-medium\">\n            {format ? format(clampedPercent) : `${clampedPercent}%`}\n          </span>\n        )}\n      </div>\n    );\n  }\n\n  // Line type\n  const lineHeight = strokeWidth || (size === 'small' ? 6 : 8);\n\n  return (\n    <div\n      className={cn('ald-progress ald-progress-line tw-w-full', className)}\n      style={style}\n    >\n      <div className=\"tw-flex tw-items-center tw-gap-2\">\n        <div\n          className=\"ald-progress-outer tw-flex-1 tw-overflow-hidden tw-rounded-full\"\n          style={{ height: lineHeight, backgroundColor: trailColor }}\n        >\n          <div\n            className=\"ald-progress-inner tw-h-full tw-rounded-full tw-transition-all tw-duration-300\"\n            style={{\n              width: `${clampedPercent}%`,\n              backgroundColor: statusColor,\n            }}\n          />\n        </div>\n        {showInfo && (\n          <span className=\"ald-progress-text tw-whitespace-nowrap tw-text-sm\">\n            {format ? format(clampedPercent) : `${clampedPercent}%`}\n          </span>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport default AProgress;\n"],"mappings":";;;;AAkBA,SAAS,UAAU,OAAuB;CACxC,MAAM,EACJ,UAAU,GACV,OAAO,QACP,QACA,WAAW,MACX,cAAc,gCACd,aAAa,oCACb,aACA,QAAQ,KACR,QACA,WACA,OACA,SACE;CAEJ,MAAM,iBAAiB,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,QAAQ,CAAC;CAC1D,MAAM,iBACJ,WAAW,kBAAkB,MAAM,YAAY;CAEjD,MAAM,cACJ,mBAAmB,YACf,oCACA,mBAAmB,cACnB,oCACA;AAEN,KAAI,SAAS,YAAY,SAAS,aAAa;EAC7C,MAAM,aAAa;EACnB,MAAM,KAAK,eAAe;EAC1B,MAAM,UAAU,aAAa,MAAM;EACnC,MAAM,gBAAgB,IAAI,KAAK,KAAK;EACpC,MAAM,aAAa,iBAAiB,IAAI,iBAAiB;AAEzD,SACE,qBAAC,OAAD;GACE,WAAW,GACT,iGACA,UACD;GACD,OAAO;IAAE,OAAO;IAAY,QAAQ;IAAY,GAAG;IAAO;aAL5D,CAOE,qBAAC,OAAD;IACE,SAAS,OAAO,WAAW,GAAG;IAC9B,OAAO;IACP,QAAQ;cAHV,CAKE,oBAAC,UAAD;KACE,IAAI,aAAa;KACjB,IAAI,aAAa;KACjB,GAAG;KACH,MAAK;KACL,QAAQ;KACR,aAAa;KACb,CAAA,EACF,oBAAC,UAAD;KACE,IAAI,aAAa;KACjB,IAAI,aAAa;KACjB,GAAG;KACH,MAAK;KACL,QAAQ;KACR,aAAa;KACb,eAAc;KACd,iBAAiB;KACjB,kBAAkB;KAClB,WAAW,cAAc,aAAa,EAAE,GAAG,aAAa,EAAE;KAC1D,WAAU;KACV,CAAA,CACE;OACL,YACC,oBAAC,QAAD;IAAM,WAAU;cACb,SAAS,OAAO,eAAe,GAAG,GAAG,eAAe;IAChD,CAAA,CAEL;;;CAKV,MAAM,aAAa,gBAAgB,SAAS,UAAU,IAAI;AAE1D,QACE,oBAAC,OAAD;EACE,WAAW,GAAG,4CAA4C,UAAU;EAC7D;YAEP,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,OAAD;IACE,WAAU;IACV,OAAO;KAAE,QAAQ;KAAY,iBAAiB;KAAY;cAE1D,oBAAC,OAAD;KACE,WAAU;KACV,OAAO;MACL,OAAO,GAAG,eAAe;MACzB,iBAAiB;MAClB;KACD,CAAA;IACE,CAAA,EACL,YACC,oBAAC,QAAD;IAAM,WAAU;cACb,SAAS,OAAO,eAAe,GAAG,GAAG,eAAe;IAChD,CAAA,CAEL;;EACF,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/AProgress/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface AProgressProps {\n  percent?: number;\n  type?: 'line' | 'circle' | 'dashboard';\n  status?: 'success' | 'exception' | 'normal' | 'active';\n  showInfo?: boolean;\n  strokeColor?: string;\n  trailColor?: string;\n  strokeWidth?: number;\n  width?: number;\n  format?: (percent?: number) => React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n  size?: 'default' | 'small';\n}\n\nfunction AProgress(props: AProgressProps) {\n  const {\n    percent = 0,\n    type = 'line',\n    status,\n    showInfo = true,\n    strokeColor = 'var(--action-primary-normal)',\n    trailColor = 'var(--background-neutral-subtle)',\n    strokeWidth,\n    width = 120,\n    format,\n    className,\n    style,\n    size,\n  } = props;\n\n  const clampedPercent = Math.min(100, Math.max(0, percent));\n  const resolvedStatus =\n    status || (clampedPercent >= 100 ? 'success' : 'normal');\n\n  const statusColor =\n    resolvedStatus === 'success'\n      ? 'var(--content-positive-secondary)'\n      : resolvedStatus === 'exception'\n      ? 'var(--content-negative-secondary)'\n      : resolvedStatus === 'active'\n      ? 'var(--content-informative-secondary)'\n      : strokeColor;\n  const resolvedStrokeWidth = strokeWidth || (size === 'small' ? 3 : 4);\n\n  if (type === 'circle' || type === 'dashboard') {\n    const circleSize = width;\n    const sw = resolvedStrokeWidth;\n    const radius = (circleSize - sw) / 2;\n    const circumference = 2 * Math.PI * radius;\n    const dashOffset = circumference * (1 - clampedPercent / 100);\n\n    return (\n      <div\n        className={cn(\n          'ald-progress ald-progress-circle tw-relative tw-inline-flex tw-items-center tw-justify-center',\n          className,\n        )}\n        style={{ width: circleSize, height: circleSize, ...style }}\n      >\n        <svg\n          viewBox={`0 0 ${circleSize} ${circleSize}`}\n          width={circleSize}\n          height={circleSize}\n        >\n          <circle\n            cx={circleSize / 2}\n            cy={circleSize / 2}\n            r={radius}\n            fill=\"none\"\n            stroke={trailColor}\n            strokeWidth={sw}\n          />\n          <circle\n            cx={circleSize / 2}\n            cy={circleSize / 2}\n            r={radius}\n            fill=\"none\"\n            stroke={statusColor}\n            strokeWidth={sw}\n            strokeLinecap=\"round\"\n            strokeDasharray={circumference}\n            strokeDashoffset={dashOffset}\n            transform={`rotate(-90 ${circleSize / 2} ${circleSize / 2})`}\n            className=\"tw-transition-all tw-duration-300\"\n          />\n        </svg>\n        {showInfo && (\n          <span\n            className=\"tw-absolute tw-z-[1] tw-inline-flex tw-items-center tw-justify-center tw-rounded-full tw-text-sm tw-font-medium\"\n            style={{\n              minWidth: '4ch',\n              padding: '0 4px',\n              color: 'var(--content-primary)',\n              backgroundColor: 'var(--background-neutral-surface)',\n              fontFamily:\n                'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace',\n              fontVariantNumeric: 'tabular-nums',\n            }}\n          >\n            {format ? format(clampedPercent) : `${clampedPercent}%`}\n          </span>\n        )}\n      </div>\n    );\n  }\n\n  const lineHeight = resolvedStrokeWidth;\n\n  return (\n    <div\n      className={cn('ald-progress ald-progress-line tw-w-full', className)}\n      style={style}\n    >\n      <div className=\"tw-flex tw-items-center tw-gap-2\">\n        <div\n          className=\"ald-progress-outer tw-flex-1 tw-overflow-hidden tw-rounded-full\"\n          style={{ height: lineHeight, backgroundColor: trailColor }}\n        >\n          <div\n            className=\"ald-progress-inner tw-h-full tw-rounded-full tw-transition-all tw-duration-300\"\n            style={{\n              width: `${clampedPercent}%`,\n              backgroundColor: statusColor,\n            }}\n          />\n        </div>\n        {showInfo && (\n          <span\n            className=\"ald-progress-text tw-inline-block tw-whitespace-nowrap tw-text-left tw-text-sm\"\n            style={{\n              minWidth: '4ch',\n              fontFamily:\n                'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace',\n              fontVariantNumeric: 'tabular-nums',\n            }}\n          >\n            {format ? format(clampedPercent) : `${clampedPercent}%`}\n          </span>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport default AProgress;\n"],"mappings":";;;;AAkBA,SAAS,UAAU,OAAuB;CACxC,MAAM,EACJ,UAAU,GACV,OAAO,QACP,QACA,WAAW,MACX,cAAc,gCACd,aAAa,oCACb,aACA,QAAQ,KACR,QACA,WACA,OACA,SACE;CAEJ,MAAM,iBAAiB,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,QAAQ,CAAC;CAC1D,MAAM,iBACJ,WAAW,kBAAkB,MAAM,YAAY;CAEjD,MAAM,cACJ,mBAAmB,YACf,sCACA,mBAAmB,cACnB,sCACA,mBAAmB,WACnB,yCACA;CACN,MAAM,sBAAsB,gBAAgB,SAAS,UAAU,IAAI;AAEnE,KAAI,SAAS,YAAY,SAAS,aAAa;EAC7C,MAAM,aAAa;EACnB,MAAM,KAAK;EACX,MAAM,UAAU,aAAa,MAAM;EACnC,MAAM,gBAAgB,IAAI,KAAK,KAAK;EACpC,MAAM,aAAa,iBAAiB,IAAI,iBAAiB;AAEzD,SACE,qBAAC,OAAD;GACE,WAAW,GACT,iGACA,UACD;GACD,OAAO;IAAE,OAAO;IAAY,QAAQ;IAAY,GAAG;IAAO;aAL5D,CAOE,qBAAC,OAAD;IACE,SAAS,OAAO,WAAW,GAAG;IAC9B,OAAO;IACP,QAAQ;cAHV,CAKE,oBAAC,UAAD;KACE,IAAI,aAAa;KACjB,IAAI,aAAa;KACjB,GAAG;KACH,MAAK;KACL,QAAQ;KACR,aAAa;KACb,CAAA,EACF,oBAAC,UAAD;KACE,IAAI,aAAa;KACjB,IAAI,aAAa;KACjB,GAAG;KACH,MAAK;KACL,QAAQ;KACR,aAAa;KACb,eAAc;KACd,iBAAiB;KACjB,kBAAkB;KAClB,WAAW,cAAc,aAAa,EAAE,GAAG,aAAa,EAAE;KAC1D,WAAU;KACV,CAAA,CACE;OACL,YACC,oBAAC,QAAD;IACE,WAAU;IACV,OAAO;KACL,UAAU;KACV,SAAS;KACT,OAAO;KACP,iBAAiB;KACjB,YACE;KACF,oBAAoB;KACrB;cAEA,SAAS,OAAO,eAAe,GAAG,GAAG,eAAe;IAChD,CAAA,CAEL;;;CAIV,MAAM,aAAa;AAEnB,QACE,oBAAC,OAAD;EACE,WAAW,GAAG,4CAA4C,UAAU;EAC7D;YAEP,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,OAAD;IACE,WAAU;IACV,OAAO;KAAE,QAAQ;KAAY,iBAAiB;KAAY;cAE1D,oBAAC,OAAD;KACE,WAAU;KACV,OAAO;MACL,OAAO,GAAG,eAAe;MACzB,iBAAiB;MAClB;KACD,CAAA;IACE,CAAA,EACL,YACC,oBAAC,QAAD;IACE,WAAU;IACV,OAAO;KACL,UAAU;KACV,YACE;KACF,oBAAoB;KACrB;cAEA,SAAS,OAAO,eAAe,GAAG,GAAG,eAAe;IAChD,CAAA,CAEL;;EACF,CAAA"}

package/dist/Alert/index.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 export interface AlertProps {
-    type?: 'success' | 'info' | 'warning' | 'error';
+    type?: 'success' | 'info' | 'warning' | 'error' | 'none';
     message?: React.ReactNode;
     description?: React.ReactNode;
     closable?: boolean;

package/dist/Alert/index.js

@@ -11,33 +11,46 @@ var typeConfig = {
 	success: {
 		bg: "tw-bg-[var(--background-positive-subtle)]",
 		border: "tw-border-[var(--border-positive-subtle)]",
+		titleColor: "tw-text-[var(--content-positive-primary)]",
 		icon: /* @__PURE__ */ jsx(Memo$1, {
 			size: 16,
-			color: "var(--content-positive-primary)"
+			color: "var(--content-positive-secondary)"
 		})
 	},
 	info: {
 		bg: "tw-bg-[var(--background-informative-subtle)]",
 		border: "tw-border-[var(--border-informative-subtle)]",
+		titleColor: "tw-text-[var(--content-informative-primary)]",
 		icon: /* @__PURE__ */ jsx(Memo$4, {
 			size: 16,
-			color: "var(--content-informative-primary)"
+			color: "var(--content-informative-secondary)"
 		})
 	},
 	warning: {
 		bg: "tw-bg-[var(--background-warning-subtle)]",
 		border: "tw-border-[var(--border-warning-subtle)]",
+		titleColor: "tw-text-[var(--content-warning-primary)]",
 		icon: /* @__PURE__ */ jsx(Memo, {
 			size: 16,
-			color: "var(--content-warning-primary)"
+			color: "var(--content-warning-secondary)"
 		})
 	},
 	error: {
 		bg: "tw-bg-[var(--background-negative-subtle)]",
 		border: "tw-border-[var(--border-negative-subtle)]",
+		titleColor: "tw-text-[var(--content-negative-primary)]",
 		icon: /* @__PURE__ */ jsx(Memo$2, {
 			size: 16,
-			color: "var(--content-negative-primary)"
+			color: "var(--content-negative-secondary)"
+		})
+	},
+	none: {
+		bg: "tw-bg-[var(--background-neutral-subtle)]",
+		border: "tw-border-[var(--border-neutral-subtle)]",
+		titleColor: "tw-text-[var(--content-primary)]",
+		icon: /* @__PURE__ */ jsx(Memo$4, {
+			size: 16,
+			color: "var(--content-secondary)"
 		})
 	}
 };
@@ -47,7 +60,7 @@ function Alert(props) {
 	if (closed) return null;
 	const config = typeConfig[type] || typeConfig.info;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("ald-alert tw-flex tw-items-start tw-gap-2 tw-rounded-r-100 tw-border tw-border-solid tw-p-3", config.bg, config.border, className),
+		className: cn("ald-alert tw-flex tw-items-start tw-gap-2 tw-rounded-r-75 tw-border tw-border-solid tw-p-3", config.bg, config.border, className),
 		style,
 		role: "alert",
 		children: [
@@ -58,10 +71,11 @@ function Alert(props) {
 			/* @__PURE__ */ jsxs("div", {
 				className: "ald-alert-content tw-min-w-0 tw-flex-1",
 				children: [message && /* @__PURE__ */ jsx("div", {
-					className: "ald-alert-message tw-text-sm tw-font-medium tw-text-[var(--content-primary)]",
+					className: cn("ald-alert-message tw-text-sm tw-font-medium tw-leading-5", config.titleColor),
 					children: message
 				}), description && /* @__PURE__ */ jsx("div", {
-					className: "ald-alert-description tw-mt-1 tw-text-sm tw-text-[var(--content-secondary)]",
+					className: "ald-alert-description tw-mt-1 tw-text-sm tw-font-normal tw-leading-5 tw-text-[var(--content-secondary)]",
+					style: { fontFeatureSettings: "'liga' off, 'clig' off" },
 					children: description
 				})]
 			}),
@@ -71,7 +85,7 @@ function Alert(props) {
 			}),
 			closable && /* @__PURE__ */ jsx("button", {
 				type: "button",
-				className: "ald-alert-close-icon tw-flex tw-cursor-pointer tw-items-center tw-border-0 tw-bg-transparent tw-p-0",
+				className: "ald-alert-close-icon tw-flex tw-cursor-pointer tw-items-center tw-self-start tw-border-0 tw-bg-transparent tw-p-0 tw-pt-0.5",
 				onClick: (e) => {
 					setClosed(true);
 					onClose?.(e);

package/dist/Alert/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Alert/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n  AttentionTriangleFill,\n  CheckCircleFill,\n  CloseCircleFill,\n  CloseLightLine,\n  InformationCircleFill,\n} from '../Icon';\nimport { cn } from '../lib/utils';\n\nexport interface AlertProps {\n  type?: 'success' | 'info' | 'warning' | 'error';\n  message?: React.ReactNode;\n  description?: React.ReactNode;\n  closable?: boolean;\n  onClose?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  afterClose?: () => void;\n  showIcon?: boolean;\n  icon?: React.ReactNode;\n  banner?: boolean;\n  action?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nconst typeConfig: Record<\n  string,\n  { bg: string; border: string; icon: React.ReactNode }\n> = {\n  success: {\n    bg: 'tw-bg-[var(--background-positive-subtle)]',\n    border: 'tw-border-[var(--border-positive-subtle)]',\n    icon: <CheckCircleFill size={16} color=\"var(--content-positive-primary)\" />,\n  },\n  info: {\n    bg: 'tw-bg-[var(--background-informative-subtle)]',\n    border: 'tw-border-[var(--border-informative-subtle)]',\n    icon: (\n      <InformationCircleFill\n        size={16}\n        color=\"var(--content-informative-primary)\"\n      />\n    ),\n  },\n  warning: {\n    bg: 'tw-bg-[var(--background-warning-subtle)]',\n    border: 'tw-border-[var(--border-warning-subtle)]',\n    icon: (\n      <AttentionTriangleFill size={16} color=\"var(--content-warning-primary)\" />\n    ),\n  },\n  error: {\n    bg: 'tw-bg-[var(--background-negative-subtle)]',\n    border: 'tw-border-[var(--border-negative-subtle)]',\n    icon: <CloseCircleFill size={16} color=\"var(--content-negative-primary)\" />,\n  },\n};\n\nfunction Alert(props: AlertProps) {\n  const {\n    type = 'info',\n    message,\n    description,\n    closable,\n    onClose,\n    afterClose,\n    showIcon = true,\n    icon,\n    action,\n    className,\n    style,\n  } = props;\n\n  const [closed, setClosed] = useState(false);\n\n  if (closed) return null;\n\n  const config = typeConfig[type] || typeConfig.info;\n\n  return (\n    <div\n      className={cn(\n        'ald-alert tw-flex tw-items-start tw-gap-2 tw-rounded-r-100 tw-border tw-border-solid tw-p-3',\n        config.bg,\n        config.border,\n        className,\n      )}\n      style={style}\n      role=\"alert\"\n    >\n      {showIcon && (\n        <span className=\"ald-alert-icon tw-flex tw-items-center tw-pt-0.5\">\n          {icon || config.icon}\n        </span>\n      )}\n      <div className=\"ald-alert-content tw-min-w-0 tw-flex-1\">\n        {message && (\n          <div className=\"ald-alert-message tw-text-sm tw-font-medium tw-text-[var(--content-primary)]\">\n            {message}\n          </div>\n        )}\n        {description && (\n          <div className=\"ald-alert-description tw-mt-1 tw-text-sm tw-text-[var(--content-secondary)]\">\n            {description}\n          </div>\n        )}\n      </div>\n      {action && <div className=\"ald-alert-action\">{action}</div>}\n      {closable && (\n        <button\n          type=\"button\"\n          className=\"ald-alert-close-icon tw-flex tw-cursor-pointer tw-items-center tw-border-0 tw-bg-transparent tw-p-0\"\n          onClick={(e) => {\n            setClosed(true);\n            onClose?.(e);\n            afterClose?.();\n          }}\n        >\n          <CloseLightLine size={16} color=\"var(--content-secondary)\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport default Alert;\n"],"mappings":";;;;;;;;;AAyBA,IAAM,aAGF;CACF,SAAS;EACP,IAAI;EACJ,QAAQ;EACR,MAAM,oBAAC,QAAD;GAAiB,MAAM;GAAI,OAAM;GAAoC,CAAA;EAC5E;CACD,MAAM;EACJ,IAAI;EACJ,QAAQ;EACR,MACE,oBAAC,QAAD;GACE,MAAM;GACN,OAAM;GACN,CAAA;EAEL;CACD,SAAS;EACP,IAAI;EACJ,QAAQ;EACR,MACE,oBAAC,MAAD;GAAuB,MAAM;GAAI,OAAM;GAAmC,CAAA;EAE7E;CACD,OAAO;EACL,IAAI;EACJ,QAAQ;EACR,MAAM,oBAAC,QAAD;GAAiB,MAAM;GAAI,OAAM;GAAoC,CAAA;EAC5E;CACF;AAED,SAAS,MAAM,OAAmB;CAChC,MAAM,EACJ,OAAO,QACP,SACA,aACA,UACA,SACA,YACA,WAAW,MACX,MACA,QACA,WACA,UACE;CAEJ,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;AAE3C,KAAI,OAAQ,QAAO;CAEnB,MAAM,SAAS,WAAW,SAAS,WAAW;AAE9C,QACE,qBAAC,OAAD;EACE,WAAW,GACT,+FACA,OAAO,IACP,OAAO,QACP,UACD;EACM;EACP,MAAK;YARP;GAUG,YACC,oBAAC,QAAD;IAAM,WAAU;cACb,QAAQ,OAAO;IACX,CAAA;GAET,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,WACC,oBAAC,OAAD;KAAK,WAAU;eACZ;KACG,CAAA,EAEP,eACC,oBAAC,OAAD;KAAK,WAAU;eACZ;KACG,CAAA,CAEJ;;GACL,UAAU,oBAAC,OAAD;IAAK,WAAU;cAAoB;IAAa,CAAA;GAC1D,YACC,oBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,UAAU,MAAM;AACd,eAAU,KAAK;AACf,eAAU,EAAE;AACZ,mBAAc;;cAGhB,oBAAC,QAAD;KAAgB,MAAM;KAAI,OAAM;KAA6B,CAAA;IACtD,CAAA;GAEP"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Alert/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n  AttentionTriangleFill,\n  CheckCircleFill,\n  CloseCircleFill,\n  CloseLightLine,\n  InformationCircleFill,\n} from '../Icon';\nimport { cn } from '../lib/utils';\n\nexport interface AlertProps {\n  type?: 'success' | 'info' | 'warning' | 'error' | 'none';\n  message?: React.ReactNode;\n  description?: React.ReactNode;\n  closable?: boolean;\n  onClose?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  afterClose?: () => void;\n  showIcon?: boolean;\n  icon?: React.ReactNode;\n  banner?: boolean;\n  action?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nconst typeConfig: Record<\n  string,\n  { bg: string; border: string; icon: React.ReactNode; titleColor: string }\n> = {\n  success: {\n    bg: 'tw-bg-[var(--background-positive-subtle)]',\n    border: 'tw-border-[var(--border-positive-subtle)]',\n    titleColor: 'tw-text-[var(--content-positive-primary)]',\n    icon: (\n      <CheckCircleFill size={16} color=\"var(--content-positive-secondary)\" />\n    ),\n  },\n  info: {\n    bg: 'tw-bg-[var(--background-informative-subtle)]',\n    border: 'tw-border-[var(--border-informative-subtle)]',\n    titleColor: 'tw-text-[var(--content-informative-primary)]',\n    icon: (\n      <InformationCircleFill\n        size={16}\n        color=\"var(--content-informative-secondary)\"\n      />\n    ),\n  },\n  warning: {\n    bg: 'tw-bg-[var(--background-warning-subtle)]',\n    border: 'tw-border-[var(--border-warning-subtle)]',\n    titleColor: 'tw-text-[var(--content-warning-primary)]',\n    icon: (\n      <AttentionTriangleFill\n        size={16}\n        color=\"var(--content-warning-secondary)\"\n      />\n    ),\n  },\n  error: {\n    bg: 'tw-bg-[var(--background-negative-subtle)]',\n    border: 'tw-border-[var(--border-negative-subtle)]',\n    titleColor: 'tw-text-[var(--content-negative-primary)]',\n    icon: (\n      <CloseCircleFill size={16} color=\"var(--content-negative-secondary)\" />\n    ),\n  },\n  none: {\n    bg: 'tw-bg-[var(--background-neutral-subtle)]',\n    border: 'tw-border-[var(--border-neutral-subtle)]',\n    titleColor: 'tw-text-[var(--content-primary)]',\n    icon: (\n      <InformationCircleFill size={16} color=\"var(--content-secondary)\" />\n    ),\n  },\n};\n\nfunction Alert(props: AlertProps) {\n  const {\n    type = 'info',\n    message,\n    description,\n    closable,\n    onClose,\n    afterClose,\n    showIcon = true,\n    icon,\n    action,\n    className,\n    style,\n  } = props;\n\n  const [closed, setClosed] = useState(false);\n\n  if (closed) return null;\n\n  const config = typeConfig[type] || typeConfig.info;\n\n  return (\n    <div\n      className={cn(\n        'ald-alert tw-flex tw-items-start tw-gap-2 tw-rounded-r-75 tw-border tw-border-solid tw-p-3',\n        config.bg,\n        config.border,\n        className,\n      )}\n      style={style}\n      role=\"alert\"\n    >\n      {showIcon && (\n        <span className=\"ald-alert-icon tw-flex tw-items-center tw-pt-0.5\">\n          {icon || config.icon}\n        </span>\n      )}\n      <div className=\"ald-alert-content tw-min-w-0 tw-flex-1\">\n        {message && (\n          <div\n            className={cn(\n              'ald-alert-message tw-text-sm tw-font-medium tw-leading-5',\n              config.titleColor,\n            )}\n          >\n            {message}\n          </div>\n        )}\n        {description && (\n          <div\n            className=\"ald-alert-description tw-mt-1 tw-text-sm tw-font-normal tw-leading-5 tw-text-[var(--content-secondary)]\"\n            style={{ fontFeatureSettings: \"'liga' off, 'clig' off\" }}\n          >\n            {description}\n          </div>\n        )}\n      </div>\n      {action && <div className=\"ald-alert-action\">{action}</div>}\n      {closable && (\n        <button\n          type=\"button\"\n          className=\"ald-alert-close-icon tw-flex tw-cursor-pointer tw-items-center tw-self-start tw-border-0 tw-bg-transparent tw-p-0 tw-pt-0.5\"\n          onClick={(e) => {\n            setClosed(true);\n            onClose?.(e);\n            afterClose?.();\n          }}\n        >\n          <CloseLightLine size={16} color=\"var(--content-secondary)\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport default Alert;\n"],"mappings":";;;;;;;;;AAyBA,IAAM,aAGF;CACF,SAAS;EACP,IAAI;EACJ,QAAQ;EACR,YAAY;EACZ,MACE,oBAAC,QAAD;GAAiB,MAAM;GAAI,OAAM;GAAsC,CAAA;EAE1E;CACD,MAAM;EACJ,IAAI;EACJ,QAAQ;EACR,YAAY;EACZ,MACE,oBAAC,QAAD;GACE,MAAM;GACN,OAAM;GACN,CAAA;EAEL;CACD,SAAS;EACP,IAAI;EACJ,QAAQ;EACR,YAAY;EACZ,MACE,oBAAC,MAAD;GACE,MAAM;GACN,OAAM;GACN,CAAA;EAEL;CACD,OAAO;EACL,IAAI;EACJ,QAAQ;EACR,YAAY;EACZ,MACE,oBAAC,QAAD;GAAiB,MAAM;GAAI,OAAM;GAAsC,CAAA;EAE1E;CACD,MAAM;EACJ,IAAI;EACJ,QAAQ;EACR,YAAY;EACZ,MACE,oBAAC,QAAD;GAAuB,MAAM;GAAI,OAAM;GAA6B,CAAA;EAEvE;CACF;AAED,SAAS,MAAM,OAAmB;CAChC,MAAM,EACJ,OAAO,QACP,SACA,aACA,UACA,SACA,YACA,WAAW,MACX,MACA,QACA,WACA,UACE;CAEJ,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;AAE3C,KAAI,OAAQ,QAAO;CAEnB,MAAM,SAAS,WAAW,SAAS,WAAW;AAE9C,QACE,qBAAC,OAAD;EACE,WAAW,GACT,8FACA,OAAO,IACP,OAAO,QACP,UACD;EACM;EACP,MAAK;YARP;GAUG,YACC,oBAAC,QAAD;IAAM,WAAU;cACb,QAAQ,OAAO;IACX,CAAA;GAET,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,WACC,oBAAC,OAAD;KACE,WAAW,GACT,4DACA,OAAO,WACR;eAEA;KACG,CAAA,EAEP,eACC,oBAAC,OAAD;KACE,WAAU;KACV,OAAO,EAAE,qBAAqB,0BAA0B;eAEvD;KACG,CAAA,CAEJ;;GACL,UAAU,oBAAC,OAAD;IAAK,WAAU;cAAoB;IAAa,CAAA;GAC1D,YACC,oBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,UAAU,MAAM;AACd,eAAU,KAAK;AACf,eAAU,EAAE;AACZ,mBAAc;;cAGhB,oBAAC,QAAD;KAAgB,MAAM;KAAI,OAAM;KAA6B,CAAA;IACtD,CAAA;GAEP"}

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

@@ -12,7 +12,7 @@ export interface IAvatarProps {
     onClick?: (e?: React.MouseEvent<HTMLElement>) => void;
     onError?: () => boolean;
     size?: TAvatarSize;
-    type?: 'user' | 'userGroup' | 'count';
+    type?: 'user' | 'team' | 'count';
     className?: string;
     style?: React.CSSProperties;
     children?: React.ReactNode;

package/dist/Avatar/component/Avatar/index.js

@@ -1,6 +1,6 @@
 import { cn } from "../../../lib/utils.js";
 import Memo from "../../../Icon/components/User.js";
-import { AVATAR_SIZE_MAP } from "./type.js";
+import { AVATAR_SIZE_MAP, AVATAR_TYPE_TO_BG_COLOR } from "./type.js";
 import { getFontSize } from "./helper.js";
 import { useCallback, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -8,7 +8,7 @@ import _ from "lodash";
 //#region src/Avatar/component/Avatar/index.tsx
 var ZERO = 0;
 var Avatar = (props) => {
-	const { size = "middle", children, src, icon, shape = "circle", alt, onClick, onError, className, style } = props;
+	const { size = "middle", children, src, icon, shape = "circle", alt, type = "user", onClick, onError, className, style } = props;
 	const [imgError, setImgError] = useState(false);
 	const getSize = useCallback(() => {
 		if (typeof size === "number") return size;
@@ -54,13 +54,13 @@ var Avatar = (props) => {
 		shape
 	]);
 	return /* @__PURE__ */ jsx("span", {
-		className: cn("ald-avatar tw-inline-flex tw-items-center tw-justify-center tw-overflow-hidden tw-border-0 tw-text-[var(--non-semantic-content-blue-primary)]", shape === "circle" ? "tw-rounded-full" : "tw-rounded-r-50", !icon && _.isEmpty(children) && "ald-avatar-default", className),
+		className: cn("ald-avatar tw-inline-flex tw-items-center tw-justify-center tw-overflow-hidden tw-border-0", type === "team" ? "tw-text-[var(--non-semantic-content-green-primary)]" : "tw-text-[var(--non-semantic-content-blue-primary)]", shape === "circle" ? "tw-rounded-full" : "tw-rounded-r-50", !icon && _.isEmpty(children) && "ald-avatar-default", className),
 		style: {
 			width: sizeVal,
 			height: sizeVal,
 			fontSize: sizeVal * .4,
 			lineHeight: `${sizeVal}px`,
-			backgroundColor: !icon && _.isEmpty(children) && (!src || imgError) ? "white" : "var(--non-semantic-background-blue-muted)",
+			backgroundColor: !icon && _.isEmpty(children) && (!src || imgError) ? "white" : AVATAR_TYPE_TO_BG_COLOR[type] || "var(--non-semantic-background-blue-muted)",
 			...style
 		},
 		onClick,

package/dist/Avatar/component/Avatar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Avatar/component/Avatar/index.tsx"],"sourcesContent":["import _ from 'lodash';\nimport * as React from 'react';\nimport { useCallback, useMemo, useState } from 'react';\nimport { User } from '../../../Icon';\nimport { cn } from '../../../lib/utils';\nimport { getFontSize } from './helper';\nimport { AVATAR_SIZE_MAP, TAvatarSize } from './type';\n\nexport interface IAvatarProps {\n  shape?: 'circle' | 'square';\n  gap?: number;\n  src?: React.ReactNode;\n  srcSet?: string;\n  draggable?: boolean;\n  icon?: React.ReactNode;\n  alt?: string;\n  crossOrigin?: '' | 'anonymous' | 'use-credentials';\n  onClick?: (e?: React.MouseEvent<HTMLElement>) => void;\n  onError?: () => boolean;\n  size?: TAvatarSize;\n  type?: 'user' | 'userGroup' | 'count';\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\n\nconst ZERO = 0;\n\nconst Avatar = (props: IAvatarProps) => {\n  const {\n    size = 'middle',\n    children,\n    src,\n    icon,\n    shape = 'circle',\n    alt,\n    onClick,\n    onError,\n    className,\n    style,\n  } = props;\n\n  const [imgError, setImgError] = useState(false);\n\n  const getSize = useCallback(() => {\n    if (typeof size === 'number') return size;\n    return AVATAR_SIZE_MAP[size] || 32;\n  }, [size]);\n\n  const getChildren = useCallback(() => {\n    if (_.isEmpty(children)) return null;\n    if (typeof children === 'string') return children[ZERO].toLocaleUpperCase();\n    return children;\n  }, [children]);\n\n  const sizeVal = getSize();\n\n  const innerContent = useMemo(() => {\n    if (src && !imgError) {\n      if (typeof src === 'string') {\n        return (\n          <img\n            src={src}\n            alt={alt}\n            className=\"tw-size-full tw-object-cover\"\n            style={shape === 'circle' ? { borderRadius: '50%' } : undefined}\n            onError={() => {\n              const result = onError?.();\n              if (result !== false) setImgError(true);\n            }}\n          />\n        );\n      }\n      return src;\n    }\n\n    if (icon) return icon;\n\n    if (!_.isEmpty(children)) {\n      return (\n        <div className=\"tw-flex tw-size-full tw-items-center tw-justify-center\">\n          <span style={getFontSize(sizeVal)}>{getChildren()}</span>\n        </div>\n      );\n    }\n\n    return <User size={sizeVal} />;\n  }, [\n    src,\n    icon,\n    children,\n    sizeVal,\n    getChildren,\n    imgError,\n    alt,\n    onError,\n    shape,\n  ]);\n\n  return (\n    <span\n      className={cn(\n        'ald-avatar tw-inline-flex tw-items-center tw-justify-center tw-overflow-hidden tw-border-0 tw-text-[var(--non-semantic-content-blue-primary)]',\n        shape === 'circle' ? 'tw-rounded-full' : 'tw-rounded-r-50',\n        !icon && _.isEmpty(children) && 'ald-avatar-default',\n        className,\n      )}\n      style={{\n        width: sizeVal,\n        height: sizeVal,\n        fontSize: sizeVal * 0.4,\n        lineHeight: `${sizeVal}px`,\n        backgroundColor:\n          !icon && _.isEmpty(children) && (!src || imgError)\n            ? 'white'\n            : 'var(--non-semantic-background-blue-muted)',\n        ...style,\n      }}\n      onClick={onClick}\n    >\n      {innerContent}\n    </span>\n  );\n};\n\nexport default Avatar;\n"],"mappings":";;;;;;;;AA0BA,IAAM,OAAO;AAEb,IAAM,UAAU,UAAwB;CACtC,MAAM,EACJ,OAAO,UACP,UACA,KACA,MACA,QAAQ,UACR,KACA,SACA,SACA,WACA,UACE;CAEJ,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAE/C,MAAM,UAAU,kBAAkB;AAChC,MAAI,OAAO,SAAS,SAAU,QAAO;AACrC,SAAO,gBAAgB,SAAS;IAC/B,CAAC,KAAK,CAAC;CAEV,MAAM,cAAc,kBAAkB;AACpC,MAAI,EAAE,QAAQ,SAAS,CAAE,QAAO;AAChC,MAAI,OAAO,aAAa,SAAU,QAAO,SAAS,MAAM,mBAAmB;AAC3E,SAAO;IACN,CAAC,SAAS,CAAC;CAEd,MAAM,UAAU,SAAS;CAEzB,MAAM,eAAe,cAAc;AACjC,MAAI,OAAO,CAAC,UAAU;AACpB,OAAI,OAAO,QAAQ,SACjB,QACE,oBAAC,OAAD;IACO;IACA;IACL,WAAU;IACV,OAAO,UAAU,WAAW,EAAE,cAAc,OAAO,GAAG;IACtD,eAAe;AAEb,SADe,WAAW,KACX,MAAO,aAAY,KAAK;;IAEzC,CAAA;AAGN,UAAO;;AAGT,MAAI,KAAM,QAAO;AAEjB,MAAI,CAAC,EAAE,QAAQ,SAAS,CACtB,QACE,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,QAAD;IAAM,OAAO,YAAY,QAAQ;cAAG,aAAa;IAAQ,CAAA;GACrD,CAAA;AAIV,SAAO,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA;IAC7B;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,QAAD;EACE,WAAW,GACT,iJACA,UAAU,WAAW,oBAAoB,mBACzC,CAAC,QAAQ,EAAE,QAAQ,SAAS,IAAI,sBAChC,UACD;EACD,OAAO;GACL,OAAO;GACP,QAAQ;GACR,UAAU,UAAU;GACpB,YAAY,GAAG,QAAQ;GACvB,iBACE,CAAC,QAAQ,EAAE,QAAQ,SAAS,KAAK,CAAC,OAAO,YACrC,UACA;GACN,GAAG;GACJ;EACQ;YAER;EACI,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Avatar/component/Avatar/index.tsx"],"sourcesContent":["import _ from 'lodash';\nimport * as React from 'react';\nimport { useCallback, useMemo, useState } from 'react';\nimport { User } from '../../../Icon';\nimport { cn } from '../../../lib/utils';\nimport { getFontSize } from './helper';\nimport { AVATAR_SIZE_MAP, AVATAR_TYPE_TO_BG_COLOR, TAvatarSize } from './type';\n\nexport interface IAvatarProps {\n  shape?: 'circle' | 'square';\n  gap?: number;\n  src?: React.ReactNode;\n  srcSet?: string;\n  draggable?: boolean;\n  icon?: React.ReactNode;\n  alt?: string;\n  crossOrigin?: '' | 'anonymous' | 'use-credentials';\n  onClick?: (e?: React.MouseEvent<HTMLElement>) => void;\n  onError?: () => boolean;\n  size?: TAvatarSize;\n  type?: 'user' | 'team' | 'count';\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\n\nconst ZERO = 0;\n\nconst Avatar = (props: IAvatarProps) => {\n  const {\n    size = 'middle',\n    children,\n    src,\n    icon,\n    shape = 'circle',\n    alt,\n    type = 'user',\n    onClick,\n    onError,\n    className,\n    style,\n  } = props;\n\n  const [imgError, setImgError] = useState(false);\n\n  const getSize = useCallback(() => {\n    if (typeof size === 'number') return size;\n    return AVATAR_SIZE_MAP[size] || 32;\n  }, [size]);\n\n  const getChildren = useCallback(() => {\n    if (_.isEmpty(children)) return null;\n    if (typeof children === 'string') return children[ZERO].toLocaleUpperCase();\n    return children;\n  }, [children]);\n\n  const sizeVal = getSize();\n\n  const innerContent = useMemo(() => {\n    if (src && !imgError) {\n      if (typeof src === 'string') {\n        return (\n          <img\n            src={src}\n            alt={alt}\n            className=\"tw-size-full tw-object-cover\"\n            style={shape === 'circle' ? { borderRadius: '50%' } : undefined}\n            onError={() => {\n              const result = onError?.();\n              if (result !== false) setImgError(true);\n            }}\n          />\n        );\n      }\n      return src;\n    }\n\n    if (icon) return icon;\n\n    if (!_.isEmpty(children)) {\n      return (\n        <div className=\"tw-flex tw-size-full tw-items-center tw-justify-center\">\n          <span style={getFontSize(sizeVal)}>{getChildren()}</span>\n        </div>\n      );\n    }\n\n    return <User size={sizeVal} />;\n  }, [\n    src,\n    icon,\n    children,\n    sizeVal,\n    getChildren,\n    imgError,\n    alt,\n    onError,\n    shape,\n  ]);\n\n  return (\n    <span\n      className={cn(\n        'ald-avatar tw-inline-flex tw-items-center tw-justify-center tw-overflow-hidden tw-border-0',\n        type === 'team'\n          ? 'tw-text-[var(--non-semantic-content-green-primary)]'\n          : 'tw-text-[var(--non-semantic-content-blue-primary)]',\n        shape === 'circle' ? 'tw-rounded-full' : 'tw-rounded-r-50',\n        !icon && _.isEmpty(children) && 'ald-avatar-default',\n        className,\n      )}\n      style={{\n        width: sizeVal,\n        height: sizeVal,\n        fontSize: sizeVal * 0.4,\n        lineHeight: `${sizeVal}px`,\n        backgroundColor:\n          !icon && _.isEmpty(children) && (!src || imgError)\n            ? 'white'\n            : AVATAR_TYPE_TO_BG_COLOR[type] ||\n              'var(--non-semantic-background-blue-muted)',\n        ...style,\n      }}\n      onClick={onClick}\n    >\n      {innerContent}\n    </span>\n  );\n};\n\nexport default Avatar;\n"],"mappings":";;;;;;;;AA0BA,IAAM,OAAO;AAEb,IAAM,UAAU,UAAwB;CACtC,MAAM,EACJ,OAAO,UACP,UACA,KACA,MACA,QAAQ,UACR,KACA,OAAO,QACP,SACA,SACA,WACA,UACE;CAEJ,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAE/C,MAAM,UAAU,kBAAkB;AAChC,MAAI,OAAO,SAAS,SAAU,QAAO;AACrC,SAAO,gBAAgB,SAAS;IAC/B,CAAC,KAAK,CAAC;CAEV,MAAM,cAAc,kBAAkB;AACpC,MAAI,EAAE,QAAQ,SAAS,CAAE,QAAO;AAChC,MAAI,OAAO,aAAa,SAAU,QAAO,SAAS,MAAM,mBAAmB;AAC3E,SAAO;IACN,CAAC,SAAS,CAAC;CAEd,MAAM,UAAU,SAAS;CAEzB,MAAM,eAAe,cAAc;AACjC,MAAI,OAAO,CAAC,UAAU;AACpB,OAAI,OAAO,QAAQ,SACjB,QACE,oBAAC,OAAD;IACO;IACA;IACL,WAAU;IACV,OAAO,UAAU,WAAW,EAAE,cAAc,OAAO,GAAG;IACtD,eAAe;AAEb,SADe,WAAW,KACX,MAAO,aAAY,KAAK;;IAEzC,CAAA;AAGN,UAAO;;AAGT,MAAI,KAAM,QAAO;AAEjB,MAAI,CAAC,EAAE,QAAQ,SAAS,CACtB,QACE,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,QAAD;IAAM,OAAO,YAAY,QAAQ;cAAG,aAAa;IAAQ,CAAA;GACrD,CAAA;AAIV,SAAO,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA;IAC7B;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,QAAD;EACE,WAAW,GACT,8FACA,SAAS,SACL,wDACA,sDACJ,UAAU,WAAW,oBAAoB,mBACzC,CAAC,QAAQ,EAAE,QAAQ,SAAS,IAAI,sBAChC,UACD;EACD,OAAO;GACL,OAAO;GACP,QAAQ;GACR,UAAU,UAAU;GACpB,YAAY,GAAG,QAAQ;GACvB,iBACE,CAAC,QAAQ,EAAE,QAAQ,SAAS,KAAK,CAAC,OAAO,YACrC,UACA,wBAAwB,SACxB;GACN,GAAG;GACJ;EACQ;YAER;EACI,CAAA"}

package/dist/Avatar/component/Avatar/type.d.ts

@@ -26,6 +26,6 @@ export declare const AVATAR_SIZE_TO_FONT_SIZE: {
 };
 export declare const AVATAR_TYPE_TO_BG_COLOR: {
     user: string;
-    userGroup: string;
+    team: string;
     count: string;
 };

package/dist/Avatar/component/Avatar/type.js

@@ -14,7 +14,12 @@ var AVATAR_SIZE_TO_FONT_SIZE = {
 	[48]: 16,
 	[64]: 24
 };
+var AVATAR_TYPE_TO_BG_COLOR = {
+	user: "var(--non-semantic-background-blue-muted)",
+	team: "var(--non-semantic-background-green-muted)",
+	count: "var(--non-semantic-background-grey-muted)"
+};
 //#endregion
-export { AVATAR_SIZE_MAP, AVATAR_SIZE_TO_FONT_SIZE };
+export { AVATAR_SIZE_MAP, AVATAR_SIZE_TO_FONT_SIZE, AVATAR_TYPE_TO_BG_COLOR };
 
 //# sourceMappingURL=type.js.map

package/dist/Avatar/component/Avatar/type.js.map

@@ -1 +1 @@
-{"version":3,"file":"type.js","names":[],"sources":["../../../../src/Avatar/component/Avatar/type.ts"],"sourcesContent":["export type TAvatarSize = 'large' | 'middle' | 'small' | number;\n\nexport interface GroupProps {\n  maxCount?: number;\n  maxStyle?: React.CSSProperties;\n  maxPopoverPlacement?: 'top' | 'bottom';\n  size?: TAvatarSize;\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\nexport const AVATAR_SIZE_MAP = {\n  large: 40,\n  middle: 32,\n  small: 28,\n};\n\nexport const AVATAR_SIZE_TO_FONT_SIZE = {\n  [16]: 8,\n  [20]: 10,\n  [24]: 10,\n  [28]: 12,\n  [32]: 12,\n  [40]: 14,\n  [48]: 16,\n  [64]: 24,\n};\n\nexport const AVATAR_TYPE_TO_BG_COLOR = {\n  user: 'var(--non-semantic-background-blue-muted)',\n  userGroup: 'var(--non-semantic-background-blue-muted)',\n  count: 'var(--non-semantic-background-grey-muted)',\n};\n"],"mappings":";AAWA,IAAa,kBAAkB;CAC7B,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,IAAa,2BAA2B;EACrC,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;CACP"}
+{"version":3,"file":"type.js","names":[],"sources":["../../../../src/Avatar/component/Avatar/type.ts"],"sourcesContent":["export type TAvatarSize = 'large' | 'middle' | 'small' | number;\n\nexport interface GroupProps {\n  maxCount?: number;\n  maxStyle?: React.CSSProperties;\n  maxPopoverPlacement?: 'top' | 'bottom';\n  size?: TAvatarSize;\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\nexport const AVATAR_SIZE_MAP = {\n  large: 40,\n  middle: 32,\n  small: 28,\n};\n\nexport const AVATAR_SIZE_TO_FONT_SIZE = {\n  [16]: 8,\n  [20]: 10,\n  [24]: 10,\n  [28]: 12,\n  [32]: 12,\n  [40]: 14,\n  [48]: 16,\n  [64]: 24,\n};\n\nexport const AVATAR_TYPE_TO_BG_COLOR = {\n  user: 'var(--non-semantic-background-blue-muted)',\n  team: 'var(--non-semantic-background-green-muted)',\n  count: 'var(--non-semantic-background-grey-muted)',\n};\n"],"mappings":";AAWA,IAAa,kBAAkB;CAC7B,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,IAAa,2BAA2B;EACrC,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;CACP;AAED,IAAa,0BAA0B;CACrC,MAAM;CACN,MAAM;CACN,OAAO;CACR"}

package/dist/Avatar/index.js

@@ -1,26 +1,85 @@
 import { cn } from "../lib/utils.js";
+import { getFontSize } from "./component/Avatar/helper.js";
 import Avatar$1 from "./component/Avatar/index.js";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/Avatar/index.tsx
+var AVATAR_SIZE_MAP = {
+	large: 40,
+	middle: 32,
+	small: 28
+};
 function AvatarGroup(props) {
-	const { children, className, style, maxCount } = props;
+	const { children, className, style, maxCount, size } = props;
 	const childArray = React.Children.toArray(children);
 	const displayed = maxCount ? childArray.slice(0, maxCount) : childArray;
 	const overflow = maxCount ? childArray.length - maxCount : 0;
+	const resolveSize = () => {
+		if (size) return typeof size === "number" ? size : AVATAR_SIZE_MAP[size] || 32;
+		const firstChild = childArray[0];
+		if (React.isValidElement(firstChild) && firstChild.props.size) {
+			const s = firstChild.props.size;
+			return typeof s === "number" ? s : AVATAR_SIZE_MAP[s] || 32;
+		}
+		return 32;
+	};
+	const sizeVal = resolveSize();
+	const resolveShape = () => {
+		const firstChild = childArray[0];
+		if (React.isValidElement(firstChild) && firstChild.props.shape) return firstChild.props.shape;
+		return "circle";
+	};
+	const borderRadius = resolveShape() === "circle" ? "50%" : 4;
+	const totalSize = sizeVal + (sizeVal <= 20 ? 1 : 2) * 2;
+	const innerSize = sizeVal;
+	const offset = Math.max(totalSize * .25, 4);
+	const { transform: countScale, ...countContainerFont } = getFontSize(innerSize);
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("ald-avatar-group tw-inline-flex tw-items-center", className),
 		style,
 		children: [displayed.map((child, i) => /* @__PURE__ */ jsx("span", {
-			className: "tw--ml-2 first:tw-ml-0",
-			children: child
-		}, i)), overflow > 0 && /* @__PURE__ */ jsxs("span", {
-			className: "tw--ml-2 tw-inline-flex tw-items-center tw-justify-center tw-rounded-full tw-bg-[var(--background-neutral-subtle)] tw-text-xs tw-text-[var(--content-secondary)]",
+			className: "tw-inline-flex tw-flex-none tw-items-center tw-justify-center",
 			style: {
-				width: 32,
-				height: 32
+				width: totalSize,
+				height: totalSize,
+				marginLeft: i === 0 ? 0 : -offset,
+				borderRadius,
+				backgroundColor: "var(--background-default)",
+				position: "relative",
+				zIndex: i
 			},
-			children: ["+", overflow]
+			children: React.isValidElement(child) ? React.cloneElement(child, { size: innerSize }) : child
+		}, i)), overflow > 0 && /* @__PURE__ */ jsx("span", {
+			className: "tw-inline-flex tw-flex-none tw-items-center tw-justify-center",
+			style: {
+				marginLeft: -offset,
+				borderRadius,
+				backgroundColor: "var(--background-default)",
+				width: totalSize,
+				height: totalSize,
+				position: "relative",
+				zIndex: displayed.length
+			},
+			children: /* @__PURE__ */ jsx("span", {
+				className: "tw-inline-flex tw-size-full tw-items-center tw-justify-center tw-overflow-hidden tw-bg-[var(--background-neutral-subtle)] tw-text-[var(--content-secondary)]",
+				style: {
+					width: innerSize,
+					height: innerSize,
+					borderRadius,
+					lineHeight: 1
+				},
+				children: /* @__PURE__ */ jsxs("span", {
+					style: {
+						fontFamily: "monospace",
+						...countContainerFont,
+						...countScale ? {
+							transform: countScale,
+							display: "block"
+						} : {}
+					},
+					children: ["+", overflow]
+				})
+			})
 		})]
 	});
 }

package/dist/Avatar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Avatar/index.tsx"],"sourcesContent":["import React from 'react';\nimport AvatarBase, { IAvatarProps } from './component/Avatar';\nimport { cn } from '../lib/utils';\n\ninterface AvatarGroupProps {\n  maxCount?: number;\n  size?: IAvatarProps['size'];\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\n\nfunction AvatarGroup(props: AvatarGroupProps) {\n  const { children, className, style, maxCount } = props;\n  const childArray = React.Children.toArray(children);\n  const displayed = maxCount ? childArray.slice(0, maxCount) : childArray;\n  const overflow = maxCount ? childArray.length - maxCount : 0;\n\n  return (\n    <div\n      className={cn(\n        'ald-avatar-group tw-inline-flex tw-items-center',\n        className,\n      )}\n      style={style}\n    >\n      {displayed.map((child, i) => (\n        <span key={i} className=\"tw--ml-2 first:tw-ml-0\">\n          {child}\n        </span>\n      ))}\n      {overflow > 0 && (\n        <span\n          className=\"tw--ml-2 tw-inline-flex tw-items-center tw-justify-center tw-rounded-full tw-bg-[var(--background-neutral-subtle)] tw-text-xs tw-text-[var(--content-secondary)]\"\n          style={{ width: 32, height: 32 }}\n        >\n          +{overflow}\n        </span>\n      )}\n    </div>\n  );\n}\n\ntype AvatarComponent = typeof AvatarBase & {\n  Group: typeof AvatarGroup;\n};\n\nconst Avatar = AvatarBase as AvatarComponent;\nAvatar.Group = AvatarGroup;\n\nexport type { IAvatarProps };\nexport default Avatar;\n"],"mappings":";;;;;AAYA,SAAS,YAAY,OAAyB;CAC5C,MAAM,EAAE,UAAU,WAAW,OAAO,aAAa;CACjD,MAAM,aAAa,MAAM,SAAS,QAAQ,SAAS;CACnD,MAAM,YAAY,WAAW,WAAW,MAAM,GAAG,SAAS,GAAG;CAC7D,MAAM,WAAW,WAAW,WAAW,SAAS,WAAW;AAE3D,QACE,qBAAC,OAAD;EACE,WAAW,GACT,mDACA,UACD;EACM;YALT,CAOG,UAAU,KAAK,OAAO,MACrB,oBAAC,QAAD;GAAc,WAAU;aACrB;GACI,EAFI,EAEJ,CACP,EACD,WAAW,KACV,qBAAC,QAAD;GACE,WAAU;GACV,OAAO;IAAE,OAAO;IAAI,QAAQ;IAAI;aAFlC,CAGC,KACG,SACG;KAEL;;;AAQV,IAAM,SAAS;AACf,OAAO,QAAQ"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Avatar/index.tsx"],"sourcesContent":["import React from 'react';\nimport AvatarBase, { IAvatarProps } from './component/Avatar';\nimport { getFontSize } from './component/Avatar/helper';\nimport { cn } from '../lib/utils';\n\ninterface AvatarGroupProps {\n  maxCount?: number;\n  size?: IAvatarProps['size'];\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\n\nconst AVATAR_SIZE_MAP: Record<string, number> = {\n  large: 40,\n  middle: 32,\n  small: 28,\n};\n\nfunction AvatarGroup(props: AvatarGroupProps) {\n  const { children, className, style, maxCount, size } = props;\n  const childArray = React.Children.toArray(children);\n  const displayed = maxCount ? childArray.slice(0, maxCount) : childArray;\n  const overflow = maxCount ? childArray.length - maxCount : 0;\n\n  // Resolve count badge size: from group size prop, or from first child's size, fallback 32\n  const resolveSize = (): number => {\n    if (size) {\n      return typeof size === 'number' ? size : AVATAR_SIZE_MAP[size] || 32;\n    }\n    const firstChild = childArray[0];\n    if (\n      React.isValidElement<IAvatarProps>(firstChild) &&\n      firstChild.props.size\n    ) {\n      const s = firstChild.props.size;\n      return typeof s === 'number' ? s : AVATAR_SIZE_MAP[s] || 32;\n    }\n    return 32;\n  };\n\n  const sizeVal = resolveSize();\n\n  // Resolve shape from first child, fallback 'circle'\n  const resolveShape = (): 'circle' | 'square' => {\n    const firstChild = childArray[0];\n    if (\n      React.isValidElement<IAvatarProps>(firstChild) &&\n      firstChild.props.shape\n    ) {\n      return firstChild.props.shape;\n    }\n    return 'circle';\n  };\n\n  const shapeVal = resolveShape();\n\n  const borderRadius = shapeVal === 'circle' ? '50%' : 4;\n  const ringWidth = sizeVal <= 20 ? 1 : 2;\n  // Total size includes the ring on each side\n  const totalSize = sizeVal + ringWidth * 2;\n  const innerSize = sizeVal;\n  const offset = Math.max(totalSize * 0.25, 4);\n\n  // Count badge font: separate container styles from text styles\n  // getFontSize may return transform:scale() for small sizes — only apply that to the inner text\n  const countFontRaw = getFontSize(innerSize);\n  const { transform: countScale, ...countContainerFont } = countFontRaw as {\n    transform?: string;\n    fontSize: number;\n    fontWeight?: number;\n  };\n\n  return (\n    <div\n      className={cn(\n        'ald-avatar-group tw-inline-flex tw-items-center',\n        className,\n      )}\n      style={style}\n    >\n      {displayed.map((child, i) => (\n        <span\n          key={i}\n          className=\"tw-inline-flex tw-flex-none tw-items-center tw-justify-center\"\n          style={{\n            width: totalSize,\n            height: totalSize,\n            marginLeft: i === 0 ? 0 : -offset,\n            borderRadius,\n            backgroundColor: 'var(--background-default)',\n            position: 'relative',\n            zIndex: i,\n          }}\n        >\n          {React.isValidElement<IAvatarProps>(child)\n            ? React.cloneElement(child, { size: innerSize })\n            : child}\n        </span>\n      ))}\n      {overflow > 0 && (\n        <span\n          className=\"tw-inline-flex tw-flex-none tw-items-center tw-justify-center\"\n          style={{\n            marginLeft: -offset,\n            borderRadius,\n            backgroundColor: 'var(--background-default)',\n            width: totalSize,\n            height: totalSize,\n            position: 'relative',\n            zIndex: displayed.length,\n          }}\n        >\n          <span\n            className=\"tw-inline-flex tw-size-full tw-items-center tw-justify-center tw-overflow-hidden tw-bg-[var(--background-neutral-subtle)] tw-text-[var(--content-secondary)]\"\n            style={{\n              width: innerSize,\n              height: innerSize,\n              borderRadius,\n              lineHeight: 1,\n            }}\n          >\n            <span\n              style={{\n                fontFamily: 'monospace',\n                ...countContainerFont,\n                ...(countScale ? { transform: countScale, display: 'block' } : {}),\n              }}\n            >\n              +{overflow}\n            </span>\n          </span>\n        </span>\n      )}\n    </div>\n  );\n}\n\ntype AvatarComponent = typeof AvatarBase & {\n  Group: typeof AvatarGroup;\n};\n\nconst Avatar = AvatarBase as AvatarComponent;\nAvatar.Group = AvatarGroup;\n\nexport type { IAvatarProps };\nexport default Avatar;\n"],"mappings":";;;;;;AAaA,IAAM,kBAA0C;CAC9C,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAED,SAAS,YAAY,OAAyB;CAC5C,MAAM,EAAE,UAAU,WAAW,OAAO,UAAU,SAAS;CACvD,MAAM,aAAa,MAAM,SAAS,QAAQ,SAAS;CACnD,MAAM,YAAY,WAAW,WAAW,MAAM,GAAG,SAAS,GAAG;CAC7D,MAAM,WAAW,WAAW,WAAW,SAAS,WAAW;CAG3D,MAAM,oBAA4B;AAChC,MAAI,KACF,QAAO,OAAO,SAAS,WAAW,OAAO,gBAAgB,SAAS;EAEpE,MAAM,aAAa,WAAW;AAC9B,MACE,MAAM,eAA6B,WAAW,IAC9C,WAAW,MAAM,MACjB;GACA,MAAM,IAAI,WAAW,MAAM;AAC3B,UAAO,OAAO,MAAM,WAAW,IAAI,gBAAgB,MAAM;;AAE3D,SAAO;;CAGT,MAAM,UAAU,aAAa;CAG7B,MAAM,qBAA0C;EAC9C,MAAM,aAAa,WAAW;AAC9B,MACE,MAAM,eAA6B,WAAW,IAC9C,WAAW,MAAM,MAEjB,QAAO,WAAW,MAAM;AAE1B,SAAO;;CAKT,MAAM,eAFW,cAAc,KAEG,WAAW,QAAQ;CAGrD,MAAM,YAAY,WAFA,WAAW,KAAK,IAAI,KAEE;CACxC,MAAM,YAAY;CAClB,MAAM,SAAS,KAAK,IAAI,YAAY,KAAM,EAAE;CAK5C,MAAM,EAAE,WAAW,YAAY,GAAG,uBADb,YAAY,UAAU;AAO3C,QACE,qBAAC,OAAD;EACE,WAAW,GACT,mDACA,UACD;EACM;YALT,CAOG,UAAU,KAAK,OAAO,MACrB,oBAAC,QAAD;GAEE,WAAU;GACV,OAAO;IACL,OAAO;IACP,QAAQ;IACR,YAAY,MAAM,IAAI,IAAI,CAAC;IAC3B;IACA,iBAAiB;IACjB,UAAU;IACV,QAAQ;IACT;aAEA,MAAM,eAA6B,MAAM,GACtC,MAAM,aAAa,OAAO,EAAE,MAAM,WAAW,CAAC,GAC9C;GACC,EAfA,EAeA,CACP,EACD,WAAW,KACV,oBAAC,QAAD;GACE,WAAU;GACV,OAAO;IACL,YAAY,CAAC;IACb;IACA,iBAAiB;IACjB,OAAO;IACP,QAAQ;IACR,UAAU;IACV,QAAQ,UAAU;IACnB;aAED,oBAAC,QAAD;IACE,WAAU;IACV,OAAO;KACL,OAAO;KACP,QAAQ;KACR;KACA,YAAY;KACb;cAED,qBAAC,QAAD;KACE,OAAO;MACL,YAAY;MACZ,GAAG;MACH,GAAI,aAAa;OAAE,WAAW;OAAY,SAAS;OAAS,GAAG,EAAE;MAClE;eALH,CAMC,KACG,SACG;;IACF,CAAA;GACF,CAAA,CAEL;;;AAQV,IAAM,SAAS;AACf,OAAO,QAAQ"}

package/dist/Badge/index.d.ts

@@ -13,6 +13,7 @@ export interface BadgeProps {
      */
     size?: 'default' | 'large';
     className?: string;
+    style?: React.CSSProperties;
     onClick?: React.MouseEventHandler;
 }
 export default function Badge(props: BadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/Badge/index.js

@@ -3,18 +3,25 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/Badge/index.tsx
-var badgeVariants = cva("ald-badge tw-inline-flex tw-cursor-default tw-items-center tw-rounded-[99px] tw-font-medium", {
+var STATUS_DOT_COLORS = {
+	default: "tw-bg-[var(--content-secondary)]",
+	success: "tw-bg-[var(--content-positive-secondary)]",
+	error: "tw-bg-[var(--content-negative-secondary)]",
+	info: "tw-bg-[var(--content-informative-secondary)]",
+	warning: "tw-bg-[var(--content-warning-secondary)]"
+};
+var badgeVariants = cva("ald-badge tw-inline-flex tw-cursor-default tw-items-center tw-justify-center tw-rounded-[99px]", {
 	variants: {
 		size: {
-			default: "tw-h-[20px] tw-min-w-[20px] tw-px-[var(--alias-padding-75)] tw-py-[var(--alias-padding-25)] tw-text-xs tw-leading-4",
-			large: "ald-badge-large tw-h-[24px] tw-min-w-[24px] tw-px-[var(--alias-padding-75)] tw-py-[var(--alias-padding-25)] tw-text-sm tw-leading-5"
+			default: "tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-h-[var(--3xs)] tw-min-w-[var(--3xs)] tw-gap-[var(--component-gap-xs)] tw-px-[var(--component-padding-xs)] tw-text-xs tw-font-normal tw-leading-4",
+			large: "ald-badge-large tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-h-[var(--2xs)] tw-min-w-[var(--2xs)] tw-gap-[var(--component-gap-xs)] tw-px-[var(--component-padding-sm)] tw-text-sm tw-font-normal tw-leading-5"
 		},
 		status: {
-			success: "ald-badge-success tw-bg-[var(--background-positive-muted)] tw-text-[var(--content-positive-primary)]",
-			error: "ald-badge-error tw-bg-[var(--background-negative-muted)] tw-text-[var(--content-negative-primary)]",
-			default: "ald-badge-default tw-bg-[var(--background-neutral-muted)] tw-text-[var(--content-neutral-primary)]",
-			info: "ald-badge-info tw-bg-[var(--background-informative-muted)] tw-text-[var(--content-informative-primary)]",
-			warning: "ald-badge-warning tw-bg-[var(--background-warning-muted)] tw-text-[var(--content-warning-primary)]"
+			default: "ald-badge-default tw-bg-[var(--non-semantic-background-grey-muted)] tw-text-[var(--non-semantic-content-grey-primary)]",
+			success: "ald-badge-success tw-bg-[var(--non-semantic-background-green-muted)] tw-text-[var(--non-semantic-content-green-primary)]",
+			error: "ald-badge-error tw-bg-[var(--non-semantic-background-red-muted)] tw-text-[var(--non-semantic-content-red-primary)]",
+			info: "ald-badge-info tw-bg-[var(--non-semantic-background-blue-muted)] tw-text-[var(--non-semantic-content-blue-primary)]",
+			warning: "ald-badge-warning tw-bg-[var(--non-semantic-background-orange-muted)] tw-text-[var(--non-semantic-content-orange-primary)]"
 		},
 		clickable: {
 			true: "ald-badge-clickable tw-cursor-pointer",
@@ -28,7 +35,19 @@ var badgeVariants = cva("ald-badge tw-inline-flex tw-cursor-default tw-items-cen
 	}
 });
 function Badge(props) {
-	const { count, status = "default", size, className, onClick, ...rest } = props;
+	const { count, status = "default", size, className, style, onClick, ...rest } = props;
+	if (count === "" || count === void 0) return /* @__PURE__ */ jsx("div", {
+		...rest,
+		className: cn("ald-badge ald-badge-dot tw-flex tw-aspect-square tw-items-start tw-rounded-full", STATUS_DOT_COLORS[status], typeof onClick === "function" && "tw-cursor-pointer", className),
+		style: {
+			width: 8,
+			height: 8,
+			gap: 8,
+			...style
+		},
+		onClick
+	});
+	const isNumeric = typeof count === "number" || typeof count === "string" && /^[+-]?\d+$/.test(count.trim());
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
 		className: cn(badgeVariants({
@@ -36,6 +55,10 @@ function Badge(props) {
 			status,
 			clickable: typeof onClick === "function"
 		}), className),
+		style: isNumeric ? {
+			fontFamily: "monospace",
+			...style
+		} : style,
 		onClick,
 		children: count
 	});

package/dist/Badge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Badge/index.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface BadgeProps {\n  /**\n   * 展示的文本内容\n   */\n  count: string | number;\n  /**\n   * 状态\n   */\n  status?: 'success' | 'error' | 'default' | 'info' | 'warning';\n  /**\n   * 大小\n   */\n  size?: 'default' | 'large';\n  className?: string;\n  onClick?: React.MouseEventHandler;\n}\n\nconst badgeVariants = cva(\n  'ald-badge tw-inline-flex tw-cursor-default tw-items-center tw-rounded-[99px] tw-font-medium',\n  {\n    variants: {\n      size: {\n        default:\n          'tw-h-[20px] tw-min-w-[20px] tw-px-[var(--alias-padding-75)] tw-py-[var(--alias-padding-25)] tw-text-xs tw-leading-4',\n        large:\n          'ald-badge-large tw-h-[24px] tw-min-w-[24px] tw-px-[var(--alias-padding-75)] tw-py-[var(--alias-padding-25)] tw-text-sm tw-leading-5',\n      },\n      status: {\n        success:\n          'ald-badge-success tw-bg-[var(--background-positive-muted)] tw-text-[var(--content-positive-primary)]',\n        error:\n          'ald-badge-error tw-bg-[var(--background-negative-muted)] tw-text-[var(--content-negative-primary)]',\n        default:\n          'ald-badge-default tw-bg-[var(--background-neutral-muted)] tw-text-[var(--content-neutral-primary)]',\n        info: 'ald-badge-info tw-bg-[var(--background-informative-muted)] tw-text-[var(--content-informative-primary)]',\n        warning:\n          'ald-badge-warning tw-bg-[var(--background-warning-muted)] tw-text-[var(--content-warning-primary)]',\n      },\n      clickable: {\n        true: 'ald-badge-clickable tw-cursor-pointer',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n      status: 'default',\n      clickable: false,\n    },\n  },\n);\n\nexport default function Badge(props: BadgeProps) {\n  const {\n    count,\n    status = 'default',\n    size,\n    className,\n    onClick,\n    ...rest\n  } = props;\n\n  return (\n    <div\n      {...rest}\n      className={cn(\n        badgeVariants({\n          size: size || 'default',\n          status,\n          clickable: typeof onClick === 'function',\n        }),\n        className,\n      )}\n      onClick={onClick}\n    >\n      {count}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAqBA,IAAM,gBAAgB,IACpB,+FACA;CACE,UAAU;EACR,MAAM;GACJ,SACE;GACF,OACE;GACH;EACD,QAAQ;GACN,SACE;GACF,OACE;GACF,SACE;GACF,MAAM;GACN,SACE;GACH;EACD,WAAW;GACT,MAAM;GACN,OAAO;GACR;EACF;CACD,iBAAiB;EACf,MAAM;EACN,QAAQ;EACR,WAAW;EACZ;CACF,CACF;AAED,SAAwB,MAAM,OAAmB;CAC/C,MAAM,EACJ,OACA,SAAS,WACT,MACA,WACA,SACA,GAAG,SACD;AAEJ,QACE,oBAAC,OAAD;EACE,GAAI;EACJ,WAAW,GACT,cAAc;GACZ,MAAM,QAAQ;GACd;GACA,WAAW,OAAO,YAAY;GAC/B,CAAC,EACF,UACD;EACQ;YAER;EACG,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Badge/index.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface BadgeProps {\n  /**\n   * 展示的文本内容\n   */\n  count: string | number;\n  /**\n   * 状态\n   */\n  status?: 'success' | 'error' | 'default' | 'info' | 'warning';\n  /**\n   * 大小\n   */\n  size?: 'default' | 'large';\n  className?: string;\n  style?: React.CSSProperties;\n  onClick?: React.MouseEventHandler;\n}\n\nconst STATUS_DOT_COLORS: Record<string, string> = {\n  default: 'tw-bg-[var(--content-secondary)]',\n  success: 'tw-bg-[var(--content-positive-secondary)]',\n  error: 'tw-bg-[var(--content-negative-secondary)]',\n  info: 'tw-bg-[var(--content-informative-secondary)]',\n  warning: 'tw-bg-[var(--content-warning-secondary)]',\n};\n\nconst badgeVariants = cva(\n  'ald-badge tw-inline-flex tw-cursor-default tw-items-center tw-justify-center tw-rounded-[99px]',\n  {\n    variants: {\n      size: {\n        default:\n          'tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-h-[var(--3xs)] tw-min-w-[var(--3xs)] tw-gap-[var(--component-gap-xs)] tw-px-[var(--component-padding-xs)] tw-text-xs tw-font-normal tw-leading-4',\n        large:\n          'ald-badge-large tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-h-[var(--2xs)] tw-min-w-[var(--2xs)] tw-gap-[var(--component-gap-xs)] tw-px-[var(--component-padding-sm)] tw-text-sm tw-font-normal tw-leading-5',\n      },\n      status: {\n        default:\n          'ald-badge-default tw-bg-[var(--non-semantic-background-grey-muted)] tw-text-[var(--non-semantic-content-grey-primary)]',\n        success:\n          'ald-badge-success tw-bg-[var(--non-semantic-background-green-muted)] tw-text-[var(--non-semantic-content-green-primary)]',\n        error:\n          'ald-badge-error tw-bg-[var(--non-semantic-background-red-muted)] tw-text-[var(--non-semantic-content-red-primary)]',\n        info: 'ald-badge-info tw-bg-[var(--non-semantic-background-blue-muted)] tw-text-[var(--non-semantic-content-blue-primary)]',\n        warning:\n          'ald-badge-warning tw-bg-[var(--non-semantic-background-orange-muted)] tw-text-[var(--non-semantic-content-orange-primary)]',\n      },\n      clickable: {\n        true: 'ald-badge-clickable tw-cursor-pointer',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n      status: 'default',\n      clickable: false,\n    },\n  },\n);\n\nexport default function Badge(props: BadgeProps) {\n  const {\n    count,\n    status = 'default',\n    size,\n    className,\n    style,\n    onClick,\n    ...rest\n  } = props;\n\n  const isDot = count === '' || count === undefined;\n\n  if (isDot) {\n    return (\n      <div\n        {...rest}\n        className={cn(\n          'ald-badge ald-badge-dot tw-flex tw-aspect-square tw-items-start tw-rounded-full',\n          STATUS_DOT_COLORS[status],\n          typeof onClick === 'function' && 'tw-cursor-pointer',\n          className,\n        )}\n        style={{ width: 8, height: 8, gap: 8, ...style }}\n        onClick={onClick}\n      />\n    );\n  }\n\n  const isNumeric =\n    typeof count === 'number' ||\n    (typeof count === 'string' && /^[+-]?\\d+$/.test(count.trim()));\n\n  return (\n    <div\n      {...rest}\n      className={cn(\n        badgeVariants({\n          size: size || 'default',\n          status,\n          clickable: typeof onClick === 'function',\n        }),\n        className,\n      )}\n      style={isNumeric ? { fontFamily: 'monospace', ...style } : style}\n      onClick={onClick}\n    >\n      {count}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAsBA,IAAM,oBAA4C;CAChD,SAAS;CACT,SAAS;CACT,OAAO;CACP,MAAM;CACN,SAAS;CACV;AAED,IAAM,gBAAgB,IACpB,kGACA;CACE,UAAU;EACR,MAAM;GACJ,SACE;GACF,OACE;GACH;EACD,QAAQ;GACN,SACE;GACF,SACE;GACF,OACE;GACF,MAAM;GACN,SACE;GACH;EACD,WAAW;GACT,MAAM;GACN,OAAO;GACR;EACF;CACD,iBAAiB;EACf,MAAM;EACN,QAAQ;EACR,WAAW;EACZ;CACF,CACF;AAED,SAAwB,MAAM,OAAmB;CAC/C,MAAM,EACJ,OACA,SAAS,WACT,MACA,WACA,OACA,SACA,GAAG,SACD;AAIJ,KAFc,UAAU,MAAM,UAAU,OAGtC,QACE,oBAAC,OAAD;EACE,GAAI;EACJ,WAAW,GACT,mFACA,kBAAkB,SAClB,OAAO,YAAY,cAAc,qBACjC,UACD;EACD,OAAO;GAAE,OAAO;GAAG,QAAQ;GAAG,KAAK;GAAG,GAAG;GAAO;EACvC;EACT,CAAA;CAIN,MAAM,YACJ,OAAO,UAAU,YAChB,OAAO,UAAU,YAAY,aAAa,KAAK,MAAM,MAAM,CAAC;AAE/D,QACE,oBAAC,OAAD;EACE,GAAI;EACJ,WAAW,GACT,cAAc;GACZ,MAAM,QAAQ;GACd;GACA,WAAW,OAAO,YAAY;GAC/B,CAAC,EACF,UACD;EACD,OAAO,YAAY;GAAE,YAAY;GAAa,GAAG;GAAO,GAAG;EAClD;YAER;EACG,CAAA"}

package/dist/Breadcrumb/index.js

@@ -2,13 +2,22 @@ import { cn } from "../lib/utils.js";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/Breadcrumb/index.tsx
-var DEFAULT_SEPARATOR_SVG = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAxMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05LjQ0NzE5IDAuMTA1NzkyQzkuOTQxMTcgMC4zNTI3ODEgMTAuMTQxNCAwLjk1MzQ1NCA5Ljg5NDQgMS40NDc0M0wxLjg5NDQgMTkuNDQ3NEMxLjY0NzQxIDE5Ljk0MTQgMS4wNDY3NCAyMC4xNDE2IDAuNTUyNzYxIDE5Ljg5NDZDMC4wNTg3ODI5IDE5LjY0NzcgLTAuMTQxNDQyIDE5LjA0NyAwLjEwNTU0OCAxOC41NTNMOC4xMDU1NSAwLjU1MzAwNkM4LjM1MjU0IDAuMDU5MDI3IDguOTUzMjEgLTAuMTQxMTk3IDkuNDQ3MTkgMC4xMDU3OTJaIiBmaWxsPSIjMDAxQTMzIiBmaWxsLW9wYWNpdHk9IjAuNSIvPgo8L3N2Zz4=";
 var DefaultSeparator = () => /* @__PURE__ */ jsx("span", {
-	className: "default-separator tw-mx-2 tw-inline-block tw-h-[14px] tw-w-[7px] tw-opacity-60",
-	style: {
-		background: `url('${DEFAULT_SEPARATOR_SVG}') no-repeat center`,
-		backgroundSize: "100% 100%"
-	}
+	className: "default-separator tw-mx-1 tw-inline-flex tw-items-center tw-text-[var(--content-tertiary)]",
+	children: /* @__PURE__ */ jsx("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M6 3.5L10.5 8L6 12.5",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	})
 });
 var Breadcrumb = (props) => {
 	const { className, style, separator = /* @__PURE__ */ jsx(DefaultSeparator, {}), items, children } = props;
@@ -16,9 +25,9 @@ var Breadcrumb = (props) => {
 		if (items) return items.map((item, index) => {
 			const isLast = index === items.length - 1;
 			return /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx("span", {
-				className: cn("ald-breadcrumb-item tw-cursor-pointer tw-text-sm", isLast ? "tw-text-[var(--content-primary)]" : "tw-text-[var(--content-secondary)] hover:tw-text-[var(--content-primary)]", item.className),
+				className: cn("ald-breadcrumb-item tw-cursor-pointer tw-text-sm [&_a]:tw-text-[var(--alias-colors-link-default)] [&_a:hover]:tw-text-[var(--alias-colors-link-hover)]", isLast ? "tw-text-[var(--content-primary)]" : "tw-text-[var(--content-tertiary)] hover:tw-text-[var(--content-primary)]", item.className),
 				children: item.href ? /* @__PURE__ */ jsx("a", {
-					className: "ald-breadcrumb-link tw-text-inherit",
+					className: "ald-breadcrumb-link tw-text-[var(--alias-colors-link-default)] hover:tw-text-[var(--alias-colors-link-hover)]",
 					href: item.href,
 					onClick: item.onClick,
 					children: item.title
@@ -27,7 +36,7 @@ var Breadcrumb = (props) => {
 					children: item.title
 				})
 			}), separator !== null && !isLast && /* @__PURE__ */ jsx("span", {
-				className: "ald-breadcrumb-separator",
+				className: "ald-breadcrumb-separator tw-inline-flex tw-items-center",
 				children: separator
 			})] }, index);
 		});
@@ -35,7 +44,7 @@ var Breadcrumb = (props) => {
 		return childArray.map((child, index) => {
 			const isLast = index === childArray.length - 1;
 			return /* @__PURE__ */ jsxs(React.Fragment, { children: [React.isValidElement(child) ? React.cloneElement(child, { "data-last": isLast ? "true" : void 0 }) : child, separator !== null && !isLast && /* @__PURE__ */ jsx("span", {
-				className: "ald-breadcrumb-separator",
+				className: "ald-breadcrumb-separator tw-inline-flex tw-items-center",
 				children: separator
 			})] }, index);
 		});
@@ -49,10 +58,10 @@ var Breadcrumb = (props) => {
 var BreadcrumbItem = (props) => {
 	const { className, children, href, onClick, ...rest } = props;
 	return /* @__PURE__ */ jsx("span", {
-		className: cn("ald-breadcrumb-item tw-cursor-pointer tw-text-sm", rest["data-last"] === "true" ? "tw-text-[var(--content-primary)]" : "tw-text-[var(--content-secondary)] hover:tw-text-[var(--content-primary)]", className),
+		className: cn("ald-breadcrumb-item tw-cursor-pointer tw-text-sm [&_a]:tw-text-[var(--alias-colors-link-default)] [&_a:hover]:tw-text-[var(--alias-colors-link-hover)]", rest["data-last"] === "true" ? "tw-text-[var(--content-primary)]" : "tw-text-[var(--content-tertiary)] hover:tw-text-[var(--content-primary)]", className),
 		onClick,
 		children: href ? /* @__PURE__ */ jsx("a", {
-			className: "ald-breadcrumb-link tw-text-inherit",
+			className: "ald-breadcrumb-link tw-text-[var(--alias-colors-link-default)] hover:tw-text-[var(--alias-colors-link-hover)]",
 			href,
 			children
 		}) : children