@lobehub/ui 5.49.1 → 5.50.1

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

@@ -0,0 +1,205 @@
+import { createStaticStyles, keyframes } from "antd-style";
+import { cva } from "class-variance-authority";
+//#region src/base-ui/Progress/style.ts
+const shimmer = keyframes`
+  from {
+    background-position: -80px 0;
+  }
+  to {
+    background-position: 200px 0;
+  }
+`;
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	bar: css`
+    height: 100%;
+    border-radius: 999px;
+    transition: width 0.3s;
+  `,
+	barActive: css`
+    background-image: linear-gradient(
+      90deg,
+      transparent,
+      color-mix(in srgb, ${cssVar.colorWhite} 35%, transparent),
+      transparent
+    );
+    background-size: 80px 100%;
+    animation: ${shimmer} 1.2s linear infinite;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  `,
+	blockLg: css`
+    height: 12px;
+  `,
+	blockMd: css`
+    height: 8px;
+  `,
+	blockSm: css`
+    height: 4px;
+  `,
+	circleInfo: css`
+    position: absolute;
+
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+    color: ${cssVar.colorText};
+    white-space: nowrap;
+  `,
+	circleRoot: css`
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  `,
+	circleSvg: css`
+    rotate: -90deg;
+  `,
+	circleTrack: css`
+    fill: none;
+    stroke: ${cssVar.colorFillTertiary};
+  `,
+	insetBarWrapper: css`
+    position: relative;
+    overflow: hidden;
+    height: 100%;
+    border-radius: 999px;
+  `,
+	insetCap: css`
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: 0;
+
+    width: 4px;
+    border-radius: 999px;
+
+    opacity: 0.6;
+    background: ${cssVar.colorBgContainer};
+  `,
+	insetTrack: css`
+    padding: 2px;
+    border-radius: 999px;
+    background: ${cssVar.colorFillTertiary};
+  `,
+	lineLg: css`
+    height: 6px;
+  `,
+	lineMd: css`
+    height: 4px;
+  `,
+	lineMeta: css`
+    display: flex;
+    gap: 12px;
+    align-items: baseline;
+    justify-content: space-between;
+
+    font-size: ${cssVar.fontSizeSM};
+    color: ${cssVar.colorTextSecondary};
+  `,
+	lineRoot: css`
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    width: 100%;
+  `,
+	lineSm: css`
+    height: 2px;
+  `,
+	lineTrack: css`
+    overflow: hidden;
+    border-radius: 999px;
+    background: ${cssVar.colorFillTertiary};
+  `,
+	lineValue: css`
+    font-family: ${cssVar.fontFamilyCode};
+    font-variant-numeric: tabular-nums;
+    color: ${cssVar.colorText};
+  `,
+	rowInfo: css`
+    min-width: 3.5ch;
+
+    font-family: ${cssVar.fontFamilyCode};
+    font-size: ${cssVar.fontSizeSM};
+    font-variant-numeric: tabular-nums;
+    color: ${cssVar.colorTextSecondary};
+    text-align: end;
+  `,
+	rowRoot: css`
+    display: flex;
+    flex: 1;
+    gap: 10px;
+    align-items: center;
+
+    width: 100%;
+  `,
+	rowTrack: css`
+    flex: 1;
+  `,
+	segment: css`
+    flex: 1;
+    border-radius: 1px;
+    background: ${cssVar.colorFillTertiary};
+  `,
+	segmentOn: css`
+    background: ${cssVar.colorPrimary};
+  `,
+	segments: css`
+    display: flex;
+    flex: 1;
+    gap: 2px;
+    min-width: 0;
+  `
+}));
+const trackHeight = cva(void 0, {
+	compoundVariants: [
+		{
+			className: styles.lineSm,
+			family: "line",
+			size: "small"
+		},
+		{
+			className: styles.lineMd,
+			family: "line",
+			size: "middle"
+		},
+		{
+			className: styles.lineLg,
+			family: "line",
+			size: "large"
+		},
+		{
+			className: styles.blockSm,
+			family: "block",
+			size: "small"
+		},
+		{
+			className: styles.blockMd,
+			family: "block",
+			size: "middle"
+		},
+		{
+			className: styles.blockLg,
+			family: "block",
+			size: "large"
+		}
+	],
+	defaultVariants: {
+		family: "line",
+		size: "middle"
+	},
+	variants: {
+		family: {
+			block: null,
+			line: null
+		},
+		size: {
+			large: null,
+			middle: null,
+			small: null
+		}
+	}
+});
+//#endregion
+export { styles, trackHeight };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Progress/style.ts"],"sourcesContent":["import { createStaticStyles, keyframes } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nconst shimmer = keyframes`\n  from {\n    background-position: -80px 0;\n  }\n  to {\n    background-position: 200px 0;\n  }\n`;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  bar: css`\n    height: 100%;\n    border-radius: 999px;\n    transition: width 0.3s;\n  `,\n  barActive: css`\n    background-image: linear-gradient(\n      90deg,\n      transparent,\n      color-mix(in srgb, ${cssVar.colorWhite} 35%, transparent),\n      transparent\n    );\n    background-size: 80px 100%;\n    animation: ${shimmer} 1.2s linear infinite;\n\n    @media (prefers-reduced-motion: reduce) {\n      animation: none;\n    }\n  `,\n  blockLg: css`\n    height: 12px;\n  `,\n  blockMd: css`\n    height: 8px;\n  `,\n  blockSm: css`\n    height: 4px;\n  `,\n  circleInfo: css`\n    position: absolute;\n\n    font-variant-numeric: tabular-nums;\n    line-height: 1;\n    color: ${cssVar.colorText};\n    white-space: nowrap;\n  `,\n  circleRoot: css`\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  `,\n  circleSvg: css`\n    rotate: -90deg;\n  `,\n  circleTrack: css`\n    fill: none;\n    stroke: ${cssVar.colorFillTertiary};\n  `,\n  insetBarWrapper: css`\n    position: relative;\n    overflow: hidden;\n    height: 100%;\n    border-radius: 999px;\n  `,\n  insetCap: css`\n    position: absolute;\n    inset-block: 0;\n    inset-inline-end: 0;\n\n    width: 4px;\n    border-radius: 999px;\n\n    opacity: 0.6;\n    background: ${cssVar.colorBgContainer};\n  `,\n  insetTrack: css`\n    padding: 2px;\n    border-radius: 999px;\n    background: ${cssVar.colorFillTertiary};\n  `,\n  lineLg: css`\n    height: 6px;\n  `,\n  lineMd: css`\n    height: 4px;\n  `,\n  lineMeta: css`\n    display: flex;\n    gap: 12px;\n    align-items: baseline;\n    justify-content: space-between;\n\n    font-size: ${cssVar.fontSizeSM};\n    color: ${cssVar.colorTextSecondary};\n  `,\n  lineRoot: css`\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    width: 100%;\n  `,\n  lineSm: css`\n    height: 2px;\n  `,\n  lineTrack: css`\n    overflow: hidden;\n    border-radius: 999px;\n    background: ${cssVar.colorFillTertiary};\n  `,\n  lineValue: css`\n    font-family: ${cssVar.fontFamilyCode};\n    font-variant-numeric: tabular-nums;\n    color: ${cssVar.colorText};\n  `,\n  rowInfo: css`\n    min-width: 3.5ch;\n\n    font-family: ${cssVar.fontFamilyCode};\n    font-size: ${cssVar.fontSizeSM};\n    font-variant-numeric: tabular-nums;\n    color: ${cssVar.colorTextSecondary};\n    text-align: end;\n  `,\n  rowRoot: css`\n    display: flex;\n    flex: 1;\n    gap: 10px;\n    align-items: center;\n\n    width: 100%;\n  `,\n  rowTrack: css`\n    flex: 1;\n  `,\n  segment: css`\n    flex: 1;\n    border-radius: 1px;\n    background: ${cssVar.colorFillTertiary};\n  `,\n  segmentOn: css`\n    background: ${cssVar.colorPrimary};\n  `,\n  segments: css`\n    display: flex;\n    flex: 1;\n    gap: 2px;\n    min-width: 0;\n  `,\n}));\n\nexport const trackHeight = cva(undefined, {\n  compoundVariants: [\n    { className: styles.lineSm, family: 'line', size: 'small' },\n    { className: styles.lineMd, family: 'line', size: 'middle' },\n    { className: styles.lineLg, family: 'line', size: 'large' },\n    { className: styles.blockSm, family: 'block', size: 'small' },\n    { className: styles.blockMd, family: 'block', size: 'middle' },\n    { className: styles.blockLg, family: 'block', size: 'large' },\n  ],\n  defaultVariants: {\n    family: 'line',\n    size: 'middle',\n  },\n  variants: {\n    family: {\n      block: null,\n      line: null,\n    },\n    size: {\n      large: null,\n      middle: null,\n      small: null,\n    },\n  },\n});\n"],"mappings":";;;AAGA,MAAM,UAAU,SAAS;;;;;;;;AASzB,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,KAAK,GAAG;;;;;CAKR,WAAW,GAAG;;;;2BAIW,OAAO,WAAW;;;;iBAI5B,QAAQ;;;;;;CAMvB,SAAS,GAAG;;;CAGZ,SAAS,GAAG;;;CAGZ,SAAS,GAAG;;;CAGZ,YAAY,GAAG;;;;;aAKJ,OAAO,UAAU;;;CAG5B,YAAY,GAAG;;;;;;CAMf,WAAW,GAAG;;;CAGd,aAAa,GAAG;;cAEJ,OAAO,kBAAkB;;CAErC,iBAAiB,GAAG;;;;;;CAMpB,UAAU,GAAG;;;;;;;;;kBASG,OAAO,iBAAiB;;CAExC,YAAY,GAAG;;;kBAGC,OAAO,kBAAkB;;CAEzC,QAAQ,GAAG;;;CAGX,QAAQ,GAAG;;;CAGX,UAAU,GAAG;;;;;;iBAME,OAAO,WAAW;aACtB,OAAO,mBAAmB;;CAErC,UAAU,GAAG;;;;;;CAMb,QAAQ,GAAG;;;CAGX,WAAW,GAAG;;;kBAGE,OAAO,kBAAkB;;CAEzC,WAAW,GAAG;mBACG,OAAO,eAAe;;aAE5B,OAAO,UAAU;;CAE5B,SAAS,GAAG;;;mBAGK,OAAO,eAAe;iBACxB,OAAO,WAAW;;aAEtB,OAAO,mBAAmB;;;CAGrC,SAAS,GAAG;;;;;;;;CAQZ,UAAU,GAAG;;;CAGb,SAAS,GAAG;;;kBAGI,OAAO,kBAAkB;;CAEzC,WAAW,GAAG;kBACE,OAAO,aAAa;;CAEpC,UAAU,GAAG;;;;;;AAMf,EAAE;AAEF,MAAa,cAAc,IAAI,KAAA,GAAW;CACxC,kBAAkB;EAChB;GAAE,WAAW,OAAO;GAAQ,QAAQ;GAAQ,MAAM;EAAQ;EAC1D;GAAE,WAAW,OAAO;GAAQ,QAAQ;GAAQ,MAAM;EAAS;EAC3D;GAAE,WAAW,OAAO;GAAQ,QAAQ;GAAQ,MAAM;EAAQ;EAC1D;GAAE,WAAW,OAAO;GAAS,QAAQ;GAAS,MAAM;EAAQ;EAC5D;GAAE,WAAW,OAAO;GAAS,QAAQ;GAAS,MAAM;EAAS;EAC7D;GAAE,WAAW,OAAO;GAAS,QAAQ;GAAS,MAAM;EAAQ;CAC9D;CACA,iBAAiB;EACf,QAAQ;EACR,MAAM;CACR;CACA,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM;EACR;EACA,MAAM;GACJ,OAAO;GACP,QAAQ;GACR,OAAO;EACT;CACF;AACF,CAAC"}

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

