create-template-html-css 2.0.4 → 2.2.0

package/templates-react/switch/Switch.css

@@ -0,0 +1,244 @@
+.switch-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  cursor: pointer;
+  user-select: none;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+}
+
+.switch-input {
+  position: absolute;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  z-index: 1;
+}
+
+.switch-input:disabled {
+  cursor: not-allowed;
+}
+
+.switch-slider {
+  position: relative;
+  display: flex;
+  align-items: center;
+  background-color: #d1d5db;
+  border-radius: 9999px;
+  transition: all 0.3s ease;
+}
+
+.switch-slider::before {
+  content: '';
+  position: absolute;
+  background-color: white;
+  border-radius: 50%;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+/* Sizes */
+.switch-small {
+  width: 2rem;
+  height: 1.125rem;
+}
+
+.switch-small .switch-slider::before {
+  width: 0.875rem;
+  height: 0.875rem;
+  left: 0.125rem;
+}
+
+.switch-small.switch-checked .switch-slider::before {
+  transform: translateX(0.875rem);
+}
+
+.switch-medium {
+  width: 2.75rem;
+  height: 1.5rem;
+}
+
+.switch-medium .switch-slider::before {
+  width: 1.25rem;
+  height: 1.25rem;
+  left: 0.125rem;
+}
+
+.switch-medium.switch-checked .switch-slider::before {
+  transform: translateX(1.25rem);
+}
+
+.switch-large {
+  width: 3.5rem;
+  height: 2rem;
+}
+
+.switch-large .switch-slider::before {
+  width: 1.75rem;
+  height: 1.75rem;
+  left: 0.125rem;
+}
+
+.switch-large.switch-checked .switch-slider::before {
+  transform: translateX(1.5rem);
+}
+
+/* Colors */
+.switch-checked.switch-primary .switch-slider {
+  background-color: ##PRIMARY_COLOR##;
+}
+
+.switch-checked.switch-secondary .switch-slider {
+  background-color: ##SECONDARY_COLOR##;
+}
+
+.switch-checked.switch-success .switch-slider {
+  background-color: #10b981;
+}
+
+.switch-checked.switch-error .switch-slider {
+  background-color: #ef4444;
+}
+
+.switch-checked.switch-warning .switch-slider {
+  background-color: #f59e0b;
+}
+
+.switch-checked.switch-info .switch-slider {
+  background-color: #3b82f6;
+}
+
+/* Disabled state */
+.switch-disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.switch-disabled .switch-input {
+  cursor: not-allowed;
+}
+
+/* Loading state */
+.switch-loading {
+  pointer-events: none;
+}
+
+.switch-spinner {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 0.75rem;
+  height: 0.75rem;
+  border: 2px solid white;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+/* Icons */
+.switch-icon {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  color: white;
+  pointer-events: none;
+  transition: opacity 0.2s;
+}
+
+.switch-small .switch-icon {
+  font-size: 0.625rem;
+}
+
+.switch-large .switch-icon {
+  font-size: 0.875rem;
+}
+
+/* Label */
+.switch-label {
+  color: #374151;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.switch-label-disabled {
+  color: #9ca3af;
+  cursor: not-allowed;
+}
+
+/* Focus state */
+.switch-input:focus + .switch-slider {
+  outline: 2px solid ##PRIMARY_COLOR##;
+  outline-offset: 2px;
+}
+
+/* Hover state */
+.switch:not(.switch-disabled):hover .switch-slider {
+  filter: brightness(0.95);
+}
+
+.switch-checked:not(.switch-disabled):hover .switch-slider {
+  filter: brightness(1.05);
+}
+
+/* Active state */
+.switch:not(.switch-disabled):active .switch-slider::before {
+  width: 1.5rem;
+}
+
+.switch-small:not(.switch-disabled):active .switch-slider::before {
+  width: 1rem;
+}
+
+.switch-large:not(.switch-disabled):active .switch-slider::before {
+  width: 2rem;
+}
+
+/* Dark Mode Support */
+@media (prefers-color-scheme: dark) {
+  .switch-slider {
+    background-color: #4b5563;
+  }
+
+  .switch-slider::before {
+    background-color: #1f2937;
+  }
+
+  .switch-checked.switch-primary .switch-slider {
+    background-color: ##SECONDARY_COLOR##;
+  }
+
+  .switch-checked.switch-secondary .switch-slider {
+    background-color: ##PRIMARY_COLOR##;
+  }
+
+  .switch-label {
+    color: #e5e7eb;
+  }
+
+  .switch-label-disabled {
+    color: #6b7280;
+  }
+
+  .switch-input:focus + .switch-slider {
+    outline-color: ##SECONDARY_COLOR##;
+  }
+}

package/templates-react/switch/Switch.example.jsx

@@ -0,0 +1,221 @@
+import { useState } from 'react';
+import Switch from './Switch';
+
+function SwitchExample() {
+  const [checked, setChecked] = useState(false);
+  const [notifications, setNotifications] = useState(true);
+  const [darkMode, setDarkMode] = useState(false);
+  const [settings, setSettings] = useState({
+    wifi: true,
+    bluetooth: false,
+    airplane: false
+  });
+
+  const handleSettingChange = (key) => (value) => {
+    setSettings(prev => ({ ...prev, [key]: value }));
+  };
+
+  return (
+    <div style={{ padding: '2rem', maxWidth: '800px', margin: '0 auto' }}>
+      <h1>Switch Component Examples</h1>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>Basic Switch</h2>
+        <Switch
+          checked={checked}
+          onChange={setChecked}
+          label="Enable feature"
+        />
+        <p style={{ marginTop: '0.5rem', color: '#666' }}>
+          Status: {checked ? 'ON' : 'OFF'}
+        </p>
+      </section>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>Sizes</h2>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <Switch size="small" label="Small switch" />
+          <Switch size="medium" label="Medium switch (default)" />
+          <Switch size="large" label="Large switch" />
+        </div>
+      </section>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>Colors</h2>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <Switch checked color="primary" label="Primary" />
+          <Switch checked color="secondary" label="Secondary" />
+          <Switch checked color="success" label="Success" />
+          <Switch checked color="error" label="Error" />
+          <Switch checked color="warning" label="Warning" />
+          <Switch checked color="info" label="Info" />
+        </div>
+      </section>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>Label Positions</h2>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <Switch label="Label on right (default)" labelPosition="right" />
+          <Switch label="Label on left" labelPosition="left" />
+          <Switch />
+        </div>
+      </section>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>With Icons</h2>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <Switch
+            checked
+            label="Light/Dark mode"
+            icons={{
+              checked: '🌙',
+              unchecked: '☀️'
+            }}
+          />
+          <Switch
+            checked
+            label="Sound"
+            icons={{
+              checked: '🔊',
+              unchecked: '🔇'
+            }}
+            color="success"
+          />
+          <Switch
+            label="Notifications"
+            icons={{
+              checked: '✓',
+              unchecked: '✕'
+            }}
+            color="info"
+          />
+        </div>
+      </section>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>States</h2>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <Switch label="Normal switch" />
+          <Switch checked label="Checked switch" />
+          <Switch disabled label="Disabled off" />
+          <Switch checked disabled label="Disabled on" />
+          <Switch loading label="Loading state" />
+        </div>
+      </section>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>Settings Panel Example</h2>
+        <div style={{
+          backgroundColor: '#f9fafb',
+          padding: '1.5rem',
+          borderRadius: '0.5rem',
+          border: '1px solid #e5e7eb'
+        }}>
+          <h3 style={{ fontSize: '1rem', marginBottom: '1rem', color: '#111827' }}>
+            Connection Settings
+          </h3>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+            <div style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              padding: '0.75rem',
+              backgroundColor: 'white',
+              borderRadius: '0.375rem'
+            }}>
+              <div>
+                <div style={{ fontWeight: '500', color: '#111827' }}>Wi-Fi</div>
+                <div style={{ fontSize: '0.875rem', color: '#6b7280' }}>
+                  {settings.wifi ? 'Connected' : 'Disconnected'}
+                </div>
+              </div>
+              <Switch
+                checked={settings.wifi}
+                onChange={handleSettingChange('wifi')}
+                color="success"
+              />
+            </div>
+
+            <div style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              padding: '0.75rem',
+              backgroundColor: 'white',
+              borderRadius: '0.375rem'
+            }}>
+              <div>
+                <div style={{ fontWeight: '500', color: '#111827' }}>Bluetooth</div>
+                <div style={{ fontSize: '0.875rem', color: '#6b7280' }}>
+                  {settings.bluetooth ? 'On' : 'Off'}
+                </div>
+              </div>
+              <Switch
+                checked={settings.bluetooth}
+                onChange={handleSettingChange('bluetooth')}
+                color="info"
+              />
+            </div>
+
+            <div style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              padding: '0.75rem',
+              backgroundColor: 'white',
+              borderRadius: '0.375rem'
+            }}>
+              <div>
+                <div style={{ fontWeight: '500', color: '#111827' }}>Airplane Mode</div>
+                <div style={{ fontSize: '0.875rem', color: '#6b7280' }}>
+                  {settings.airplane ? 'Enabled' : 'Disabled'}
+                </div>
+              </div>
+              <Switch
+                checked={settings.airplane}
+                onChange={handleSettingChange('airplane')}
+                color="warning"
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>Preference Toggles</h2>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+          <Switch
+            checked={notifications}
+            onChange={setNotifications}
+            label="Enable notifications"
+            color="primary"
+            icons={{
+              checked: '🔔',
+              unchecked: '🔕'
+            }}
+          />
+          
+          <Switch
+            checked={darkMode}
+            onChange={setDarkMode}
+            label="Dark mode"
+            color="secondary"
+            icons={{
+              checked: '🌙',
+              unchecked: '☀️'
+            }}
+          />
+        </div>
+        <div style={{ marginTop: '1rem', padding: '1rem', backgroundColor: '#f3f4f6', borderRadius: '0.375rem' }}>
+          <strong>Current Preferences:</strong>
+          <ul style={{ marginTop: '0.5rem', paddingLeft: '1.5rem' }}>
+            <li>Notifications: {notifications ? 'Enabled' : 'Disabled'}</li>
+            <li>Dark Mode: {darkMode ? 'On' : 'Off'}</li>
+          </ul>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+export default SwitchExample;

