@jinmi/ui 0.0.0-stage → 6.0.1

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

@@ -0,0 +1,181 @@
+"use client";
+import Icon from "../../Icon/Icon.mjs";
+import { styles, trackHeight } from "./style.mjs";
+import { memo, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cssVar, cx } from "antd-style";
+import { Check, X } from "lucide-react";
+//#region src/base-ui/Progress/Progress.tsx
+const circleDiameterMap = {
+	large: 72,
+	middle: 40,
+	small: 20
+};
+const blockHeightMap = {
+	large: 12,
+	middle: 8,
+	small: 4
+};
+const circleStrokeMap = {
+	large: 4,
+	middle: 3,
+	small: 2
+};
+const statusColor = {
+	active: cssVar.colorInfo,
+	exception: cssVar.colorError,
+	success: cssVar.colorSuccess
+};
+const Progress = memo(({ className, format, label, percent, ref, segments = 20, showInfo = true, size = "middle", status = "normal", strokeColor, style, type = "line", variant = "line", ...rest }) => {
+	const clamped = Math.min(100, Math.max(0, percent));
+	const barColor = strokeColor ?? (status === "normal" ? cssVar.colorPrimary : statusColor[status]);
+	const info = useMemo(() => {
+		if (status === "success") return /* @__PURE__ */ jsx(Icon, {
+			icon: Check,
+			size: 14,
+			style: { color: barColor }
+		});
+		if (status === "exception") return /* @__PURE__ */ jsx(Icon, {
+			icon: X,
+			size: 14,
+			style: { color: barColor }
+		});
+		return format ? format(clamped) : `${clamped}%`;
+	}, [
+		status,
+		format,
+		clamped,
+		barColor
+	]);
+	const progressAria = {
+		"aria-valuemax": 100,
+		"aria-valuemin": 0,
+		"aria-valuenow": clamped,
+		"aria-valuetext": useMemo(() => {
+			if (!format) return void 0;
+			const value = format(clamped);
+			return typeof value === "string" || typeof value === "number" ? String(value) : void 0;
+		}, [format, clamped]),
+		"role": "progressbar"
+	};
+	if (type === "circle") {
+		const isPreset = typeof size === "string";
+		const diameter = isPreset ? circleDiameterMap[size] : size;
+		const stroke = isPreset ? circleStrokeMap[size] : Math.max(2, Math.round(diameter * 3 / 40));
+		const radius = diameter / 2 - stroke;
+		const circumference = 2 * Math.PI * radius;
+		const offset = circumference * (1 - clamped / 100);
+		return /* @__PURE__ */ jsxs("div", {
+			className: cx(styles.circleRoot, className),
+			ref,
+			style,
+			...progressAria,
+			...rest,
+			children: [/* @__PURE__ */ jsxs("svg", {
+				className: styles.circleSvg,
+				height: diameter,
+				viewBox: `0 0 ${diameter} ${diameter}`,
+				width: diameter,
+				children: [/* @__PURE__ */ jsx("circle", {
+					className: styles.circleTrack,
+					cx: diameter / 2,
+					cy: diameter / 2,
+					r: radius,
+					strokeWidth: stroke
+				}), /* @__PURE__ */ jsx("circle", {
+					cx: diameter / 2,
+					cy: diameter / 2,
+					fill: "none",
+					r: radius,
+					stroke: barColor,
+					strokeDasharray: circumference,
+					strokeDashoffset: offset,
+					strokeLinecap: "round",
+					strokeWidth: stroke,
+					style: { transition: "stroke-dashoffset 0.3s" }
+				})]
+			}), showInfo && diameter >= 40 && /* @__PURE__ */ jsx("span", {
+				className: styles.circleInfo,
+				style: { fontSize: Math.round(diameter * .15 + 6) },
+				children: info
+			})]
+		});
+	}
+	const heightStyle = typeof size === "number" ? { height: size } : void 0;
+	const heightClass = (family) => typeof size === "number" ? void 0 : trackHeight({
+		family,
+		size
+	});
+	if (variant === "segments") {
+		const filled = Math.round(segments * clamped / 100);
+		return /* @__PURE__ */ jsxs("div", {
+			className: cx(styles.rowRoot, className),
+			ref,
+			style,
+			...progressAria,
+			...rest,
+			children: [/* @__PURE__ */ jsx("div", {
+				className: cx(styles.segments, heightClass("block")),
+				style: heightStyle,
+				children: Array.from({ length: segments }, (_, index) => /* @__PURE__ */ jsx("span", {
+					className: cx(styles.segment, index < filled && styles.segmentOn),
+					style: index < filled ? { background: barColor } : void 0
+				}, index))
+			}), showInfo && /* @__PURE__ */ jsx("span", {
+				className: styles.rowInfo,
+				children: info
+			})]
+		});
+	}
+	if (variant === "inset") return /* @__PURE__ */ jsxs("div", {
+		className: cx(styles.rowRoot, className),
+		ref,
+		style,
+		...progressAria,
+		...rest,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cx(styles.split, heightClass("block")),
+			style: heightStyle,
+			children: [clamped > 0 && /* @__PURE__ */ jsx("span", {
+				className: cx(styles.splitFill, status === "active" && styles.barActive),
+				style: {
+					backgroundColor: barColor,
+					minWidth: typeof size === "number" ? size : blockHeightMap[size],
+					width: clamped === 100 ? "100%" : `calc((100% - 3px) * ${clamped / 100})`
+				}
+			}), clamped < 100 && /* @__PURE__ */ jsx("span", { className: styles.splitRest })]
+		}), showInfo && /* @__PURE__ */ jsx("span", {
+			className: styles.rowInfo,
+			children: info
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(styles.lineRoot, className),
+		ref,
+		style,
+		...progressAria,
+		...rest,
+		children: [(label || showInfo) && /* @__PURE__ */ jsxs("div", {
+			className: styles.lineMeta,
+			children: [/* @__PURE__ */ jsx("span", { children: label }), showInfo && /* @__PURE__ */ jsx("span", {
+				className: styles.lineValue,
+				children: info
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: cx(styles.lineTrack, heightClass("line")),
+			style: heightStyle,
+			children: /* @__PURE__ */ jsx("div", {
+				style: {
+					backgroundColor: barColor,
+					width: `${clamped}%`
+				},
+				className: cx(styles.bar, variant === "line" && status === "active" && styles.barActive)
+			})
+		})]
+	});
+});
+Progress.displayName = "Progress";
+//#endregion
+export { Progress as default };
+
+//# sourceMappingURL=Progress.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.mjs","names":[],"sources":["../../../src/base-ui/Progress/Progress.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cssVar, cx } from 'antd-style';\r\nimport { Check, X } from 'lucide-react';\r\nimport { memo, useMemo } from 'react';\r\n\r\nimport Icon from '@/Icon';\r\n\r\nimport { styles, trackHeight } from './style';\r\nimport type { ProgressProps } from './type';\r\n\r\nconst circleDiameterMap: Record<'small' | 'middle' | 'large', number> = {\r\n  large: 72,\r\n  middle: 40,\r\n  small: 20,\r\n};\r\nconst blockHeightMap: Record<'small' | 'middle' | 'large', number> = {\r\n  large: 12,\r\n  middle: 8,\r\n  small: 4,\r\n};\r\nconst circleStrokeMap: Record<'small' | 'middle' | 'large', number> = {\r\n  large: 4,\r\n  middle: 3,\r\n  small: 2,\r\n};\r\n\r\nconst statusColor = {\r\n  active: cssVar.colorInfo,\r\n  exception: cssVar.colorError,\r\n  success: cssVar.colorSuccess,\r\n};\r\n\r\nconst Progress = memo<ProgressProps>(\r\n  ({\r\n    className,\r\n    format,\r\n    label,\r\n    percent,\r\n    ref,\r\n    segments = 20,\r\n    showInfo = true,\r\n    size = 'middle',\r\n    status = 'normal',\r\n    strokeColor,\r\n    style,\r\n    type = 'line',\r\n    variant = 'line',\r\n    ...rest\r\n  }) => {\r\n    const clamped = Math.min(100, Math.max(0, percent));\r\n    const barColor =\r\n      strokeColor ?? (status === 'normal' ? cssVar.colorPrimary : statusColor[status]);\r\n\r\n    const info = useMemo(() => {\r\n      if (status === 'success') return <Icon icon={Check} size={14} style={{ color: barColor }} />;\r\n      if (status === 'exception') return <Icon icon={X} size={14} style={{ color: barColor }} />;\r\n      return format ? format(clamped) : `${clamped}%`;\r\n    }, [status, format, clamped, barColor]);\r\n\r\n    const ariaValueText = useMemo(() => {\r\n      if (!format) return undefined;\r\n      const value = format(clamped);\r\n      return typeof value === 'string' || typeof value === 'number' ? String(value) : undefined;\r\n    }, [format, clamped]);\r\n\r\n    const progressAria = {\r\n      'aria-valuemax': 100,\r\n      'aria-valuemin': 0,\r\n      'aria-valuenow': clamped,\r\n      'aria-valuetext': ariaValueText,\r\n      'role': 'progressbar' as const,\r\n    };\r\n\r\n    if (type === 'circle') {\r\n      const isPreset = typeof size === 'string';\r\n      const diameter = isPreset\r\n        ? circleDiameterMap[size as 'small' | 'middle' | 'large']\r\n        : (size as number);\r\n      const stroke = isPreset\r\n        ? circleStrokeMap[size as 'small' | 'middle' | 'large']\r\n        : Math.max(2, Math.round((diameter * 3) / 40));\r\n      const radius = diameter / 2 - stroke;\r\n      const circumference = 2 * Math.PI * radius;\r\n      const offset = circumference * (1 - clamped / 100);\r\n\r\n      return (\r\n        <div\r\n          className={cx(styles.circleRoot, className)}\r\n          ref={ref}\r\n          style={style}\r\n          {...progressAria}\r\n          {...rest}\r\n        >\r\n          <svg\r\n            className={styles.circleSvg}\r\n            height={diameter}\r\n            viewBox={`0 0 ${diameter} ${diameter}`}\r\n            width={diameter}\r\n          >\r\n            <circle\r\n              className={styles.circleTrack}\r\n              cx={diameter / 2}\r\n              cy={diameter / 2}\r\n              r={radius}\r\n              strokeWidth={stroke}\r\n            />\r\n            <circle\r\n              cx={diameter / 2}\r\n              cy={diameter / 2}\r\n              fill=\"none\"\r\n              r={radius}\r\n              stroke={barColor}\r\n              strokeDasharray={circumference}\r\n              strokeDashoffset={offset}\r\n              strokeLinecap=\"round\"\r\n              strokeWidth={stroke}\r\n              style={{ transition: 'stroke-dashoffset 0.3s' }}\r\n            />\r\n          </svg>\r\n          {showInfo && diameter >= 40 && (\r\n            <span\r\n              className={styles.circleInfo}\r\n              style={{ fontSize: Math.round(diameter * 0.15 + 6) }}\r\n            >\r\n              {info}\r\n            </span>\r\n          )}\r\n        </div>\r\n      );\r\n    }\r\n\r\n    const heightStyle = typeof size === 'number' ? { height: size } : undefined;\r\n    const heightClass = (family: 'line' | 'block') =>\r\n      typeof size === 'number' ? undefined : trackHeight({ family, size });\r\n\r\n    if (variant === 'segments') {\r\n      const filled = Math.round((segments * clamped) / 100);\r\n\r\n      return (\r\n        <div\r\n          className={cx(styles.rowRoot, className)}\r\n          ref={ref}\r\n          style={style}\r\n          {...progressAria}\r\n          {...rest}\r\n        >\r\n          <div className={cx(styles.segments, heightClass('block'))} style={heightStyle}>\r\n            {Array.from({ length: segments }, (_, index) => (\r\n              <span\r\n                className={cx(styles.segment, index < filled && styles.segmentOn)}\r\n                key={index}\r\n                style={index < filled ? { background: barColor } : undefined}\r\n              />\r\n            ))}\r\n          </div>\r\n          {showInfo && <span className={styles.rowInfo}>{info}</span>}\r\n        </div>\r\n      );\r\n    }\r\n\r\n    if (variant === 'inset') {\r\n      return (\r\n        <div\r\n          className={cx(styles.rowRoot, className)}\r\n          ref={ref}\r\n          style={style}\r\n          {...progressAria}\r\n          {...rest}\r\n        >\r\n          <div className={cx(styles.split, heightClass('block'))} style={heightStyle}>\r\n            {clamped > 0 && (\r\n              <span\r\n                className={cx(styles.splitFill, status === 'active' && styles.barActive)}\r\n                style={{\r\n                  backgroundColor: barColor,\r\n                  minWidth: typeof size === 'number' ? size : blockHeightMap[size],\r\n                  width: clamped === 100 ? '100%' : `calc((100% - 3px) * ${clamped / 100})`,\r\n                }}\r\n              />\r\n            )}\r\n            {clamped < 100 && <span className={styles.splitRest} />}\r\n          </div>\r\n          {showInfo && <span className={styles.rowInfo}>{info}</span>}\r\n        </div>\r\n      );\r\n    }\r\n\r\n    return (\r\n      <div\r\n        className={cx(styles.lineRoot, className)}\r\n        ref={ref}\r\n        style={style}\r\n        {...progressAria}\r\n        {...rest}\r\n      >\r\n        {(label || showInfo) && (\r\n          <div className={styles.lineMeta}>\r\n            <span>{label}</span>\r\n            {showInfo && <span className={styles.lineValue}>{info}</span>}\r\n          </div>\r\n        )}\r\n        <div className={cx(styles.lineTrack, heightClass('line'))} style={heightStyle}>\r\n          <div\r\n            style={{ backgroundColor: barColor, width: `${clamped}%` }}\r\n            className={cx(\r\n              styles.bar,\r\n              variant === 'line' && status === 'active' && styles.barActive,\r\n            )}\r\n          />\r\n        </div>\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nProgress.displayName = 'Progress';\r\n\r\nexport default Progress;\r\n"],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+import { ProgressProps, ProgressSize, ProgressStatus, ProgressType, ProgressVariant } from "./type.mjs";
+import Progress from "./Progress.mjs";
+export { type ProgressProps, type ProgressSize, type ProgressStatus, type ProgressType, type ProgressVariant, Progress as default };

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

@@ -0,0 +1,196 @@
+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};
+  `,
+	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%;
+  `,
+	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;
+  `,
+	split: css`
+    display: flex;
+    flex: 1;
+    gap: 3px;
+    min-width: 0;
+  `,
+	splitFill: css`
+    flex: none;
+    border-radius: 999px;
+    transition: width 0.3s;
+  `,
+	splitRest: css`
+    flex: 1;
+    border-radius: 999px;
+    background: ${cssVar.colorFillSecondary};
+  `
+}));
+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';\r\nimport { cva } from 'class-variance-authority';\r\n\r\nconst shimmer = keyframes`\r\n  from {\r\n    background-position: -80px 0;\r\n  }\r\n  to {\r\n    background-position: 200px 0;\r\n  }\r\n`;\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\r\n  bar: css`\r\n    height: 100%;\r\n    border-radius: 999px;\r\n    transition: width 0.3s;\r\n  `,\r\n  barActive: css`\r\n    background-image: linear-gradient(\r\n      90deg,\r\n      transparent,\r\n      color-mix(in srgb, ${cssVar.colorWhite} 35%, transparent),\r\n      transparent\r\n    );\r\n    background-size: 80px 100%;\r\n    animation: ${shimmer} 1.2s linear infinite;\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      animation: none;\r\n    }\r\n  `,\r\n  blockLg: css`\r\n    height: 12px;\r\n  `,\r\n  blockMd: css`\r\n    height: 8px;\r\n  `,\r\n  blockSm: css`\r\n    height: 4px;\r\n  `,\r\n  circleInfo: css`\r\n    position: absolute;\r\n\r\n    font-variant-numeric: tabular-nums;\r\n    line-height: 1;\r\n    color: ${cssVar.colorText};\r\n    white-space: nowrap;\r\n  `,\r\n  circleRoot: css`\r\n    position: relative;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  `,\r\n  circleSvg: css`\r\n    rotate: -90deg;\r\n  `,\r\n  circleTrack: css`\r\n    fill: none;\r\n    stroke: ${cssVar.colorFillTertiary};\r\n  `,\r\n  lineLg: css`\r\n    height: 6px;\r\n  `,\r\n  lineMd: css`\r\n    height: 4px;\r\n  `,\r\n  lineMeta: css`\r\n    display: flex;\r\n    gap: 12px;\r\n    align-items: baseline;\r\n    justify-content: space-between;\r\n\r\n    font-size: ${cssVar.fontSizeSM};\r\n    color: ${cssVar.colorTextSecondary};\r\n  `,\r\n  lineRoot: css`\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 6px;\r\n    width: 100%;\r\n  `,\r\n  lineSm: css`\r\n    height: 2px;\r\n  `,\r\n  lineTrack: css`\r\n    overflow: hidden;\r\n    border-radius: 999px;\r\n    background: ${cssVar.colorFillTertiary};\r\n  `,\r\n  lineValue: css`\r\n    font-family: ${cssVar.fontFamilyCode};\r\n    font-variant-numeric: tabular-nums;\r\n    color: ${cssVar.colorText};\r\n  `,\r\n  rowInfo: css`\r\n    min-width: 3.5ch;\r\n\r\n    font-family: ${cssVar.fontFamilyCode};\r\n    font-size: ${cssVar.fontSizeSM};\r\n    font-variant-numeric: tabular-nums;\r\n    color: ${cssVar.colorTextSecondary};\r\n    text-align: end;\r\n  `,\r\n  rowRoot: css`\r\n    display: flex;\r\n    flex: 1;\r\n    gap: 10px;\r\n    align-items: center;\r\n\r\n    width: 100%;\r\n  `,\r\n  segment: css`\r\n    flex: 1;\r\n    border-radius: 1px;\r\n    background: ${cssVar.colorFillTertiary};\r\n  `,\r\n  segmentOn: css`\r\n    background: ${cssVar.colorPrimary};\r\n  `,\r\n  segments: css`\r\n    display: flex;\r\n    flex: 1;\r\n    gap: 2px;\r\n    min-width: 0;\r\n  `,\r\n  split: css`\r\n    display: flex;\r\n    flex: 1;\r\n    gap: 3px;\r\n    min-width: 0;\r\n  `,\r\n  splitFill: css`\r\n    flex: none;\r\n    border-radius: 999px;\r\n    transition: width 0.3s;\r\n  `,\r\n  splitRest: css`\r\n    flex: 1;\r\n    border-radius: 999px;\r\n    background: ${cssVar.colorFillSecondary};\r\n  `,\r\n}));\r\n\r\nexport const trackHeight = cva(undefined, {\r\n  compoundVariants: [\r\n    { className: styles.lineSm, family: 'line', size: 'small' },\r\n    { className: styles.lineMd, family: 'line', size: 'middle' },\r\n    { className: styles.lineLg, family: 'line', size: 'large' },\r\n    { className: styles.blockSm, family: 'block', size: 'small' },\r\n    { className: styles.blockMd, family: 'block', size: 'middle' },\r\n    { className: styles.blockLg, family: 'block', size: 'large' },\r\n  ],\r\n  defaultVariants: {\r\n    family: 'line',\r\n    size: 'middle',\r\n  },\r\n  variants: {\r\n    family: {\r\n      block: null,\r\n      line: null,\r\n    },\r\n    size: {\r\n      large: null,\r\n      middle: null,\r\n      small: null,\r\n    },\r\n  },\r\n});\r\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,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,SAAS,GAAG;;;kBAGI,OAAO,kBAAkB;;CAEzC,WAAW,GAAG;kBACE,OAAO,aAAa;;CAEpC,UAAU,GAAG;;;;;;CAMb,OAAO,GAAG;;;;;;CAMV,WAAW,GAAG;;;;;CAKd,WAAW,GAAG;;;kBAGE,OAAO,mBAAmB;;AAE5C,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/QRCode/QRCode.d.mts

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

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

@@ -0,0 +1,105 @@
+"use client";
+import Icon from "../../Icon/Icon.mjs";
+import Spin from "../Spin/Spin.mjs";
+import { useTranslation } from "../../i18n/useTranslation.mjs";
+import { panelStyles } from "../panelStyles.mjs";
+import qrCode_default from "../../i18n/resources/en/qrCode.mjs";
+import { buildQrPath } from "./qrPath.mjs";
+import { styles } from "./style.mjs";
+import { memo, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { RotateCw } from "lucide-react";
+import { encode } from "uqr";
+//#region src/base-ui/QRCode/QRCode.tsx
+const ICON_RATIO = .22;
+const QRCode = memo(({ bgColor = "#fff", bordered = true, className, color = "#000", errorLevel = "M", icon, onRefresh, ref, size = 160, status = "active", style, value, ...rest }) => {
+	const { t } = useTranslation(qrCode_default);
+	const { count, path } = useMemo(() => {
+		try {
+			const { data } = encode(value, {
+				border: 0,
+				ecc: icon ? "H" : errorLevel
+			});
+			const hole = icon ? Math.ceil(data.length * ICON_RATIO) | 1 : 0;
+			return {
+				count: data.length,
+				path: buildQrPath(data, hole)
+			};
+		} catch {
+			return {
+				count: 0,
+				path: ""
+			};
+		}
+	}, [
+		value,
+		icon,
+		errorLevel
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(styles.root, bordered && styles.bordered, className),
+		ref,
+		style: {
+			background: bgColor,
+			...style
+		},
+		...rest,
+		children: [
+			/* @__PURE__ */ jsxs("svg", {
+				"aria-label": value,
+				height: size,
+				role: "img",
+				shapeRendering: "crispEdges",
+				viewBox: `0 0 ${count} ${count}`,
+				width: size,
+				children: [/* @__PURE__ */ jsx("rect", {
+					fill: bgColor,
+					height: count,
+					width: count
+				}), /* @__PURE__ */ jsx("path", {
+					d: path,
+					fill: color
+				})]
+			}),
+			icon && /* @__PURE__ */ jsx("span", {
+				className: styles.icon,
+				style: {
+					height: size * ICON_RATIO,
+					width: size * ICON_RATIO
+				},
+				children: icon
+			}),
+			status === "loading" && /* @__PURE__ */ jsx("span", {
+				"aria-label": t("qrCode.loading"),
+				className: styles.overlay,
+				role: "status",
+				children: /* @__PURE__ */ jsx(Spin, { style: { color: "#666" } })
+			}),
+			status === "expired" && /* @__PURE__ */ jsxs("span", {
+				className: styles.overlay,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: styles.overlayTitle,
+					children: t("qrCode.expired")
+				}), onRefresh && /* @__PURE__ */ jsxs("button", {
+					className: panelStyles.pill,
+					style: {
+						background: "#080808",
+						color: "#fff"
+					},
+					type: "button",
+					onClick: onRefresh,
+					children: [/* @__PURE__ */ jsx(Icon, {
+						icon: RotateCw,
+						size: 14
+					}), t("qrCode.refresh")]
+				})]
+			})
+		]
+	});
+});
+QRCode.displayName = "QRCode";
+//#endregion
+export { QRCode as default };
+
+//# sourceMappingURL=QRCode.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QRCode.mjs","names":["qrCodeMessages"],"sources":["../../../src/base-ui/QRCode/QRCode.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { RotateCw } from 'lucide-react';\r\nimport { memo, useMemo } from 'react';\r\nimport { encode } from 'uqr';\r\n\r\nimport { panelStyles } from '@/base-ui/panelStyles';\r\nimport Spin from '@/base-ui/Spin';\r\nimport qrCodeMessages from '@/i18n/resources/en/qrCode';\r\nimport { useTranslation } from '@/i18n/useTranslation';\r\nimport Icon from '@/Icon';\r\n\r\nimport { buildQrPath } from './qrPath';\r\nimport { styles } from './style';\r\nimport type { QRCodeProps } from './type';\r\n\r\nconst ICON_RATIO = 0.22;\r\n\r\nconst QRCode = memo<QRCodeProps>(\r\n  ({\r\n    bgColor = '#fff',\r\n    bordered = true,\r\n    className,\r\n    color = '#000',\r\n    errorLevel = 'M',\r\n    icon,\r\n    onRefresh,\r\n    ref,\r\n    size = 160,\r\n    status = 'active',\r\n    style,\r\n    value,\r\n    ...rest\r\n  }) => {\r\n    const { t } = useTranslation(qrCodeMessages);\r\n    const { count, path } = useMemo(() => {\r\n      try {\r\n        const { data } = encode(value, { border: 0, ecc: icon ? 'H' : errorLevel });\r\n        const hole = icon ? Math.ceil(data.length * ICON_RATIO) | 1 : 0;\r\n        return { count: data.length, path: buildQrPath(data, hole) };\r\n      } catch {\r\n        return { count: 0, path: '' };\r\n      }\r\n    }, [value, icon, errorLevel]);\r\n\r\n    return (\r\n      <div\r\n        className={cx(styles.root, bordered && styles.bordered, className)}\r\n        ref={ref}\r\n        style={{ background: bgColor, ...style }}\r\n        {...rest}\r\n      >\r\n        <svg\r\n          aria-label={value}\r\n          height={size}\r\n          role=\"img\"\r\n          shapeRendering=\"crispEdges\"\r\n          viewBox={`0 0 ${count} ${count}`}\r\n          width={size}\r\n        >\r\n          <rect fill={bgColor} height={count} width={count} />\r\n          <path d={path} fill={color} />\r\n        </svg>\r\n        {icon && (\r\n          <span\r\n            className={styles.icon}\r\n            style={{ height: size * ICON_RATIO, width: size * ICON_RATIO }}\r\n          >\r\n            {icon}\r\n          </span>\r\n        )}\r\n        {status === 'loading' && (\r\n          <span aria-label={t('qrCode.loading')} className={styles.overlay} role=\"status\">\r\n            <Spin style={{ color: '#666' }} />\r\n          </span>\r\n        )}\r\n        {status === 'expired' && (\r\n          <span className={styles.overlay}>\r\n            <span className={styles.overlayTitle}>{t('qrCode.expired')}</span>\r\n            {onRefresh && (\r\n              <button\r\n                className={panelStyles.pill}\r\n                style={{ background: '#080808', color: '#fff' }}\r\n                type=\"button\"\r\n                onClick={onRefresh}\r\n              >\r\n                <Icon icon={RotateCw} size={14} />\r\n                {t('qrCode.refresh')}\r\n              </button>\r\n            )}\r\n          </span>\r\n        )}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nQRCode.displayName = 'QRCode';\r\n\r\nexport default QRCode;\r\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,aAAa;AAEnB,MAAM,SAAS,MACZ,EACC,UAAU,QACV,WAAW,MACX,WACA,QAAQ,QACR,aAAa,KACb,MACA,WACA,KACA,OAAO,KACP,SAAS,UACT,OACA,OACA,GAAG,WACC;CACJ,MAAM,EAAE,MAAM,eAAeA,cAAc;CAC3C,MAAM,EAAE,OAAO,SAAS,cAAc;EACpC,IAAI;GACF,MAAM,EAAE,SAAS,OAAO,OAAO;IAAE,QAAQ;IAAG,KAAK,OAAO,MAAM;GAAW,CAAC;GAC1E,MAAM,OAAO,OAAO,KAAK,KAAK,KAAK,SAAS,UAAU,IAAI,IAAI;GAC9D,OAAO;IAAE,OAAO,KAAK;IAAQ,MAAM,YAAY,MAAM,IAAI;GAAE;EAC7D,QAAQ;GACN,OAAO;IAAE,OAAO;IAAG,MAAM;GAAG;EAC9B;CACF,GAAG;EAAC;EAAO;EAAM;CAAU,CAAC;CAE5B,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,OAAO,MAAM,YAAY,OAAO,UAAU,SAAS;EAC5D;EACL,OAAO;GAAE,YAAY;GAAS,GAAG;EAAM;EACvC,GAAI;EAJN,UAAA;GAME,qBAAC,OAAD;IACE,cAAY;IACZ,QAAQ;IACR,MAAK;IACL,gBAAe;IACf,SAAS,OAAO,MAAM,GAAG;IACzB,OAAO;IANT,UAAA,CAQE,oBAAC,QAAD;KAAM,MAAM;KAAS,QAAQ;KAAO,OAAO;IAAQ,CAAA,GACnD,oBAAC,QAAD;KAAM,GAAG;KAAM,MAAM;IAAQ,CAAA,CAC1B;;GACJ,QACC,oBAAC,QAAD;IACE,WAAW,OAAO;IAClB,OAAO;KAAE,QAAQ,OAAO;KAAY,OAAO,OAAO;IAAW;IAE5D,UAAA;GACG,CAAA;GAEP,WAAW,aACV,oBAAC,QAAD;IAAM,cAAY,EAAE,gBAAgB;IAAG,WAAW,OAAO;IAAS,MAAK;IACrE,UAAA,oBAAC,MAAD,EAAM,OAAO,EAAE,OAAO,OAAO,EAAI,CAAA;GAC7B,CAAA;GAEP,WAAW,aACV,qBAAC,QAAD;IAAM,WAAW,OAAO;IAAxB,UAAA,CACE,oBAAC,QAAD;KAAM,WAAW,OAAO;KAAe,UAAA,EAAE,gBAAgB;IAAQ,CAAA,GAChE,aACC,qBAAC,UAAD;KACE,WAAW,YAAY;KACvB,OAAO;MAAE,YAAY;MAAW,OAAO;KAAO;KAC9C,MAAK;KACL,SAAS;KAJX,UAAA,CAME,oBAAC,MAAD;MAAM,MAAM;MAAU,MAAM;KAAK,CAAA,GAChC,EAAE,gBAAgB,CACb;IAEN,CAAA,CAAA;;EAEL;;AAET,CACF;AAEA,OAAO,cAAc"}

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

@@ -0,0 +1,3 @@
+import { QRCodeErrorLevel, QRCodeProps, QRCodeStatus } from "./type.mjs";
+import QRCode from "./QRCode.mjs";
+export { type QRCodeErrorLevel, type QRCodeProps, type QRCodeStatus, QRCode as default };

package/es/base-ui/QRCode/qrPath.mjs

@@ -0,0 +1,16 @@
+//#region src/base-ui/QRCode/qrPath.ts
+const buildQrPath = (matrix, hole) => {
+	const count = matrix.length;
+	const from = Math.floor((count - hole) / 2);
+	const to = from + hole;
+	let path = "";
+	for (let y = 0; y < count; y++) for (let x = 0; x < count; x++) {
+		if (hole > 0 && x >= from && x < to && y >= from && y < to) continue;
+		if (matrix[y][x]) path += `M${x} ${y}h1v1h-1z`;
+	}
+	return path;
+};
+//#endregion
+export { buildQrPath };
+
+//# sourceMappingURL=qrPath.mjs.map

package/es/base-ui/QRCode/qrPath.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"qrPath.mjs","names":[],"sources":["../../../src/base-ui/QRCode/qrPath.ts"],"sourcesContent":["export const buildQrPath = (matrix: boolean[][], hole: number): string => {\r\n  const count = matrix.length;\r\n  const from = Math.floor((count - hole) / 2);\r\n  const to = from + hole;\r\n  let path = '';\r\n  for (let y = 0; y < count; y++) {\r\n    for (let x = 0; x < count; x++) {\r\n      if (hole > 0 && x >= from && x < to && y >= from && y < to) continue;\r\n      if (matrix[y][x]) path += `M${x} ${y}h1v1h-1z`;\r\n    }\r\n  }\r\n  return path;\r\n};\r\n"],"mappings":";AAAA,MAAa,eAAe,QAAqB,SAAyB;CACxE,MAAM,QAAQ,OAAO;CACrB,MAAM,OAAO,KAAK,OAAO,QAAQ,QAAQ,CAAC;CAC1C,MAAM,KAAK,OAAO;CAClB,IAAI,OAAO;CACX,KAAK,IAAI,IAAI,GAAG,IAAI,OAAO,KACzB,KAAK,IAAI,IAAI,GAAG,IAAI,OAAO,KAAK;EAC9B,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,MAAM,KAAK,QAAQ,IAAI,IAAI;EAC5D,IAAI,OAAO,EAAE,CAAC,IAAI,QAAQ,IAAI,EAAE,GAAG,EAAE;CACvC;CAEF,OAAO;AACT"}

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

@@ -0,0 +1,52 @@
+import { createStaticStyles } from "antd-style";
+//#region src/base-ui/QRCode/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	bordered: css`
+    box-shadow: inset 0 0 0 1px ${cssVar.colorBorderSecondary};
+  `,
+	icon: css`
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    transform: translate(-50%, -50%);
+
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    border-radius: 50%;
+
+    box-shadow: 0 0 0 4px #fff;
+  `,
+	overlay: css`
+    position: absolute;
+    inset: 0;
+
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    align-items: center;
+    justify-content: center;
+
+    border-radius: 16px;
+
+    color: #080808;
+
+    background: rgb(255 255 255 / 95%);
+  `,
+	overlayTitle: css`
+    font-size: 17px;
+    font-weight: 600;
+  `,
+	root: css`
+    position: relative;
+    display: inline-flex;
+    padding: 16px;
+    border-radius: 16px;
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/QRCode/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\r\n  bordered: css`\r\n    box-shadow: inset 0 0 0 1px ${cssVar.colorBorderSecondary};\r\n  `,\r\n  icon: css`\r\n    position: absolute;\r\n    inset-block-start: 50%;\r\n    inset-inline-start: 50%;\r\n    transform: translate(-50%, -50%);\r\n\r\n    overflow: hidden;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    border-radius: 50%;\r\n\r\n    box-shadow: 0 0 0 4px #fff;\r\n  `,\r\n  overlay: css`\r\n    position: absolute;\r\n    inset: 0;\r\n\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 12px;\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    border-radius: 16px;\r\n\r\n    color: #080808;\r\n\r\n    background: rgb(255 255 255 / 95%);\r\n  `,\r\n  overlayTitle: css`\r\n    font-size: 17px;\r\n    font-weight: 600;\r\n  `,\r\n  root: css`\r\n    position: relative;\r\n    display: inline-flex;\r\n    padding: 16px;\r\n    border-radius: 16px;\r\n  `,\r\n}));\r\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,UAAU,GAAG;kCACmB,OAAO,qBAAqB;;CAE5D,MAAM,GAAG;;;;;;;;;;;;;;;CAeT,SAAS,GAAG;;;;;;;;;;;;;;;;CAgBZ,cAAc,GAAG;;;;CAIjB,MAAM,GAAG;;;;;;AAMX,EAAE"}

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

@@ -0,0 +1,19 @@
+import { ComponentProps, ReactNode, Ref } from "react";
+//#region src/base-ui/QRCode/type.d.ts
+type QRCodeErrorLevel = 'L' | 'M' | 'Q' | 'H';
+type QRCodeStatus = 'active' | 'loading' | 'expired';
+interface QRCodeProps extends Omit<ComponentProps<'div'>, 'children'> {
+  bgColor?: string;
+  bordered?: boolean;
+  color?: string;
+  errorLevel?: QRCodeErrorLevel;
+  icon?: ReactNode;
+  onRefresh?: () => void;
+  ref?: Ref<HTMLDivElement>;
+  size?: number;
+  status?: QRCodeStatus;
+  value: string;
+}
+//#endregion
+export { QRCodeErrorLevel, QRCodeProps, QRCodeStatus };
+//# sourceMappingURL=type.d.mts.map