elementdrawing 1.0.0

package/src/jsx/components/Accordion.jsx

@@ -0,0 +1,210 @@
+/**
+ * Accordion Component for ElementDrawing Framework
+ * Supports single/multiple expand, icons, animations, nested, disabled items, custom header
+ */
+const ED = require('../core/element');
+
+function AccordionItem(props) {
+  const {
+    children,
+    title,
+    header,
+    icon,
+    expandIcon,
+    disabled = false,
+    expanded = false,
+    onToggle,
+    className = '',
+    style = {},
+    key: itemKey,
+    extra,
+    showArrow = true,
+    destroyInactive = false,
+    forceRender = false,
+    animated = true,
+  } = props;
+
+  const headerClasses = [
+    'ed-flex ed-items-center ed-w-full ed-px-4 ed-py-3 ed-text-left ed-transition-colors ed-duration-200',
+    'hover:ed-bg-gray-50 focus:ed-outline-none focus:ed-ring-2 focus:ed-ring-inset focus:ed-ring-blue-500',
+    disabled ? 'ed-opacity-50 ed-cursor-not-allowed' : 'ed-cursor-pointer',
+    expanded ? 'ed-bg-gray-50' : '',
+    'ed-border-b ed-border-gray-100',
+    className,
+  ].filter(Boolean).join(' ');
+
+  const contentClasses = [
+    'ed-overflow-hidden ed-transition-all ed-duration-300',
+    animated ? 'ed-transition-[max-height] ed-ease-in-out' : '',
+    expanded ? 'ed-max-h-[2000px] ed-opacity-100' : 'ed-max-h-0 ed-opacity-0',
+  ].filter(Boolean).join(' ');
+
+  const defaultExpandIcon = ED.createElement('svg', {
+    className: `ed-w-5 ed-h-5 ed-transition-transform ed-duration-300 ed-text-gray-400 ${expanded ? 'ed-rotate-180' : ''}`,
+    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' }),
+  });
+
+  const headerContent = header || ED.createElement(ED.Fragment, null,
+    icon
+      ? ED.createElement('span', { className: 'ed-mr-3 ed-flex ed-items-center ed-justify-center ed-w-5 ed-h-5 ed-text-gray-500' },
+          typeof icon === 'string' ? ED.createElement('i', { className: icon }) : icon
+        )
+      : null,
+    ED.createElement('span', { className: 'ed-flex-1 ed-font-medium ed-text-gray-900' }, title),
+    extra
+      ? ED.createElement('span', { className: 'ed-mr-2 ed-text-sm ed-text-gray-500', onClick: (e) => e.stopPropagation() }, extra)
+      : null,
+    showArrow
+      ? ED.createElement('span', { className: 'ed-ml-auto ed-flex ed-items-center' },
+          expandIcon || defaultExpandIcon
+        )
+      : null
+  );
+
+  const handleToggle = () => {
+    if (!disabled) onToggle?.();
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleToggle();
+    }
+  };
+
+  return ED.createElement('div', {
+    className: 'ed-border ed-border-gray-200 ed-rounded-lg ed-overflow-hidden ed-mb-2',
+    style,
+    children: [
+      ED.createElement('button', {
+        key: 'header',
+        className: headerClasses,
+        onClick: handleToggle,
+        onKeyDown: handleKeyDown,
+        'aria-expanded': expanded,
+        'aria-disabled': disabled,
+        role: 'button',
+        tabIndex: disabled ? -1 : 0,
+        children: headerContent,
+      }),
+      ED.createElement('div', {
+        key: 'content',
+        className: contentClasses,
+        role: 'region',
+        children: (expanded || forceRender)
+          ? ED.createElement('div', { className: 'ed-px-4 ed-py-3 ed-text-gray-700 ed-border-t ed-border-gray-100' }, children)
+          : null,
+      }),
+    ],
+  });
+}
+
+AccordionItem.displayName = 'AccordionItem';
+
+function Accordion(props) {
+  const {
+    children,
+    items = [],
+    multiple = false,
+    defaultActiveKey,
+    activeKey,
+    onChange,
+    className = '',
+    style = {},
+    icon,
+    expandIcon,
+    animated = true,
+    destroyInactive = false,
+    bordered = true,
+    ghost = false,
+    accordion = !multiple,
+    size = 'md',
+  } = props;
+
+  const internalActiveKeys = activeKey !== undefined
+    ? (Array.isArray(activeKey) ? activeKey : [activeKey])
+    : defaultActiveKey !== undefined
+      ? (Array.isArray(defaultActiveKey) ? defaultActiveKey : [defaultActiveKey])
+      : [];
+
+  const handleToggle = (key) => {
+    const isOpen = internalActiveKeys.includes(key);
+    let newKeys;
+    if (accordion || !multiple) {
+      newKeys = isOpen ? [] : [key];
+    } else {
+      newKeys = isOpen ? internalActiveKeys.filter(k => k !== key) : [...internalActiveKeys, key];
+    }
+    onChange?.(multiple ? newKeys : newKeys[0] || null);
+  };
+
+  const sizeClasses = {
+    sm: 'ed-text-sm',
+    md: 'ed-text-base',
+    lg: 'ed-text-lg',
+  };
+
+  const accordionClasses = [
+    sizeClasses[size] || sizeClasses.md,
+    ghost ? '' : bordered ? 'ed-divide-y ed-divide-gray-200' : '',
+    'ed-accordion',
+    className,
+  ].filter(Boolean).join(' ');
+
+  const renderItems = () => {
+    if (items.length > 0) {
+      return items.map((item, idx) =>
+        ED.createElement(AccordionItem, {
+          key: item.key || idx,
+          title: item.title,
+          icon: item.icon || icon,
+          expandIcon: item.expandIcon || expandIcon,
+          disabled: item.disabled,
+          expanded: internalActiveKeys.includes(item.key || String(idx)),
+          onToggle: () => handleToggle(item.key || String(idx)),
+          extra: item.extra,
+          showArrow: item.showArrow !== undefined ? item.showArrow : true,
+          animated,
+          destroyInactive,
+          forceRender: item.forceRender,
+          children: item.children || item.content,
+        })
+      );
+    }
+
+    const childArray = Array.isArray(children) ? children : [children];
+    return childArray.map((child, idx) => {
+      if (!child || !child.props) return child;
+      const childKey = child.props.key || String(idx);
+      return ED.cloneElement
+        ? ED.cloneElement(child, {
+            key: childKey,
+            expanded: internalActiveKeys.includes(childKey),
+            onToggle: () => handleToggle(childKey),
+            icon: child.props.icon || icon,
+            expandIcon: child.props.expandIcon || expandIcon,
+            animated,
+          })
+        : child;
+    });
+  };
+
+  const wrapperClasses = ghost
+    ? [
+        'ed-border-0 ed-bg-transparent',
+        className,
+      ].filter(Boolean).join(' ')
+    : accordionClasses;
+
+  return ED.createElement('div', {
+    className: wrapperClasses,
+    style,
+    children: renderItems(),
+  });
+}
+
+Accordion.displayName = 'Accordion';
+Accordion.Item = AccordionItem;
+
+module.exports = Accordion;

