@aloudata/aloudata-design 3.0.17 → 3.0.19

package/dist/Card/index.js

@@ -24,7 +24,7 @@ function Card(props) {
 				children: cover
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: cn("ald-card-body ant-card-body tw-flex tw-flex-col tw-items-start tw-gap-5 tw-self-stretch tw-p-6", size === "small" && "!tw-gap-3 !tw-p-4"),
+				className: cn("ald-card-body ant-card-body tw-flex tw-flex-col tw-items-stretch tw-gap-5 tw-self-stretch tw-p-6", size === "small" && "!tw-gap-3 !tw-p-4"),
 				style: bodyStyle,
 				children
 			}),

package/dist/Card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Card/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface CardProps {\n  title?: React.ReactNode;\n  extra?: React.ReactNode;\n  bordered?: boolean;\n  hoverable?: boolean;\n  loading?: boolean;\n  size?: 'default' | 'small';\n  type?: 'inner';\n  className?: string;\n  style?: React.CSSProperties;\n  bodyStyle?: React.CSSProperties;\n  headStyle?: React.CSSProperties;\n  children?: React.ReactNode;\n  cover?: React.ReactNode;\n  actions?: React.ReactNode[];\n}\n\nexport interface CardGridProps {\n  className?: string;\n  style?: React.CSSProperties;\n  hoverable?: boolean;\n  children?: React.ReactNode;\n}\n\nexport interface CardMetaProps {\n  className?: string;\n  style?: React.CSSProperties;\n  avatar?: React.ReactNode;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n}\n\nfunction Card(props: CardProps) {\n  const {\n    title,\n    extra,\n    bordered = true,\n    hoverable,\n    size,\n    type,\n    className,\n    style,\n    bodyStyle,\n    headStyle,\n    children,\n    cover,\n    actions,\n  } = props;\n\n  return (\n    <div\n      className={cn(\n        'ald-card tw-flex tw-flex-col tw-items-stretch tw-overflow-hidden tw-rounded-r-150 tw-bg-[var(--background-default)] tw-shadow-[0_2px_2px_-1px_rgba(27,36,44,0.04),0_2px_8px_-1px_rgba(27,36,44,0.08)] tw-outline tw-outline-1 tw-outline-[var(--border-default-alpha)]',\n        !bordered && '!tw-outline-transparent',\n        hoverable &&\n          'tw-cursor-pointer tw-transition-shadow hover:tw-shadow-[0_1px_2px_-2px_rgba(0,0,0,0.16),0_3px_6px_0_rgba(0,0,0,0.12),0_5px_12px_4px_rgba(0,0,0,0.09)]',\n        size === 'small' && 'ald-card-small',\n        type === 'inner' && 'ald-card-inner',\n        className,\n      )}\n      style={style}\n    >\n      {(title || extra) && (\n        <div\n          className={cn(\n            'ald-card-head tw-flex tw-items-center tw-justify-between tw-gap-4 tw-self-stretch tw-border-0 tw-border-b tw-border-solid tw-border-[var(--border-default)] tw-px-6 tw-py-4',\n            size === 'small' && '!tw-px-4 !tw-py-3',\n          )}\n          style={headStyle}\n        >\n          {title && (\n            <div\n              className={cn(\n                'ald-card-head-title tw-text-base tw-font-semibold tw-text-[var(--content-primary)]',\n                size === 'small' && '!tw-text-sm',\n              )}\n            >\n              {title}\n            </div>\n          )}\n          {extra && <div className=\"ald-card-extra tw-text-sm\">{extra}</div>}\n        </div>\n      )}\n      {cover && <div className=\"ald-card-cover\">{cover}</div>}\n      <div\n        // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n        className={cn(\n          'ald-card-body ant-card-body tw-flex tw-flex-col tw-items-start tw-gap-5 tw-self-stretch tw-p-6',\n          size === 'small' && '!tw-gap-3 !tw-p-4',\n        )}\n        style={bodyStyle}\n      >\n        {children}\n      </div>\n      {actions && actions.length > 0 && (\n        <div className=\"ald-card-actions tw-flex tw-border-t tw-border-solid tw-border-[var(--border-default)]\">\n          {actions.map((action, i) => (\n            <div\n              key={i}\n              className=\"ald-card-action tw-flex-1 tw-py-3 tw-text-center\"\n            >\n              {action}\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction Grid({ className, style, hoverable, children }: CardGridProps) {\n  return (\n    <div\n      className={cn(\n        'ald-card-grid tw-w-1/3 tw-border-0 tw-border-b tw-border-r tw-border-solid tw-border-[var(--border-default)] tw-p-6',\n        hoverable && 'tw-transition-shadow hover:tw-shadow-md',\n        className,\n      )}\n      style={style}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction Meta({ className, style, avatar, title, description }: CardMetaProps) {\n  return (\n    <div\n      className={cn('ald-card-meta tw-flex tw-items-start tw-gap-4', className)}\n      style={style}\n    >\n      {avatar && (\n        <div className=\"ald-card-meta-avatar tw-flex-none\">{avatar}</div>\n      )}\n      <div className=\"ald-card-meta-detail tw-flex-1 tw-overflow-hidden\">\n        {title && (\n          <div className=\"ald-card-meta-title tw-truncate tw-text-base tw-font-medium tw-text-[var(--content-primary)]\">\n            {title}\n          </div>\n        )}\n        {description && (\n          <div className=\"ald-card-meta-description tw-text-sm tw-text-[var(--content-secondary)]\">\n            {description}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nCard.Grid = Grid;\nCard.Meta = Meta;\n\nexport default Card;\n"],"mappings":";;;;AAmCA,SAAS,KAAK,OAAkB;CAC9B,MAAM,EACJ,OACA,OACA,WAAW,MACX,WACA,MACA,MACA,WACA,OACA,WACA,WACA,UACA,OACA,YACE;AAEJ,QACE,qBAAC,OAAD;EACE,WAAW,GACT,0QACA,CAAC,YAAY,2BACb,aACE,yJACF,SAAS,WAAW,kBACpB,SAAS,WAAW,kBACpB,UACD;EACM;YAVT;IAYI,SAAS,UACT,qBAAC,OAAD;IACE,WAAW,GACT,+KACA,SAAS,WAAW,oBACrB;IACD,OAAO;cALT,CAOG,SACC,oBAAC,OAAD;KACE,WAAW,GACT,sFACA,SAAS,WAAW,cACrB;eAEA;KACG,CAAA,EAEP,SAAS,oBAAC,OAAD;KAAK,WAAU;eAA6B;KAAY,CAAA,CAC9D;;GAEP,SAAS,oBAAC,OAAD;IAAK,WAAU;cAAkB;IAAY,CAAA;GACvD,oBAAC,OAAD;IAEE,WAAW,GACT,kGACA,SAAS,WAAW,oBACrB;IACD,OAAO;IAEN;IACG,CAAA;GACL,WAAW,QAAQ,SAAS,KAC3B,oBAAC,OAAD;IAAK,WAAU;cACZ,QAAQ,KAAK,QAAQ,MACpB,oBAAC,OAAD;KAEE,WAAU;eAET;KACG,EAJC,EAID,CACN;IACE,CAAA;GAEJ;;;AAIV,SAAS,KAAK,EAAE,WAAW,OAAO,WAAW,YAA2B;AACtE,QACE,oBAAC,OAAD;EACE,WAAW,GACT,uHACA,aAAa,2CACb,UACD;EACM;EAEN;EACG,CAAA;;AAIV,SAAS,KAAK,EAAE,WAAW,OAAO,QAAQ,OAAO,eAA8B;AAC7E,QACE,qBAAC,OAAD;EACE,WAAW,GAAG,iDAAiD,UAAU;EAClE;YAFT,CAIG,UACC,oBAAC,OAAD;GAAK,WAAU;aAAqC;GAAa,CAAA,EAEnE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,SACC,oBAAC,OAAD;IAAK,WAAU;cACZ;IACG,CAAA,EAEP,eACC,oBAAC,OAAD;IAAK,WAAU;cACZ;IACG,CAAA,CAEJ;KACF;;;AAIV,KAAK,OAAO;AACZ,KAAK,OAAO"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Card/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface CardProps {\n  title?: React.ReactNode;\n  extra?: React.ReactNode;\n  bordered?: boolean;\n  hoverable?: boolean;\n  loading?: boolean;\n  size?: 'default' | 'small';\n  type?: 'inner';\n  className?: string;\n  style?: React.CSSProperties;\n  bodyStyle?: React.CSSProperties;\n  headStyle?: React.CSSProperties;\n  children?: React.ReactNode;\n  cover?: React.ReactNode;\n  actions?: React.ReactNode[];\n}\n\nexport interface CardGridProps {\n  className?: string;\n  style?: React.CSSProperties;\n  hoverable?: boolean;\n  children?: React.ReactNode;\n}\n\nexport interface CardMetaProps {\n  className?: string;\n  style?: React.CSSProperties;\n  avatar?: React.ReactNode;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n}\n\nfunction Card(props: CardProps) {\n  const {\n    title,\n    extra,\n    bordered = true,\n    hoverable,\n    size,\n    type,\n    className,\n    style,\n    bodyStyle,\n    headStyle,\n    children,\n    cover,\n    actions,\n  } = props;\n\n  return (\n    <div\n      className={cn(\n        'ald-card tw-flex tw-flex-col tw-items-stretch tw-overflow-hidden tw-rounded-r-150 tw-bg-[var(--background-default)] tw-shadow-[0_2px_2px_-1px_rgba(27,36,44,0.04),0_2px_8px_-1px_rgba(27,36,44,0.08)] tw-outline tw-outline-1 tw-outline-[var(--border-default-alpha)]',\n        !bordered && '!tw-outline-transparent',\n        hoverable &&\n          'tw-cursor-pointer tw-transition-shadow hover:tw-shadow-[0_1px_2px_-2px_rgba(0,0,0,0.16),0_3px_6px_0_rgba(0,0,0,0.12),0_5px_12px_4px_rgba(0,0,0,0.09)]',\n        size === 'small' && 'ald-card-small',\n        type === 'inner' && 'ald-card-inner',\n        className,\n      )}\n      style={style}\n    >\n      {(title || extra) && (\n        <div\n          className={cn(\n            'ald-card-head tw-flex tw-items-center tw-justify-between tw-gap-4 tw-self-stretch tw-border-0 tw-border-b tw-border-solid tw-border-[var(--border-default)] tw-px-6 tw-py-4',\n            size === 'small' && '!tw-px-4 !tw-py-3',\n          )}\n          style={headStyle}\n        >\n          {title && (\n            <div\n              className={cn(\n                'ald-card-head-title tw-text-base tw-font-semibold tw-text-[var(--content-primary)]',\n                size === 'small' && '!tw-text-sm',\n              )}\n            >\n              {title}\n            </div>\n          )}\n          {extra && <div className=\"ald-card-extra tw-text-sm\">{extra}</div>}\n        </div>\n      )}\n      {cover && <div className=\"ald-card-cover\">{cover}</div>}\n      <div\n        // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n        className={cn(\n          'ald-card-body ant-card-body tw-flex tw-flex-col tw-items-stretch tw-gap-5 tw-self-stretch tw-p-6',\n          size === 'small' && '!tw-gap-3 !tw-p-4',\n        )}\n        style={bodyStyle}\n      >\n        {children}\n      </div>\n      {actions && actions.length > 0 && (\n        <div className=\"ald-card-actions tw-flex tw-border-t tw-border-solid tw-border-[var(--border-default)]\">\n          {actions.map((action, i) => (\n            <div\n              key={i}\n              className=\"ald-card-action tw-flex-1 tw-py-3 tw-text-center\"\n            >\n              {action}\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction Grid({ className, style, hoverable, children }: CardGridProps) {\n  return (\n    <div\n      className={cn(\n        'ald-card-grid tw-w-1/3 tw-border-0 tw-border-b tw-border-r tw-border-solid tw-border-[var(--border-default)] tw-p-6',\n        hoverable && 'tw-transition-shadow hover:tw-shadow-md',\n        className,\n      )}\n      style={style}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction Meta({ className, style, avatar, title, description }: CardMetaProps) {\n  return (\n    <div\n      className={cn('ald-card-meta tw-flex tw-items-start tw-gap-4', className)}\n      style={style}\n    >\n      {avatar && (\n        <div className=\"ald-card-meta-avatar tw-flex-none\">{avatar}</div>\n      )}\n      <div className=\"ald-card-meta-detail tw-flex-1 tw-overflow-hidden\">\n        {title && (\n          <div className=\"ald-card-meta-title tw-truncate tw-text-base tw-font-medium tw-text-[var(--content-primary)]\">\n            {title}\n          </div>\n        )}\n        {description && (\n          <div className=\"ald-card-meta-description tw-text-sm tw-text-[var(--content-secondary)]\">\n            {description}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nCard.Grid = Grid;\nCard.Meta = Meta;\n\nexport default Card;\n"],"mappings":";;;;AAmCA,SAAS,KAAK,OAAkB;CAC9B,MAAM,EACJ,OACA,OACA,WAAW,MACX,WACA,MACA,MACA,WACA,OACA,WACA,WACA,UACA,OACA,YACE;AAEJ,QACE,qBAAC,OAAD;EACE,WAAW,GACT,0QACA,CAAC,YAAY,2BACb,aACE,yJACF,SAAS,WAAW,kBACpB,SAAS,WAAW,kBACpB,UACD;EACM;YAVT;IAYI,SAAS,UACT,qBAAC,OAAD;IACE,WAAW,GACT,+KACA,SAAS,WAAW,oBACrB;IACD,OAAO;cALT,CAOG,SACC,oBAAC,OAAD;KACE,WAAW,GACT,sFACA,SAAS,WAAW,cACrB;eAEA;KACG,CAAA,EAEP,SAAS,oBAAC,OAAD;KAAK,WAAU;eAA6B;KAAY,CAAA,CAC9D;;GAEP,SAAS,oBAAC,OAAD;IAAK,WAAU;cAAkB;IAAY,CAAA;GACvD,oBAAC,OAAD;IAEE,WAAW,GACT,oGACA,SAAS,WAAW,oBACrB;IACD,OAAO;IAEN;IACG,CAAA;GACL,WAAW,QAAQ,SAAS,KAC3B,oBAAC,OAAD;IAAK,WAAU;cACZ,QAAQ,KAAK,QAAQ,MACpB,oBAAC,OAAD;KAEE,WAAU;eAET;KACG,EAJC,EAID,CACN;IACE,CAAA;GAEJ;;;AAIV,SAAS,KAAK,EAAE,WAAW,OAAO,WAAW,YAA2B;AACtE,QACE,oBAAC,OAAD;EACE,WAAW,GACT,uHACA,aAAa,2CACb,UACD;EACM;EAEN;EACG,CAAA;;AAIV,SAAS,KAAK,EAAE,WAAW,OAAO,QAAQ,OAAO,eAA8B;AAC7E,QACE,qBAAC,OAAD;EACE,WAAW,GAAG,iDAAiD,UAAU;EAClE;YAFT,CAIG,UACC,oBAAC,OAAD;GAAK,WAAU;aAAqC;GAAa,CAAA,EAEnE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,SACC,oBAAC,OAAD;IAAK,WAAU;cACZ;IACG,CAAA,EAEP,eACC,oBAAC,OAAD;IAAK,WAAU;cACZ;IACG,CAAA,CAEJ;KACF;;;AAIV,KAAK,OAAO;AACZ,KAAK,OAAO"}

package/dist/Steps/components/CustomDot/index.js

@@ -1,2 +1,9 @@
-// type-only module stub
-export {};
+import { ProcessIcon } from "../ProcessIcon/index.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Steps/components/CustomDot/index.tsx
+var CustomDot = (_dot, { status }) => /* @__PURE__ */ jsx(ProcessIcon, { type: status });
+//#endregion
+export { CustomDot };
+
+//# sourceMappingURL=index.js.map

package/dist/Steps/components/CustomDot/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Steps/components/CustomDot/index.tsx"],"sourcesContent":["import React from 'react';\nimport { ProcessIcon } from '../ProcessIcon';\n\nexport const CustomDot = (\n  _dot: React.ReactNode,\n  { status }: { status: string },\n) => <ProcessIcon type={status as 'process' | 'wait' | 'finish' | 'error'} />;\n"],"mappings":";;;;AAGA,IAAa,aACX,MACA,EAAE,aACC,oBAAC,aAAD,EAAa,MAAM,QAAqD,CAAA"}

package/dist/Steps/components/ProcessIcon/index.d.ts

@@ -1,5 +1,6 @@
 interface IProcessIconProps {
+    size?: number;
     type: 'process' | 'wait' | 'finish' | 'error';
 }
-export declare function ProcessIcon({ type }: IProcessIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProcessIcon({ size, type }: IProcessIconProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Steps/components/ProcessIcon/index.js

@@ -2,35 +2,56 @@ import { cn } from "../../../lib/utils.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Steps/components/ProcessIcon/index.tsx
-function ProcessIcon({ type }) {
-	const baseClass = "tw-flex tw-size-4 tw-items-center tw-justify-center tw-rounded-full tw-bg-[var(--background-default)]";
+function ProcessIcon({ size = 16, type }) {
+	const baseClass = "tw-flex tw-items-center tw-justify-center tw-rounded-full tw-bg-[var(--background-default)]";
+	const iconStyle = {
+		height: size,
+		width: size
+	};
+	const innerDotSize = Math.max(6, Math.round(size * .375));
 	if (type === "finish") return /* @__PURE__ */ jsx("span", {
-		className: cn(baseClass, "tw-bg-[var(--interaction-default-hover)]"),
+		className: cn(`${type}-icon-box icon-box`, baseClass, "tw-bg-[var(--border-brand-strong)]"),
+		style: iconStyle,
 		children: /* @__PURE__ */ jsx("img", {
 			style: {
-				width: 10,
-				height: 8
+				height: Math.round(size * .5),
+				width: Math.round(size * .625)
 			},
 			src: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDExIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0zLjc1IDcuOTQzMjVMMCA0LjE5MzI1TDEuMTkzMjUgM0wzLjc1IDUuNTU2NzVMOS4zMDc1IDBMMTAuNTAzNyAxLjE4ODc1TDMuNzUgNy45NDMyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo="
 		})
 	});
 	if (type === "error") return /* @__PURE__ */ jsx("span", {
-		className: cn(baseClass, "tw-bg-[var(--background-negative-strong,#ef4444)]"),
+		className: cn(`${type}-icon-box icon-box`, baseClass, "tw-bg-[var(--background-negative-strong)]"),
+		style: iconStyle,
 		children: /* @__PURE__ */ jsx("img", {
 			style: {
-				width: 3,
-				height: 10
+				height: Math.round(size * .625),
+				width: Math.round(size * .188)
 			},
 			src: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMyIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDMgMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wLjI4MTI1IDBIMS45Njg3NVY2LjVIMC4yODEyNVYwWk0xLjEyNSAxMEMwLjkwMjUgMTAgMC42ODQ5OSA5LjkzNDA0IDAuNDk5OTggOS44MTA0MkMwLjMxNDk4IDkuNjg2OCAwLjE3MDc4IDkuNTExMTMgMC4wODU2NCA5LjMwNTU1QzAuMDAwNDkgOS4wOTk5OCAtMC4wMjE3OSA4Ljg3Mzc4IDAuMDIxNjIgOC42NTU1NUMwLjA2NTAzIDguNDM3MzIgMC4xNzIxNyA4LjIzNjg0IDAuMzI5NTEgOC4wNzk1MUMwLjQ4Njg0IDcuOTIyMTcgMC42ODczIDcuODE1MDQgMC45MDU1MiA3Ljc3MTYzQzEuMTIzNzUgNy43MjgyMiAxLjM0OTk1IDcuNzUwNTEgMS41NTU1MiA3LjgzNTY0QzEuNzYxMDkgNy45MjA3OCAxLjkzNjc5IDguMDY0OTggMi4wNjA0IDguMjVDMi4xODQwMiA4LjQzNTAyIDIuMjUgOC42NTI1MSAyLjI1IDguODc1QzIuMjUgOS4xNzMzNyAyLjEzMTQ3IDkuNDU5NTIgMS45MjA1IDkuNjcwNDlDMS43MDk1MiA5Ljg4MTQ3IDEuNDIzMzcgMTAgMS4xMjUgMTBaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K"
 		})
 	});
 	if (type === "process") return /* @__PURE__ */ jsx("span", {
-		className: cn(baseClass, "tw-relative tw-bg-[var(--interaction-default-hover)]"),
-		children: /* @__PURE__ */ jsx("span", { className: "tw-size-1.5 tw-rounded-full tw-bg-white" })
+		className: cn(`${type}-icon-box icon-box`, baseClass, "tw-relative tw-bg-[var(--border-brand-strong)]"),
+		style: iconStyle,
+		children: /* @__PURE__ */ jsx("span", {
+			className: "tw-rounded-full tw-bg-[var(--background-default)]",
+			style: {
+				height: innerDotSize,
+				width: innerDotSize
+			}
+		})
 	});
 	return /* @__PURE__ */ jsx("span", {
-		className: cn(baseClass, "tw-relative tw-bg-[var(--alias-colors-icon-subtle)]"),
-		children: /* @__PURE__ */ jsx("span", { className: "tw-size-1.5 tw-rounded-full tw-bg-[var(--background-default)]" })
+		className: cn(`${type}-icon-box icon-box`, baseClass, "tw-relative tw-bg-[var(--content-secondary)]"),
+		style: iconStyle,
+		children: /* @__PURE__ */ jsx("span", {
+			className: "tw-rounded-full tw-bg-[var(--background-default)]",
+			style: {
+				height: innerDotSize,
+				width: innerDotSize
+			}
+		})
 	});
 }
 //#endregion

package/dist/Steps/components/ProcessIcon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Steps/components/ProcessIcon/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../../lib/utils';\n\ninterface IProcessIconProps {\n  type: 'process' | 'wait' | 'finish' | 'error';\n}\n\nexport function ProcessIcon({ type }: IProcessIconProps) {\n  const baseClass =\n    'tw-flex tw-size-4 tw-items-center tw-justify-center tw-rounded-full tw-bg-[var(--background-default)]';\n\n  if (type === 'finish')\n    return (\n      <span\n        className={cn(baseClass, 'tw-bg-[var(--interaction-default-hover)]')}\n      >\n        <img\n          style={{ width: 10, height: 8 }}\n          src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDExIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0zLjc1IDcuOTQzMjVMMCA0LjE5MzI1TDEuMTkzMjUgM0wzLjc1IDUuNTU2NzVMOS4zMDc1IDBMMTAuNTAzNyAxLjE4ODc1TDMuNzUgNy45NDMyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=\"\n        />\n      </span>\n    );\n\n  if (type === 'error')\n    return (\n      <span\n        className={cn(\n          baseClass,\n          'tw-bg-[var(--background-negative-strong,#ef4444)]',\n        )}\n      >\n        <img\n          style={{ width: 3, height: 10 }}\n          src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMyIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDMgMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wLjI4MTI1IDBIMS45Njg3NVY2LjVIMC4yODEyNVYwWk0xLjEyNSAxMEMwLjkwMjUgMTAgMC42ODQ5OSA5LjkzNDA0IDAuNDk5OTggOS44MTA0MkMwLjMxNDk4IDkuNjg2OCAwLjE3MDc4IDkuNTExMTMgMC4wODU2NCA5LjMwNTU1QzAuMDAwNDkgOS4wOTk5OCAtMC4wMjE3OSA4Ljg3Mzc4IDAuMDIxNjIgOC42NTU1NUMwLjA2NTAzIDguNDM3MzIgMC4xNzIxNyA4LjIzNjg0IDAuMzI5NTEgOC4wNzk1MUMwLjQ4Njg0IDcuOTIyMTcgMC42ODczIDcuODE1MDQgMC45MDU1MiA3Ljc3MTYzQzEuMTIzNzUgNy43MjgyMiAxLjM0OTk1IDcuNzUwNTEgMS41NTU1MiA3LjgzNTY0QzEuNzYxMDkgNy45MjA3OCAxLjkzNjc5IDguMDY0OTggMi4wNjA0IDguMjVDMi4xODQwMiA4LjQzNTAyIDIuMjUgOC42NTI1MSAyLjI1IDguODc1QzIuMjUgOS4xNzMzNyAyLjEzMTQ3IDkuNDU5NTIgMS45MjA1IDkuNjcwNDlDMS43MDk1MiA5Ljg4MTQ3IDEuNDIzMzcgMTAgMS4xMjUgMTBaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K\"\n        />\n      </span>\n    );\n\n  if (type === 'process')\n    return (\n      <span\n        className={cn(\n          baseClass,\n          'tw-relative tw-bg-[var(--interaction-default-hover)]',\n        )}\n      >\n        <span className=\"tw-size-1.5 tw-rounded-full tw-bg-white\" />\n      </span>\n    );\n\n  // wait\n  return (\n    <span\n      className={cn(\n        baseClass,\n        'tw-relative tw-bg-[var(--alias-colors-icon-subtle)]',\n      )}\n    >\n      <span className=\"tw-size-1.5 tw-rounded-full tw-bg-[var(--background-default)]\" />\n    </span>\n  );\n}\n"],"mappings":";;;;AAOA,SAAgB,YAAY,EAAE,QAA2B;CACvD,MAAM,YACJ;AAEF,KAAI,SAAS,SACX,QACE,oBAAC,QAAD;EACE,WAAW,GAAG,WAAW,2CAA2C;YAEpE,oBAAC,OAAD;GACE,OAAO;IAAE,OAAO;IAAI,QAAQ;IAAG;GAC/B,KAAI;GACJ,CAAA;EACG,CAAA;AAGX,KAAI,SAAS,QACX,QACE,oBAAC,QAAD;EACE,WAAW,GACT,WACA,oDACD;YAED,oBAAC,OAAD;GACE,OAAO;IAAE,OAAO;IAAG,QAAQ;IAAI;GAC/B,KAAI;GACJ,CAAA;EACG,CAAA;AAGX,KAAI,SAAS,UACX,QACE,oBAAC,QAAD;EACE,WAAW,GACT,WACA,uDACD;YAED,oBAAC,QAAD,EAAM,WAAU,2CAA4C,CAAA;EACvD,CAAA;AAIX,QACE,oBAAC,QAAD;EACE,WAAW,GACT,WACA,sDACD;YAED,oBAAC,QAAD,EAAM,WAAU,iEAAkE,CAAA;EAC7E,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/Steps/components/ProcessIcon/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../../lib/utils';\n\ninterface IProcessIconProps {\n  size?: number;\n  type: 'process' | 'wait' | 'finish' | 'error';\n}\n\nexport function ProcessIcon({ size = 16, type }: IProcessIconProps) {\n  const baseClass =\n    'tw-flex tw-items-center tw-justify-center tw-rounded-full tw-bg-[var(--background-default)]';\n  const iconStyle = { height: size, width: size };\n  const innerDotSize = Math.max(6, Math.round(size * 0.375));\n\n  if (type === 'finish')\n    return (\n      <span\n        className={cn(\n          `${type}-icon-box icon-box`,\n          baseClass,\n          'tw-bg-[var(--border-brand-strong)]',\n        )}\n        style={iconStyle}\n      >\n        <img\n          style={{\n            height: Math.round(size * 0.5),\n            width: Math.round(size * 0.625),\n          }}\n          src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDExIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0zLjc1IDcuOTQzMjVMMCA0LjE5MzI1TDEuMTkzMjUgM0wzLjc1IDUuNTU2NzVMOS4zMDc1IDBMMTAuNTAzNyAxLjE4ODc1TDMuNzUgNy45NDMyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=\"\n        />\n      </span>\n    );\n\n  if (type === 'error')\n    return (\n      <span\n        className={cn(\n          `${type}-icon-box icon-box`,\n          baseClass,\n          'tw-bg-[var(--background-negative-strong)]',\n        )}\n        style={iconStyle}\n      >\n        <img\n          style={{\n            height: Math.round(size * 0.625),\n            width: Math.round(size * 0.188),\n          }}\n          src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMyIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDMgMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wLjI4MTI1IDBIMS45Njg3NVY2LjVIMC4yODEyNVYwWk0xLjEyNSAxMEMwLjkwMjUgMTAgMC42ODQ5OSA5LjkzNDA0IDAuNDk5OTggOS44MTA0MkMwLjMxNDk4IDkuNjg2OCAwLjE3MDc4IDkuNTExMTMgMC4wODU2NCA5LjMwNTU1QzAuMDAwNDkgOS4wOTk5OCAtMC4wMjE3OSA4Ljg3Mzc4IDAuMDIxNjIgOC42NTU1NUMwLjA2NTAzIDguNDM3MzIgMC4xNzIxNyA4LjIzNjg0IDAuMzI5NTEgOC4wNzk1MUMwLjQ4Njg0IDcuOTIyMTcgMC42ODczIDcuODE1MDQgMC45MDU1MiA3Ljc3MTYzQzEuMTIzNzUgNy43MjgyMiAxLjM0OTk1IDcuNzUwNTEgMS41NTU1MiA3LjgzNTY0QzEuNzYxMDkgNy45MjA3OCAxLjkzNjc5IDguMDY0OTggMi4wNjA0IDguMjVDMi4xODQwMiA4LjQzNTAyIDIuMjUgOC42NTI1MSAyLjI1IDguODc1QzIuMjUgOS4xNzMzNyAyLjEzMTQ3IDkuNDU5NTIgMS45MjA1IDkuNjcwNDlDMS43MDk1MiA5Ljg4MTQ3IDEuNDIzMzcgMTAgMS4xMjUgMTBaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K\"\n        />\n      </span>\n    );\n\n  if (type === 'process')\n    return (\n      <span\n        className={cn(\n          `${type}-icon-box icon-box`,\n          baseClass,\n          'tw-relative tw-bg-[var(--border-brand-strong)]',\n        )}\n        style={iconStyle}\n      >\n        <span\n          className=\"tw-rounded-full tw-bg-[var(--background-default)]\"\n          style={{ height: innerDotSize, width: innerDotSize }}\n        />\n      </span>\n    );\n\n  // wait\n  return (\n    <span\n      className={cn(\n        `${type}-icon-box icon-box`,\n        baseClass,\n        'tw-relative tw-bg-[var(--content-secondary)]',\n      )}\n      style={iconStyle}\n    >\n      <span\n        className=\"tw-rounded-full tw-bg-[var(--background-default)]\"\n        style={{ height: innerDotSize, width: innerDotSize }}\n      />\n    </span>\n  );\n}\n"],"mappings":";;;;AAQA,SAAgB,YAAY,EAAE,OAAO,IAAI,QAA2B;CAClE,MAAM,YACJ;CACF,MAAM,YAAY;EAAE,QAAQ;EAAM,OAAO;EAAM;CAC/C,MAAM,eAAe,KAAK,IAAI,GAAG,KAAK,MAAM,OAAO,KAAM,CAAC;AAE1D,KAAI,SAAS,SACX,QACE,oBAAC,QAAD;EACE,WAAW,GACT,GAAG,KAAK,qBACR,WACA,qCACD;EACD,OAAO;YAEP,oBAAC,OAAD;GACE,OAAO;IACL,QAAQ,KAAK,MAAM,OAAO,GAAI;IAC9B,OAAO,KAAK,MAAM,OAAO,KAAM;IAChC;GACD,KAAI;GACJ,CAAA;EACG,CAAA;AAGX,KAAI,SAAS,QACX,QACE,oBAAC,QAAD;EACE,WAAW,GACT,GAAG,KAAK,qBACR,WACA,4CACD;EACD,OAAO;YAEP,oBAAC,OAAD;GACE,OAAO;IACL,QAAQ,KAAK,MAAM,OAAO,KAAM;IAChC,OAAO,KAAK,MAAM,OAAO,KAAM;IAChC;GACD,KAAI;GACJ,CAAA;EACG,CAAA;AAGX,KAAI,SAAS,UACX,QACE,oBAAC,QAAD;EACE,WAAW,GACT,GAAG,KAAK,qBACR,WACA,iDACD;EACD,OAAO;YAEP,oBAAC,QAAD;GACE,WAAU;GACV,OAAO;IAAE,QAAQ;IAAc,OAAO;IAAc;GACpD,CAAA;EACG,CAAA;AAIX,QACE,oBAAC,QAAD;EACE,WAAW,GACT,GAAG,KAAK,qBACR,WACA,+CACD;EACD,OAAO;YAEP,oBAAC,QAAD;GACE,WAAU;GACV,OAAO;IAAE,QAAQ;IAAc,OAAO;IAAc;GACpD,CAAA;EACG,CAAA"}

package/dist/Steps/index.js

@@ -1,8 +1,8 @@
 import { cn } from "../lib/utils.js";
-import { ProcessIcon } from "./components/ProcessIcon/index.js";
+import { CustomDot } from "./components/CustomDot/index.js";
 import { Step } from "./components/Step/index.js";
 import React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/Steps/index.tsx
 function getStepStatus(index, current, globalStatus) {
 	if (index < current) return "finish";
@@ -19,59 +19,77 @@ function Steps({ className, current: controlledCurrent, direction = "horizontal"
 		icon: child.props.icon
 	}));
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("ald-steps tw-flex", direction === "vertical" ? "tw-flex-col" : "tw-flex-row tw-items-start", className),
+		className: cn("ald-steps ant-steps ant-steps-dot ant-steps-label-vertical tw-flex", direction === "vertical" ? "ant-steps-vertical" : "ant-steps-horizontal", direction === "vertical" ? "tw-flex-col" : "tw-flex-row tw-items-start", className),
 		children: resolvedItems.map((item, index) => {
 			const stepStatus = item.status || getStepStatus(index, current, status);
 			const isLast = index === resolvedItems.length - 1;
 			return /* @__PURE__ */ jsx("div", {
-				className: cn("ald-steps-item tw-flex", direction === "horizontal" ? "tw-flex-1 tw-flex-col tw-items-center tw-text-center" : "tw-flex-row tw-gap-3 tw-py-2", `ald-steps-item-${stepStatus}`, item.disabled && "ald-steps-item-disabled tw-pointer-events-none tw-opacity-50"),
-				children: direction === "horizontal" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
-					className: "tw-flex tw-w-full tw-items-center",
-					children: [
-						index > 0 && /* @__PURE__ */ jsx("div", {
-							className: cn("tw-flex-1", index <= current ? "tw-bg-[var(--alias-colors-border-selected)]" : "tw-bg-[var(--alias-colors-border-default)]"),
-							style: { height: 1.5 }
-						}),
-						/* @__PURE__ */ jsx("div", {
-							className: "ald-steps-item-icon tw-shrink-0",
-							children: item.icon || /* @__PURE__ */ jsx(ProcessIcon, { type: stepStatus })
-						}),
-						!isLast && /* @__PURE__ */ jsx("div", {
-							className: cn("tw-flex-1", index < current ? "tw-bg-[var(--alias-colors-border-selected)]" : "tw-bg-[var(--alias-colors-border-default)]"),
-							style: { height: 1.5 }
-						})
-					]
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "ald-steps-item-content ant-steps-item-content tw-mt-2 tw-flex tw-flex-col tw-items-center",
-					children: [/* @__PURE__ */ jsx("div", {
-						className: cn("ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5", stepStatus === "finish" && "tw-text-[var(--alias-colors-text-subtlest)]", stepStatus === "process" && "tw-text-[var(--alias-colors-text-selected)]", stepStatus === "wait" && "tw-text-[var(--alias-colors-text-default)]", stepStatus === "error" && "tw-text-[var(--alias-colors-text-danger)]"),
-						children: item.title
-					}), item.description && /* @__PURE__ */ jsx("div", {
-						className: cn("ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4", stepStatus === "finish" || stepStatus === "error" ? "tw-text-[var(--alias-colors-text-subtlest)]" : "tw-text-[var(--alias-colors-text-subtle)]"),
-						children: item.description
+				className: cn("ald-steps-item ant-steps-item tw-flex", direction === "horizontal" ? "tw-flex-1 tw-flex-col tw-items-center tw-text-center" : "tw-flex-row tw-gap-3 tw-py-2", `ald-steps-item-${stepStatus}`, `ant-steps-item-${stepStatus}`, item.disabled && "ald-steps-item-disabled tw-pointer-events-none tw-opacity-50", item.disabled && "ant-steps-item-disabled"),
+				children: direction === "horizontal" ? /* @__PURE__ */ jsxs("div", {
+					className: "ant-steps-item-container tw-flex tw-w-full tw-flex-col tw-items-center",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "tw-flex tw-w-full tw-items-center",
+						children: [
+							index > 0 && /* @__PURE__ */ jsx("div", {
+								className: cn("ant-steps-item-tail", "tw-flex-1", index <= current ? "tw-bg-[var(--alias-colors-border-selected)]" : "tw-bg-[var(--alias-colors-border-default)]"),
+								style: { height: 1.5 }
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: "ald-steps-item-icon ant-steps-item-icon tw-shrink-0",
+								children: /* @__PURE__ */ jsx("span", {
+									className: "ant-steps-icon",
+									children: /* @__PURE__ */ jsx("span", {
+										className: "ant-steps-icon-dot",
+										children: item.icon || CustomDot(null, { status: stepStatus })
+									})
+								})
+							}),
+							!isLast && /* @__PURE__ */ jsx("div", {
+								className: cn(index === 0 && "ant-steps-item-tail", "tw-flex-1", index < current ? "tw-bg-[var(--alias-colors-border-selected)]" : "tw-bg-[var(--alias-colors-border-default)]"),
+								style: { height: 1.5 }
+							})
+						]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "ald-steps-item-content ant-steps-item-content tw-mt-2 tw-flex tw-flex-col tw-items-center",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: cn("ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5", stepStatus === "finish" && "tw-text-[var(--alias-colors-text-subtlest)]", stepStatus === "process" && "tw-text-[var(--alias-colors-text-selected)]", stepStatus === "wait" && "tw-text-[var(--alias-colors-text-default)]", stepStatus === "error" && "tw-text-[var(--alias-colors-text-danger)]"),
+							children: item.title
+						}), item.description && /* @__PURE__ */ jsx("div", {
+							className: cn("ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4", stepStatus === "finish" || stepStatus === "error" ? "tw-text-[var(--alias-colors-text-subtlest)]" : "tw-text-[var(--alias-colors-text-subtle)]"),
+							children: item.description
+						})]
 					})]
-				})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
-					className: "tw-relative tw-flex tw-flex-col tw-items-center",
-					children: [/* @__PURE__ */ jsx("div", {
-						className: "ald-steps-item-icon tw-shrink-0",
-						children: item.icon || /* @__PURE__ */ jsx(ProcessIcon, { type: stepStatus })
-					}), !isLast && /* @__PURE__ */ jsx("div", {
-						className: cn("tw-mt-1 tw-flex-1", index < current ? "tw-bg-[var(--alias-colors-border-selected)]" : "tw-bg-[var(--alias-colors-border-default)]"),
-						style: {
-							width: 1.5,
-							minHeight: 24
-						}
+				}) : /* @__PURE__ */ jsxs("div", {
+					className: "ant-steps-item-container tw-flex tw-min-h-16 tw-flex-row tw-gap-3",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "ald-steps-item-axis tw-relative tw-flex tw-w-4 tw-shrink-0 tw-justify-center",
+						children: [!isLast && /* @__PURE__ */ jsx("div", {
+							className: cn("ald-steps-item-tail ant-steps-item-tail", index < current ? "ald-steps-item-tail-finish" : "ald-steps-item-tail-wait", "tw-absolute tw-left-1/2 tw-top-2 tw-z-0 tw--translate-x-1/2", index < current ? "tw-bg-[var(--alias-colors-border-selected)]" : "tw-bg-[var(--alias-colors-border-default)]"),
+							style: {
+								width: 1.5,
+								bottom: -24
+							}
+						}), /* @__PURE__ */ jsx("div", {
+							className: "ald-steps-item-icon ant-steps-item-icon tw-relative tw-z-[1] tw-flex tw-size-4 tw-shrink-0 tw-items-center tw-justify-center tw-leading-none",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "ant-steps-icon tw-flex tw-size-4 tw-items-center tw-justify-center tw-leading-none",
+								children: /* @__PURE__ */ jsx("span", {
+									className: "ant-steps-icon-dot tw-flex tw-size-4 tw-items-center tw-justify-center",
+									children: item.icon || CustomDot(null, { status: stepStatus })
+								})
+							})
+						})]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "ald-steps-item-content ant-steps-item-content",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: cn("ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5", stepStatus === "finish" && "tw-text-[var(--alias-colors-text-subtlest)]", stepStatus === "process" && "tw-text-[var(--alias-colors-text-selected)]", stepStatus === "wait" && "tw-text-[var(--alias-colors-text-default)]", stepStatus === "error" && "tw-text-[var(--alias-colors-text-danger)]"),
+							children: item.title
+						}), item.description && /* @__PURE__ */ jsx("div", {
+							className: cn("ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4 tw-text-[var(--content-secondary)]"),
+							children: item.description
+						})]
 					})]
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "ald-steps-item-content ant-steps-item-content",
-					children: [/* @__PURE__ */ jsx("div", {
-						className: cn("ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5", stepStatus === "finish" && "tw-text-[var(--alias-colors-text-subtlest)]", stepStatus === "process" && "tw-text-[var(--alias-colors-text-selected)]", stepStatus === "wait" && "tw-text-[var(--alias-colors-text-default)]", stepStatus === "error" && "tw-text-[var(--alias-colors-text-danger)]"),
-						children: item.title
-					}), item.description && /* @__PURE__ */ jsx("div", {
-						className: cn("ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4 tw-text-[var(--content-secondary)]"),
-						children: item.description
-					})]
-				})] })
+				})
 			}, index);
 		})
 	});

