@996-design/996-components 1.0.0

package/es/anchor/Anchor.js

@@ -0,0 +1,304 @@
+"use client";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+import { useEvent } from '@rc-component/util';
+import { clsx } from 'clsx';
+import scrollIntoView from 'scroll-into-view-if-needed';
+import getScroll from '../_util/getScroll.js';
+import { useMergeSemantic, useSemanticRootStyle } from '../_util/hooks/useMergeSemantic/index.js';
+import { isFunction, isNumber, isPlainObject } from '../_util/is.js';
+import scrollTo from '../_util/scrollTo.js';
+import { devUseWarning } from '../_util/warning.js';
+import Affix from '../affix/index.js';
+import { ConfigContext, useComponentConfig } from '../config-provider/context.js';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls.js';
+import AnchorLink from './AnchorLink.js';
+import AnchorContext from './context.js';
+import useStyle from './style/index.js';
+function getDefaultContainer() {
+  return window;
+}
+function getOffsetTop(element, container) {
+  if (!element.getClientRects().length) {
+    return 0;
+  }
+  var rect = element.getBoundingClientRect();
+  if (rect.width || rect.height) {
+    if (container === window) {
+      return rect.top - element.ownerDocument.documentElement.clientTop;
+    }
+    return rect.top - container.getBoundingClientRect().top;
+  }
+  return rect.top;
+}
+var sharpMatcherRegex = /#([^\t\r\n\f\v]+)$/;
+var Anchor = function Anchor(props) {
+  var _ref;
+  var rootClassName = props.rootClassName,
+    customPrefixCls = props.prefixCls,
+    className = props.className,
+    style = props.style,
+    offsetTop = props.offsetTop,
+    _props$affix = props.affix,
+    affix = _props$affix === void 0 ? true : _props$affix,
+    _props$showInkInFixed = props.showInkInFixed,
+    showInkInFixed = _props$showInkInFixed === void 0 ? false : _props$showInkInFixed,
+    children = props.children,
+    items = props.items,
+    _props$direction = props.direction,
+    anchorDirection = _props$direction === void 0 ? 'vertical' : _props$direction,
+    bounds = props.bounds,
+    targetOffset = props.targetOffset,
+    onClick = props.onClick,
+    onChange = props.onChange,
+    getContainer = props.getContainer,
+    getCurrentAnchor = props.getCurrentAnchor,
+    replace = props.replace,
+    classNames = props.classNames,
+    styles = props.styles;
+  // =================== Warning =====================
+  if (process.env.NODE_ENV !== 'production') {
+    var warning = devUseWarning('Anchor');
+    warning.deprecated(!children, 'Anchor children', 'items');
+    process.env.NODE_ENV !== "production" ? warning(!(anchorDirection === 'horizontal' && items !== null && items !== void 0 && items.some(function (n) {
+      return 'children' in n;
+    })), 'usage', '`Anchor items#children` is not supported when `Anchor` direction is horizontal.') : void 0;
+  }
+  var _React$useState = React.useState([]),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    links = _React$useState2[0],
+    setLinks = _React$useState2[1];
+  var _React$useState3 = React.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    activeLink = _React$useState4[0],
+    setActiveLink = _React$useState4[1];
+  var activeLinkRef = React.useRef(activeLink);
+  var wrapperRef = React.useRef(null);
+  var spanLinkNodeRef = React.useRef(null);
+  var animatingRef = React.useRef(false);
+  var scrollRequestIdRef = React.useRef(null);
+  var linkTargetOffsetRef = React.useRef({});
+  var _useComponentConfig = useComponentConfig('anchor'),
+    direction = _useComponentConfig.direction,
+    getPrefixCls = _useComponentConfig.getPrefixCls,
+    contextClassName = _useComponentConfig.className,
+    contextStyle = _useComponentConfig.style,
+    contextClassNames = _useComponentConfig.classNames,
+    contextStyles = _useComponentConfig.styles;
+  var _React$useContext = React.useContext(ConfigContext),
+    getTargetContainer = _React$useContext.getTargetContainer;
+  var prefixCls = getPrefixCls('anchor', customPrefixCls);
+  var rootCls = useCSSVarCls(prefixCls);
+  var _useStyle = useStyle(prefixCls, rootCls),
+    _useStyle2 = _slicedToArray(_useStyle, 2),
+    hashId = _useStyle2[0],
+    cssVarCls = _useStyle2[1];
+  var getCurrentContainer = (_ref = getContainer !== null && getContainer !== void 0 ? getContainer : getTargetContainer) !== null && _ref !== void 0 ? _ref : getDefaultContainer;
+  var dependencyListItem = JSON.stringify(links);
+  var registerLink = function registerLink(link, newTargetOffset) {
+    setLinks(function (prev) {
+      if (!prev.includes(link)) {
+        return [].concat(_toConsumableArray(prev), [link]);
+      }
+      return prev;
+    });
+    // Store link-level targetOffset for scroll detection
+    if (newTargetOffset !== undefined) {
+      linkTargetOffsetRef.current[link] = newTargetOffset;
+    }
+  };
+  var unregisterLink = function unregisterLink(link) {
+    setLinks(function (prev) {
+      return prev.filter(function (i) {
+        return i !== link;
+      });
+    });
+    // Clean up targetOffset when unregistering
+    delete linkTargetOffsetRef.current[link];
+  };
+  var updateInk = function updateInk() {
+    var _wrapperRef$current;
+    var linkNode = (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.querySelector(".".concat(prefixCls, "-link-title-active"));
+    if (linkNode && spanLinkNodeRef.current) {
+      var inkStyle = spanLinkNodeRef.current.style;
+      var horizontalAnchor = anchorDirection === 'horizontal';
+      inkStyle.top = horizontalAnchor ? '' : "".concat(linkNode.offsetTop + linkNode.clientHeight / 2, "px");
+      inkStyle.height = horizontalAnchor ? '' : "".concat(linkNode.clientHeight, "px");
+      inkStyle.left = horizontalAnchor ? "".concat(linkNode.offsetLeft, "px") : '';
+      inkStyle.width = horizontalAnchor ? "".concat(linkNode.clientWidth, "px") : '';
+      if (horizontalAnchor) {
+        scrollIntoView(linkNode, {
+          scrollMode: 'if-needed',
+          block: 'nearest'
+        });
+      }
+    }
+  };
+  var getInternalCurrentAnchor = function getInternalCurrentAnchor(_links, _offsetTop) {
+    var _bounds = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 5;
+    var _linkTargetOffset = arguments.length > 3 ? arguments[3] : undefined;
+    var linkSections = [];
+    var container = getCurrentContainer();
+    _links.forEach(function (link) {
+      var sharpLinkMatch = sharpMatcherRegex.exec(link === null || link === void 0 ? void 0 : link.toString());
+      if (!sharpLinkMatch) {
+        return;
+      }
+      var target = document.getElementById(sharpLinkMatch[1]);
+      if (target) {
+        var _linkTargetOffset$lin;
+        // Use link-level targetOffset if provided, otherwise use global offsetTop
+        var linkOffsetTop = (_linkTargetOffset$lin = _linkTargetOffset === null || _linkTargetOffset === void 0 ? void 0 : _linkTargetOffset[link]) !== null && _linkTargetOffset$lin !== void 0 ? _linkTargetOffset$lin : _offsetTop;
+        var top = getOffsetTop(target, container);
+        if (top <= linkOffsetTop + _bounds) {
+          linkSections.push({
+            link: link,
+            top: top
+          });
+        }
+      }
+    });
+    if (linkSections.length) {
+      var maxSection = linkSections.reduce(function (prev, curr) {
+        return curr.top > prev.top ? curr : prev;
+      });
+      return maxSection.link;
+    }
+    return '';
+  };
+  var setCurrentActiveLink = useEvent(function (link) {
+    // FIXME: Seems a bug since this compare is not equals
+    // `activeLinkRef` is parsed value which will always trigger `onChange` event.
+    if (activeLinkRef.current === link) {
+      return;
+    }
+    // https://github.com/ant-design/ant-design/issues/30584
+    var newLink = isFunction(getCurrentAnchor) ? getCurrentAnchor(link) : link;
+    setActiveLink(newLink);
+    activeLinkRef.current = newLink;
+    // onChange should respect the original link (which may caused by
+    // window scroll or user click), not the new link
+    onChange === null || onChange === void 0 || onChange(link);
+  });
+  var handleScroll = React.useCallback(function () {
+    if (animatingRef.current) {
+      return;
+    }
+    var currentActiveLink = getInternalCurrentAnchor(links, isNumber(targetOffset) ? targetOffset : offsetTop || 0, bounds, linkTargetOffsetRef.current);
+    setCurrentActiveLink(currentActiveLink);
+  }, [links, targetOffset, offsetTop, bounds]);
+  var handleScrollTo = React.useCallback(function (link, targetOffsetParams) {
+    var _ref2, _ref3;
+    var previousActiveLink = activeLinkRef.current;
+    setCurrentActiveLink(link);
+    var sharpLinkMatch = sharpMatcherRegex.exec(link);
+    if (!sharpLinkMatch) {
+      return;
+    }
+    var targetElement = document.getElementById(sharpLinkMatch[1]);
+    if (!targetElement) {
+      return;
+    }
+    if (animatingRef.current) {
+      var _scrollRequestIdRef$c;
+      if (previousActiveLink === link) {
+        return;
+      }
+      (_scrollRequestIdRef$c = scrollRequestIdRef.current) === null || _scrollRequestIdRef$c === void 0 || _scrollRequestIdRef$c.call(scrollRequestIdRef);
+    }
+    var container = getCurrentContainer();
+    var scrollTop = getScroll(container);
+    var eleOffsetTop = getOffsetTop(targetElement, container);
+    var y = scrollTop + eleOffsetTop;
+    var finalTargetOffset = (_ref2 = (_ref3 = targetOffsetParams !== null && targetOffsetParams !== void 0 ? targetOffsetParams : targetOffset) !== null && _ref3 !== void 0 ? _ref3 : offsetTop) !== null && _ref2 !== void 0 ? _ref2 : 0;
+    y -= finalTargetOffset;
+    animatingRef.current = true;
+    scrollRequestIdRef.current = scrollTo(y, {
+      getContainer: getCurrentContainer,
+      callback: function callback() {
+        animatingRef.current = false;
+      }
+    });
+  }, [targetOffset, offsetTop]);
+  // =========== Merged Props for Semantic ==========
+  var mergedProps = _objectSpread(_objectSpread({}, props), {}, {
+    direction: anchorDirection
+  });
+  var contextStyleRoot = useSemanticRootStyle(contextStyle);
+  var styleRoot = useSemanticRootStyle(style);
+  var _useMergeSemantic = useMergeSemantic([contextClassNames, classNames], [contextStyles, contextStyleRoot, styles, styleRoot], {
+      props: mergedProps
+    }),
+    _useMergeSemantic2 = _slicedToArray(_useMergeSemantic, 2),
+    mergedClassNames = _useMergeSemantic2[0],
+    mergedStyles = _useMergeSemantic2[1];
+  var wrapperClass = clsx(hashId, cssVarCls, rootCls, rootClassName, "".concat(prefixCls, "-wrapper"), _defineProperty(_defineProperty({}, "".concat(prefixCls, "-wrapper-horizontal"), anchorDirection === 'horizontal'), "".concat(prefixCls, "-rtl"), direction === 'rtl'), className, contextClassName, mergedClassNames.root);
+  var anchorClass = clsx(prefixCls, _defineProperty({}, "".concat(prefixCls, "-fixed"), !affix && !showInkInFixed));
+  var inkClass = clsx("".concat(prefixCls, "-ink"), mergedClassNames.indicator, _defineProperty({}, "".concat(prefixCls, "-ink-visible"), activeLink));
+  var wrapperStyle = _objectSpread({
+    maxHeight: offsetTop ? "calc(100vh - ".concat(offsetTop, "px)") : '100vh'
+  }, mergedStyles.root);
+  var _createNestedLink = function createNestedLink(options) {
+    return Array.isArray(options) ? options.map(function (item) {
+      return /*#__PURE__*/React.createElement(AnchorLink, _objectSpread(_objectSpread({
+        replace: replace
+      }, item), {}, {
+        key: item.key
+      }), anchorDirection === 'vertical' && _createNestedLink(item.children));
+    }) : null;
+  };
+  var anchorContent = /*#__PURE__*/React.createElement("div", {
+    ref: wrapperRef,
+    className: wrapperClass,
+    style: wrapperStyle
+  }, /*#__PURE__*/React.createElement("div", {
+    className: anchorClass
+  }, /*#__PURE__*/React.createElement("span", {
+    className: inkClass,
+    ref: spanLinkNodeRef,
+    style: mergedStyles.indicator
+  }), 'items' in props ? _createNestedLink(items) : children));
+  React.useEffect(function () {
+    var scrollContainer = getCurrentContainer();
+    handleScroll();
+    scrollContainer === null || scrollContainer === void 0 || scrollContainer.addEventListener('scroll', handleScroll);
+    return function () {
+      scrollContainer === null || scrollContainer === void 0 || scrollContainer.removeEventListener('scroll', handleScroll);
+    };
+  }, [dependencyListItem]);
+  React.useEffect(function () {
+    if (isFunction(getCurrentAnchor)) {
+      setCurrentActiveLink(getCurrentAnchor(activeLinkRef.current || ''));
+    }
+  }, [getCurrentAnchor]);
+  React.useEffect(function () {
+    updateInk();
+  }, [anchorDirection, getCurrentAnchor, dependencyListItem, activeLink]);
+  var memoizedContextValue = React.useMemo(function () {
+    return {
+      registerLink: registerLink,
+      unregisterLink: unregisterLink,
+      scrollTo: handleScrollTo,
+      activeLink: activeLink,
+      onClick: onClick,
+      direction: anchorDirection,
+      classNames: mergedClassNames,
+      styles: mergedStyles
+    };
+  }, [activeLink, onClick, handleScrollTo, anchorDirection, mergedStyles, mergedClassNames]);
+  var affixProps = isPlainObject(affix) ? affix : undefined;
+  return /*#__PURE__*/React.createElement(AnchorContext.Provider, {
+    value: memoizedContextValue
+  }, affix ? (/*#__PURE__*/React.createElement(Affix, _objectSpread({
+    offsetTop: offsetTop,
+    target: getCurrentContainer
+  }, affixProps), anchorContent)) : anchorContent);
+};
+if (process.env.NODE_ENV !== 'production') {
+  Anchor.displayName = 'Anchor';
+}
+export default Anchor;

package/es/anchor/AnchorLink.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export interface AnchorLinkBaseProps {
+    prefixCls?: string;
+    href: string;
+    target?: string;
+    title: React.ReactNode;
+    className?: string;
+    replace?: boolean;
+    targetOffset?: number;
+}
+export interface AnchorLinkProps extends AnchorLinkBaseProps {
+    children?: React.ReactNode;
+}
+declare const AnchorLink: React.FC<AnchorLinkProps>;
+export default AnchorLink;

package/es/anchor/AnchorLink.js

@@ -0,0 +1,81 @@
+"use client";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { devUseWarning } from '../_util/warning.js';
+import { ConfigContext } from '../config-provider/index.js';
+import AnchorContext from './context.js';
+var AnchorLink = function AnchorLink(props) {
+  var href = props.href,
+    title = props.title,
+    customizePrefixCls = props.prefixCls,
+    children = props.children,
+    className = props.className,
+    target = props.target,
+    replace = props.replace,
+    targetOffset = props.targetOffset;
+  var context = React.useContext(AnchorContext);
+  var _ref = context || {},
+    registerLink = _ref.registerLink,
+    unregisterLink = _ref.unregisterLink,
+    scrollTo = _ref.scrollTo,
+    onClick = _ref.onClick,
+    activeLink = _ref.activeLink,
+    direction = _ref.direction,
+    mergedClassNames = _ref.classNames,
+    mergedStyles = _ref.styles;
+  React.useEffect(function () {
+    registerLink === null || registerLink === void 0 || registerLink(href, targetOffset);
+    return function () {
+      unregisterLink === null || unregisterLink === void 0 || unregisterLink(href);
+    };
+  }, [href, targetOffset]);
+  var handleClick = function handleClick(e) {
+    onClick === null || onClick === void 0 || onClick(e, {
+      title: title,
+      href: href
+    });
+    scrollTo === null || scrollTo === void 0 || scrollTo(href, targetOffset);
+    // Support clicking on an anchor does not record history.
+    if (e.defaultPrevented) {
+      return;
+    }
+    var isExternalLink = href.startsWith('http://') || href.startsWith('https://');
+    // Support external link
+    if (isExternalLink) {
+      if (replace) {
+        e.preventDefault();
+        window.location.replace(href);
+      }
+      return;
+    }
+    // Handling internal anchor link
+    e.preventDefault();
+    var historyMethod = replace ? 'replaceState' : 'pushState';
+    window.history[historyMethod](null, '', href);
+  };
+  // =================== Warning =====================
+  if (process.env.NODE_ENV !== 'production') {
+    var warning = devUseWarning('Anchor.Link');
+    process.env.NODE_ENV !== "production" ? warning(!children || direction !== 'horizontal', 'usage', '`Anchor.Link children` is not supported when `Anchor` direction is horizontal') : void 0;
+  }
+  var _React$useContext = React.useContext(ConfigContext),
+    getPrefixCls = _React$useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('anchor', customizePrefixCls);
+  var active = activeLink === href;
+  var wrapperClassName = clsx("".concat(prefixCls, "-link"), className, mergedClassNames === null || mergedClassNames === void 0 ? void 0 : mergedClassNames.item, _defineProperty({}, "".concat(prefixCls, "-link-active"), active));
+  var titleClassName = clsx("".concat(prefixCls, "-link-title"), mergedClassNames === null || mergedClassNames === void 0 ? void 0 : mergedClassNames.itemTitle, _defineProperty({}, "".concat(prefixCls, "-link-title-active"), active));
+  return /*#__PURE__*/React.createElement("div", {
+    className: wrapperClassName,
+    style: mergedStyles === null || mergedStyles === void 0 ? void 0 : mergedStyles.item
+  }, /*#__PURE__*/React.createElement("a", {
+    className: titleClassName,
+    style: mergedStyles === null || mergedStyles === void 0 ? void 0 : mergedStyles.itemTitle,
+    href: href,
+    title: typeof title === 'string' ? title : undefined,
+    target: target,
+    onClick: handleClick
+  }, title), direction !== 'horizontal' ? children : null);
+};
+export default AnchorLink;

package/es/anchor/context.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { AntAnchor } from './Anchor';
+declare const AnchorContext: React.Context<AntAnchor | undefined>;
+export default AnchorContext;

package/es/anchor/context.js

@@ -0,0 +1,3 @@
+import * as React from 'react';
+var AnchorContext = /*#__PURE__*/React.createContext(undefined);
+export default AnchorContext;

package/es/anchor/index.d.ts

@@ -0,0 +1,10 @@
+import InternalAnchor from './Anchor';
+import AnchorLink from './AnchorLink';
+export type { AnchorProps } from './Anchor';
+export type { AnchorLinkProps } from './AnchorLink';
+type InternalAnchorType = typeof InternalAnchor;
+type CompoundedComponent = InternalAnchorType & {
+    Link: typeof AnchorLink;
+};
+declare const Anchor: CompoundedComponent;
+export default Anchor;

package/es/anchor/index.js

@@ -0,0 +1,7 @@
+"use client";
+
+import InternalAnchor from './Anchor.js';
+import AnchorLink from './AnchorLink.js';
+var Anchor = InternalAnchor;
+Anchor.Link = AnchorLink;
+export default Anchor;

package/es/anchor/style/index.d.ts

@@ -0,0 +1,16 @@
+import type { GetDefaultToken } from '../../theme/internal';
+export interface ComponentToken {
+    /**
+     * @desc 链接纵向内间距
+     * @descEN Vertical padding of link
+     */
+    linkPaddingBlock: number;
+    /**
+     * @desc 链接横向内间距
+     * @descEN Horizontal padding of link
+     */
+    linkPaddingInlineStart: number;
+}
+export declare const prepareComponentToken: GetDefaultToken<'Anchor'>;
+declare const _default: (prefixCls: string, rootCls?: string) => readonly [string, string];
+export default _default;

package/es/anchor/style/index.js

@@ -0,0 +1,122 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { unit } from '@996-design/996-cssinjs';
+import { resetComponent, textEllipsis } from '../../style/index.js';
+import { genStyleHooks, mergeToken } from '../../theme/internal.js';
+// ============================== Shared ==============================
+var genSharedAnchorStyle = function genSharedAnchorStyle(token) {
+  var componentCls = token.componentCls,
+    holderOffsetBlock = token.holderOffsetBlock,
+    motionDurationSlow = token.motionDurationSlow,
+    lineWidthBold = token.lineWidthBold,
+    colorPrimary = token.colorPrimary,
+    lineType = token.lineType,
+    colorSplit = token.colorSplit,
+    calc = token.calc;
+  return _defineProperty({}, "".concat(componentCls, "-wrapper"), _defineProperty(_defineProperty(_defineProperty({
+    marginBlockStart: calc(holderOffsetBlock).mul(-1).equal(),
+    paddingBlockStart: holderOffsetBlock
+  }, componentCls, _objectSpread(_objectSpread({}, resetComponent(token)), {}, _defineProperty({
+    position: 'relative',
+    paddingInlineStart: lineWidthBold
+  }, "".concat(componentCls, "-link"), _defineProperty(_defineProperty({
+    paddingBlock: token.linkPaddingBlock,
+    paddingInline: "".concat(unit(token.linkPaddingInlineStart), " 0"),
+    '&-title': _objectSpread(_objectSpread({}, textEllipsis), {}, {
+      position: 'relative',
+      display: 'block',
+      marginBlockEnd: token.anchorTitleBlock,
+      color: token.colorText,
+      transition: "all ".concat(token.motionDurationSlow),
+      '&:only-child': {
+        marginBlockEnd: 0
+      }
+    })
+  }, "&-active > ".concat(componentCls, "-link-title"), {
+    color: token.colorPrimary
+  }), "".concat(componentCls, "-link"), {
+    paddingBlock: token.anchorPaddingBlockSecondary
+  })))), "&:not(".concat(componentCls, "-wrapper-horizontal)"), _defineProperty({}, componentCls, _defineProperty({
+    '&::before': {
+      position: 'absolute',
+      insetInlineStart: 0,
+      top: 0,
+      height: '100%',
+      borderInlineStart: "".concat(unit(lineWidthBold), " ").concat(lineType, " ").concat(colorSplit),
+      content: '" "'
+    }
+  }, "".concat(componentCls, "-ink"), _defineProperty({
+    position: 'absolute',
+    insetInlineStart: 0,
+    display: 'none',
+    transform: 'translateY(-50%)',
+    transition: "top ".concat(motionDurationSlow, " ease-in-out"),
+    width: lineWidthBold,
+    backgroundColor: colorPrimary
+  }, "&".concat(componentCls, "-ink-visible"), {
+    display: 'inline-block'
+  })))), "".concat(componentCls, "-fixed ").concat(componentCls, "-ink ").concat(componentCls, "-ink"), {
+    display: 'none'
+  }));
+};
+var genSharedAnchorHorizontalStyle = function genSharedAnchorHorizontalStyle(token) {
+  var componentCls = token.componentCls,
+    motionDurationSlow = token.motionDurationSlow,
+    lineWidthBold = token.lineWidthBold,
+    colorPrimary = token.colorPrimary;
+  return _defineProperty({}, "".concat(componentCls, "-wrapper-horizontal"), _defineProperty({
+    position: 'relative',
+    '&::before': {
+      position: 'absolute',
+      left: {
+        _skip_check_: true,
+        value: 0
+      },
+      right: {
+        _skip_check_: true,
+        value: 0
+      },
+      bottom: 0,
+      borderBottom: "".concat(unit(token.lineWidth), " ").concat(token.lineType, " ").concat(token.colorSplit),
+      content: '" "'
+    }
+  }, componentCls, _defineProperty(_defineProperty({
+    overflowX: 'scroll',
+    position: 'relative',
+    display: 'flex',
+    scrollbarWidth: 'none' /* Firefox */,
+    '&::-webkit-scrollbar': {
+      display: 'none' /* Safari and Chrome */
+    }
+  }, "".concat(componentCls, "-link:first-of-type"), {
+    paddingInline: 0
+  }), "".concat(componentCls, "-ink"), {
+    position: 'absolute',
+    bottom: 0,
+    transition: ["left", "width"].map(function (prop) {
+      return "".concat(prop, " ").concat(motionDurationSlow, " ease-in-out");
+    }).join(', '),
+    height: lineWidthBold,
+    backgroundColor: colorPrimary
+  })));
+};
+export var prepareComponentToken = function prepareComponentToken(token) {
+  return {
+    linkPaddingBlock: token.paddingXXS,
+    linkPaddingInlineStart: token.padding
+  };
+};
+// ============================== Export ==============================
+export default genStyleHooks('Anchor', function (token) {
+  var fontSize = token.fontSize,
+    fontSizeLG = token.fontSizeLG,
+    paddingXXS = token.paddingXXS,
+    calc = token.calc;
+  var anchorToken = mergeToken(token, {
+    holderOffsetBlock: paddingXXS,
+    anchorPaddingBlockSecondary: calc(paddingXXS).div(2).equal(),
+    anchorTitleBlock: calc(fontSize).div(14).mul(3).equal(),
+    anchorBallSize: calc(fontSizeLG).div(2).equal()
+  });
+  return [genSharedAnchorStyle(anchorToken), genSharedAnchorHorizontalStyle(anchorToken)];
+}, prepareComponentToken);

package/es/anchor/style.d.ts

@@ -0,0 +1,2 @@
+export * from './style/index';
+export { default } from './style/index';

package/es/anchor/style.js

@@ -0,0 +1,3 @@
+import * as moduleNamespace from './style/index.js';
+export * from './style/index.js';
+export default moduleNamespace.default;

package/es/anchor.d.ts

@@ -0,0 +1,2 @@
+export * from './anchor/index';
+export { default } from './anchor/index';

package/es/anchor.js

@@ -0,0 +1,3 @@
+import * as moduleNamespace from './anchor/index.js';
+export * from './anchor/index.js';
+export default moduleNamespace.default;

package/es/app/App.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { AnyObject, CustomComponent } from '../_util/type';
+import type { AppConfig } from './context';
+export interface AppProps<P = AnyObject> extends AppConfig {
+    style?: React.CSSProperties;
+    className?: string;
+    rootClassName?: string;
+    prefixCls?: string;
+    children?: ReactNode;
+    component?: CustomComponent<P> | false;
+}
+declare const App: React.ForwardRefExoticComponent<AppProps<AnyObject> & React.RefAttributes<HTMLElement>>;
+export default App;