@qsxy/element-plus-react 1.0.3 → 2.0.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import './locale/i18n';
-export { Button as ElButton } from './Button';
-export type { ButtonGroupProps, ButtonProps } from './Button';
+export { Button as ElButton, ButtonGroup as ElButtonGroup } from './Button';
+export type { ButtonGroupProps, ButtonProps, ButtonRef } from './Button';
 export { Aside as ElAside, Container as ElContainer, Footer as ElFooter, Header as ElHeader, Main as ElMain } from './Container';
 export type { AsideProps, ContainerProps, FooterProps, HeaderProps, MainProps } from './Container';
 export { Col as ElCol } from './Col';
@@ -22,19 +22,19 @@ export { Popper as ElPopper } from './Popper';
 export type { PopperOptionRef, PopperOptions, PopperProps } from './Popper';
 export { Transition as ElTransition } from './Transition';
 export type { TransitionProps } from './Transition';
-export { Cascader as ElCascader } from './Cascader';
-export type { CascaderMenuProps, CascaderProps } from './Cascader';
+export { Cascader as ElCascader, CascaderPanel as ElCascaderPanel } from './Cascader';
+export type { CascaderMenuProps, CascaderProps, CascaderRef } from './Cascader';
 export { Checkbox as ElCheckbox, CheckboxButton as ElCheckboxButton } from './Checkbox';
 export type { CheckboxProps, ValueType as CheckboxValueType } from './Checkbox';
 export { CheckboxGroup as ElCheckboxGroup } from './CheckboxGroup';
 export type { CheckboxGroupContextValue, CheckboxGroupProps } from './CheckboxGroup';
 export { ColorPicker as ElColorPicker } from './ColorPicker';
 export type { ColorPickerProps } from './ColorPicker';
-export { Radio as ElRadio } from './Radio';
+export { Radio as ElRadio, RadioButton as ElRadioButton } from './Radio';
 export type { RadioProps, ValueType } from './Radio';
 export { RadioGroup as ElRadioGroup } from './RadioGroup';
 export type { RadioContextProps, RadioGroupProps } from './RadioGroup';
-export { Input as ElInput } from './Input';
+export { Input as ElInput, InputGroup as ElInputGroup, InputRange as ElInputRange, TextArea as ElTextArea } from './Input';
 export type { InputProps, InputRangeProps, InputRef, TextareaProps, TextareaRef } from './Input';
 export { InputNumber as ElInputNumber } from './InputNumber';
 export type { InputNumberProps, InputNumberRef } from './InputNumber';
@@ -48,10 +48,14 @@ export { TimePicker as ElTimePicker } from './TimePicker';
 export type { TimePickerProps, TimePickerRef } from './TimePicker';
 export { Switch as ElSwitch } from './Switch';
 export type { ChangeValue, ISwitchProps, ValueType as SwitchValueType } from './Switch';
+export { Slider as ElSlider } from './Slider';
+export type { SliderMarkerItem, SliderMarks, SliderProps, SliderRef, SliderValue } from './Slider';
+export { Segmented as ElSegmented } from './Segmented';
+export type { Option, SegmentedComponentProps, SegmentedProps } from './Segmented';
 export { Transfer as ElTransfer } from './Transfer';
-export type { ListStyle, SelectAllLabel, TransferDirection, TransferItem, TransferLocale, TransferProps, TransferRender } from './Transfer';
-export { Form as ElForm, useForm } from './Form';
-export type { FormInstance, FormItemProps, FormProps, FormRules, InternalFormInstance, InternalNamePath, NamePath, Rule, RuleType, ValidateErrorEntity, ValidateMessages, ValidateOptions, } from './Form';
+export type { ListStyle, TransferDataItem, TransferDirection, TransferFormat, TransferKey, TransferLocale, TransferProps, TransferPropsAlias, TransferRender } from './Transfer';
+export { Form as ElForm, FormItem as ElFormItem, List as ElFormList, useForm, useWatch } from './Form';
+export type { FormContextProps, FormInstance, FormItemProps, FormProps, FormRules, InternalNamePath, NamePath, Rule, RuleType, ValidateErrorEntity, ValidateMessages, ValidateOptions, } from './Form';
 export { Upload as ElUpload } from './Upload';
 export type { UploadFile, UploadFiles, UploadProps, UploadRawFile, UploadRef, UploadStatus, UploadUserFile } from './Upload';
 export { Avatar as ElAvatar } from './Avatar';
