one-design-next 0.0.4-alpha.57

package/dist/select/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';

package/dist/select/style/index.js

@@ -0,0 +1,2 @@
+import "../../style";
+import "./index.css";

package/dist/select/useIcons.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import * as React from 'react';
+type RenderNode = React.ReactNode | ((props: any) => React.ReactNode);
+export default function useIcons({ suffixIcon, clearIcon, menuItemSelectedIcon, removeIcon, loading, multiple, hasFeedback, prefixCls, showSuffixIcon, feedbackIcon, showArrow, }: {
+    suffixIcon?: React.ReactNode;
+    clearIcon?: RenderNode;
+    menuItemSelectedIcon?: RenderNode;
+    removeIcon?: RenderNode;
+    loading?: boolean;
+    multiple?: boolean;
+    hasFeedback?: boolean;
+    feedbackIcon?: ReactNode;
+    prefixCls: string;
+    showSuffixIcon?: boolean;
+    showArrow?: boolean;
+}): {
+    clearIcon: string | number | boolean | Iterable<ReactNode> | React.JSX.Element | ((props: any) => ReactNode);
+    suffixIcon: React.JSX.Element | (({ open, showSearch, }: {
+        open: boolean;
+        showSearch: boolean;
+    }) => React.JSX.Element | null) | null;
+    itemIcon: string | number | boolean | Iterable<ReactNode> | React.JSX.Element | ((props: any) => ReactNode) | null;
+    removeIcon: string | number | boolean | Iterable<ReactNode> | React.JSX.Element | ((props: any) => ReactNode) | null;
+};
+export {};

package/dist/select/useIcons.js

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import Icon from "../icon";
+export default function useIcons(_ref) {
+  var suffixIcon = _ref.suffixIcon,
+    clearIcon = _ref.clearIcon,
+    menuItemSelectedIcon = _ref.menuItemSelectedIcon,
+    removeIcon = _ref.removeIcon,
+    loading = _ref.loading,
+    multiple = _ref.multiple,
+    hasFeedback = _ref.hasFeedback,
+    prefixCls = _ref.prefixCls,
+    showSuffixIcon = _ref.showSuffixIcon,
+    feedbackIcon = _ref.feedbackIcon,
+    showArrow = _ref.showArrow;
+  // Clear Icon
+  var mergedClearIcon = clearIcon !== null && clearIcon !== void 0 ? clearIcon : /*#__PURE__*/React.createElement(Icon, {
+    name: "cancel-circle-filled",
+    style: {
+      background: 'var(--odn-color-white)'
+    }
+  });
+
+  // Validation Feedback Icon
+  var getSuffixIconNode = function getSuffixIconNode(arrowIcon) {
+    if (suffixIcon === null && !hasFeedback && !showArrow) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, showSuffixIcon !== false && arrowIcon, hasFeedback && feedbackIcon);
+  };
+
+  // Arrow item icon
+  var mergedSuffixIcon = null;
+  if (suffixIcon !== undefined) {
+    mergedSuffixIcon = getSuffixIconNode(suffixIcon);
+  } else if (loading) {
+    mergedSuffixIcon = getSuffixIconNode( /*#__PURE__*/React.createElement(Icon, {
+      name: "loading",
+      spin: true
+    }));
+  } else {
+    var iconCls = "".concat(prefixCls, "-suffix");
+    mergedSuffixIcon = function mergedSuffixIcon(_ref2) {
+      var open = _ref2.open,
+        showSearch = _ref2.showSearch;
+      // if (open && showSearch) {
+      //   return getSuffixIconNode(<Icon name="search" className={iconCls} />);
+      // }
+      return getSuffixIconNode( /*#__PURE__*/React.createElement(Icon, {
+        name: "down",
+        className: iconCls
+      }));
+    };
+  }
+
+  // Checked item icon
+  var mergedItemIcon = null;
+  if (menuItemSelectedIcon !== undefined) {
+    mergedItemIcon = menuItemSelectedIcon;
+  } else if (multiple) {
+    mergedItemIcon = /*#__PURE__*/React.createElement(Icon, {
+      name: "check"
+    });
+  } else {
+    mergedItemIcon = null;
+  }
+  var mergedRemoveIcon = null;
+  if (removeIcon !== undefined) {
+    mergedRemoveIcon = removeIcon;
+  } else {
+    mergedRemoveIcon = /*#__PURE__*/React.createElement(Icon, {
+      name: "cancel"
+    });
+  }
+  return {
+    clearIcon: mergedClearIcon,
+    suffixIcon: mergedSuffixIcon,
+    itemIcon: mergedItemIcon,
+    removeIcon: mergedRemoveIcon
+  };
+}

