elementdrawing 1.0.0

package/src/jsx/components/Slider.jsx

@@ -0,0 +1,310 @@
+/**
+ * Slider Component for ElementDrawing Framework
+ * Supports single/double handle, marks, tooltip, range, vertical, disabled, custom step, log scale
+ */
+const ED = require('../core/element');
+
+const SLIDER_SIZES = {
+  sm: { trackHeight: 4, handleSize: 14, markFont: 'ed-text-xs' },
+  md: { trackHeight: 6, handleSize: 18, markFont: 'ed-text-xs' },
+  lg: { trackHeight: 8, handleSize: 22, markFont: 'ed-text-sm' },
+};
+
+function Slider(props) {
+  const {
+    value,
+    defaultValue = 0,
+    onChange,
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,
+    range = false,
+    vertical = false,
+    marks = {},
+    tooltip = true,
+    tooltipVisible,
+    tooltipPlacement = 'top',
+    className = '',
+    style = {},
+    size = 'md',
+    included = true,
+    dots = false,
+    reverse = false,
+    logScale = false,
+    onAfterChange,
+    onFocus,
+    onBlur,
+    startPoint,
+    trackStyle = {},
+    handleStyle = {},
+    railStyle = {},
+    dotStyle = {},
+    activeDotStyle = {},
+    id,
+    name,
+    tabIndex,
+    ariaLabel,
+    ariaLabelForHandle,
+  } = props;
+
+  const sizeConfig = SLIDER_SIZES[size] || SLIDER_SIZES.md;
+  const currentValue = value !== undefined ? value : defaultValue;
+
+  const normalizeValue = (val) => {
+    if (logScale && min > 0) {
+      return Math.log(val / min) / Math.log(max / min);
+    }
+    return (val - min) / (max - min);
+  };
+
+  const denormalizeValue = (ratio) => {
+    if (logScale && min > 0) {
+      return min * Math.pow(max / min, ratio);
+    }
+    return min + ratio * (max - min);
+  };
+
+  const getStepValue = (val) => {
+    const rounded = Math.round((val - min) / step) * step + min;
+    return Math.min(max, Math.max(min, rounded));
+  };
+
+  const percent = (val) => {
+    const ratio = normalizeValue(val);
+    return reverse ? (1 - ratio) * 100 : ratio * 100;
+  };
+
+  const isRange = range && Array.isArray(currentValue);
+  const leftPercent = isRange ? percent(Math.min(currentValue[0], currentValue[1])) : 0;
+  const rightPercent = isRange ? percent(Math.max(currentValue[0], currentValue[1])) : percent(currentValue);
+
+  const handleMouseDown = (handleIndex, e) => {
+    if (disabled) return;
+    e.preventDefault();
+
+    const sliderEl = e.currentTarget.parentElement;
+    const rect = sliderEl.getBoundingClientRect();
+
+    const getPosition = (event) => {
+      if (vertical) {
+        const y = event.clientY - rect.top;
+        return reverse ? y / rect.height : (1 - y / rect.height);
+      }
+      const x = event.clientX - rect.left;
+      return reverse ? (1 - x / rect.width) : x / rect.width;
+    };
+
+    const handleMove = (event) => {
+      const ratio = Math.min(1, Math.max(0, getPosition(event)));
+      const rawVal = denormalizeValue(ratio);
+      const steppedVal = getStepValue(rawVal);
+
+      if (isRange) {
+        const newValues = [...currentValue];
+        newValues[handleIndex] = steppedVal;
+        onChange?.(newValues);
+      } else {
+        onChange?.(steppedVal);
+      }
+    };
+
+    const handleUp = () => {
+      document.removeEventListener('mousemove', handleMove);
+      document.removeEventListener('mouseup', handleUp);
+      onAfterChange?.(isRange ? currentValue : currentValue);
+    };
+
+    document.addEventListener('mousemove', handleMove);
+    document.addEventListener('mouseup', handleUp);
+  };
+
+  const handleTrackClick = (e) => {
+    if (disabled) return;
+    const sliderEl = e.currentTarget;
+    const rect = sliderEl.getBoundingClientRect();
+
+    let ratio;
+    if (vertical) {
+      const y = e.clientY - rect.top;
+      ratio = reverse ? y / rect.height : (1 - y / rect.height);
+    } else {
+      const x = e.clientX - rect.left;
+      ratio = reverse ? (1 - x / rect.width) : x / rect.width;
+    }
+
+    const rawVal = denormalizeValue(ratio);
+    const steppedVal = getStepValue(rawVal);
+
+    if (isRange) {
+      const dist0 = Math.abs(currentValue[0] - steppedVal);
+      const dist1 = Math.abs(currentValue[1] - steppedVal);
+      const newValues = [...currentValue];
+      newValues[dist0 < dist1 ? 0 : 1] = steppedVal;
+      onChange?.(newValues);
+    } else {
+      onChange?.(steppedVal);
+    }
+  };
+
+  const renderTooltip = (val) => {
+    if (!tooltip || tooltipVisible === false) return null;
+    const positionClass = {
+      top: 'ed-bottom-full ed-left-1/2 ed--translate-x-1/2 ed-mb-2',
+      bottom: 'ed-top-full ed-left-1/2 ed--translate-x-1/2 ed-mt-2',
+      left: 'ed-right-full ed-top-1/2 ed--translate-y-1/2 ed-mr-2',
+      right: 'ed-left-full ed-top-1/2 ed--translate-y-1/2 ed-ml-2',
+    };
+    return ED.createElement('div', {
+      className: [
+        'ed-absolute ed-px-2 ed-py-1 ed-text-xs ed-font-medium ed-text-white ed-bg-gray-900 ed-rounded ed-whitespace-nowrap ed-pointer-events-none ed-z-10',
+        positionClass[tooltipPlacement] || positionClass.top,
+      ].join(' '),
+      children: typeof val === 'number' ? Math.round(val * 100) / 100 : val,
+    });
+  };
+
+  const markElements = Object.keys(marks).length > 0
+    ? Object.entries(marks).map(([key, mark]) => {
+        const markVal = Number(key);
+        const markPercent = percent(markVal);
+        const isInRange = isRange
+          ? markVal >= currentValue[0] && markVal <= currentValue[1]
+          : markVal <= currentValue;
+
+        return ED.createElement('div', {
+          key: key,
+          className: 'ed-absolute',
+          style: vertical
+            ? { bottom: `${markPercent}%` }
+            : { left: `${markPercent}%` },
+          children: [
+            ED.createElement('div', {
+              key: 'dot',
+              className: [
+                'ed-w-1 ed-h-1 ed-rounded-full ed-transform ed--translate-x-1/2',
+                isInRange ? 'ed-bg-blue-500' : 'ed-bg-gray-300',
+              ].join(' '),
+            }),
+            typeof mark === 'object' && mark.label
+              ? ED.createElement('span', {
+                  key: 'label',
+                  className: `ed-transform ed--translate-x-1/2 ed-mt-2 ed-block ${sizeConfig.markFont} ed-text-gray-500`,
+                }, mark.label)
+              : typeof mark === 'string'
+                ? ED.createElement('span', {
+                    key: 'label',
+                    className: `ed-transform ed--translate-x-1/2 ed-mt-2 ed-block ${sizeConfig.markFont} ed-text-gray-500`,
+                  }, mark)
+                : null,
+          ].filter(Boolean),
+        });
+      })
+    : null;
+
+  const dotElements = dots && Object.keys(marks).length === 0
+    ? Array.from({ length: Math.floor((max - min) / step) + 1 }, (_, i) => {
+        const dotVal = min + i * step;
+        const dotPercent = percent(dotVal);
+        const isInRange = isRange
+          ? dotVal >= currentValue[0] && dotVal <= currentValue[1]
+          : dotVal <= currentValue;
+        return ED.createElement('div', {
+          key: i,
+          className: [
+            'ed-absolute ed-w-2 ed-h-2 ed-rounded-full ed-transform ed--translate-x-1/2 ed--translate-y-1/2',
+            isInRange ? 'ed-bg-blue-500' : 'ed-bg-gray-300',
+          ].join(' '),
+          style: vertical
+            ? { bottom: `${dotPercent}%`, left: '50%', transform: 'translateX(-50%) translateY(50%)' }
+            : { left: `${dotPercent}%`, top: '50%', transform: 'translateX(-50%) translateY(-50%)' },
+        });
+      })
+    : null;
+
+  const renderHandle = (val, index) => {
+    const handlePercent = percent(val);
+    return ED.createElement('div', {
+      key: `handle-${index}`,
+      className: [
+        'ed-absolute ed-bg-white ed-border-2 ed-border-blue-500 ed-rounded-full',
+        'ed-shadow-md ed-cursor-grab ed-active:ed-cursor-grabbing ed-z-10',
+        'hover:ed-shadow-lg ed-transition-shadow ed-duration-150',
+        'focus:ed-outline-none focus:ed-ring-2 focus:ed-ring-blue-500 focus:ed-ring-offset-2',
+        disabled ? 'ed-cursor-not-allowed ed-opacity-50' : '',
+      ].join(' '),
+      style: {
+        width: sizeConfig.handleSize,
+        height: sizeConfig.handleSize,
+        ...(vertical
+          ? { bottom: `calc(${handlePercent}% - ${sizeConfig.handleSize / 2}px)`, left: `calc(50% - ${sizeConfig.handleSize / 2}px)` }
+          : { left: `calc(${handlePercent}% - ${sizeConfig.handleSize / 2}px)`, top: `calc(50% - ${sizeConfig.handleSize / 2}px)` }),
+        ...handleStyle,
+      },
+      onMouseDown: (e) => handleMouseDown(index, e),
+      role: 'slider',
+      'aria-valuenow': val,
+      'aria-valuemin': min,
+      'aria-valuemax': max,
+      'aria-label': ariaLabelForHandle || ariaLabel,
+      tabIndex: disabled ? -1 : (tabIndex || 0),
+      onFocus,
+      onBlur,
+      children: renderTooltip(val),
+    });
+  };
+
+  const trackElement = included
+    ? ED.createElement('div', {
+        className: 'ed-absolute ed-bg-blue-500 ed-rounded-full',
+        style: {
+          ...(vertical
+            ? { bottom: `${leftPercent}%`, height: `${rightPercent - leftPercent}%`, width: sizeConfig.trackHeight, left: `calc(50% - ${sizeConfig.trackHeight / 2}px)` }
+            : { left: `${leftPercent}%`, width: `${rightPercent - leftPercent}%`, height: sizeConfig.trackHeight, top: `calc(50% - ${sizeConfig.trackHeight / 2}px)` }),
+          ...trackStyle,
+        },
+      })
+    : null;
+
+  const railElement = ED.createElement('div', {
+    className: 'ed-absolute ed-bg-gray-200 ed-rounded-full',
+    style: {
+      ...(vertical
+        ? { width: sizeConfig.trackHeight, left: `calc(50% - ${sizeConfig.trackHeight / 2}px)`, top: 0, bottom: 0 }
+        : { height: sizeConfig.trackHeight, top: `calc(50% - ${sizeConfig.trackHeight / 2}px)`, left: 0, right: 0 }),
+      ...railStyle,
+    },
+  });
+
+  const sliderClasses = [
+    'ed-relative ed-select-none',
+    vertical ? 'ed-h-full' : 'ed-w-full',
+    disabled ? 'ed-opacity-50 ed-pointer-events-none' : '',
+    className,
+  ].filter(Boolean).join(' ');
+
+  const sliderStyle = vertical
+    ? { width: sizeConfig.handleSize + 10, height: '100%', ...style }
+    : { height: sizeConfig.handleSize + 10, ...style };
+
+  return ED.createElement('div', {
+    id,
+    className: sliderClasses,
+    style: sliderStyle,
+    onClick: handleTrackClick,
+    children: [
+      railElement,
+      trackElement,
+      dotElements,
+      isRange
+        ? [renderHandle(currentValue[0], 0), renderHandle(currentValue[1], 1)]
+        : renderHandle(currentValue, 0),
+      markElements,
+    ].flat().filter(Boolean),
+  });
+}
+
+Slider.displayName = 'Slider';
+Slider.SIZES = SLIDER_SIZES;
+
+module.exports = Slider;

