one-design-next 0.0.4-alpha.100

package/dist/dialog/useModalPosition.js

@@ -0,0 +1,34 @@
+import { useEffect, useRef, useLayoutEffect } from 'react';
+export default function useModalPosition(_ref) {
+  var visible = _ref.visible,
+    modalContentRef = _ref.modalContentRef,
+    enabled = _ref.enabled;
+  var mousePosRef = useRef(null);
+  var getClickPosition = function getClickPosition(e) {
+    if (!enabled) return;
+    mousePosRef.current = {
+      x: e.clientX,
+      y: e.clientY
+    };
+    setTimeout(function () {
+      mousePosRef.current = null;
+    }, 100);
+  };
+  useLayoutEffect(function () {
+    if (!enabled) return;
+    window.addEventListener('click', getClickPosition, true);
+    return function () {
+      window.removeEventListener('click', getClickPosition, true);
+    };
+  }, [enabled]);
+  useEffect(function () {
+    if (!enabled) return;
+    setTimeout(function () {
+      if (!visible) return;
+      // 动画渲染初始位置
+      if (mousePosRef.current && modalContentRef.current) {
+        modalContentRef.current.style.transformOrigin = "".concat(mousePosRef.current.x - modalContentRef.current.offsetLeft, "px ").concat(mousePosRef.current.y - modalContentRef.current.offsetTop, "px");
+      }
+    }, 0);
+  }, [visible, modalContentRef, enabled]);
+}

package/dist/drawer/index.d.ts

@@ -0,0 +1,92 @@
+import React from 'react';
+import './style';
+export interface DrawerProps {
+    children?: React.ReactNode;
+    /**
+     * @description 包裹层类名
+     */
+    className?: string;
+    /**
+     * @description 挂载容器
+     */
+    container?: HTMLElement;
+    /**
+     * @description 是否启用层级提升
+     */
+    elevated?: boolean;
+    /**
+     * @description 是否显示遮罩
+     * @default true
+     */
+    maskVisible?: boolean;
+    /**
+     * @description 是否支持点击遮罩关闭
+     * @default true
+     */
+    maskClosable?: boolean;
+    /**
+     * @description 遮罩样式
+     */
+    maskStyle?: React.CSSProperties;
+    /**
+     * @description 遮罩类名
+     */
+    maskClassName?: string;
+    /**
+     * @description 回调
+     */
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * @description 内边距
+     * @default 0
+     */
+    padding?: number;
+    /**
+     * @description 位置
+     * @default 'right'
+     */
+    placement?: 'top' | 'left' | 'right' | 'bottom';
+    /**
+     * @description 样式
+     */
+    style?: React.CSSProperties;
+    /**
+     * @description 是否显示
+     */
+    visible?: boolean;
+    /**
+     * @description 层级
+     */
+    zIndex?: number | string;
+    /**
+     * @description 步骤
+     */
+    steps?: React.ReactNode[];
+    /**
+     * @description 当前步骤
+     */
+    step?: number;
+    /**
+     * @description 步骤过渡类型
+     * @default 'slide'
+     */
+    stepTransitionType?: 'slide' | 'fade';
+    /**
+     * @description 标题
+     */
+    title?: React.ReactNode;
+    /**
+     * @description 描述
+     */
+    desc?: React.ReactNode;
+    /**
+     * @description 是否显示关闭按钮
+     */
+    closable?: boolean;
+    /**
+     * @description 关闭按钮位置
+     */
+    closePlacement?: 'start' | 'end';
+}
+declare const Drawer: React.FC<DrawerProps>;
+export default Drawer;

package/dist/drawer/index.js

