one-design-next 0.0.4-alpha.100

package/dist/radio/style/index.css

@@ -0,0 +1,224 @@
+html {
+  --odn-radio-gap-small: 24px;
+  --odn-radio-gap-small-vertical: 12px;
+  --odn-radio-height-small: 20px;
+  --odn-radio-label-font-size-small: 12px;
+  --odn-radio-label-line-height-small: 1.66666667;
+  --odn-radio-input-gap-small: 6px;
+  --odn-radio-input-size-small: 14px;
+  --odn-radio-indicator-size-small: 5.25px;
+  --odn-radio-gap-medium: 24px;
+  --odn-radio-gap-medium-vertical: 12px;
+  --odn-radio-height-medium: 22px;
+  --odn-radio-label-font-size-medium: 14px;
+  --odn-radio-label-line-height-medium: 1.57142857;
+  --odn-radio-input-gap-medium: 8px;
+  --odn-radio-input-size-medium: 16px;
+  --odn-radio-indicator-size-medium: 6px;
+  --odn-radio-gap-large: 24px;
+  --odn-radio-gap-large-vertical: 12px;
+  --odn-radio-height-large: 24px;
+  --odn-radio-label-font-size-large: 16px;
+  --odn-radio-label-line-height-large: 1.5;
+  --odn-radio-input-gap-large: 8px;
+  --odn-radio-input-size-large: 18px;
+  --odn-radio-indicator-size-large: 6.75px;
+  --odn-radio-indicator-bg: var(--odn-color-white);
+  --odn-radio-indicator-scale-initial: 3;
+  --odn-radio-color: var(--odn-color-black-12);
+  --odn-radio-input-bg: var(--odn-color-white);
+  --odn-radio-input-border: 1px solid var(--odn-color-black-6);
+  --odn-radio-input-shadow: none;
+  --odn-radio-input-bg-hover: var(--odn-color-white);
+  --odn-radio-input-border-hover: 1px solid var(--odn-color-black-7);
+  --odn-radio-input-shadow-hover: none;
+  --odn-radio-color-checked: var(--odn-color-black-12);
+  --odn-radio-input-bg-checked: var(--odn-color-blue-6);
+  --odn-radio-input-border-checked: 1px solid var(--odn-color-blue-6);
+  --odn-radio-input-shadow-checked: none;
+  --odn-radio-input-bg-checked-hover: var(--odn-color-blue-7);
+  --odn-radio-input-border-checked-hover: 1px solid var(--odn-color-blue-7);
+  --odn-radio-input-shadow-checked-hover: none;
+  --odn-radio-input-bg-checked-focus: var(--odn-color-blue-6);
+  --odn-radio-input-border-checked-focus: 1px solid var(--odn-color-blue-6);
+  --odn-radio-input-shadow-checked-focus: 0 0 0 2px var(--odn-color-blue-2);
+  --odn-radio-color-disabled: var(--odn-color-black-8);
+  --odn-radio-input-bg-disabled: var(--odn-color-black-3);
+  --odn-radio-input-border-disabled: 1px solid var(--odn-color-black-6);
+  --odn-radio-input-shadow-disabled: none;
+  --odn-radio-color-checked-disabled: var(--odn-color-black-8);
+  --odn-radio-input-bg-checked-disabled: var(--odn-color-blue-2);
+  --odn-radio-input-border-checked-disabled: 1px solid var(--odn-color-blue-2);
+  --odn-radio-input-shadow-checked-disabled: none;
+}
+
+@layer components {
+  [data-odn-radio-group] {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  [data-odn-radio] {
+    display: inline-flex;
+    align-items: center;
+  }
+  [data-odn-radio]:not([data-odn-radio-disabled=true]) {
+    color: var(--odn-radio-color);
+    cursor: pointer;
+  }
+  [data-odn-radio]:not([data-odn-radio-disabled=true]) [data-odn-radio-input] {
+    background: var(--odn-radio-input-bg);
+    border: var(--odn-radio-input-border);
+    box-shadow: var(--odn-radio-input-shadow);
+  }
+  [data-odn-radio]:not([data-odn-radio-disabled=true]):hover [data-odn-radio-input] {
+    background: var(--odn-radio-input-bg-hover);
+    border: var(--odn-radio-input-border-hover);
+    box-shadow: var(--odn-radio-input-shadow-hover);
+  }
+  [data-odn-radio]:not([data-odn-radio-disabled=true]) [data-odn-radio-input]:focus-visible {
+    background: var(--odn-radio-input-bg-focus);
+    border: var(--odn-radio-input-border-focus);
+    box-shadow: var(--odn-radio-input-shadow-focus);
+    outline: none;
+  }
+  [data-odn-radio][data-odn-radio-checked=true] {
+    color: var(--odn-radio-color-checked);
+  }
+  [data-odn-radio][data-odn-radio-checked=true] [data-odn-radio-input] {
+    background: var(--odn-radio-input-bg-checked);
+    border: var(--odn-radio-input-border-checked);
+    box-shadow: var(--odn-radio-input-shadow-checked);
+  }
+  [data-odn-radio][data-odn-radio-checked=true] [data-odn-radio-indicator] {
+    opacity: 1;
+    transform: scale(1);
+  }
+  [data-odn-radio][data-odn-radio-checked=true]:not([data-odn-radio-disabled=true]):hover [data-odn-radio-input] {
+    background: var(--odn-radio-input-bg-checked-hover);
+    border: var(--odn-radio-input-border-checked-hover);
+    box-shadow: var(--odn-radio-input-shadow-checked-hover);
+  }
+  [data-odn-radio][data-odn-radio-checked=true]:not([data-odn-radio-disabled=true]) [data-odn-radio-input]:focus-visible {
+    background: var(--odn-radio-input-bg-checked-focus);
+    border: var(--odn-radio-input-border-checked-focus);
+    box-shadow: var(--odn-radio-input-shadow-checked-focus);
+    outline: none;
+  }
+  [data-odn-radio][data-odn-radio-checked=true][data-odn-radio-disabled=true] {
+    color: var(--odn-radio-color-checked-disabled);
+  }
+  [data-odn-radio][data-odn-radio-checked=true][data-odn-radio-disabled=true] [data-odn-radio-input] {
+    background: var(--odn-radio-input-bg-checked-disabled);
+    border: var(--odn-radio-input-border-checked-disabled);
+    box-shadow: var(--odn-radio-input-shadow-checked-disabled);
+  }
+  [data-odn-radio][data-odn-radio-disabled=true] {
+    color: var(--odn-radio-color-disabled);
+    cursor: not-allowed;
+  }
+  [data-odn-radio][data-odn-radio-disabled=true] [data-odn-radio-input] {
+    cursor: not-allowed;
+    background: var(--odn-radio-input-bg-disabled);
+    border: var(--odn-radio-input-border-disabled);
+    box-shadow: var(--odn-radio-input-shadow-disabled);
+  }
+  [data-odn-radio-input] {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border-radius: 100%;
+    transition: 0.15s all cubic-bezier(0.32, 0.72, 0, 1);
+  }
+  [data-odn-radio-indicator] {
+    opacity: 0;
+    background: var(--odn-radio-indicator-bg);
+    border-radius: 100%;
+    transform: scale(var(--odn-radio-indicator-scale-initial));
+    transition: inherit;
+  }
+  [data-odn-radio-label] {
+    cursor: inherit;
+    transition: inherit;
+  }
+  .odn-radio-helper {
+    margin-left: 2px;
+    color: var(--odn-color-black-9);
+  }
+  [data-odn-radio-helper-text=true] [data-odn-radio-label] {
+    text-decoration-line: underline;
+    text-decoration-thickness: 1px;
+    text-decoration-style: dashed;
+    text-underline-offset: 3px;
+  }
+  [data-odn-radio-group-size=small] {
+    gap: var(--odn-radio-gap-small);
+  }
+  [data-odn-radio-group-size=small][data-odn-radio-group-vertical=true] {
+    flex-direction: column;
+    gap: var(--odn-radio-gap-small-vertical);
+  }
+  [data-odn-radio-group-size=small] [data-odn-radio] {
+    height: var(--odn-radio-height-small);
+    font-size: var(--odn-radio-label-font-size-small);
+    line-height: var(--odn-radio-label-line-height-small);
+  }
+  [data-odn-radio-group-size=small] [data-odn-radio-input] {
+    width: var(--odn-radio-input-size-small);
+    height: var(--odn-radio-input-size-small);
+  }
+  [data-odn-radio-group-size=small] [data-odn-radio-label] {
+    padding-inline-start: var(--odn-radio-input-gap-small);
+  }
+  [data-odn-radio-group-size=small] [data-odn-radio-indicator] {
+    width: var(--odn-radio-indicator-size-small);
+    height: var(--odn-radio-indicator-size-small);
+  }
+  [data-odn-radio-group-size=medium] {
+    gap: var(--odn-radio-gap-medium);
+  }
+  [data-odn-radio-group-size=medium][data-odn-radio-group-vertical=true] {
+    flex-direction: column;
+    gap: var(--odn-radio-gap-medium-vertical);
+  }
+  [data-odn-radio-group-size=medium] [data-odn-radio] {
+    height: var(--odn-radio-height-medium);
+    font-size: var(--odn-radio-label-font-size-medium);
+    line-height: var(--odn-radio-label-line-height-medium);
+  }
+  [data-odn-radio-group-size=medium] [data-odn-radio-input] {
+    width: var(--odn-radio-input-size-medium);
+    height: var(--odn-radio-input-size-medium);
+  }
+  [data-odn-radio-group-size=medium] [data-odn-radio-label] {
+    padding-inline-start: var(--odn-radio-input-gap-medium);
+  }
+  [data-odn-radio-group-size=medium] [data-odn-radio-indicator] {
+    width: var(--odn-radio-indicator-size-medium);
+    height: var(--odn-radio-indicator-size-medium);
+  }
+  [data-odn-radio-group-size=large] {
+    gap: var(--odn-radio-gap-large);
+  }
+  [data-odn-radio-group-size=large][data-odn-radio-group-vertical=true] {
+    flex-direction: column;
+    gap: var(--odn-radio-gap-large-vertical);
+  }
+  [data-odn-radio-group-size=large] [data-odn-radio] {
+    height: var(--odn-radio-height-large);
+    font-size: var(--odn-radio-label-font-size-large);
+    line-height: var(--odn-radio-label-line-height-large);
+  }
+  [data-odn-radio-group-size=large] [data-odn-radio-input] {
+    width: var(--odn-radio-input-size-large);
+    height: var(--odn-radio-input-size-large);
+  }
+  [data-odn-radio-group-size=large] [data-odn-radio-label] {
+    padding-inline-start: var(--odn-radio-input-gap-large);
+  }
+  [data-odn-radio-group-size=large] [data-odn-radio-indicator] {
+    width: var(--odn-radio-indicator-size-large);
+    height: var(--odn-radio-indicator-size-large);
+  }
+}

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

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

package/dist/radio/style/index.js

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

package/dist/scroll-area/index.d.ts

@@ -0,0 +1,29 @@
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as React from 'react';
+import './style';
+export interface ScrollAreaProps extends React.ComponentProps<typeof ScrollAreaPrimitive.Root> {
+    className?: string;
+    children?: React.ReactNode;
+    /**
+     * @description 滚动事件
+     * @param e 滚动事件
+     * @returns
+     */
+    onScroll?: (e: React.UIEvent<HTMLDivElement, UIEvent>) => void;
+    /**
+     * @description 是否开启渐进式模糊效果
+     * @default false
+     */
+    progressiveBlur?: boolean | 'start' | 'end';
+    /**
+     * @description 是否开启内阴影效果
+     * @default false
+     */
+    insetShadow?: boolean | 'start' | 'end';
+}
+export interface ScrollBarProps extends React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar> {
+    className?: string;
+    orientation?: 'vertical' | 'horizontal';
+}
+declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default ScrollArea;

package/dist/scroll-area/index.js

@@ -0,0 +1,118 @@
+'use client';
+
+var _excluded = ["className", "children", "onScroll", "progressiveBlur", "insetShadow"],
+  _excluded2 = ["className", "orientation"];
+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 _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 * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as React from 'react';
+import "./style";
+var ScrollArea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    onScroll = _ref.onScroll,
+    _ref$progressiveBlur = _ref.progressiveBlur,
+    progressiveBlur = _ref$progressiveBlur === void 0 ? false : _ref$progressiveBlur,
+    _ref$insetShadow = _ref.insetShadow,
+    insetShadow = _ref$insetShadow === void 0 ? false : _ref$insetShadow,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _React$useState = React.useState({
+      isAtTop: true,
+      isAtBottom: false
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    scrollState = _React$useState2[0],
+    setScrollState = _React$useState2[1];
+  var checkScrollState = React.useCallback(function (element) {
+    if (!progressiveBlur && !insetShadow) return;
+    var scrollTop = element.scrollTop;
+    var scrollHeight = element.scrollHeight;
+    var clientHeight = element.clientHeight;
+
+    // 允许一些误差（1px）来处理像素对齐问题
+    var threshold = 1;
+    var isAtTop = scrollTop <= threshold;
+    var isAtBottom = scrollTop + clientHeight >= scrollHeight - threshold;
+
+    // 根据 progressiveBlur 或 insetShadow 的类型设置状态
+    // 两者共用同一个状态，因为滚动位置判断逻辑完全一致
+    var effectType = progressiveBlur || insetShadow;
+    if (effectType === 'start') {
+      setScrollState({
+        isAtTop: isAtTop,
+        isAtBottom: true
+      });
+    } else if (effectType === 'end') {
+      setScrollState({
+        isAtTop: true,
+        isAtBottom: isAtBottom
+      });
+    } else {
+      setScrollState({
+        isAtTop: isAtTop,
+        isAtBottom: isAtBottom
+      });
+    }
+  }, [progressiveBlur, insetShadow]);
+  var handleScroll = React.useCallback(function (e) {
+    var target = e.currentTarget;
+    checkScrollState(target);
+
+    // 调用外部传入的 onScroll 回调
+    onScroll === null || onScroll === void 0 || onScroll(e);
+  }, [checkScrollState, onScroll]);
+  var internalRef = React.useRef(null);
+  React.useImperativeHandle(ref, function () {
+    return internalRef.current;
+  }, []);
+  React.useEffect(function () {
+    if ((progressiveBlur || insetShadow) && internalRef.current) {
+      checkScrollState(internalRef.current);
+    }
+  }, [progressiveBlur, insetShadow, checkScrollState]);
+  return /*#__PURE__*/React.createElement(ScrollAreaPrimitive.Root, _extends({
+    "data-odn-scroll-area": true,
+    "data-slot": "scroll-area",
+    className: className
+  }, props), /*#__PURE__*/React.createElement(ScrollAreaPrimitive.Viewport, {
+    "data-odn-scroll-area-viewport": true,
+    "data-slot": "scroll-area-viewport",
+    ref: internalRef,
+    onScroll: handleScroll
+  }, children, (progressiveBlur === true || progressiveBlur === 'start') && !scrollState.isAtTop && /*#__PURE__*/React.createElement("div", {
+    "data-odn-scroll-area-progressive-blur-top": true
+  }), (progressiveBlur === true || progressiveBlur === 'end') && !scrollState.isAtBottom && /*#__PURE__*/React.createElement("div", {
+    "data-odn-scroll-area-progressive-blur-bottom": true
+  }), (insetShadow === true || insetShadow === 'start') && !scrollState.isAtTop && /*#__PURE__*/React.createElement("div", {
+    "data-odn-scroll-area-inset-shadow-top": true
+  }), (insetShadow === true || insetShadow === 'end') && !scrollState.isAtBottom && /*#__PURE__*/React.createElement("div", {
+    "data-odn-scroll-area-inset-shadow-bottom": true
+  })), /*#__PURE__*/React.createElement(ScrollBar, null), /*#__PURE__*/React.createElement(ScrollAreaPrimitive.Corner, null));
+});
+ScrollArea.displayName = 'ScrollArea';
+var ScrollBar = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var className = _ref2.className,
+    _ref2$orientation = _ref2.orientation,
+    orientation = _ref2$orientation === void 0 ? 'vertical' : _ref2$orientation,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement(ScrollAreaPrimitive.ScrollAreaScrollbar, _extends({
+    ref: ref,
+    "data-odn-scroll-area-scrollbar": true,
+    "data-odn-scroll-area-scrollbar-orientation": orientation,
+    "data-slot": "scroll-area-scrollbar",
+    orientation: orientation,
+    className: className
+  }, props), /*#__PURE__*/React.createElement(ScrollAreaPrimitive.ScrollAreaThumb, {
+    "data-odn-scroll-area-thumb": true,
+    "data-slot": "scroll-area-thumb"
+  }));
+});
+ScrollBar.displayName = 'ScrollBar';
+export default ScrollArea;