package/templates-react/switch/Switch.jsx

@@ -0,0 +1,98 @@
+
+import './Switch.css';
+import { useState } from 'react';
+
+function Switch({ 
+  checked = false,
+  onChange,
+  disabled = false,
+  size = 'medium',
+  color = 'primary',
+  label = '',
+  labelPosition = 'right',
+  loading = false,
+  icons = null,
+  name = '',
+  id,
+  className = ''
+}) {
+  const [isChecked, setIsChecked] = useState(checked);
+
+  const handleChange = (e) => {
+    if (disabled || loading) return;
+    
+    const newValue = e.target.checked;
+    setIsChecked(newValue);
+    onChange?.(newValue, e);
+  };
+
+  const switchId = id || `switch-${name || Math.random().toString(36).substr(2, 9)}`;
+
+  const switchClasses = [
+    'switch',
+    `switch-${size}`,
+    `switch-${color}`,
+    isChecked ? 'switch-checked' : '',
+    disabled ? 'switch-disabled' : '',
+    loading ? 'switch-loading' : '',
+    className
+  ].filter(Boolean).join(' ');
+
+  const labelClasses = [
+    'switch-label',
+    labelPosition === 'left' ? 'switch-label-left' : 'switch-label-right',
+    disabled ? 'switch-label-disabled' : ''
+  ].filter(Boolean).join(' ');
+
+  const renderIcons = () => {
+    if (!icons) return null;
+    
+    return (
+      <span className="switch-icon">
+        {isChecked ? icons.checked : icons.unchecked}
+      </span>
+    );
+  };
+
+  const switchElement = (
+    <div className={switchClasses}>
+      <input
+        id={switchId}
+        type="checkbox"
+        className="switch-input"
+        checked={isChecked}
+        onChange={handleChange}
+        disabled={disabled || loading}
+        name={name}
+        role="switch"
+        aria-checked={isChecked}
+        aria-label={label || undefined}
+      />
+      <span className="switch-slider">
+        {loading ? (
+          <span className="switch-spinner"></span>
+        ) : (
+          renderIcons()
+        )}
+      </span>
+    </div>
+  );
+
+  if (!label) {
+    return switchElement;
+  }
+
+  return (
+    <label htmlFor={switchId} className="switch-wrapper">
+      {labelPosition === 'left' && (
+        <span className={labelClasses}>{label}</span>
+      )}
+      {switchElement}
+      {labelPosition === 'right' && (
+        <span className={labelClasses}>{label}</span>
+      )}
+    </label>
+  );
+}
+
+export default Switch;