elementdrawing 1.0.0

package/src/jsx/components/Card.jsx

@@ -0,0 +1,192 @@
+/**
+ * Card Component for ElementDrawing Framework
+ * Supports header, body, footer, shadows, hoverable, clickable, bordered, image, horizontal
+ */
+const ED = require('../core/element');
+
+const CARD_SHADOWS = {
+  none: '',
+  sm: 'ed-shadow-sm',
+  md: 'ed-shadow-md',
+  lg: 'ed-shadow-lg',
+  xl: 'ed-shadow-xl',
+};
+
+function CardHeader(props) {
+  const {
+    children,
+    className = '',
+    title,
+    subtitle,
+    extra,
+    bordered = true,
+    style = {},
+  } = props;
+
+  return ED.createElement('div', {
+    className: [
+      'ed-px-6 ed-py-4',
+      bordered ? 'ed-border-b ed-border-gray-200' : '',
+      'ed-card-header',
+      className,
+    ].filter(Boolean).join(' '),
+    style,
+    children: [
+      title
+        ? ED.createElement('div', { className: 'ed-flex ed-items-center ed-justify-between', key: 'header-content' },
+            ED.createElement('div', { className: 'ed-flex ed-flex-col' },
+              ED.createElement('h3', { className: 'ed-text-lg ed-font-semibold ed-text-gray-900' }, title),
+              subtitle
+                ? ED.createElement('p', { className: 'ed-text-sm ed-text-gray-500 ed-mt-1' }, subtitle)
+                : null
+            ),
+            extra
+              ? ED.createElement('div', { className: 'ed-ml-4 ed-flex ed-items-center' }, extra)
+              : null
+          )
+        : children,
+    ].filter(Boolean),
+  });
+}
+
+CardHeader.displayName = 'CardHeader';
+
+function CardBody(props) {
+  const { children, className = '', style = {}, padding = true } = props;
+
+  return ED.createElement('div', {
+    className: [
+      padding ? 'ed-px-6 ed-py-4' : '',
+      'ed-flex-1 ed-card-body',
+      className,
+    ].filter(Boolean).join(' '),
+    style,
+    children,
+  });
+}
+
+CardBody.displayName = 'CardBody';
+
+function CardFooter(props) {
+  const {
+    children,
+    className = '',
+    bordered = true,
+    style = {},
+    align = 'right',
+  } = props;
+
+  const alignClass = {
+    left: 'ed-justify-start',
+    center: 'ed-justify-center',
+    right: 'ed-justify-end',
+    between: 'ed-justify-between',
+  }[align] || 'ed-justify-end';
+
+  return ED.createElement('div', {
+    className: [
+      'ed-px-6 ed-py-3 ed-flex ed-items-center',
+      bordered ? 'ed-border-t ed-border-gray-200' : '',
+      alignClass,
+      'ed-card-footer',
+      className,
+    ].filter(Boolean).join(' '),
+    style,
+    children,
+  });
+}
+
+CardFooter.displayName = 'CardFooter';
+
+function Card(props) {
+  const {
+    children,
+    className = '',
+    style = {},
+    shadow = 'sm',
+    hoverable = false,
+    clickable = false,
+    bordered = true,
+    cover,
+    horizontal = false,
+    loading = false,
+    size = 'default',
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    id,
+    role,
+    tabIndex,
+  } = props;
+
+  const sizeClasses = {
+    small: 'ed-text-sm',
+    default: '',
+    large: 'ed-text-base',
+  };
+
+  const shadowClass = CARD_SHADOWS[shadow] || CARD_SHADOWS.sm;
+
+  const baseClasses = [
+    'ed-bg-white ed-rounded-lg ed-overflow-hidden ed-transition-all ed-duration-200',
+    shadowClass,
+    bordered ? 'ed-border ed-border-gray-200' : '',
+    hoverable ? 'hover:ed-shadow-lg hover:ed--translate-y-0.5 ed-cursor-default' : '',
+    clickable ? 'ed-cursor-pointer hover:ed-shadow-md hover:ed-border-blue-300 active:ed-scale-[0.99]' : '',
+    horizontal ? 'ed-flex ed-flex-row' : 'ed-flex ed-flex-col',
+    sizeClasses[size] || '',
+    'ed-card',
+    className,
+  ].filter(Boolean).join(' ');
+
+  const coverElement = cover
+    ? ED.createElement('div', {
+        className: [
+          'ed-overflow-hidden',
+          horizontal ? 'ed-w-48 ed-flex-shrink-0' : 'ed-w-full',
+          'ed-card-cover',
+        ].join(' '),
+        children: typeof cover === 'string'
+          ? ED.createElement('img', {
+              src: cover,
+              className: 'ed-w-full ed-h-full ed-object-cover',
+              alt: 'card cover',
+            })
+          : cover,
+      })
+    : null;
+
+  const loadingOverlay = loading
+    ? ED.createElement('div', {
+        className: 'ed-absolute ed-inset-0 ed-bg-white ed-bg-opacity-70 ed-flex ed-items-center ed-justify-center ed-z-10',
+        children: ED.createElement('div', {
+          className: 'ed-w-8 ed-h-8 ed-border-4 ed-border-blue-500 ed-border-t-transparent ed-rounded-full ed-animate-spin',
+        }),
+      })
+    : null;
+
+  const cardProps = {
+    id,
+    className: baseClasses,
+    style: { position: 'relative', ...style },
+    role: clickable ? 'button' : (role || 'region'),
+    tabIndex: clickable ? (tabIndex ?? 0) : tabIndex,
+    onClick: clickable ? onClick : undefined,
+    onMouseEnter,
+    onMouseLeave,
+    onKeyDown: clickable
+      ? (e) => { if (e.key === 'Enter' || e.key === ' ') onClick?.(e); }
+      : undefined,
+    children: [coverElement, loadingOverlay, children].filter(Boolean),
+  };
+
+  return ED.createElement('div', cardProps);
+}
+
+Card.displayName = 'Card';
+Card.Header = CardHeader;
+Card.Body = CardBody;
+Card.Footer = CardFooter;
+Card.SHADOWS = CARD_SHADOWS;
+
+module.exports = Card;