@@ -0,0 +1,214 @@
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { useEffect, useRef } from 'react';
+import Icon from "../icon";
+import { ModalClose, ModalContent, ModalDescription, ModalHeader, ModalOverlay, ModalPortal, ModalRoot, ModalTitle } from "../modal-base";
+import "./style";
+var defaultProps = {
+  visible: undefined,
+  onVisibleChange: undefined,
+  placement: 'right',
+  padding: 0,
+  elevated: false,
+  maskVisible: true,
+  maskClosable: true,
+  maskStyle: undefined,
+  maskClassName: undefined,
+  steps: undefined,
+  step: undefined,
+  stepTransitionType: 'slide',
+  closable: false,
+  closePlacement: 'start'
+};
+var Drawer = function Drawer(_ref) {
+  var _ref$visible = _ref.visible,
+    visible = _ref$visible === void 0 ? defaultProps.visible : _ref$visible,
+    _ref$onVisibleChange = _ref.onVisibleChange,
+    onVisibleChange = _ref$onVisibleChange === void 0 ? defaultProps.onVisibleChange : _ref$onVisibleChange,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? defaultProps.placement : _ref$placement,
+    _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? defaultProps.padding : _ref$padding,
+    _ref$elevated = _ref.elevated,
+    elevated = _ref$elevated === void 0 ? defaultProps.elevated : _ref$elevated,
+    _ref$maskVisible = _ref.maskVisible,
+    maskVisible = _ref$maskVisible === void 0 ? defaultProps.maskVisible : _ref$maskVisible,
+    _ref$maskClosable = _ref.maskClosable,
+    maskClosable = _ref$maskClosable === void 0 ? defaultProps.maskClosable : _ref$maskClosable,
+    _ref$maskStyle = _ref.maskStyle,
+    maskStyle = _ref$maskStyle === void 0 ? defaultProps.maskStyle : _ref$maskStyle,
+    _ref$maskClassName = _ref.maskClassName,
+    maskClassName = _ref$maskClassName === void 0 ? defaultProps.maskClassName : _ref$maskClassName,
+    children = _ref.children,
+    _ref$steps = _ref.steps,
+    steps = _ref$steps === void 0 ? defaultProps.steps : _ref$steps,
+    _ref$step = _ref.step,
+    step = _ref$step === void 0 ? defaultProps.step : _ref$step,
+    _ref$stepTransitionTy = _ref.stepTransitionType,
+    stepTransitionType = _ref$stepTransitionTy === void 0 ? defaultProps.stepTransitionType : _ref$stepTransitionTy,
+    style = _ref.style,
+    className = _ref.className,
+    zIndex = _ref.zIndex,
+    container = _ref.container,
+    title = _ref.title,
+    desc = _ref.desc,
+    _ref$closable = _ref.closable,
+    closable = _ref$closable === void 0 ? defaultProps.closable : _ref$closable,
+    _ref$closePlacement = _ref.closePlacement,
+    closePlacement = _ref$closePlacement === void 0 ? defaultProps.closePlacement : _ref$closePlacement;
+  var paddingStylePack = {
+    borderRadius: padding
+  };
+  var stepsRef = useRef(null);
+  if (placement === 'top' || placement === 'bottom') {
+    paddingStylePack.left = padding;
+    paddingStylePack.right = padding;
+  } else {
+    paddingStylePack.top = padding;
+    paddingStylePack.bottom = padding;
+  }
+  if (placement === 'top') {
+    paddingStylePack.top = padding;
+  } else if (placement === 'bottom') {
+    paddingStylePack.bottom = padding;
+  } else if (placement === 'left') {
+    paddingStylePack.left = padding;
+  } else if (placement === 'right') {
+    paddingStylePack.right = padding;
+  }
+  var resetStyle = function resetStyle() {
+    var wrapper = document.querySelector('[data-odn-drawer-wrapper]');
+    if (wrapper) {
+      wrapper.style.backgroundColor = '';
+      wrapper.style.borderRadius = '';
+      wrapper.style.transform = '';
+    }
+    document.body.style.backgroundColor = '';
+  };
+  useEffect(function () {
+    var wrapper = document.querySelector('[data-odn-drawer-wrapper]');
+    if (!wrapper) {
+      return;
+    }
+    if (elevated) {
+      if (visible) {
+        document.body.style.backgroundColor = '#000';
+        var isVertical = placement === 'top' || placement === 'bottom';
+        var x = '0';
+        var y = '0';
+        var transformOrigin = '';
+        if (placement === 'top') {
+          y = '-14px';
+          transformOrigin = '50% 100%';
+        } else if (placement === 'bottom') {
+          y = '14px';
+          transformOrigin = '50% 0%';
+        } else if (placement === 'left') {
+          x = '-14px';
+          transformOrigin = '100% 50%';
+        } else if (placement === 'right') {
+          x = '14px';
+          transformOrigin = '0% 50%';
+        }
+        var scale = !isVertical ? (window.innerHeight - 26) / window.innerHeight : (window.innerWidth - 26) / window.innerWidth;
+        wrapper.style.backgroundColor = '#fff';
+        wrapper.style.borderRadius = '8px';
+        wrapper.style.transform = "scale(".concat(scale, ") translate3d(").concat(x, ", ").concat(y, ", 0)");
+        wrapper.style.transformOrigin = transformOrigin;
+        wrapper.style.transitionProperty = 'transform, border-radius';
+        wrapper.style.transitionDuration = '0.4s';
+        wrapper.style.transitionTimingFunction = 'cubic-bezier(0.32, 0.72, 0, 1)';
+      } else {
+        resetStyle();
+      }
+    } else {
+      resetStyle();
+    }
+  }, [elevated, visible]);
+  useEffect(function () {
+    return function () {
+      resetStyle();
+    };
+  }, []);
+  useEffect(function () {
+    setTimeout(function () {
+      if (stepsRef.current) {
+        var currentStepEl = stepsRef.current.querySelector("[data-odn-drawer-step][data-odn-drawer-step-index=\"".concat(step, "\"]"));
+        if (currentStepEl) {
+          stepsRef.current.style.height = "".concat(currentStepEl.clientHeight, "px");
+        }
+      }
+    }, 0);
+  }, [steps, step]);
+  var drawerStyle = _objectSpread(_objectSpread({
+    zIndex: zIndex ? Number(zIndex) : undefined
+  }, style), elevated ? {} : paddingStylePack);
+  var handlePointerDownOutside = function handlePointerDownOutside(event) {
+    if (!maskVisible || !maskClosable) {
+      event.preventDefault();
+    }
+  };
+  return /*#__PURE__*/React.createElement(ModalRoot, {
+    open: visible,
+    onOpenChange: onVisibleChange
+  }, /*#__PURE__*/React.createElement(ModalPortal, {
+    container: container
+  }, maskVisible && /*#__PURE__*/React.createElement(ModalOverlay, {
+    visible: visible,
+    "data-odn-modal-overlay": "drawer",
+    style: maskStyle,
+    className: maskClassName
+  }), /*#__PURE__*/React.createElement(ModalContent, {
+    "data-odn-drawer-content": true,
+    "data-odn-drawer-placement": placement,
+    "data-odn-drawer-wrapper": true,
+    style: drawerStyle,
+    className: className,
+    onPointerDownOutside: handlePointerDownOutside,
+    onOpenAutoFocus: function onOpenAutoFocus(e) {
+      e.preventDefault();
+    }
+  }, !title && /*#__PURE__*/React.createElement(ModalTitle, {
+    "data-odn-visually-hidden": true
+  }, "Drawer"), !desc && /*#__PURE__*/React.createElement(ModalDescription, {
+    "data-odn-visually-hidden": true
+  }, "Drawer content"), (!!title || !!desc || closable) && /*#__PURE__*/React.createElement(ModalHeader, {
+    "data-odn-drawer-header": true,
+    "data-odn-drawer-header-close-placement": closePlacement
+  }, closable && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ModalClose, {
+    asChild: true
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "cancel",
+    size: 24,
+    "data-odn-drawer-close-button": true
+  })), /*#__PURE__*/React.createElement("div", {
+    "data-odn-drawer-header-divider": true
+  })), (!!title || !!desc) && /*#__PURE__*/React.createElement("div", {
+    "data-odn-drawer-header-content": true
+  }, !!title && /*#__PURE__*/React.createElement(ModalTitle, {
+    "data-odn-drawer-title": true
+  }, title), !!desc && /*#__PURE__*/React.createElement(ModalDescription, {
+    "data-odn-drawer-description": true
+  }, desc))), steps ? /*#__PURE__*/React.createElement("div", {
+    "data-odn-drawer-steps": true,
+    "data-odn-drawer-step-transition-type": stepTransitionType,
+    ref: stepsRef
+  }, steps.map(function (currentStep, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      "data-odn-drawer-step": true,
+      "data-odn-drawer-step-index": index,
+      "data-odn-drawer-step-active": step === index,
+      "data-odn-drawer-step-prev": step !== undefined && step < index,
+      "data-odn-drawer-step-next": step !== undefined && step > index,
+      "data-odn-drawer-step-transition-type": stepTransitionType
+    }, currentStep);
+  })) : children)));
+};
+export default Drawer;