@@ -63,17 +67,22 @@ export type { CardProps } from './Card';
 export { Carousel as ElCarousel, CarouselItem as ElCarouselItem } from './Carousel';
 export type { CarouselItemProps, CarouselProps, CarouselRef } from './Carousel';
 export { Collapse as ElCollapse, CollapseItem as ElCollapseItem } from './Collapse';
-export type { CollapseItemProps, CollapseProps } from './Collapse';
+export type { CollapseActiveName, CollapseItemProps, CollapseItemRef, CollapseProps, CollapseRef } from './Collapse';
 export { Descriptions as ElDescriptions, DescriptionsItem as ElDescriptionsItem } from './Descriptions';
 export type { DescriptionsItemProps, DescriptionsProps } from './Descriptions';
 export { Pagination as ElPagination } from './Pagination';
 export type { PageType, PaginationProps, PaginationRef } from './Pagination';
 export { Progress as ElProgress } from './Progress';
 export type { PropgressProps } from './Progress';
+export { Countdown as ElCountdown } from './Countdown';
+export type { CountdownProps, CountdownRef } from './Countdown';
 export { Statistic as ElStatistic } from './Statistic';
 export type { StatisticProps, StatisticRef } from './Statistic';
 export { Table as ElTable, TableColumn as ElTableColumn } from './Table';
 export type { RenderCell, TableColumnCtx, TableColumnProps, TableProps, TableRef, TableSort } from './Table';
+export { Tour as ElTour, TourStep as ElTourStep } from './Tour';
+export type { PosInfo, TourBtnProps, TourContentProps, TourContextType, TourGap, TourMask, TourProps, TourStepProps } from './Tour';
+export { AutoResizer as ElAutoResizer, TableV2 as ElTableV2 } from './TableV2';
 export { Tag as ElTag } from './Tag';
 export type { TagProps } from './Tag';
 export { TimeLine as ElTimeLine, TimeLineItem as ElTimeLineItem } from './TimeLine';
@@ -81,16 +90,26 @@ export type { TimeLineItemProps, TimeLineProps } from './TimeLine';
 export { Tree as ElTree } from './Tree';
 export type { AllowDragFunction, AllowDropFunction, AllowDropType, FilterNodeMethodFunction, LoadFunction, NodeDropType, TreeNode, TreeNodeData, TreeNodeProps, TreeOptionProps, TreeProps, TreeRef, TreeStore, } from './Tree';
 export { TreeSelect as ElTreeSelect } from './TreeSelect';
+export { Affix as ElAffix } from './Affix';
+export type { AffixProps, AffixRef } from './Affix';
+export { Anchor as ElAnchor, AnchorLink as ElAnchorLink } from './Anchor';
+export type { AnchorContext, AnchorLinkProps, AnchorLinkState, AnchorProps, AnchorRef } from './Anchor';
+export { Backtop as ElBacktop } from './Backtop';
+export type { BacktopProps } from './Backtop';
 export { Breadcrumb as ElBreadcrumb, BreadcrumbItem as ElBreadcrumbItem } from './Breadcrumb';
 export type { BreadcrumbItemProps, BreadcrumbProps } from './Breadcrumb';
+export { Step as ElStep, Steps as ElSteps } from './Steps';
+export type { StepItemState, StepProps, StepsContextProps, StepsProps, StepsStatus } from './Steps';
 export { Dropdown as ElDropdown, DropdownItem as ElDropdownItem, DropdownMenu as ElDropdownMenu } from './Dropdown';
 export type { DropdownItemProps, DropdownMenuProps, DropdownProps } from './Dropdown';
 export { Menu as ElMenu, MenuItem as ElMenuItem, MenuItemGroup as ElMenuItemGroup, SubMenu as ElSubMenu } from './Menu';
 export type { MenuCloseEvent, MenuItemClicked, MenuItemGroupProps, MenuItemProps, MenuItemRegistered, MenuOpenEvent, MenuProps, MenuRef, SubMenuProps } from './Menu';
 export { TabPane as ElTabPane, Tabs as ElTabs } from './Tabs';
