@lobehub/ui 5.51.2 → 5.53.0

package/es/base-ui/Statistic/Statistic.mjs

@@ -0,0 +1,42 @@
+"use client";
+import Skeleton from "../Skeleton/index.mjs";
+import { formatStatisticValue } from "./formatValue.mjs";
+import { styles } from "./style.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/base-ui/Statistic/Statistic.tsx
+const Statistic = memo(({ className, classNames, formatter, loading = false, precision, prefix, ref, styles: customStyles, suffix, title, value, ...rest }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(styles.root, className),
+		ref,
+		...rest,
+		children: [title != null && /* @__PURE__ */ jsx("div", {
+			className: cx(styles.title, classNames?.title),
+			style: customStyles?.title,
+			children: title
+		}), loading ? /* @__PURE__ */ jsx(Skeleton, {
+			height: 30,
+			width: 96
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: cx(styles.value, classNames?.value),
+			style: customStyles?.value,
+			children: [
+				prefix != null && /* @__PURE__ */ jsx("span", {
+					className: styles.affix,
+					children: prefix
+				}),
+				/* @__PURE__ */ jsx("span", { children: formatter ? formatter(value) : formatStatisticValue(value, precision) }),
+				suffix != null && /* @__PURE__ */ jsx("span", {
+					className: styles.affix,
+					children: suffix
+				})
+			]
+		})]
+	});
+});
+Statistic.displayName = "Statistic";
+//#endregion
+export { Statistic as default };
+
+//# sourceMappingURL=Statistic.mjs.map