package/dist/drawer/style/index.css

@@ -0,0 +1,244 @@
+html {
+  --odn-drawer-overlay-background: rgba(0, 0, 0, 0.45);
+  --odn-drawer-header-padding-inline: 20px;
+  --odn-drawer-header-height: 64px;
+  --odn-drawer-header-border: 1px solid var(--odn-color-black-4);
+}
+
+@layer components {
+  [data-odn-drawer-header] {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 0 var(--odn-drawer-header-padding-inline);
+    height: var(--odn-drawer-header-height);
+    border-bottom: var(--odn-drawer-header-border);
+  }
+  [data-odn-drawer-header-close-placement=end] {
+    flex-direction: row-reverse;
+  }
+  [data-odn-drawer-header-content] {
+    flex: 1;
+  }
+  [data-odn-drawer-title] {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 600;
+    color: var(--odn-color-black-12);
+  }
+  [data-odn-drawer-description] {
+    font-size: 13px;
+    line-height: 22px;
+    color: var(--odn-color-black-10);
+  }
+  [data-odn-drawer-header-divider] {
+    flex: none;
+    width: 1px;
+    height: 16px;
+    background-color: var(--odn-color-black-3);
+  }
+  [data-odn-drawer-close-button] {
+    flex: none;
+    width: 24px;
+    height: 24px;
+    fill: var(--odn-color-black-11);
+    cursor: pointer;
+  }
+  [data-odn-drawer-close-button]:hover {
+    fill: var(--odn-color-black-12);
+  }
+  [data-odn-modal-overlay=drawer] {
+    position: fixed;
+    inset: 0;
+    z-index: var(--odn-z-index-modal);
+    background: var(--odn-drawer-overlay-background);
+    overflow: hidden !important;
+  }
+  [data-odn-drawer-content] {
+    position: fixed;
+    z-index: var(--odn-z-index-modal);
+    display: flex;
+    flex-direction: column;
+    background-color: #fff;
+    pointer-events: initial;
+    overflow: auto;
+  }
+  [data-odn-drawer-content][data-odn-drawer-placement=left],
+  [data-odn-drawer-content][data-odn-drawer-placement=right] {
+    top: 0;
+    bottom: 0;
+    min-width: 200px;
+  }
+  [data-odn-drawer-content][data-odn-drawer-placement=left] {
+    left: 0;
+  }
+  [data-odn-drawer-content][data-odn-drawer-placement=right] {
+    right: 0;
+  }
+  [data-odn-drawer-content][data-odn-drawer-placement=top],
+  [data-odn-drawer-content][data-odn-drawer-placement=bottom] {
+    left: 0;
+    right: 0;
+    min-height: 280px;
+  }
+  [data-odn-drawer-content][data-odn-drawer-placement=top] {
+    top: 0;
+  }
+  [data-odn-drawer-content][data-odn-drawer-placement=bottom] {
+    bottom: 0;
+  }
+  [data-odn-modal-overlay=drawer][data-state=open] {
+    animation: overlayFadeIn 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
+  }
+  [data-odn-modal-overlay=drawer][data-state=closed] {
+    animation: overlayFadeOut 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
+  }
+  @keyframes overlayFadeIn {
+    from {
+      background: rgba(0, 0, 0, 0);
+    }
+    to {
+      background: var(--odn-drawer-overlay-background);
+    }
+  }
+  @keyframes overlayFadeOut {
+    from {
+      background: var(--odn-drawer-overlay-background);
+    }
+    to {
+      background: rgba(0, 0, 0, 0);
+    }
+  }
+  /* Drawer content animations */
+  [data-odn-drawer-content][data-state=open] {
+    animation: drawerContentIn 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
+  }
+  [data-odn-drawer-content][data-state=closed] {
+    animation: drawerContentOut 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
+  }
+  /* Right placement animations */
+  @keyframes drawerContentIn {
+    from {
+      transform: translate3d(100%, 0, 0);
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+  @keyframes drawerContentOut {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      transform: translate3d(100%, 0, 0);
+    }
+  }
+  /* Left placement animations */
+  [data-odn-drawer-content][data-odn-drawer-placement=left][data-state=open] {
+    animation: drawerContentInLeft 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
+  }
+  [data-odn-drawer-content][data-odn-drawer-placement=left][data-state=closed] {
+    animation: drawerContentOutLeft 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
+  }
+  @keyframes drawerContentInLeft {
+    from {
+      transform: translate3d(-100%, 0, 0);
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+  @keyframes drawerContentOutLeft {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      transform: translate3d(-100%, 0, 0);
+    }
+  }
+  /* Top placement animations */
+  [data-odn-drawer-content][data-odn-drawer-placement=top][data-state=open] {
+    animation: drawerContentInTop 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
+  }
+  [data-odn-drawer-content][data-odn-drawer-placement=top][data-state=closed] {
+    animation: drawerContentOutTop 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
+  }
+  @keyframes drawerContentInTop {
+    from {
+      transform: translate3d(0, -100%, 0);
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+  @keyframes drawerContentOutTop {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      transform: translate3d(0, -100%, 0);
+    }
+  }
+  /* Bottom placement animations */
+  [data-odn-drawer-content][data-odn-drawer-placement=bottom][data-state=open] {
+    animation: drawerContentInBottom 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
+  }
+  [data-odn-drawer-content][data-odn-drawer-placement=bottom][data-state=closed] {
+    animation: drawerContentOutBottom 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
+  }
+  @keyframes drawerContentInBottom {
+    from {
+      transform: translate3d(0, 100%, 0);
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+  @keyframes drawerContentOutBottom {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      transform: translate3d(0, 100%, 0);
+    }
+  }
+  [data-odn-drawer-steps] {
+    position: relative;
+    overflow: hidden;
+    transition: height 0.3s cubic-bezier(0.32, 0.72, 0, 1);
+  }
+  [data-odn-drawer-step] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: auto;
+  }
+  [data-odn-drawer-steps][data-odn-drawer-step-transition-type=fade],
+  [data-odn-drawer-step][data-odn-drawer-step-transition-type=fade] {
+    transition: all 0.3s cubic-bezier(0.32, 0.72, 0, 1);
+  }
+  [data-odn-drawer-steps][data-odn-drawer-step-transition-type=slide],
+  [data-odn-drawer-step][data-odn-drawer-step-transition-type=slide] {
+    transition: all 0.8s cubic-bezier(0.32, 0.72, 0, 1);
+  }
+  [data-odn-drawer-step][data-odn-drawer-step-transition-type=fade][data-odn-drawer-step-prev=true],
+  [data-odn-drawer-step][data-odn-drawer-step-transition-type=fade][data-odn-drawer-step-next=true] {
+    opacity: 0;
+  }
+  [data-odn-drawer-step][data-odn-drawer-step-transition-type=fade][data-odn-drawer-step-active=true] {
+    opacity: 1;
+  }
+  [data-odn-drawer-step][data-odn-drawer-step-transition-type=slide][data-odn-drawer-step-prev=true] {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+  [data-odn-drawer-step][data-odn-drawer-step-transition-type=slide][data-odn-drawer-step-next=true] {
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+  [data-odn-drawer-step][data-odn-drawer-step-transition-type=slide][data-odn-drawer-step-active=true] {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}

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

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

package/dist/drawer/style/index.js

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

package/dist/dropdown/index.d.ts

@@ -0,0 +1,91 @@
+/**
+ * 多选的设计稿来源于互选需求：https://www.figma.com/design/DBgqcGDjdPnr7XObtGY7ES/%F0%9F%94%B5%E3%80%90%E5%B9%BF%E5%91%8A%E4%B8%BB%E4%BE%A7%E3%80%91%E4%BA%92%E9%80%89%E5%B9%B3%E5%8F%B0---%E4%BD%93%E9%AA%8C%E5%8D%87%E7%BA%A7%E4%B8%93%E9%A1%B9?node-id=461-72709&t=r6iaLWzcmAk5VXR6-4
+ */
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import * as React from 'react';
+import './style';
+declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): React.JSX.Element;
+declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): React.JSX.Element;
+declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    sideOffset?: number | undefined;
+    matchWidth?: boolean | undefined;
+    zIndex?: string | number | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): React.JSX.Element;
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean | undefined;
+    variant?: "default" | "destructive" | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+declare function DropdownMenuCheckboxItem({ children, checked, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): React.JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): React.JSX.Element;
+declare function DropdownMenuRadioItem({ children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): React.JSX.Element;
+declare function DropdownMenuLabel({ inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSeparator({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): React.JSX.Element;
+declare function DropdownMenuShortcut({ ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+declare function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): React.JSX.Element;
+declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type DropdownMenuItemType = 'item' | 'label' | 'separator' | 'group';
+export interface BaseDropdownMenuItemData {
+    disabled?: boolean;
+}
+export interface DropdownMenuItemConfig extends BaseDropdownMenuItemData {
+    type?: 'item';
+    value: string;
+    label: React.ReactNode;
+    shortcut?: string;
+    icon?: string;
+    children?: DropdownMenuItemData[];
+}
+export interface DropdownMenuLabelConfig extends BaseDropdownMenuItemData {
+    type: 'label';
+    label: React.ReactNode;
+}
+export interface DropdownMenuSeparatorConfig extends BaseDropdownMenuItemData {
+    type: 'separator';
+}
+export interface DropdownMenuGroupConfig extends BaseDropdownMenuItemData {
+    type: 'group';
+    children: DropdownMenuItemData[];
+}
+export type DropdownMenuItemData = DropdownMenuItemConfig | DropdownMenuLabelConfig | DropdownMenuSeparatorConfig | DropdownMenuGroupConfig;
+export interface BaseDropdownProps {
+    menu?: DropdownMenuItemData[];
+    children: React.ReactNode;
+    placement?: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+    visible?: boolean;
+    onVisibleChange?: (visible: boolean) => void;
+    trigger?: 'click' | 'hover' | 'contextMenu';
+    disabled?: boolean;
+    allowSelectAll?: boolean;
+    matchWidth?: boolean;
+    /**
+     * @description z-index
+     */
+    zIndex?: number | string;
+}
+export interface DropdownRadioProps extends BaseDropdownProps {
+    selectable: true;
+    multiple?: false;
+    value?: string;
+    onSelect?: (value: string) => void;
+}
+export interface DropdownCheckboxProps extends BaseDropdownProps {
+    selectable: true;
+    multiple: true;
+    value?: string[];
+    onSelect?: (values: string[]) => void;
+}
+export interface DropdownNormalProps extends BaseDropdownProps {
+    selectable?: false;
+    onSelect?: (value: string) => void;
+}
+export type DropdownProps = DropdownRadioProps | DropdownCheckboxProps | DropdownNormalProps;
+declare const Dropdown: React.FC<DropdownProps>;
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, };
+export default Dropdown;