-export type { TabPaneProps, TabsPaneContext, TabsProps } from './Tabs';
+export type { TabPaneName, TabPaneProps, TabsPaneContext, TabsProps } from './Tabs';
 export { Empty as ElEmpty } from './Empty';
 export type { IEmptyProps } from './Empty';
+export { PageHeader as ElPageHeader } from './PageHeader';
+export type { PageHeaderProps } from './PageHeader';
 export { Skeleton as ElSkeleton, SkeletonItem as ElSkeletonItem } from './Skeleton';
 export type { SkeletonItemProps, SkeletonProps } from './Skeleton';
 export { Alert as ElAlert } from './Alert';
@@ -115,8 +134,10 @@ export { Popover as ElPopover } from './Popover';
 export type { PopoverProps } from './Popover';
 export { Divider as ElDivider } from './Divider';
 export type { DividerProps } from './Divider';
-export { PopupManager, download, genFileId, generateTree, getScrollWidth, isEmpty, isNotEmpty, randomCode } from './Util';
+export { Watermark as ElWatermark } from './Watermark';
+export type { WatermarkFontType, WatermarkProps } from './Watermark';
 export { htmlInputAttrs, htmlInputEvents, htmlInputProps, partitionAnimationProps, partitionHTMLProps, partitionPopperPropsUtils, partitionTreePropsUtils, prefix, useChildrenInstance, useClassNames, useClickOutside, useComponentWillMount, useConfigProvider, useControlled, useDisabled, useForceUpdate, useSize, } from './hooks';
+export { PopupManager, download, genFileId, generateTree, getScrollWidth, isEmpty, isNotEmpty, randomCode } from './Util';
 export type { AnimationEventProps, BaseProps, FormControlBaseProps, NativeProps, StandardProps, TooltipBaseProps, TypeAttributes } from './types/common';
 /** 全局配置 */
 export { ConfigProvider as ElConfigProvider } from './ConfigProvider';

package/dist/index.js

@@ -1,7 +1,7 @@
 import "./locale/i18n";
 
 /* Basic 基础组件 */
-export { Button as ElButton } from "./Button";
+export { Button as ElButton, ButtonGroup as ElButtonGroup } from "./Button";
 export { Aside as ElAside, Container as ElContainer, Footer as ElFooter, Header as ElHeader, Main as ElMain } from "./Container";
 export { Col as ElCol } from "./Col";
 export { Row as ElRow, RowContext } from "./Row";
@@ -14,21 +14,23 @@ export { Space as ElSpace } from "./Space";
 export { Popper as ElPopper } from "./Popper";
 export { Transition as ElTransition } from "./Transition";
 /* Form 表单组件 */
-export { Cascader as ElCascader } from "./Cascader";
+export { Cascader as ElCascader, CascaderPanel as ElCascaderPanel } from "./Cascader";
 export { Checkbox as ElCheckbox, CheckboxButton as ElCheckboxButton } from "./Checkbox";
 export { CheckboxGroup as ElCheckboxGroup } from "./CheckboxGroup";
 export { ColorPicker as ElColorPicker } from "./ColorPicker";
-export { Radio as ElRadio } from "./Radio";
+export { Radio as ElRadio, RadioButton as ElRadioButton } from "./Radio";
 export { RadioGroup as ElRadioGroup } from "./RadioGroup";
