@tiny-design/react 1.0.4

package/lib/skeleton/style/_index.scss

@@ -0,0 +1,42 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-skeleton {
+  display: inline-block;
+  width: 100%;
+  height: 1em;
+  position: relative;
+  overflow: hidden;
+  background-color: var(--ty-skeleton-bg);
+
+  & + & {
+    margin-top: 10px;
+  }
+
+  &:after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateX(-100%);
+    background-image: var(--ty-skeleton-shimmer);
+    background-size: 200% 100%;
+    animation: ty-shimmer 1.5s ease infinite;
+  }
+
+  &_rounded {
+    border-radius: 50%;
+  }
+
+  &_active {
+    &:after {
+      content: '';
+    }
+  }
+}
+
+@keyframes ty-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}

package/lib/skeleton/style/index.css

@@ -0,0 +1,34 @@
+.ty-skeleton {
+  display: inline-block;
+  width: 100%;
+  height: 1em;
+  position: relative;
+  overflow: hidden;
+  background-color: var(--ty-skeleton-bg);
+}
+.ty-skeleton + .ty-skeleton {
+  margin-top: 10px;
+}
+.ty-skeleton:after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transform: translateX(-100%);
+  background-image: var(--ty-skeleton-shimmer);
+  background-size: 200% 100%;
+  animation: ty-shimmer 1.5s ease infinite;
+}
+.ty-skeleton_rounded {
+  border-radius: 50%;
+}
+.ty-skeleton_active:after {
+  content: "";
+}
+
+@keyframes ty-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}

package/lib/skeleton/style/index.d.ts

@@ -0,0 +1 @@
+export { };

package/lib/skeleton/style/index.js

@@ -0,0 +1 @@
+require("./index.css");

package/lib/skeleton/types.d.ts

@@ -0,0 +1,12 @@
+import { BaseProps } from "../_utils/props.js";
+import React from "react";
+
+//#region src/skeleton/types.d.ts
+interface SkeletonProps extends BaseProps, React.PropsWithRef<JSX.IntrinsicElements['div']> {
+  active?: boolean;
+  rounded?: boolean;
+  children?: React.ReactNode;
+}
+//#endregion
+export { SkeletonProps };
+//# sourceMappingURL=types.d.ts.map

package/lib/slider/index.js

@@ -0,0 +1,9 @@
+require('../style/base.css');
+require('./style/index.css');
+require('../tooltip/style/index.css');
+//#region src/slider/index.tsx
+var slider_default = require("./slider.js").default;
+//#endregion
+exports.default = slider_default;
+
+//# sourceMappingURL=index.js.map

package/lib/slider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Slider"],"sources":["../../src/slider/index.tsx"],"sourcesContent":["import Slider from './slider';\n\nexport default Slider;\n"],"mappings":";AAEA,IAAA,wCAAeA"}

package/lib/slider/slider.d.ts

@@ -0,0 +1,8 @@
+import { SliderProps } from "./types.js";
+import React from "react";
+
+//#region src/slider/slider.d.ts
+declare const Slider: React.ForwardRefExoticComponent<Omit<SliderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Slider };
+//# sourceMappingURL=slider.d.ts.map

package/lib/slider/slider.js

