elementdrawing 1.0.0

package/src/jsx/components/Navbar.jsx

@@ -0,0 +1,292 @@
+/**
+ * Navbar Component for ElementDrawing Framework
+ * Supports brand, links, dropdown menus, mobile hamburger, search, notifications, user menu, sticky/fixed, transparent
+ */
+const ED = require('../core/element');
+
+function Navbar(props) {
+  const {
+    children,
+    brand,
+    brandHref = '/',
+    brandIcon,
+    links = [],
+    className = '',
+    style = {},
+    sticky = false,
+    fixed = false,
+    transparent = false,
+    colored = true,
+    color = 'white',
+    dark = false,
+    shadow = true,
+    bordered = false,
+    height = 64,
+    maxWidth,
+    search = false,
+    searchPlaceholder = 'Search...',
+    onSearch,
+    notifications = 0,
+    onNotificationClick,
+    userMenu,
+    userName,
+    userAvatar,
+    userMenuItems = [],
+    onUserMenuClick,
+    mobileMenu = true,
+    mobileOpen = false,
+    onMobileToggle,
+    onMobileClose,
+    collapsed = false,
+    rightContent,
+    leftContent,
+    centerContent,
+    zIndex = 40,
+  } = props;
+
+  const positionClass = fixed
+    ? 'ed-fixed ed-top-0 ed-left-0 ed-right-0'
+    : sticky
+      ? 'ed-sticky ed-top-0'
+      : '';
+
+  const bgClass = transparent
+    ? 'ed-bg-transparent'
+    : color === 'white'
+      ? 'ed-bg-white'
+      : color === 'dark'
+        ? 'ed-bg-gray-900'
+        : color === 'primary'
+          ? 'ed-bg-blue-600'
+          : color === 'custom'
+            ? ''
+            : 'ed-bg-white';
+
+  const textClass = dark || color === 'dark' || color === 'primary'
+    ? 'ed-text-white'
+    : 'ed-text-gray-800';
+
+  const navClasses = [
+    'ed-w-full ed-flex ed-items-center ed-px-4 lg:ed-px-6',
+    positionClass,
+    bgClass,
+    textClass,
+    shadow && !transparent ? 'ed-shadow-sm' : '',
+    bordered ? 'ed-border-b ed-border-gray-200' : '',
+    'ed-transition-all ed-duration-200',
+    'ed-z-' + zIndex,
+    className,
+  ].filter(Boolean).join(' ');
+
+  const brandElement = brand || brandIcon
+    ? ED.createElement('a', {
+        href: brandHref,
+        className: 'ed-flex ed-items-center ed-gap-2 ed-font-bold ed-text-lg ed-no-underline ed-inherit ed-mr-6',
+      }, [
+        brandIcon
+          ? ED.createElement('span', { key: 'icon', className: 'ed-w-8 ed-h-8 ed-flex ed-items-center ed-justify-center' },
+              typeof brandIcon === 'string' ? ED.createElement('i', { className: brandIcon }) : brandIcon
+            )
+          : null,
+        brand ? ED.createElement('span', { key: 'brand-text' }, brand) : null,
+      ].filter(Boolean))
+    : null;
+
+  const linkElements = links.map((link, idx) => {
+    if (link.children) {
+      return ED.createElement('div', {
+        key: idx,
+        className: 'ed-relative ed-group',
+        children: [
+          ED.createElement('button', {
+            className: `ed-px-3 ed-py-2 ed-rounded-md ed-text-sm ed-font-medium ed-transition-colors hover:ed-bg-gray-100 ed-flex ed-items-center ed-gap-1 ${textClass}`,
+            children: [
+              link.icon
+                ? ED.createElement('i', { className: link.icon, key: 'icon' })
+                : null,
+              ED.createElement('span', { key: 'text' }, link.label),
+              ED.createElement('svg', {
+                key: 'arrow',
+                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: 'M19 9l-7 7-7-7' }),
+              }),
+            ],
+          }),
+          ED.createElement('div', {
+            className: 'ed-absolute ed-left-0 ed-top-full ed-mt-1 ed-w-48 ed-bg-white ed-rounded-md ed-shadow-lg ed-border ed-border-gray-200 ed-opacity-0 ed-invisible group-hover:ed-opacity-100 group-hover:ed-visible ed-transition-all ed-duration-200 ed-z-50',
+            children: link.children.map((child, cidx) =>
+              child.divider
+                ? ED.createElement('div', { key: cidx, className: 'ed-my-1 ed-border-t ed-border-gray-100' })
+                : ED.createElement('a', {
+                    key: cidx,
+                    href: child.href || '#',
+                    className: 'ed-block ed-px-4 ed-py-2 ed-text-sm ed-text-gray-700 hover:ed-bg-gray-100 hover:ed-text-gray-900 ed-transition-colors',
+                    onClick: child.onClick,
+                    children: [
+                      child.icon ? ED.createElement('i', { className: `ed-mr-2 ${child.icon}`, key: 'icon' }) : null,
+                      child.label,
+                    ].filter(Boolean),
+                  })
+            ),
+          }),
+        ],
+      });
+    }
+
+    return ED.createElement('a', {
+      key: idx,
+      href: link.href || '#',
+      className: `ed-px-3 ed-py-2 ed-rounded-md ed-text-sm ed-font-medium ed-transition-colors hover:ed-bg-gray-100 ${link.active ? 'ed-bg-gray-100 ed-font-semibold' : ''} ${textClass}`,
+      onClick: link.onClick,
+      children: [
+        link.icon ? ED.createElement('i', { className: `ed-mr-2 ${link.icon}`, key: 'icon' }) : null,
+        ED.createElement('span', { key: 'text' }, link.label),
+      ].filter(Boolean),
+    });
+  });
+
+  const searchElement = search
+    ? ED.createElement('div', {
+        className: 'ed-relative ed-mx-4',
+        children: [
+          ED.createElement('svg', {
+            className: 'ed-absolute ed-left-3 ed-top-1/2 ed--translate-y-1/2 ed-w-4 ed-h-4 ed-text-gray-400',
+            fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor',
+            children: ED.createElement('path', { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z' }),
+          }),
+          ED.createElement('input', {
+            className: 'ed-w-48 lg:ed-w-64 ed-pl-9 ed-pr-3 ed-py-1.5 ed-text-sm ed-border ed-border-gray-300 ed-rounded-md ed-bg-gray-50 focus:ed-bg-white focus:ed-outline-none focus:ed-ring-2 focus:ed-ring-blue-500 focus:ed-border-transparent ed-transition-all',
+            placeholder: searchPlaceholder,
+            type: 'search',
+            onKeyDown: (e) => { if (e.key === 'Enter') onSearch?.(e.target.value); },
+          }),
+        ],
+      })
+    : null;
+
+  const notificationElement = notifications > 0 || onNotificationClick
+    ? ED.createElement('button', {
+        className: `ed-relative ed-p-2 ed-rounded-full ed-transition-colors hover:ed-bg-gray-100 ${textClass}`,
+        onClick: onNotificationClick,
+        'aria-label': 'Notifications',
+        children: [
+          ED.createElement('svg', {
+            key: 'bell',
+            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: 'M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9' }),
+          }),
+          notifications > 0
+            ? ED.createElement('span', {
+                key: 'badge',
+                className: 'ed-absolute ed-top-0 ed-right-0 ed-inline-flex ed-items-center ed-justify-center ed-w-4 ed-h-4 ed-text-xs ed-font-bold ed-text-white ed-bg-red-500 ed-rounded-full',
+              }, notifications > 99 ? '99+' : notifications)
+            : null,
+        ],
+      })
+    : null;
+
+  const userMenuElement = userMenu || userName || userAvatar
+    ? ED.createElement('div', { className: 'ed-relative ed-group ed-ml-3' },
+        ED.createElement('button', {
+          className: 'ed-flex ed-items-center ed-gap-2 ed-p-1.5 ed-rounded-full ed-transition-colors hover:ed-bg-gray-100',
+          children: [
+            userAvatar
+              ? ED.createElement('img', { src: userAvatar, className: 'ed-w-8 ed-h-8 ed-rounded-full ed-object-cover', alt: userName || 'User' })
+              : ED.createElement('div', {
+                  className: 'ed-w-8 ed-h-8 ed-rounded-full ed-bg-blue-500 ed-flex ed-items-center ed-justify-center ed-text-white ed-text-sm ed-font-medium',
+                }, userName?.charAt(0)?.toUpperCase() || 'U'),
+            userName ? ED.createElement('span', { className: `ed-text-sm ed-font-medium ed-hidden md:ed-inline ${textClass}` }, userName) : null,
+          ],
+        }),
+        userMenuItems.length > 0
+          ? ED.createElement('div', {
+              className: 'ed-absolute ed-right-0 ed-top-full ed-mt-1 ed-w-56 ed-bg-white ed-rounded-md ed-shadow-lg ed-border ed-border-gray-200 ed-opacity-0 ed-invisible group-hover:ed-opacity-100 group-hover:ed-visible ed-transition-all ed-duration-200 ed-z-50',
+              children: userMenuItems.map((item, idx) =>
+                item.divider
+                  ? ED.createElement('div', { key: idx, className: 'ed-my-1 ed-border-t ed-border-gray-100' })
+                  : ED.createElement('button', {
+                      key: idx,
+                      className: 'ed-w-full ed-text-left ed-px-4 ed-py-2 ed-text-sm ed-text-gray-700 hover:ed-bg-gray-100 ed-transition-colors ed-flex ed-items-center ed-gap-2',
+                      onClick: () => onUserMenuClick?.(item),
+                      children: [
+                        item.icon ? ED.createElement('i', { className: item.icon, key: 'icon' }) : null,
+                        item.label,
+                        item.danger ? '' : '',
+                      ].filter(Boolean),
+                    })
+              ),
+            })
+          : null,
+      )
+    : null;
+
+  const hamburgerElement = mobileMenu
+    ? ED.createElement('button', {
+        className: `ed-p-2 ed-rounded-md ed-transition-colors hover:ed-bg-gray-100 lg:ed-hidden ${textClass}`,
+        onClick: onMobileToggle,
+        'aria-label': 'Toggle menu',
+        children: ED.createElement('svg', {
+          className: 'ed-w-6 ed-h-6',
+          fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor',
+          children: mobileOpen
+            ? ED.createElement('path', { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M6 18L18 6M6 6l12 12' })
+            : ED.createElement('path', { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M4 6h16M4 12h16M4 18h16' }),
+        }),
+      })
+    : null;
+
+  const mobileMenuOverlay = mobileOpen
+    ? ED.createElement('div', {
+        className: 'ed-fixed ed-inset-0 ed-bg-black ed-bg-opacity-50 lg:ed-hidden ed-z-40',
+        onClick: onMobileClose,
+      })
+    : null;
+
+  const mobileMenuPanel = mobileOpen
+    ? ED.createElement('div', {
+        className: 'ed-fixed ed-top-16 ed-left-0 ed-right-0 ed-bg-white ed-shadow-lg ed-border-b ed-border-gray-200 lg:ed-hidden ed-z-40 ed-p-4',
+        children: links.map((link, idx) =>
+          ED.createElement('a', {
+            key: idx,
+            href: link.href || '#',
+            className: 'ed-block ed-px-4 ed-py-3 ed-text-gray-700 hover:ed-bg-gray-100 ed-rounded-md ed-transition-colors',
+            onClick: (e) => { link.onClick?.(e); onMobileClose?.(); },
+            children: [
+              link.icon ? ED.createElement('i', { className: `ed-mr-3 ${link.icon}`, key: 'icon' }) : null,
+              link.label,
+            ].filter(Boolean),
+          })
+        ),
+      })
+    : null;
+
+  return ED.createElement('nav', {
+    className: navClasses,
+    style: { height, zIndex, ...(maxWidth ? { maxWidth, margin: '0 auto' } : {}), ...style },
+    children: [
+      mobileMenuOverlay,
+      brandElement,
+      leftContent,
+      ED.createElement('div', {
+        key: 'links',
+        className: 'ed-hidden lg:ed-flex ed-items-center ed-gap-1 ed-flex-1',
+        children: linkElements,
+      }),
+      centerContent,
+      searchElement,
+      ED.createElement('div', { key: 'right', className: 'ed-flex ed-items-center ed-gap-2 ed-ml-auto' },
+        notificationElement,
+        userMenuElement,
+        rightContent,
+        hamburgerElement,
+      ),
+      mobileMenuPanel,
+    ].filter(Boolean),
+  });
+}
+
+Navbar.displayName = 'Navbar';
+
+module.exports = Navbar;

package/src/jsx/components/Pagination.jsx

@@ -0,0 +1,268 @@
+/**
+ * Pagination Component for ElementDrawing Framework
+ * Supports page numbers, prev/next, first/last, page size, total count, jumper, simple mode
+ */
+const ED = require('../core/element');
+
+function Pagination(props) {
+  const {
+    current = 1,
+    pageSize = 10,
+    total = 0,
+    onChange,
+    onPageSizeChange,
+    showQuickJumper = false,
+    showSizeChanger = false,
+    showTotal = false,
+    pageSizeOptions = [10, 20, 50, 100],
+    className = '',
+    style = {},
+    simple = false,
+    disabled = false,
+    size = 'md',
+    siblingCount = 1,
+    boundaryCount = 1,
+    hideOnSinglePage = false,
+    showPrevNextJumpers = true,
+    showFirstLast = false,
+    showTitle = true,
+    itemRender,
+    prevIcon,
+    nextIcon,
+    jumpPrevIcon,
+    jumpNextIcon,
+  } = props;
+
+  if (hideOnSinglePage && total <= pageSize) return null;
+
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+
+  const sizeClasses = {
+    sm: { btn: 'ed-w-7 ed-h-7 ed-text-xs', select: 'ed-text-xs ed-py-0.5', jumper: 'ed-text-xs ed-w-10' },
+    md: { btn: 'ed-w-8 ed-h-8 ed-text-sm', select: 'ed-text-sm ed-py-1', jumper: 'ed-text-sm ed-w-12' },
+    lg: { btn: 'ed-w-9 ed-h-9 ed-text-base', select: 'ed-text-base ed-py-1', jumper: 'ed-text-base ed-w-14' },
+  };
+
+  const sizeConfig = sizeClasses[size] || sizeClasses.md;
+
+  const range = (start, end) => {
+    const arr = [];
+    for (let i = start; i <= end; i++) arr.push(i);
+    return arr;
+  };
+
+  const generatePages = () => {
+    const startPages = range(1, Math.min(boundaryCount, totalPages));
+    const endPages = range(Math.max(totalPages - boundaryCount + 1, boundaryCount + 1), totalPages);
+    const siblingsStart = Math.max(
+      Math.min(current - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1),
+      boundaryCount + 2
+    );
+    const siblingsEnd = Math.min(
+      Math.max(current + siblingCount, boundaryCount + siblingCount * 2 + 2),
+      endPages.length > 0 ? endPages[0] - 2 : totalPages - 1
+    );
+
+    const pages = [
+      ...startPages,
+      siblingsStart > startPages[startPages.length - 1] + 1 ? 'start-ellipsis' : null,
+      ...range(siblingsStart, siblingsEnd),
+      siblingsEnd < endPages[0] - 1 ? 'end-ellipsis' : null,
+      ...endPages,
+    ].filter((page, idx, arr) => page !== null && arr.indexOf(page) === idx);
+
+    return pages;
+  };
+
+  const pageButton = (page, label, isActive = false, isDisabled = false) => {
+    if (itemRender) return itemRender(page, label ? 'page' : 'page', isActive);
+
+    return ED.createElement('button', {
+      key: `page-${page}`,
+      className: [
+        sizeConfig.btn,
+        'ed-inline-flex ed-items-center ed-justify-center ed-rounded-md ed-border ed-transition-colors ed-duration-150',
+        isActive
+          ? 'ed-bg-blue-600 ed-text-white ed-border-blue-600 ed-font-medium'
+          : isDisabled
+            ? 'ed-border-gray-200 ed-text-gray-300 ed-cursor-not-allowed'
+            : 'ed-border-gray-300 ed-text-gray-700 hover:ed-bg-gray-50',
+        disabled ? 'ed-pointer-events-none ed-opacity-50' : '',
+      ].filter(Boolean).join(' '),
+      onClick: isDisabled || isActive ? undefined : () => onChange?.(page),
+      disabled: isDisabled || isActive,
+      'aria-current': isActive ? 'page' : undefined,
+      'aria-label': `Page ${page}`,
+      title: showTitle ? String(page) : undefined,
+      children: label || page,
+    });
+  };
+
+  const defaultPrevIcon = 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: 'M15 19l-7-7 7-7' }),
+  });
+
+  const defaultNextIcon = 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: 'M9 5l7 7-7 7' }),
+  });
+
+  if (simple) {
+    return ED.createElement('div', {
+      className: `ed-flex ed-items-center ed-gap-2 ${className}`,
+      style,
+      children: [
+        ED.createElement('button', {
+          key: 'prev',
+          className: `${sizeConfig.btn} ed-inline-flex ed-items-center ed-justify-center ed-rounded-md ed-border ed-border-gray-300 ed-text-gray-700 hover:ed-bg-gray-50 ed-disabled:ed-opacity-50 ed-disabled:ed-cursor-not-allowed`,
+          disabled: current <= 1 || disabled,
+          onClick: () => onChange?.(current - 1),
+          children: prevIcon || defaultPrevIcon,
+        }),
+        ED.createElement('span', { key: 'current', className: sizeConfig.btn.replace('ed-w-8', '').replace('ed-w-7', '').replace('ed-w-9', '') + ' ed-text-sm ed-text-gray-700' },
+          `${current}`
+        ),
+        ED.createElement('span', { key: 'divider', className: 'ed-text-gray-400' }, '/'),
+        ED.createElement('span', { key: 'total', className: 'ed-text-sm ed-text-gray-500' }, totalPages),
+        ED.createElement('button', {
+          key: 'next',
+          className: `${sizeConfig.btn} ed-inline-flex ed-items-center ed-justify-center ed-rounded-md ed-border ed-border-gray-300 ed-text-gray-700 hover:ed-bg-gray-50 ed-disabled:ed-opacity-50 ed-disabled:ed-cursor-not-allowed`,
+          disabled: current >= totalPages || disabled,
+          onClick: () => onChange?.(current + 1),
+          children: nextIcon || defaultNextIcon,
+        }),
+      ],
+    });
+  }
+
+  const firstButton = showFirstLast
+    ? ED.createElement('button', {
+        key: 'first',
+        className: `${sizeConfig.btn} ed-inline-flex ed-items-center ed-justify-center ed-rounded-md ed-border ed-border-gray-300 ed-text-gray-700 hover:ed-bg-gray-50 ed-disabled:ed-opacity-50 ed-disabled:ed-cursor-not-allowed`,
+        disabled: current <= 1 || disabled,
+        onClick: () => onChange?.(1),
+        'aria-label': 'First page',
+        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: 'M11 19l-7-7 7-7M19 19l-7-7 7-7' }),
+        }),
+      })
+    : null;
+
+  const prevButton = ED.createElement('button', {
+    key: 'prev',
+    className: `${sizeConfig.btn} ed-inline-flex ed-items-center ed-justify-center ed-rounded-md ed-border ed-border-gray-300 ed-text-gray-700 hover:ed-bg-gray-50 ed-disabled:ed-opacity-50 ed-disabled:ed-cursor-not-allowed`,
+    disabled: current <= 1 || disabled,
+    onClick: () => onChange?.(current - 1),
+    'aria-label': 'Previous page',
+    children: prevIcon || defaultPrevIcon,
+  });
+
+  const pages = generatePages();
+  const pageButtons = pages.map((page, idx) => {
+    if (page === 'start-ellipsis' || page === 'end-ellipsis') {
+      return ED.createElement('span', {
+        key: `ellipsis-${idx}`,
+        className: `${sizeConfig.btn} ed-inline-flex ed-items-center ed-justify-center ed-text-gray-400`,
+        children: '...',
+      });
+    }
+    return pageButton(page, null, page === current);
+  });
+
+  const nextButton = ED.createElement('button', {
+    key: 'next',
+    className: `${sizeConfig.btn} ed-inline-flex ed-items-center ed-justify-center ed-rounded-md ed-border ed-border-gray-300 ed-text-gray-700 hover:ed-bg-gray-50 ed-disabled:ed-opacity-50 ed-disabled:ed-cursor-not-allowed`,
+    disabled: current >= totalPages || disabled,
+    onClick: () => onChange?.(current + 1),
+    'aria-label': 'Next page',
+    children: nextIcon || defaultNextIcon,
+  });
+
+  const lastButton = showFirstLast
+    ? ED.createElement('button', {
+        key: 'last',
+        className: `${sizeConfig.btn} ed-inline-flex ed-items-center ed-justify-center ed-rounded-md ed-border ed-border-gray-300 ed-text-gray-700 hover:ed-bg-gray-50 ed-disabled:ed-opacity-50 ed-disabled:ed-cursor-not-allowed`,
+        disabled: current >= totalPages || disabled,
+        onClick: () => onChange?.(totalPages),
+        'aria-label': 'Last page',
+        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: 'M13 5l7 7-7 7M5 5l7 7-7 7' }),
+        }),
+      })
+    : null;
+
+  const sizeChanger = showSizeChanger
+    ? ED.createElement('select', {
+        key: 'size-changer',
+        className: `${sizeConfig.select} ed-px-2 ed-border ed-border-gray-300 ed-rounded-md ed-bg-white ed-text-gray-700 ed-outline-none focus:ed-ring-1 focus:ed-ring-blue-500`,
+        value: pageSize,
+        onChange: (e) => onPageSizeChange?.(Number(e.target.value)),
+        disabled,
+        children: pageSizeOptions.map(opt =>
+          ED.createElement('option', { key: opt, value: opt }, `${opt} / page`)
+        ),
+      })
+    : null;
+
+  const totalDisplay = showTotal
+    ? ED.createElement('span', {
+        key: 'total',
+        className: 'ed-text-sm ed-text-gray-500 ed-mr-2',
+      }, typeof showTotal === 'function'
+        ? showTotal(total, [(current - 1) * pageSize + 1, Math.min(current * pageSize, total)])
+        : `Total ${total} items`
+      )
+    : null;
+
+  const jumper = showQuickJumper
+    ? ED.createElement('div', {
+        key: 'jumper',
+        className: 'ed-flex ed-items-center ed-gap-2 ed-ml-2',
+        children: [
+          ED.createElement('span', { key: 'label', className: 'ed-text-sm ed-text-gray-500' }, 'Go to'),
+          ED.createElement('input', {
+            key: 'input',
+            className: `${sizeConfig.jumper} ed-px-2 ed-py-1 ed-text-center ed-border ed-border-gray-300 ed-rounded-md ed-text-sm ed-outline-none focus:ed-ring-1 focus:ed-ring-blue-500`,
+            type: 'number',
+            min: 1,
+            max: totalPages,
+            disabled,
+            onKeyDown: (e) => {
+              if (e.key === 'Enter') {
+                const val = parseInt(e.target.value, 10);
+                if (val >= 1 && val <= totalPages) onChange?.(val);
+              }
+            },
+          }),
+        ],
+      })
+    : null;
+
+  return ED.createElement('nav', {
+    className: `ed-flex ed-items-center ed-gap-1 ed-flex-wrap ${className}`,
+    style,
+    role: 'navigation',
+    'aria-label': 'Pagination',
+    children: [
+      totalDisplay,
+      firstButton,
+      prevButton,
+      ...pageButtons,
+      nextButton,
+      lastButton,
+      sizeChanger,
+      jumper,
+    ].filter(Boolean),
+  });
+}
+
+Pagination.displayName = 'Pagination';
+
+module.exports = Pagination;