package/src/jsx/components/Alert.jsx

@@ -0,0 +1,169 @@
+/**
+ * Alert Component for ElementDrawing Framework
+ * Supports variants, closable, icon, title + description, banner mode, auto-dismiss
+ */
+const ED = require('../core/element');
+
+const ALERT_VARIANTS = {
+  info: {
+    container: 'ed-bg-blue-50 ed-border-blue-200 ed-text-blue-800',
+    icon: 'ed-text-blue-500',
+    close: 'ed-text-blue-500 hover:ed-bg-blue-100',
+  },
+  success: {
+    container: 'ed-bg-green-50 ed-border-green-200 ed-text-green-800',
+    icon: 'ed-text-green-500',
+    close: 'ed-text-green-500 hover:ed-bg-green-100',
+  },
+  warning: {
+    container: 'ed-bg-yellow-50 ed-border-yellow-200 ed-text-yellow-800',
+    icon: 'ed-text-yellow-500',
+    close: 'ed-text-yellow-500 hover:ed-bg-yellow-100',
+  },
+  danger: {
+    container: 'ed-bg-red-50 ed-border-red-200 ed-text-red-800',
+    icon: 'ed-text-red-500',
+    close: 'ed-text-red-500 hover:ed-bg-red-100',
+  },
+  error: {
+    container: 'ed-bg-red-50 ed-border-red-200 ed-text-red-800',
+    icon: 'ed-text-red-500',
+    close: 'ed-text-red-500 hover:ed-bg-red-100',
+  },
+};
+
+const ALERT_ICONS = {
+  info: 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' }),
+  }),
+  success: 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' }),
+  }),
+  warning: 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' }),
+  }),
+  danger: 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' }),
+  }),
+  error: 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' }),
+  }),
+};
+
+function Alert(props) {
+  const {
+    children,
+    variant = 'info',
+    type = variant,
+    closable = false,
+    onClose,
+    showIcon = true,
+    icon,
+    title,
+    description,
+    banner = false,
+    autoDismiss,
+    onDismiss,
+    className = '',
+    style = {},
+    action,
+    rounded = true,
+    bordered = true,
+    outlined = false,
+    size = 'md',
+  } = props;
+
+  const currentType = type || variant;
+  const variantStyle = ALERT_VARIANTS[currentType] || ALERT_VARIANTS.info;
+
+  const sizeClasses = {
+    sm: 'ed-text-xs ed-py-2 ed-px-3',
+    md: 'ed-text-sm ed-py-3 ed-px-4',
+    lg: 'ed-text-base ed-py-4 ed-px-5',
+  };
+
+  const containerClasses = [
+    'ed-flex ed-items-start ed-gap-3',
+    variantStyle.container,
+    banner ? 'ed-rounded-none ed-border-x-0 ed-border-t-0' : rounded ? 'ed-rounded-lg' : '',
+    bordered ? 'ed-border' : '',
+    outlined ? 'ed-bg-transparent' : '',
+    sizeClasses[size] || sizeClasses.md,
+    'ed-transition-all ed-duration-300',
+    className,
+  ].filter(Boolean).join(' ');
+
+  const iconElement = showIcon
+    ? ED.createElement('span', {
+        className: `ed-flex-shrink-0 ed-mt-0.5 ${variantStyle.icon}`,
+        children: icon || ALERT_ICONS[currentType] || ALERT_ICONS.info,
+      })
+    : null;
+
+  const contentElement = ED.createElement('div', { className: 'ed-flex-1 ed-min-w-0' },
+    title
+      ? ED.createElement('div', { className: 'ed-font-semibold ed-mb-0.5' }, title)
+      : null,
+    description
+      ? ED.createElement('div', { className: 'ed-text-sm ed-opacity-80' }, description)
+      : null,
+    children
+      ? ED.createElement('div', { className: title || description ? 'ed-mt-1 ed-text-sm ed-opacity-90' : '' }, children)
+      : null
+  );
+
+  const actionElement = action
+    ? ED.createElement('div', { className: 'ed-flex-shrink-0 ed-ml-2' }, action)
+    : null;
+
+  const closeElement = closable
+    ? ED.createElement('button', {
+        className: `ed-flex-shrink-0 ed-p-1 ed-rounded ed-transition-colors ${variantStyle.close}`,
+        onClick: onClose,
+        'aria-label': 'Close alert',
+        type: 'button',
+        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 progressBar = autoDismiss
+    ? 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' },
+        ED.createElement('div', {
+          className: `ed-h-full ed-bg-current ed-opacity-30`,
+          style: { animation: `ed-shrink ${autoDismiss}ms linear forwards` },
+        })
+      )
+    : null;
+
+  return ED.createElement('div', {
+    className: containerClasses,
+    style: { position: 'relative', ...style },
+    role: currentType === 'danger' || currentType === 'error' ? 'alert' : 'status',
+    children: [
+      iconElement,
+      contentElement,
+      actionElement,
+      closeElement,
+      progressBar,
+    ].filter(Boolean),
+  });
+}
+
+Alert.displayName = 'Alert';
+Alert.VARIANTS = ALERT_VARIANTS;
+
+module.exports = Alert;

package/src/jsx/components/Avatar.jsx

@@ -0,0 +1,214 @@
+/**
+ * Avatar Component for ElementDrawing Framework
+ * Supports sizes, shapes, image/initials/icon, status indicator, avatar group, overlap
+ */
+const ED = require('../core/element');
+
+const AVATAR_SIZES = {
+  xs: { container: 'ed-w-6 ed-h-6 ed-text-xs', icon: 'ed-w-3 ed-h-3', indicator: 'ed-w-1.5 ed-h-1.5' },
+  sm: { container: 'ed-w-8 ed-h-8 ed-text-sm', icon: 'ed-w-4 ed-h-4', indicator: 'ed-w-2 ed-h-2' },
+  md: { container: 'ed-w-10 ed-h-10 ed-text-base', icon: 'ed-w-5 ed-h-5', indicator: 'ed-w-2.5 ed-h-2.5' },
+  lg: { container: 'ed-w-12 ed-h-12 ed-text-lg', icon: 'ed-w-6 ed-h-6', indicator: 'ed-w-3 ed-h-3' },
+  xl: { container: 'ed-w-14 ed-h-14 ed-text-xl', icon: 'ed-w-7 ed-h-7', indicator: 'ed-w-3.5 ed-h-3.5' },
+  '2xl': { container: 'ed-w-16 ed-h-16 ed-text-2xl', icon: 'ed-w-8 ed-h-8', indicator: 'ed-w-4 ed-h-4' },
+};
+
+const SHAPE_CLASSES = {
+  circle: 'ed-rounded-full',
+  square: 'ed-rounded-none',
+  rounded: 'ed-rounded-lg',
+};
+
+const STATUS_COLORS = {
+  online: 'ed-bg-green-500',
+  offline: 'ed-bg-gray-400',
+  away: 'ed-bg-yellow-500',
+  busy: 'ed-bg-red-500',
+  doNotDisturb: 'ed-bg-red-600',
+};
+
+const BG_COLORS = [
+  'ed-bg-blue-500',
+  'ed-bg-green-500',
+  'ed-bg-yellow-500',
+  'ed-bg-red-500',
+  'ed-bg-purple-500',
+  'ed-bg-pink-500',
+  'ed-bg-indigo-500',
+  'ed-bg-teal-500',
+];
+
+function getColorFromName(name) {
+  if (!name) return BG_COLORS[0];
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return BG_COLORS[Math.abs(hash) % BG_COLORS.length];
+}
+
+function getInitials(name) {
+  if (!name) return '';
+  const parts = name.trim().split(/\s+/);
+  if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+  return name.slice(0, 2).toUpperCase();
+}
+
+function Avatar(props) {
+  const {
+    src,
+    alt = '',
+    icon,
+    name,
+    size = 'md',
+    shape = 'circle',
+    status,
+    statusColor,
+    className = '',
+    style = {},
+    onClick,
+    onError,
+    bgColor,
+    textColor = 'ed-text-white',
+    bordered = false,
+    borderColor = 'ed-border-white',
+    boxShadow,
+    draggable = false,
+    loading = false,
+    fit = 'cover',
+  } = props;
+
+  const sizeConfig = AVATAR_SIZES[size] || AVATAR_SIZES.md;
+  const shapeClass = SHAPE_CLASSES[shape] || SHAPE_CLASSES.circle;
+
+  const containerClasses = [
+    'ed-inline-flex ed-items-center ed-justify-center ed-relative ed-flex-shrink-0 ed-overflow-hidden',
+    sizeConfig.container,
+    shapeClass,
+    bgColor || (!src ? getColorFromName(name) : ''),
+    textColor,
+    bordered ? `ed-border-2 ${borderColor}` : '',
+    onClick ? 'ed-cursor-pointer hover:ed-opacity-80 ed-transition-opacity' : '',
+    loading ? 'ed-animate-pulse ed-bg-gray-300' : '',
+    'ed-font-medium ed-select-none',
+    className,
+  ].filter(Boolean).join(' ');
+
+  const statusIndicator = status
+    ? ED.createElement('span', {
+        className: [
+          'ed-absolute ed-bottom-0 ed-right-0 ed-border-2 ed-border-white ed-rounded-full',
+          STATUS_COLORS[status] || statusColor || 'ed-bg-green-500',
+          sizeConfig.indicator,
+        ].join(' '),
+      })
+    : null;
+
+  let contentElement;
+  if (loading) {
+    contentElement = null;
+  } else if (src) {
+    contentElement = ED.createElement('img', {
+      src,
+      alt: alt || name || 'Avatar',
+      className: `ed-w-full ed-h-full ed-object-${fit}`,
+      onError,
+      draggable,
+    });
+  } else if (icon) {
+    contentElement = ED.createElement('span', {
+      className: sizeConfig.icon,
+      children: typeof icon === 'string' ? ED.createElement('i', { className: icon }) : icon,
+    });
+  } else if (name) {
+    contentElement = ED.createElement('span', null, getInitials(name));
+  } else {
+    contentElement = ED.createElement('svg', {
+      className: sizeConfig.icon,
+      fill: 'currentColor', viewBox: '0 0 24 24',
+      children: ED.createElement('path', { d: 'M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z' }),
+    });
+  }
+
+  return ED.createElement('span', {
+    className: containerClasses,
+    style: {
+      ...(boxShadow ? { boxShadow } : {}),
+      ...style,
+    },
+    onClick,
+    role: onClick ? 'button' : undefined,
+    tabIndex: onClick ? 0 : undefined,
+    children: [contentElement, statusIndicator],
+  });
+}
+
+Avatar.displayName = 'Avatar';
+
+function AvatarGroup(props) {
+  const {
+    children,
+    maxCount,
+    size = 'md',
+    shape = 'circle',
+    overlap = true,
+    className = '',
+    style = {},
+    direction = 'horizontal',
+    maxStyle,
+    onMaxClick,
+  } = props;
+
+  const childArray = Array.isArray(children) ? children : [children];
+  const displayChildren = maxCount ? childArray.slice(0, maxCount) : childArray;
+  const remaining = maxCount ? childArray.length - maxCount : 0;
+
+  const groupClasses = [
+    'ed-flex ed-items-center',
+    direction === 'horizontal' ? 'ed-flex-row' : 'ed-flex-col',
+    overlap ? (direction === 'horizontal' ? 'ed--space-x-2' : 'ed--space-y-2') : 'ed-gap-1',
+    className,
+  ].filter(Boolean).join(' ');
+
+  const overflowAvatar = remaining > 0
+    ? ED.createElement(Avatar, {
+        size,
+        shape,
+        bgColor: 'ed-bg-gray-200',
+        textColor: 'ed-text-gray-600',
+        className: 'ed-ring-2 ed-ring-white',
+        style: maxStyle,
+        onClick: onMaxClick,
+        name: `+${remaining}`,
+      })
+    : null;
+
+  const styledChildren = displayChildren.map((child, idx) => {
+    if (!child || !child.props) return child;
+    const overlapStyle = overlap
+      ? { zIndex: displayChildren.length - idx, position: 'relative' }
+      : {};
+    return ED.cloneElement
+      ? ED.cloneElement(child, {
+          key: idx,
+          size: child.props.size || size,
+          shape: child.props.shape || shape,
+          style: { ...overlapStyle, ...child.props.style },
+          bordered: child.props.bordered !== undefined ? child.props.bordered : true,
+        })
+      : child;
+  });
+
+  return ED.createElement('div', {
+    className: groupClasses,
+    style,
+    children: [...styledChildren, overflowAvatar].filter(Boolean),
+  });
+}
+
+AvatarGroup.displayName = 'AvatarGroup';
+Avatar.Group = AvatarGroup;
+Avatar.SIZES = AVATAR_SIZES;
+Avatar.SHAPES = SHAPE_CLASSES;
+
+module.exports = Avatar;