@@ -0,0 +1,24 @@
+import { CSSProperties, ComponentProps, ReactNode, Ref } from "react";
+//#region src/base-ui/Progress/type.d.ts
+type ProgressType = 'line' | 'circle';
+type ProgressVariant = 'line' | 'segments' | 'inset';
+type ProgressStatus = 'normal' | 'active' | 'success' | 'exception';
+type ProgressSize = 'small' | 'middle' | 'large' | number;
+interface ProgressProps extends Omit<ComponentProps<'div'>, 'children'> {
+  className?: string;
+  format?: (percent: number) => ReactNode;
+  label?: ReactNode;
+  percent: number;
+  ref?: Ref<HTMLDivElement>;
+  segments?: number;
+  showInfo?: boolean;
+  size?: ProgressSize;
+  status?: ProgressStatus;
+  strokeColor?: string;
+  style?: CSSProperties;
+  type?: ProgressType;
+  variant?: ProgressVariant;
+}
+//#endregion
+export { ProgressProps, ProgressSize, ProgressStatus, ProgressType, ProgressVariant };
+//# sourceMappingURL=type.d.mts.map

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

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

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

@@ -0,0 +1,69 @@
+"use client";
+import { statusColor, styles } from "./style.mjs";
+import { memo, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cssVar, cx } from "antd-style";
+import { Check, Info, TriangleAlert, X } from "lucide-react";
+//#region src/base-ui/Result/Result.tsx
+const statusIcon = {
+	error: /* @__PURE__ */ jsx(X, {
+		size: 36,
+		strokeWidth: 2.5
+	}),
+	info: /* @__PURE__ */ jsx(Info, {
+		size: 36,
+		strokeWidth: 2
+	}),
+	success: /* @__PURE__ */ jsx(Check, {
+		size: 36,
+		strokeWidth: 2.5
+	}),
+	warning: /* @__PURE__ */ jsx(TriangleAlert, {
+		size: 36,
+		strokeWidth: 2
+	})
+};
+const Result = memo(({ children, className, extra, icon, ref, status = "info", style, subTitle, title, ...rest }) => {
+	const iconStyle = useMemo(() => {
+		if (status === "info") return {
+			background: cssVar.colorFillTertiary,
+			color: cssVar.colorTextSecondary
+		};
+		const color = statusColor[status];
+		return {
+			background: `color-mix(in srgb, ${color} 12%, transparent)`,
+			color
+		};
+	}, [status]);
+	return /* @__PURE__ */ jsxs("section", {
+		className: cx(styles.root, className),
+		ref,
+		style,
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: styles.icon,
+				style: iconStyle,
+				children: icon ?? statusIcon[status]
+			}),
+			title && /* @__PURE__ */ jsx("h3", {
+				className: styles.title,
+				children: title
+			}),
+			subTitle && /* @__PURE__ */ jsx("p", {
+				className: styles.subTitle,
+				children: subTitle
+			}),
+			extra && /* @__PURE__ */ jsx("div", {
+				className: styles.extra,
+				children: extra
+			}),
+			children
+		]
+	});
+});
+Result.displayName = "Result";
+//#endregion
+export { Result as default };
+
+//# sourceMappingURL=Result.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Result.mjs","names":[],"sources":["../../../src/base-ui/Result/Result.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx } from 'antd-style';\nimport { Check, Info, TriangleAlert, X } from 'lucide-react';\nimport { memo, useMemo } from 'react';\n\nimport { statusColor, styles } from './style';\nimport type { ResultProps } from './type';\n\nconst statusIcon = {\n  error: <X size={36} strokeWidth={2.5} />,\n  info: <Info size={36} strokeWidth={2} />,\n  success: <Check size={36} strokeWidth={2.5} />,\n  warning: <TriangleAlert size={36} strokeWidth={2} />,\n};\n\nconst Result = memo<ResultProps>(\n  ({ children, className, extra, icon, ref, status = 'info', style, subTitle, title, ...rest }) => {\n    const iconStyle = useMemo(() => {\n      if (status === 'info') {\n        return { background: cssVar.colorFillTertiary, color: cssVar.colorTextSecondary };\n      }\n      const color = statusColor[status];\n      return { background: `color-mix(in srgb, ${color} 12%, transparent)`, color };\n    }, [status]);\n\n    return (\n      <section className={cx(styles.root, className)} ref={ref} style={style} {...rest}>\n        <div className={styles.icon} style={iconStyle}>\n          {icon ?? statusIcon[status]}\n        </div>\n        {title && <h3 className={styles.title}>{title}</h3>}\n        {subTitle && <p className={styles.subTitle}>{subTitle}</p>}\n        {extra && <div className={styles.extra}>{extra}</div>}\n        {children}\n      </section>\n    );\n  },\n);\n\nResult.displayName = 'Result';\n\nexport default Result;\n"],"mappings":";;;;;;;AASA,MAAM,aAAa;CACjB,OAAO,oBAAC,GAAD;EAAG,MAAM;EAAI,aAAa;CAAM,CAAA;CACvC,MAAM,oBAAC,MAAD;EAAM,MAAM;EAAI,aAAa;CAAI,CAAA;CACvC,SAAS,oBAAC,OAAD;EAAO,MAAM;EAAI,aAAa;CAAM,CAAA;CAC7C,SAAS,oBAAC,eAAD;EAAe,MAAM;EAAI,aAAa;CAAI,CAAA;AACrD;AAEA,MAAM,SAAS,MACZ,EAAE,UAAU,WAAW,OAAO,MAAM,KAAK,SAAS,QAAQ,OAAO,UAAU,OAAO,GAAG,WAAW;CAC/F,MAAM,YAAY,cAAc;EAC9B,IAAI,WAAW,QACb,OAAO;GAAE,YAAY,OAAO;GAAmB,OAAO,OAAO;EAAmB;EAElF,MAAM,QAAQ,YAAY;EAC1B,OAAO;GAAE,YAAY,sBAAsB,MAAM;GAAqB;EAAM;CAC9E,GAAG,CAAC,MAAM,CAAC;CAEX,OACE,qBAAC,WAAD;EAAS,WAAW,GAAG,OAAO,MAAM,SAAS;EAAQ;EAAY;EAAO,GAAI;EAA5E,UAAA;GACE,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAM,OAAO;IACjC,UAAA,QAAQ,WAAW;GACjB,CAAA;GACJ,SAAS,oBAAC,MAAD;IAAI,WAAW,OAAO;IAAQ,UAAA;GAAU,CAAA;GACjD,YAAY,oBAAC,KAAD;IAAG,WAAW,OAAO;IAAW,UAAA;GAAY,CAAA;GACxD,SAAS,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAQ,UAAA;GAAW,CAAA;GACnD;EACM;;AAEb,CACF;AAEA,OAAO,cAAc"}

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