package/src/jsx/components/Spinner.jsx

@@ -0,0 +1,198 @@
+/**
+ * Spinner Component for ElementDrawing Framework
+ * Supports sizes, color variants, overlay, fullscreen, custom SVG, dot spinner, bar spinner
+ */
+const ED = require('../core/element');
+
+const SPINNER_SIZES = {
+  xs: { main: 'ed-w-4 ed-h-4', border: 'ed-border-2', dot: 'ed-w-1 ed-h-1', bar: 'ed-w-0.5 ed-h-3', text: 'ed-text-xs' },
+  sm: { main: 'ed-w-6 ed-h-6', border: 'ed-border-2', dot: 'ed-w-1.5 ed-h-1.5', bar: 'ed-w-1 ed-h-4', text: 'ed-text-xs' },
+  md: { main: 'ed-w-8 ed-h-8', border: 'ed-border-[3px]', dot: 'ed-w-2 ed-h-2', bar: 'ed-w-1 ed-h-5', text: 'ed-text-sm' },
+  lg: { main: 'ed-w-12 ed-h-12', border: 'ed-border-4', dot: 'ed-w-2.5 ed-h-2.5', bar: 'ed-w-1.5 ed-h-7', text: 'ed-text-base' },
+  xl: { main: 'ed-w-16 ed-h-16', border: 'ed-border-4', dot: 'ed-w-3 ed-h-3', bar: 'ed-w-2 ed-h-9', text: 'ed-text-lg' },
+};
+
+const SPINNER_COLORS = {
+  blue: { border: 'ed-border-blue-500', text: 'ed-text-blue-500', dot: 'ed-bg-blue-500', bar: 'ed-bg-blue-500' },
+  green: { border: 'ed-border-green-500', text: 'ed-text-green-500', dot: 'ed-bg-green-500', bar: 'ed-bg-green-500' },
+  red: { border: 'ed-border-red-500', text: 'ed-text-red-500', dot: 'ed-bg-red-500', bar: 'ed-bg-red-500' },
+  yellow: { border: 'ed-border-yellow-500', text: 'ed-text-yellow-500', dot: 'ed-bg-yellow-500', bar: 'ed-bg-yellow-500' },
+  purple: { border: 'ed-border-purple-500', text: 'ed-text-purple-500', dot: 'ed-bg-purple-500', bar: 'ed-bg-purple-500' },
+  gray: { border: 'ed-border-gray-500', text: 'ed-text-gray-500', dot: 'ed-bg-gray-500', bar: 'ed-bg-gray-500' },
+  white: { border: 'ed-border-white', text: 'ed-text-white', dot: 'ed-bg-white', bar: 'ed-bg-white' },
+};
+
+function CircleSpinner(props) {
+  const { size = 'md', color = 'blue', sizeConfig, colorConfig } = props;
+  const sConfig = sizeConfig || SPINNER_SIZES[size] || SPINNER_SIZES.md;
+  const cConfig = colorConfig || SPINNER_COLORS[color] || SPINNER_COLORS.blue;
+
+  return ED.createElement('div', {
+    className: [
+      sConfig.main,
+      cConfig.border,
+      'ed-border-t-transparent',
+      'ed-rounded-full ed-animate-spin',
+    ].join(' '),
+    role: 'status',
+    'aria-label': 'Loading',
+  });
+}
+
+function DotSpinner(props) {
+  const { size = 'md', color = 'blue', sizeConfig, colorConfig } = props;
+  const sConfig = sizeConfig || SPINNER_SIZES[size] || SPINNER_SIZES.md;
+  const cConfig = colorConfig || SPINNER_COLORS[color] || SPINNER_COLORS.blue;
+
+  return ED.createElement('div', {
+    className: 'ed-flex ed-items-center ed-gap-1',
+    role: 'status',
+    'aria-label': 'Loading',
+    children: [0, 1, 2].map(i =>
+      ED.createElement('div', {
+        key: i,
+        className: [
+          sConfig.dot,
+          cConfig.dot,
+          'ed-rounded-full',
+        ].join(' '),
+        style: {
+          animation: `ed-bounce 1.4s ease-in-out ${i * 0.16}s infinite both`,
+        },
+      })
+    ),
+  });
+}
+
+function BarSpinner(props) {
+  const { size = 'md', color = 'blue', sizeConfig, colorConfig } = props;
+  const sConfig = sizeConfig || SPINNER_SIZES[size] || SPINNER_SIZES.md;
+  const cConfig = colorConfig || SPINNER_COLORS[color] || SPINNER_COLORS.blue;
+
+  return ED.createElement('div', {
+    className: 'ed-flex ed-items-end ed-gap-0.5',
+    style: { height: sConfig.bar?.split(' ').find(s => s.startsWith('ed-h-'))?.replace('ed-h-', '') + 'px' || '20px' },
+    role: 'status',
+    'aria-label': 'Loading',
+    children: [0, 1, 2, 3].map(i =>
+      ED.createElement('div', {
+        key: i,
+        className: [
+          sConfig.bar,
+          cConfig.bar,
+          'ed-rounded-sm',
+        ].join(' '),
+        style: {
+          animation: `ed-bar-stretch 1.2s ease-in-out ${i * 0.1}s infinite`,
+        },
+      })
+    ),
+  });
+}
+
+function Spinner(props) {
+  const {
+    variant = 'circle',
+    size = 'md',
+    color = 'blue',
+    overlay = false,
+    fullscreen = false,
+    className = '',
+    style = {},
+    label,
+    labelPosition = 'bottom',
+    customSvg,
+    spinning = true,
+    children,
+    delay = 0,
+    tip,
+  } = props;
+
+  if (!spinning) return children || null;
+
+  const sizeConfig = SPINNER_SIZES[size] || SPINNER_SIZES.md;
+  const colorConfig = SPINNER_COLORS[color] || SPINNER_COLORS.blue;
+
+  const renderSpinner = () => {
+    if (customSvg) {
+      return ED.createElement('div', {
+        className: `ed-animate-spin ${sizeConfig.main}`,
+        role: 'status',
+        'aria-label': 'Loading',
+        children: customSvg,
+      });
+    }
+
+    switch (variant) {
+      case 'dot':
+        return ED.createElement(DotSpinner, { size, color, sizeConfig, colorConfig });
+      case 'bar':
+        return ED.createElement(BarSpinner, { size, color, sizeConfig, colorConfig });
+      case 'circle':
+      default:
+        return ED.createElement(CircleSpinner, { size, color, sizeConfig, colorConfig });
+    }
+  };
+
+  const labelElement = label || tip
+    ? ED.createElement('span', {
+        className: `${sizeConfig.text} ${colorConfig.text} ed-font-medium`,
+      }, label || tip)
+    : null;
+
+  const spinnerContent = ED.createElement('div', {
+    className: [
+      'ed-inline-flex ed-items-center ed-gap-2',
+      labelPosition === 'bottom' ? 'ed-flex-col' : labelPosition === 'right' ? 'ed-flex-row' : 'ed-flex-col',
+      className,
+    ].filter(Boolean).join(' '),
+    style,
+    children: [
+      labelPosition === 'bottom' ? renderSpinner() : labelElement,
+      labelPosition === 'bottom' ? labelElement : renderSpinner(),
+    ],
+  });
+
+  if (fullscreen) {
+    return ED.createElement('div', {
+      className: 'ed-fixed ed-inset-0 ed-bg-white ed-bg-opacity-80 ed-flex ed-items-center ed-justify-center ed-z-[9999]',
+      children: spinnerContent,
+    });
+  }
+
+  if (overlay) {
+    return ED.createElement('div', {
+      className: 'ed-relative',
+      children: [
+        children,
+        ED.createElement('div', {
+          key: 'overlay',
+          className: 'ed-absolute ed-inset-0 ed-bg-white ed-bg-opacity-70 ed-flex ed-items-center ed-justify-center ed-rounded-inherit ed-z-10',
+          children: spinnerContent,
+        }),
+      ],
+    });
+  }
+
+  if (children) {
+    return ED.createElement('div', { className: 'ed-relative' }, [
+      children,
+      ED.createElement('div', {
+        key: 'spinner-overlay',
+        className: 'ed-absolute ed-inset-0 ed-flex ed-items-center ed-justify-center ed-bg-white ed-bg-opacity-60 ed-z-10',
+        children: renderSpinner(),
+      }),
+    ]);
+  }
+
+  return spinnerContent;
+}
+
+Spinner.displayName = 'Spinner';
+Spinner.Circle = CircleSpinner;
+Spinner.Dot = DotSpinner;
+Spinner.Bar = BarSpinner;
+Spinner.SIZES = SPINNER_SIZES;
+Spinner.COLORS = SPINNER_COLORS;
+
+module.exports = Spinner;

