@hanwenbo/x-taro-ui 0.0.1

package/lib/components/dropdown/dropdown.js

@@ -0,0 +1,588 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dropdown/dropdown.tsx
+var dropdown_exports = {};
+__export(dropdown_exports, {
+  Dropdown: () => Dropdown,
+  default: () => dropdown_default
+});
+module.exports = __toCommonJS(dropdown_exports);
+var import_react = __toESM(require("react"));
+var import_components = require("@tarojs/components");
+var import_miniapp = require("../../adapters/miniapp");
+var import_theme = require("../../theme");
+var import_utils = require("../../utils");
+var import_iconSlot = require("../../utils/iconSlot");
+var import_configProvider = require("../configProvider");
+var import_icon = require("../icon");
+var import_portal = require("../portal");
+var VIEWPORT_PADDING = 12;
+var DROPDOWN_OFFSET = 2;
+var EMPTY_ITEMS = [];
+var sizeMap = {
+  mini: {
+    minWidth: 100,
+    panelPadding: 2,
+    itemPaddingX: 8,
+    itemPaddingY: 4,
+    fontSize: 12,
+    iconSize: 14,
+    gap: 4
+  },
+  small: {
+    minWidth: 120,
+    panelPadding: 4,
+    itemPaddingX: 12,
+    itemPaddingY: 6,
+    fontSize: 14,
+    iconSize: 16,
+    gap: 6
+  },
+  middle: {
+    minWidth: 140,
+    panelPadding: 6,
+    itemPaddingX: 16,
+    itemPaddingY: 8,
+    fontSize: 14,
+    iconSize: 16,
+    gap: 8
+  },
+  large: {
+    minWidth: 160,
+    panelPadding: 8,
+    itemPaddingX: 20,
+    itemPaddingY: 10,
+    fontSize: 16,
+    iconSize: 20,
+    gap: 10
+  }
+};
+function normalizePlacement(placement) {
+  const aliases = {
+    "top-left": "topLeft",
+    "top-right": "topRight",
+    "bottom-left": "bottomLeft",
+    "bottom-right": "bottomRight"
+  };
+  return placement in aliases ? aliases[placement] : placement;
+}
+function renderNode(node, style) {
+  if (typeof node === "string" || typeof node === "number") {
+    return /* @__PURE__ */ import_react.default.createElement(import_components.Text, { style }, node);
+  }
+  return node;
+}
+function nodeText(node) {
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(nodeText).join("");
+  if (import_react.default.isValidElement(node)) {
+    return nodeText(node.props.children);
+  }
+  return "";
+}
+function getPanelColors(variant, colors) {
+  if (variant === "ghost") {
+    return {
+      background: "transparent",
+      border: "transparent",
+      borderWidth: 0,
+      shadow: "none"
+    };
+  }
+  if (variant === "outline") {
+    return {
+      background: colors.background,
+      border: colors.border,
+      borderWidth: 2,
+      shadow: "var(--x-shadow-lg)"
+    };
+  }
+  return {
+    background: variant === "filled" ? colors.muted : colors.popover,
+    border: variant === "filled" ? colors.muted : colors.border,
+    borderWidth: 1,
+    shadow: "var(--x-shadow-lg)"
+  };
+}
+var Dropdown = (props) => {
+  var _a, _b;
+  const {
+    menu,
+    trigger = "click",
+    placement: placementProp = "bottomLeft",
+    disabled: disabledProp = false,
+    dropdownStyle,
+    dropdownClassName,
+    children,
+    size: sizeProp,
+    variant = "default",
+    items,
+    selectedKey,
+    defaultSelectedKey,
+    title,
+    placeholder = "请选择操作",
+    triggerText,
+    emptyText = "暂无可选项",
+    fullWidth = false,
+    closeOnSelect = true,
+    showArrow = true,
+    showCheckIcon = true,
+    onSelect,
+    onOpenChange,
+    className,
+    style
+  } = props;
+  const config = (0, import_configProvider.useConfigProvider)();
+  const { colors, radius } = (0, import_theme.useTokens)();
+  const size = sizeProp ?? config.size;
+  const disabled = Boolean(disabledProp || config.disabled);
+  const metrics = sizeMap[size];
+  const placement = normalizePlacement(placementProp);
+  const resolvedItems = (menu == null ? void 0 : menu.items) ?? items ?? EMPTY_ITEMS;
+  const controlledSelectedKeys = (menu == null ? void 0 : menu.selectedKeys) ?? (selectedKey !== void 0 ? [selectedKey] : void 0);
+  const defaultSelectedKeys = (menu == null ? void 0 : menu.defaultSelectedKeys) ?? (defaultSelectedKey !== void 0 ? [defaultSelectedKey] : []);
+  const [internalSelectedKeys, setInternalSelectedKeys] = (0, import_react.useState)(defaultSelectedKeys);
+  const selectedKeys = controlledSelectedKeys ?? internalSelectedKeys;
+  const [open, setOpenState] = (0, import_react.useState)(false);
+  const [activeKey, setActiveKey] = (0, import_react.useState)();
+  const [position, setPosition] = (0, import_react.useState)(null);
+  const closeTimer = (0, import_react.useRef)();
+  const reactId = (0, import_react.useId)();
+  const safeId = (0, import_react.useMemo)(() => reactId.replace(/[^a-zA-Z0-9_-]/g, ""), [reactId]);
+  const triggerId = `${config.prefixCls}-dropdown-trigger-${safeId}`;
+  const panelId = `${config.prefixCls}-dropdown-panel-${safeId}`;
+  const hasCustomTrigger = children !== void 0 && children !== null;
+  const currentSelectedItem = resolvedItems.find((item) => selectedKeys.includes(item.key));
+  const panelColors = getPanelColors(variant, colors);
+  (0, import_react.useEffect)(() => {
+    if (controlledSelectedKeys !== void 0) return;
+    setInternalSelectedKeys(defaultSelectedKeys);
+  }, [controlledSelectedKeys, defaultSelectedKeys.join("
")]);
+  const clearCloseTimer = (0, import_react.useCallback)(() => {
+    if (closeTimer.current) {
+      clearTimeout(closeTimer.current);
+      closeTimer.current = void 0;
+    }
+  }, []);
+  const setOpen = (0, import_react.useCallback)(
+    (nextOpen) => {
+      clearCloseTimer();
+      if (open !== nextOpen) onOpenChange == null ? void 0 : onOpenChange(nextOpen);
+      setOpenState(nextOpen);
+      if (!nextOpen) {
+        setActiveKey(void 0);
+        setPosition(null);
+      }
+    },
+    [clearCloseTimer, onOpenChange, open]
+  );
+  const updatePosition = (0, import_react.useCallback)(async () => {
+    const triggerRect = await (0, import_miniapp.measureNode)(`#${triggerId}`);
+    if (!triggerRect || triggerRect.width <= 0) {
+      setPosition(null);
+      return null;
+    }
+    const measuredPanel = open ? await (0, import_miniapp.measureNode)(`#${panelId}`) : null;
+    const viewport = (0, import_miniapp.getViewport)();
+    const panelWidth = (measuredPanel == null ? void 0 : measuredPanel.width) || metrics.minWidth;
+    const itemHeight = metrics.fontSize + metrics.itemPaddingY * 2;
+    const descriptionRows = resolvedItems.filter((item) => item.description !== void 0).length;
+    const dividerRows = resolvedItems.filter((item) => item.divider).length;
+    const estimatedHeight = Math.min(
+      420,
+      metrics.panelPadding * 2 + resolvedItems.length * itemHeight + descriptionRows * (metrics.fontSize + 2) + dividerRows * 9
+    );
+    const panelHeight = (measuredPanel == null ? void 0 : measuredPanel.height) || Math.max(itemHeight, estimatedHeight);
+    const opensAbove = placement.startsWith("top");
+    let top = opensAbove ? triggerRect.top - panelHeight - DROPDOWN_OFFSET : triggerRect.bottom + DROPDOWN_OFFSET;
+    if (opensAbove && top < VIEWPORT_PADDING) {
+      top = triggerRect.bottom + DROPDOWN_OFFSET;
+    } else if (!opensAbove && top + panelHeight > viewport.height - VIEWPORT_PADDING) {
+      top = triggerRect.top - panelHeight - DROPDOWN_OFFSET;
+    }
+    top = Math.min(
+      Math.max(VIEWPORT_PADDING, top),
+      Math.max(VIEWPORT_PADDING, viewport.height - panelHeight - VIEWPORT_PADDING)
+    );
+    let left = triggerRect.left;
+    if (placement === "top" || placement === "bottom") {
+      left = triggerRect.left + triggerRect.width / 2 - panelWidth / 2;
+    } else if (placement.endsWith("Right")) {
+      left = triggerRect.right - panelWidth;
+    }
+    left = Math.min(
+      Math.max(VIEWPORT_PADDING, left),
+      Math.max(VIEWPORT_PADDING, viewport.width - panelWidth - VIEWPORT_PADDING)
+    );
+    const nextPosition = { top, left };
+    setPosition(
+      (previous) => (previous == null ? void 0 : previous.top) === nextPosition.top && (previous == null ? void 0 : previous.left) === nextPosition.left ? previous : nextPosition
+    );
+    return nextPosition;
+  }, [
+    metrics.fontSize,
+    metrics.itemPaddingY,
+    metrics.minWidth,
+    metrics.panelPadding,
+    open,
+    panelId,
+    placement,
+    resolvedItems,
+    triggerId
+  ]);
+  const openDropdown = (0, import_react.useCallback)(async () => {
+    if (disabled) return;
+    clearCloseTimer();
+    const nextPosition = await updatePosition();
+    if (!nextPosition) return;
+    setOpen(true);
+  }, [clearCloseTimer, disabled, setOpen, updatePosition]);
+  const scheduleClose = (0, import_react.useCallback)(() => {
+    clearCloseTimer();
+    closeTimer.current = setTimeout(() => setOpen(false), 120);
+  }, [clearCloseTimer, setOpen]);
+  (0, import_react.useEffect)(() => {
+    var _a2, _b2;
+    if (!open) return void 0;
+    const runtimeViewport = globalThis;
+    const reposition = () => void updatePosition();
+    reposition();
+    (_a2 = runtimeViewport.addEventListener) == null ? void 0 : _a2.call(runtimeViewport, "scroll", reposition, true);
+    (_b2 = runtimeViewport.addEventListener) == null ? void 0 : _b2.call(runtimeViewport, "resize", reposition);
+    return () => {
+      var _a3, _b3;
+      (_a3 = runtimeViewport.removeEventListener) == null ? void 0 : _a3.call(runtimeViewport, "scroll", reposition, true);
+      (_b3 = runtimeViewport.removeEventListener) == null ? void 0 : _b3.call(runtimeViewport, "resize", reposition);
+    };
+  }, [open, updatePosition]);
+  (0, import_react.useEffect)(
+    () => () => {
+      clearCloseTimer();
+    },
+    [clearCloseTimer]
+  );
+  const handleSelect = (0, import_react.useCallback)(
+    (item) => {
+      var _a2;
+      if (disabled || item.disabled || item.divider) return;
+      if (controlledSelectedKeys === void 0) setInternalSelectedKeys([item.key]);
+      (_a2 = menu == null ? void 0 : menu.onClick) == null ? void 0 : _a2.call(menu, item);
+      onSelect == null ? void 0 : onSelect(item.key, item);
+      if (item.closeOnClick ?? closeOnSelect) setOpen(false);
+    },
+    [closeOnSelect, controlledSelectedKeys, disabled, menu, onSelect, setOpen]
+  );
+  const triggerContent = (currentSelectedItem == null ? void 0 : currentSelectedItem.label) ?? triggerText ?? placeholder;
+  const fallbackTrigger = /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_components.View, { style: { flex: 1, minWidth: 0 } }, title !== void 0 ? /* @__PURE__ */ import_react.default.createElement(import_components.View, { style: { marginBottom: 4 } }, renderNode(title, {
+    color: colors["muted-foreground"],
+    fontSize: metrics.fontSize,
+    lineHeight: 1.2
+  })) : null, renderNode(triggerContent, {
+    display: "block",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    color: currentSelectedItem ? colors.foreground : colors["muted-foreground"],
+    fontSize: metrics.fontSize,
+    fontWeight: currentSelectedItem ? 600 : 400
+  })), showArrow ? /* @__PURE__ */ import_react.default.createElement(import_components.View, { style: (0, import_iconSlot.iconSlot)(metrics.iconSize, { flexShrink: 0 }) }, /* @__PURE__ */ import_react.default.createElement(
+    import_icon.Icon,
+    {
+      name: open ? "ChevronUp" : "ChevronDown",
+      size: Math.max(12, metrics.iconSize - 2),
+      color: colors["muted-foreground"],
+      block: true
+    }
+  )) : null);
+  const panelPosition = open ? position : null;
+  const panel = panelPosition ? /* @__PURE__ */ import_react.default.createElement(import_portal.Portal, { root: true }, /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      "data-slot": "dropdown-backdrop",
+      className: `${config.prefixCls}-dropdown__backdrop`,
+      catchMove: true,
+      onClick: () => setOpen(false),
+      style: {
+        position: "fixed",
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        zIndex: 1099,
+        backgroundColor: "transparent"
+      }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      id: panelId,
+      "data-slot": "dropdown-panel",
+      role: "menu",
+      ariaLabel: nodeText(title) || "下拉菜单",
+      className: (0, import_utils.classNames)(
+        `${config.prefixCls}-dropdown__panel`,
+        `${config.prefixCls}-dropdown__panel--${size}`,
+        `${config.prefixCls}-dropdown__panel--${variant}`,
+        (_a = menu == null ? void 0 : menu.classNames) == null ? void 0 : _a.root,
+        dropdownClassName
+      ),
+      onMouseEnter: trigger === "hover" ? clearCloseTimer : void 0,
+      onMouseLeave: trigger === "hover" ? scheduleClose : void 0,
+      style: {
+        position: "fixed",
+        top: panelPosition.top,
+        left: panelPosition.left,
+        zIndex: 1100,
+        boxSizing: "border-box",
+        minWidth: metrics.minWidth,
+        maxWidth: "calc(100vw - 24px)",
+        maxHeight: 420,
+        padding: metrics.panelPadding,
+        overflow: "hidden",
+        borderWidth: panelColors.borderWidth,
+        borderStyle: "solid",
+        borderColor: panelColors.border,
+        borderRadius: radius.xl,
+        backgroundColor: panelColors.background,
+        color: colors["popover-foreground"],
+        boxShadow: panelColors.shadow,
+        transformOrigin: placement.startsWith("top") ? "bottom" : "top",
+        ...(_b = menu == null ? void 0 : menu.styles) == null ? void 0 : _b.root,
+        ...dropdownStyle
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_components.ScrollView, { scrollY: true, style: { maxHeight: 420 } }, resolvedItems.length === 0 ? /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        className: `${config.prefixCls}-dropdown__empty`,
+        style: { padding: 16, textAlign: "center" }
+      },
+      renderNode(emptyText, {
+        color: colors["muted-foreground"],
+        fontSize: metrics.fontSize
+      })
+    ) : null, resolvedItems.map((item, index) => {
+      var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j;
+      if (item.divider) {
+        return /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            key: `divider-${item.key || index}`,
+            "data-slot": "dropdown-divider",
+            className: `${config.prefixCls}-dropdown__divider`,
+            style: {
+              height: 1,
+              marginTop: 4,
+              marginBottom: 4,
+              backgroundColor: colors.border
+            }
+          }
+        );
+      }
+      const selected = selectedKeys.includes(item.key);
+      const active = activeKey === item.key;
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: item.key }, item.divided && index > 0 ? /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          "data-slot": "dropdown-divider",
+          className: `${config.prefixCls}-dropdown__divider`,
+          style: {
+            height: 1,
+            marginTop: 4,
+            marginBottom: 4,
+            backgroundColor: colors.border
+          }
+        }
+      ) : null, /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          "data-slot": "dropdown-item",
+          role: "menuitem",
+          ariaLabel: `${nodeText(item.label) || item.key}${item.disabled ? "，已禁用" : ""}`,
+          className: (0, import_utils.classNames)(
+            `${config.prefixCls}-dropdown__item`,
+            `${config.prefixCls}-dropdown__item--${size}`,
+            selected && `${config.prefixCls}-dropdown__item--selected`,
+            item.disabled && `${config.prefixCls}-dropdown__item--disabled`,
+            item.danger && `${config.prefixCls}-dropdown__item--danger`,
+            (_a2 = menu == null ? void 0 : menu.classNames) == null ? void 0 : _a2.item,
+            selected && ((_b2 = menu == null ? void 0 : menu.classNames) == null ? void 0 : _b2.itemSelected),
+            item.disabled && ((_c = menu == null ? void 0 : menu.classNames) == null ? void 0 : _c.itemDisabled)
+          ),
+          onMouseEnter: () => {
+            if (!item.disabled) setActiveKey(item.key);
+          },
+          onMouseLeave: () => setActiveKey(void 0),
+          onClick: () => handleSelect(item),
+          style: {
+            boxSizing: "border-box",
+            width: "100%",
+            paddingTop: metrics.itemPaddingY,
+            paddingRight: metrics.itemPaddingX,
+            paddingBottom: metrics.itemPaddingY,
+            paddingLeft: metrics.itemPaddingX,
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            gap: metrics.gap,
+            borderRadius: radius.sm,
+            backgroundColor: selected || active ? colors.accent : "transparent",
+            color: item.danger ? colors.destructive : selected || active ? colors["accent-foreground"] : colors.foreground,
+            opacity: item.disabled ? 0.5 : 1,
+            transition: "background-color var(--x-duration-fast) var(--x-easing-standard), color var(--x-duration-fast) var(--x-easing-standard)",
+            ...(_d = menu == null ? void 0 : menu.styles) == null ? void 0 : _d.item,
+            ...selected ? (_e = menu == null ? void 0 : menu.styles) == null ? void 0 : _e.itemSelected : null,
+            ...item.disabled ? (_f = menu == null ? void 0 : menu.styles) == null ? void 0 : _f.itemDisabled : null
+          }
+        },
+        item.icon ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            "data-slot": "dropdown-icon",
+            className: (0, import_utils.classNames)(
+              `${config.prefixCls}-dropdown__icon`,
+              (_g = menu == null ? void 0 : menu.classNames) == null ? void 0 : _g.icon
+            ),
+            style: {
+              ...(0, import_iconSlot.iconSlot)(metrics.iconSize, { flexShrink: 0 }),
+              color: item.danger ? colors.destructive : colors["muted-foreground"],
+              ...(_h = menu == null ? void 0 : menu.styles) == null ? void 0 : _h.icon
+            }
+          },
+          item.icon
+        ) : null,
+        /* @__PURE__ */ import_react.default.createElement(import_components.View, { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            "data-slot": "dropdown-label",
+            className: (0, import_utils.classNames)(
+              `${config.prefixCls}-dropdown__label`,
+              (_i = menu == null ? void 0 : menu.classNames) == null ? void 0 : _i.label
+            ),
+            style: (_j = menu == null ? void 0 : menu.styles) == null ? void 0 : _j.label
+          },
+          renderNode(item.label, {
+            display: "block",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            color: "inherit",
+            fontSize: metrics.fontSize,
+            fontWeight: selected ? 600 : 400
+          })
+        ), item.description !== void 0 ? /* @__PURE__ */ import_react.default.createElement(import_components.View, { style: { marginTop: 2 } }, renderNode(item.description, {
+          display: "block",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          color: colors["muted-foreground"],
+          fontSize: Math.max(10, metrics.fontSize - 2)
+        })) : null),
+        item.suffix,
+        showCheckIcon && selected ? /* @__PURE__ */ import_react.default.createElement(import_icon.Icon, { name: "Check", size: metrics.iconSize, color: colors.primary, block: true }) : null
+      ));
+    }))
+  )) : null;
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      className: `${config.prefixCls}-dropdown-root`,
+      style: {
+        position: "relative",
+        display: fullWidth ? "flex" : "inline-flex",
+        width: fullWidth ? "100%" : void 0
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        id: triggerId,
+        "data-slot": "dropdown-trigger",
+        role: hasCustomTrigger ? void 0 : "button",
+        ariaLabel: hasCustomTrigger ? void 0 : nodeText(triggerContent) || "打开下拉菜单",
+        className: (0, import_utils.classNames)(
+          `${config.prefixCls}-dropdown`,
+          `${config.prefixCls}-dropdown--${size}`,
+          open && `${config.prefixCls}-dropdown--open`,
+          disabled && `${config.prefixCls}-dropdown--disabled`,
+          className
+        ),
+        onClick: () => {
+          if (disabled || trigger !== "click") return;
+          if (open) setOpen(false);
+          else void openDropdown();
+        },
+        onContextMenu: (event) => {
+          var _a2;
+          if (disabled || trigger !== "contextMenu") return;
+          (_a2 = event.preventDefault) == null ? void 0 : _a2.call(event);
+          if (open) setOpen(false);
+          else void openDropdown();
+        },
+        onMouseEnter: () => {
+          if (!disabled && trigger === "hover") void openDropdown();
+        },
+        onMouseLeave: trigger === "hover" ? scheduleClose : void 0,
+        ...trigger === "contextMenu" ? {
+          onLongPress: () => {
+            if (!disabled) void openDropdown();
+          }
+        } : {},
+        style: hasCustomTrigger ? { display: "inline-flex", width: fullWidth ? "100%" : void 0, ...style } : {
+          boxSizing: "border-box",
+          width: "100%",
+          minWidth: metrics.minWidth,
+          minHeight: { mini: 28, small: 32, middle: 36, large: 44 }[size],
+          paddingLeft: metrics.itemPaddingX,
+          paddingRight: metrics.itemPaddingX,
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: 8,
+          borderWidth: variant === "ghost" ? 0 : 1,
+          borderStyle: "solid",
+          borderColor: variant === "filled" ? colors.muted : colors.border,
+          borderRadius: radius.lg,
+          backgroundColor: variant === "filled" ? colors.muted : variant === "ghost" ? "transparent" : colors.card,
+          opacity: disabled ? 0.5 : 1,
+          ...style
+        }
+      },
+      hasCustomTrigger ? children : fallbackTrigger
+    ),
+    panel
+  );
+};
+Dropdown.displayName = "Dropdown";
+var dropdown_default = Dropdown;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Dropdown
+});

package/lib/components/dropdown/index.d.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export { default as Dropdown } from './dropdown';
+export { default } from './dropdown';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/dropdown/index.js

@@ -0,0 +1,44 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dropdown/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Dropdown: () => import_dropdown.default,
+  default: () => import_dropdown2.default
+});
+module.exports = __toCommonJS(index_exports);
+__reExport(index_exports, require("./types"), module.exports);
+var import_dropdown = __toESM(require("./dropdown"));
+var import_dropdown2 = __toESM(require("./dropdown"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Dropdown,
+  ...require("./types")
+});