package/src/jsx/components/Carousel.jsx

@@ -0,0 +1,278 @@
+/**
+ * Carousel Component for ElementDrawing Framework
+ * Supports autoplay, dots, arrows, lazy loading, fade/slide transition, thumbnails, keyboard
+ */
+const ED = require('../core/element');
+
+function CarouselSlide(props) {
+  const {
+    children,
+    src,
+    alt = '',
+    title,
+    description,
+    className = '',
+    style = {},
+    active = false,
+  } = props;
+
+  return ED.createElement('div', {
+    className: [
+      'ed-absolute ed-inset-0 ed-w-full ed-h-full ed-flex ed-items-center ed-justify-center',
+      'ed-transition-opacity ed-duration-500',
+      active ? 'ed-opacity-100 ed-z-10' : 'ed-opacity-0 ed-z-0',
+      className,
+    ].filter(Boolean).join(' '),
+    style,
+    role: 'group',
+    'aria-roledescription': 'slide',
+    children: src
+      ? ED.createElement('div', { className: 'ed-relative ed-w-full ed-h-full' }, [
+          ED.createElement('img', {
+            key: 'img',
+            src,
+            alt: alt || title || 'Carousel slide',
+            className: 'ed-w-full ed-h-full ed-object-cover',
+            loading: 'lazy',
+          }),
+          title || description
+            ? ED.createElement('div', {
+                key: 'caption',
+                className: 'ed-absolute ed-bottom-0 ed-left-0 ed-right-0 ed-bg-gradient-to-t ed-from-black/60 ed-to-transparent ed-p-6',
+              }, [
+                title
+                  ? ED.createElement('h3', {
+                      key: 'title',
+                      className: 'ed-text-xl ed-font-bold ed-text-white ed-mb-1',
+                    }, title)
+                  : null,
+                description
+                  ? ED.createElement('p', {
+                      key: 'desc',
+                      className: 'ed-text-sm ed-text-gray-200',
+                    }, description)
+                  : null,
+              ].filter(Boolean))
+            : null,
+        ])
+      : children,
+  });
+}
+
+CarouselSlide.displayName = 'CarouselSlide';
+
+function Carousel(props) {
+  const {
+    children,
+    items = [],
+    autoplay = false,
+    autoplayInterval = 3000,
+    dots = true,
+    arrows = true,
+    lazyLoad = false,
+    effect = 'slide',
+    thumbnails = false,
+    keyboard = true,
+    loop = true,
+    currentIndex = 0,
+    onChange,
+    className = '',
+    style = {},
+    height = 400,
+    width,
+    pauseOnHover = true,
+    showIndicator = true,
+    indicatorPosition = 'bottom',
+    prevIcon,
+    nextIcon,
+    dotIcon,
+    onSlideClick,
+    draggable = false,
+    fade = false,
+    speed = 500,
+  } = props;
+
+  const currentEffect = fade ? 'fade' : effect;
+
+  const slides = items.length > 0
+    ? items.map((item, idx) => ({
+        key: item.key || idx,
+        src: item.src,
+        alt: item.alt,
+        title: item.title,
+        description: item.description,
+        content: item.children || item.content,
+        thumbnail: item.thumbnail || item.src,
+      }))
+    : (Array.isArray(children) ? children : [children]).map((child, idx) => ({
+        key: idx,
+        content: child,
+      }));
+
+  const handlePrev = () => {
+    const newIndex = currentIndex > 0 ? currentIndex - 1 : (loop ? slides.length - 1 : 0);
+    onChange?.(newIndex);
+  };
+
+  const handleNext = () => {
+    const newIndex = currentIndex < slides.length - 1 ? currentIndex + 1 : (loop ? 0 : slides.length - 1);
+    onChange?.(newIndex);
+  };
+
+  const handleKeyDown = (e) => {
+    if (!keyboard) return;
+    if (e.key === 'ArrowLeft') handlePrev();
+    if (e.key === 'ArrowRight') handleNext();
+  };
+
+  const defaultPrevIcon = ED.createElement('svg', {
+    className: 'ed-w-6 ed-h-6',
+    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-6 ed-h-6',
+    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' }),
+  });
+
+  const arrowPrev = arrows
+    ? ED.createElement('button', {
+        key: 'prev',
+        className: [
+          'ed-absolute ed-left-3 ed-top-1/2 ed--translate-y-1/2 ed-z-20',
+          'ed-w-10 ed-h-10 ed-rounded-full ed-bg-white/80 ed-shadow-md',
+          'ed-flex ed-items-center ed-justify-center',
+          'ed-text-gray-700 hover:ed-bg-white hover:ed-text-gray-900',
+          'ed-transition-all ed-duration-200',
+          'focus:ed-outline-none focus:ed-ring-2 focus:ed-ring-blue-500',
+          currentIndex === 0 && !loop ? 'ed-opacity-50 ed-cursor-not-allowed' : '',
+        ].filter(Boolean).join(' '),
+        onClick: handlePrev,
+        'aria-label': 'Previous slide',
+        children: prevIcon || defaultPrevIcon,
+      })
+    : null;
+
+  const arrowNext = arrows
+    ? ED.createElement('button', {
+        key: 'next',
+        className: [
+          'ed-absolute ed-right-3 ed-top-1/2 ed--translate-y-1/2 ed-z-20',
+          'ed-w-10 ed-h-10 ed-rounded-full ed-bg-white/80 ed-shadow-md',
+          'ed-flex ed-items-center ed-justify-center',
+          'ed-text-gray-700 hover:ed-bg-white hover:ed-text-gray-900',
+          'ed-transition-all ed-duration-200',
+          'focus:ed-outline-none focus:ed-ring-2 focus:ed-ring-blue-500',
+          currentIndex === slides.length - 1 && !loop ? 'ed-opacity-50 ed-cursor-not-allowed' : '',
+        ].filter(Boolean).join(' '),
+        onClick: handleNext,
+        'aria-label': 'Next slide',
+        children: nextIcon || defaultNextIcon,
+      })
+    : null;
+
+  const dotsElement = dots || showIndicator
+    ? ED.createElement('div', {
+        key: 'dots',
+        className: [
+          'ed-absolute ed-left-1/2 ed--translate-x-1/2 ed-z-20 ed-flex ed-gap-2',
+          indicatorPosition === 'top' ? 'ed-top-3' : 'ed-bottom-3',
+        ].join(' '),
+        children: slides.map((_, idx) =>
+          ED.createElement('button', {
+            key: idx,
+            className: [
+              'ed-w-2.5 ed-h-2.5 ed-rounded-full ed-transition-all ed-duration-300',
+              idx === currentIndex
+                ? 'ed-bg-white ed-w-6 ed-shadow-md'
+                : 'ed-bg-white/50 hover:ed-bg-white/70',
+            ].join(' '),
+            onClick: () => onChange?.(idx),
+            'aria-label': `Go to slide ${idx + 1}`,
+            'aria-current': idx === currentIndex,
+          })
+        ),
+      })
+    : null;
+
+  const thumbnailElement = thumbnails
+    ? ED.createElement('div', {
+        key: 'thumbnails',
+        className: 'ed-flex ed-gap-2 ed-mt-3 ed-overflow-x-auto ed-pb-2',
+        children: slides.map((slide, idx) =>
+          ED.createElement('button', {
+            key: idx,
+            className: [
+              'ed-flex-shrink-0 ed-w-16 ed-h-12 ed-rounded-md ed-overflow-hidden ed-border-2 ed-transition-all',
+              idx === currentIndex
+                ? 'ed-border-blue-500 ed-ring-2 ed-ring-blue-200'
+                : 'ed-border-transparent ed-opacity-60 hover:ed-opacity-100',
+            ].join(' '),
+            onClick: () => onChange?.(idx),
+            'aria-label': `Go to slide ${idx + 1}`,
+            children: slide.thumbnail
+              ? ED.createElement('img', {
+                  src: slide.thumbnail,
+                  className: 'ed-w-full ed-h-full ed-object-cover',
+                  alt: `Thumbnail ${idx + 1}`,
+                })
+              : ED.createElement('div', {
+                  className: 'ed-w-full ed-h-full ed-bg-gray-200 ed-flex ed-items-center ed-justify-center ed-text-xs ed-text-gray-500',
+                }, idx + 1),
+          })
+        ),
+      })
+    : null;
+
+  const slidesContainer = ED.createElement('div', {
+    className: 'ed-relative ed-w-full ed-overflow-hidden ed-rounded-lg',
+    style: { height, width },
+    onKeyDown: handleKeyDown,
+    tabIndex: keyboard ? 0 : undefined,
+    role: 'region',
+    'aria-roledescription': 'carousel',
+    children: [
+      ED.createElement('div', {
+        key: 'track',
+        className: 'ed-relative ed-w-full ed-h-full',
+        style: currentEffect === 'slide'
+          ? { transform: `translateX(-${currentIndex * 100}%)`, transition: `transform ${speed}ms ease` }
+          : {},
+        children: slides.map((slide, idx) =>
+          ED.createElement(CarouselSlide, {
+            key: slide.key,
+            src: slide.src,
+            alt: slide.alt,
+            title: slide.title,
+            description: slide.description,
+            active: idx === currentIndex,
+            className: currentEffect === 'slide' ? 'ed-relative' : '',
+            children: slide.content,
+          })
+        ),
+      }),
+      arrowPrev,
+      arrowNext,
+      dotsElement,
+      autoplay && pauseOnHover
+        ? ED.createElement('div', {
+            key: 'pause-zone',
+            className: 'ed-absolute ed-inset-0 ed-z-10',
+          })
+        : null,
+    ],
+  });
+
+  return ED.createElement('div', {
+    className: `ed-carousel ${className}`,
+    style,
+    children: [slidesContainer, thumbnailElement].filter(Boolean),
+  });
+}
+
+Carousel.displayName = 'Carousel';
+Carousel.Slide = CarouselSlide;
+
+module.exports = Carousel;