package/src/jsx/components/Switch.jsx

@@ -0,0 +1,201 @@
+/**
+ * Switch Component for ElementDrawing Framework
+ * Supports sizes, colors, disabled, loading, icons, labels, custom width/height
+ */
+const ED = require('../core/element');
+
+const SWITCH_SIZES = {
+  sm: { width: 36, height: 20, handleSize: 14, text: 'ed-text-[10px]', translate: 16 },
+  md: { width: 44, height: 24, handleSize: 18, text: 'ed-text-xs', translate: 20 },
+  lg: { width: 56, height: 28, handleSize: 22, text: 'ed-text-sm', translate: 28 },
+  xl: { width: 64, height: 32, handleSize: 26, text: 'ed-text-sm', translate: 32 },
+};
+
+const SWITCH_COLORS = {
+  blue: 'ed-bg-blue-600',
+  green: 'ed-bg-green-600',
+  red: 'ed-bg-red-600',
+  yellow: 'ed-bg-yellow-500',
+  purple: 'ed-bg-purple-600',
+  cyan: 'ed-bg-cyan-600',
+  orange: 'ed-bg-orange-500',
+  pink: 'ed-bg-pink-600',
+};
+
+function Switch(props) {
+  const {
+    checked,
+    defaultChecked = false,
+    onChange,
+    disabled = false,
+    loading = false,
+    size = 'md',
+    color = 'blue',
+    checkedIcon,
+    uncheckedIcon,
+    checkedChildren,
+    uncheckedChildren,
+    className = '',
+    style = {},
+    width: customWidth,
+    height: customHeight,
+    id,
+    name,
+    value,
+    autoFocus = false,
+    tabIndex,
+    onFocus,
+    onBlur,
+    ariaLabel,
+    beforeChange,
+    label,
+    labelPosition = 'right',
+  } = props;
+
+  const isChecked = checked !== undefined ? checked : defaultChecked;
+  const sizeConfig = SWITCH_SIZES[size] || SWITCH_SIZES.md;
+  const colorClass = SWITCH_COLORS[color] || SWITCH_COLORS.blue;
+
+  const switchWidth = customWidth || sizeConfig.width;
+  const switchHeight = customHeight || sizeConfig.height;
+  const handleSize = sizeConfig.handleSize;
+  const translateX = isChecked ? (switchWidth - handleSize - 6) : 0;
+
+  const trackClasses = [
+    'ed-relative ed-inline-flex ed-items-center ed-rounded-full ed-transition-colors ed-duration-200 ed-cursor-pointer',
+    isChecked ? colorClass : 'ed-bg-gray-300',
+    disabled || loading ? 'ed-opacity-50 ed-cursor-not-allowed' : '',
+    className,
+  ].filter(Boolean).join(' ');
+
+  const handleClasses = [
+    'ed-absolute ed-bg-white ed-rounded-full ed-shadow-sm ed-transition-transform ed-duration-200 ed-flex ed-items-center ed-justify-center',
+    loading ? '' : '',
+  ].join(' ');
+
+  const loadingSpinner = loading
+    ? ED.createElement('svg', {
+        className: `ed-animate-spin ed-text-${isChecked ? color : 'gray'}-500`,
+        style: { width: handleSize * 0.5, height: handleSize * 0.5 },
+        fill: 'none',
+        viewBox: '0 0 24 24',
+        children: [
+          ED.createElement('circle', {
+            key: 'bg',
+            className: 'ed-opacity-25',
+            cx: '12', cy: '12', r: '10',
+            stroke: 'currentColor', strokeWidth: '4',
+          }),
+          ED.createElement('path', {
+            key: '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 checkedIconElement = checkedIcon && isChecked && !loading
+    ? ED.createElement('span', {
+        className: 'ed-text-white',
+        style: { width: handleSize * 0.5, height: handleSize * 0.5 },
+        children: typeof checkedIcon === 'string' ? ED.createElement('i', { className: checkedIcon }) : checkedIcon,
+      })
+    : null;
+
+  const uncheckedIconElement = uncheckedIcon && !isChecked && !loading
+    ? ED.createElement('span', {
+        className: 'ed-text-gray-500',
+        style: { width: handleSize * 0.5, height: handleSize * 0.5 },
+        children: typeof uncheckedIcon === 'string' ? ED.createElement('i', { className: uncheckedIcon }) : uncheckedIcon,
+      })
+    : null;
+
+  const checkedText = checkedChildren && isChecked
+    ? ED.createElement('span', {
+        className: `${sizeConfig.text} ed-text-white ed-font-medium ed-pl-2 ed-pr-${handleSize / 4 + 2} ed-select-none`,
+        style: { paddingRight: handleSize + 4 },
+      }, checkedChildren)
+    : null;
+
+  const uncheckedText = uncheckedChildren && !isChecked
+    ? ED.createElement('span', {
+        className: `${sizeConfig.text} ed-text-gray-500 ed-font-medium ed-pr-2 ed-pl-${handleSize / 4 + 2} ed-select-none`,
+        style: { paddingLeft: handleSize + 4 },
+      }, uncheckedChildren)
+    : null;
+
+  const handleClick = () => {
+    if (disabled || loading) return;
+    if (beforeChange) {
+      const result = beforeChange(!isChecked);
+      if (result === false) return;
+    }
+    onChange?.(!isChecked);
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleClick();
+    }
+  };
+
+  const switchElement = ED.createElement('button', {
+    id,
+    className: trackClasses,
+    style: {
+      width: switchWidth,
+      height: switchHeight,
+      minWidth: switchWidth,
+      ...style,
+    },
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    role: 'switch',
+    'aria-checked': isChecked,
+    'aria-label': ariaLabel || label,
+    tabIndex: disabled ? -1 : (tabIndex || 0),
+    autoFocus,
+    onFocus,
+    onBlur,
+    disabled: disabled || loading,
+    children: [
+      uncheckedText,
+      checkedText,
+      ED.createElement('span', {
+        key: 'handle',
+        className: handleClasses,
+        style: {
+          width: handleSize,
+          height: handleSize,
+          left: 3,
+          transform: `translateX(${translateX}px)`,
+        },
+        children: [loadingSpinner, checkedIconElement, uncheckedIconElement].filter(Boolean)[0] || null,
+      }),
+    ],
+  });
+
+  const labelElement = label
+    ? ED.createElement('span', {
+        className: `ed-text-sm ed-font-medium ${disabled ? 'ed-text-gray-400' : 'ed-text-gray-700'}`,
+      }, label)
+    : null;
+
+  if (label) {
+    return ED.createElement('div', {
+      className: `ed-inline-flex ed-items-center ed-gap-2 ${labelPosition === 'left' ? 'ed-flex-row-reverse' : ''}`,
+      children: [switchElement, labelElement],
+    });
+  }
+
+  return switchElement;
+}
+
+Switch.displayName = 'Switch';
+Switch.SIZES = SWITCH_SIZES;
+Switch.COLORS = SWITCH_COLORS;
+
+module.exports = Switch;