package/dist/Steps/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Steps/index.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from 'react';\nimport { cn } from '../lib/utils';\nimport { ProcessIcon } from './components/ProcessIcon';\nimport { IStepProps, Step } from './components/Step';\n\nexport type { IStepProps };\nexport type TStatus = 'wait' | 'process' | 'finish' | 'error';\n\nexport interface IStepItem {\n  description?: ReactNode;\n  disabled?: boolean;\n  icon?: ReactNode;\n  status?: TStatus;\n  subTitle?: ReactNode;\n  title: ReactNode;\n}\n\nexport interface IStepsProps {\n  className?: string;\n  current?: number;\n  direction?: 'horizontal' | 'vertical';\n  defaultCurrent?: number;\n  status?: TStatus;\n  items?: IStepItem[];\n  children?: ReactElement<IStepProps>[] | ReactElement<IStepProps>;\n}\n\nfunction getStepStatus(\n  index: number,\n  current: number,\n  globalStatus?: TStatus,\n): TStatus {\n  if (index < current) return 'finish';\n  if (index === current) return globalStatus || 'process';\n  return 'wait';\n}\n\nfunction Steps({\n  className,\n  current: controlledCurrent,\n  direction = 'horizontal',\n  defaultCurrent = 0,\n  status,\n  items,\n  children,\n}: IStepsProps) {\n  const current = controlledCurrent ?? defaultCurrent;\n  // Support children-based API: convert children to items\n  const resolvedItems: IStepItem[] =\n    items ||\n    React.Children.toArray(children)\n      .filter(React.isValidElement)\n      .map((child: any) => ({\n        title: child.props.title,\n        description: child.props.description,\n        disabled: child.props.disabled,\n        status: child.props.status,\n        icon: child.props.icon,\n      }));\n\n  return (\n    <div\n      className={cn(\n        'ald-steps tw-flex',\n        direction === 'vertical' ? 'tw-flex-col' : 'tw-flex-row tw-items-start',\n        className,\n      )}\n    >\n      {resolvedItems.map((item, index) => {\n        const stepStatus = item.status || getStepStatus(index, current, status);\n        const isLast = index === resolvedItems.length - 1;\n\n        return (\n          <div\n            key={index}\n            className={cn(\n              'ald-steps-item tw-flex',\n              direction === 'horizontal'\n                ? 'tw-flex-1 tw-flex-col tw-items-center tw-text-center'\n                : 'tw-flex-row tw-gap-3 tw-py-2',\n              `ald-steps-item-${stepStatus}`,\n              item.disabled &&\n                'ald-steps-item-disabled tw-pointer-events-none tw-opacity-50',\n            )}\n          >\n            {direction === 'horizontal' ? (\n              <>\n                <div className=\"tw-flex tw-w-full tw-items-center\">\n                  {index > 0 && (\n                    <div\n                      className={cn(\n                        'tw-flex-1',\n                        index <= current\n                          ? 'tw-bg-[var(--alias-colors-border-selected)]'\n                          : 'tw-bg-[var(--alias-colors-border-default)]',\n                      )}\n                      style={{ height: 1.5 }}\n                    />\n                  )}\n                  <div className=\"ald-steps-item-icon tw-shrink-0\">\n                    {item.icon || <ProcessIcon type={stepStatus} />}\n                  </div>\n                  {!isLast && (\n                    <div\n                      className={cn(\n                        'tw-flex-1',\n                        index < current\n                          ? 'tw-bg-[var(--alias-colors-border-selected)]'\n                          : 'tw-bg-[var(--alias-colors-border-default)]',\n                      )}\n                      style={{ height: 1.5 }}\n                    />\n                  )}\n                </div>\n                {/* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */}\n                <div className=\"ald-steps-item-content ant-steps-item-content tw-mt-2 tw-flex tw-flex-col tw-items-center\">\n                  <div\n                    className={cn(\n                      // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                      'ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5',\n                      stepStatus === 'finish' &&\n                        'tw-text-[var(--alias-colors-text-subtlest)]',\n                      stepStatus === 'process' &&\n                        'tw-text-[var(--alias-colors-text-selected)]',\n                      stepStatus === 'wait' &&\n                        'tw-text-[var(--alias-colors-text-default)]',\n                      stepStatus === 'error' &&\n                        'tw-text-[var(--alias-colors-text-danger)]',\n                    )}\n                  >\n                    {item.title}\n                  </div>\n                  {item.description && (\n                    <div\n                      className={cn(\n                        // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                        'ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4',\n                        stepStatus === 'finish' || stepStatus === 'error'\n                          ? 'tw-text-[var(--alias-colors-text-subtlest)]'\n                          : 'tw-text-[var(--alias-colors-text-subtle)]',\n                      )}\n                    >\n                      {item.description}\n                    </div>\n                  )}\n                </div>\n              </>\n            ) : (\n              <>\n                <div className=\"tw-relative tw-flex tw-flex-col tw-items-center\">\n                  <div className=\"ald-steps-item-icon tw-shrink-0\">\n                    {item.icon || <ProcessIcon type={stepStatus} />}\n                  </div>\n                  {!isLast && (\n                    <div\n                      className={cn(\n                        'tw-mt-1 tw-flex-1',\n                        index < current\n                          ? 'tw-bg-[var(--alias-colors-border-selected)]'\n                          : 'tw-bg-[var(--alias-colors-border-default)]',\n                      )}\n                      style={{ width: 1.5, minHeight: 24 }}\n                    />\n                  )}\n                </div>\n                {/* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */}\n                <div className=\"ald-steps-item-content ant-steps-item-content\">\n                  <div\n                    className={cn(\n                      // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                      'ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5',\n                      stepStatus === 'finish' &&\n                        'tw-text-[var(--alias-colors-text-subtlest)]',\n                      stepStatus === 'process' &&\n                        'tw-text-[var(--alias-colors-text-selected)]',\n                      stepStatus === 'wait' &&\n                        'tw-text-[var(--alias-colors-text-default)]',\n                      stepStatus === 'error' &&\n                        'tw-text-[var(--alias-colors-text-danger)]',\n                    )}\n                  >\n                    {item.title}\n                  </div>\n                  {item.description && (\n                    <div\n                      className={cn(\n                        // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                        'ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4 tw-text-[var(--content-secondary)]',\n                      )}\n                    >\n                      {item.description}\n                    </div>\n                  )}\n                </div>\n              </>\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nSteps.Step = Step;\n\nexport default Steps;\n"],"mappings":";;;;;;AA2BA,SAAS,cACP,OACA,SACA,cACS;AACT,KAAI,QAAQ,QAAS,QAAO;AAC5B,KAAI,UAAU,QAAS,QAAO,gBAAgB;AAC9C,QAAO;;AAGT,SAAS,MAAM,EACb,WACA,SAAS,mBACT,YAAY,cACZ,iBAAiB,GACjB,QACA,OACA,YACc;CACd,MAAM,UAAU,qBAAqB;CAErC,MAAM,gBACJ,SACA,MAAM,SAAS,QAAQ,SAAS,CAC7B,OAAO,MAAM,eAAe,CAC5B,KAAK,WAAgB;EACpB,OAAO,MAAM,MAAM;EACnB,aAAa,MAAM,MAAM;EACzB,UAAU,MAAM,MAAM;EACtB,QAAQ,MAAM,MAAM;EACpB,MAAM,MAAM,MAAM;EACnB,EAAE;AAEP,QACE,oBAAC,OAAD;EACE,WAAW,GACT,qBACA,cAAc,aAAa,gBAAgB,8BAC3C,UACD;YAEA,cAAc,KAAK,MAAM,UAAU;GAClC,MAAM,aAAa,KAAK,UAAU,cAAc,OAAO,SAAS,OAAO;GACvE,MAAM,SAAS,UAAU,cAAc,SAAS;AAEhD,UACE,oBAAC,OAAD;IAEE,WAAW,GACT,0BACA,cAAc,eACV,yDACA,gCACJ,kBAAkB,cAClB,KAAK,YACH,+DACH;cAEA,cAAc,eACb,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,OAAD;KAAK,WAAU;eAAf;MACG,QAAQ,KACP,oBAAC,OAAD;OACE,WAAW,GACT,aACA,SAAS,UACL,gDACA,6CACL;OACD,OAAO,EAAE,QAAQ,KAAK;OACtB,CAAA;MAEJ,oBAAC,OAAD;OAAK,WAAU;iBACZ,KAAK,QAAQ,oBAAC,aAAD,EAAa,MAAM,YAAc,CAAA;OAC3C,CAAA;MACL,CAAC,UACA,oBAAC,OAAD;OACE,WAAW,GACT,aACA,QAAQ,UACJ,gDACA,6CACL;OACD,OAAO,EAAE,QAAQ,KAAK;OACtB,CAAA;MAEA;QAEN,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MACE,WAAW,GAET,oFACA,eAAe,YACb,+CACF,eAAe,aACb,+CACF,eAAe,UACb,8CACF,eAAe,WACb,4CACH;gBAEA,KAAK;MACF,CAAA,EACL,KAAK,eACJ,oBAAC,OAAD;MACE,WAAW,GAET,uHACA,eAAe,YAAY,eAAe,UACtC,gDACA,4CACL;gBAEA,KAAK;MACF,CAAA,CAEJ;OACL,EAAA,CAAA,GAEH,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MAAK,WAAU;gBACZ,KAAK,QAAQ,oBAAC,aAAD,EAAa,MAAM,YAAc,CAAA;MAC3C,CAAA,EACL,CAAC,UACA,oBAAC,OAAD;MACE,WAAW,GACT,qBACA,QAAQ,UACJ,gDACA,6CACL;MACD,OAAO;OAAE,OAAO;OAAK,WAAW;OAAI;MACpC,CAAA,CAEA;QAEN,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MACE,WAAW,GAET,oFACA,eAAe,YACb,+CACF,eAAe,aACb,+CACF,eAAe,UACb,8CACF,eAAe,WACb,4CACH;gBAEA,KAAK;MACF,CAAA,EACL,KAAK,eACJ,oBAAC,OAAD;MACE,WAAW,GAET,yJACD;gBAEA,KAAK;MACF,CAAA,CAEJ;OACL,EAAA,CAAA;IAED,EA1HC,MA0HD;IAER;EACE,CAAA;;AAIV,MAAM,OAAO"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Steps/index.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from 'react';\nimport { cn } from '../lib/utils';\nimport { CustomDot } from './components/CustomDot';\nimport { IStepProps, Step } from './components/Step';\n\nexport type { IStepProps };\nexport type TStatus = 'wait' | 'process' | 'finish' | 'error';\n\nexport interface IStepItem {\n  description?: ReactNode;\n  disabled?: boolean;\n  icon?: ReactNode;\n  status?: TStatus;\n  subTitle?: ReactNode;\n  title: ReactNode;\n}\n\nexport interface IStepsProps {\n  className?: string;\n  current?: number;\n  direction?: 'horizontal' | 'vertical';\n  defaultCurrent?: number;\n  status?: TStatus;\n  items?: IStepItem[];\n  children?: ReactElement<IStepProps>[] | ReactElement<IStepProps>;\n}\n\nfunction getStepStatus(\n  index: number,\n  current: number,\n  globalStatus?: TStatus,\n): TStatus {\n  if (index < current) return 'finish';\n  if (index === current) return globalStatus || 'process';\n  return 'wait';\n}\n\nfunction Steps({\n  className,\n  current: controlledCurrent,\n  direction = 'horizontal',\n  defaultCurrent = 0,\n  status,\n  items,\n  children,\n}: IStepsProps) {\n  const current = controlledCurrent ?? defaultCurrent;\n  // Support children-based API: convert children to items\n  const resolvedItems: IStepItem[] =\n    items ||\n    React.Children.toArray(children)\n      .filter(React.isValidElement)\n      .map((child: any) => ({\n        title: child.props.title,\n        description: child.props.description,\n        disabled: child.props.disabled,\n        status: child.props.status,\n        icon: child.props.icon,\n      }));\n\n  return (\n    <div\n      className={cn(\n        'ald-steps ant-steps ant-steps-dot ant-steps-label-vertical tw-flex',\n        direction === 'vertical'\n          ? 'ant-steps-vertical'\n          : 'ant-steps-horizontal',\n        direction === 'vertical' ? 'tw-flex-col' : 'tw-flex-row tw-items-start',\n        className,\n      )}\n    >\n      {resolvedItems.map((item, index) => {\n        const stepStatus = item.status || getStepStatus(index, current, status);\n        const isLast = index === resolvedItems.length - 1;\n\n        return (\n          <div\n            key={index}\n            className={cn(\n              'ald-steps-item ant-steps-item tw-flex',\n              direction === 'horizontal'\n                ? 'tw-flex-1 tw-flex-col tw-items-center tw-text-center'\n                : 'tw-flex-row tw-gap-3 tw-py-2',\n              `ald-steps-item-${stepStatus}`,\n              `ant-steps-item-${stepStatus}`,\n              item.disabled &&\n                'ald-steps-item-disabled tw-pointer-events-none tw-opacity-50',\n              item.disabled && 'ant-steps-item-disabled',\n            )}\n          >\n            {direction === 'horizontal' ? (\n              <div className=\"ant-steps-item-container tw-flex tw-w-full tw-flex-col tw-items-center\">\n                <div className=\"tw-flex tw-w-full tw-items-center\">\n                  {index > 0 && (\n                    <div\n                      className={cn(\n                        'ant-steps-item-tail',\n                        'tw-flex-1',\n                        index <= current\n                          ? 'tw-bg-[var(--alias-colors-border-selected)]'\n                          : 'tw-bg-[var(--alias-colors-border-default)]',\n                      )}\n                      style={{ height: 1.5 }}\n                    />\n                  )}\n                  <div className=\"ald-steps-item-icon ant-steps-item-icon tw-shrink-0\">\n                    <span className=\"ant-steps-icon\">\n                      <span className=\"ant-steps-icon-dot\">\n                        {item.icon || CustomDot(null, { status: stepStatus })}\n                      </span>\n                    </span>\n                  </div>\n                  {!isLast && (\n                    <div\n                      className={cn(\n                        index === 0 && 'ant-steps-item-tail',\n                        'tw-flex-1',\n                        index < current\n                          ? 'tw-bg-[var(--alias-colors-border-selected)]'\n                          : 'tw-bg-[var(--alias-colors-border-default)]',\n                      )}\n                      style={{ height: 1.5 }}\n                    />\n                  )}\n                </div>\n                {/* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */}\n                <div className=\"ald-steps-item-content ant-steps-item-content tw-mt-2 tw-flex tw-flex-col tw-items-center\">\n                  <div\n                    className={cn(\n                      // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                      'ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5',\n                      stepStatus === 'finish' &&\n                        'tw-text-[var(--alias-colors-text-subtlest)]',\n                      stepStatus === 'process' &&\n                        'tw-text-[var(--alias-colors-text-selected)]',\n                      stepStatus === 'wait' &&\n                        'tw-text-[var(--alias-colors-text-default)]',\n                      stepStatus === 'error' &&\n                        'tw-text-[var(--alias-colors-text-danger)]',\n                    )}\n                  >\n                    {item.title}\n                  </div>\n                  {item.description && (\n                    <div\n                      className={cn(\n                        // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                        'ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4',\n                        stepStatus === 'finish' || stepStatus === 'error'\n                          ? 'tw-text-[var(--alias-colors-text-subtlest)]'\n                          : 'tw-text-[var(--alias-colors-text-subtle)]',\n                      )}\n                    >\n                      {item.description}\n                    </div>\n                  )}\n                </div>\n              </div>\n            ) : (\n              <div className=\"ant-steps-item-container tw-flex tw-min-h-16 tw-flex-row tw-gap-3\">\n                <div className=\"ald-steps-item-axis tw-relative tw-flex tw-w-4 tw-shrink-0 tw-justify-center\">\n                  {!isLast && (\n                    <div\n                      className={cn(\n                        'ald-steps-item-tail ant-steps-item-tail',\n                        index < current\n                          ? 'ald-steps-item-tail-finish'\n                          : 'ald-steps-item-tail-wait',\n                        'tw-absolute tw-left-1/2 tw-top-2 tw-z-0 tw--translate-x-1/2',\n                        index < current\n                          ? 'tw-bg-[var(--alias-colors-border-selected)]'\n                          : 'tw-bg-[var(--alias-colors-border-default)]',\n                      )}\n                      style={{ width: 1.5, bottom: -24 }}\n                    />\n                  )}\n                  <div className=\"ald-steps-item-icon ant-steps-item-icon tw-relative tw-z-[1] tw-flex tw-size-4 tw-shrink-0 tw-items-center tw-justify-center tw-leading-none\">\n                    <span className=\"ant-steps-icon tw-flex tw-size-4 tw-items-center tw-justify-center tw-leading-none\">\n                      <span className=\"ant-steps-icon-dot tw-flex tw-size-4 tw-items-center tw-justify-center\">\n                        {item.icon || CustomDot(null, { status: stepStatus })}\n                      </span>\n                    </span>\n                  </div>\n                </div>\n                {/* antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器 */}\n                <div className=\"ald-steps-item-content ant-steps-item-content\">\n                  <div\n                    className={cn(\n                      // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                      'ald-steps-item-title ant-steps-item-title tw-text-sm tw-font-medium tw-leading-5',\n                      stepStatus === 'finish' &&\n                        'tw-text-[var(--alias-colors-text-subtlest)]',\n                      stepStatus === 'process' &&\n                        'tw-text-[var(--alias-colors-text-selected)]',\n                      stepStatus === 'wait' &&\n                        'tw-text-[var(--alias-colors-text-default)]',\n                      stepStatus === 'error' &&\n                        'tw-text-[var(--alias-colors-text-danger)]',\n                    )}\n                  >\n                    {item.title}\n                  </div>\n                  {item.description && (\n                    <div\n                      className={cn(\n                        // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n                        'ald-steps-item-description ant-steps-item-description tw-mt-1 tw-max-w-[264px] tw-break-all tw-text-xs tw-leading-4 tw-text-[var(--content-secondary)]',\n                      )}\n                    >\n                      {item.description}\n                    </div>\n                  )}\n                </div>\n              </div>\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\nSteps.Step = Step;\n\nexport default Steps;\n"],"mappings":";;;;;;AA2BA,SAAS,cACP,OACA,SACA,cACS;AACT,KAAI,QAAQ,QAAS,QAAO;AAC5B,KAAI,UAAU,QAAS,QAAO,gBAAgB;AAC9C,QAAO;;AAGT,SAAS,MAAM,EACb,WACA,SAAS,mBACT,YAAY,cACZ,iBAAiB,GACjB,QACA,OACA,YACc;CACd,MAAM,UAAU,qBAAqB;CAErC,MAAM,gBACJ,SACA,MAAM,SAAS,QAAQ,SAAS,CAC7B,OAAO,MAAM,eAAe,CAC5B,KAAK,WAAgB;EACpB,OAAO,MAAM,MAAM;EACnB,aAAa,MAAM,MAAM;EACzB,UAAU,MAAM,MAAM;EACtB,QAAQ,MAAM,MAAM;EACpB,MAAM,MAAM,MAAM;EACnB,EAAE;AAEP,QACE,oBAAC,OAAD;EACE,WAAW,GACT,sEACA,cAAc,aACV,uBACA,wBACJ,cAAc,aAAa,gBAAgB,8BAC3C,UACD;YAEA,cAAc,KAAK,MAAM,UAAU;GAClC,MAAM,aAAa,KAAK,UAAU,cAAc,OAAO,SAAS,OAAO;GACvE,MAAM,SAAS,UAAU,cAAc,SAAS;AAEhD,UACE,oBAAC,OAAD;IAEE,WAAW,GACT,yCACA,cAAc,eACV,yDACA,gCACJ,kBAAkB,cAClB,kBAAkB,cAClB,KAAK,YACH,gEACF,KAAK,YAAY,0BAClB;cAEA,cAAc,eACb,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,qBAAC,OAAD;MAAK,WAAU;gBAAf;OACG,QAAQ,KACP,oBAAC,OAAD;QACE,WAAW,GACT,uBACA,aACA,SAAS,UACL,gDACA,6CACL;QACD,OAAO,EAAE,QAAQ,KAAK;QACtB,CAAA;OAEJ,oBAAC,OAAD;QAAK,WAAU;kBACb,oBAAC,QAAD;SAAM,WAAU;mBACd,oBAAC,QAAD;UAAM,WAAU;oBACb,KAAK,QAAQ,UAAU,MAAM,EAAE,QAAQ,YAAY,CAAC;UAChD,CAAA;SACF,CAAA;QACH,CAAA;OACL,CAAC,UACA,oBAAC,OAAD;QACE,WAAW,GACT,UAAU,KAAK,uBACf,aACA,QAAQ,UACJ,gDACA,6CACL;QACD,OAAO,EAAE,QAAQ,KAAK;QACtB,CAAA;OAEA;SAEN,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,OAAD;OACE,WAAW,GAET,oFACA,eAAe,YACb,+CACF,eAAe,aACb,+CACF,eAAe,UACb,8CACF,eAAe,WACb,4CACH;iBAEA,KAAK;OACF,CAAA,EACL,KAAK,eACJ,oBAAC,OAAD;OACE,WAAW,GAET,uHACA,eAAe,YAAY,eAAe,UACtC,gDACA,4CACL;iBAEA,KAAK;OACF,CAAA,CAEJ;QACF;SAEN,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACG,CAAC,UACA,oBAAC,OAAD;OACE,WAAW,GACT,2CACA,QAAQ,UACJ,+BACA,4BACJ,+DACA,QAAQ,UACJ,gDACA,6CACL;OACD,OAAO;QAAE,OAAO;QAAK,QAAQ;QAAK;OAClC,CAAA,EAEJ,oBAAC,OAAD;OAAK,WAAU;iBACb,oBAAC,QAAD;QAAM,WAAU;kBACd,oBAAC,QAAD;SAAM,WAAU;mBACb,KAAK,QAAQ,UAAU,MAAM,EAAE,QAAQ,YAAY,CAAC;SAChD,CAAA;QACF,CAAA;OACH,CAAA,CACF;SAEN,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,OAAD;OACE,WAAW,GAET,oFACA,eAAe,YACb,+CACF,eAAe,aACb,+CACF,eAAe,UACb,8CACF,eAAe,WACb,4CACH;iBAEA,KAAK;OACF,CAAA,EACL,KAAK,eACJ,oBAAC,OAAD;OACE,WAAW,GAET,yJACD;iBAEA,KAAK;OACF,CAAA,CAEJ;QACF;;IAEJ,EA1IC,MA0ID;IAER;EACE,CAAA;;AAIV,MAAM,OAAO"}