elementdrawing 1.0.0

package/src/jsx/components/Badge.jsx

@@ -0,0 +1,136 @@
+/**
+ * Badge Component for ElementDrawing Framework
+ * Supports variants, sizes, dot, count, overflow, standalone, positioned on parent
+ */
+const ED = require('../core/element');
+
+const BADGE_VARIANTS = {
+  default: 'ed-bg-gray-500 ed-text-white',
+  primary: 'ed-bg-blue-500 ed-text-white',
+  success: 'ed-bg-green-500 ed-text-white',
+  warning: 'ed-bg-yellow-500 ed-text-white',
+  danger: 'ed-bg-red-500 ed-text-white',
+  info: 'ed-bg-cyan-500 ed-text-white',
+  secondary: 'ed-bg-gray-200 ed-text-gray-800',
+  outline: 'ed-bg-transparent ed-border-2 ed-border-current ed-text-gray-600',
+};
+
+const BADGE_SIZES = {
+  xs: 'ed-text-[10px] ed-min-w-[14px] ed-h-[14px] ed-px-1',
+  sm: 'ed-text-xs ed-min-w-[18px] ed-h-[18px] ed-px-1.5',
+  md: 'ed-text-xs ed-min-w-[20px] ed-h-[20px] ed-px-2',
+  lg: 'ed-text-sm ed-min-w-[24px] ed-h-[24px] ed-px-2.5',
+  xl: 'ed-text-base ed-min-w-[28px] ed-h-[28px] ed-px-3',
+};
+
+const DOT_SIZES = {
+  xs: 'ed-w-1.5 ed-h-1.5',
+  sm: 'ed-w-2 ed-h-2',
+  md: 'ed-w-2.5 ed-h-2.5',
+  lg: 'ed-w-3 ed-h-3',
+  xl: 'ed-w-3.5 ed-h-3.5',
+};
+
+const POSITION_CLASSES = {
+  'top-right': 'ed-top-0 ed-right-0 ed--translate-y-1/2 ed-translate-x-1/2',
+  'top-left': 'ed-top-0 ed-left-0 ed--translate-y-1/2 ed--translate-x-1/2',
+  'bottom-right': 'ed-bottom-0 ed-right-0 ed-translate-y-1/2 ed-translate-x-1/2',
+  'bottom-left': 'ed-bottom-0 ed-left-0 ed-translate-y-1/2 ed--translate-x-1/2',
+};
+
+function Badge(props) {
+  const {
+    children,
+    count,
+    overflowCount = 99,
+    dot = false,
+    variant = 'danger',
+    color,
+    size = 'md',
+    position = 'top-right',
+    offset,
+    className = '',
+    style = {},
+    showZero = false,
+    hidden = false,
+    standalone = false,
+    maxNumber,
+    processing = false,
+    title,
+    onClick,
+  } = props;
+
+  if (hidden) return children || null;
+
+  const overflow = maxNumber || overflowCount;
+  const displayCount = typeof count === 'number' && count > overflow ? `${overflow}+` : count;
+  const shouldShow = dot || count > 0 || (count === 0 && showZero) || count === undefined;
+
+  if (!shouldShow && !standalone) return children || null;
+
+  const variantClass = color
+    ? ''
+    : BADGE_VARIANTS[variant] || BADGE_VARIANTS.danger;
+
+  const sizeClass = dot
+    ? DOT_SIZES[size] || DOT_SIZES.md
+    : BADGE_SIZES[size] || BADGE_SIZES.md;
+
+  const positionClass = children
+    ? POSITION_CLASSES[position] || POSITION_CLASSES['top-right']
+    : '';
+
+  const badgeClasses = [
+    'ed-inline-flex ed-items-center ed-justify-center ed-rounded-full ed-font-medium ed-whitespace-nowrap',
+    dot ? '' : 'ed-leading-none',
+    variantClass,
+    sizeClass,
+    children ? 'ed-absolute' : '',
+    positionClass,
+    processing ? 'ed-animate-pulse' : '',
+    onClick ? 'ed-cursor-pointer' : '',
+    'ed-badge',
+    className,
+  ].filter(Boolean).join(' ');
+
+  const badgeStyle = {
+    ...(color ? { backgroundColor: color, color: '#fff' } : {}),
+    ...(offset ? { marginTop: offset[1], marginRight: offset[0] } : {}),
+    ...style,
+  };
+
+  const badgeContent = dot
+    ? null
+    : displayCount !== undefined
+      ? String(displayCount)
+      : null;
+
+  const badgeElement = shouldShow
+    ? ED.createElement('span', {
+        className: badgeClasses,
+        style: badgeStyle,
+        title: title || (typeof count === 'number' ? String(count) : undefined),
+        onClick,
+        children: badgeContent,
+      })
+    : null;
+
+  if (standalone) {
+    return badgeElement;
+  }
+
+  if (!children) {
+    return badgeElement;
+  }
+
+  return ED.createElement('span', {
+    className: 'ed-relative ed-inline-flex ed-align-top',
+    children: [children, badgeElement],
+  });
+}
+
+Badge.displayName = 'Badge';
+Badge.VARIANTS = BADGE_VARIANTS;
+Badge.SIZES = BADGE_SIZES;
+
+module.exports = Badge;