package/src/jsx/components/Checkbox.jsx

@@ -0,0 +1,215 @@
+/**
+ * Checkbox Component for ElementDrawing Framework
+ * Supports sizes, indeterminate, disabled, group, label, custom icon, color variants
+ */
+const ED = require('../core/element');
+
+const CHECKBOX_SIZES = {
+  xs: { box: 'ed-w-3.5 ed-h-3.5', label: 'ed-text-xs', icon: 'ed-w-2.5 ed-h-2.5' },
+  sm: { box: 'ed-w-4 ed-h-4', label: 'ed-text-sm', icon: 'ed-w-3 ed-h-3' },
+  md: { box: 'ed-w-4.5 ed-h-4.5', label: 'ed-text-sm', icon: 'ed-w-3 ed-h-3' },
+  lg: { box: 'ed-w-5 ed-h-5', label: 'ed-text-base', icon: 'ed-w-3.5 ed-h-3.5' },
+  xl: { box: 'ed-w-6 ed-h-6', label: 'ed-text-lg', icon: 'ed-w-4 ed-h-4' },
+};
+
+const CHECKBOX_COLORS = {
+  blue: {
+    checked: 'ed-bg-blue-600 ed-border-blue-600 focus:ed-ring-blue-500',
+    hover: 'hover:ed-border-blue-400',
+  },
+  green: {
+    checked: 'ed-bg-green-600 ed-border-green-600 focus:ed-ring-green-500',
+    hover: 'hover:ed-border-green-400',
+  },
+  red: {
+    checked: 'ed-bg-red-600 ed-border-red-600 focus:ed-ring-red-500',
+    hover: 'hover:ed-border-red-400',
+  },
+  yellow: {
+    checked: 'ed-bg-yellow-500 ed-border-yellow-500 focus:ed-ring-yellow-400',
+    hover: 'hover:ed-border-yellow-400',
+  },
+  purple: {
+    checked: 'ed-bg-purple-600 ed-border-purple-600 focus:ed-ring-purple-500',
+    hover: 'hover:ed-border-purple-400',
+  },
+  gray: {
+    checked: 'ed-bg-gray-600 ed-border-gray-600 focus:ed-ring-gray-500',
+    hover: 'hover:ed-border-gray-400',
+  },
+};
+
+function Checkbox(props) {
+  const {
+    checked,
+    defaultChecked = false,
+    onChange,
+    disabled = false,
+    indeterminate = false,
+    label,
+    children,
+    size = 'md',
+    color = 'blue',
+    className = '',
+    style = {},
+    id,
+    name,
+    value,
+    icon,
+    classNameLabel = '',
+    onFocus,
+    onBlur,
+    autoFocus = false,
+    tabIndex,
+    required = false,
+    error = false,
+    wrapperClassName = '',
+  } = props;
+
+  const sizeConfig = CHECKBOX_SIZES[size] || CHECKBOX_SIZES.md;
+  const colorConfig = CHECKBOX_COLORS[color] || CHECKBOX_COLORS.blue;
+
+  const isChecked = checked !== undefined ? checked : defaultChecked;
+
+  const boxClasses = [
+    'ed-relative ed-inline-flex ed-items-center ed-justify-center ed-border-2 ed-rounded ed-transition-all ed-duration-200',
+    sizeConfig.box,
+    isChecked || indeterminate ? colorConfig.checked : `ed-border-gray-300 ed-bg-white ${colorConfig.hover}`,
+    disabled ? 'ed-opacity-50 ed-cursor-not-allowed' : 'ed-cursor-pointer',
+    error && !isChecked ? 'ed-border-red-500' : '',
+    'focus:ed-ring-2 focus:ed-ring-offset-1',
+  ].filter(Boolean).join(' ');
+
+  const checkIcon = indeterminate
+    ? ED.createElement('svg', {
+        className: `${sizeConfig.icon} ed-text-white`,
+        fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor',
+        children: ED.createElement('path', { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 3, d: 'M5 12h14' }),
+      })
+    : isChecked
+      ? icon
+        ? (typeof icon === 'string' ? ED.createElement('i', { className: `${sizeConfig.icon} ed-text-white` }) : icon)
+        : ED.createElement('svg', {
+            className: `${sizeConfig.icon} ed-text-white`,
+            fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor',
+            children: ED.createElement('path', { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 3, d: 'M5 13l4 4L19 7' }),
+          })
+      : null;
+
+  const labelContent = label || children;
+
+  const labelClasses = [
+    sizeConfig.label,
+    disabled ? 'ed-text-gray-400 ed-cursor-not-allowed' : 'ed-text-gray-700 ed-cursor-pointer',
+    'ed-select-none ed-transition-colors',
+    classNameLabel,
+  ].filter(Boolean).join(' ');
+
+  return ED.createElement('label', {
+    className: [
+      'ed-inline-flex ed-items-center ed-gap-2',
+      disabled ? 'ed-cursor-not-allowed' : 'ed-cursor-pointer',
+      wrapperClassName,
+    ].filter(Boolean).join(' '),
+    style,
+  }, [
+    ED.createElement('input', {
+      key: 'input',
+      type: 'checkbox',
+      checked: isChecked,
+      defaultChecked,
+      onChange: disabled ? undefined : onChange,
+      disabled,
+      id,
+      name,
+      value,
+      className: 'ed-sr-only',
+      onFocus,
+      onBlur,
+      autoFocus,
+      tabIndex,
+      required,
+      ref: indeterminate ? (el) => { if (el) el.indeterminate = indeterminate; } : undefined,
+      'aria-checked': indeterminate ? 'mixed' : isChecked,
+      'aria-invalid': error,
+    }),
+    ED.createElement('span', {
+      key: 'box',
+      className: boxClasses,
+      'aria-hidden': 'true',
+      children: checkIcon,
+    }),
+    labelContent
+      ? ED.createElement('span', { key: 'label', className: labelClasses }, labelContent)
+      : null,
+  ]);
+}
+
+Checkbox.displayName = 'Checkbox';
+
+function CheckboxGroup(props) {
+  const {
+    children,
+    options = [],
+    value = [],
+    defaultValue = [],
+    onChange,
+    disabled = false,
+    direction = 'horizontal',
+    size = 'md',
+    color = 'blue',
+    className = '',
+    style = {},
+    name,
+  } = props;
+
+  const currentValue = value.length > 0 ? value : defaultValue;
+
+  const handleChange = (optionValue, checked) => {
+    const newValue = checked
+      ? [...currentValue, optionValue]
+      : currentValue.filter(v => v !== optionValue);
+    onChange?.(newValue);
+  };
+
+  const directionClasses = {
+    horizontal: 'ed-flex ed-flex-wrap ed-gap-4',
+    vertical: 'ed-flex ed-flex-col ed-gap-2',
+  };
+
+  const groupClasses = [
+    directionClasses[direction] || directionClasses.horizontal,
+    className,
+  ].filter(Boolean).join(' ');
+
+  const optionElements = options.length > 0
+    ? options.map((option, idx) => {
+        const opt = typeof option === 'string' ? { label: option, value: option } : option;
+        return ED.createElement(Checkbox, {
+          key: opt.value || idx,
+          checked: currentValue.includes(opt.value),
+          onChange: (e) => handleChange(opt.value, e.target?.checked ?? e),
+          disabled: disabled || opt.disabled,
+          label: opt.label,
+          size,
+          color,
+          value: opt.value,
+          name,
+        });
+      })
+    : children;
+
+  return ED.createElement('div', {
+    className: groupClasses,
+    style,
+    role: 'group',
+    children: optionElements,
+  });
+}
+
+CheckboxGroup.displayName = 'CheckboxGroup';
+Checkbox.Group = CheckboxGroup;
+Checkbox.SIZES = CHECKBOX_SIZES;
+Checkbox.COLORS = CHECKBOX_COLORS;
+
+module.exports = Checkbox;