package/dist/slider/index.d.ts

@@ -0,0 +1,69 @@
+import type { SliderProps as RcSliderProps } from 'rc-slider';
+import React from 'react';
+import { type InputNumberProps } from '../input-number';
+import './style';
+export type SliderValue = number | [number, number] | undefined | null;
+export interface SliderProps<T extends SliderValue = SliderValue> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    /**
+     * @description 最小值
+     * @default 0
+     */
+    min?: number;
+    /**
+     * @description 最大值
+     * @default 100
+     */
+    max?: number;
+    /**
+     * @description 步长
+     * @default 1
+     */
+    step?: number;
+    /**
+     * @description 当前值
+     */
+    value?: T;
+    /**
+     * @description 值变化时的回调
+     */
+    onChange?: (value: T) => void;
+    /**
+     * @description 值变化完成时的回调
+     */
+    onChangeComplete?: (value: SliderValue) => void;
+    /**
+     * @description 是否为范围选择
+     * @default false
+     */
+    range?: boolean;
+    /**
+     * @description 标记
+     */
+    marks?: RcSliderProps['marks'];
+    /**
+     * @description 单位
+     */
+    unit?: React.ReactNode;
+    /**
+     * @description 是否显示 tooltip
+     * @default false
+     */
+    tooltipVisible?: boolean;
+    /**
+     * @description 是否显示 tooltip
+     * @default false
+     */
+    onTooltipVisibleChange?: (visible: boolean) => void;
+    /**
+     * @description 是否显示数字输入框
+     * @default false
+     */
+    inputVisible?: boolean;
+    /**
+     * @description 透传 input props
+     * @default undefined
+     */
+    inputProps?: InputNumberProps;
+}
+declare const Slider: <T extends SliderValue>({ className, style, min, max, step, value: valueProp, onChange, onChangeComplete, range, unit, marks, tooltipVisible: tooltipVisibleProp, onTooltipVisibleChange, inputVisible, inputProps, ...restProps }: SliderProps<T>) => React.JSX.Element;
+export default Slider;

package/dist/slider/index.js

