antdv-next 0.0.0 → 1.0.0-alpha.1

package/dist/input-number/index.js

@@ -0,0 +1,403 @@
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import { getAttrStyleAndClass, useMergeSemantic, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import { devUseWarning, isDev } from "../_util/warning.js";
+import "../_util/hooks/index.js";
+import { getSlotPropsFnRun, toPropsRefs } from "../_util/tools.js";
+import useCSSVarCls_default from "../config-provider/hooks/useCSSVarCls.js";
+import { useSize } from "../config-provider/hooks/useSize.js";
+import { useCompactItemContext } from "../space/Compact.js";
+import { ContextIsolator } from "../_util/ContextIsolator.js";
+import { useDisabledContext } from "../config-provider/DisabledContext.js";
+import { useFormItemInputContext } from "../form/context.js";
+import { getMergedStatus, getStatusClassNames } from "../_util/statusUtils.js";
+import useVariant from "../form/hooks/useVariant.js";
+import { SpaceAddon, SpaceCompact } from "../space/index.js";
+import style_default from "./style/index.js";
+import { Fragment, computed, createVNode, defineComponent, isVNode, mergeProps, shallowRef } from "vue";
+import { clsx } from "@v-c/util";
+import { DownOutlined, MinusOutlined, PlusOutlined, UpOutlined } from "@antdv-next/icons";
+import { omit } from "es-toolkit";
+import VcInputNumber from "@v-c/input-number";
+
+//#region src/input-number/index.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const omitKeys = [
+	"classes",
+	"styles",
+	"rootClass",
+	"size",
+	"status",
+	"disabled",
+	"addonBefore",
+	"addonAfter",
+	"bordered",
+	"variant",
+	"prefixCls",
+	"prefix",
+	"suffix",
+	"controls",
+	"onInput",
+	"onPressEnter",
+	"onStep",
+	"onBeforeInput",
+	"keyboard",
+	"onClick",
+	"onMouseDown",
+	"onMouseUp",
+	"onMouseLeave",
+	"onMouseMove",
+	"onMouseEnter",
+	"onMouseOut",
+	"value",
+	"defaultValue",
+	"onChange"
+];
+const InputNumber = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit, expose }) => {
+	if (isDev) {
+		const warning = devUseWarning("InputNumber");
+		[
+			["bordered", "variant"],
+			["addonAfter", "Space.Compact"],
+			["addonBefore", "Space.Compact"]
+		].forEach(([prop, replacement]) => {
+			warning.deprecated(!props[prop], prop, replacement);
+		});
+		warning(!(props.type === "number" && props.changeOnWheel), "usage", "When `type=\"number\"` is used with `changeOnWheel`, the wheel interaction may not work as expected. Remove `type=\"number\"` if not required.");
+	}
+	const { prefixCls, direction, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles } = useComponentBaseConfig("inputNumber", props, [], "input-number");
+	const { classes, styles, rootClass, size: customSize, disabled: customDisabled, status: customStatus, bordered, variant: customVariant } = toPropsRefs(props, "classes", "styles", "rootClass", "size", "disabled", "status", "bordered", "variant");
+	const inputNumberRef = shallowRef();
+	expose({
+		focus: (...args) => inputNumberRef.value?.focus?.(...args),
+		blur: () => inputNumberRef.value?.blur?.(),
+		input: computed(() => inputNumberRef.value?.input ?? null),
+		nativeElement: computed(() => inputNumberRef.value?.nativeElement ?? null)
+	});
+	const rootCls = useCSSVarCls_default(prefixCls);
+	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
+	const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
+	const mergedSize = useSize((ctx) => customSize.value ?? compactSize.value ?? ctx);
+	const disabledContext = useDisabledContext();
+	const mergedDisabled = computed(() => customDisabled.value ?? disabledContext.value);
+	const mergedControls = computed(() => {
+		const raw = props.controls ?? true;
+		if (!raw || mergedDisabled.value || props.readOnly) return false;
+		return raw;
+	});
+	const controlsProp = computed(() => typeof mergedControls.value === "boolean" ? mergedControls.value : void 0);
+	const formItemInputContext = useFormItemInputContext();
+	const mergedStatus = computed(() => {
+		return getMergedStatus(formItemInputContext.value.status, customStatus.value);
+	});
+	const hasFeedback = computed(() => formItemInputContext.value.hasFeedback);
+	const feedbackIcon = computed(() => formItemInputContext.value.feedbackIcon);
+	const [mergedVariant, enableVariantCls] = useVariant("inputNumber", customVariant, bordered);
+	const mergedProps = computed(() => {
+		return {
+			...props,
+			size: mergedSize.value,
+			disabled: mergedDisabled.value,
+			controls: mergedControls.value
+		};
+	});
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, styles), useToProps(mergedProps));
+	const { className, style, restAttrs } = getAttrStyleAndClass(attrs);
+	const restProps = omit(props, omitKeys);
+	const hasLegacyAddon = computed(() => !!(props.addonBefore || props.addonAfter));
+	const upIcon = computed(() => {
+		let icon = props.mode === "spinner" ? createVNode(PlusOutlined, null, null) : createVNode(UpOutlined, null, null);
+		if (typeof mergedControls.value === "object" && mergedControls.value?.upIcon) icon = mergedControls.value.upIcon;
+		return icon;
+	});
+	const downIcon = computed(() => {
+		let icon = props.mode === "spinner" ? createVNode(MinusOutlined, null, null) : createVNode(DownOutlined, null, null);
+		if (typeof mergedControls.value === "object" && mergedControls.value?.downIcon) icon = mergedControls.value.downIcon;
+		return icon;
+	});
+	const appliedRootClass = computed(() => hasLegacyAddon.value ? void 0 : rootClass.value);
+	const classesValue = computed(() => {
+		return clsx(contextClassName.value, className, appliedRootClass.value, cssVarCls.value, rootCls.value, hashId.value, compactItemClassnames.value, mergedClassNames.value.root, getStatusClassNames(prefixCls.value, mergedStatus.value, hasFeedback.value), {
+			[`${prefixCls.value}-${mergedVariant.value}`]: enableVariantCls.value,
+			[`${prefixCls.value}-lg`]: mergedSize.value === "large",
+			[`${prefixCls.value}-sm`]: mergedSize.value === "small",
+			[`${prefixCls.value}-rtl`]: direction.value === "rtl",
+			[`${prefixCls.value}-without-controls`]: !mergedControls.value,
+			[`${prefixCls.value}-in-form-item`]: formItemInputContext.value.isFormItemInput
+		});
+	});
+	const mergedStyle = computed(() => ({
+		...mergedStyles.value.root,
+		...contextStyle.value,
+		...style
+	}));
+	const renderAddon = (node) => {
+		if (!node) return null;
+		return createVNode(SpaceAddon, {
+			"class": clsx(`${prefixCls.value}-addon`, cssVarCls.value, hashId.value),
+			"variant": mergedVariant.value,
+			"disabled": mergedDisabled.value,
+			"status": mergedStatus.value
+		}, { default: () => [createVNode(ContextIsolator, {
+			"form": true,
+			"space": true
+		}, _isSlot(node) ? node : { default: () => [node] })] });
+	};
+	const handleChange = (value) => {
+		emit("change", value);
+	};
+	const handleUpdateValue = (value) => {
+		emit("update:value", value);
+	};
+	const handleInput = (text) => {
+		emit("input", text);
+	};
+	const handlePressEnter = (e) => emit("pressEnter", e);
+	const handleStep = (value, info) => emit("step", value, info);
+	const handleMouseEvent = (eventName) => (e) => emit(eventName, e);
+	const handleKeyboardEvent = (eventName) => (e) => emit(eventName, e);
+	const handleFocusEvent = (eventName) => (e) => emit(eventName, e);
+	const handleCompositionEvent = (eventName) => (e) => emit(eventName, e);
+	const handleBeforeInput = (e) => emit("beforeinput", e);
+	return () => {
+		const prefixNode = getSlotPropsFnRun(slots, props, "prefix");
+		const suffixSlot = getSlotPropsFnRun(slots, props, "suffix");
+		const mergedSuffixFn = () => {
+			if (hasFeedback.value) return createVNode(Fragment, null, [suffixSlot, feedbackIcon.value]);
+			return suffixSlot;
+		};
+		const mergedSuffix = mergedSuffixFn();
+		const renderInputNode = () => createVNode(VcInputNumber, mergeProps(restAttrs, restProps, {
+			"keyboard": props.keyboard,
+			"value": props.value,
+			"ref": inputNumberRef,
+			"prefixCls": prefixCls.value,
+			"className": classesValue.value,
+			"style": mergedStyle.value,
+			"classNames": mergedClassNames.value,
+			"styles": mergedStyles.value,
+			"disabled": mergedDisabled.value,
+			"controls": controlsProp.value,
+			"upHandler": upIcon.value,
+			"downHandler": downIcon.value,
+			"prefix": prefixNode,
+			"suffix": mergedSuffix,
+			"onChange": handleChange
+		}, { "onUpdate:value": handleUpdateValue }, {
+			"onInput": handleInput,
+			"onPressEnter": handlePressEnter,
+			"onStep": handleStep,
+			"onMouseDown": handleMouseEvent("mousedown"),
+			"onClick": handleMouseEvent("click"),
+			"onMouseUp": handleMouseEvent("mouseup"),
+			"onMouseLeave": handleMouseEvent("mouseleave"),
+			"onMouseMove": handleMouseEvent("mousemove"),
+			"onMouseEnter": handleMouseEvent("mouseenter"),
+			"onMouseOut": handleMouseEvent("mouseout"),
+			"onFocus": handleFocusEvent("focus"),
+			"onBlur": handleFocusEvent("blur"),
+			"onKeyDown": handleKeyboardEvent("keydown"),
+			"onKeyUp": handleKeyboardEvent("keyup"),
+			"onCompositionStart": handleCompositionEvent("compositionstart"),
+			"onCompositionEnd": handleCompositionEvent("compositionend"),
+			"onBeforeInput": handleBeforeInput
+		}), null);
+		const inputNode = renderInputNode();
+		if (hasLegacyAddon.value) return createVNode(SpaceCompact, { "rootClass": rootClass.value }, { default: () => [
+			renderAddon(getSlotPropsFnRun(slots, props, "addonBefore")),
+			inputNode,
+			renderAddon(getSlotPropsFnRun(slots, props, "addonAfter"))
+		] });
+		return inputNode;
+	};
+}, {
+	emits: [
+		"change",
+		"update:value",
+		"input",
+		"pressEnter",
+		"step",
+		"mousedown",
+		"click",
+		"mouseup",
+		"mouseleave",
+		"mousemove",
+		"mouseenter",
+		"mouseout",
+		"focus",
+		"blur",
+		"keydown",
+		"keyup",
+		"compositionstart",
+		"compositionend",
+		"beforeinput"
+	],
+	props: {
+		size: {
+			type: [String, null],
+			required: false
+		},
+		status: {
+			type: String,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		addonBefore: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		addonAfter: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		prefix: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		suffix: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		bordered: {
+			type: Boolean,
+			required: false
+		},
+		variant: {
+			type: String,
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		controls: {
+			type: [Boolean, Object],
+			required: false
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		mode: {
+			type: String,
+			required: false
+		},
+		min: { required: false },
+		max: { required: false },
+		step: { required: false },
+		defaultValue: { required: false },
+		value: { required: false },
+		readOnly: {
+			type: Boolean,
+			required: false
+		},
+		upHandler: { required: false },
+		downHandler: { required: false },
+		keyboard: {
+			type: Boolean,
+			required: false
+		},
+		changeOnWheel: {
+			type: Boolean,
+			required: false
+		},
+		parser: {
+			type: Function,
+			required: false
+		},
+		formatter: {
+			type: Function,
+			required: false
+		},
+		precision: {
+			type: Number,
+			required: false
+		},
+		decimalSeparator: {
+			type: String,
+			required: false
+		},
+		onStep: {
+			type: Function,
+			required: false
+		},
+		changeOnBlur: {
+			type: Boolean,
+			required: false
+		},
+		tabIndex: {
+			type: Number,
+			required: false
+		},
+		onMouseLeave: {
+			type: Function,
+			required: false
+		},
+		onMouseOut: {
+			type: Function,
+			required: false
+		},
+		onFocus: {
+			type: Function,
+			required: false
+		},
+		stringMode: {
+			type: Boolean,
+			required: false
+		}
+	},
+	name: "AInputNumber",
+	inheritAttrs: false
+});
+InputNumber.install = (app) => {
+	app.component(InputNumber.name, InputNumber);
+	return app;
+};
+var input_number_default = InputNumber;
+
+//#endregion
+export { input_number_default as default };

package/dist/input-number/style/index.d.ts

@@ -0,0 +1,2 @@
+import { ComponentToken } from "./token.js";
+import "vue";

package/dist/input-number/style/index.js

@@ -0,0 +1,198 @@
+import { resetComponent, resetIcon } from "../../style/index.js";
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.js";
+import { genCompactItemStyle } from "../../style/compact-item.js";
+import { initInputToken } from "../../input/style/token.js";
+import { genBorderlessStyle, genFilledStyle, genOutlinedStyle, genUnderlinedStyle } from "../../input/style/variants.js";
+import { genBasicInputStyle, genPlaceholderStyle } from "../../input/style/index.js";
+import { prepareComponentToken } from "./token.js";
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/input-number/style/index.ts
+const genInputNumberStyles = (token) => {
+	const { componentCls, lineWidth, lineType, borderRadius, inputFontSizeSM, inputFontSizeLG, colorError, paddingInlineSM, paddingBlockSM, paddingBlockLG, paddingInlineLG, colorIcon, motionDurationMid, handleHoverColor, handleOpacity, paddingInline, paddingBlock, handleBg, handleActiveBg, inputAffixPadding, borderRadiusSM, controlWidth, handleBorderColor, filledHandleBg, lineHeightLG } = token;
+	const borderStyle = `${unit(lineWidth)} ${lineType} ${handleBorderColor}`;
+	return [
+		{ [componentCls]: {
+			...resetComponent(token),
+			...genBasicInputStyle(token),
+			"--input-number-input-padding-block": unit(paddingBlock),
+			"--input-number-input-padding-inline": unit(paddingInline),
+			"display": "inline-flex",
+			"width": controlWidth,
+			"margin": 0,
+			"paddingBlock": 0,
+			borderRadius,
+			...genOutlinedStyle(token, { [`${componentCls}-actions`]: {
+				background: handleBg,
+				[`${componentCls}-action-down`]: { borderBlockStart: borderStyle }
+			} }),
+			...genFilledStyle(token, {
+				[`${componentCls}-actions`]: {
+					background: filledHandleBg,
+					[`${componentCls}-action-down`]: { borderBlockStart: borderStyle }
+				},
+				"&:focus-within": { [`${componentCls}-actions`]: { background: handleBg } }
+			}),
+			...genUnderlinedStyle(token, { [`${componentCls}-actions`]: {
+				background: handleBg,
+				[`${componentCls}-action-down`]: { borderBlockStart: borderStyle }
+			} }),
+			...genBorderlessStyle(token),
+			"&-rtl": {
+				direction: "rtl",
+				[`${componentCls}-input`]: { direction: "rtl" }
+			},
+			[`&${componentCls}-out-of-range`]: { [`${componentCls}-input`]: { color: colorError } },
+			[`${componentCls}-input`]: {
+				...resetComponent(token),
+				"width": "100%",
+				"paddingBlock": `var(--input-number-input-padding-block)`,
+				"textAlign": "start",
+				"backgroundColor": "transparent",
+				"border": 0,
+				borderRadius,
+				"outline": 0,
+				"transition": `all ${motionDurationMid} linear`,
+				"appearance": "textfield",
+				"fontSize": "inherit",
+				"lineHeight": "inherit",
+				...genPlaceholderStyle(token.colorTextPlaceholder),
+				"&[type=\"number\"]::-webkit-inner-spin-button, &[type=\"number\"]::-webkit-outer-spin-button": {
+					margin: 0,
+					appearance: "none"
+				}
+			},
+			[`&:hover ${componentCls}-handler-wrap, &-focused ${componentCls}-handler-wrap`]: {
+				width: token.handleWidth,
+				opacity: 1
+			},
+			[`&-disabled ${componentCls}-input`]: {
+				cursor: "not-allowed",
+				color: token.colorTextDisabled
+			}
+		} },
+		{ [componentCls]: {
+			[`
+          ${componentCls}-action-up-disabled,
+          ${componentCls}-action-down-disabled
+        `]: { cursor: "not-allowed" },
+			[`${componentCls}-action`]: {
+				...resetIcon(),
+				"userSelect": "none",
+				"overflow": "hidden",
+				"fontWeight": "bold",
+				"lineHeight": 0,
+				"textAlign": "center",
+				"cursor": "pointer",
+				"transition": `all ${motionDurationMid} linear`,
+				"&:active": { background: handleActiveBg },
+				"&:hover": { color: handleHoverColor }
+			},
+			"&-mode-input": {
+				overflow: "hidden",
+				[`${componentCls}-actions`]: {
+					position: "absolute",
+					insetBlockStart: 0,
+					insetInlineEnd: 0,
+					width: token.handleVisibleWidth,
+					opacity: handleOpacity,
+					height: "100%",
+					borderRadius: 0,
+					display: "flex",
+					flexDirection: "column",
+					alignItems: "stretch",
+					transition: `all ${motionDurationMid}`,
+					overflow: "hidden",
+					[`${componentCls}-action`]: {
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center",
+						flex: "auto",
+						height: "40%",
+						marginInlineEnd: 0,
+						fontSize: token.handleFontSize
+					}
+				},
+				[`&:hover ${componentCls}-actions, &-focused ${componentCls}-actions`]: {
+					width: token.handleWidth,
+					opacity: 1
+				},
+				[`${componentCls}-action`]: {
+					"color": colorIcon,
+					"height": "50%",
+					"borderInlineStart": borderStyle,
+					"&:hover": { height: `60%` }
+				},
+				[`&${componentCls}-disabled, &${componentCls}-readonly`]: { [`${componentCls}-actions`]: { display: "none" } }
+			},
+			[`&${componentCls}-mode-spinner`]: {
+				padding: 0,
+				width: "auto",
+				[`${componentCls}-action`]: {
+					"flex": "none",
+					"paddingInline": "var(--input-number-input-padding-inline)",
+					"&-up": { borderInlineStart: borderStyle },
+					"&-down": { borderInlineEnd: borderStyle }
+				},
+				[`${componentCls}-input`]: {
+					textAlign: "center",
+					paddingInline: "var(--input-number-input-padding-inline)"
+				}
+			}
+		} },
+		{ [componentCls]: {
+			"&-lg": {
+				"--input-number-input-padding-block": unit(paddingBlockLG),
+				"--input-number-input-padding-inline": unit(paddingInlineLG),
+				"paddingBlock": 0,
+				"fontSize": inputFontSizeLG,
+				"lineHeight": lineHeightLG
+			},
+			"&-sm": {
+				"--input-number-input-padding-block": unit(paddingBlockSM),
+				"--input-number-input-padding-inline": unit(paddingInlineSM),
+				"paddingBlock": 0,
+				"fontSize": inputFontSizeSM,
+				"borderRadius": borderRadiusSM
+			}
+		} },
+		{ [componentCls]: {
+			[`${componentCls}-prefix, ${componentCls}-suffix`]: {
+				display: "flex",
+				flex: "none",
+				alignItems: "center",
+				alignSelf: "center",
+				pointerEvents: "none"
+			},
+			[`${componentCls}-prefix`]: { marginInlineEnd: inputAffixPadding },
+			[`${componentCls}-suffix`]: {
+				height: "100%",
+				marginInlineStart: inputAffixPadding,
+				transition: `margin ${motionDurationMid}`
+			},
+			[`&:hover:not(${componentCls}-without-controls)`]: { [`${componentCls}-suffix`]: { marginInlineEnd: token.handleWidth } }
+		} }
+	];
+};
+const genCompatibleStyles = (token) => {
+	const { componentCls, antCls } = token;
+	return { [`${componentCls}-addon`]: { [`&:has(${antCls}-select)`]: {
+		border: 0,
+		padding: 0
+	} } };
+};
+var style_default = genStyleHooks("InputNumber", (token) => {
+	const inputNumberToken = mergeToken(token, initInputToken(token));
+	return [
+		genInputNumberStyles(inputNumberToken),
+		genCompatibleStyles(inputNumberToken),
+		genCompactItemStyle(inputNumberToken)
+	];
+}, prepareComponentToken, {
+	unitless: { handleOpacity: true },
+	resetFont: false
+});
+
+//#endregion
+export { style_default as default };

package/dist/input-number/style/token.d.ts

@@ -0,0 +1,62 @@
+import { SharedComponentToken } from "../../input/style/token.js";
+import "../../theme/internal.js";
+
+//#region src/input-number/style/token.d.ts
+interface ComponentToken extends SharedComponentToken {
+  /**
+   * @desc 输入框宽度
+   * @descEN Width of input
+   */
+  controlWidth: number;
+  /**
+   * @desc 操作按钮宽度
+   * @descEN Width of control button
+   */
+  handleWidth: number;
+  /**
+   * @desc 操作按钮图标大小
+   * @descEN Icon size of control button
+   */
+  handleFontSize: number;
+  /**
+   * Default `auto`. Set `true` will always show the handle
+   * @desc 操作按钮可见性
+   * @descEN Handle visible
+   */
+  handleVisible: 'auto' | true;
+  /**
+   * @desc 操作按钮背景色
+   * @descEN Background color of handle
+   */
+  handleBg: string;
+  /**
+   * @desc 操作按钮激活背景色
+   * @descEN Active background color of handle
+   */
+  handleActiveBg: string;
+  /**
+   * @desc 操作按钮悬浮颜色
+   * @descEN Hover color of handle
+   */
+  handleHoverColor: string;
+  /**
+   * @desc 操作按钮边框颜色
+   * @descEN Border color of handle
+   */
+  handleBorderColor: string;
+  /**
+   * @desc 面性变体操作按钮背景色
+   * @descEN Background color of handle in filled variant
+   */
+  filledHandleBg: string;
+  /**
+   * @internal
+   */
+  handleOpacity: number;
+  /**
+   * @internal
+   */
+  handleVisibleWidth: number;
+}
+//#endregion
+export { ComponentToken };

package/dist/input-number/style/token.js

@@ -0,0 +1,26 @@
+import { initComponentToken } from "../../input/style/token.js";
+import "../../input/style/index.js";
+import { FastColor } from "@ant-design/fast-color";
+
+//#region src/input-number/style/token.ts
+const prepareComponentToken = (token) => {
+	const handleVisible = token.handleVisible ?? "auto";
+	const handleWidth = token.controlHeightSM - token.lineWidth * 2;
+	return {
+		...initComponentToken(token),
+		controlWidth: 90,
+		handleWidth,
+		handleFontSize: token.fontSize / 2,
+		handleVisible,
+		handleActiveBg: token.colorFillAlter,
+		handleBg: token.colorBgContainer,
+		filledHandleBg: new FastColor(token.colorFillSecondary).onBackground(token.colorBgContainer).toHexString(),
+		handleHoverColor: token.colorPrimary,
+		handleBorderColor: token.colorBorder,
+		handleOpacity: handleVisible === true ? 1 : 0,
+		handleVisibleWidth: handleVisible === true ? handleWidth : 0
+	};
+};
+
+//#endregion
+export { prepareComponentToken };