@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.1.0

package/dist/feedback/Progress.d.ts

@@ -0,0 +1,215 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type VNodeChild } from 'vue';
+import { type TextProps } from '../base/Text';
+import { type PartProps } from '../utils/props';
+import { type NumericValue } from '../utils/data/numeric';
+import type { StatusTone } from '../utils/style/tone-styles';
+import { type TextSize } from '../utils/style/typography';
+import { type Radius } from '../utils/style/styles';
+/** 角色与取值由组件管理 */
+export type ProgressManaged = 'role' | 'aria-valuemin' | 'aria-valuemax' | 'aria-valuenow' | 'aria-valuetext';
+/** 进度的形状 */
+export interface ProgressShapes {
+    /** 条形（默认）：占满一行 */
+    bar: unknown;
+    /** 环形：中间显示数值，适合仪表盘、卡片里的完成率；直径随字号缩放 */
+    circle: unknown;
+}
+/** Progress 的外观选项：可以在 ComponentDefaults 里统一设置 */
+export interface ProgressOptions {
+    /** 色调（与 Badge、Alert 等同一套），默认 accent */
+    tone?: StatusTone;
+    /** 字号档位：进度条的粗细随之缩放；不写时继承上下文字号 */
+    size?: TextSize;
+    /** 圆角，默认 full */
+    radius?: Radius;
+}
+/** 未声明的属性落到轨道（role="progressbar" 的主元素）上 */
+export interface ProgressProps extends PartProps<'div', ProgressManaged>, ProgressOptions {
+    /** 当前值：number、bigint 或 Decimal；不写（或 null）时为不确定进度 */
+    value?: NumericValue | null;
+    /** 最大值，默认 100 */
+    max?: NumericValue;
+    /** 形状，默认 bar */
+    shape?: keyof ProgressShapes;
+    /** 目标值（与 value 同一单位）：条上画竖线、环上画刻度，读屏念在进度后面 */
+    target?: NumericValue;
+    /** 读屏念的取值文字，如 `(value, max) => \`已上传 ${value} / ${max} 个文件\``；默认是百分比 */
+    valueText?: (value: NumericValue, max: NumericValue) => string;
+    /** 进度条上方的标签：同时是进度条的名称（aria-labelledby），不用再写 aria-label */
+    label?: VNodeChild;
+    /** 在标签行右侧显示数值；有 label 或 valueLabel 时默认显示，不确定进度时不显示 */
+    showValueLabel?: boolean;
+    /** 数值文字，替换默认的百分比：`'38.6 / 50 GB'`（只是显示，读屏念的是 valueText） */
+    valueLabel?: VNodeChild;
+    /** 条形的进度（着色部分）的部件属性 */
+    propsIndicator?: PartProps<'div'>;
+    /** 外层（标签行与进度条）的部件属性；只在有标签行时渲染 */
+    propsRoot?: PartProps<'div'>;
+    /** 标签行（标签与数值文字）的部件属性 */
+    propsHeader?: PartProps<'div'>;
+    /** 标签的部件属性 */
+    propsLabel?: Partial<TextProps>;
+    /** 数值文字的部件属性 */
+    propsValueLabel?: Partial<TextProps>;
+}
+/**
+ * 进度的配方。条形的部件：root（有标签行时的外层）、header（标签行）、label、valueLabel、
+ * track（轨道，即 progressbar）、indicator（进度）、target（目标线）；环形的部件：root（有标签时的外层）、
+ * circle（progressbar）、circleSvg、circleTrack、circleIndicator、circleTarget、valueLabel（中间的数值）、label。
+ * 档位：shape、tone、indeterminate（不确定进度）。字号、圆角用共用的表另外叠加；
+ * 条形的进度宽度与目标线的位置是任意值，用下面的动态样式
+ */
+export declare const progressRecipe: css.Recipe<"circle" | "circleIndicator" | "circleSvg" | "circleTarget" | "circleTrack" | "header" | "indicator" | "label" | "root" | "target" | "track" | "valueLabel", {
+    readonly shape: {
+        readonly bar: {
+            readonly root: {
+                readonly display: "grid";
+                readonly gap: "_xs";
+                readonly minWidth: 0;
+            };
+            readonly valueLabel: {
+                readonly flexShrink: 0;
+                readonly fontVariantNumeric: "tabular-nums";
+            };
+        };
+        readonly circle: {
+            readonly root: {
+                readonly display: "inline-grid";
+                readonly justifyItems: "center";
+                readonly gap: "_xs";
+                readonly textAlign: "center";
+            };
+            readonly valueLabel: {
+                readonly fontVariantNumeric: "tabular-nums";
+                readonly fontWeight: "_semibold";
+                readonly lineHeight: 1;
+            };
+        };
+    };
+    readonly tone: {
+        readonly neutral: {
+            readonly indicator: {
+                readonly backgroundColor: {
+                    readonly default: "_textMuted";
+                    readonly _forcedColors: "Highlight";
+                };
+            };
+            readonly circleIndicator: {
+                readonly stroke: {
+                    readonly default: "_textMuted";
+                    readonly _forcedColors: "Highlight";
+                };
+            };
+        };
+        readonly accent: {
+            readonly indicator: {
+                readonly backgroundColor: {
+                    readonly default: "_accent";
+                    readonly _forcedColors: "Highlight";
+                };
+            };
+            readonly circleIndicator: {
+                readonly stroke: {
+                    readonly default: "_accent";
+                    readonly _forcedColors: "Highlight";
+                };
+            };
+        };
+        readonly info: {
+            readonly indicator: {
+                readonly backgroundColor: {
+                    readonly default: "_infoText";
+                    readonly _forcedColors: "Highlight";
+                };
+            };
+            readonly circleIndicator: {
+                readonly stroke: {
+                    readonly default: "_infoText";
+                    readonly _forcedColors: "Highlight";
+                };
+            };
+        };
+        readonly success: {
+            readonly indicator: {
+                readonly backgroundColor: {
+                    readonly default: "_successText";
+                    readonly _forcedColors: "Highlight";
+                };
+            };
+            readonly circleIndicator: {
+                readonly stroke: {
+                    readonly default: "_successText";
+                    readonly _forcedColors: "Highlight";
+                };
+            };
+        };
+        readonly warning: {
+            readonly indicator: {
+                readonly backgroundColor: {
+                    readonly default: "_warningText";
+                    readonly _forcedColors: "Highlight";
+                };
+            };
+            readonly circleIndicator: {
+                readonly stroke: {
+                    readonly default: "_warningText";
+                    readonly _forcedColors: "Highlight";
+                };
+            };
+        };
+        readonly danger: {
+            readonly indicator: {
+                readonly backgroundColor: {
+                    readonly default: "_dangerText";
+                    readonly _forcedColors: "Highlight";
+                };
+            };
+            readonly circleIndicator: {
+                readonly stroke: {
+                    readonly default: "_dangerText";
+                    readonly _forcedColors: "Highlight";
+                };
+            };
+        };
+    };
+    readonly indeterminate: {
+        readonly true: {
+            readonly indicator: {
+                readonly width: "40%";
+                readonly animationName: {
+                    default: string;
+                    ':dir(rtl)': string;
+                };
+                readonly animationDuration: {
+                    readonly default: "1.4s";
+                    readonly _reducedMotion: "3s";
+                };
+                readonly animationTimingFunction: "_easings.standard";
+                readonly animationIterationCount: "infinite";
+            };
+            readonly circleIndicator: {
+                readonly transformOrigin: "center";
+                readonly animationName: string;
+                readonly animationDuration: {
+                    readonly default: "1s";
+                    readonly _reducedMotion: "3s";
+                };
+                readonly animationTimingFunction: "linear";
+                readonly animationIterationCount: "infinite";
+            };
+        };
+    };
+}>;
+/** 进度的部件（createUi / Provider 的 styles.Progress 按它定制） */
+export type ProgressPart = (typeof progressRecipe.parts)[number];
+/** 条形进度目标线的位置 */
+export declare const progressTargetPositionStyles: Readonly<{
+    readonly at: (percent: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** Progress 的样式：percent */
+export declare const progressWidthStyles: Readonly<{
+    readonly percent: (percent: string) => Readonly<[css.CompiledStyles, css.InlineStyles]>;
+}>;
+/** 进度：有 value 时为完成比例，没有时为不确定进度；条形有 label 时上方是标签与数值，环形中间是数值 */
+export declare const Progress: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ProgressProps>;

package/dist/feedback/Progress.js

@@ -0,0 +1,437 @@
+import { clamp } from "../utils/data/number.js";
+import { compareNumeric, toNumber } from "../utils/data/numeric.js";
+import { t } from "../config/theme/tokens.js";
+import { useLang } from "../config/context.js";
+import { useDefaults } from "../config/defaults.js";
+import { hasContent, mergeAttrs, mergePartProps } from "../utils/props.js";
+import { fontSizeStyles, relativeFontSizeStyles } from "../utils/style/typography.js";
+import { radiusStyles } from "../utils/style/styles.js";
+import { useRecipe } from "../config/styles.js";
+import { Text as Text$1 } from "../base/Text.js";
+import { useFormat } from "../config/lang/format.js";
+import { createVNode, isVNode, mergeProps, unref, useId } from "vue";
+import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/feedback/Progress.tsx
+/** 角色与取值由组件管理 */
+/** 进度的形状 */
+/** Progress 的外观选项：可以在 ComponentDefaults 里统一设置 */
+/** 未声明的属性落到轨道（role="progressbar" 的主元素）上 */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var slide = css.keyframes({
+	from: { transform: "translateX(-100%)" },
+	to: { transform: "translateX(250%)" }
+});
+var slideRtl = css.keyframes({
+	from: { transform: "translateX(100%)" },
+	to: { transform: "translateX(-250%)" }
+});
+var spin = css.keyframes({ to: { rotate: "1turn" } });
+/**
+* 进度的配方。条形的部件：root（有标签行时的外层）、header（标签行）、label、valueLabel、
+* track（轨道，即 progressbar）、indicator（进度）、target（目标线）；环形的部件：root（有标签时的外层）、
+* circle（progressbar）、circleSvg、circleTrack、circleIndicator、circleTarget、valueLabel（中间的数值）、label。
+* 档位：shape、tone、indeterminate（不确定进度）。字号、圆角用共用的表另外叠加；
+* 条形的进度宽度与目标线的位置是任意值，用下面的动态样式
+*/
+var progressRecipe = css.recipe({
+	name: "Progress",
+	parts: [
+		"root",
+		"header",
+		"label",
+		"valueLabel",
+		"track",
+		"indicator",
+		"target",
+		"circle",
+		"circleSvg",
+		"circleTrack",
+		"circleIndicator",
+		"circleTarget"
+	],
+	base: {
+		header: {
+			display: "flex",
+			alignItems: "baseline",
+			justifyContent: "space-between",
+			gap: "_sm"
+		},
+		track: {
+			position: "relative",
+			overflow: "hidden",
+			width: "_full",
+			height: `calc(${t.space.xs} * 1.5)`,
+			backgroundColor: "_fill",
+			outlineStyle: {
+				default: null,
+				_forcedColors: "solid"
+			},
+			outlineWidth: {
+				default: null,
+				_forcedColors: "_borderWidths.xs"
+			},
+			outlineColor: {
+				default: null,
+				_forcedColors: "CanvasText"
+			}
+		},
+		indicator: {
+			height: "_full",
+			borderRadius: "inherit",
+			forcedColorAdjust: {
+				default: null,
+				_forcedColors: "none"
+			},
+			transition: `width ${t.durations.md} ${t.easings.standard}`
+		},
+		target: {
+			position: "absolute",
+			insetBlock: 0,
+			width: "_borderWidths.sm",
+			marginInlineStart: `calc(-0.5 * ${t.borderWidths.sm})`,
+			backgroundColor: {
+				default: "_text",
+				_forcedColors: "CanvasText"
+			}
+		},
+		circle: {
+			position: "relative",
+			display: "inline-grid",
+			placeItems: "center",
+			width: "5em",
+			height: "5em",
+			flexShrink: 0
+		},
+		circleSvg: {
+			position: "absolute",
+			inset: 0,
+			width: "100%",
+			height: "100%",
+			rotate: "-90deg"
+		},
+		circleTrack: {
+			fill: "none",
+			stroke: {
+				default: "_fill",
+				_forcedColors: "CanvasText"
+			}
+		},
+		circleIndicator: {
+			fill: "none",
+			forcedColorAdjust: {
+				default: null,
+				_forcedColors: "none"
+			},
+			transition: `stroke-dashoffset ${t.durations.md} ${t.easings.standard}`
+		},
+		circleTarget: {
+			stroke: "_text",
+			strokeLinecap: "round"
+		}
+	},
+	variants: {
+		shape: {
+			bar: {
+				root: {
+					display: "grid",
+					gap: "_xs",
+					minWidth: 0
+				},
+				valueLabel: {
+					flexShrink: 0,
+					fontVariantNumeric: "tabular-nums"
+				}
+			},
+			circle: {
+				root: {
+					display: "inline-grid",
+					justifyItems: "center",
+					gap: "_xs",
+					textAlign: "center"
+				},
+				valueLabel: {
+					fontVariantNumeric: "tabular-nums",
+					fontWeight: "_semibold",
+					lineHeight: 1
+				}
+			}
+		},
+		tone: {
+			neutral: {
+				indicator: { backgroundColor: {
+					default: "_textMuted",
+					_forcedColors: "Highlight"
+				} },
+				circleIndicator: { stroke: {
+					default: "_textMuted",
+					_forcedColors: "Highlight"
+				} }
+			},
+			accent: {
+				indicator: { backgroundColor: {
+					default: "_accent",
+					_forcedColors: "Highlight"
+				} },
+				circleIndicator: { stroke: {
+					default: "_accent",
+					_forcedColors: "Highlight"
+				} }
+			},
+			info: {
+				indicator: { backgroundColor: {
+					default: "_infoText",
+					_forcedColors: "Highlight"
+				} },
+				circleIndicator: { stroke: {
+					default: "_infoText",
+					_forcedColors: "Highlight"
+				} }
+			},
+			success: {
+				indicator: { backgroundColor: {
+					default: "_successText",
+					_forcedColors: "Highlight"
+				} },
+				circleIndicator: { stroke: {
+					default: "_successText",
+					_forcedColors: "Highlight"
+				} }
+			},
+			warning: {
+				indicator: { backgroundColor: {
+					default: "_warningText",
+					_forcedColors: "Highlight"
+				} },
+				circleIndicator: { stroke: {
+					default: "_warningText",
+					_forcedColors: "Highlight"
+				} }
+			},
+			danger: {
+				indicator: { backgroundColor: {
+					default: "_dangerText",
+					_forcedColors: "Highlight"
+				} },
+				circleIndicator: { stroke: {
+					default: "_dangerText",
+					_forcedColors: "Highlight"
+				} }
+			}
+		},
+		indeterminate: { true: {
+			indicator: {
+				width: "40%",
+				animationName: {
+					default: slide,
+					":dir(rtl)": slideRtl
+				},
+				animationDuration: {
+					default: "1.4s",
+					_reducedMotion: "3s"
+				},
+				animationTimingFunction: "_easings.standard",
+				animationIterationCount: "infinite"
+			},
+			circleIndicator: {
+				transformOrigin: "center",
+				animationName: spin,
+				animationDuration: {
+					default: "1s",
+					_reducedMotion: "3s"
+				},
+				animationTimingFunction: "linear",
+				animationIterationCount: "infinite"
+			}
+		} }
+	}
+});
+/** 进度的部件（createUi / Provider 的 styles.Progress 按它定制） */
+/** 条形进度目标线的位置 */
+var progressTargetPositionStyles = css.create({ at: (percent) => ({ insetInlineStart: percent }) });
+/** Progress 的样式：percent */
+var progressWidthStyles = css.create({ percent: (percent) => ({ width: percent }) });
+/** 环形的几何：viewBox 100 × 100，线宽 10 */
+var RING = {
+	stroke: 10,
+	radius: 45,
+	circumference: 2 * Math.PI * 45
+};
+/** 值在 0–max 的比例（0–100）；超出范围的夹到两端 */
+function percentOf(value, max) {
+	const total = toNumber(max);
+	if (total <= 0) return 0;
+	const clamped = compareNumeric(value, 0) < 0 ? 0 : compareNumeric(value, max) > 0 ? max : value;
+	return clamp(toNumber(clamped) / total * 100, 0, 100);
+}
+/** 进度：有 value 时为完成比例，没有时为不确定进度；条形有 label 时上方是标签与数值，环形中间是数值 */
+var Progress = /*#__PURE__*/ _component((_props, _ctx) => {
+	const value = readonlyProp(_props, "value");
+	const max = readonlyProp(_props, "max", 100);
+	const shape = readonlyProp(_props, "shape", "bar");
+	const target = readonlyProp(_props, "target");
+	const tone = readonlyProp(_props, "tone");
+	const size = readonlyProp(_props, "size");
+	const radius = readonlyProp(_props, "radius");
+	const valueText = readonlyProp(_props, "valueText");
+	const label = readonlyProp(_props, "label");
+	const showValueLabel = readonlyProp(_props, "showValueLabel");
+	const valueLabel = readonlyProp(_props, "valueLabel");
+	const propsIndicator = readonlyProp(_props, "propsIndicator");
+	const propsRoot = readonlyProp(_props, "propsRoot");
+	const propsHeader = readonlyProp(_props, "propsHeader");
+	const propsLabel = readonlyProp(_props, "propsLabel");
+	const propsValueLabel = readonlyProp(_props, "propsValueLabel");
+	const rest = restProps(_props, _ctx, true);
+	const labelId = `${useId()}-label`;
+	const format = useFormat();
+	const lang = useLang();
+	const appearance = useDefaults("Progress", () => ({
+		tone: tone.value,
+		size: size.value,
+		radius: radius.value
+	}), {
+		tone: "accent",
+		radius: "full"
+	});
+	const recipe = useRecipe(progressRecipe);
+	const percentText = (percent) => format.number(percent / 100, {
+		style: "percent",
+		maximumFractionDigits: 0
+	});
+	return () => {
+		const look = appearance();
+		const determinate = value.value != null;
+		const s = recipe({
+			shape: shape.value,
+			tone: look.tone,
+			indeterminate: !determinate
+		});
+		const clamped = !determinate ? 0 : compareNumeric(value.value, 0) < 0 ? 0 : compareNumeric(value.value, max.value) > 0 ? max.value : value.value;
+		const percent = percentOf(clamped, max.value);
+		const targetPercent = target.value == null ? void 0 : percentOf(target.value, max.value);
+		const shownValue = valueLabel.value ?? percentText(percent);
+		const spoken = determinate ? valueText.value?.(clamped, max.value) ?? percentText(percent) : void 0;
+		const circle = shape.value === "circle";
+		const header = !circle && (label.value != null || determinate && (showValueLabel.value ?? valueLabel.value != null));
+		const wrapped = header || circle && hasContent(label.value);
+		const progressbar = {
+			role: "progressbar",
+			"aria-valuemin": 0,
+			"aria-valuemax": toNumber(max.value),
+			"aria-valuenow": determinate ? toNumber(clamped) : void 0,
+			"aria-valuetext": spoken && targetPercent !== void 0 ? `${spoken}，${lang.progressTarget(percentText(targetPercent))}` : spoken
+		};
+		const state = !determinate ? "indeterminate" : compareNumeric(clamped, max.value) >= 0 ? "complete" : "loading";
+		const ring = () => {
+			const { stroke, radius: r, circumference } = RING;
+			const angle = (targetPercent ?? 0) / 100 * 2 * Math.PI;
+			const tick = (distance) => ({
+				x: 50 + distance * Math.cos(angle),
+				y: 50 + distance * Math.sin(angle)
+			});
+			const outer = tick(r + stroke / 2 + 2);
+			const inner = tick(r - stroke / 2 - 2);
+			return createVNode("div", mergeProps(mergeAttrs({
+				...s.circle,
+				sx: [s.circle.sx, !wrapped && look.size && fontSizeStyles[look.size]],
+				"aria-labelledby": hasContent(label.value) ? labelId : void 0
+			}, rest, progressbar), { "data-state": state }), [createVNode("svg", mergeProps({
+				"viewBox": "0 0 100 100",
+				"aria-hidden": "true"
+			}, mergeAttrs(s.circleSvg)), [
+				createVNode("circle", mergeProps({
+					"cx": "50",
+					"cy": "50",
+					"r": r,
+					"stroke-width": stroke
+				}, mergeAttrs(s.circleTrack)), null),
+				createVNode("circle", mergeProps({
+					"cx": "50",
+					"cy": "50",
+					"r": r,
+					"stroke-width": stroke,
+					"stroke-linecap": look.radius === "none" ? "butt" : "round",
+					"stroke-dasharray": circumference,
+					"stroke-dashoffset": determinate ? circumference * (1 - percent / 100) : circumference * .75
+				}, mergeAttrs(s.circleIndicator)), null),
+				targetPercent !== void 0 && createVNode("line", mergeProps({
+					"x1": outer.x,
+					"y1": outer.y,
+					"x2": inner.x,
+					"y2": inner.y,
+					"stroke-width": 2.5
+				}, mergeAttrs(s.circleTarget)), null)
+			]), determinate && (showValueLabel.value ?? true) && createVNode(Text$1, mergePartProps({
+				...s.valueLabel,
+				sx: [s.valueLabel.sx, relativeFontSizeStyles.sm]
+			}, propsValueLabel.value, { "aria-hidden": true }), _isSlot(shownValue) ? shownValue : { default: () => [shownValue] })]);
+		};
+		const bar = () => createVNode("div", mergeProps(mergeAttrs({
+			...s.track,
+			sx: [
+				s.track.sx,
+				radiusStyles[look.radius],
+				!header && look.size && fontSizeStyles[look.size]
+			],
+			"aria-labelledby": hasContent(label.value) ? labelId : void 0
+		}, rest, progressbar), { "data-state": state }), [createVNode("div", mergeAttrs(s.indicator, propsIndicator.value, { sx: determinate ? css.bind(progressWidthStyles.percent, () => [`${percent}%`]) : void 0 }), null), targetPercent !== void 0 && createVNode("div", mergeProps({ "aria-hidden": "true" }, mergeAttrs({
+			...s.target,
+			sx: [s.target.sx, css.bind(progressTargetPositionStyles.at, () => [`${targetPercent}%`])]
+		})), null)]);
+		if (circle) {
+			if (!wrapped) return ring();
+			return createVNode("div", mergeAttrs({
+				...s.root,
+				sx: [s.root.sx, look.size && fontSizeStyles[look.size]]
+			}, propsRoot.value), [ring(), createVNode(Text$1, mergeProps(mergePartProps({
+				...s.label,
+				tone: "muted",
+				sx: [s.label.sx, relativeFontSizeStyles.sm]
+			}, propsLabel.value, { id: labelId }), { "key": "__site0" }), {
+				default: () => [unref(label)],
+				$stable: true
+			})]);
+		}
+		if (!header) return bar();
+		return createVNode("div", mergeAttrs({
+			...s.root,
+			sx: [s.root.sx, look.size && fontSizeStyles[look.size]]
+		}, propsRoot.value), [createVNode("div", mergeAttrs({
+			...s.header,
+			sx: [s.header.sx, relativeFontSizeStyles.sm]
+		}, propsHeader.value), [hasContent(label.value) && createVNode(Text$1, mergeProps(mergePartProps(s.label, propsLabel.value, { id: labelId }), { "key": "__site1" }), {
+			default: () => [unref(label)],
+			$stable: true
+		}), determinate && (showValueLabel.value ?? true) && createVNode(Text$1, mergePartProps({
+			...s.valueLabel,
+			tone: "muted"
+		}, propsValueLabel.value, { "aria-hidden": true }), _isSlot(shownValue) ? shownValue : { default: () => [shownValue] })]), bar()]);
+	};
+}, {
+	name: "Progress",
+	props: [
+		"value",
+		"max",
+		"shape",
+		"target",
+		"tone",
+		"size",
+		"radius",
+		"valueText",
+		"label",
+		"showValueLabel",
+		"valueLabel",
+		"propsIndicator",
+		"propsRoot",
+		"propsHeader",
+		"propsLabel",
+		"propsValueLabel"
+	]
+});
+//#endregion
+export { Progress, progressRecipe, progressTargetPositionStyles, progressWidthStyles };
+
+//# sourceMappingURL=Progress.js.map