@@ -0,0 +1,264 @@
+var _excluded = ["className", "style", "min", "max", "step", "value", "onChange", "onChangeComplete", "range", "unit", "marks", "tooltipVisible", "onTooltipVisibleChange", "inputVisible", "inputProps"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import RcSlider from 'rc-slider';
+import React, { useEffect, useRef, useState } from 'react';
+import InputNumber from "../input-number";
+import "./style";
+var Slider = function Slider(_ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    _ref$min = _ref.min,
+    min = _ref$min === void 0 ? 0 : _ref$min,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 100 : _ref$max,
+    _ref$step = _ref.step,
+    step = _ref$step === void 0 ? 1 : _ref$step,
+    _ref$value = _ref.value,
+    valueProp = _ref$value === void 0 ? null : _ref$value,
+    onChange = _ref.onChange,
+    onChangeComplete = _ref.onChangeComplete,
+    _ref$range = _ref.range,
+    range = _ref$range === void 0 ? false : _ref$range,
+    unit = _ref.unit,
+    marks = _ref.marks,
+    tooltipVisibleProp = _ref.tooltipVisible,
+    onTooltipVisibleChange = _ref.onTooltipVisibleChange,
+    _ref$inputVisible = _ref.inputVisible,
+    inputVisible = _ref$inputVisible === void 0 ? false : _ref$inputVisible,
+    inputProps = _ref.inputProps,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  // 计算值相对于 min-max 范围的百分比
+  var getPercentage = function getPercentage(val) {
+    return (val - min) / (max - min) * 100;
+  };
+
+  // 根据 step 计算小数位数
+  var getDecimalPlaces = function getDecimalPlaces(step) {
+    var stepStr = step.toString();
+    if (stepStr.includes('.')) {
+      return stepStr.split('.')[1].length;
+    }
+    return 0;
+  };
+
+  // 根据 step 格式化数值显示
+  var formatValueForDisplay = function formatValueForDisplay(val) {
+    var decimalPlaces = getDecimalPlaces(step);
+    return val.toFixed(decimalPlaces);
+  };
+  /**
+   * 初始化 Slider 的值
+   * 1. 优先判断 Prop value，如果存在 Prop value，则 Slider 完全交由外部控制，内部状态无效；
+   * 2. 再判断 Prop defaultValue，如果存在默认值，则 Slider 值为此默认值。
+   */
+  var _useState = useState(function () {
+      var val;
+      if (valueProp !== null) {
+        val = typeof valueProp === 'string' ? Number(valueProp) : valueProp;
+      }
+      if (val === undefined) {
+        return val;
+      }
+      return range ? val : Number(val);
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hoverOpen = _useState4[0],
+    setHoverOpen = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    focusOpen = _useState6[0],
+    setFocusOpen = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    dragging = _useState8[0],
+    setDragging = _useState8[1];
+  var tooltipLeft = useRef(null);
+  var tooltipRight = useRef(null);
+  var tooltipCombined = useRef(null);
+  var _useState9 = useState('separated'),
+    _useState10 = _slicedToArray(_useState9, 2),
+    rangeTooltipCombinedStatus = _useState10[0],
+    setRangeTooltipCombinedStatus = _useState10[1];
+  var tooltipVisible = tooltipVisibleProp;
+  if (tooltipVisible === undefined) {
+    tooltipVisible = hoverOpen || focusOpen;
+  }
+  useEffect(function () {
+    if (onTooltipVisibleChange) {
+      onTooltipVisibleChange(hoverOpen || focusOpen);
+    }
+  }, [hoverOpen, focusOpen, onTooltipVisibleChange]);
+  useEffect(function () {
+    if (valueProp !== null && valueProp !== undefined && (_typeof(valueProp) === 'object' || !isNaN(valueProp)) && (typeof valueProp === 'string' ? Number(valueProp) : valueProp) !== value) {
+      setValue(range ? valueProp : Number(valueProp));
+    }
+  }, [valueProp]);
+  useEffect(function () {
+    var onMouseUp = function onMouseUp() {
+      // Delay for 1 frame to make the click to enable hide tooltip
+      // even when the handle is focused
+      setTimeout(function () {
+        setFocusOpen(false);
+      }, 1);
+    };
+    document.addEventListener('mouseup', onMouseUp);
+    return function () {
+      document.removeEventListener('mouseup', onMouseUp);
+    };
+  }, []);
+  useEffect(function () {
+    // 这里做双滑块模式时的 tooltip 设计
+    if (range && Array.isArray(value) && tooltipVisible && tooltipLeft.current && tooltipRight.current) {
+      var rectLeft = tooltipLeft.current.getBoundingClientRect();
+      var rectRight = tooltipRight.current.getBoundingClientRect();
+      // 判断两个 tooltip 是否在位置上存在重叠
+      if (rectLeft.left === rectRight.left) {
+        setRangeTooltipCombinedStatus('overlapped');
+      } else if (rectLeft.left + rectLeft.width > rectRight.left) {
+        setRangeTooltipCombinedStatus('combined');
+        if (tooltipCombined.current) {
+          tooltipCombined.current.style.left = "calc(".concat(getPercentage(value[0]), "% - ").concat(rectLeft.width / 2, "px)");
+          tooltipCombined.current.style.width = "calc(".concat(getPercentage(value[1]) - getPercentage(value[0]), "% + ").concat(rectLeft.width, "px)");
+        }
+      } else {
+        setRangeTooltipCombinedStatus('separated');
+      }
+    }
+  }, [value, range, tooltipVisible]);
+  var checkValueIsValid = function checkValueIsValid(val) {
+    return val !== value && val !== null && val !== undefined && min !== undefined && max !== undefined && val >= min && val <= max;
+  };
+  var handleChange = function handleChange(val) {
+    var newValue = range ? val : Number(val);
+    if (range || typeof newValue === 'number' && checkValueIsValid(newValue)) {
+      if (valueProp === null && newValue !== null) {
+        setValue(newValue);
+      }
+      if (onChange) {
+        onChange(newValue);
+      }
+    }
+  };
+  var handleChangeComplete = function handleChangeComplete(val) {
+    setDragging(false);
+    if (valueProp === null && val !== null) {
+      setValue(val);
+    }
+    if (onChangeComplete) {
+      onChangeComplete(val);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    "data-odn-slider-wrapper": true,
+    className: className,
+    style: style
+  }, restProps), range && Array.isArray(value) && /*#__PURE__*/React.createElement("div", {
+    "data-odn-slider-range-tooltip-wrapper": true,
+    "data-odn-slider-range-tooltip-wrapper-visible": tooltipVisible,
+    "data-odn-slider-range-tooltip-wrapper-combined": rangeTooltipCombinedStatus === 'combined',
+    "data-odn-slider-range-tooltip-wrapper-overlapped": rangeTooltipCombinedStatus === 'overlapped'
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-slider-range-tooltip": true,
+    "data-odn-slider-range-tooltip-left": true,
+    style: {
+      left: "".concat(getPercentage(value[0]), "%")
+    },
+    ref: tooltipLeft
+  }, unit ? "".concat(formatValueForDisplay(value[0])).concat(unit) : formatValueForDisplay(value[0])), /*#__PURE__*/React.createElement("div", {
+    "data-odn-slider-range-tooltip": true,
+    "data-odn-slider-range-tooltip-right": true,
+    style: {
+      left: "".concat(getPercentage(value[1]), "%")
+    },
+    ref: tooltipRight
+  }, unit ? "".concat(formatValueForDisplay(value[1])).concat(unit) : formatValueForDisplay(value[1])), /*#__PURE__*/React.createElement("div", {
+    "data-odn-slider-range-tooltip-combined": true,
+    ref: tooltipCombined
+  }, formatValueForDisplay(value[0]), " -", ' ', unit ? "".concat(formatValueForDisplay(value[1])).concat(unit) : formatValueForDisplay(value[1]))), /*#__PURE__*/React.createElement(RcSlider, {
+    range: range,
+    allowCross: false,
+    handleRender: function handleRender(node, info) {
+      var nodeProps = node.props;
+      function proxyEvent(eventName, event, triggerRestPropsEvent) {
+        var _eventName2, _ref3;
+        if (triggerRestPropsEvent) {
+          var _eventName, _ref2;
+          (_eventName = (_ref2 = restProps)[eventName]) === null || _eventName === void 0 || _eventName.call(_ref2, event);
+        }
+        (_eventName2 = (_ref3 = nodeProps)[eventName]) === null || _eventName2 === void 0 || _eventName2.call(_ref3, event);
+      }
+      var passedProps = _objectSpread(_objectSpread({}, nodeProps), {}, {
+        onMouseEnter: function onMouseEnter(e) {
+          setHoverOpen(true);
+          proxyEvent('onMouseEnter', e);
+        },
+        onMouseLeave: function onMouseLeave(e) {
+          setHoverOpen(false);
+          proxyEvent('onMouseLeave', e);
+        },
+        onMouseDown: function onMouseDown(e) {
+          setFocusOpen(true);
+          setDragging(true);
+          proxyEvent('onMouseDown', e);
+        },
+        onFocus: function onFocus(e) {
+          var _restProps$onFocus;
+          setFocusOpen(true);
+          (_restProps$onFocus = restProps.onFocus) === null || _restProps$onFocus === void 0 || _restProps$onFocus.call(restProps, e);
+          proxyEvent('onFocus', e, true);
+        },
+        onBlur: function onBlur(e) {
+          var _restProps$onBlur;
+          setFocusOpen(false);
+          (_restProps$onBlur = restProps.onBlur) === null || _restProps$onBlur === void 0 || _restProps$onBlur.call(restProps, e);
+          proxyEvent('onBlur', e, true);
+        },
+        children: !range && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+          "data-odn-slider-handle-tooltip": true,
+          "data-odn-slider-handle-tooltip-visible": tooltipVisible
+        }, unit ? "".concat(formatValueForDisplay(info.value)).concat(unit) : formatValueForDisplay(info.value)))
+      });
+      var cloneNode = /*#__PURE__*/React.cloneElement(node, passedProps);
+      return cloneNode;
+    },
+    value: value,
+    onChange: function onChange(v) {
+      handleChange(v);
+    },
+    onChangeComplete: function onChangeComplete(v) {
+      handleChangeComplete(v);
+    },
+    prefixCls: "odn-slider",
+    min: min,
+    max: max,
+    step: step,
+    marks: marks
+  }), inputVisible && !range && /*#__PURE__*/React.createElement(InputNumber, _extends({
+    value: value,
+    step: step,
+    min: min,
+    max: max,
+    onChange: function onChange(v) {
+      handleChange(v);
+    }
+  }, inputProps)));
+};
+export default Slider;