package/dist/scroll-area/style/index.css

@@ -0,0 +1,107 @@
+html {
+  --odn-scroll-area-cover-size: 40px;
+  --odn-scroll-area-cover-blur: 2px;
+  --odn-scroll-area-cover-bg-offset: 25%;
+  --odn-scroll-area-shadow-size: 30px;
+  --odn-scroll-area-shadow-top: 0px 3px 6px rgba(0, 0, 0, 0.04);
+}
+
+@layer components {
+  [data-odn-scroll-area] {
+    position: relative;
+    overflow: hidden;
+    --odn-scrollbar-end-padding: 1px;
+    --odn-scrollbar-side-padding: 1px;
+    --odn-scrollbar-side-hover-padding: 1px;
+    --odn-scrollbar-hover-cursor: default;
+    --odn-scrollbar-thickness: 10px;
+    --odn-scrollbar-background-color: var(--odn-color-border);
+    --odn-scrollbar-hover-background-color: var(--odn-color-border);
+  }
+  [data-odn-scroll-area-viewport] {
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    transition: color, box-shadow;
+    outline: none;
+  }
+  [data-odn-scroll-area-viewport]:focus-visible {
+    outline: 1px solid;
+    outline-offset: 2px;
+  }
+  [data-odn-scroll-area-scrollbar] {
+    z-index: 1;
+    display: flex;
+    touch-action: none;
+    transition: colors;
+    user-select: none;
+    transition: padding 0.1s;
+  }
+  [data-odn-scroll-area-scrollbar]:hover {
+    cursor: var(--odn-scrollbar-hover-cursor);
+  }
+  [data-odn-scroll-area-scrollbar]:hover [data-odn-scroll-area-thumb] {
+    background-color: var(--odn-scrollbar-hover-background-color);
+  }
+  [data-odn-scroll-area-scrollbar][data-odn-scroll-area-scrollbar-orientation=vertical] {
+    height: 100%;
+    width: var(--odn-scrollbar-thickness);
+    border-left: 1px solid transparent;
+    padding: var(--odn-scrollbar-end-padding) var(--odn-scrollbar-side-padding);
+  }
+  [data-odn-scroll-area-scrollbar][data-odn-scroll-area-scrollbar-orientation=vertical]:hover {
+    padding: var(--odn-scrollbar-end-padding) var(--odn-scrollbar-side-hover-padding);
+  }
+  [data-odn-scroll-area-scrollbar][data-odn-scroll-area-scrollbar-orientation=horizontal] {
+    height: var(--odn-scrollbar-thickness);
+    flex-direction: column;
+    border-top: 1px solid transparent;
+    padding: var(--odn-scrollbar-side-padding) var(--odn-scrollbar-end-padding);
+  }
+  [data-odn-scroll-area-scrollbar][data-odn-scroll-area-scrollbar-orientation=horizontal]:hover {
+    padding: var(--odn-scrollbar-side-hover-padding) var(--odn-scrollbar-end-padding);
+  }
+  [data-odn-scroll-area-thumb] {
+    position: relative;
+    flex: 1;
+    border-radius: 9999px;
+    transition: background-color 0.1s;
+    background-color: var(--odn-scrollbar-background-color);
+  }
+  [data-odn-scroll-area-progressive-blur-top],
+  [data-odn-scroll-area-progressive-blur-bottom] {
+    position: absolute;
+    z-index: 1;
+    left: 0;
+    width: 100%;
+    height: var(--odn-scroll-area-cover-size);
+    backdrop-filter: blur(var(--odn-scroll-area-cover-blur));
+    pointer-events: none;
+  }
+  [data-odn-scroll-area-progressive-blur-top] {
+    top: 0;
+    background: linear-gradient(to top, transparent, var(--odn-color-solid-black-1));
+    mask-image: linear-gradient(to bottom, var(--odn-color-solid-black-1) var(--odn-scroll-area-cover-bg-offset), transparent);
+  }
+  [data-odn-scroll-area-progressive-blur-bottom] {
+    bottom: 0;
+    background: linear-gradient(to bottom, transparent, var(--odn-color-solid-black-1));
+    mask-image: linear-gradient(to top, var(--odn-color-solid-black-1) var(--odn-scroll-area-cover-bg-offset), transparent);
+  }
+  [data-odn-scroll-area-inset-shadow-top],
+  [data-odn-scroll-area-inset-shadow-bottom] {
+    position: absolute;
+    z-index: 1;
+    left: 0;
+    width: 100%;
+    height: var(--odn-scroll-area-shadow-size);
+    pointer-events: none;
+  }
+  [data-odn-scroll-area-inset-shadow-top] {
+    top: calc(var(--odn-scroll-area-shadow-size) * -1);
+    box-shadow: var(--odn-scroll-area-shadow-top);
+  }
+  [data-radix-scroll-area-viewport] > *:first-child {
+    display: block !important;
+  }
+}

