elementdrawing 1.0.0

package/src/jsx/components/Textarea.jsx

@@ -0,0 +1,212 @@
+/**
+ * Textarea Component for ElementDrawing Framework
+ * Supports auto-resize, max length, character count, clearable, disabled, readonly, validation, resize control
+ */
+const ED = require('../core/element');
+
+const TEXTAREA_SIZES = {
+  sm: 'ed-text-sm ed-px-3 ed-py-1.5',
+  md: 'ed-text-sm ed-px-3 ed-py-2',
+  lg: 'ed-text-base ed-px-4 ed-py-2.5',
+};
+
+const VALIDATION_STATES = {
+  default: 'ed-border-gray-300 focus:ed-border-blue-500 focus:ed-ring-blue-500',
+  success: 'ed-border-green-500 focus:ed-border-green-600 focus:ed-ring-green-500',
+  warning: 'ed-border-yellow-500 focus:ed-border-yellow-600 focus:ed-ring-yellow-500',
+  error: 'ed-border-red-500 focus:ed-border-red-600 focus:ed-ring-red-500',
+};
+
+function Textarea(props) {
+  const {
+    value,
+    defaultValue,
+    onChange,
+    placeholder,
+    rows = 3,
+    minRows,
+    maxRows,
+    autoResize = false,
+    maxLength,
+    showCount = false,
+    clearable = false,
+    disabled = false,
+    readonly = false,
+    size = 'md',
+    validationState = 'default',
+    state,
+    status,
+    error,
+    errorMessage,
+    helperText,
+    label,
+    id,
+    name,
+    className = '',
+    style = {},
+    textareaClassName = '',
+    textareaStyle = {},
+    resize = 'vertical',
+    bordered = true,
+    onFocus,
+    onBlur,
+    onInput,
+    onKeyDown,
+    onKeyUp,
+    onKeyPress,
+    onEnter,
+    autoFocus = false,
+    tabIndex,
+    required = false,
+    spellCheck = true,
+    wrap = 'soft',
+    cols,
+    onClear,
+    floatingLabel,
+    width,
+  } = props;
+
+  const currentState = status || state || validationState || (error ? 'error' : 'default');
+  const sizeClass = TEXTAREA_SIZES[size] || TEXTAREA_SIZES.md;
+  const stateClass = VALIDATION_STATES[currentState] || VALIDATION_STATES.default;
+
+  const resizeClass = {
+    none: 'ed-resize-none',
+    both: 'ed-resize',
+    horizontal: 'ed-resize-x',
+    vertical: 'ed-resize-y',
+  }[resize] || (autoResize ? 'ed-resize-none ed-overflow-hidden' : 'ed-resize-y');
+
+  const textareaClasses = [
+    'ed-w-full ed-outline-none ed-transition-all ed-duration-200 ed-rounded-md',
+    sizeClass,
+    bordered ? 'ed-border' : 'ed-border-none',
+    stateClass,
+    resizeClass,
+    disabled ? 'ed-bg-gray-100 ed-cursor-not-allowed ed-text-gray-400' : 'ed-bg-white',
+    readonly ? 'ed-bg-gray-50 ed-cursor-default' : '',
+    'focus:ed-ring-2 focus:ed-ring-offset-0 ed-placeholder-ed-text-gray-400',
+    textareaClassName,
+  ].filter(Boolean).join(' ');
+
+  const handleAutoResize = (el) => {
+    if (!autoResize || !el) return;
+    el.style.height = 'auto';
+    const minH = minRows ? minRows * 24 : 0;
+    const maxH = maxRows ? maxRows * 24 : Infinity;
+    el.style.height = `${Math.min(Math.max(el.scrollHeight, minH), maxH)}px`;
+  };
+
+  const handleChange = (e) => {
+    handleAutoResize(e.target);
+    onChange?.(e);
+  };
+
+  const handleKeyDown = (e) => {
+    if (onEnter && e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      onEnter(e);
+    }
+    onKeyDown?.(e);
+  };
+
+  const clearButton = clearable && value && !disabled && !readonly
+    ? ED.createElement('button', {
+        className: 'ed-absolute ed-top-2 ed-right-2 ed-p-1 ed-rounded ed-text-gray-400 hover:ed-text-gray-600 hover:ed-bg-gray-100 ed-transition-colors ed-z-10',
+        onClick: (e) => {
+          e.stopPropagation();
+          onClear?.();
+          onChange?.({ target: { value: '' } });
+        },
+        tabIndex: -1,
+        type: 'button',
+        'aria-label': 'Clear',
+        children: ED.createElement('svg', {
+          className: 'ed-w-4 ed-h-4',
+          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;
+
+  const charCount = showCount
+    ? ED.createElement('div', {
+        className: 'ed-flex ed-justify-end ed-mt-1',
+      }, [
+        maxLength
+          ? ED.createElement('span', {
+              key: 'count',
+              className: `ed-text-xs ${(value?.length || 0) > maxLength ? 'ed-text-red-500' : 'ed-text-gray-400'}`,
+            }, `${value?.length || 0} / ${maxLength}`)
+          : ED.createElement('span', {
+              key: 'count',
+              className: 'ed-text-xs ed-text-gray-400',
+            }, `${value?.length || 0}`),
+      ])
+    : null;
+
+  const messageElement = errorMessage && currentState === 'error'
+    ? ED.createElement('p', { className: 'ed-text-xs ed-text-red-500 ed-mt-1' }, errorMessage)
+    : helperText
+      ? ED.createElement('p', { className: 'ed-text-xs ed-text-gray-500 ed-mt-1' }, helperText)
+      : null;
+
+  const textareaElement = ED.createElement('textarea', {
+    id,
+    name,
+    value,
+    defaultValue,
+    placeholder,
+    rows: autoResize ? 1 : rows,
+    cols,
+    maxLength,
+    disabled,
+    readOnly: readonly,
+    spellCheck,
+    wrap,
+    className: textareaClasses,
+    style: textareaStyle,
+    onChange: handleChange,
+    onFocus,
+    onBlur,
+    onInput,
+    onKeyDown: handleKeyDown,
+    onKeyUp,
+    onKeyPress,
+    autoFocus,
+    tabIndex,
+    required,
+    'aria-invalid': currentState === 'error',
+    'aria-describedby': errorMessage ? `${id}-error` : undefined,
+    ref: autoResize ? handleAutoResize : undefined,
+  });
+
+  return ED.createElement('div', {
+    className: `ed-inline-flex ed-flex-col ${width ? '' : 'ed-w-full'}`,
+    style: { width, ...style },
+  }, [
+    label && !floatingLabel
+      ? ED.createElement('label', {
+          key: 'label',
+          htmlFor: id,
+          className: `ed-block ed-text-sm ed-font-medium ed-mb-1 ${required ? "ed-after:content-['*'] ed-after:ed-text-red-500 ed-after:ed-ml-0.5" : ''} ${disabled ? 'ed-text-gray-400' : 'ed-text-gray-700'}`,
+        }, label)
+      : null,
+    ED.createElement('div', {
+      key: 'textarea-wrapper',
+      className: 'ed-relative',
+      children: [textareaElement, clearButton],
+    }),
+    ED.createElement('div', {
+      key: 'messages',
+      className: 'ed-flex ed-justify-between',
+      children: [messageElement, charCount].filter(Boolean),
+    }),
+  ].filter(Boolean));
+}
+
+Textarea.displayName = 'Textarea';
+Textarea.SIZES = TEXTAREA_SIZES;
+Textarea.STATES = VALIDATION_STATES;
+
+module.exports = Textarea;

package/src/jsx/components/Toast.jsx

@@ -0,0 +1,270 @@
+/**
+ * Toast Component for ElementDrawing Framework
+ * Supports positions, types, auto-close, progress bar, stacked, promise toast, custom icon
+ */
+const ED = require('../core/element');
+
+const TOAST_TYPES = {
+  success: {
+    icon: 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: 'M5 13l4 4L19 7' }),
+    }),
+    iconColor: 'ed-text-green-500',
+    bg: 'ed-bg-green-50 ed-border-green-200',
+    progressColor: 'ed-bg-green-500',
+  },
+  error: {
+    icon: 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: 'M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z' }),
+    }),
+    iconColor: 'ed-text-red-500',
+    bg: 'ed-bg-red-50 ed-border-red-200',
+    progressColor: 'ed-bg-red-500',
+  },
+  warning: {
+    icon: 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: 'M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' }),
+    }),
+    iconColor: 'ed-text-yellow-500',
+    bg: 'ed-bg-yellow-50 ed-border-yellow-200',
+    progressColor: 'ed-bg-yellow-500',
+  },
+  info: {
+    icon: 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: 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' }),
+    }),
+    iconColor: 'ed-text-blue-500',
+    bg: 'ed-bg-blue-50 ed-border-blue-200',
+    progressColor: 'ed-bg-blue-500',
+  },
+  loading: {
+    icon: null,
+    iconColor: 'ed-text-blue-500',
+    bg: 'ed-bg-blue-50 ed-border-blue-200',
+    progressColor: 'ed-bg-blue-500',
+  },
+};
+
+const TOAST_POSITIONS = {
+  'top-left': 'ed-top-4 ed-left-4',
+  'top-center': 'ed-top-4 ed-left-1/2 ed--translate-x-1/2',
+  'top-right': 'ed-top-4 ed-right-4',
+  'bottom-left': 'ed-bottom-4 ed-left-4',
+  'bottom-center': 'ed-bottom-4 ed-left-1/2 ed--translate-x-1/2',
+  'bottom-right': 'ed-bottom-4 ed-right-4',
+};
+
+const loadingSpinner = ED.createElement('div', {
+  className: 'ed-w-5 ed-h-5 ed-border-2 ed-border-blue-500 ed-border-t-transparent ed-rounded-full ed-animate-spin',
+});
+
+function ToastItem(props) {
+  const {
+    id,
+    type = 'info',
+    message,
+    description,
+    icon,
+    closable = true,
+    onClose,
+    autoClose,
+    duration = 5000,
+    progressBar = true,
+    onClick,
+    className = '',
+    style = {},
+    action,
+    title,
+    promise,
+  } = props;
+
+  const toastType = TOAST_TYPES[type] || TOAST_TYPES.info;
+
+  const toastClasses = [
+    'ed-flex ed-items-start ed-gap-3 ed-px-4 ed-py-3 ed-rounded-lg ed-border ed-shadow-lg ed-min-w-[300px] ed-max-w-[420px]',
+    toastType.bg,
+    'ed-animate-slide-in-right',
+    onClick ? 'ed-cursor-pointer' : '',
+    className,
+  ].filter(Boolean).join(' ');
+
+  const iconElement = icon !== undefined ? icon
+    : type === 'loading'
+      ? loadingSpinner
+      : ED.createElement('span', { className: `ed-flex-shrink-0 ed-mt-0.5 ${toastType.iconColor}` },
+          toastType.icon
+        );
+
+  const closeElement = closable
+    ? ED.createElement('button', {
+        className: 'ed-flex-shrink-0 ed-p-0.5 ed-rounded ed-text-gray-400 hover:ed-text-gray-600 ed-transition-colors',
+        onClick: (e) => { e.stopPropagation(); onClose?.(id); },
+        'aria-label': 'Close notification',
+        children: ED.createElement('svg', {
+          className: 'ed-w-4 ed-h-4',
+          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;
+
+  const progressBarElement = progressBar && autoClose
+    ? ED.createElement('div', {
+        className: 'ed-absolute ed-bottom-0 ed-left-0 ed-right-0 ed-h-1 ed-rounded-b-lg ed-overflow-hidden',
+        children: ED.createElement('div', {
+          className: `ed-h-full ${toastType.progressColor} ed-opacity-50`,
+          style: {
+            animation: `ed-shrink ${duration}ms linear forwards`,
+          },
+        }),
+      })
+    : null;
+
+  const actionElement = action
+    ? ED.createElement('div', { className: 'ed-flex-shrink-0 ed-ml-2' }, action)
+    : null;
+
+  return ED.createElement('div', {
+    className: toastClasses,
+    style: { position: 'relative', ...style },
+    onClick: onClick ? () => onClick(id) : undefined,
+    role: type === 'error' ? 'alert' : 'status',
+    children: [
+      iconElement,
+      ED.createElement('div', { className: 'ed-flex-1 ed-min-w-0' }, [
+        title || (typeof message === 'string' && message.length > 0)
+          ? ED.createElement('p', { key: 'message', className: 'ed-text-sm ed-font-medium ed-text-gray-900' }, title || message)
+          : null,
+        description || (title && message)
+          ? ED.createElement('p', { key: 'desc', className: 'ed-text-xs ed-text-gray-600 ed-mt-0.5' }, description || message)
+          : null,
+      ].filter(Boolean)),
+      actionElement,
+      closeElement,
+      progressBarElement,
+    ],
+  });
+}
+
+ToastItem.displayName = 'ToastItem';
+
+function ToastContainer(props) {
+  const {
+    toasts = [],
+    position = 'top-right',
+    onClose,
+    stacked = false,
+    className = '',
+    style = {},
+    maxToasts = 5,
+  } = props;
+
+  const positionClass = TOAST_POSITIONS[position] || TOAST_POSITIONS['top-right'];
+
+  const visibleToasts = stacked ? toasts.slice(0, maxToasts) : toasts;
+
+  return ED.createElement('div', {
+    className: [
+      'ed-fixed ed-z-[9999] ed-pointer-events-none',
+      positionClass,
+      className,
+    ].filter(Boolean).join(' '),
+    style,
+    children: ED.createElement('div', {
+      className: `ed-flex ed-flex-col ed-gap-2 ed-pointer-events-auto ${stacked ? '' : ''}`,
+      children: visibleToasts.map((toast) =>
+        ED.createElement(ToastItem, {
+          key: toast.id,
+          ...toast,
+          onClose,
+        })
+      ),
+    }),
+  });
+}
+
+ToastContainer.displayName = 'ToastContainer';
+
+let toastId = 0;
+const toastStore = { toasts: [], listeners: [] };
+
+function Toast(props) {
+  const {
+    position = 'top-right',
+    stacked = false,
+    maxToasts = 5,
+    className = '',
+    style = {},
+  } = props;
+
+  return ED.createElement(ToastContainer, {
+    toasts: toastStore.toasts,
+    position,
+    stacked,
+    maxToasts,
+    className,
+    style,
+    onClose: Toast.remove,
+  });
+}
+
+Toast.show = (options) => {
+  const id = ++toastId;
+  const toast = { id, ...options };
+  toastStore.toasts = [...toastStore.toasts, toast];
+  toastStore.listeners.forEach(fn => fn(toastStore.toasts));
+
+  if (options.autoClose !== false && options.type !== 'loading') {
+    const duration = options.duration || 5000;
+    setTimeout(() => Toast.remove(id), duration);
+  }
+
+  return id;
+};
+
+Toast.success = (message, options = {}) => Toast.show({ type: 'success', message, ...options });
+Toast.error = (message, options = {}) => Toast.show({ type: 'error', message, ...options });
+Toast.warning = (message, options = {}) => Toast.show({ type: 'warning', message, ...options });
+Toast.info = (message, options = {}) => Toast.show({ type: 'info', message, ...options });
+Toast.loading = (message, options = {}) => Toast.show({ type: 'loading', message, autoClose: false, ...options });
+
+Toast.remove = (id) => {
+  toastStore.toasts = toastStore.toasts.filter(t => t.id !== id);
+  toastStore.listeners.forEach(fn => fn(toastStore.toasts));
+};
+
+Toast.clear = () => {
+  toastStore.toasts = [];
+  toastStore.listeners.forEach(fn => fn(toastStore.toasts));
+};
+
+Toast.promise = (promise, options = {}) => {
+  const id = Toast.loading(options.loading || 'Loading...');
+  return promise
+    .then((result) => {
+      Toast.remove(id);
+      Toast.success(options.success || 'Success!');
+      return result;
+    })
+    .catch((error) => {
+      Toast.remove(id);
+      Toast.error(options.error || 'Something went wrong');
+      throw error;
+    });
+};
+
+Toast.displayName = 'Toast';
+Toast.Container = ToastContainer;
+Toast.Item = ToastItem;
+Toast.TYPES = TOAST_TYPES;
+Toast.POSITIONS = TOAST_POSITIONS;
+
+module.exports = Toast;

package/src/jsx/components/Tooltip.jsx

@@ -0,0 +1,178 @@
+/**
+ * Tooltip Component for ElementDrawing Framework
+ * Supports positions, trigger, arrow, delay, HTML content, theme (dark, light)
+ */
+const ED = require('../core/element');
+
+const POSITION_STYLES = {
+  top: {
+    tooltip: 'ed-bottom-full ed-left-1/2 ed--translate-x-1/2 ed-mb-2',
+    arrow: 'ed-top-full ed-left-1/2 ed--translate-x-1/2 ed-border-t-current ed-border-x-transparent ed-border-b-transparent',
+  },
+  'top-start': {
+    tooltip: 'ed-bottom-full ed-left-0 ed-mb-2',
+    arrow: 'ed-top-full ed-left-3 ed-border-t-current ed-border-x-transparent ed-border-b-transparent',
+  },
+  'top-end': {
+    tooltip: 'ed-bottom-full ed-right-0 ed-mb-2',
+    arrow: 'ed-top-full ed-right-3 ed-border-t-current ed-border-x-transparent ed-border-b-transparent',
+  },
+  bottom: {
+    tooltip: 'ed-top-full ed-left-1/2 ed--translate-x-1/2 ed-mt-2',
+    arrow: 'ed-bottom-full ed-left-1/2 ed--translate-x-1/2 ed-border-b-current ed-border-x-transparent ed-border-t-transparent',
+  },
+  'bottom-start': {
+    tooltip: 'ed-top-full ed-left-0 ed-mt-2',
+    arrow: 'ed-bottom-full ed-left-3 ed-border-b-current ed-border-x-transparent ed-border-t-transparent',
+  },
+  'bottom-end': {
+    tooltip: 'ed-top-full ed-right-0 ed-mt-2',
+    arrow: 'ed-bottom-full ed-right-3 ed-border-b-current ed-border-x-transparent ed-border-t-transparent',
+  },
+  left: {
+    tooltip: 'ed-right-full ed-top-1/2 ed--translate-y-1/2 ed-mr-2',
+    arrow: 'ed-left-full ed-top-1/2 ed--translate-y-1/2 ed-border-l-current ed-border-y-transparent ed-border-r-transparent',
+  },
+  'left-start': {
+    tooltip: 'ed-right-full ed-top-0 ed-mr-2',
+    arrow: 'ed-left-full ed-top-3 ed-border-l-current ed-border-y-transparent ed-border-r-transparent',
+  },
+  'left-end': {
+    tooltip: 'ed-right-full ed-bottom-0 ed-mr-2',
+    arrow: 'ed-left-full ed-bottom-3 ed-border-l-current ed-border-y-transparent ed-border-r-transparent',
+  },
+  right: {
+    tooltip: 'ed-left-full ed-top-1/2 ed--translate-y-1/2 ed-ml-2',
+    arrow: 'ed-right-full ed-top-1/2 ed--translate-y-1/2 ed-border-r-current ed-border-y-transparent ed-border-l-transparent',
+  },
+  'right-start': {
+    tooltip: 'ed-left-full ed-top-0 ed-ml-2',
+    arrow: 'ed-right-full ed-top-3 ed-border-r-current ed-border-y-transparent ed-border-l-transparent',
+  },
+  'right-end': {
+    tooltip: 'ed-left-full ed-bottom-0 ed-ml-2',
+    arrow: 'ed-right-full ed-bottom-3 ed-border-r-current ed-border-y-transparent ed-border-l-transparent',
+  },
+};
+
+const THEME_CLASSES = {
+  dark: {
+    tooltip: 'ed-bg-gray-900 ed-text-white',
+    arrow: 'ed-text-gray-900',
+  },
+  light: {
+    tooltip: 'ed-bg-white ed-text-gray-800 ed-shadow-lg ed-border ed-border-gray-200',
+    arrow: 'ed-text-white',
+  },
+};
+
+function Tooltip(props) {
+  const {
+    children,
+    title,
+    content,
+    position = 'top',
+    placement = position,
+    trigger = 'hover',
+    arrow = true,
+    delay = 0,
+    delayShow = delay,
+    delayHide = 0,
+    htmlContent,
+    theme = 'dark',
+    className = '',
+    style = {},
+    tooltipClassName = '',
+    tooltipStyle = {},
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    disabled = false,
+    offset = 0,
+    zIndex = 50,
+    maxWidth = 250,
+    animation = true,
+    followCursor = false,
+    destroyTooltipOnHide = false,
+    onVisibleChange,
+    mouseEnterDelay = delayShow || 100,
+    mouseLeaveDelay = delayHide || 100,
+    clickToHide = true,
+  } = props;
+
+  const pos = POSITION_STYLES[placement || position] || POSITION_STYLES.top;
+  const themeConfig = THEME_CLASSES[theme] || THEME_CLASSES.dark;
+  const isVisible = open !== undefined ? open : defaultOpen;
+
+  if (disabled) return children;
+
+  const tooltipContent = title || content || htmlContent;
+
+  if (!tooltipContent) return children;
+
+  const tooltipClasses = [
+    'ed-absolute ed-px-3 ed-py-1.5 ed-text-xs ed-font-medium ed-rounded-md ed-whitespace-normal ed-pointer-events-none',
+    'ed-z-50 ed-transition-opacity ed-duration-200',
+    pos.tooltip,
+    themeConfig.tooltip,
+    isVisible ? 'ed-opacity-100' : 'ed-opacity-0 ed-invisible',
+    animation ? 'ed-transition-all ed-duration-200' : '',
+    tooltipClassName,
+  ].filter(Boolean).join(' ');
+
+  const arrowClasses = [
+    'ed-absolute ed-w-0 ed-h-0 ed-border-4',
+    pos.arrow,
+    themeConfig.arrow,
+  ].join(' ');
+
+  const arrowElement = arrow
+    ? ED.createElement('div', {
+        className: arrowClasses,
+        'aria-hidden': 'true',
+      })
+    : null;
+
+  const tooltipElement = ED.createElement('div', {
+    className: tooltipClasses,
+    style: {
+      maxWidth,
+      zIndex,
+      ...(offset ? { marginTop: position.includes('bottom') ? offset : 0, marginBottom: position.includes('top') ? offset : 0, marginLeft: position.includes('right') ? offset : 0, marginRight: position.includes('left') ? offset : 0 } : {}),
+      ...tooltipStyle,
+    },
+    role: 'tooltip',
+    children: [
+      htmlContent
+        ? ED.createElement('div', { dangerouslySetInnerHTML: { __html: htmlContent } })
+        : ED.createElement('span', null, tooltipContent),
+      arrowElement,
+    ],
+  });
+
+  const triggerEvents = {};
+  if (trigger === 'hover') {
+    triggerEvents.onMouseEnter = () => onOpenChange?.(true) || onVisibleChange?.(true);
+    triggerEvents.onMouseLeave = () => onOpenChange?.(false) || onVisibleChange?.(false);
+  } else if (trigger === 'click') {
+    triggerEvents.onClick = () => {
+      onOpenChange?.(!isVisible) || onVisibleChange?.(!isVisible);
+    };
+  } else if (trigger === 'focus') {
+    triggerEvents.onFocus = () => onOpenChange?.(true) || onVisibleChange?.(true);
+    triggerEvents.onBlur = () => onOpenChange?.(false) || onVisibleChange?.(false);
+  }
+
+  return ED.createElement('div', {
+    className: `ed-relative ed-inline-flex ${className}`,
+    style,
+    ...triggerEvents,
+    children: [children, tooltipElement],
+  });
+}
+
+Tooltip.displayName = 'Tooltip';
+Tooltip.POSITIONS = POSITION_STYLES;
+Tooltip.THEMES = THEME_CLASSES;
+
+module.exports = Tooltip;