-export { Input as ElInput } from "./Input";
+export { Input as ElInput, InputGroup as ElInputGroup, InputRange as ElInputRange, TextArea as ElTextArea } from "./Input";
 export { InputNumber as ElInputNumber } from "./InputNumber";
 export { Option as ElOption, OptionGroup as ElOptionGroup, Select as ElSelect } from "./Select";
 export { Calendar, CalendarContext } from "./Calendar";
 export { DatePicker as ElDatePicker } from "./DatePicker";
 export { TimePicker as ElTimePicker } from "./TimePicker";
 export { Switch as ElSwitch } from "./Switch";
+export { Slider as ElSlider } from "./Slider";
+export { Segmented as ElSegmented } from "./Segmented";
 export { Transfer as ElTransfer } from "./Transfer";
-export { Form as ElForm, useForm } from "./Form";
+export { Form as ElForm, FormItem as ElFormItem, List as ElFormList, useForm, useWatch } from "./Form";
 export { Upload as ElUpload } from "./Upload";
 /* Data 数据展示 */
 export { Avatar as ElAvatar } from "./Avatar";
@@ -39,8 +41,11 @@ export { Collapse as ElCollapse, CollapseItem as ElCollapseItem } from "./Collap
 export { Descriptions as ElDescriptions, DescriptionsItem as ElDescriptionsItem } from "./Descriptions";
 export { Pagination as ElPagination } from "./Pagination";
 export { Progress as ElProgress } from "./Progress";
+export { Countdown as ElCountdown } from "./Countdown";
 export { Statistic as ElStatistic } from "./Statistic";
 export { Table as ElTable, TableColumn as ElTableColumn } from "./Table";
+export { Tour as ElTour, TourStep as ElTourStep } from "./Tour";
+export { AutoResizer as ElAutoResizer, TableV2 as ElTableV2 } from "./TableV2";
 export { Tag as ElTag } from "./Tag";
 export { TimeLine as ElTimeLine, TimeLineItem as ElTimeLineItem } from "./TimeLine";
 export { Tree as ElTree } from "./Tree";
@@ -51,11 +56,16 @@ export { TreeSelect as ElTreeSelect } from "./TreeSelect";
 // export type { ListProps, ListRef, ScrollTo } from './VirtualList';
 
 /* Navigation 导航 */
+export { Affix as ElAffix } from "./Affix";
+export { Anchor as ElAnchor, AnchorLink as ElAnchorLink } from "./Anchor";
+export { Backtop as ElBacktop } from "./Backtop";
 export { Breadcrumb as ElBreadcrumb, BreadcrumbItem as ElBreadcrumbItem } from "./Breadcrumb";
+export { Step as ElStep, Steps as ElSteps } from "./Steps";
 export { Dropdown as ElDropdown, DropdownItem as ElDropdownItem, DropdownMenu as ElDropdownMenu } from "./Dropdown";
 export { Menu as ElMenu, MenuItem as ElMenuItem, MenuItemGroup as ElMenuItemGroup, SubMenu as ElSubMenu } from "./Menu";
 export { TabPane as ElTabPane, Tabs as ElTabs } from "./Tabs";
 export { Empty as ElEmpty } from "./Empty";
+export { PageHeader as ElPageHeader } from "./PageHeader";
 export { Skeleton as ElSkeleton, SkeletonItem as ElSkeletonItem } from "./Skeleton";
 /* Feedback 反馈组件 */
 export { Alert as ElAlert } from "./Alert";
@@ -70,9 +80,10 @@ export { Popconfirm as ElPopconfirm } from "./Popconfirm";
 export { Popover as ElPopover } from "./Popover";
 /* Others 其他 */
 export { Divider as ElDivider } from "./Divider";
+export { Watermark as ElWatermark } from "./Watermark";
 /* 工具库与hooks */
-export { PopupManager, download, genFileId, generateTree, getScrollWidth, isEmpty, isNotEmpty, randomCode } from "./Util";
 export { htmlInputAttrs, htmlInputEvents, htmlInputProps, partitionAnimationProps, partitionHTMLProps, partitionPopperPropsUtils, partitionTreePropsUtils, prefix, useChildrenInstance, useClassNames, useClickOutside, useComponentWillMount, useConfigProvider, useControlled, useDisabled, useForceUpdate, useSize } from "./hooks";