package/src/jsx/components/Breadcrumb.jsx

@@ -0,0 +1,200 @@
+/**
+ * Breadcrumb Component for ElementDrawing Framework
+ * Supports separator customization, max items, dropdown overflow, icon items, active state
+ */
+const ED = require('../core/element');
+
+function BreadcrumbItem(props) {
+  const {
+    children,
+    href,
+    onClick,
+    icon,
+    active = false,
+    className = '',
+    style = {},
+    separator,
+    dropdownItems = [],
+    onDropdownClick,
+  } = props;
+
+  const itemClasses = [
+    'ed-inline-flex ed-items-center ed-text-sm',
+    active
+      ? 'ed-text-gray-500 ed-font-medium ed-cursor-default'
+      : 'ed-text-gray-700 hover:ed-text-blue-600 ed-cursor-pointer',
+    'ed-transition-colors ed-duration-200',
+    className,
+  ].filter(Boolean).join(' ');
+
+  const iconElement = icon
+    ? ED.createElement('span', {
+        className: 'ed-mr-1.5 ed-flex ed-items-center ed-justify-center ed-w-4 ed-h-4',
+        children: typeof icon === 'string' ? ED.createElement('i', { className: icon }) : icon,
+      })
+    : null;
+
+  const dropdownElement = dropdownItems.length > 0
+    ? ED.createElement('div', { className: 'ed-relative ed-group ed-inline-flex' }, [
+        ED.createElement('span', { className: 'ed-flex ed-items-center ed-gap-1', key: 'trigger' }, [
+          iconElement,
+          ED.createElement('span', null, children),
+          ED.createElement('svg', {
+            key: 'arrow',
+            className: 'ed-w-3 ed-h-3 ed-text-gray-400',
+            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', {
+          key: 'dropdown',
+          className: 'ed-absolute ed-left-0 ed-top-full ed-mt-1 ed-w-40 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: dropdownItems.map((item, idx) =>
+            ED.createElement('a', {
+              key: idx,
+              href: item.href || '#',
+              className: 'ed-block ed-px-3 ed-py-2 ed-text-sm ed-text-gray-700 hover:ed-bg-gray-50 ed-transition-colors',
+              onClick: (e) => { e.preventDefault(); onDropdownClick?.(item); },
+              children: [
+                item.icon ? ED.createElement('i', { className: `ed-mr-2 ${item.icon}`, key: 'icon' }) : null,
+                item.label || item.title,
+              ].filter(Boolean),
+            })
+          ),
+        }),
+      ])
+    : null;
+
+  if (active) {
+    return ED.createElement('span', {
+      className: itemClasses,
+      style,
+      'aria-current': 'page',
+      children: [iconElement, ED.createElement('span', null, children)],
+    });
+  }
+
+  if (dropdownElement) {
+    return ED.createElement('span', { className: itemClasses, style, children: dropdownElement });
+  }
+
+  if (href) {
+    return ED.createElement('a', {
+      href,
+      className: itemClasses,
+      style,
+      onClick,
+      children: [iconElement, ED.createElement('span', null, children)],
+    });
+  }
+
+  return ED.createElement('span', {
+    className: itemClasses,
+    style,
+    onClick,
+    children: [iconElement, ED.createElement('span', null, children)],
+  });
+}
+
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+
+function Breadcrumb(props) {
+  const {
+    children,
+    items = [],
+    separator = '/',
+    separatorIcon,
+    maxItems,
+    className = '',
+    style = {},
+    renderItem,
+  } = props;
+
+  const separatorElement = separatorIcon
+    ? ED.createElement('span', {
+        className: 'ed-mx-2 ed-text-gray-400 ed-flex ed-items-center',
+        children: typeof separatorIcon === 'string'
+          ? ED.createElement('i', { className: separatorIcon })
+          : separatorIcon,
+      })
+    : ED.createElement('span', {
+        className: 'ed-mx-2 ed-text-gray-400 ed-select-none',
+      }, separator);
+
+  const breadcrumbItems = items.length > 0
+    ? items.map((item, idx) => {
+        const isLast = idx === items.length - 1;
+        return {
+          ...item,
+          active: isLast,
+          key: item.key || idx,
+        };
+      })
+    : (Array.isArray(children) ? children : [children]).map((child, idx) => child);
+
+  const allItems = breadcrumbItems;
+
+  let displayItems = allItems;
+  let overflowItems = [];
+
+  if (maxItems && allItems.length > maxItems) {
+    const start = allItems.slice(0, 1);
+    const end = allItems.slice(-(maxItems - 1));
+    overflowItems = allItems.slice(1, -(maxItems - 1));
+    displayItems = [
+      start[0],
+      { key: 'overflow', label: '...', dropdownItems: overflowItems, isOverflow: true },
+      ...end,
+    ];
+  }
+
+  const renderBreadcrumbItem = (item, idx) => {
+    if (item && item.isOverflow) {
+      return ED.createElement(BreadcrumbItem, {
+        key: 'overflow',
+        dropdownItems: overflowItems,
+        children: '...',
+      });
+    }
+
+    if (items.length > 0) {
+      const renderedItem = renderItem
+        ? renderItem(item, idx)
+        : ED.createElement(BreadcrumbItem, {
+            key: item.key || idx,
+            href: item.href,
+            onClick: item.onClick,
+            icon: item.icon,
+            active: item.active,
+            children: item.label || item.title,
+          });
+      return renderedItem;
+    }
+
+    return item;
+  };
+
+  const breadcrumbElements = displayItems.map((item, idx) => {
+    const rendered = renderBreadcrumbItem(item, idx);
+    const isLast = idx === displayItems.length - 1;
+    return ED.createElement(ED.Fragment, { key: idx },
+      rendered,
+      !isLast ? separatorElement : null,
+    );
+  });
+
+  return ED.createElement('nav', {
+    'aria-label': 'Breadcrumb',
+    className: `ed-flex ed-items-center ed-flex-wrap ed-py-2 ${className}`,
+    style,
+    children: ED.createElement('ol', {
+      className: 'ed-flex ed-items-center ed-gap-0 ed-list-none ed-m-0 ed-p-0',
+      children: breadcrumbElements,
+    }),
+  });
+}
+
+Breadcrumb.displayName = 'Breadcrumb';
+Breadcrumb.Item = BreadcrumbItem;
+
+module.exports = Breadcrumb;

package/src/jsx/components/Button.jsx

@@ -0,0 +1,188 @@
+/**
+ * Button Component for ElementDrawing Framework
+ * Supports variants, sizes, loading, icons, disabled, ripple, full-width
+ */
+const ED = require('../core/element');
+
+const BUTTON_VARIANTS = {
+  primary: 'ed-bg-blue-600 ed-text-white hover:ed-bg-blue-700 focus:ed-ring-blue-500 active:ed-bg-blue-800',
+  secondary: 'ed-bg-gray-200 ed-text-gray-800 hover:ed-bg-gray-300 focus:ed-ring-gray-400 active:ed-bg-gray-400',
+  success: 'ed-bg-green-600 ed-text-white hover:ed-bg-green-700 focus:ed-ring-green-500 active:ed-bg-green-800',
+  warning: 'ed-bg-yellow-500 ed-text-white hover:ed-bg-yellow-600 focus:ed-ring-yellow-400 active:ed-bg-yellow-700',
+  danger: 'ed-bg-red-600 ed-text-white hover:ed-bg-red-700 focus:ed-ring-red-500 active:ed-bg-red-800',
+  ghost: 'ed-bg-transparent ed-text-gray-700 hover:ed-bg-gray-100 focus:ed-ring-gray-300 active:ed-bg-gray-200',
+  link: 'ed-bg-transparent ed-text-blue-600 hover:ed-text-blue-800 hover:ed-underline focus:ed-ring-blue-300 ed-p-0 ed-shadow-none',
+};
+
+const BUTTON_SIZES = {
+  xs: 'ed-text-xs ed-px-2 ed-py-1 ed-rounded',
+  sm: 'ed-text-sm ed-px-3 ed-py-1.5 ed-rounded-md',
+  md: 'ed-text-sm ed-px-4 ed-py-2 ed-rounded-md',
+  lg: 'ed-text-base ed-px-5 ed-py-2.5 ed-rounded-lg',
+  xl: 'ed-text-lg ed-px-6 ed-py-3 ed-rounded-lg',
+};
+
+const ICON_SIZES = {
+  xs: 'ed-w-3 ed-h-3',
+  sm: 'ed-w-4 ed-h-4',
+  md: 'ed-w-4 ed-h-4',
+  lg: 'ed-w-5 ed-h-5',
+  xl: 'ed-w-6 ed-h-6',
+};
+
+function Button(props) {
+  const {
+    children,
+    variant = 'primary',
+    size = 'md',
+    loading = false,
+    loadingText = '',
+    icon,
+    iconRight,
+    disabled = false,
+    ripple = true,
+    fullWidth = false,
+    type = 'button',
+    htmlType = 'button',
+    className = '',
+    style = {},
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    onFocus,
+    onBlur,
+    id,
+    name,
+    value,
+    autoFocus = false,
+    tabIndex,
+    ariaLabel,
+    ariaDisabled,
+    role,
+    round = false,
+    block = false,
+    danger: isDanger = false,
+    href,
+    target,
+    shape,
+  } = props;
+
+  const isDisabled = disabled || loading;
+  const variantClass = BUTTON_VARIANTS[variant] || BUTTON_VARIANTS.primary;
+  const sizeClass = BUTTON_SIZES[size] || BUTTON_SIZES.md;
+  const iconSizeClass = ICON_SIZES[size] || ICON_SIZES.md;
+
+  const baseClasses = [
+    'ed-inline-flex ed-items-center ed-justify-center ed-font-medium',
+    'ed-transition-all ed-duration-200 ed-ease-in-out',
+    'ed-select-none ed-whitespace-nowrap ed-relative ed-overflow-hidden',
+    'focus:ed-outline-none focus:ed-ring-2 focus:ed-ring-offset-2',
+    variantClass,
+    sizeClass,
+    round ? 'ed-rounded-full' : '',
+    fullWidth || block ? 'ed-w-full' : '',
+    isDisabled ? 'ed-opacity-60 ed-cursor-not-allowed ed-pointer-events-none' : 'ed-cursor-pointer',
+    isDanger && variant === 'primary' ? 'ed-bg-red-600 hover:ed-bg-red-700 focus:ed-ring-red-500' : '',
+    className,
+  ].filter(Boolean).join(' ');
+
+  const spinnerElement = loading
+    ? ED.createElement('svg', {
+        className: `ed-animate-spin ${iconSizeClass} ${children || loadingText ? 'ed--ml-1 ed-mr-2' : ''}`,
+        xmlns: 'http://www.w3.org/2000/svg',
+        fill: 'none',
+        viewBox: '0 0 24 24',
+        children: [
+          ED.createElement('circle', {
+            key: 'spin-bg',
+            className: 'ed-opacity-25',
+            cx: '12', cy: '12', r: '10',
+            stroke: 'currentColor', strokeWidth: '4',
+          }),
+          ED.createElement('path', {
+            key: 'spin-fg',
+            className: 'ed-opacity-75',
+            fill: 'currentColor',
+            d: 'M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z',
+          }),
+        ],
+      })
+    : null;
+
+  const iconElement = icon && !loading
+    ? ED.createElement('span', {
+        className: `ed-inline-flex ed-items-center ${iconSizeClass} ${children ? 'ed-mr-2' : ''}`,
+        children: typeof icon === 'string'
+          ? ED.createElement('i', { className: icon })
+          : icon,
+      })
+    : null;
+
+  const iconRightElement = iconRight && !loading
+    ? ED.createElement('span', {
+        className: `ed-inline-flex ed-items-center ${iconSizeClass} ${children ? 'ed-ml-2' : ''}`,
+        children: typeof iconRight === 'string'
+          ? ED.createElement('i', { className: iconRight })
+          : iconRight,
+      })
+    : null;
+
+  const rippleContainer = ripple && !isDisabled
+    ? ED.createElement('span', {
+        className: 'ed-absolute ed-inset-0 ed-overflow-hidden ed-rounded-inherit ed-pointer-events-none',
+        'data-ripple': 'true',
+      })
+    : null;
+
+  const contentElement = loading && loadingText
+    ? ED.createElement('span', { className: 'ed-truncate' }, loadingText)
+    : children
+      ? ED.createElement('span', { className: 'ed-truncate' }, children)
+      : null;
+
+  const buttonChildren = [
+    spinnerElement,
+    iconElement,
+    contentElement,
+    iconRightElement,
+    rippleContainer,
+  ].filter(Boolean);
+
+  const buttonProps = {
+    id,
+    name,
+    value,
+    type: htmlType || type,
+    className: baseClasses,
+    style,
+    disabled: isDisabled,
+    autoFocus,
+    tabIndex: tabIndex ?? (isDisabled ? -1 : undefined),
+    'aria-label': ariaLabel,
+    'aria-disabled': ariaDisabled ?? isDisabled,
+    role: role || 'button',
+    onClick: isDisabled ? undefined : onClick,
+    onMouseEnter,
+    onMouseLeave,
+    onFocus,
+    onBlur,
+  };
+
+  if (href && !isDisabled) {
+    return ED.createElement('a', {
+      ...buttonProps,
+      href,
+      target,
+      rel: target === '_blank' ? 'noopener noreferrer' : undefined,
+      children: buttonChildren,
+    });
+  }
+
+  return ED.createElement('button', { ...buttonProps, children: buttonChildren });
+}
+
+Button.displayName = 'Button';
+Button.VARIANTS = BUTTON_VARIANTS;
+Button.SIZES = BUTTON_SIZES;
+
+module.exports = Button;