package/es/base-ui/Statistic/Statistic.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Statistic.mjs","names":[],"sources":["../../../src/base-ui/Statistic/Statistic.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo } from 'react';\n\nimport Skeleton from '@/base-ui/Skeleton';\n\nimport { formatStatisticValue } from './formatValue';\nimport { styles } from './style';\nimport type { StatisticProps } from './type';\n\nconst Statistic = memo<StatisticProps>(\n  ({\n    className,\n    classNames,\n    formatter,\n    loading = false,\n    precision,\n    prefix,\n    ref,\n    styles: customStyles,\n    suffix,\n    title,\n    value,\n    ...rest\n  }) => {\n    return (\n      <div className={cx(styles.root, className)} ref={ref} {...rest}>\n        {title != null && (\n          <div className={cx(styles.title, classNames?.title)} style={customStyles?.title}>\n            {title}\n          </div>\n        )}\n        {loading ? (\n          <Skeleton height={30} width={96} />\n        ) : (\n          <div className={cx(styles.value, classNames?.value)} style={customStyles?.value}>\n            {prefix != null && <span className={styles.affix}>{prefix}</span>}\n            <span>{formatter ? formatter(value) : formatStatisticValue(value, precision)}</span>\n            {suffix != null && <span className={styles.affix}>{suffix}</span>}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nStatistic.displayName = 'Statistic';\n\nexport default Statistic;\n"],"mappings":";;;;;;;;AAWA,MAAM,YAAY,MACf,EACC,WACA,YACA,WACA,UAAU,OACV,WACA,QACA,KACA,QAAQ,cACR,QACA,OACA,OACA,GAAG,WACC;CACJ,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,MAAM,SAAS;EAAQ;EAAK,GAAI;EAA1D,UAAA,CACG,SAAS,QACR,oBAAC,OAAD;GAAK,WAAW,GAAG,OAAO,OAAO,YAAY,KAAK;GAAG,OAAO,cAAc;GACvE,UAAA;EACE,CAAA,GAEN,UACC,oBAAC,UAAD;GAAU,QAAQ;GAAI,OAAO;EAAK,CAAA,IAElC,qBAAC,OAAD;GAAK,WAAW,GAAG,OAAO,OAAO,YAAY,KAAK;GAAG,OAAO,cAAc;GAA1E,UAAA;IACG,UAAU,QAAQ,oBAAC,QAAD;KAAM,WAAW,OAAO;KAAQ,UAAA;IAAa,CAAA;IAChE,oBAAC,QAAD,EAAA,UAAO,YAAY,UAAU,KAAK,IAAI,qBAAqB,OAAO,SAAS,EAAQ,CAAA;IAClF,UAAU,QAAQ,oBAAC,QAAD;KAAM,WAAW,OAAO;KAAQ,UAAA;IAAa,CAAA;GAC7D;EAEJ,CAAA,CAAA;;AAET,CACF;AAEA,UAAU,cAAc"}

package/es/base-ui/Statistic/formatValue.d.mts

@@ -0,0 +1,5 @@
+//#region src/base-ui/Statistic/formatValue.d.ts
+declare const formatStatisticValue: (value: number | string | undefined, precision?: number) => string;
+//#endregion
+export { formatStatisticValue };
+//# sourceMappingURL=formatValue.d.mts.map

package/es/base-ui/Statistic/formatValue.mjs

@@ -0,0 +1,23 @@
+//#region src/base-ui/Statistic/formatValue.ts
+const grouping = new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 });
+const formatStatisticValue = (value, precision) => {
+	if (value === void 0 || value === null) return "";
+	if (typeof value === "string") {
+		if (!/^-?\d+(\.\d+)?$/.test(value)) return value;
+		return formatStatisticValue(Number(value), precision);
+	}
+	if (!Number.isFinite(value)) return String(value);
+	if (precision !== void 0) return new Intl.NumberFormat("en-US", {
+		maximumFractionDigits: precision,
+		minimumFractionDigits: precision
+	}).format(value);
+	const raw = String(value);
+	if (raw.includes("e")) return raw;
+	const [integer, decimal] = raw.split(".");
+	const grouped = grouping.format(Number(integer));
+	return decimal ? `${grouped}.${decimal}` : grouped;
+};
+//#endregion
+export { formatStatisticValue };
+
+//# sourceMappingURL=formatValue.mjs.map

package/es/base-ui/Statistic/formatValue.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatValue.mjs","names":[],"sources":["../../../src/base-ui/Statistic/formatValue.ts"],"sourcesContent":["const grouping = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 });\n\nexport const formatStatisticValue = (\n  value: number | string | undefined,\n  precision?: number,\n): string => {\n  if (value === undefined || value === null) return '';\n  if (typeof value === 'string') {\n    if (!/^-?\\d+(\\.\\d+)?$/.test(value)) return value;\n    return formatStatisticValue(Number(value), precision);\n  }\n  if (!Number.isFinite(value)) return String(value);\n\n  if (precision !== undefined) {\n    return new Intl.NumberFormat('en-US', {\n      maximumFractionDigits: precision,\n      minimumFractionDigits: precision,\n    }).format(value);\n  }\n\n  const raw = String(value);\n  if (raw.includes('e')) return raw;\n\n  const [integer, decimal] = raw.split('.');\n  const grouped = grouping.format(Number(integer));\n\n  return decimal ? `${grouped}.${decimal}` : grouped;\n};\n"],"mappings":";AAAA,MAAM,WAAW,IAAI,KAAK,aAAa,SAAS,EAAE,uBAAuB,EAAE,CAAC;AAE5E,MAAa,wBACX,OACA,cACW;CACX,IAAI,UAAU,KAAA,KAAa,UAAU,MAAM,OAAO;CAClD,IAAI,OAAO,UAAU,UAAU;EAC7B,IAAI,CAAC,kBAAkB,KAAK,KAAK,GAAG,OAAO;EAC3C,OAAO,qBAAqB,OAAO,KAAK,GAAG,SAAS;CACtD;CACA,IAAI,CAAC,OAAO,SAAS,KAAK,GAAG,OAAO,OAAO,KAAK;CAEhD,IAAI,cAAc,KAAA,GAChB,OAAO,IAAI,KAAK,aAAa,SAAS;EACpC,uBAAuB;EACvB,uBAAuB;CACzB,CAAC,CAAC,CAAC,OAAO,KAAK;CAGjB,MAAM,MAAM,OAAO,KAAK;CACxB,IAAI,IAAI,SAAS,GAAG,GAAG,OAAO;CAE9B,MAAM,CAAC,SAAS,WAAW,IAAI,MAAM,GAAG;CACxC,MAAM,UAAU,SAAS,OAAO,OAAO,OAAO,CAAC;CAE/C,OAAO,UAAU,GAAG,QAAQ,GAAG,YAAY;AAC7C"}

package/es/base-ui/Statistic/index.d.mts

@@ -0,0 +1,4 @@
+import { formatStatisticValue } from "./formatValue.mjs";
+import { StatisticProps } from "./type.mjs";
+import Statistic from "./Statistic.mjs";
+export { type StatisticProps, Statistic as default, formatStatisticValue };

package/es/base-ui/Statistic/style.mjs

@@ -0,0 +1,34 @@
+import { createStaticStyles } from "antd-style";
+//#region src/base-ui/Statistic/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	affix: css`
+    font-size: 14px;
+    font-weight: 400;
+    color: ${cssVar.colorTextSecondary};
+  `,
+	root: css`
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  `,
+	title: css`
+    font-size: 14px;
+    line-height: 1.5;
+    color: ${cssVar.colorTextDescription};
+  `,
+	value: css`
+    display: flex;
+    gap: 4px;
+    align-items: baseline;
+
+    font-size: 24px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.25;
+    color: ${cssVar.colorText};
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/base-ui/Statistic/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Statistic/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  affix: css`\n    font-size: 14px;\n    font-weight: 400;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  root: css`\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n  `,\n  title: css`\n    font-size: 14px;\n    line-height: 1.5;\n    color: ${cssVar.colorTextDescription};\n  `,\n  value: css`\n    display: flex;\n    gap: 4px;\n    align-items: baseline;\n\n    font-size: 24px;\n    font-weight: 600;\n    font-variant-numeric: tabular-nums;\n    line-height: 1.25;\n    color: ${cssVar.colorText};\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;aAGC,OAAO,mBAAmB;;CAErC,MAAM,GAAG;;;;;CAKT,OAAO,GAAG;;;aAGC,OAAO,qBAAqB;;CAEvC,OAAO,GAAG;;;;;;;;;aASC,OAAO,UAAU;;AAE9B,EAAE"}

package/es/base-ui/Statistic/type.d.mts

@@ -0,0 +1,23 @@
+import { CSSProperties, ComponentProps, ReactNode, Ref } from "react";
+//#region src/base-ui/Statistic/type.d.ts
+interface StatisticProps extends Omit<ComponentProps<'div'>, 'title' | 'prefix'> {
+  classNames?: {
+    title?: string;
+    value?: string;
+  };
+  formatter?: (value: number | string | undefined) => ReactNode;
+  loading?: boolean;
+  precision?: number;
+  prefix?: ReactNode;
+  ref?: Ref<HTMLDivElement>;
+  styles?: {
+    title?: CSSProperties;
+    value?: CSSProperties;
+  };
+  suffix?: ReactNode;
+  title?: ReactNode;
+  value?: number | string;
+}
+//#endregion
+export { StatisticProps };
+//# sourceMappingURL=type.d.mts.map

package/es/base-ui/Steps/Steps.d.mts

@@ -0,0 +1,6 @@
+import { StepsProps } from "./type.mjs";
+//#region src/base-ui/Steps/Steps.d.ts
+declare const Steps: import("react").NamedExoticComponent<StepsProps>;
+//#endregion
+export { Steps as default };
+//# sourceMappingURL=Steps.d.mts.map

package/es/base-ui/Steps/Steps.mjs

@@ -0,0 +1,74 @@
+"use client";
+import Icon from "../../Icon/Icon.mjs";
+import { styles } from "./style.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { Check } from "lucide-react";
+//#region src/base-ui/Steps/Steps.tsx
+const getStatus = (index, current, item) => {
+	if (item.status) return item.status;
+	if (current === void 0) return void 0;
+	if (index < current) return "finish";
+	if (index === current) return "process";
+	return "wait";
+};
+const renderIndicator = (item, index, status, isDot) => {
+	if (isDot) return null;
+	if (item.icon != null) return item.icon;
+	if (status === "finish") return /* @__PURE__ */ jsx(Icon, {
+		icon: Check,
+		size: 12
+	});
+	return index + 1;
+};
+const Steps = memo(({ className, classNames, current, items, orientation = "horizontal", ref, styles: customStyles, variant = "default", ...rest }) => {
+	const isDot = variant === "dot";
+	return /* @__PURE__ */ jsx("ol", {
+		ref,
+		className: cx(styles.root, orientation === "vertical" ? styles.vertical : styles.horizontal, isDot && styles.dot, className),
+		...rest,
+		children: items.map((item, index) => {
+			const status = getStatus(index, current, item);
+			const isLast = index === items.length - 1;
+			return /* @__PURE__ */ jsxs("li", {
+				"aria-current": current !== void 0 && index === current ? "step" : void 0,
+				className: cx(classNames?.item),
+				"data-status": status ?? "guide",
+				style: customStyles?.item,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: cx(styles.indicator, classNames?.indicator),
+						style: customStyles?.indicator,
+						children: renderIndicator(item, index, status, isDot)
+					}),
+					(item.title != null || item.description != null) && /* @__PURE__ */ jsxs("div", {
+						className: styles.body,
+						children: [item.title != null && /* @__PURE__ */ jsx("div", {
+							className: cx(styles.title, classNames?.title),
+							style: customStyles?.title,
+							children: item.title
+						}), item.description != null && /* @__PURE__ */ jsx("div", {
+							className: cx(styles.description, classNames?.description),
+							style: customStyles?.description,
+							children: item.description
+						})]
+					}),
+					!isLast && /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: styles.connector,
+						style: isDot ? {
+							insetBlockStart: 20,
+							insetInlineStart: 3
+						} : void 0
+					})
+				]
+			}, item.key ?? index);
+		})
+	});
+});
+Steps.displayName = "Steps";
+//#endregion
+export { Steps as default };
+
+//# sourceMappingURL=Steps.mjs.map