package/dist/slider/style/index.css

@@ -0,0 +1,237 @@
+html {
+  --odn-slider-margin-inline-start: 5px;
+  --odn-slider-margin-inline-end: 5px;
+  --odn-slider-padding-block: 4px;
+  --odn-slider-track-height: 4px;
+  --odn-slider-track-background: var(--odn-color-primary);
+  --odn-slider-rail-background: var(--odn-color-black-3);
+  --odn-slider-border-radius: 4px;
+  --odn-slider-handle-width: 12px;
+  --odn-slider-handle-height: 12px;
+  --odn-slider-handle-border-radius: 12px;
+  --odn-slider-tooltip-padding-block: 10px;
+  --odn-slider-tooltip-padding-inline: 16px;
+  --odn-slider-tooltip-font-size: 13px;
+  --odn-slider-tooltip-background-color: #393939;
+  --odn-slider-tooltip-border-radius: 6px;
+}
+
+[data-odn-slider-wrapper] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  white-space: nowrap;
+  user-select: none;
+  --odn-input-number-width: 90px;
+}
+
+.odn-slider {
+  flex: 1;
+  list-style: none;
+  position: relative;
+  z-index: 1;
+  margin-left: var(--odn-slider-margin-inline-start);
+  margin-right: var(--odn-slider-margin-inline-end);
+  padding: var(--odn-slider-padding-block) 0;
+  height: calc(var(--odn-slider-track-height) + var(--odn-slider-padding-block) * 2);
+  cursor: pointer;
+}
+
+.odn-slider-hasMarks {
+  padding-bottom: 12px;
+}
+
+.odn-slider-rail {
+  position: absolute;
+  width: 100%;
+  height: var(--odn-slider-track-height);
+  background: var(--odn-slider-rail-background);
+  border-radius: var(--odn-slider-border-radius);
+  transition: background-color 0.25s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.odn-slider-track {
+  position: absolute;
+  height: var(--odn-slider-track-height);
+  background: var(--odn-slider-track-background);
+  border-radius: var(--odn-slider-border-radius);
+  transition: background-color 0.25s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[data-odn-slider-handle-wrapper] {
+  position: relative;
+}
+
+.odn-slider-handle {
+  position: absolute;
+  top: calc(50% - var(--odn-slider-handle-height) / 2);
+  cursor: pointer;
+  width: var(--odn-slider-handle-width);
+  height: var(--odn-slider-handle-height);
+  background-color: #fff;
+  border-radius: var(--odn-slider-handle-border-radius);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
+  transition: border-color 0.25s cubic-bezier(0.32, 0.72, 0, 1), transform 0.25s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.25s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.odn-slider-handle.odn-slider-handle-dragging {
+  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
+}
+
+.odn-slider-handle:hover {
+  transform: scale(1.2);
+}
+
+.odn-slider-handle:focus {
+  outline: none;
+}
+
+.odn-slider-handle.ant-tooltip-open {
+  border-color: #1890ff;
+}
+
+.odn-slider:hover .odn-slider-rail {
+  background: var(--odn-slider-rail-background);
+}
+
+.odn-slider:hover .odn-slider-handle:not(.ant-tooltip-open) {
+  border-color: #69c0ff;
+}
+
+.odn-slider-step {
+  position: absolute;
+  width: 100%;
+  height: var(--odn-slider-track-height);
+  background: transparent;
+}
+
+.odn-slider-mark-text {
+  position: absolute;
+  top: 14px;
+  font-size: 13px;
+  line-height: 20px;
+  text-align: center;
+  color: #1f1f1f;
+  word-break: keep-all;
+  cursor: pointer;
+}
+
+.odn-slider-disabled {
+  cursor: not-allowed;
+}
+
+.odn-slider-disabled .odn-slider-mark-text,
+.odn-slider-disabled .odn-slider-handle {
+  cursor: not-allowed;
+}
+
+[data-odn-slider-handle-tooltip] {
+  position: absolute;
+  left: 50%;
+  bottom: 22px;
+  padding: var(--odn-slider-tooltip-padding-block) var(--odn-slider-tooltip-padding-inline);
+  font-size: var(--odn-slider-tooltip-font-size);
+  color: #fff;
+  background-color: var(--odn-slider-tooltip-background-color);
+  border-radius: var(--odn-slider-tooltip-border-radius);
+  transform: translate3d(-50%, 0, 0) scale(0.8);
+  opacity: 0;
+  visibility: hidden;
+  transform-origin: 50% calc(100% + 4px);
+  transition: all 0.15s cubic-bezier(0.32, 0.72, 0, 1) 0.1s;
+}
+
+[data-odn-slider-handle-tooltip]::before {
+  content: "";
+  position: absolute;
+  bottom: -5px;
+  left: 50%;
+  margin-left: -5px;
+  width: 0;
+  height: 0;
+  border-width: 5px 5px 0;
+  border-color: rgba(0, 0, 0, 0);
+  border-top-color: var(--odn-slider-tooltip-background-color);
+  border-style: solid;
+}
+
+[data-odn-slider-handle-tooltip-visible=true] {
+  opacity: 1;
+  visibility: visible;
+  transform: translate3d(-50%, 0, 0) scale(1);
+  transition: all 0.15s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[data-odn-slider-range-tooltip-wrapper] {
+  position: absolute;
+  inset: 0 5px;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.15s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[data-odn-slider-range-tooltip-wrapper][data-odn-slider-range-tooltip-wrapper-visible=true] {
+  opacity: 1;
+  visibility: visible;
+}
+
+[data-odn-slider-range-tooltip-wrapper-visible][data-odn-slider-range-tooltip-wrapper-combined=true] [data-odn-slider-range-tooltip] {
+  color: transparent;
+}
+
+[data-odn-slider-range-tooltip-wrapper-visible][data-odn-slider-range-tooltip-wrapper-combined=true] [data-odn-slider-range-tooltip-left] {
+  border-radius: 6px 0 0 6px;
+}
+
+[data-odn-slider-range-tooltip-wrapper-visible][data-odn-slider-range-tooltip-wrapper-combined=true] [data-odn-slider-range-tooltip-right] {
+  border-radius: 0 6px 6px 0;
+}
+
+[data-odn-slider-range-tooltip-wrapper-visible][data-odn-slider-range-tooltip-wrapper-combined=true] [data-odn-slider-range-tooltip-combined] {
+  opacity: 1;
+  visibility: visible;
+}
+
+[data-odn-slider-handle-tooltip-wrapper-visible][data-odn-slider-handle-tooltip-wrapper-overlapped=true] [data-odn-slider-handle-tooltip-left] {
+  opacity: 0;
+  visibility: hidden;
+}
+
+[data-odn-slider-range-tooltip] {
+  position: absolute;
+  bottom: 22px;
+  padding: var(--odn-slider-tooltip-padding-block) var(--odn-slider-tooltip-padding-inline);
+  font-size: var(--odn-slider-tooltip-font-size);
+  color: #fff;
+  background-color: var(--odn-slider-tooltip-background-color);
+  border-radius: var(--odn-slider-tooltip-border-radius);
+  transform: translate3d(-50%, 0, 0);
+}
+
+[data-odn-slider-range-tooltip]::before {
+  content: "";
+  position: absolute;
+  bottom: -5px;
+  left: 50%;
+  margin-left: -5px;
+  width: 0;
+  height: 0;
+  border-width: 5px 5px 0;
+  border-color: transparent;
+  border-top-color: var(--odn-slider-tooltip-background-color);
+  border-style: solid;
+}
+
+[data-odn-slider-range-tooltip-combined] {
+  position: absolute;
+  bottom: 22px;
+  display: flex;
+  padding: var(--odn-slider-tooltip-padding-block) 0;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  opacity: 0;
+  visibility: hidden;
+  font-size: var(--odn-slider-tooltip-font-size);
+}

package/dist/slider/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';