@@ -0,0 +1,250 @@
+const require_runtime = require("../_virtual/_rolldown/runtime.js");
+const require_config_context = require("../config-provider/config-context.js");
+const require_general = require("../_utils/general.js");
+const require_index = require("../tooltip/index.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/slider/slider.tsx
+const Slider = react.default.forwardRef((props, ref) => {
+	const { defaultValue = 0, min = 0, max = 100, direction = "horizontal", dots = false, step = 1, disabled = false, track = true, tooltipPlacement = "top", tooltipVisible, tipFormatter, marks, onChange, onClick, onAfterChange, className, prefixCls: customisedCls, ...otherProps } = props;
+	const prefixCls = require_general.getPrefixCls("slider", (0, react.useContext)(require_config_context.ConfigContext).prefixCls, customisedCls);
+	const cls = (0, classnames.default)(prefixCls, className, `${prefixCls}_${direction}`, {
+		[`${prefixCls}-with-marks`]: marks,
+		[`${prefixCls}_disabled`]: disabled
+	});
+	const [sliderValues, setSliderValues] = (0, react.useState)("value" in props ? Array.isArray(props.value) ? props.value : [props.value] : Array.isArray(defaultValue) ? defaultValue : [defaultValue]);
+	const [isHovering, setHovering] = (0, react.useState)(false);
+	const railRef = (0, react.useRef)(null);
+	const trackRef = (0, react.useRef)(null);
+	const thumbIdx = (0, react.useRef)(0);
+	const isDragging = (0, react.useRef)(false);
+	const mouseStartPos = (0, react.useRef)(0);
+	const trackStartPos = (0, react.useRef)(0);
+	const currVal = (0, react.useRef)(0);
+	const sliderValuesRef = (0, react.useRef)(sliderValues);
+	sliderValuesRef.current = sliderValues;
+	const isVertical = direction === "vertical";
+	const getValueToPercent = (value) => {
+		return (value - min) * 100 / (max - min);
+	};
+	const calculateTrackStyle = () => {
+		const trackStyle = {
+			left: "0%",
+			right: "100%"
+		};
+		if (sliderValues.length === 1) trackStyle.right = `${100 - getValueToPercent(sliderValues[0])}%`;
+		else {
+			const leftValue = sliderValues[0] > sliderValues[1] ? sliderValues[1] : sliderValues[0];
+			const rightValue = sliderValues[0] > sliderValues[1] ? sliderValues[0] : sliderValues[1];
+			trackStyle.left = `${getValueToPercent(leftValue)}%`;
+			trackStyle.right = `${100 - getValueToPercent(rightValue)}%`;
+		}
+		return trackStyle;
+	};
+	const getRangeValue = (val) => {
+		if (sliderValues.length === 1) return [val];
+		const values = [...sliderValues];
+		const val1 = values[0];
+		const val2 = values[1];
+		if (val1 < val2 && val1 > val || val1 > val2 && val1 < val) values[0] = val;
+		if (val1 < val2 && val2 < val || val1 > val2 && val2 > val) values[1] = val;
+		if (val1 > val && val2 < val) {
+			const half = val2 + (val1 - val2) / 2;
+			if (half >= val) values[1] = val;
+			if (half < val) values[0] = val;
+		}
+		if (val2 > val && val1 < val) {
+			const half = val1 + (val2 - val1) / 2;
+			if (half >= val) values[0] = val;
+			if (half < val) values[1] = val;
+		}
+		return values;
+	};
+	const handleOnChange = (value) => {
+		!("value" in props) && setSliderValues([...value]);
+		onChange && onChange(value.length === 1 ? value[0] : [value[0], value[1]]);
+	};
+	const getWidthToValue = (width) => {
+		const numOfSteps = (max - min) / step;
+		let percent = 0;
+		const railNode = railRef.current;
+		if (railNode) percent = width / railNode[isVertical ? "clientHeight" : "clientWidth"] * 100;
+		if (percent <= 0) percent = 0;
+		if (percent >= 100) percent = 100;
+		const num = numOfSteps * (percent / 100) + .5;
+		const val = Math.floor(num) * step + min;
+		return isVertical ? 100 - val : val;
+	};
+	const sliderOnClick = (e) => {
+		if (isDragging.current || disabled) return;
+		const railNode = railRef.current;
+		if (railNode) {
+			const markOffset = railNode.getBoundingClientRect();
+			handleOnChange(getRangeValue(getWidthToValue(e[isVertical ? "clientY" : "clientX"] - markOffset[isVertical ? "y" : "x"])));
+		}
+		onClick && onClick(e);
+	};
+	const draggingRef = (0, react.useRef)(() => {});
+	const dragEndRef = (0, react.useRef)(() => {});
+	draggingRef.current = (e) => {
+		if (!isDragging.current) return;
+		const sliderVal = getWidthToValue(e[isVertical ? "clientY" : "clientX"] - mouseStartPos.current + trackStartPos.current);
+		const val = [...sliderValuesRef.current];
+		if (sliderVal !== currVal.current) {
+			val[thumbIdx.current] = sliderVal;
+			handleOnChange(val);
+			currVal.current = sliderVal;
+		}
+	};
+	dragEndRef.current = () => {
+		isDragging.current = false;
+		window.removeEventListener("mousemove", stableOnDragging);
+		window.removeEventListener("mouseup", stableOnDragEnd);
+		const vals = sliderValuesRef.current;
+		onAfterChange && onAfterChange(vals.length === 1 ? vals[0] : [vals[0], vals[1]]);
+	};
+	const stableOnDragging = (0, react.useCallback)((e) => draggingRef.current(e), []);
+	const stableOnDragEnd = (0, react.useCallback)(() => dragEndRef.current(), []);
+	/**
+	* Get track width info when click down the thumb button
+	*/
+	const handleThumbOnMouseDown = (idx, e) => {
+		if (disabled) return;
+		thumbIdx.current = idx;
+		isDragging.current = true;
+		mouseStartPos.current = e[isVertical ? "clientY" : "clientX"];
+		const trackNode = trackRef.current;
+		if (trackNode) {
+			trackStartPos.current = isVertical ? trackNode.offsetTop : trackNode.clientWidth;
+			if (sliderValues.length > 1) {
+				const trackOffset = trackNode[isVertical ? "offsetTop" : "offsetLeft"];
+				trackStartPos.current = idx === 1 && sliderValues[1] > sliderValues[0] || idx !== 1 && sliderValues[0] > sliderValues[1] ? isVertical ? trackOffset : trackStartPos.current + trackOffset : isVertical ? trackNode.clientHeight + trackOffset : trackOffset;
+			}
+		}
+		window.addEventListener("mousemove", stableOnDragging, { capture: true });
+		window.addEventListener("mouseup", stableOnDragEnd, { capture: true });
+	};
+	/**
+	* Get dot values
+	*/
+	const getSteps = () => {
+		const numOfSteps = (max - min) / step;
+		const stepWidth = 100 * step / (max - min);
+		const res = [0];
+		for (let i = 1; i < numOfSteps; i += 1) res.push(i * stepWidth);
+		res.push(100);
+		return res;
+	};
+	/**
+	* Determine dot's border style
+	* @param dotVal: dot value
+	*/
+	const isDotActive = (dotVal) => {
+		if (sliderValues.length === 1) return dotVal < sliderValues[0];
+		else {
+			const [left, right] = sliderValues[0] < sliderValues[1] ? [sliderValues[0], sliderValues[1]] : [sliderValues[1], sliderValues[0]];
+			return dotVal < right && dotVal > left;
+		}
+	};
+	const handleThumbOnMouseEnter = (idx) => {
+		thumbIdx.current = idx;
+		setHovering(true);
+	};
+	const handleThumbOnMouseLeave = () => {
+		setHovering(false);
+	};
+	const renderMark = (mark) => {
+		if (marks && marks[mark] && marks[mark].label) {
+			const { label, style } = marks[mark];
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style,
+				children: label
+			});
+		} else if (marks && marks[mark]) return marks[mark];
+		else return mark;
+	};
+	(0, react.useEffect)(() => {
+		if ("value" in props && props.value !== void 0) setSliderValues(Array.isArray(props.value) ? props.value : [props.value]);
+	}, [props.value]);
+	const trackStyle = calculateTrackStyle();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref,
+		...otherProps,
+		className: cls,
+		onClick: sliderOnClick,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				ref: railRef,
+				className: `${prefixCls}__rail`
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				ref: trackRef,
+				className: (0, classnames.default)(`${prefixCls}__track`, { [`${prefixCls}__track_invisible`]: !track }),
+				style: {
+					[isVertical ? "bottom" : "left"]: trackStyle.left,
+					[isVertical ? "top" : "right"]: trackStyle.right
+				}
+			}),
+			sliderValues.map((value, idx) => {
+				const percent = getValueToPercent(value);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					tabIndex: 0,
+					role: "slider",
+					"aria-valuemax": max,
+					"aria-valuemin": min,
+					"aria-valuenow": value,
+					"aria-disabled": disabled,
+					className: (0, classnames.default)(`${prefixCls}__thumb-container`, {
+						[`${prefixCls}__thumb-container_hovering`]: idx === thumbIdx.current && isHovering,
+						[`${prefixCls}__thumb-container_dragging`]: idx === thumbIdx.current && isDragging.current
+					}),
+					style: {
+						zIndex: idx === thumbIdx.current && (isDragging.current || isHovering) ? 2 : 1,
+						transform: isVertical ? "translate(-50%, 50%)" : "translate(-50%, -50%)",
+						[isVertical ? "bottom" : "left"]: `${percent}%`
+					},
+					onMouseEnter: () => handleThumbOnMouseEnter(idx),
+					onMouseLeave: handleThumbOnMouseLeave,
+					onMouseDown: (e) => handleThumbOnMouseDown(idx, e),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+						trigger: "manual",
+						visible: "tooltipVisible" in props ? tooltipVisible : idx === thumbIdx.current && (isDragging.current || isHovering),
+						usePortal: false,
+						placement: tooltipPlacement,
+						title: tipFormatter ? tipFormatter(value) : value,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: `${prefixCls}__thumb` })
+					})
+				}, idx);
+			}),
+			dots && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `${prefixCls}__dots`,
+				children: getSteps().map((val, idx) => {
+					const stepVal = idx * step + min;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: { [isVertical ? "bottom" : "left"]: `${val}%` },
+						className: (0, classnames.default)(`${prefixCls}__dot`, { [`${prefixCls}__dot_active`]: isDotActive(stepVal) })
+					}, idx);
+				})
+			}),
+			marks && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: `${prefixCls}__marks`,
+				children: Object.keys(marks).map((mark, idx) => {
+					const percent = getValueToPercent(parseFloat(mark));
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: { [isVertical ? "bottom" : "left"]: `${percent}%` },
+						className: `${prefixCls}__mark`,
+						children: renderMark(mark)
+					}, idx);
+				})
+			})
+		]
+	});
+});
+Slider.displayName = "Slider";
+//#endregion
+exports.default = Slider;
+
+//# sourceMappingURL=slider.js.map