@@ -0,0 +1,3 @@
+import { ResultProps, ResultStatus } from "./type.mjs";
+import Result from "./Result.mjs";
+export { type ResultProps, type ResultStatus, Result as default };

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

@@ -0,0 +1,66 @@
+import { createStaticStyles, cssVar } from "antd-style";
+//#region src/base-ui/Result/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	extra: css`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+    align-self: stretch;
+    justify-content: center;
+
+    margin-block-start: 10px;
+
+    > :is(div, section, form) {
+      flex: 1 1 100%;
+    }
+  `,
+	icon: css`
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+
+    width: 72px;
+    height: 72px;
+    margin-block-end: 12px;
+    border-radius: 50%;
+
+    svg {
+      width: 36px;
+      height: 36px;
+    }
+  `,
+	root: css`
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    align-items: center;
+
+    padding-block: 16px;
+    padding-inline: 8px;
+
+    text-align: center;
+  `,
+	subTitle: css`
+    max-width: 36ch;
+    margin: 0;
+    font-size: 13px;
+    color: ${cssVar.colorTextTertiary};
+  `,
+	title: css`
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+    text-wrap: balance;
+  `
+}));
+const statusColor = {
+	error: cssVar.colorError,
+	success: cssVar.colorSuccess,
+	warning: cssVar.colorWarning
+};
+//#endregion
+export { statusColor, styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Result/style.ts"],"sourcesContent":["import { createStaticStyles, cssVar } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  extra: css`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    align-items: center;\n    align-self: stretch;\n    justify-content: center;\n\n    margin-block-start: 10px;\n\n    > :is(div, section, form) {\n      flex: 1 1 100%;\n    }\n  `,\n  icon: css`\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n\n    width: 72px;\n    height: 72px;\n    margin-block-end: 12px;\n    border-radius: 50%;\n\n    svg {\n      width: 36px;\n      height: 36px;\n    }\n  `,\n  root: css`\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    align-items: center;\n\n    padding-block: 16px;\n    padding-inline: 8px;\n\n    text-align: center;\n  `,\n  subTitle: css`\n    max-width: 36ch;\n    margin: 0;\n    font-size: 13px;\n    color: ${cssVar.colorTextTertiary};\n  `,\n  title: css`\n    margin: 0;\n    font-size: 20px;\n    font-weight: 600;\n    text-wrap: balance;\n  `,\n}));\n\nexport const statusColor: Record<'success' | 'error' | 'warning', string> = {\n  error: cssVar.colorError,\n  success: cssVar.colorSuccess,\n  warning: cssVar.colorWarning,\n};\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;CAcV,MAAM,GAAG;;;;;;;;;;;;;;;;CAgBT,MAAM,GAAG;;;;;;;;;;;CAWT,UAAU,GAAG;;;;aAIF,OAAO,kBAAkB;;CAEpC,OAAO,GAAG;;;;;;AAMZ,EAAE;AAEF,MAAa,cAA+D;CAC1E,OAAO,OAAO;CACd,SAAS,OAAO;CAChB,SAAS,OAAO;AAClB"}

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

@@ -0,0 +1,14 @@
+import { ComponentProps, ReactNode, Ref } from "react";
+//#region src/base-ui/Result/type.d.ts
+type ResultStatus = 'success' | 'error' | 'info' | 'warning';
+interface ResultProps extends Omit<ComponentProps<'section'>, 'title'> {
+  extra?: ReactNode;
+  icon?: ReactNode;
+  ref?: Ref<HTMLElement>;
+  status?: ResultStatus;
+  subTitle?: ReactNode;
+  title?: ReactNode;
+}
+//#endregion
+export { ResultProps, ResultStatus };
+//# sourceMappingURL=type.d.mts.map

package/es/base-ui/Spin/NetworkGlyph.mjs

@@ -0,0 +1,70 @@
+import { styles } from "./style.mjs";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/base-ui/Spin/NetworkGlyph.tsx
+const layers = [
+	0,
+	1,
+	2
+];
+const unit = 25;
+const nodes = layers.flatMap((layer) => layers.map((row) => ({
+	x: unit + layer * unit,
+	y: unit + row * unit
+})));
+const lines = layers.slice(0, -1).flatMap((layer) => layers.flatMap((from) => layers.map((to) => ({
+	x1: unit + layer * unit,
+	x2: unit + (layer + 1) * unit,
+	y1: unit + from * unit,
+	y2: unit + to * unit
+}))));
+const particles = [
+	0,
+	1,
+	2
+];
+const minRenderedPx = (units, px, floorPx) => Math.max(units, floorPx * 100 / px);
+const NetworkGlyph = memo(({ px }) => {
+	const boxStyle = {
+		"--spin-node-size": `${minRenderedPx(6, px, 2)}px`,
+		"--spin-particle-size": `${minRenderedPx(3, px, 1.5)}px`,
+		"transform": `scale(${px / 100})`
+	};
+	return /* @__PURE__ */ jsx("span", {
+		className: styles.network,
+		style: {
+			height: px,
+			width: px
+		},
+		children: /* @__PURE__ */ jsxs("span", {
+			className: styles.networkBox,
+			style: boxStyle,
+			children: [
+				/* @__PURE__ */ jsx("svg", {
+					className: styles.networkLines,
+					viewBox: "0 0 100 100",
+					children: lines.map((line) => /* @__PURE__ */ jsx("line", { ...line }, `${line.x1}-${line.y1}-${line.y2}`))
+				}),
+				nodes.map(({ x, y }, index) => /* @__PURE__ */ jsx("i", {
+					className: styles.networkNode,
+					style: {
+						animationDelay: `${index * .2}s`,
+						left: x,
+						top: y
+					}
+				}, `${x}-${y}`)),
+				particles.map((index) => /* @__PURE__ */ jsx("i", {
+					className: styles.networkParticle,
+					style: { animationDelay: `${index * .6}s` }
+				}, index)),
+				/* @__PURE__ */ jsx("b", { className: styles.networkCore }),
+				/* @__PURE__ */ jsx("u", { className: styles.networkRing })
+			]
+		})
+	});
+});
+NetworkGlyph.displayName = "NetworkGlyph";
+//#endregion
+export { NetworkGlyph as default };
+
+//# sourceMappingURL=NetworkGlyph.mjs.map

package/es/base-ui/Spin/NetworkGlyph.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkGlyph.mjs","names":[],"sources":["../../../src/base-ui/Spin/NetworkGlyph.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport { memo } from 'react';\n\nimport { styles } from './style';\n\nconst layers = [0, 1, 2] as const;\nconst unit = 25;\n\nconst nodes = layers.flatMap((layer) =>\n  layers.map((row) => ({ x: unit + layer * unit, y: unit + row * unit })),\n);\n\nconst lines = layers.slice(0, -1).flatMap((layer) =>\n  layers.flatMap((from) =>\n    layers.map((to) => ({\n      x1: unit + layer * unit,\n      x2: unit + (layer + 1) * unit,\n      y1: unit + from * unit,\n      y2: unit + to * unit,\n    })),\n  ),\n);\n\nconst particles = [0, 1, 2] as const;\n\nconst minRenderedPx = (units: number, px: number, floorPx: number) =>\n  Math.max(units, (floorPx * 100) / px);\n\nconst NetworkGlyph = memo<{ px: number }>(({ px }) => {\n  const boxStyle = {\n    '--spin-node-size': `${minRenderedPx(6, px, 2)}px`,\n    '--spin-particle-size': `${minRenderedPx(3, px, 1.5)}px`,\n    'transform': `scale(${px / 100})`,\n  } as CSSProperties;\n\n  return (\n    <span className={styles.network} style={{ height: px, width: px }}>\n      <span className={styles.networkBox} style={boxStyle}>\n        <svg className={styles.networkLines} viewBox=\"0 0 100 100\">\n          {lines.map((line) => (\n            <line key={`${line.x1}-${line.y1}-${line.y2}`} {...line} />\n          ))}\n        </svg>\n        {nodes.map(({ x, y }, index) => (\n          <i\n            className={styles.networkNode}\n            key={`${x}-${y}`}\n            style={{ animationDelay: `${index * 0.2}s`, left: x, top: y }}\n          />\n        ))}\n        {particles.map((index) => (\n          <i\n            className={styles.networkParticle}\n            key={index}\n            style={{ animationDelay: `${index * 0.6}s` }}\n          />\n        ))}\n        <b className={styles.networkCore} />\n        <u className={styles.networkRing} />\n      </span>\n    </span>\n  );\n});\n\nNetworkGlyph.displayName = 'NetworkGlyph';\n\nexport default NetworkGlyph;\n"],"mappings":";;;;AAKA,MAAM,SAAS;CAAC;CAAG;CAAG;AAAC;AACvB,MAAM,OAAO;AAEb,MAAM,QAAQ,OAAO,SAAS,UAC5B,OAAO,KAAK,SAAS;CAAE,GAAG,OAAO,QAAQ;CAAM,GAAG,OAAO,MAAM;AAAK,EAAE,CACxE;AAEA,MAAM,QAAQ,OAAO,MAAM,GAAG,EAAE,CAAC,CAAC,SAAS,UACzC,OAAO,SAAS,SACd,OAAO,KAAK,QAAQ;CAClB,IAAI,OAAO,QAAQ;CACnB,IAAI,QAAQ,QAAQ,KAAK;CACzB,IAAI,OAAO,OAAO;CAClB,IAAI,OAAO,KAAK;AAClB,EAAE,CACJ,CACF;AAEA,MAAM,YAAY;CAAC;CAAG;CAAG;AAAC;AAE1B,MAAM,iBAAiB,OAAe,IAAY,YAChD,KAAK,IAAI,OAAQ,UAAU,MAAO,EAAE;AAEtC,MAAM,eAAe,MAAsB,EAAE,SAAS;CACpD,MAAM,WAAW;EACf,oBAAoB,GAAG,cAAc,GAAG,IAAI,CAAC,EAAE;EAC/C,wBAAwB,GAAG,cAAc,GAAG,IAAI,GAAG,EAAE;EACrD,aAAa,SAAS,KAAK,IAAI;CACjC;CAEA,OACE,oBAAC,QAAD;EAAM,WAAW,OAAO;EAAS,OAAO;GAAE,QAAQ;GAAI,OAAO;EAAG;EAC9D,UAAA,qBAAC,QAAD;GAAM,WAAW,OAAO;GAAY,OAAO;GAA3C,UAAA;IACE,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAc,SAAQ;KAC1C,UAAA,MAAM,KAAK,SACV,oBAAC,QAAD,EAA+C,GAAI,KAAO,GAA/C,GAAG,KAAK,GAAG,GAAG,KAAK,GAAG,GAAG,KAAK,IAAiB,CAC3D;IACE,CAAA;IACJ,MAAM,KAAK,EAAE,GAAG,KAAK,UACpB,oBAAC,KAAD;KACE,WAAW,OAAO;KAElB,OAAO;MAAE,gBAAgB,GAAG,QAAQ,GAAI;MAAI,MAAM;MAAG,KAAK;KAAE;IAC7D,GAFM,GAAG,EAAE,GAAG,GAEd,CACF;IACA,UAAU,KAAK,UACd,oBAAC,KAAD;KACE,WAAW,OAAO;KAElB,OAAO,EAAE,gBAAgB,GAAG,QAAQ,GAAI,GAAG;IAC5C,GAFM,KAEN,CACF;IACD,oBAAC,KAAD,EAAG,WAAW,OAAO,YAAc,CAAA;IACnC,oBAAC,KAAD,EAAG,WAAW,OAAO,YAAc,CAAA;GAC/B;;CACF,CAAA;AAEV,CAAC;AAED,aAAa,cAAc"}

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

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

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

@@ -0,0 +1,100 @@
+"use client";
+import Icon from "../../Icon/Icon.mjs";
+import { styles } from "./style.mjs";
+import NetworkGlyph from "./NetworkGlyph.mjs";
+import { memo, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { LoaderCircle } from "lucide-react";
+//#region src/base-ui/Spin/Spin.tsx
+const sizeMap = {
+	large: 32,
+	middle: 20,
+	small: 14
+};
+const resolveSize = (size) => typeof size === "number" ? size : sizeMap[size];
+const Spin = memo(({ children, className, indicator, percent, ref, size = "middle", spinning = true, style, tip, variant = "default", ...rest }) => {
+	const px = useMemo(() => resolveSize(size), [size]);
+	const glyph = useMemo(() => {
+		if (indicator) return indicator;
+		if (variant === "network") return /* @__PURE__ */ jsx(NetworkGlyph, { px });
+		if (typeof percent === "number") {
+			const clamped = Math.min(100, Math.max(0, percent));
+			const circumference = 2 * Math.PI * 9;
+			const offset = circumference * (1 - clamped / 100);
+			return /* @__PURE__ */ jsxs("svg", {
+				className: cx(styles.glyph, styles.ring),
+				height: px,
+				viewBox: "0 0 24 24",
+				width: px,
+				children: [/* @__PURE__ */ jsx("circle", {
+					className: styles.ringTrack,
+					cx: 12,
+					cy: 12,
+					fill: "none",
+					r: 9,
+					strokeWidth: 2.5
+				}), /* @__PURE__ */ jsx("circle", {
+					className: styles.ringProgress,
+					cx: 12,
+					cy: 12,
+					fill: "none",
+					r: 9,
+					strokeDasharray: circumference,
+					strokeDashoffset: offset,
+					strokeLinecap: "round",
+					strokeWidth: 2.5
+				})]
+			});
+		}
+		return /* @__PURE__ */ jsx(Icon, {
+			spin: true,
+			className: styles.glyph,
+			icon: LoaderCircle,
+			size: px
+		});
+	}, [
+		indicator,
+		variant,
+		percent,
+		px
+	]);
+	if (!spinning) return children ?? null;
+	if (!children) return /* @__PURE__ */ jsx("div", {
+		"aria-busy": true,
+		"aria-live": "polite",
+		className: cx(styles.root, className),
+		ref,
+		role: "status",
+		style,
+		...rest,
+		children: /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			children: glyph
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(styles.wrapper, className),
+		ref,
+		style,
+		...rest,
+		children: [children, /* @__PURE__ */ jsxs("div", {
+			"aria-busy": true,
+			"aria-live": "polite",
+			className: styles.overlay,
+			role: "status",
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				children: glyph
+			}), tip && /* @__PURE__ */ jsx("span", {
+				className: styles.tip,
+				children: tip
+			})]
+		})]
+	});
+});
+Spin.displayName = "Spin";
+//#endregion
+export { Spin as default };
+
+//# sourceMappingURL=Spin.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spin.mjs","names":[],"sources":["../../../src/base-ui/Spin/Spin.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { LoaderCircle } from 'lucide-react';\nimport { memo, useMemo } from 'react';\n\nimport Icon from '@/Icon';\n\nimport NetworkGlyph from './NetworkGlyph';\nimport { styles } from './style';\nimport type { SpinProps, SpinSize } from './type';\n\nconst sizeMap: Record<'small' | 'middle' | 'large', number> = {\n  large: 32,\n  middle: 20,\n  small: 14,\n};\n\nconst resolveSize = (size: SpinSize) => (typeof size === 'number' ? size : sizeMap[size]);\n\nconst Spin = memo<SpinProps>(\n  ({\n    children,\n    className,\n    indicator,\n    percent,\n    ref,\n    size = 'middle',\n    spinning = true,\n    style,\n    tip,\n    variant = 'default',\n    ...rest\n  }) => {\n    const px = useMemo(() => resolveSize(size), [size]);\n\n    const glyph = useMemo(() => {\n      if (indicator) return indicator;\n\n      if (variant === 'network') return <NetworkGlyph px={px} />;\n\n      if (typeof percent === 'number') {\n        const clamped = Math.min(100, Math.max(0, percent));\n        const circumference = 2 * Math.PI * 9;\n        const offset = circumference * (1 - clamped / 100);\n\n        return (\n          <svg className={cx(styles.glyph, styles.ring)} height={px} viewBox=\"0 0 24 24\" width={px}>\n            <circle\n              className={styles.ringTrack}\n              cx={12}\n              cy={12}\n              fill=\"none\"\n              r={9}\n              strokeWidth={2.5}\n            />\n            <circle\n              className={styles.ringProgress}\n              cx={12}\n              cy={12}\n              fill=\"none\"\n              r={9}\n              strokeDasharray={circumference}\n              strokeDashoffset={offset}\n              strokeLinecap=\"round\"\n              strokeWidth={2.5}\n            />\n          </svg>\n        );\n      }\n\n      return <Icon spin className={styles.glyph} icon={LoaderCircle} size={px} />;\n    }, [indicator, variant, percent, px]);\n\n    if (!spinning) return children ?? null;\n\n    if (!children) {\n      return (\n        <div\n          aria-busy\n          aria-live=\"polite\"\n          className={cx(styles.root, className)}\n          ref={ref}\n          role=\"status\"\n          style={style}\n          {...rest}\n        >\n          <span aria-hidden>{glyph}</span>\n        </div>\n      );\n    }\n\n    return (\n      <div className={cx(styles.wrapper, className)} ref={ref} style={style} {...rest}>\n        {children}\n        <div aria-busy aria-live=\"polite\" className={styles.overlay} role=\"status\">\n          <span aria-hidden>{glyph}</span>\n          {tip && <span className={styles.tip}>{tip}</span>}\n        </div>\n      </div>\n    );\n  },\n);\n\nSpin.displayName = 'Spin';\n\nexport default Spin;\n"],"mappings":";;;;;;;;;AAYA,MAAM,UAAwD;CAC5D,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAEA,MAAM,eAAe,SAAoB,OAAO,SAAS,WAAW,OAAO,QAAQ;AAEnF,MAAM,OAAO,MACV,EACC,UACA,WACA,WACA,SACA,KACA,OAAO,UACP,WAAW,MACX,OACA,KACA,UAAU,WACV,GAAG,WACC;CACJ,MAAM,KAAK,cAAc,YAAY,IAAI,GAAG,CAAC,IAAI,CAAC;CAElD,MAAM,QAAQ,cAAc;EAC1B,IAAI,WAAW,OAAO;EAEtB,IAAI,YAAY,WAAW,OAAO,oBAAC,cAAD,EAAkB,GAAK,CAAA;EAEzD,IAAI,OAAO,YAAY,UAAU;GAC/B,MAAM,UAAU,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC;GAClD,MAAM,gBAAgB,IAAI,KAAK,KAAK;GACpC,MAAM,SAAS,iBAAiB,IAAI,UAAU;GAE9C,OACE,qBAAC,OAAD;IAAK,WAAW,GAAG,OAAO,OAAO,OAAO,IAAI;IAAG,QAAQ;IAAI,SAAQ;IAAY,OAAO;IAAtF,UAAA,CACE,oBAAC,UAAD;KACE,WAAW,OAAO;KAClB,IAAI;KACJ,IAAI;KACJ,MAAK;KACL,GAAG;KACH,aAAa;IACd,CAAA,GACD,oBAAC,UAAD;KACE,WAAW,OAAO;KAClB,IAAI;KACJ,IAAI;KACJ,MAAK;KACL,GAAG;KACH,iBAAiB;KACjB,kBAAkB;KAClB,eAAc;KACd,aAAa;IACd,CAAA,CACE;;EAET;EAEA,OAAO,oBAAC,MAAD;GAAM,MAAA;GAAK,WAAW,OAAO;GAAO,MAAM;GAAc,MAAM;EAAK,CAAA;CAC5E,GAAG;EAAC;EAAW;EAAS;EAAS;CAAE,CAAC;CAEpC,IAAI,CAAC,UAAU,OAAO,YAAY;CAElC,IAAI,CAAC,UACH,OACE,oBAAC,OAAD;EACE,aAAA;EACA,aAAU;EACV,WAAW,GAAG,OAAO,MAAM,SAAS;EAC/B;EACL,MAAK;EACE;EACP,GAAI;EAEJ,UAAA,oBAAC,QAAD;GAAM,eAAA;GAAa,UAAA;EAAY,CAAA;CAC5B,CAAA;CAIT,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,SAAS,SAAS;EAAQ;EAAY;EAAO,GAAI;EAA3E,UAAA,CACG,UACD,qBAAC,OAAD;GAAK,aAAA;GAAU,aAAU;GAAS,WAAW,OAAO;GAAS,MAAK;GAAlE,UAAA,CACE,oBAAC,QAAD;IAAM,eAAA;IAAa,UAAA;GAAY,CAAA,GAC9B,OAAO,oBAAC,QAAD;IAAM,WAAW,OAAO;IAAM,UAAA;GAAU,CAAA,CAC7C;EACF,CAAA,CAAA;;AAET,CACF;AAEA,KAAK,cAAc"}

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

@@ -0,0 +1,3 @@
+import { SpinProps, SpinSize, SpinVariant } from "./type.mjs";
+import Spin from "./Spin.mjs";
+export { type SpinProps, type SpinSize, type SpinVariant, Spin as default };