+export { PopupManager, download, genFileId, generateTree, getScrollWidth, isEmpty, isNotEmpty, randomCode } from "./Util";
 
 /* 通用types */
 

package/dist/locale/en.d.ts

@@ -171,7 +171,10 @@ declare const _default: {
         transfer: {
             noMatch: string;
             noData: string;
-            titles: string[];
+            titles: {
+                0: string;
+                1: string;
+            };
             filterPlaceholder: string;
             noCheckedFormat: string;
             hasCheckedFormat: string;

package/dist/locale/en.js

@@ -171,7 +171,10 @@ export default {
     transfer: {
       noMatch: 'No matching data',
       noData: 'No data',
-      titles: ['List 1', 'List 2'],
+      titles: {
+        0: 'List 1',
+        1: 'List 2'
+      },
       filterPlaceholder: 'Enter keyword',
       noCheckedFormat: '{total} items',
       hasCheckedFormat: '{checked}/{total} checked'

package/dist/locale/zhCn.d.ts

@@ -170,7 +170,10 @@ declare const _default: {
         transfer: {
             noMatch: string;
             noData: string;
-            titles: string[];
+            titles: {
+                0: string;
+                1: string;
+            };
             filterPlaceholder: string;
             noCheckedFormat: string;
             hasCheckedFormat: string;

package/dist/locale/zhCn.js

@@ -170,7 +170,10 @@ export default {
     transfer: {
       noMatch: '无匹配数据',
       noData: '无数据',
-      titles: ['列表 1', '列表 2'],
+      titles: {
+        0: '列表 1',
+        1: '列表 2'
+      },
       filterPlaceholder: '请输入搜索内容',
       noCheckedFormat: '共 {total} 项',
       hasCheckedFormat: '已选 {checked}/{total} 项'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qsxy/element-plus-react",
-  "version": "1.0.3",
+  "version": "2.0.0",
   "description": "element-plus-react",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -18,11 +18,12 @@
   ],
   "peerDependencies": {
     "react": ">=18.0.0",
-    "react-router-dom": ">=6.22.1",
-    "react-dom": ">=18.0.0"
+    "react-dom": ">=18.0.0",
+    "react-router-dom": ">=6.22.1"
   },
   "dependencies": {
     "@ctrl/tinycolor": "^4.1.0",
+    "@floating-ui/dom": "^1.7.6",
     "@popperjs/core": "^2.11.8",
     "ahooks": "^3.7.10",
     "async-validator": "^4.2.5",
@@ -32,6 +33,7 @@
     "escape-html": "^1.0.3",
     "i18next": "^25.2.1",
     "lodash": "^4.17.21",
+    "memoize-one": "^6.0.0",
     "rc-resize-observer": "^1.4.0",
     "rc-util": "^5.38.1",
     "rc-virtual-list": "3.18.5",

package/theme-chalk/affix.scss

@@ -0,0 +1,7 @@
+@use 'mixins/mixins' as *;
+
+@include b(affix) {
+  @include m(fixed) {
+    position: fixed;
+  }
+}

package/theme-chalk/alert.scss

@@ -1,115 +1,115 @@
-@use 'mixins/mixins' as *;
-@use 'mixins/var' as *;
-@use 'common/var' as *;
-
-@include b(alert) {
-  @include set-component-css-var('alert', $alert);
-
-  width: 100%;
-  padding: getCssVar('alert', 'padding');
-  margin: 0;
-  box-sizing: border-box;
-  border-radius: getCssVar('alert', 'border-radius-base');
-  position: relative;
-  background-color: getCssVar('color', 'white');
-  overflow: hidden;
-  opacity: 1;
-  display: flex;
-  align-items: center;
-  transition: opacity getCssVar('transition-duration', 'fast');
-
-  @include when(light) {
-    .#{$namespace}-alert__close-btn {
-      color: getCssVar('text-color', 'placeholder');
-    }
-  }
-
-  @include when(dark) {
-    .#{$namespace}-alert__close-btn {
-      color: getCssVar('color', 'white');
-    }
-    .#{$namespace}-alert__description {
-      color: getCssVar('color', 'white');
-    }
-  }
-
-  @include when(center) {
-    justify-content: center;
-  }
-
-  @each $type in (primary, success, info, warning, error) {
-    @include m($type) {
-      @include css-var-from-global(
-        ('alert', 'bg-color'),
-        ('color', $type, 'light-9')
-      );
-
-      &.is-light {
-        background-color: getCssVar('alert', 'bg-color');
-        color: getCssVar('color', $type);
-
-        .#{$namespace}-alert__description {
-          color: getCssVar('color', $type);
-        }
-      }
-
-      &.is-dark {
-        background-color: getCssVar('color', $type);
-        color: getCssVar('color', 'white');
-      }
-    }
-  }
-
-  @include e(content) {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-
-  & .#{$namespace}-alert__icon {
-    font-size: getCssVar('alert', 'icon-size');
-    width: getCssVar('alert', 'icon-size');
-    margin-right: 8px;
-
-    @include when(big) {
-      font-size: getCssVar('alert', 'icon-large-size');
-      width: getCssVar('alert', 'icon-large-size');
-      margin-right: 12px;
-    }
-  }
-
-  @include e(title) {
-    font-size: getCssVar('alert', 'title-font-size');
-    line-height: 24px;
-
-    &.with-description {
-      font-size: getCssVar('alert', 'title-with-description-font-size');
-    }
-  }
-
-  & .#{$namespace}-alert__description {
-    font-size: getCssVar('alert', 'description-font-size');
-    margin: 0;
-  }
-
-  & .#{$namespace}-alert__close-btn {
-    font-size: getCssVar('alert', 'close-font-size');
-    opacity: 1;
-    position: absolute;
-    top: 12px;
-    right: 16px;
-    cursor: pointer;
-
-    @include when(customed) {
-      font-style: normal;
-      font-size: getCssVar('alert', 'close-customed-font-size');
-      line-height: 24px;
-      top: 8px;
-    }
-  }
-}
-
-.#{$namespace}-alert-fade-enter-from,
-.#{$namespace}-alert-fade-leave-active {
-  opacity: 0;
-}
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(alert) {
+  @include set-component-css-var('alert', $alert);
+
+  width: 100%;
+  padding: getCssVar('alert', 'padding');
+  margin: 0;
+  box-sizing: border-box;
+  border-radius: getCssVar('alert', 'border-radius-base');
+  position: relative;
+  background-color: getCssVar('color', 'white');
+  overflow: hidden;
+  opacity: 1;
+  display: flex;
+  align-items: center;
+  transition: opacity getCssVar('transition-duration', 'fast');
+
+  @include when(light) {
+    .#{$namespace}-alert__close-btn {
+      color: getCssVar('text-color', 'placeholder');
+    }
+  }
+
+  @include when(dark) {
+    .#{$namespace}-alert__close-btn {
+      color: getCssVar('color', 'white');
+    }
+    .#{$namespace}-alert__description {
+      color: getCssVar('color', 'white');
+    }
+  }
+
+  @include when(center) {
+    justify-content: center;
+  }
+
+  @each $type in (primary, success, info, warning, error) {
+    @include m($type) {
+      @include css-var-from-global(
+        ('alert', 'bg-color'),
+        ('color', $type, 'light-9')
+      );
+
+      &.is-light {
+        background-color: getCssVar('alert', 'bg-color');
+        color: getCssVar('color', $type);
+
+        .#{$namespace}-alert__description {
+          color: getCssVar('color', $type);
+        }
+      }
+
+      &.is-dark {
+        background-color: getCssVar('color', $type);
+        color: getCssVar('color', 'white');
+      }
+    }
+  }
+
+  @include e(content) {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  & .#{$namespace}-alert__icon {
+    font-size: getCssVar('alert', 'icon-size');
+    width: getCssVar('alert', 'icon-size');
+    margin-right: 8px;
+
+    @include when(big) {
+      font-size: getCssVar('alert', 'icon-large-size');
+      width: getCssVar('alert', 'icon-large-size');
+      margin-right: 12px;
+    }
+  }
+
+  @include e(title) {
+    font-size: getCssVar('alert', 'title-font-size');
+    line-height: 24px;
+
+    &.with-description {
+      font-size: getCssVar('alert', 'title-with-description-font-size');
+    }
+  }
+
+  & .#{$namespace}-alert__description {
+    font-size: getCssVar('alert', 'description-font-size');
+    margin: 0;
+  }
+
+  & .#{$namespace}-alert__close-btn {
+    font-size: getCssVar('alert', 'close-font-size');
+    opacity: 1;
+    position: absolute;
+    top: 12px;
+    right: 16px;
+    cursor: pointer;
+
+    @include when(customed) {
+      font-style: normal;
+      font-size: getCssVar('alert', 'close-customed-font-size');
+      line-height: 24px;
+      top: 8px;
+    }
+  }
+}
+
+.#{$namespace}-alert-fade-enter-from,
+.#{$namespace}-alert-fade-leave-active {
+  opacity: 0;
+}