package/es/base-ui/Steps/Steps.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Steps.mjs","names":[],"sources":["../../../src/base-ui/Steps/Steps.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { Check } from 'lucide-react';\nimport { memo, type ReactNode } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { styles } from './style';\nimport type { StepItem, StepsProps, StepStatus } from './type';\n\nconst getStatus = (\n  index: number,\n  current: number | undefined,\n  item: StepItem,\n): StepStatus | undefined => {\n  if (item.status) return item.status;\n  if (current === undefined) return undefined;\n  if (index < current) return 'finish';\n  if (index === current) return 'process';\n  return 'wait';\n};\n\nconst renderIndicator = (\n  item: StepItem,\n  index: number,\n  status: StepStatus | undefined,\n  isDot: boolean,\n): ReactNode => {\n  if (isDot) return null;\n  if (item.icon != null) return item.icon;\n  if (status === 'finish') return <Icon icon={Check} size={12} />;\n  return index + 1;\n};\n\nconst Steps = memo<StepsProps>(\n  ({\n    className,\n    classNames,\n    current,\n    items,\n    orientation = 'horizontal',\n    ref,\n    styles: customStyles,\n    variant = 'default',\n    ...rest\n  }) => {\n    const isDot = variant === 'dot';\n\n    return (\n      <ol\n        ref={ref}\n        className={cx(\n          styles.root,\n          orientation === 'vertical' ? styles.vertical : styles.horizontal,\n          isDot && styles.dot,\n          className,\n        )}\n        {...rest}\n      >\n        {items.map((item, index) => {\n          const status = getStatus(index, current, item);\n          const isLast = index === items.length - 1;\n\n          return (\n            <li\n              aria-current={current !== undefined && index === current ? 'step' : undefined}\n              className={cx(classNames?.item)}\n              data-status={status ?? 'guide'}\n              key={item.key ?? index}\n              style={customStyles?.item}\n            >\n              <span\n                className={cx(styles.indicator, classNames?.indicator)}\n                style={customStyles?.indicator}\n              >\n                {renderIndicator(item, index, status, isDot)}\n              </span>\n              {(item.title != null || item.description != null) && (\n                <div className={styles.body}>\n                  {item.title != null && (\n                    <div\n                      className={cx(styles.title, classNames?.title)}\n                      style={customStyles?.title}\n                    >\n                      {item.title}\n                    </div>\n                  )}\n                  {item.description != null && (\n                    <div\n                      className={cx(styles.description, classNames?.description)}\n                      style={customStyles?.description}\n                    >\n                      {item.description}\n                    </div>\n                  )}\n                </div>\n              )}\n              {!isLast && (\n                <span\n                  aria-hidden=\"true\"\n                  className={styles.connector}\n                  style={isDot ? { insetBlockStart: 20, insetInlineStart: 3 } : undefined}\n                />\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    );\n  },\n);\n\nSteps.displayName = 'Steps';\n\nexport default Steps;\n"],"mappings":";;;;;;;;AAWA,MAAM,aACJ,OACA,SACA,SAC2B;CAC3B,IAAI,KAAK,QAAQ,OAAO,KAAK;CAC7B,IAAI,YAAY,KAAA,GAAW,OAAO,KAAA;CAClC,IAAI,QAAQ,SAAS,OAAO;CAC5B,IAAI,UAAU,SAAS,OAAO;CAC9B,OAAO;AACT;AAEA,MAAM,mBACJ,MACA,OACA,QACA,UACc;CACd,IAAI,OAAO,OAAO;CAClB,IAAI,KAAK,QAAQ,MAAM,OAAO,KAAK;CACnC,IAAI,WAAW,UAAU,OAAO,oBAAC,MAAD;EAAM,MAAM;EAAO,MAAM;CAAK,CAAA;CAC9D,OAAO,QAAQ;AACjB;AAEA,MAAM,QAAQ,MACX,EACC,WACA,YACA,SACA,OACA,cAAc,cACd,KACA,QAAQ,cACR,UAAU,WACV,GAAG,WACC;CACJ,MAAM,QAAQ,YAAY;CAE1B,OACE,oBAAC,MAAD;EACO;EACL,WAAW,GACT,OAAO,MACP,gBAAgB,aAAa,OAAO,WAAW,OAAO,YACtD,SAAS,OAAO,KAChB,SACF;EACA,GAAI;EAEH,UAAA,MAAM,KAAK,MAAM,UAAU;GAC1B,MAAM,SAAS,UAAU,OAAO,SAAS,IAAI;GAC7C,MAAM,SAAS,UAAU,MAAM,SAAS;GAExC,OACE,qBAAC,MAAD;IACE,gBAAc,YAAY,KAAA,KAAa,UAAU,UAAU,SAAS,KAAA;IACpE,WAAW,GAAG,YAAY,IAAI;IAC9B,eAAa,UAAU;IAEvB,OAAO,cAAc;IALvB,UAAA;KAOE,oBAAC,QAAD;MACE,WAAW,GAAG,OAAO,WAAW,YAAY,SAAS;MACrD,OAAO,cAAc;MAEpB,UAAA,gBAAgB,MAAM,OAAO,QAAQ,KAAK;KACvC,CAAA;MACJ,KAAK,SAAS,QAAQ,KAAK,eAAe,SAC1C,qBAAC,OAAD;MAAK,WAAW,OAAO;MAAvB,UAAA,CACG,KAAK,SAAS,QACb,oBAAC,OAAD;OACE,WAAW,GAAG,OAAO,OAAO,YAAY,KAAK;OAC7C,OAAO,cAAc;OAEpB,UAAA,KAAK;MACH,CAAA,GAEN,KAAK,eAAe,QACnB,oBAAC,OAAD;OACE,WAAW,GAAG,OAAO,aAAa,YAAY,WAAW;OACzD,OAAO,cAAc;OAEpB,UAAA,KAAK;MACH,CAAA,CAEJ;;KAEN,CAAC,UACA,oBAAC,QAAD;MACE,eAAY;MACZ,WAAW,OAAO;MAClB,OAAO,QAAQ;OAAE,iBAAiB;OAAI,kBAAkB;MAAE,IAAI,KAAA;KAC/D,CAAA;IAED;GApCG,GAAA,KAAK,OAAO,KAoCf;EAER,CAAC;CACC,CAAA;AAER,CACF;AAEA,MAAM,cAAc"}

package/es/base-ui/Steps/index.d.mts

@@ -0,0 +1,3 @@
+import { StepItem, StepStatus, StepsProps } from "./type.mjs";
+import Steps from "./Steps.mjs";
+export { type StepItem, type StepStatus, type StepsProps, Steps as default };

package/es/base-ui/Steps/style.mjs

@@ -0,0 +1,155 @@
+import { createStaticStyles } from "antd-style";
+//#region src/base-ui/Steps/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	body: css`
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+  `,
+	connector: css`
+    flex: 1;
+    min-width: 16px;
+    height: 1px;
+    background: ${cssVar.colorBorderSecondary};
+
+    li[data-status='finish'] > & {
+      background: ${cssVar.colorPrimary};
+    }
+  `,
+	description: css`
+    font-size: 13px;
+    line-height: 1.5;
+    color: ${cssVar.colorTextSecondary};
+  `,
+	dot: css`
+    & > li > span:first-child {
+      width: 7px;
+      height: 7px;
+      margin-block-start: 8px;
+      border: 0;
+
+      background: ${cssVar.colorTextQuaternary};
+    }
+
+    & > li[data-status='process'] > span:first-child,
+    & > li[data-status='finish'] > span:first-child {
+      background: ${cssVar.colorPrimary};
+    }
+  `,
+	horizontal: css`
+    display: flex;
+    gap: 8px;
+    align-items: center;
+
+    & > li {
+      display: flex;
+      flex: 1;
+      gap: 8px;
+      align-items: center;
+
+      min-width: 0;
+    }
+
+    & > li:last-child {
+      flex: none;
+    }
+  `,
+	indicator: css`
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+
+    width: 22px;
+    height: 22px;
+    border: 1px solid ${cssVar.colorBorder};
+    border-radius: 50%;
+
+    font-size: 12px;
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+    color: ${cssVar.colorTextDescription};
+
+    li[data-status='process'] > & {
+      border-color: ${cssVar.colorPrimary};
+      color: ${cssVar.colorBgContainer};
+      background: ${cssVar.colorPrimary};
+    }
+
+    li[data-status='finish'] > & {
+      border-color: ${cssVar.colorPrimary};
+      color: ${cssVar.colorPrimary};
+    }
+
+    li[data-status='error'] > & {
+      border-color: ${cssVar.colorError};
+      color: ${cssVar.colorError};
+    }
+
+    li[data-status='guide'] > & {
+      color: ${cssVar.colorTextSecondary};
+    }
+  `,
+	root: css`
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  `,
+	title: css`
+    font-size: 14px;
+    line-height: 22px;
+    color: ${cssVar.colorTextDescription};
+    white-space: nowrap;
+
+    li[data-status='process'] &,
+    li[data-status='finish'] &,
+    li[data-status='guide'] & {
+      color: ${cssVar.colorText};
+    }
+
+    li[data-status='process'] & {
+      font-weight: 500;
+    }
+
+    li[data-status='error'] & {
+      color: ${cssVar.colorError};
+    }
+  `,
+	vertical: css`
+    display: flex;
+    flex-direction: column;
+
+    & > li {
+      position: relative;
+
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr);
+      column-gap: 12px;
+
+      padding-block-end: 18px;
+    }
+
+    & > li:last-child {
+      padding-block-end: 0;
+    }
+
+    & > li > span[aria-hidden] {
+      position: absolute;
+      inset-block: 26px 4px;
+      inset-inline-start: 11px;
+
+      width: 1px;
+      min-width: 0;
+      height: auto;
+    }
+
+    & > li > div > div:first-child {
+      white-space: normal;
+    }
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/base-ui/Steps/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Steps/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  body: css`\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n  `,\n  connector: css`\n    flex: 1;\n    min-width: 16px;\n    height: 1px;\n    background: ${cssVar.colorBorderSecondary};\n\n    li[data-status='finish'] > & {\n      background: ${cssVar.colorPrimary};\n    }\n  `,\n  description: css`\n    font-size: 13px;\n    line-height: 1.5;\n    color: ${cssVar.colorTextSecondary};\n  `,\n  dot: css`\n    & > li > span:first-child {\n      width: 7px;\n      height: 7px;\n      margin-block-start: 8px;\n      border: 0;\n\n      background: ${cssVar.colorTextQuaternary};\n    }\n\n    & > li[data-status='process'] > span:first-child,\n    & > li[data-status='finish'] > span:first-child {\n      background: ${cssVar.colorPrimary};\n    }\n  `,\n  horizontal: css`\n    display: flex;\n    gap: 8px;\n    align-items: center;\n\n    & > li {\n      display: flex;\n      flex: 1;\n      gap: 8px;\n      align-items: center;\n\n      min-width: 0;\n    }\n\n    & > li:last-child {\n      flex: none;\n    }\n  `,\n  indicator: css`\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n\n    width: 22px;\n    height: 22px;\n    border: 1px solid ${cssVar.colorBorder};\n    border-radius: 50%;\n\n    font-size: 12px;\n    font-weight: 500;\n    font-variant-numeric: tabular-nums;\n    color: ${cssVar.colorTextDescription};\n\n    li[data-status='process'] > & {\n      border-color: ${cssVar.colorPrimary};\n      color: ${cssVar.colorBgContainer};\n      background: ${cssVar.colorPrimary};\n    }\n\n    li[data-status='finish'] > & {\n      border-color: ${cssVar.colorPrimary};\n      color: ${cssVar.colorPrimary};\n    }\n\n    li[data-status='error'] > & {\n      border-color: ${cssVar.colorError};\n      color: ${cssVar.colorError};\n    }\n\n    li[data-status='guide'] > & {\n      color: ${cssVar.colorTextSecondary};\n    }\n  `,\n  root: css`\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  `,\n  title: css`\n    font-size: 14px;\n    line-height: 22px;\n    color: ${cssVar.colorTextDescription};\n    white-space: nowrap;\n\n    li[data-status='process'] &,\n    li[data-status='finish'] &,\n    li[data-status='guide'] & {\n      color: ${cssVar.colorText};\n    }\n\n    li[data-status='process'] & {\n      font-weight: 500;\n    }\n\n    li[data-status='error'] & {\n      color: ${cssVar.colorError};\n    }\n  `,\n  vertical: css`\n    display: flex;\n    flex-direction: column;\n\n    & > li {\n      position: relative;\n\n      display: grid;\n      grid-template-columns: auto minmax(0, 1fr);\n      column-gap: 12px;\n\n      padding-block-end: 18px;\n    }\n\n    & > li:last-child {\n      padding-block-end: 0;\n    }\n\n    & > li > span[aria-hidden] {\n      position: absolute;\n      inset-block: 26px 4px;\n      inset-inline-start: 11px;\n\n      width: 1px;\n      min-width: 0;\n      height: auto;\n    }\n\n    & > li > div > div:first-child {\n      white-space: normal;\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;CAMT,WAAW,GAAG;;;;kBAIE,OAAO,qBAAqB;;;oBAG1B,OAAO,aAAa;;;CAGtC,aAAa,GAAG;;;aAGL,OAAO,mBAAmB;;CAErC,KAAK,GAAG;;;;;;;oBAOU,OAAO,oBAAoB;;;;;oBAK3B,OAAO,aAAa;;;CAGtC,YAAY,GAAG;;;;;;;;;;;;;;;;;;CAkBf,WAAW,GAAG;;;;;;;;wBAQQ,OAAO,YAAY;;;;;;aAM9B,OAAO,qBAAqB;;;sBAGnB,OAAO,aAAa;eAC3B,OAAO,iBAAiB;oBACnB,OAAO,aAAa;;;;sBAIlB,OAAO,aAAa;eAC3B,OAAO,aAAa;;;;sBAIb,OAAO,WAAW;eACzB,OAAO,WAAW;;;;eAIlB,OAAO,mBAAmB;;;CAGvC,MAAM,GAAG;;;;;CAKT,OAAO,GAAG;;;aAGC,OAAO,qBAAqB;;;;;;eAM1B,OAAO,UAAU;;;;;;;;eAQjB,OAAO,WAAW;;;CAG/B,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCf,EAAE"}

package/es/base-ui/Steps/type.d.mts

@@ -0,0 +1,32 @@
+import { CSSProperties, ComponentProps, Key, ReactNode, Ref } from "react";
+//#region src/base-ui/Steps/type.d.ts
+type StepStatus = 'wait' | 'process' | 'finish' | 'error';
+interface StepItem {
+  description?: ReactNode;
+  icon?: ReactNode;
+  key?: Key;
+  status?: StepStatus;
+  title?: ReactNode;
+}
+interface StepsProps extends Omit<ComponentProps<'ol'>, 'children'> {
+  classNames?: {
+    description?: string;
+    indicator?: string;
+    item?: string;
+    title?: string;
+  };
+  current?: number;
+  items: StepItem[];
+  orientation?: 'horizontal' | 'vertical';
+  ref?: Ref<HTMLOListElement>;
+  styles?: {
+    description?: CSSProperties;
+    indicator?: CSSProperties;
+    item?: CSSProperties;
+    title?: CSSProperties;
+  };
+  variant?: 'default' | 'dot';
+}
+//#endregion
+export { StepItem, StepStatus, StepsProps };
+//# sourceMappingURL=type.d.mts.map

package/es/base-ui/Table/FilterMenu.mjs

@@ -0,0 +1,45 @@
+"use client";
+import Icon from "../../Icon/Icon.mjs";
+import DropdownMenu from "../DropdownMenu/DropdownMenu.mjs";
+import { styles } from "./style.mjs";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { ListFilter } from "lucide-react";
+//#region src/base-ui/Table/FilterMenu.tsx
+const FilterMenu = memo(({ filters, label, onChange, value }) => {
+	const items = [
+		...filters.map((filter) => ({
+			checked: value.includes(filter.value),
+			closeOnClick: false,
+			key: String(filter.value),
+			label: filter.text,
+			onCheckedChange: (checked) => onChange(checked ? [...value, filter.value] : value.filter((item) => item !== filter.value)),
+			type: "checkbox"
+		})),
+		{ type: "divider" },
+		{
+			disabled: value.length === 0,
+			key: "__reset",
+			label: "Reset",
+			onClick: () => onChange([])
+		}
+	];
+	return /* @__PURE__ */ jsx(DropdownMenu, {
+		items,
+		children: /* @__PURE__ */ jsx("button", {
+			"aria-label": `Filter ${label}`,
+			className: cx(styles.filterButton, value.length > 0 && styles.filterActive),
+			type: "button",
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon: ListFilter,
+				size: 12
+			})
+		})
+	});
+});
+FilterMenu.displayName = "TableFilterMenu";
+//#endregion
+export { FilterMenu as default };
+
+//# sourceMappingURL=FilterMenu.mjs.map

package/es/base-ui/Table/FilterMenu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterMenu.mjs","names":[],"sources":["../../../src/base-ui/Table/FilterMenu.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ListFilter } from 'lucide-react';\nimport { memo, type ReactNode } from 'react';\n\nimport DropdownMenu from '@/base-ui/DropdownMenu';\nimport type { DropdownItem } from '@/base-ui/DropdownMenu/type';\nimport Icon from '@/Icon';\n\nimport { styles } from './style';\nimport type { FilterValue } from './type';\n\ninterface FilterMenuProps {\n  filters: { text: ReactNode; value: FilterValue }[];\n  label: string;\n  onChange: (next: FilterValue[]) => void;\n  value: FilterValue[];\n}\n\nconst FilterMenu = memo<FilterMenuProps>(({ filters, label, onChange, value }) => {\n  const items: DropdownItem[] = [\n    ...filters.map((filter) => ({\n      checked: value.includes(filter.value),\n      closeOnClick: false,\n      key: String(filter.value),\n      label: filter.text,\n      onCheckedChange: (checked: boolean) =>\n        onChange(\n          checked ? [...value, filter.value] : value.filter((item) => item !== filter.value),\n        ),\n      type: 'checkbox' as const,\n    })),\n    { type: 'divider' as const },\n    { disabled: value.length === 0, key: '__reset', label: 'Reset', onClick: () => onChange([]) },\n  ];\n\n  return (\n    <DropdownMenu items={items}>\n      <button\n        aria-label={`Filter ${label}`}\n        className={cx(styles.filterButton, value.length > 0 && styles.filterActive)}\n        type=\"button\"\n      >\n        <Icon icon={ListFilter} size={12} />\n      </button>\n    </DropdownMenu>\n  );\n});\n\nFilterMenu.displayName = 'TableFilterMenu';\n\nexport default FilterMenu;\n"],"mappings":";;;;;;;;;AAoBA,MAAM,aAAa,MAAuB,EAAE,SAAS,OAAO,UAAU,YAAY;CAChF,MAAM,QAAwB;EAC5B,GAAG,QAAQ,KAAK,YAAY;GAC1B,SAAS,MAAM,SAAS,OAAO,KAAK;GACpC,cAAc;GACd,KAAK,OAAO,OAAO,KAAK;GACxB,OAAO,OAAO;GACd,kBAAkB,YAChB,SACE,UAAU,CAAC,GAAG,OAAO,OAAO,KAAK,IAAI,MAAM,QAAQ,SAAS,SAAS,OAAO,KAAK,CACnF;GACF,MAAM;EACR,EAAE;EACF,EAAE,MAAM,UAAmB;EAC3B;GAAE,UAAU,MAAM,WAAW;GAAG,KAAK;GAAW,OAAO;GAAS,eAAe,SAAS,CAAC,CAAC;EAAE;CAC9F;CAEA,OACE,oBAAC,cAAD;EAAqB;EACnB,UAAA,oBAAC,UAAD;GACE,cAAY,UAAU;GACtB,WAAW,GAAG,OAAO,cAAc,MAAM,SAAS,KAAK,OAAO,YAAY;GAC1E,MAAK;GAEL,UAAA,oBAAC,MAAD;IAAM,MAAM;IAAY,MAAM;GAAK,CAAA;EAC7B,CAAA;CACI,CAAA;AAElB,CAAC;AAED,WAAW,cAAc"}

package/es/base-ui/Table/Table.d.mts

@@ -0,0 +1,10 @@
+import { TableProps } from "./type.mjs";
+import { ReactNode } from "react";
+import { RowData } from "@tanstack/react-table";
+//#region src/base-ui/Table/Table.d.ts
+declare const Table: (<T extends RowData>(props: TableProps<T>) => ReactNode) & {
+  displayName?: string;
+};
+//#endregion
+export { Table as default };
+//# sourceMappingURL=Table.d.mts.map

package/es/base-ui/Table/Table.mjs

@@ -0,0 +1,134 @@
+"use client";
+import { useEventCallback } from "../../hooks/useEventCallback.mjs";
+import Pagination from "../Pagination/Pagination.mjs";
+import Spin from "../Spin/Spin.mjs";
+import { tableFeatureSet } from "./features.mjs";
+import { styles } from "./style.mjs";
+import FilterMenu from "./FilterMenu.mjs";
+import { getFixedOffsets } from "./fixedOffsets.mjs";
+import { toColumnDefs } from "./toColumnDefs.mjs";
+import TableBody from "./TableBody.mjs";
+import TableHead from "./TableHead.mjs";
+import { useTableState } from "./useTableState.mjs";
+import { memo, useEffect, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { useTable } from "@tanstack/react-table";
+//#region src/base-ui/Table/Table.tsx
+const EMPTY_DATA = [];
+const TableInner = (props) => {
+	const { bordered = false, className, classNames, columns, dataSource = EMPTY_DATA, emptyText, loading = false, onChange, onRow, pagination, ref, renderFilter, rowClassName, rowKey, scroll, size = "middle", style, styles: customStyles, tableLayout } = props;
+	const state = useTableState({
+		columns,
+		onChange,
+		pagination
+	});
+	const columnDefs = useMemo(() => toColumnDefs(columns), [columns]);
+	const fixedOffsets = useMemo(() => getFixedOffsets(columns), [columns]);
+	const table = useTable({
+		columns: columnDefs,
+		data: dataSource,
+		enableMultiSort: false,
+		enableSortingRemoval: true,
+		features: tableFeatureSet,
+		getRowId: (record) => String(typeof rowKey === "function" ? rowKey(record) : record[rowKey]),
+		manualSorting: state.manualSorting,
+		onColumnFiltersChange: state.onColumnFiltersChange,
+		onSortingChange: state.onSortingChange,
+		state: {
+			columnFilters: state.columnFilters,
+			sorting: state.sorting
+		}
+	});
+	const allRows = table.getRowModel().rows;
+	const { page } = state;
+	const clientPaginated = pagination !== false && state.config?.total === void 0;
+	const total = state.config?.total ?? allRows.length;
+	const pageCount = Math.max(1, Math.ceil(total / page.pageSize));
+	const pageIndex = Math.min(page.pageIndex, pageCount - 1);
+	const rows = clientPaginated ? allRows.slice(pageIndex * page.pageSize, (pageIndex + 1) * page.pageSize) : allRows;
+	const syncClampedPage = useEventCallback(() => state.clampPage(pageIndex));
+	useEffect(() => {
+		if (clientPaginated && pageIndex !== page.pageIndex) syncClampedPage();
+	}, [
+		clientPaginated,
+		pageIndex,
+		page.pageIndex,
+		syncClampedPage
+	]);
+	const minWidth = scroll?.x === "max-content" ? "100%" : scroll?.x;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(styles.root, className),
+		ref,
+		style,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cx(styles.wrapper, bordered && styles.bordered, classNames?.wrapper),
+			"data-table-wrapper": "",
+			style: {
+				maxHeight: scroll?.y,
+				...customStyles?.wrapper
+			},
+			children: [/* @__PURE__ */ jsxs("table", {
+				className: cx(styles.table, size === "small" ? styles.small : styles.middle),
+				style: {
+					minWidth,
+					tableLayout,
+					width: scroll?.x === "max-content" ? "max-content" : "100%"
+				},
+				children: [/* @__PURE__ */ jsx(TableHead, {
+					classNames,
+					columnIds: state.columnIds,
+					columns,
+					fixedOffsets,
+					getColumn: (id) => table.getColumn(id),
+					styles: customStyles,
+					renderFilter: (column, id) => {
+						if (renderFilter) return renderFilter(column, id, table);
+						const tableColumn = table.getColumn(id);
+						const value = tableColumn?.getFilterValue() ?? [];
+						return /* @__PURE__ */ jsx(FilterMenu, {
+							filters: column.filters ?? [],
+							label: typeof column.title === "string" ? column.title : id,
+							value,
+							onChange: (next) => tableColumn?.setFilterValue(next.length > 0 ? next : void 0)
+						});
+					}
+				}), /* @__PURE__ */ jsx(TableBody, {
+					classNames,
+					columnIds: state.columnIds,
+					columns,
+					emptyText,
+					fixedOffsets,
+					loading,
+					rowClassName,
+					rows,
+					styles: customStyles,
+					onRow
+				})]
+			}), loading && rows.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: styles.loading,
+				"data-table-loading": "",
+				children: /* @__PURE__ */ jsx(Spin, {})
+			})]
+		}), pagination !== false && total > 0 && /* @__PURE__ */ jsx("div", {
+			className: styles.pagination,
+			children: /* @__PURE__ */ jsx(Pagination, {
+				current: pageIndex + 1,
+				pageSize: page.pageSize,
+				pageSizeOptions: state.config?.pageSizeOptions,
+				showSizeChanger: state.config?.showSizeChanger,
+				total,
+				onChange: (next, pageSize) => state.onPaginationChange({
+					pageIndex: next - 1,
+					pageSize
+				})
+			})
+		})]
+	});
+};
+const Table = memo(TableInner);
+Table.displayName = "Table";
+//#endregion
+export { TableInner, Table as default };
+
+//# sourceMappingURL=Table.mjs.map