elementdrawing 1.0.0

package/src/jsx/components/Progress.jsx

@@ -0,0 +1,252 @@
+/**
+ * Progress Component for ElementDrawing Framework
+ * Supports bar, circle, dashboard variants, sizes, colors, animation, striped, label, step progress
+ */
+const ED = require('../core/element');
+
+const PROGRESS_COLORS = {
+  blue: '#3b82f6',
+  green: '#22c55e',
+  red: '#ef4444',
+  yellow: '#eab308',
+  purple: '#a855f7',
+  cyan: '#06b6d4',
+  orange: '#f97316',
+};
+
+const SIZE_CONFIGS = {
+  sm: { barHeight: 6, circleSize: 80, circleStroke: 6, fontSize: 'ed-text-xs' },
+  md: { barHeight: 10, circleSize: 120, circleStroke: 8, fontSize: 'ed-text-sm' },
+  lg: { barHeight: 16, circleSize: 160, circleStroke: 10, fontSize: 'ed-text-base' },
+};
+
+function ProgressBar(props) {
+  const {
+    percent = 0,
+    color = 'blue',
+    size = 'md',
+    showLabel = true,
+    label,
+    striped = false,
+    animated = false,
+    status,
+    className = '',
+    style = {},
+    trailColor,
+    borderRadius,
+    steps,
+  } = props;
+
+  const sizeConfig = SIZE_CONFIGS[size] || SIZE_CONFIGS.md;
+  const clampedPercent = Math.min(100, Math.max(0, percent));
+
+  const statusColor = status === 'success' ? PROGRESS_COLORS.green
+    : status === 'error' || status === 'danger' ? PROGRESS_COLORS.red
+    : typeof color === 'string' ? (PROGRESS_COLORS[color] || color)
+    : color;
+
+  const bgColor = trailColor || '#e5e7eb';
+
+  if (steps) {
+    const stepWidth = 100 / steps;
+    return ED.createElement('div', {
+      className: `ed-w-full ${className}`,
+      style,
+      children: ED.createElement('div', {
+        className: 'ed-flex ed-gap-1',
+        children: Array.from({ length: steps }, (_, i) => {
+          const isFilled = i < Math.floor(clampedPercent / stepWidth);
+          return ED.createElement('div', {
+            key: i,
+            className: [
+              'ed-h-2 ed-flex-1 ed-rounded-sm ed-transition-all ed-duration-300',
+            ].join(' '),
+            style: {
+              backgroundColor: isFilled ? statusColor : bgColor,
+            },
+          });
+        }),
+      }),
+    });
+  }
+
+  const barClasses = [
+    'ed-w-full ed-overflow-hidden',
+    borderRadius ? `ed-rounded-${borderRadius}` : 'ed-rounded-full',
+  ].filter(Boolean).join(' ');
+
+  const fillClasses = [
+    'ed-h-full ed-transition-all ed-duration-500 ed-ease-out',
+    borderRadius ? `ed-rounded-${borderRadius}` : 'ed-rounded-full',
+    striped ? 'ed-bg-stripes' : '',
+    animated ? 'ed-animate-stripes' : '',
+  ].filter(Boolean).join(' ');
+
+  return ED.createElement('div', { className: `ed-w-full ${className}`, style },
+    showLabel
+      ? ED.createElement('div', {
+          className: `ed-flex ed-items-center ed-justify-between ed-mb-1 ${sizeConfig.fontSize}`,
+          children: [
+            label ? ED.createElement('span', { className: 'ed-text-gray-700' }, label) : null,
+            ED.createElement('span', {
+              className: [
+                'ed-font-medium',
+                status === 'success' ? 'ed-text-green-600' : status === 'error' ? 'ed-text-red-600' : 'ed-text-gray-600',
+              ].join(' '),
+            }, `${Math.round(clampedPercent)}%`),
+          ].filter(Boolean),
+        })
+      : null,
+    ED.createElement('div', {
+      className: barClasses,
+      style: { height: sizeConfig.barHeight, backgroundColor: bgColor },
+      role: 'progressbar',
+      'aria-valuenow': clampedPercent,
+      'aria-valuemin': 0,
+      'aria-valuemax': 100,
+      children: ED.createElement('div', {
+        className: fillClasses,
+        style: {
+          width: `${clampedPercent}%`,
+          backgroundColor: statusColor,
+          backgroundImage: striped
+            ? 'linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent)'
+            : undefined,
+          backgroundSize: striped ? '1rem 1rem' : undefined,
+        },
+      }),
+    }),
+    status === 'success' && !showLabel
+      ? ED.createElement('svg', {
+          className: 'ed-w-4 ed-h-4 ed-text-green-500 ed-ml-2 ed-inline',
+          fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor',
+          children: ED.createElement('path', { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M5 13l4 4L19 7' }),
+        })
+      : null,
+  );
+}
+
+ProgressBar.displayName = 'ProgressBar';
+
+function ProgressCircle(props) {
+  const {
+    percent = 0,
+    color = 'blue',
+    size = 'md',
+    showLabel = true,
+    status,
+    className = '',
+    style = {},
+    trailColor = '#e5e7eb',
+    strokeWidth,
+    gapDegree = 0,
+    gapPosition = 'bottom',
+    type = 'circle',
+  } = props;
+
+  const sizeConfig = SIZE_CONFIGS[size] || SIZE_CONFIGS.md;
+  const clampedPercent = Math.min(100, Math.max(0, percent));
+
+  const statusColor = status === 'success' ? PROGRESS_COLORS.green
+    : status === 'error' || status === 'danger' ? PROGRESS_COLORS.red
+    : typeof color === 'string' ? (PROGRESS_COLORS[color] || color)
+    : color;
+
+  const circleSize = sizeConfig.circleSize;
+  const circleStroke = strokeWidth || sizeConfig.circleStroke;
+  const isDashboard = type === 'dashboard';
+  const effectiveGap = isDashboard ? gapDegree || 75 : gapDegree;
+
+  const radius = (circleSize - circleStroke) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const strokeDashoffset = circumference * (1 - clampedPercent / 100);
+
+  const center = circleSize / 2;
+  const rotation = isDashboard ? 90 + effectiveGap / 2 : -90;
+  const dashArray = effectiveGap > 0
+    ? `${(circumference * (360 - effectiveGap)) / 360} ${circumference}`
+    : circumference;
+
+  const statusIcon = status === 'success'
+    ? ED.createElement('svg', {
+        className: 'ed-w-8 ed-h-8 ed-text-green-500',
+        fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor',
+        children: ED.createElement('path', { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M5 13l4 4L19 7' }),
+      })
+    : status === 'error'
+      ? ED.createElement('svg', {
+          className: 'ed-w-8 ed-h-8 ed-text-red-500',
+          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;
+
+  return ED.createElement('div', {
+    className: `ed-inline-flex ed-items-center ed-justify-center ed-relative ${className}`,
+    style,
+    role: 'progressbar',
+    'aria-valuenow': clampedPercent,
+    children: [
+      ED.createElement('svg', {
+        key: 'svg',
+        width: circleSize,
+        height: circleSize,
+        viewBox: `0 0 ${circleSize} ${circleSize}`,
+        style: { transform: `rotate(${rotation}deg)` },
+        children: [
+          ED.createElement('circle', {
+            key: 'trail',
+            cx: center,
+            cy: center,
+            r: radius,
+            fill: 'none',
+            stroke: trailColor,
+            strokeWidth: circleStroke,
+            strokeDasharray: dashArray,
+            strokeLinecap: 'round',
+          }),
+          ED.createElement('circle', {
+            key: 'fill',
+            cx: center,
+            cy: center,
+            r: radius,
+            fill: 'none',
+            stroke: statusColor,
+            strokeWidth: circleStroke,
+            strokeDasharray: dashArray,
+            strokeDashoffset,
+            strokeLinecap: 'round',
+            style: { transition: 'stroke-dashoffset 0.5s ease' },
+          }),
+        ],
+      }),
+      showLabel
+        ? ED.createElement('div', {
+            key: 'label',
+            className: 'ed-absolute ed-inset-0 ed-flex ed-items-center ed-justify-center',
+            children: statusIcon || ED.createElement('span', {
+              className: `${sizeConfig.fontSize} ed-font-semibold ed-text-gray-700`,
+            }, `${Math.round(clampedPercent)}%`),
+          })
+        : null,
+    ],
+  });
+}
+
+ProgressCircle.displayName = 'ProgressCircle';
+
+function Progress(props) {
+  const { type = 'bar' } = props;
+  if (type === 'circle' || type === 'dashboard') {
+    return ProgressCircle({ ...props, type });
+  }
+  return ProgressBar(props);
+}
+
+Progress.displayName = 'Progress';
+Progress.Bar = ProgressBar;
+Progress.Circle = ProgressCircle;
+Progress.COLORS = PROGRESS_COLORS;
+Progress.SIZES = SIZE_CONFIGS;
+
+module.exports = Progress;

package/src/jsx/components/Radio.jsx

@@ -0,0 +1,208 @@
+/**
+ * Radio Component for ElementDrawing Framework
+ * Supports sizes, button style, group, disabled, custom icon, color variants, horizontal/vertical layout
+ */
+const ED = require('../core/element');
+
+const RADIO_SIZES = {
+  xs: { circle: 'ed-w-3.5 ed-h-3.5', inner: 'ed-w-1.5 ed-h-1.5', label: 'ed-text-xs' },
+  sm: { circle: 'ed-w-4 ed-h-4', inner: 'ed-w-2 ed-h-2', label: 'ed-text-sm' },
+  md: { circle: 'ed-w-4.5 ed-h-4.5', inner: 'ed-w-2 ed-h-2', label: 'ed-text-sm' },
+  lg: { circle: 'ed-w-5 ed-h-5', inner: 'ed-w-2.5 ed-h-2.5', label: 'ed-text-base' },
+  xl: { circle: 'ed-w-6 ed-h-6', inner: 'ed-w-3 ed-h-3', label: 'ed-text-lg' },
+};
+
+const RADIO_COLORS = {
+  blue: { checked: 'ed-border-blue-600 ed-ring-blue-500', inner: 'ed-bg-blue-600' },
+  green: { checked: 'ed-border-green-600 ed-ring-green-500', inner: 'ed-bg-green-600' },
+  red: { checked: 'ed-border-red-600 ed-ring-red-500', inner: 'ed-bg-red-600' },
+  yellow: { checked: 'ed-border-yellow-500 ed-ring-yellow-400', inner: 'ed-bg-yellow-500' },
+  purple: { checked: 'ed-border-purple-600 ed-ring-purple-500', inner: 'ed-bg-purple-600' },
+  gray: { checked: 'ed-border-gray-600 ed-ring-gray-500', inner: 'ed-bg-gray-600' },
+};
+
+function Radio(props) {
+  const {
+    checked,
+    defaultChecked = false,
+    onChange,
+    disabled = false,
+    label,
+    children,
+    size = 'md',
+    color = 'blue',
+    buttonStyle = false,
+    className = '',
+    style = {},
+    id,
+    name,
+    value,
+    icon,
+    autoFocus = false,
+    tabIndex,
+    onFocus,
+    onBlur,
+    error = false,
+  } = props;
+
+  const sizeConfig = RADIO_SIZES[size] || RADIO_SIZES.md;
+  const colorConfig = RADIO_COLORS[color] || RADIO_COLORS.blue;
+  const isChecked = checked !== undefined ? checked : defaultChecked;
+
+  if (buttonStyle) {
+    const buttonClasses = [
+      'ed-inline-flex ed-items-center ed-justify-center ed-px-4 ed-py-2 ed-text-sm ed-font-medium ed-border ed-transition-colors ed-duration-200',
+      isChecked
+        ? 'ed-bg-blue-600 ed-text-white ed-border-blue-600 ed-z-10'
+        : 'ed-bg-white ed-text-gray-700 ed-border-gray-300 hover:ed-bg-gray-50',
+      disabled ? 'ed-opacity-50 ed-cursor-not-allowed' : 'ed-cursor-pointer',
+      'ed--ml-px ed-first:ml-0 ed-first:rounded-l-md ed-last:rounded-r-md',
+      className,
+    ].filter(Boolean).join(' ');
+
+    return ED.createElement('label', { className: buttonClasses, style },
+      ED.createElement('input', {
+        type: 'radio',
+        checked: isChecked,
+        onChange: disabled ? undefined : onChange,
+        disabled,
+        id,
+        name,
+        value,
+        className: 'ed-sr-only',
+        autoFocus,
+        tabIndex,
+        onFocus,
+        onBlur,
+      }),
+      icon
+        ? ED.createElement('span', { className: 'ed-mr-1.5' },
+            typeof icon === 'string' ? ED.createElement('i', { className: icon }) : icon
+          )
+        : null,
+      label || children
+    );
+  }
+
+  const circleClasses = [
+    'ed-relative ed-inline-flex ed-items-center ed-justify-center ed-border-2 ed-rounded-full ed-transition-all ed-duration-200',
+    sizeConfig.circle,
+    isChecked
+      ? `${colorConfig.checked} ed-border-2`
+      : 'ed-border-gray-300 ed-bg-white',
+    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 innerDot = isChecked
+    ? ED.createElement('span', {
+        className: `${sizeConfig.inner} ${colorConfig.inner} ed-rounded-full`,
+      })
+    : 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',
+  ].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'} ${className}`,
+    style,
+  }, [
+    ED.createElement('input', {
+      key: 'input',
+      type: 'radio',
+      checked: isChecked,
+      onChange: disabled ? undefined : onChange,
+      disabled,
+      id,
+      name,
+      value,
+      className: 'ed-sr-only',
+      autoFocus,
+      tabIndex,
+      onFocus,
+      onBlur,
+    }),
+    ED.createElement('span', { key: 'circle', className: circleClasses, children: innerDot }),
+    labelContent
+      ? ED.createElement('span', { key: 'label', className: labelClasses }, labelContent)
+      : null,
+  ]);
+}
+
+Radio.displayName = 'Radio';
+
+function RadioGroup(props) {
+  const {
+    children,
+    options = [],
+    value,
+    defaultValue,
+    onChange,
+    disabled = false,
+    direction = 'horizontal',
+    size = 'md',
+    color = 'blue',
+    buttonStyle = false,
+    className = '',
+    style = {},
+    name,
+    optionType = 'default',
+  } = props;
+
+  const currentValue = value !== undefined ? value : defaultValue;
+
+  const handleChange = (optionValue) => {
+    if (disabled) return;
+    onChange?.({ target: { value: optionValue } });
+  };
+
+  const directionClasses = {
+    horizontal: 'ed-flex ed-flex-wrap ed-gap-2',
+    vertical: 'ed-flex ed-flex-col ed-gap-2',
+  };
+
+  const groupClasses = [
+    directionClasses[direction] || directionClasses.horizontal,
+    buttonStyle ? 'ed-inline-flex' : '',
+    className,
+  ].filter(Boolean).join(' ');
+
+  const isButtonStyle = buttonStyle || optionType === 'button';
+
+  const optionElements = options.length > 0
+    ? options.map((option, idx) => {
+        const opt = typeof option === 'string' ? { label: option, value: option } : option;
+        return ED.createElement(Radio, {
+          key: opt.value || idx,
+          checked: currentValue === opt.value,
+          onChange: () => handleChange(opt.value),
+          disabled: disabled || opt.disabled,
+          label: opt.label,
+          size,
+          color,
+          buttonStyle: isButtonStyle,
+          value: opt.value,
+          name,
+        });
+      })
+    : children;
+
+  return ED.createElement('div', {
+    className: groupClasses,
+    style,
+    role: 'radiogroup',
+    children: optionElements,
+  });
+}
+
+RadioGroup.displayName = 'RadioGroup';
+Radio.Group = RadioGroup;
+Radio.SIZES = RADIO_SIZES;
+Radio.COLORS = RADIO_COLORS;
+
+module.exports = Radio;