package/theme-chalk/anchor-link.scss

@@ -0,0 +1,45 @@
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(anchor) {
+  @include e(item) {
+    display: flex;
+    flex-direction: column;
+  }
+
+  @include e(link) {
+    font-size: getCssVar('anchor-font-size');
+    line-height: getCssVar('anchor-line-height');
+    padding: 4px 0;
+    color: getCssVar('anchor-color');
+    transition: color getCssVar('transition-duration');
+    white-space: nowrap;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 100%;
+    outline: none;
+    cursor: pointer;
+
+    &:hover,
+    &:focus {
+      color: getCssVar('hover-color');
+    }
+
+    &:focus-visible {
+      border-radius: getCssVar('border-radius', 'base');
+      outline: 2px solid getCssVar('color-primary');
+    }
+
+    @include when(active) {
+      color: getCssVar('anchor-active-color');
+    }
+  }
+
+  & .#{$namespace}-anchor__list .#{$namespace}-anchor__item a {
+    display: inline-block;
+  }
+}

package/theme-chalk/anchor.scss

@@ -0,0 +1,93 @@
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(anchor) {
+  @include set-component-css-var('anchor', $anchor);
+
+  position: relative;
+  background-color: getCssVar('anchor-bg-color');
+
+  @include e(marker) {
+    position: absolute;
+    background-color: getCssVar('anchor-marker-bg-color');
+    border-radius: 4px;
+    opacity: 0;
+    z-index: 0;
+  }
+
+  &.#{$namespace}-anchor--vertical {
+    @include e(marker) {
+      width: 4px;
+      height: 14px;
+      top: 8px;
+      left: 0;
+      transition:
+        top 0.25s ease-in-out,
+        opacity 0.25s;
+    }
+
+    @include e(list) {
+      padding-left: getCssVar('anchor-padding-indent');
+    }
+
+    &.#{$namespace}-anchor--underline {
+      &::before {
+        position: absolute;
+        left: 0;
+        width: 2px;
+        height: 100%;
+        background-color: rgba(5, 5, 5, 0.06);
+        content: '';
+      }
+
+      @include e(marker) {
+        width: 2px;
+        border-radius: unset;
+      }
+    }
+  }
+
+  &.#{$namespace}-anchor--horizontal {
+    @include e(marker) {
+      height: 2px;
+      width: 20px;
+      bottom: 0;
+      transition:
+        left 0.25s ease-in-out,
+        opacity 0.25s,
+        width 0.25s;
+    }
+
+    @include e(list) {
+      display: flex;
+      padding-bottom: 4px;
+
+      @include e(item) {
+        padding-left: 16px;
+
+        &:first-child {
+          padding-left: 0;
+        }
+      }
+    }
+
+    &.#{$namespace}-anchor--underline {
+      &::before {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 2px;
+        background-color: rgba(5, 5, 5, 0.06);
+        content: '';
+      }
+
+      @include e(marker) {
+        height: 2px;
+        border-radius: unset;
+      }
+    }
+  }
+}