one-design-next 0.0.4-alpha.57

package/dist/pop-base/style/index.d.ts

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

package/dist/pop-base/style/index.js

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

package/dist/pop-base/useForkRef.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+/**
+ * Merges refs into a single memoized callback ref or `null`.
+ */
+export declare function useForkRef<Instance>(...refs: Array<React.Ref<Instance> | undefined>): null | React.RefCallback<Instance>;

package/dist/pop-base/useForkRef.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+
+/**
+ * Merges refs into a single memoized callback ref or `null`.
+ */
+export function useForkRef() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+  var cleanupRef = React.useRef(undefined);
+  var refEffect = React.useCallback(function (instance) {
+    var cleanups = refs.map(function (ref) {
+      if (ref == null) {
+        return null;
+      }
+      if (typeof ref === 'function') {
+        var refCallback = ref;
+        var refCleanup = refCallback(instance);
+        return typeof refCleanup === 'function' ? refCleanup : function () {
+          refCallback(null);
+        };
+      }
+      ref.current = instance;
+      return function () {
+        ref.current = null;
+      };
+    });
+    return function () {
+      cleanups.forEach(function (refCleanup) {
+        return refCleanup === null || refCleanup === void 0 ? void 0 : refCleanup();
+      });
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, refs);
+  return React.useMemo(function () {
+    if (refs.every(function (ref) {
+      return ref == null;
+    })) {
+      return null;
+    }
+    return function (value) {
+      if (cleanupRef.current) {
+        cleanupRef.current();
+        cleanupRef.current = undefined;
+      }
+      if (value != null) {
+        cleanupRef.current = refEffect(value);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, refs);
+}

package/dist/popover/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { PopoverProps } from '../pop-base';
+declare const Popover: (props: PopoverProps) => React.JSX.Element;
+export default Popover;

package/dist/popover/index.js

@@ -0,0 +1,9 @@
+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); }
+import React from 'react';
+import PopBase from "../pop-base";
+var Popover = function Popover(props) {
+  return /*#__PURE__*/React.createElement(PopBase, _extends({
+    type: "popover"
+  }, props));
+};
+export default Popover;

package/dist/radio/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import './style';
+type ValueType = string;
+export interface RadioGroupProps<T extends ValueType = ValueType> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'dir'> {
+    vertical?: boolean;
+    options?: {
+        label?: string;
+        value: T;
+        disabled?: boolean;
+    }[];
+    value?: T;
+    onChange?: (value: T) => void;
+    size?: 'small' | 'medium' | 'large';
+}
+export interface RadioProps {
+    children: React.ReactNode;
+}
+declare const Radio: React.FC<RadioProps> & {
+    Group: React.FC<RadioGroupProps<string>>;
+};
+export default Radio;

package/dist/radio/index.js

@@ -0,0 +1,45 @@
+var _excluded = ["value", "onChange", "options", "size", "vertical"];
+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 _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 React, { useRef } from 'react';
+import { RadioGroupItemPrimitive, RadioGroupPrimitive } from "./primitive";
+import "./style";
+function RadioGroup(_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange,
+    options = _ref.options,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    vertical = _ref.vertical,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var id = useRef(Math.random().toString(36).substring(2, 15));
+  return /*#__PURE__*/React.createElement(RadioGroupPrimitive, _extends({
+    "data-odn-radio-group": true,
+    "data-odn-radio-group-size": size,
+    "data-odn-radio-group-vertical": vertical,
+    value: value,
+    onValueChange: onChange
+  }, props), options === null || options === void 0 ? void 0 : options.map(function (option) {
+    return /*#__PURE__*/React.createElement("div", {
+      "data-odn-radio": true,
+      "data-odn-radio-disabled": option.disabled,
+      "data-odn-radio-checked": option.value === value,
+      key: option.value
+    }, /*#__PURE__*/React.createElement(RadioGroupItemPrimitive, {
+      disabled: option.disabled,
+      value: option.value,
+      id: "".concat(id.current, "-").concat(option.value)
+    }), !!option.label && /*#__PURE__*/React.createElement("label", {
+      htmlFor: "".concat(id.current, "-").concat(option.value),
+      "data-odn-radio-label": true
+    }, option.label));
+  }));
+}
+
+// TODO: 加入单独使用
+var Radio = function Radio(props) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null);
+};
+Radio.Group = RadioGroup;
+export default Radio;

package/dist/radio/primitive.d.ts

@@ -0,0 +1,5 @@
+import * as RadioGroupRadix from '@radix-ui/react-radio-group';
+import * as React from 'react';
+declare const RadioGroupPrimitive: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<RadioGroupRadix.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>>;
+declare const RadioGroupItemPrimitive: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<RadioGroupRadix.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>>;
+export { RadioGroupItemPrimitive, RadioGroupPrimitive };

package/dist/radio/primitive.js

@@ -0,0 +1,28 @@
+'use client';
+
+var _excluded = ["className"];
+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; }
+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); }
+import * as RadioGroupRadix from '@radix-ui/react-radio-group';
+import * as React from 'react';
+var RadioGroupPrimitive = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(RadioGroupRadix.Root, _extends({
+    "data-odn-radio-group": true
+  }, props, {
+    ref: ref
+  }));
+}));
+RadioGroupPrimitive.displayName = RadioGroupRadix.Root.displayName;
+var RadioGroupItemPrimitive = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(RadioGroupRadix.Item, _extends({
+    ref: ref,
+    "data-odn-radio-input": true
+  }, props), /*#__PURE__*/React.createElement("div", {
+    "data-odn-radio-indicator": true
+  }));
+}));
+RadioGroupItemPrimitive.displayName = RadioGroupRadix.Item.displayName;
+export { RadioGroupItemPrimitive, RadioGroupPrimitive };

package/dist/radio/style/index.css

@@ -0,0 +1,219 @@
+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;
+}
+
+[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;
+}
+
+[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,24 @@
+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;
+}
+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,96 @@
+'use client';
+
+var _excluded = ["className", "children", "onScroll", "progressiveBlur"],
+  _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,
+    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) 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;
+    setScrollState({
+      isAtTop: isAtTop,
+      isAtBottom: isAtBottom
+    });
+  }, [progressiveBlur]);
+  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 && internalRef.current) {
+      checkScrollState(internalRef.current);
+    }
+  }, [progressiveBlur, 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 && !scrollState.isAtTop && /*#__PURE__*/React.createElement("div", {
+    "data-odn-scroll-area-progressive-blur-top": true
+  }), progressiveBlur && !scrollState.isAtBottom && /*#__PURE__*/React.createElement("div", {
+    "data-odn-scroll-area-progressive-blur-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,77 @@
+html {
+  --odn-scroll-area-cover-size: 40px;
+  --odn-scroll-area-cover-blur: 2px;
+  --odn-scroll-area-cover-bg-offset: 25%;
+}
+
+[data-odn-scroll-area] {
+  position: relative;
+}
+
+[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;
+  padding: 1px;
+  transition: colors;
+  user-select: none;
+}
+
+[data-odn-scroll-area-scrollbar][data-odn-scroll-area-scrollbar-orientation=vertical] {
+  height: 100%;
+  width: 10px;
+  border-left: 1px solid transparent;
+}
+
+[data-odn-scroll-area-scrollbar][data-odn-scroll-area-scrollbar-orientation=horizontal] {
+  height: 10px;
+  flex-direction: column;
+  border-top: 1px solid transparent;
+}
+
+[data-odn-scroll-area-thumb] {
+  position: relative;
+  flex: 1;
+  border-radius: 9999px;
+  background-color: var(--odn-color-border);
+}
+
+[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-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";