elementdrawing 1.0.0

package/src/jsx/components/Dialog.jsx

@@ -0,0 +1,242 @@
+/**
+ * Dialog Component for ElementDrawing Framework
+ * Supports confirmation, alert, prompt dialogs, custom content, keyboard navigation, focus trap
+ */
+const ED = require('../core/element');
+
+const DIALOG_TYPES = {
+  confirm: {
+    icon: ED.createElement('svg', {
+      className: 'ed-w-6 ed-h-6 ed-text-blue-600',
+      fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor',
+      children: ED.createElement('path', { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' }),
+    }),
+    iconBg: 'ed-bg-blue-100',
+  },
+  alert: {
+    icon: ED.createElement('svg', {
+      className: 'ed-w-6 ed-h-6 ed-text-red-600',
+      fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor',
+      children: ED.createElement('path', { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z' }),
+    }),
+    iconBg: 'ed-bg-red-100',
+  },
+  prompt: {
+    icon: ED.createElement('svg', {
+      className: 'ed-w-6 ed-h-6 ed-text-green-600',
+      fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor',
+      children: ED.createElement('path', { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z' }),
+    }),
+    iconBg: 'ed-bg-green-100',
+  },
+  info: {
+    icon: ED.createElement('svg', {
+      className: 'ed-w-6 ed-h-6 ed-text-blue-600',
+      fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor',
+      children: ED.createElement('path', { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' }),
+    }),
+    iconBg: 'ed-bg-blue-100',
+  },
+  warning: {
+    icon: ED.createElement('svg', {
+      className: 'ed-w-6 ed-h-6 ed-text-yellow-600',
+      fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor',
+      children: ED.createElement('path', { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' }),
+    }),
+    iconBg: 'ed-bg-yellow-100',
+  },
+};
+
+function Dialog(props) {
+  const {
+    visible = false,
+    type = 'confirm',
+    title,
+    content,
+    children,
+    icon,
+    okText = 'OK',
+    cancelText = 'Cancel',
+    onOk,
+    onCancel,
+    onClose,
+    confirmLoading = false,
+    showCancel = true,
+    closable = true,
+    closeOnBackdrop = true,
+    closeOnEscape = true,
+    backdrop = true,
+    className = '',
+    style = {},
+    width = 420,
+    footer,
+    header,
+    inputProps,
+    inputValue,
+    onInputChange,
+    okButtonProps,
+    cancelButtonProps,
+    danger = false,
+    autoFocus = true,
+    focusTrap = true,
+    zIndex = 1000,
+    afterClose,
+    keyboard = true,
+    maskClosable = true,
+    centered = true,
+  } = props;
+
+  if (!visible) return null;
+
+  const dialogType = DIALOG_TYPES[type] || DIALOG_TYPES.confirm;
+
+  const handleBackdropClick = (e) => {
+    if ((closeOnBackdrop || maskClosable) && e.target === e.currentTarget) {
+      onClose?.();
+      onCancel?.();
+    }
+  };
+
+  const handleKeyDown = (e) => {
+    if (!keyboard) return;
+    if (closeOnEscape && e.key === 'Escape') {
+      onClose?.();
+      onCancel?.();
+    }
+    if (focusTrap) {
+      if (e.key === 'Tab') {
+        const dialogEl = e.currentTarget;
+        const focusable = dialogEl.querySelectorAll(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        if (focusable.length > 0) {
+          const first = focusable[0];
+          const last = focusable[focusable.length - 1];
+          if (e.shiftKey && document.activeElement === first) {
+            e.preventDefault();
+            last.focus();
+          } else if (!e.shiftKey && document.activeElement === last) {
+            e.preventDefault();
+            first.focus();
+          }
+        }
+      }
+    }
+  };
+
+  const iconElement = icon !== undefined ? icon
+    : ED.createElement('div', {
+        className: `ed-w-12 ed-h-12 ed-rounded-full ed-flex ed-items-center ed-justify-center ed-mx-auto ed-mb-4 ${dialogType.iconBg}`,
+        children: dialogType.icon,
+      });
+
+  const titleElement = title
+    ? ED.createElement('h3', {
+        className: 'ed-text-lg ed-font-semibold ed-text-gray-900 ed-text-center ed-mb-2',
+      }, title)
+    : null;
+
+  const contentElement = content || children
+    ? ED.createElement('div', {
+        className: 'ed-text-sm ed-text-gray-500 ed-text-center ed-mb-6',
+      }, content || children)
+    : null;
+
+  const promptInput = type === 'prompt'
+    ? ED.createElement('div', { className: 'ed-mb-6' },
+        ED.createElement('input', {
+          className: 'ed-w-full ed-px-3 ed-py-2 ed-border ed-border-gray-300 ed-rounded-md ed-text-sm focus:ed-outline-none focus:ed-ring-2 focus:ed-ring-blue-500 focus:ed-border-transparent',
+          value: inputValue,
+          onChange: onInputChange,
+          autoFocus,
+          ...inputProps,
+        })
+      )
+    : null;
+
+  const cancelButton = showCancel
+    ? ED.createElement('button', {
+        key: 'cancel',
+        className: 'ed-px-4 ed-py-2 ed-text-sm ed-font-medium ed-text-gray-700 ed-bg-white ed-border ed-border-gray-300 ed-rounded-md hover:ed-bg-gray-50 focus:ed-outline-none focus:ed-ring-2 focus:ed-ring-offset-2 focus:ed-ring-gray-300 ed-transition-colors',
+        onClick: onCancel || onClose,
+        ...cancelButtonProps,
+      }, cancelText)
+    : null;
+
+  const okButtonClass = danger
+    ? 'ed-bg-red-600 hover:ed-bg-red-700 focus:ed-ring-red-500'
+    : 'ed-bg-blue-600 hover:ed-bg-blue-700 focus:ed-ring-blue-500';
+
+  const okButton = ED.createElement('button', {
+    key: 'ok',
+    className: [
+      'ed-px-4 ed-py-2 ed-text-sm ed-font-medium ed-text-white ed-rounded-md focus:ed-outline-none focus:ed-ring-2 focus:ed-ring-offset-2 ed-transition-colors',
+      okButtonClass,
+      confirmLoading ? 'ed-opacity-70 ed-cursor-not-allowed' : '',
+    ].filter(Boolean).join(' '),
+    onClick: onOk,
+    disabled: confirmLoading,
+    autoFocus: type !== 'prompt' && autoFocus,
+    ...okButtonProps,
+    children: confirmLoading
+      ? ED.createElement('span', { className: 'ed-flex ed-items-center ed-gap-2' },
+          ED.createElement('span', { className: 'ed-w-4 ed-h-4 ed-border-2 ed-border-white ed-border-t-transparent ed-rounded-full ed-animate-spin' }),
+          okText
+        )
+      : okText,
+  });
+
+  const footerElement = footer !== undefined ? footer
+    : ED.createElement('div', {
+        className: 'ed-flex ed-items-center ed-justify-center ed-gap-3',
+      }, [cancelButton, okButton].filter(Boolean));
+
+  return ED.createElement('div', {
+    className: [
+      'ed-fixed ed-inset-0 ed-flex ed-z-50',
+      centered ? 'ed-items-center ed-justify-center' : 'ed-items-start ed-justify-center ed-pt-24',
+      backdrop ? '' : '',
+      'ed-dialog-backdrop',
+    ].filter(Boolean).join(' '),
+    style: { zIndex },
+    onClick: handleBackdropClick,
+    onKeyDown: handleKeyDown,
+    children: ED.createElement('div', {
+      className: [
+        'ed-bg-white ed-rounded-xl ed-shadow-2xl ed-p-6 ed-w-full',
+        'ed-transform ed-transition-all ed-duration-200',
+        'ed-animate-zoom-in',
+        className,
+      ].filter(Boolean).join(' '),
+      style: { maxWidth: width, ...style },
+      role: 'dialog',
+      'aria-modal': 'true',
+      'aria-labelledby': title ? 'dialog-title' : undefined,
+      children: [
+        closable
+          ? ED.createElement('button', {
+              key: 'close',
+              className: 'ed-absolute ed-top-3 ed-right-3 ed-p-1 ed-rounded-md ed-text-gray-400 hover:ed-text-gray-600 hover:ed-bg-gray-100 ed-transition-colors',
+              onClick: onClose,
+              'aria-label': 'Close dialog',
+              children: ED.createElement('svg', {
+                className: 'ed-w-5 ed-h-5',
+                fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor',
+                children: ED.createElement('path', { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M6 18L18 6M6 6l12 12' }),
+              }),
+            })
+          : null,
+        iconElement,
+        titleElement,
+        contentElement,
+        promptInput,
+        footerElement,
+      ].filter(Boolean),
+    }),
+  });
+}
+
+Dialog.displayName = 'Dialog';
+Dialog.TYPES = DIALOG_TYPES;
+
+module.exports = Dialog;

package/src/jsx/components/Drawer.jsx

@@ -0,0 +1,190 @@
+/**
+ * Drawer Component for ElementDrawing Framework
+ * Supports positions, sizes, overlay, close on escape, nested drawers, resizable
+ */
+const ED = require('../core/element');
+
+const DRAWER_POSITIONS = {
+  left: {
+    container: 'ed-left-0 ed-top-0 ed-bottom-0 ed-h-full',
+    animation: 'ed-animate-slide-in-left',
+    defaultSize: { width: 400 },
+    resizeClass: 'ed-right-0 ed-top-0 ed-bottom-0 ed-w-1 ed-cursor-ew-resize',
+  },
+  right: {
+    container: 'ed-right-0 ed-top-0 ed-bottom-0 ed-h-full',
+    animation: 'ed-animate-slide-in-right',
+    defaultSize: { width: 400 },
+    resizeClass: 'ed-left-0 ed-top-0 ed-bottom-0 ed-w-1 ed-cursor-ew-resize',
+  },
+  top: {
+    container: 'ed-top-0 ed-left-0 ed-right-0 ed-w-full',
+    animation: 'ed-animate-slide-in-top',
+    defaultSize: { height: 300 },
+    resizeClass: 'ed-bottom-0 ed-left-0 ed-right-0 ed-h-1 ed-cursor-ns-resize',
+  },
+  bottom: {
+    container: 'ed-bottom-0 ed-left-0 ed-right-0 ed-w-full',
+    animation: 'ed-animate-slide-in-bottom',
+    defaultSize: { height: 300 },
+    resizeClass: 'ed-top-0 ed-left-0 ed-right-0 ed-h-1 ed-cursor-ns-resize',
+  },
+};
+
+const DRAWER_SIZES = {
+  sm: { width: 300, height: 200 },
+  md: { width: 400, height: 300 },
+  lg: { width: 600, height: 450 },
+  xl: { width: 800, height: 600 },
+  full: { width: '100%', height: '100%' },
+};
+
+function Drawer(props) {
+  const {
+    visible = false,
+    position = 'right',
+    size = 'md',
+    width,
+    height,
+    overlay = true,
+    overlayOpacity = 0.5,
+    closeOnEscape = true,
+    closeOnOverlay = true,
+    closable = true,
+    onClose,
+    title,
+    children,
+    footer,
+    className = '',
+    style = {},
+    zIndex = 1000,
+    headerStyle = {},
+    bodyStyle = {},
+    footerStyle = {},
+    resizable = false,
+    nested = false,
+    destroyOnClose = true,
+    placement = position,
+    mask = true,
+    maskClosable = true,
+    afterOpenChange,
+    extra,
+    width: widthProp,
+  } = props;
+
+  if (!visible && destroyOnClose) return null;
+  if (!visible) return null;
+
+  const pos = DRAWER_POSITIONS[placement || position] || DRAWER_POSITIONS.right;
+  const sizeConfig = DRAWER_SIZES[size] || DRAWER_SIZES.md;
+  const drawerWidth = widthProp || width || sizeConfig.width;
+  const drawerHeight = height || sizeConfig.height;
+
+  const isHorizontal = placement === 'left' || placement === 'right';
+
+  const drawerClasses = [
+    'ed-fixed ed-bg-white ed-shadow-xl ed-flex ed-flex-col ed-z-50',
+    pos.container,
+    'ed-transition-transform ed-duration-300',
+    className,
+  ].filter(Boolean).join(' ');
+
+  const drawerStyle = {
+    [isHorizontal ? 'width' : 'height']: drawerWidth || drawerHeight,
+    ...style,
+  };
+
+  const handleOverlayClick = () => {
+    if (closeOnOverlay || maskClosable) onClose?.();
+  };
+
+  const handleKeyDown = (e) => {
+    if (closeOnEscape && e.key === 'Escape') onClose?.();
+  };
+
+  const headerElement = title || closable || extra
+    ? ED.createElement('div', {
+        className: 'ed-flex ed-items-center ed-justify-between ed-px-6 ed-py-4 ed-border-b ed-border-gray-200 ed-flex-shrink-0',
+        style: headerStyle,
+        children: [
+          ED.createElement('div', { key: 'title-area', className: 'ed-flex ed-items-center ed-gap-3' },
+            title
+              ? ED.createElement('h3', { className: 'ed-text-lg ed-font-semibold ed-text-gray-900' }, title)
+              : null,
+            extra
+              ? ED.createElement('div', { className: 'ed-text-sm ed-text-gray-500' }, extra)
+              : null
+          ),
+          closable
+            ? ED.createElement('button', {
+                key: 'close',
+                className: 'ed-p-1.5 ed-rounded-md ed-text-gray-400 hover:ed-text-gray-600 hover:ed-bg-gray-100 ed-transition-colors',
+                onClick: onClose,
+                'aria-label': 'Close drawer',
+                children: ED.createElement('svg', {
+                  className: 'ed-w-5 ed-h-5',
+                  fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor',
+                  children: ED.createElement('path', { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M6 18L18 6M6 6l12 12' }),
+                }),
+              })
+            : null,
+        ].filter(Boolean),
+      })
+    : null;
+
+  const bodyElement = ED.createElement('div', {
+    className: 'ed-flex-1 ed-overflow-y-auto ed-px-6 ed-py-4',
+    style: bodyStyle,
+    children,
+  });
+
+  const footerElement = footer
+    ? ED.createElement('div', {
+        className: 'ed-px-6 ed-py-3 ed-border-t ed-border-gray-200 ed-flex ed-items-center ed-justify-end ed-gap-3 ed-flex-shrink-0',
+        style: footerStyle,
+        children: footer,
+      })
+    : null;
+
+  const resizeHandle = resizable
+    ? ED.createElement('div', {
+        className: [
+          'ed-absolute ed-bg-transparent ed-hover:ed-bg-blue-200 ed-transition-colors ed-z-10',
+          pos.resizeClass,
+        ].join(' '),
+      })
+    : null;
+
+  const overlayElement = (overlay || mask)
+    ? ED.createElement('div', {
+        className: [
+          'ed-fixed ed-inset-0 ed-bg-black ed-transition-opacity ed-duration-300',
+          nested ? '' : '',
+        ].join(' '),
+        style: {
+          zIndex: zIndex - 1,
+          opacity: overlayOpacity,
+        },
+        onClick: handleOverlayClick,
+      })
+    : null;
+
+  return ED.createElement(ED.Fragment, null, [
+    overlayElement,
+    ED.createElement('div', {
+      key: 'drawer',
+      className: drawerClasses,
+      style: { ...drawerStyle, zIndex },
+      onKeyDown: handleKeyDown,
+      role: 'dialog',
+      'aria-modal': 'true',
+      children: [headerElement, bodyElement, footerElement, resizeHandle].filter(Boolean),
+    }),
+  ]);
+}
+
+Drawer.displayName = 'Drawer';
+Drawer.POSITIONS = DRAWER_POSITIONS;
+Drawer.SIZES = DRAWER_SIZES;
+
+module.exports = Drawer;

package/src/jsx/components/Dropdown.jsx

@@ -0,0 +1,268 @@
+/**
+ * Dropdown Component for ElementDrawing Framework
+ * Supports triggers, items, dividers, icons, submenus, keyboard navigation, search
+ */
+const ED = require('../core/element');
+
+function DropdownItem(props) {
+  const {
+    children,
+    label,
+    icon,
+    disabled = false,
+    active = false,
+    danger = false,
+    shortcut,
+    href,
+    onClick,
+    className = '',
+    style = {},
+    divided = false,
+    selected = false,
+    iconRight,
+    description,
+  } = props;
+
+  if (divided) {
+    return ED.createElement('div', {
+      className: 'ed-my-1 ed-border-t ed-border-gray-100',
+      role: 'separator',
+    });
+  }
+
+  const itemClasses = [
+    'ed-flex ed-items-center ed-px-3 ed-py-2 ed-text-sm ed-transition-colors ed-duration-150 ed-gap-2',
+    disabled
+      ? 'ed-text-gray-400 ed-cursor-not-allowed'
+      : danger
+        ? 'ed-text-red-600 hover:ed-bg-red-50 ed-cursor-pointer'
+        : active || selected
+          ? 'ed-bg-blue-50 ed-text-blue-700 ed-cursor-pointer'
+          : 'ed-text-gray-700 hover:ed-bg-gray-50 ed-cursor-pointer',
+    className,
+  ].filter(Boolean).join(' ');
+
+  const iconElement = icon
+    ? ED.createElement('span', {
+        className: `ed-w-4 ed-h-4 ed-flex ed-items-center ed-justify-center ed-flex-shrink-0 ${disabled ? 'ed-text-gray-300' : ''}`,
+        children: typeof icon === 'string' ? ED.createElement('i', { className: icon }) : icon,
+      })
+    : null;
+
+  const shortcutElement = shortcut
+    ? ED.createElement('span', {
+        className: 'ed-ml-auto ed-text-xs ed-text-gray-400 ed-font-mono',
+      }, shortcut)
+    : null;
+
+  const iconRightElement = iconRight
+    ? ED.createElement('span', {
+        className: 'ed-ml-auto ed-w-4 ed-h-4 ed-flex ed-items-center ed-justify-center ed-text-gray-400',
+        children: typeof iconRight === 'string' ? ED.createElement('i', { className: iconRight }) : iconRight,
+      })
+    : null;
+
+  const labelElement = label || children;
+  const descriptionElement = description
+    ? ED.createElement('span', { className: 'ed-text-xs ed-text-gray-400 ed-block' }, description)
+    : null;
+
+  const contentArea = ED.createElement('div', { className: 'ed-flex-1 ed-min-w-0' }, [
+    ED.createElement('span', { key: 'label', className: 'ed-truncate ed-block' }, labelElement),
+    descriptionElement,
+  ].filter(Boolean));
+
+  if (href && !disabled) {
+    return ED.createElement('a', {
+      href,
+      className: itemClasses,
+      style,
+      onClick,
+      role: 'menuitem',
+      tabIndex: disabled ? -1 : 0,
+      children: [iconElement, contentArea, shortcutElement, iconRightElement].filter(Boolean),
+    });
+  }
+
+  return ED.createElement('div', {
+    className: itemClasses,
+    style,
+    onClick: disabled ? undefined : onClick,
+    role: 'menuitem',
+    tabIndex: disabled ? -1 : 0,
+    'aria-disabled': disabled,
+    onKeyDown: (e) => {
+      if (e.key === 'Enter' && !disabled) onClick?.(e);
+    },
+    children: [iconElement, contentArea, shortcutElement, iconRightElement].filter(Boolean),
+  });
+}
+
+DropdownItem.displayName = 'DropdownItem';
+
+function Dropdown(props) {
+  const {
+    children,
+    items = [],
+    trigger = 'click',
+    placement = 'bottom-start',
+    disabled = false,
+    className = '',
+    style = {},
+    menuClassName = '',
+    menuStyle = {},
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    onSelect,
+    searchable = false,
+    searchPlaceholder = 'Search...',
+    onSearch,
+    searchValue,
+    emptyText = 'No items',
+    maxHeight = 300,
+    width,
+    arrow = false,
+    offset = 4,
+    closeOnSelect = true,
+    closeOnOutsideClick = true,
+    overlay,
+    renderMenu,
+  } = props;
+
+  const isOpen = open !== undefined ? open : defaultOpen;
+
+  const placementClasses = {
+    'bottom-start': 'ed-top-full ed-left-0',
+    'bottom': 'ed-top-full ed-left-1/2 ed--translate-x-1/2',
+    'bottom-end': 'ed-top-full ed-right-0',
+    'top-start': 'ed-bottom-full ed-left-0',
+    'top': 'ed-bottom-full ed-left-1/2 ed--translate-x-1/2',
+    'top-end': 'ed-bottom-full ed-right-0',
+    'left-start': 'ed-right-full ed-top-0',
+    'left': 'ed-right-full ed-top-1/2 ed--translate-y-1/2',
+    'left-end': 'ed-right-full ed-bottom-0',
+    'right-start': 'ed-left-full ed-top-0',
+    'right': 'ed-left-full ed-top-1/2 ed--translate-y-1/2',
+    'right-end': 'ed-left-full ed-bottom-0',
+  };
+
+  const handleToggle = () => {
+    if (disabled) return;
+    onOpenChange?.(!isOpen);
+  };
+
+  const handleItemClick = (item) => {
+    if (item.disabled) return;
+    onSelect?.(item);
+    if (closeOnSelect) onOpenChange?.(false);
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Escape') onOpenChange?.(false);
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      e.preventDefault();
+      const menuEl = e.currentTarget.querySelector('[role="menu"]');
+      if (menuEl) {
+        const focusable = menuEl.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])');
+        const currentIdx = Array.from(focusable).indexOf(document.activeElement);
+        const nextIdx = e.key === 'ArrowDown'
+          ? Math.min(currentIdx + 1, focusable.length - 1)
+          : Math.max(currentIdx - 1, 0);
+        focusable[nextIdx]?.focus();
+      }
+    }
+  };
+
+  const searchElement = searchable
+    ? ED.createElement('div', { className: 'ed-px-2 ed-py-2 ed-border-b ed-border-gray-100' },
+        ED.createElement('input', {
+          className: 'ed-w-full ed-px-2 ed-py-1.5 ed-text-sm ed-border ed-border-gray-200 ed-rounded ed-outline-none focus:ed-ring-1 focus:ed-ring-blue-500',
+          placeholder: searchPlaceholder,
+          value: searchValue,
+          onChange: (e) => onSearch?.(e.target.value),
+          autoFocus: true,
+        })
+      )
+    : null;
+
+  const menuItems = items.length > 0
+    ? items.map((item, idx) =>
+        ED.createElement(DropdownItem, {
+          key: item.key || idx,
+          label: item.label,
+          icon: item.icon,
+          disabled: item.disabled,
+          active: item.active,
+          danger: item.danger,
+          shortcut: item.shortcut,
+          href: item.href,
+          divided: item.divided,
+          selected: item.selected,
+          iconRight: item.iconRight,
+          description: item.description,
+          onClick: () => handleItemClick(item),
+        })
+      )
+    : children;
+
+  const menuContent = renderMenu
+    ? renderMenu(items)
+    : ED.createElement('div', {
+        className: [
+          'ed-absolute ed-bg-white ed-rounded-lg ed-shadow-lg ed-border ed-border-gray-200 ed-z-50',
+          'ed-min-w-[180px] ed-py-1',
+          placementClasses[placement] || placementClasses['bottom-start'],
+          arrow ? 'ed-mt-2' : '',
+          menuClassName,
+        ].filter(Boolean).join(' '),
+        style: {
+          maxHeight,
+          overflowY: 'auto',
+          width,
+          ...menuStyle,
+        },
+        role: 'menu',
+        children: [
+          searchElement,
+          menuItems?.length > 0 || children
+            ? menuItems
+            : ED.createElement('div', { className: 'ed-px-3 ed-py-4 ed-text-center ed-text-sm ed-text-gray-400' }, emptyText),
+        ].filter(Boolean),
+      });
+
+  const triggerEvents = {};
+  if (trigger === 'click') {
+    triggerEvents.onClick = handleToggle;
+  } else if (trigger === 'hover') {
+    triggerEvents.onMouseEnter = () => onOpenChange?.(true);
+    triggerEvents.onMouseLeave = () => onOpenChange?.(false);
+  } else if (trigger === 'context') {
+    triggerEvents.onContextMenu = (e) => { e.preventDefault(); handleToggle(); };
+  } else if (trigger === 'focus') {
+    triggerEvents.onFocus = () => onOpenChange?.(true);
+    triggerEvents.onBlur = () => onOpenChange?.(false);
+  }
+
+  return ED.createElement('div', {
+    className: `ed-relative ed-inline-flex ${className}`,
+    style,
+    onKeyDown: handleKeyDown,
+    ...triggerEvents,
+    children: [
+      ED.createElement('div', {
+        key: 'trigger',
+        className: 'ed-dropdown-trigger ed-inline-flex',
+        'aria-haspopup': 'true',
+        'aria-expanded': isOpen,
+        children,
+      }),
+      isOpen ? menuContent : null,
+    ],
+  });
+}
+
+Dropdown.displayName = 'Dropdown';
+Dropdown.Item = DropdownItem;
+
+module.exports = Dropdown;