@codesinger0/shared-components 1.1.85 → 1.1.86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codesinger0/shared-components",
-  "version": "1.1.85",
+  "version": "1.1.86",
   "description": "Shared React components for customer projects",
   "main": "dist/index.js",
   "files": [

package/dist/components 2/AccessibilityMenu.jsx

@@ -1,474 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { 
-  Accessibility, 
-  ZoomIn, 
-  ZoomOut, 
-  Sun, 
-  Moon, 
-  Type,
-  Eye,
-  X
-} from 'lucide-react';
-
-const AccessibilityMenu = ({
-  position = 'bottom-left', // 'bottom-left' or 'bottom-right'
-  bottomOffset = '1.5rem',
-  sideOffset = '1.5rem',
-  size = 'large', // 'small', 'medium', 'large'
-  className = '',
-  onSettingChange = null, // callback when settings change
-  ...props
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [settings, setSettings] = useState({
-    fontSize: 100,
-    contrast: 'normal',
-    darkMode: false,
-    underlineLinks: false,
-    largerCursor: false
-  });
-
-  // Size configurations
-  const sizeClasses = {
-    small: 'w-12 h-12',
-    medium: 'w-14 h-14',
-    large: 'w-16 h-16'
-  };
-
-  const iconSizes = {
-    small: 20,
-    medium: 24,
-    large: 28
-  };
-
-  // Position styles for button
-  const positionStyles = {
-    'bottom-left': {
-      bottom: bottomOffset,
-      left: sideOffset,
-      right: 'auto'
-    },
-    'bottom-right': {
-      bottom: bottomOffset,
-      right: sideOffset,
-      left: 'auto'
-    }
-  };
-
-  // Menu position styles
-  const menuPositionStyles = {
-    'bottom-left': {
-      bottom: `calc(${bottomOffset} + ${sizeClasses[size] === 'w-12 h-12' ? '4rem' : sizeClasses[size] === 'w-14 h-14' ? '4.5rem' : '5rem'})`,
-      left: sideOffset,
-      right: 'auto'
-    },
-    'bottom-right': {
-      bottom: `calc(${bottomOffset} + ${sizeClasses[size] === 'w-12 h-12' ? '4rem' : sizeClasses[size] === 'w-14 h-14' ? '4.5rem' : '5rem'})`,
-      right: sideOffset,
-      left: 'auto'
-    }
-  };
-
-  useEffect(() => {
-    // Apply font size
-    document.documentElement.style.fontSize = `${settings.fontSize}%`;
-
-    // Apply contrast
-    if (settings.contrast === 'high') {
-      document.documentElement.style.filter = 'contrast(1.5)';
-    } else {
-      document.documentElement.style.filter = 'none';
-    }
-
-    // Apply dark mode
-    if (settings.darkMode) {
-      document.documentElement.classList.add('dark-mode-accessibility');
-    } else {
-      document.documentElement.classList.remove('dark-mode-accessibility');
-    }
-
-    // Apply link underline
-    if (settings.underlineLinks) {
-      document.documentElement.classList.add('underline-links');
-    } else {
-      document.documentElement.classList.remove('underline-links');
-    }
-
-    // Apply larger cursor
-    if (settings.largerCursor) {
-      document.documentElement.classList.add('large-cursor');
-    } else {
-      document.documentElement.classList.remove('large-cursor');
-    }
-
-    // Callback
-    if (onSettingChange) {
-      onSettingChange(settings);
-    }
-  }, [settings, onSettingChange]);
-
-  const increaseFontSize = () => {
-    setSettings(prev => ({
-      ...prev,
-      fontSize: Math.min(prev.fontSize + 10, 150)
-    }));
-  };
-
-  const decreaseFontSize = () => {
-    setSettings(prev => ({
-      ...prev,
-      fontSize: Math.max(prev.fontSize - 10, 80)
-    }));
-  };
-
-  const resetSettings = () => {
-    setSettings({
-      fontSize: 100,
-      contrast: 'normal',
-      darkMode: false,
-      underlineLinks: false,
-      largerCursor: false
-    });
-  };
-
-  const toggleContrast = () => {
-    setSettings(prev => ({
-      ...prev,
-      contrast: prev.contrast === 'normal' ? 'high' : 'normal'
-    }));
-  };
-
-  const toggleDarkMode = () => {
-    setSettings(prev => ({
-      ...prev,
-      darkMode: !prev.darkMode
-    }));
-  };
-
-  const toggleUnderlineLinks = () => {
-    setSettings(prev => ({
-      ...prev,
-      underlineLinks: !prev.underlineLinks
-    }));
-  };
-
-  const toggleLargerCursor = () => {
-    setSettings(prev => ({
-      ...prev,
-      largerCursor: !prev.largerCursor
-    }));
-  };
-
-  return (
-    <>
-      {/* Main Button */}
-      <motion.button
-        onClick={() => setIsOpen(!isOpen)}
-        className={`fixed z-50 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center ${sizeClasses[size]} ${className}`}
-        style={positionStyles[position]}
-        initial={{ scale: 0, opacity: 0 }}
-        animate={{ scale: 1, opacity: 1 }}
-        whileHover={{ scale: 1.1 }}
-        whileTap={{ scale: 0.9 }}
-        transition={{
-          type: "spring",
-          stiffness: 300,
-          damping: 25
-        }}
-        aria-label="תפריט נגישות"
-        {...props}
-      >
-        <Accessibility size={iconSizes[size]} />
-      </motion.button>
-
-      {/* Menu Panel */}
-      <AnimatePresence>
-        {isOpen && (
-          <>
-            {/* Backdrop */}
-            <motion.div
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              className="fixed inset-0 bg-black bg-opacity-20 z-40"
-              onClick={() => setIsOpen(false)}
-            />
-
-            {/* Menu */}
-            <motion.div
-              initial={{ opacity: 0, scale: 0.8, y: 20 }}
-              animate={{ opacity: 1, scale: 1, y: 0 }}
-              exit={{ opacity: 0, scale: 0.8, y: 20 }}
-              transition={{
-                type: "spring",
-                stiffness: 300,
-                damping: 25
-              }}
-              className="fixed z-50 bg-white rounded-lg shadow-2xl p-6 w-80"
-              style={menuPositionStyles[position]}
-              dir="rtl"
-            >
-              {/* Header */}
-              <div className="flex justify-between items-center mb-4 pb-3 border-b">
-                <h3 className="text-lg font-bold text-gray-800">נגישות</h3>
-                <button
-                  onClick={() => setIsOpen(false)}
-                  className="text-gray-500 hover:text-gray-700 p-1 rounded-full hover:bg-gray-100"
-                  aria-label="סגור"
-                >
-                  <X size={20} />
-                </button>
-              </div>
-
-              {/* Settings */}
-              <div className="space-y-4">
-                {/* Font Size */}
-                <div className="flex items-center justify-between">
-                  <span className="text-sm font-medium text-gray-700 flex items-center gap-2">
-                    <Type size={18} />
-                    גודל טקסט
-                  </span>
-                  <div className="flex gap-2">
-                    <button
-                      onClick={decreaseFontSize}
-                      className="p-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
-                      aria-label="הקטן טקסט"
-                      disabled={settings.fontSize <= 80}
-                    >
-                      <ZoomOut size={16} />
-                    </button>
-                    <span className="px-3 py-2 bg-gray-50 rounded-lg text-sm font-medium min-w-[3rem] text-center">
-                      {settings.fontSize}%
-                    </span>
-                    <button
-                      onClick={increaseFontSize}
-                      className="p-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
-                      aria-label="הגדל טקסט"
-                      disabled={settings.fontSize >= 150}
-                    >
-                      <ZoomIn size={16} />
-                    </button>
-                  </div>
-                </div>
-
-                {/* Contrast */}
-                <button
-                  onClick={toggleContrast}
-                  className={`w-full flex items-center justify-between p-3 rounded-lg transition-colors ${
-                    settings.contrast === 'high'
-                      ? 'bg-blue-50 border-2 border-blue-500'
-                      : 'bg-gray-50 hover:bg-gray-100'
-                  }`}
-                >
-                  <span className="text-sm font-medium text-gray-700 flex items-center gap-2">
-                    <Eye size={18} />
-                    ניגודיות גבוהה
-                  </span>
-                  <div className={`w-10 h-6 rounded-full transition-colors ${
-                    settings.contrast === 'high' ? 'bg-blue-500' : 'bg-gray-300'
-                  } relative`}>
-                    <div className={`absolute w-4 h-4 bg-white rounded-full top-1 transition-all ${
-                      settings.contrast === 'high' ? 'right-1' : 'right-5'
-                    }`} />
-                  </div>
-                </button>
-
-                {/* Dark Mode */}
-                <button
-                  onClick={toggleDarkMode}
-                  className={`w-full flex items-center justify-between p-3 rounded-lg transition-colors ${
-                    settings.darkMode
-                      ? 'bg-blue-50 border-2 border-blue-500'
-                      : 'bg-gray-50 hover:bg-gray-100'
-                  }`}
-                >
-                  <span className="text-sm font-medium text-gray-700 flex items-center gap-2">
-                    {settings.darkMode ? <Moon size={18} /> : <Sun size={18} />}
-                    מצב כהה
-                  </span>
-                  <div className={`w-10 h-6 rounded-full transition-colors ${
-                    settings.darkMode ? 'bg-blue-500' : 'bg-gray-300'
-                  } relative`}>
-                    <div className={`absolute w-4 h-4 bg-white rounded-full top-1 transition-all ${
-                      settings.darkMode ? 'right-1' : 'right-5'
-                    }`} />
-                  </div>
-                </button>
-
-                {/* Underline Links */}
-                <button
-                  onClick={toggleUnderlineLinks}
-                  className={`w-full flex items-center justify-between p-3 rounded-lg transition-colors ${
-                    settings.underlineLinks
-                      ? 'bg-blue-50 border-2 border-blue-500'
-                      : 'bg-gray-50 hover:bg-gray-100'
-                  }`}
-                >
-                  <span className="text-sm font-medium text-gray-700">
-                    הדגש קישורים
-                  </span>
-                  <div className={`w-10 h-6 rounded-full transition-colors ${
-                    settings.underlineLinks ? 'bg-blue-500' : 'bg-gray-300'
-                  } relative`}>
-                    <div className={`absolute w-4 h-4 bg-white rounded-full top-1 transition-all ${
-                      settings.underlineLinks ? 'right-1' : 'right-5'
-                    }`} />
-                  </div>
-                </button>
-
-                {/* Larger Cursor */}
-                <button
-                  onClick={toggleLargerCursor}
-                  className={`w-full flex items-center justify-between p-3 rounded-lg transition-colors ${
-                    settings.largerCursor
-                      ? 'bg-blue-50 border-2 border-blue-500'
-                      : 'bg-gray-50 hover:bg-gray-100'
-                  }`}
-                >
-                  <span className="text-sm font-medium text-gray-700">
-                    סמן גדול
-                  </span>
-                  <div className={`w-10 h-6 rounded-full transition-colors ${
-                    settings.largerCursor ? 'bg-blue-500' : 'bg-gray-300'
-                  } relative`}>
-                    <div className={`absolute w-4 h-4 bg-white rounded-full top-1 transition-all ${
-                      settings.largerCursor ? 'right-1' : 'right-5'
-                    }`} />
-                  </div>
-                </button>
-
-                {/* Reset Button */}
-                <button
-                  onClick={resetSettings}
-                  className="w-full mt-4 p-3 bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium rounded-lg transition-colors"
-                >
-                  איפוס הגדרות
-                </button>
-              </div>
-            </motion.div>
-          </>
-        )}
-      </AnimatePresence>
-
-      {/* Global Styles */}
-      <style jsx global>{`
-        .dark-mode-accessibility {
-          filter: invert(1) hue-rotate(180deg);
-        }
-        
-        .dark-mode-accessibility img,
-        .dark-mode-accessibility video,
-        .dark-mode-accessibility [style*="background-image"] {
-          filter: invert(1) hue-rotate(180deg);
-        }
-        
-        .underline-links a {
-          text-decoration: underline !important;
-        }
-        
-        .large-cursor,
-        .large-cursor * {
-          cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M8 4 L8 24 L14 18 L18 28 L22 26 L18 16 L26 16 Z" fill="black" stroke="white" stroke-width="1"/></svg>') 0 0, auto !important;
-        }
-        
-        .large-cursor button,
-        .large-cursor a {
-          cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M16 4 L12 12 L4 12 L4 16 L12 16 L16 24 L20 24 L20 16 L28 16 L28 12 L20 12 L20 4 Z" fill="black" stroke="white" stroke-width="1"/></svg>') 16 16, pointer !important;
-        }
-      `}</style>
-    </>
-  );
-};
-
-// Demo
-const Demo = () => {
-  const handleSettingChange = (settings) => {
-    console.log('Settings changed:', settings);
-  };
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-purple-50 to-blue-100 p-8" dir="rtl">
-      <div className="max-w-4xl mx-auto">
-        <h1 className="text-4xl font-bold text-gray-800 mb-6 text-center">
-          Accessibility Menu Demo
-        </h1>
-        
-        <div className="bg-white rounded-xl shadow-lg p-8 mb-8">
-          <h2 className="text-2xl font-semibold mb-4">תכונות:</h2>
-          <ul className="space-y-2 text-gray-700">
-            <li>✅ מיקום גמיש (שמאל/ימין למטה)</li>
-            <li>✅ שליטה מלאה על המרחקים מהקצוות</li>
-            <li>✅ 3 גדלים: small, medium, large</li>
-            <li>✅ שינוי גודל טקסט (80% - 150%)</li>
-            <li>✅ ניגודיות גבוהה</li>
-            <li>✅ מצב כהה</li>
-            <li>✅ הדגשת קישורים</li>
-            <li>✅ סמן עכבר גדול</li>
-            <li>✅ Callback לשינויי הגדרות</li>
-          </ul>
-        </div>
-
-        <div className="bg-white rounded-xl shadow-lg p-8 mb-8">
-          <h2 className="text-2xl font-semibold mb-4">דוגמאות שימוש:</h2>
-          
-          <div className="space-y-4 text-sm bg-gray-50 p-4 rounded-lg font-mono text-left" dir="ltr">
-            <div className="bg-white p-3 rounded border">
-              <div className="text-gray-500 mb-2">// Bottom Left (default)</div>
-              <code className="text-blue-600">
-                {`<AccessibilityMenu
-  position="bottom-left"
-  bottomOffset="1.5rem"
-  sideOffset="1.5rem"
-/>`}
-              </code>
-            </div>
-
-            <div className="bg-white p-3 rounded border">
-              <div className="text-gray-500 mb-2">// Bottom Right with callback</div>
-              <code className="text-blue-600">
-                {`<AccessibilityMenu
-  position="bottom-right"
-  size="medium"
-  onSettingChange={(settings) => {
-    console.log('Settings:', settings);
-  }}
-/>`}
-              </code>
-            </div>
-          </div>
-        </div>
-
-        <div className="bg-white rounded-xl shadow-lg p-8">
-          <h2 className="text-2xl font-semibold mb-4">טקסט לדוגמה</h2>
-          <p className="mb-4">
-            זהו טקסט לדוגמה שיושפע מהגדרות הנגישות. נסה לשנות את גודל הטקסט, הניגודיות והמצב הכהה כדי לראות את ההשפעה.
-          </p>
-          <a href="#" className="text-blue-600 hover:underline">זהו קישור לדוגמה</a>
-          <div className="mt-4 h-96 flex items-center justify-center text-gray-400">
-            <p>גלול למטה כדי לראות את תפריט הנגישות 👇</p>
-          </div>
-        </div>
-      </div>
-
-      {/* Demo Menus */}
-      <AccessibilityMenu
-        position="bottom-left"
-        bottomOffset="1.5rem"
-        sideOffset="1.5rem"
-        size="large"
-        onSettingChange={handleSettingChange}
-      />
-
-      <AccessibilityMenu
-        position="bottom-right"
-        bottomOffset="1.5rem"
-        sideOffset="1.5rem"
-        size="medium"
-        onSettingChange={handleSettingChange}
-      />
-    </div>
-  );
-};
-
-export default AccessibilityMenu;

package/dist/components 2/AdvantagesList.jsx

@@ -1,89 +0,0 @@
-const AdvantagesList = ({
-    points = [],
-    title,
-    subtitle,
-    className = '',
-    classNames = {},
-    ...props
-}) => {
-    const {
-        title: titleClass = 'main-title',
-        subtitle: subtitleClass = 'main-subtitle',
-        content: contentClass = 'content-text'
-    } = classNames;
-
-    if (!points || points.length === 0) {
-        return (
-            <section className={`py-16 px-4 ${className}`} {...props} dir="rtl">
-                <div className="max-w-6xl mx-auto text-center">
-                    {title && <h2 className={titleClass + " mb-4"}>{title}</h2>}
-                    {subtitle && <h3 className={subtitleClass + " mb-8 whitespace-pre-line"}>{subtitle}</h3>}
-                    <p className={contentClass}>אין נקודות להצגה</p>
-                </div>
-            </section>
-        );
-    }
-
-    return (
-        <section className={`py-16 px-4 bg-main ${className}`} {...props} dir="rtl">
-            <div className="max-w-6xl mx-auto">
-                {/* Header */}
-                {(title || subtitle) && (
-                    <div className="text-center mb-12">
-                        {title && <h2 className={titleClass + " mb-4"}>{title}</h2>}
-                        {subtitle && <h3 className={subtitleClass}>{subtitle}</h3>}
-                    </div>
-                )}
-
-                {/* Points Grid */}
-                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                    {points.map((point, index) => (
-                        <div key={index} className="glass-card p-6 hover:scale-105 transition-transform duration-200">
-                            {/* Desktop Layout - Horizontal */}
-                            <div className="hidden lg:flex items-start gap-4">
-                                <div className="flex-shrink-0 w-12 h-12 rounded-full flex items-center justify-center text-primary">
-                                    <point.icon size={24} />
-                                </div>
-                                <div className="flex-1">
-                                    <span className='content-text leading-relaxed font-semibold'>{point.bold}</span>
-                                    <p className="content-text leading-relaxed" style={{ whiteSpace: 'pre-line' }}>{point.text}</p>
-                                    {point.subs && point.subs.length > 0 && (
-                                        <ul className="mt-3 space-y-2 list-disc list-inside">
-                                            {point.subs.map((sub, subIndex) => (
-                                                <li key={subIndex} className="subtitle leading-relaxed text-base">
-                                                    {sub}
-                                                </li>
-                                            ))}
-                                        </ul>
-                                    )}
-                                </div>
-                            </div>
-
-                            {/* Mobile Layout - Vertical */}
-                            <div className="lg:hidden text-center space-y-2">
-                                <div className="flex justify-center">
-                                    <div className="w-14 h-10 rounded-full flex items-center justify-center text-primary">
-                                        <point.icon size={26} />
-                                    </div>
-                                </div>
-                                <span className='content-text leading-relaxed font-semibold'>{point.bold}</span>
-                                <p className="content-text leading-relaxed" style={{ whiteSpace: 'pre-line' }}>{point.text}</p>
-                                {point.subs && point.subs.length > 0 && (
-                                    <ul className="mt-3 space-y-2 list-disc list-inside text-right">
-                                        {point.subs.map((sub, subIndex) => (
-                                            <li key={subIndex} className="subtitle leading-relaxed text-sm">
-                                                {sub}
-                                            </li>
-                                        ))}
-                                    </ul>
-                                )}
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </section>
-    );
-};
-
-export default AdvantagesList;