package/dist/scroll-area/style/index.d.ts

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

package/dist/scroll-area/style/index.js

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

package/dist/select/index.d.ts

@@ -0,0 +1,86 @@
+import type { BaseSelectRef, SelectProps as RcSelectProps } from 'rc-select';
+import { OptGroup, Option } from 'rc-select';
+import type { BaseOptionType, DefaultOptionType } from 'rc-select/lib/Select';
+import React from 'react';
+import './style';
+type RawValue = string | number;
+type SemanticName = 'root';
+type PopupSemantic = 'root';
+export interface LabeledValue {
+    key?: string;
+    value: RawValue;
+    label: React.ReactNode;
+}
+export type SelectValue = RawValue | RawValue[] | LabeledValue | LabeledValue[] | undefined;
+export interface InternalSelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<RcSelectProps<ValueType, OptionType>, 'mode'> {
+    rootClassName?: string;
+    prefix?: React.ReactNode;
+    suffixIcon?: React.ReactNode;
+    size?: 'small' | 'middle' | 'large';
+    disabled?: boolean;
+    mode?: 'multiple' | 'tags' | 'SECRET_COMBOBOX_MODE_DO_NOT_USE' | 'combobox';
+    /** @deprecated Use `variant` instead. */
+    bordered?: boolean;
+    /**
+     * @deprecated `showArrow` is deprecated which will be removed in next major version. It will be a
+     *   default behavior, you can hide it by setting `suffixIcon` to null.
+     */
+    showArrow?: boolean;
+    styles?: Partial<Record<SemanticName, React.CSSProperties>> & {
+        popup?: Partial<Record<PopupSemantic, React.CSSProperties>>;
+    };
+    classNames?: Partial<Record<SemanticName, string>> & {
+        popup?: Partial<Record<PopupSemantic, string>>;
+    };
+}
+export interface SelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<InternalSelectProps<ValueType, OptionType>, 'mode' | 'getInputElement' | 'getRawInputElement' | 'backfill' | 'placement'> {
+    placement?: 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
+    mode?: 'multiple' | 'tags';
+    status?: 'error' | 'warning';
+    popupClassName?: string;
+    popupMatchSelectWidth?: boolean | number;
+    popupRender?: (menu: React.ReactElement) => React.ReactElement;
+    visible?: RcSelectProps['open'];
+    onVisibleChange?: RcSelectProps['onDropdownVisibleChange'];
+    light?: boolean;
+    optionCheckPosition?: 'left' | 'right';
+    showInnerSearch?: boolean;
+    optionRender?: RcSelectProps['optionRender'];
+}
+export interface SelectButtonProps {
+    /** 是否显示箭头 */
+    showArrow?: boolean;
+    /** 尺寸 */
+    size?: 'small' | 'middle' | 'large';
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 前缀图标 */
+    prefix?: React.ReactNode;
+    /** 占位符 */
+    placeholder?: string;
+    /** 当前值 */
+    value?: string | number;
+    /** 是否打开 */
+    active?: boolean;
+    /** 是否允许清除 */
+    allowClear?: boolean;
+    /** 点击事件 */
+    onClick?: () => void;
+    /** 清除事件 */
+    onClear?: () => void;
+    /** 样式类名 */
+    className?: string;
+    /** 内联样式 */
+    style?: React.CSSProperties;
+}
+declare const SelectButton: React.ForwardRefExoticComponent<SelectButtonProps & React.RefAttributes<HTMLDivElement>>;
+export interface SelectComponent {
+    <ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>): React.ReactElement;
+    displayName?: string;
+    SECRET_COMBOBOX_MODE_DO_NOT_USE: string;
+    Option: typeof Option;
+    OptGroup: typeof OptGroup;
+    Button: typeof SelectButton;
+}
+declare const Select: SelectComponent;
+export default Select;