package/lib/slider/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","names":["React","getPrefixCls","ConfigContext","Tooltip"],"sources":["../../src/slider/slider.tsx"],"sourcesContent":["import React, { useContext, useRef, useState, ReactNode, useEffect, useCallback } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport Tooltip from '../tooltip';\nimport { SliderProps } from './types';\n\nconst Slider = React.forwardRef<HTMLDivElement, SliderProps>(\n  (props: SliderProps, ref): JSX.Element => {\n    const {\n      defaultValue = 0,\n      min = 0,\n      max = 100,\n      direction = 'horizontal',\n      dots = false,\n      step = 1,\n      disabled = false,\n      track = true,\n      tooltipPlacement = 'top',\n      tooltipVisible,\n      tipFormatter,\n      marks,\n      onChange,\n      onClick,\n      onAfterChange,\n      className,\n      prefixCls: customisedCls,\n      ...otherProps\n    } = props;\n    const configContext = useContext(ConfigContext);\n    const prefixCls = getPrefixCls('slider', configContext.prefixCls, customisedCls);\n    const cls = classNames(prefixCls, className, `${prefixCls}_${direction}`, {\n      [`${prefixCls}-with-marks`]: marks,\n      [`${prefixCls}_disabled`]: disabled,\n    });\n    const [sliderValues, setSliderValues] = useState<number[]>(\n      ('value' in props\n        ? Array.isArray(props.value)\n          ? props.value\n          : [props.value]\n        : Array.isArray(defaultValue)\n        ? defaultValue\n        : [defaultValue]) as number[]\n    );\n    const [isHovering, setHovering] = useState(false);\n    const railRef = useRef<HTMLDivElement | null>(null);\n    const trackRef = useRef<HTMLDivElement | null>(null);\n    const thumbIdx = useRef(0);\n    const isDragging = useRef(false);\n    const mouseStartPos = useRef(0);\n    const trackStartPos = useRef(0);\n    const currVal = useRef(0);\n    const sliderValuesRef = useRef(sliderValues);\n    sliderValuesRef.current = sliderValues;\n    const isVertical = direction === 'vertical';\n\n    const getValueToPercent = (value: number): number => {\n      return ((value - min) * 100) / (max - min);\n    };\n\n    const calculateTrackStyle = (): React.CSSProperties => {\n      const trackStyle: React.CSSProperties = { left: '0%', right: '100%' };\n      if (sliderValues.length === 1) {\n        trackStyle.right = `${100 - getValueToPercent(sliderValues[0])}%`;\n      } else {\n        const leftValue = sliderValues[0] > sliderValues[1] ? sliderValues[1] : sliderValues[0];\n        const rightValue = sliderValues[0] > sliderValues[1] ? sliderValues[0] : sliderValues[1];\n        trackStyle.left = `${getValueToPercent(leftValue)}%`;\n        trackStyle.right = `${100 - getValueToPercent(rightValue)}%`;\n      }\n      return trackStyle;\n    };\n\n    const getRangeValue = (val: number): number[] => {\n      if (sliderValues.length === 1) {\n        return [val];\n      }\n\n      const values = [...sliderValues];\n      const val1 = values[0];\n      const val2 = values[1];\n      if ((val1 < val2 && val1 > val) || (val1 > val2 && val1 < val)) {\n        values[0] = val as number;\n      }\n      if ((val1 < val2 && val2 < val) || (val1 > val2 && val2 > val)) {\n        values[1] = val as number;\n      }\n\n      if (val1 > val && val2 < val) {\n        const half = val2 + (val1 - val2) / 2;\n        if (half >= val) {\n          values[1] = val as number;\n        }\n        if (half < val) {\n          values[0] = val as number;\n        }\n      }\n      if (val2 > val && val1 < val) {\n        const half = val1 + (val2 - val1) / 2;\n        if (half >= val) {\n          values[0] = val as number;\n        }\n        if (half < val) {\n          values[1] = val as number;\n        }\n      }\n      return values;\n    };\n\n    const handleOnChange = (value: number[]): void => {\n      !('value' in props) && setSliderValues([...value]);\n      onChange &&\n        onChange(value.length === 1 ? value[0] : [value[0], value[1]]);\n    };\n\n    const getWidthToValue = (width: number): number => {\n      const numOfSteps = (max - min) / step;\n      let percent = 0;\n      const railNode = railRef.current;\n      if (railNode) {\n        percent = (width / railNode[isVertical ? 'clientHeight' : 'clientWidth']) * 100;\n      }\n\n      if (percent <= 0) {\n        percent = 0;\n      }\n      if (percent >= 100) {\n        percent = 100;\n      }\n\n      // add 0.5 for step movement\n      const num = numOfSteps * (percent / 100) + 0.5;\n      const val = Math.floor(num) * step + min;\n      return isVertical ? 100 - val : val;\n    };\n\n    const sliderOnClick = (e: React.MouseEvent<HTMLDivElement>): void => {\n      if (isDragging.current || disabled) {\n        return;\n      }\n      const railNode = railRef.current;\n      if (railNode) {\n        const markOffset = railNode.getBoundingClientRect();\n        const value = getWidthToValue(\n          e[isVertical ? 'clientY' : 'clientX'] - markOffset[isVertical ? 'y' : 'x']\n        );\n        handleOnChange(getRangeValue(value));\n      }\n      onClick && onClick(e);\n    };\n\n    // Store latest drag/dragEnd handlers in refs so window listeners\n    // always dispatch to the current closure (no stale captures).\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    const draggingRef = useRef<(e: MouseEvent) => void>(() => {});\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    const dragEndRef = useRef<() => void>(() => {});\n\n    draggingRef.current = (e: MouseEvent): void => {\n      if (!isDragging.current) {\n        return;\n      }\n      const sliderVal = getWidthToValue(\n        e[isVertical ? 'clientY' : 'clientX'] - mouseStartPos.current + trackStartPos.current\n      );\n      const val = [...sliderValuesRef.current];\n      if (sliderVal !== currVal.current) {\n        val[thumbIdx.current] = sliderVal;\n        handleOnChange(val);\n        currVal.current = sliderVal;\n      }\n    };\n\n    dragEndRef.current = (): void => {\n      isDragging.current = false;\n      window.removeEventListener('mousemove', stableOnDragging);\n      window.removeEventListener('mouseup', stableOnDragEnd);\n      const vals = sliderValuesRef.current;\n      onAfterChange &&\n        onAfterChange(vals.length === 1 ? vals[0] : [vals[0], vals[1]]);\n    };\n\n    // Stable function references for window event listeners\n    const stableOnDragging = useCallback((e: MouseEvent) => draggingRef.current(e), []);\n    const stableOnDragEnd = useCallback(() => dragEndRef.current(), []);\n\n    /**\n     * Get track width info when click down the thumb button\n     */\n    const handleThumbOnMouseDown = (idx: number, e: React.MouseEvent<HTMLDivElement>): void => {\n      if (disabled) {\n        return;\n      }\n\n      thumbIdx.current = idx;\n      isDragging.current = true;\n      mouseStartPos.current = e[isVertical ? 'clientY' : 'clientX'];\n      const trackNode = trackRef.current;\n      if (trackNode) {\n        trackStartPos.current = isVertical ? trackNode.offsetTop : trackNode.clientWidth;\n\n        // handle when it is a dual slider\n        if (sliderValues.length > 1) {\n          const trackOffset = trackNode[isVertical ? 'offsetTop' : 'offsetLeft'];\n          trackStartPos.current =\n            (idx === 1 && sliderValues[1] > sliderValues[0]) ||\n            (idx !== 1 && sliderValues[0] > sliderValues[1])\n              ? isVertical\n                ? trackOffset\n                : trackStartPos.current + trackOffset\n              : isVertical\n              ? trackNode.clientHeight + trackOffset\n              : trackOffset;\n        }\n      }\n\n      window.addEventListener('mousemove', stableOnDragging, { capture: true });\n      window.addEventListener('mouseup', stableOnDragEnd, { capture: true });\n    };\n\n    /**\n     * Get dot values\n     */\n    const getSteps = (): number[] => {\n      const numOfSteps = (max - min) / step;\n      const stepWidth = (100 * step) / (max - min);\n      const res = [0];\n      for (let i = 1; i < numOfSteps; i += 1) {\n        res.push(i * stepWidth);\n      }\n      res.push(100);\n      return res;\n    };\n\n    /**\n     * Determine dot's border style\n     * @param dotVal: dot value\n     */\n    const isDotActive = (dotVal: number): boolean => {\n      if (sliderValues.length === 1) {\n        return dotVal < sliderValues[0];\n      } else {\n        const [left, right] =\n          sliderValues[0] < sliderValues[1]\n            ? [sliderValues[0], sliderValues[1]]\n            : [sliderValues[1], sliderValues[0]];\n        return dotVal < right && dotVal > left;\n      }\n    };\n\n    const handleThumbOnMouseEnter = (idx: number): void => {\n      thumbIdx.current = idx;\n      setHovering(true);\n    };\n\n    const handleThumbOnMouseLeave = (): void => {\n      setHovering(false);\n    };\n\n    const renderMark = (mark: string): ReactNode => {\n      if (marks && marks[mark] && (marks[mark] as any).label) {\n        const { label, style } = marks[mark] as any;\n        return <div style={style}>{label}</div>;\n      } else if (marks && marks[mark]) {\n        return marks[mark] as ReactNode;\n      } else {\n        return mark;\n      }\n    };\n\n    useEffect(() => {\n      if ('value' in props && props.value !== undefined) {\n        setSliderValues(Array.isArray(props.value) ? props.value : [props.value]);\n      }\n    }, [props.value]);\n\n    const trackStyle = calculateTrackStyle();\n    return (\n      <div ref={ref} {...otherProps} className={cls} onClick={sliderOnClick}>\n        <div ref={railRef} className={`${prefixCls}__rail`} />\n        <div\n          ref={trackRef}\n          className={classNames(`${prefixCls}__track`, {\n            [`${prefixCls}__track_invisible`]: !track,\n          })}\n          style={{\n            [isVertical ? 'bottom' : 'left']: trackStyle.left,\n            [isVertical ? 'top' : 'right']: trackStyle.right,\n          }}\n        />\n        {sliderValues.map((value, idx) => {\n          const percent = getValueToPercent(value);\n          return (\n            <div\n              key={idx}\n              tabIndex={0}\n              role=\"slider\"\n              aria-valuemax={max}\n              aria-valuemin={min}\n              aria-valuenow={value}\n              aria-disabled={disabled}\n              className={classNames(`${prefixCls}__thumb-container`, {\n                [`${prefixCls}__thumb-container_hovering`]: idx === thumbIdx.current && isHovering,\n                [`${prefixCls}__thumb-container_dragging`]:\n                  idx === thumbIdx.current && isDragging.current,\n              })}\n              style={{\n                zIndex: idx === thumbIdx.current && (isDragging.current || isHovering) ? 2 : 1,\n                transform: isVertical ? 'translate(-50%, 50%)' : 'translate(-50%, -50%)',\n                [isVertical ? 'bottom' : 'left']: `${percent}%`,\n              }}\n              onMouseEnter={(): void => handleThumbOnMouseEnter(idx)}\n              onMouseLeave={handleThumbOnMouseLeave}\n              onMouseDown={(e): void => handleThumbOnMouseDown(idx, e)}>\n              <Tooltip\n                trigger=\"manual\"\n                visible={\n                  'tooltipVisible' in props\n                    ? tooltipVisible\n                    : idx === thumbIdx.current && (isDragging.current || isHovering)\n                }\n                usePortal={false}\n                placement={tooltipPlacement}\n                title={tipFormatter ? tipFormatter(value) : value}>\n                <div className={`${prefixCls}__thumb`} />\n              </Tooltip>\n            </div>\n          );\n        })}\n        {dots && (\n          <div className={`${prefixCls}__dots`}>\n            {getSteps().map((val, idx) => {\n              const stepVal = idx * step + min;\n              return (\n                <div\n                  key={idx}\n                  style={{\n                    [isVertical ? 'bottom' : 'left']: `${val}%`,\n                  }}\n                  className={classNames(`${prefixCls}__dot`, {\n                    [`${prefixCls}__dot_active`]: isDotActive(stepVal),\n                  })}\n                />\n              );\n            })}\n          </div>\n        )}\n        {marks && (\n          <div className={`${prefixCls}__marks`}>\n            {Object.keys(marks).map((mark: string, idx) => {\n              const percent = getValueToPercent(parseFloat(mark));\n              return (\n                <div\n                  key={idx}\n                  style={{\n                    [isVertical ? 'bottom' : 'left']: `${percent}%`,\n                  }}\n                  className={`${prefixCls}__mark`}>\n                  {renderMark(mark)}\n                </div>\n              );\n            })}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":"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"}

package/lib/slider/style/_index.scss

@@ -0,0 +1,177 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-slider {
+  position: relative;
+  box-sizing: border-box;
+  cursor: pointer;
+
+  &_horizontal.#{$prefix}-slider {
+    margin-bottom: $slider-margin-bottom-with-marks;
+  }
+
+  &_vertical.#{$prefix}-slider {
+    margin-right: $slider-margin-bottom-with-marks;
+  }
+
+  &_horizontal {
+    min-height: $slider-size;
+    margin: 13px 7px;
+    padding: 4px 0;
+
+    .#{$prefix}-slider {
+
+      &__rail {
+        width: 100%;
+        height: $slider-track-size;
+        left: 0;
+      }
+
+      &__track {
+        height: $slider-track-size;
+      }
+
+      &__thumb-container, &__dot {
+        top: 50%;
+      }
+
+      &__mark {
+        top: 15px;
+        transform: translateX(-50%);
+      }
+    }
+  }
+
+  &_vertical {
+    width: 12px;
+    height: 100%;
+    margin: 6px 10px;
+    padding: 0 4px;
+
+    .#{$prefix}-slider {
+      &__rail {
+        width: $slider-track-size;
+        height: 100%;
+        top: 0;
+      }
+
+      &__track {
+        width: $slider-track-size;
+      }
+
+      &__thumb-container, &__dot {
+        left: 50%;
+      }
+
+      &__mark {
+        left: 15px;
+        transform: translateY(50%);
+      }
+    }
+  }
+
+  &__rail {
+    position: absolute;
+    border-radius: 3px;
+    box-sizing: border-box;
+    background-color: var(--ty-slider-rail-bg);
+  }
+
+  &__track {
+    box-sizing: border-box;
+    border-radius: 3px;
+    background-color: var(--ty-color-primary);
+    position: absolute;
+
+    &_invisible{
+      background-color: transparent;
+    }
+  }
+
+  &__thumb-container {
+    position: absolute;
+    z-index: 1;
+    width: 36px;
+    height: 36px;
+    outline: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &_hovering {
+      cursor: grab;
+
+      .#{$prefix}-slider__thumb {
+        transform: scale(1.2);
+      }
+    }
+
+    &_dragging {
+      cursor: grabbing;
+    }
+  }
+
+  &__thumb {
+    box-sizing: border-box;
+    width: 14px;
+    height: 14px;
+    border: 1px solid var(--ty-color-primary);
+    background-color: var(--ty-slider-thumb-bg);
+    border-radius: 50%;
+    transition: transform 250ms;
+  }
+
+
+  &__dot {
+    box-sizing: border-box;
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: var(--ty-slider-dot-bg);
+    border: 2px solid var(--ty-slider-dot-border);
+    transform: translate(-50%, -50%);
+
+    &_active {
+      border-color: var(--ty-color-primary);
+    }
+  }
+
+  &__mark {
+    position: absolute;
+    color: var(--ty-slider-mark-color);
+    text-align: center;
+    word-break: keep-all;
+    cursor: pointer;
+    font-size: 0.9em;
+    user-select: none;
+
+    &_active {
+      color: var(--ty-slider-mark-active-color);
+    }
+  }
+
+  &_disabled {
+    cursor: not-allowed;
+
+    .#{$prefix}-slider {
+      &__track {
+        background-color: var(--ty-color-text-quaternary);
+      }
+
+      &__thumb {
+        border-color: var(--ty-color-text-quaternary);
+        transform: scale(1);
+      }
+
+      &__thumb-container {
+        &_hovering, &_dragging {
+          cursor: not-allowed;
+        }
+      }
+
+      &__mark {
+        cursor: not-allowed;
+      }
+    }
+  }
+}