ywana-core8 0.1.103 → 0.2.2

package/src/html/switch.css

@@ -19,182 +19,216 @@
   color: var(--text-color);
 }
 
-.switch-wrapper.disabled,
-.switch-container.disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
+/* Switch Component */
+.switch {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  outline: none;
+  border-radius: 50px;
+  transition: all 0.2s ease;
 }
 
-.switch-wrapper.disabled .switch-label,
-.switch-container.disabled .switch-label {
-  cursor: not-allowed;
-  color: var(--text-color-lighter);
+.switch:focus {
+  outline: 2px solid var(--primary-color, #007bff);
+  outline-offset: 2px;
 }
 
-/* Error states */
-.switch-wrapper.error .react-switch,
-.switch-container.error .react-switch {
-  border: 2px solid var(--danger-color, #dc3545);
-  border-radius: 25px;
+.switch:hover:not(.switch--disabled) {
+  transform: scale(1.02);
 }
 
-/* Switch2 Styles */
-.switch2-wrapper,
-.switch2-container {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
+/* Switch Track */
+.switch__track {
+  width: 48px;
+  height: 24px;
+  background-color: var(--switch-off-color, #ccc);
+  border-radius: 50px;
+  position: relative;
+  transition: background-color 0.25s ease;
+  border: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-.switch2-container {
-  align-items: flex-start;
+.switch--checked .switch__track {
+  background-color: var(--switch-on-color, #007bff);
 }
 
-.switch2-label {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  cursor: pointer;
-  font-size: 1rem;
-  color: var(--text-color);
+/* Switch Handle */
+.switch__handle {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  background-color: white;
+  border-radius: 50%;
+  transition: transform 0.25s ease, box-shadow 0.15s ease;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.8);
 }
 
-.switch2 {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  transition: background-color 0.2s ease;
-  cursor: pointer;
+.switch--checked .switch__handle {
+  transform: translateX(24px);
 }
 
-.switch2:hover {
-  background-color: rgba(0, 0, 0, 0.04);
+.switch:active:not(.switch--disabled) .switch__handle {
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
 }
 
-.switch2:focus {
-  outline: 2px solid var(--primary-color, #2693e6);
-  outline-offset: 2px;
+/* Switch Sizes */
+.switch--small .switch__track {
+  width: 32px;
+  height: 16px;
 }
 
-.switch2.disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
+.switch--small .switch__handle {
+  width: 12px;
+  height: 12px;
+  top: 1px;
+  left: 1px;
 }
 
-.switch2.disabled:hover {
-  background-color: transparent;
+.switch--small.switch--checked .switch__handle {
+  transform: translateX(16px);
 }
 
-.switch2.readonly {
-  cursor: default;
+.switch--normal .switch__track {
+  width: 48px;
+  height: 24px;
 }
 
-.switch2.readonly:hover {
-  background-color: transparent;
+.switch--normal .switch__handle {
+  width: 18px;
+  height: 18px;
+  top: 2px;
+  left: 2px;
 }
 
-.switch2.error {
-  color: var(--danger-color, #dc3545);
+.switch--normal.switch--checked .switch__handle {
+  transform: translateX(24px);
 }
 
-/* Error message styles */
-.error-message {
-  color: var(--danger-color, #dc3545);
-  font-size: 0.8rem;
-  margin-top: 0.25rem;
-  display: block;
+.switch--large .switch__track {
+  width: 56px;
+  height: 28px;
 }
 
-/* React Switch customizations */
-.react-switch {
-  vertical-align: middle;
-  border: none !important;
+.switch--large .switch__handle {
+  width: 22px;
+  height: 22px;
+  top: 2px;
+  left: 2px;
 }
 
-.react-switch > div {
-  border: 1px solid rgba(0, 0, 0, 0.1) !important;
+.switch--large.switch--checked .switch__handle {
+  transform: translateX(28px);
 }
 
-.react-switch.error {
-  box-shadow: 0 0 0 2px var(--danger-color, #dc3545) !important;
+/* Switch States */
+.switch--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
 }
 
-.react-switch.error > div {
-  border-color: var(--danger-color, #dc3545) !important;
+.switch--disabled:hover {
+  transform: none;
 }
 
-/* Focus styles for react-switch */
-.react-switch:focus {
-  outline: 2px solid var(--primary-color, #2693e6);
-  outline-offset: 2px;
+.switch--readonly {
+  cursor: default;
 }
 
-/* Ensure proper styling for react-switch background */
-.react-switch > div[style*="background"] {
-  transition: background-color 0.25s ease !important;
+.switch--readonly:hover {
+  transform: none;
 }
 
-/* Handle styling */
-.react-switch > div > div {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
-  border: 1px solid rgba(255, 255, 255, 0.8) !important;
+.switch--error .switch__track {
+  border-color: var(--danger-color, #dc3545);
+  box-shadow: 0 0 0 1px var(--danger-color, #dc3545);
 }
 
-/* Size variants for Switch2 */
-.switch2.small {
-  padding: 0.25rem;
+/* Error message styles */
+.error-message {
+  color: var(--danger-color, #dc3545);
+  font-size: 0.8rem;
+  margin-top: 0.25rem;
+  display: block;
 }
 
-.switch2.normal {
-  padding: 0.375rem;
+/* Container States */
+.switch-wrapper.disabled,
+.switch-container.disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
 }
 
-.switch2.large {
-  padding: 0.5rem;
+.switch-wrapper.disabled .switch-label,
+.switch-container.disabled .switch-label {
+  cursor: not-allowed;
+  color: var(--text-color-lighter);
 }
 
 /* Responsive adjustments */
 @media (max-width: 768px) {
-  .switch-label,
-  .switch2-label {
+  .switch-label {
     font-size: 0.9rem;
     gap: 0.5rem;
   }
 
   .switch-wrapper,
-  .switch-container,
-  .switch2-wrapper,
-  .switch2-container {
+  .switch-container {
     gap: 0.25rem;
   }
+
+  /* Slightly larger touch targets on mobile */
+  .switch--small .switch__track {
+    width: 36px;
+    height: 18px;
+  }
+
+  .switch--small .switch__handle {
+    width: 14px;
+    height: 14px;
+  }
 }
 
 /* High contrast mode support */
 @media (prefers-contrast: high) {
-  .switch2:focus {
+  .switch:focus {
     outline-width: 3px;
   }
 
-  .react-switch:focus {
-    outline-width: 3px;
+  .switch__track {
+    border-width: 2px;
+  }
+
+  .switch__handle {
+    border-width: 2px;
+    border-color: #000;
   }
 }
 
 /* Reduced motion support */
 @media (prefers-reduced-motion: reduce) {
-  .switch2 {
+  .switch,
+  .switch__track,
+  .switch__handle {
     transition: none;
   }
-
-  .react-switch * {
-    transition: none !important;
-  }
 }
 
 /* Dark theme support */
 @media (prefers-color-scheme: dark) {
-  .switch2:hover {
-    background-color: rgba(255, 255, 255, 0.08);
+  .switch__handle {
+    background-color: #f8f9fa;
+    border-color: rgba(255, 255, 255, 0.2);
+  }
+
+  .switch__track {
+    border-color: rgba(255, 255, 255, 0.2);
+  }
+
+  .switch-label {
+    color: var(--text-color-dark, #e2e8f0);
   }
 }

package/src/html/switch.example.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Switch, Switch2 } from './switch'
+import { Switch } from './switch'
 import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'
 
 /**
@@ -265,27 +265,30 @@ export const SwitchExamples = () => {
                 </div>
             </section>
 
-            {/* Switch2 básicos */}
+            {/* Switch con colores personalizados */}
             <section style={{ marginBottom: '2rem' }}>
-                <h3>Switch2 Básicos (Material Icons)</h3>
+                <h3>Switch con Colores Personalizados</h3>
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-                    <Switch2 
-                        id="analytics" 
-                        label="Análisis de uso" 
+                    <Switch
+                        id="analytics"
+                        label="Análisis de uso"
                         checked={settings.analytics}
                         onChange={handleChange}
+                        onColor="#28a745"
                     />
-                    <Switch2 
-                        id="marketing" 
-                        label="Comunicaciones de marketing" 
+                    <Switch
+                        id="marketing"
+                        label="Comunicaciones de marketing"
                         checked={settings.marketing}
                         onChange={handleChange}
+                        onColor="#fd7e14"
                     />
-                    <Switch2 
-                        id="location" 
-                        label="Servicios de ubicación" 
+                    <Switch
+                        id="location"
+                        label="Servicios de ubicación"
                         checked={settings.location}
                         onChange={handleChange}
+                        onColor="#6f42c1"
                     />
                 </div>
             </section>
@@ -302,11 +305,12 @@ export const SwitchExamples = () => {
                             checked={true}
                             onChange={() => {}}
                         />
-                        <Switch2 
-                            id="size2-small" 
+                        <Switch
+                            id="size2-small"
                             size="small"
                             checked={true}
                             onChange={() => {}}
+                            onColor="#28a745"
                         />
                     </div>
                     <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
@@ -317,11 +321,12 @@ export const SwitchExamples = () => {
                             checked={true}
                             onChange={() => {}}
                         />
-                        <Switch2 
-                            id="size2-normal" 
+                        <Switch
+                            id="size2-normal"
                             size="normal"
                             checked={true}
                             onChange={() => {}}
+                            onColor="#fd7e14"
                         />
                     </div>
                     <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
@@ -332,11 +337,12 @@ export const SwitchExamples = () => {
                             checked={true}
                             onChange={() => {}}
                         />
-                        <Switch2 
-                            id="size2-large" 
+                        <Switch
+                            id="size2-large"
                             size="large"
                             checked={true}
                             onChange={() => {}}
+                            onColor="#6f42c1"
                         />
                     </div>
                 </div>
@@ -353,26 +359,27 @@ export const SwitchExamples = () => {
                         disabled={true}
                         onChange={handleChange}
                     />
-                    <Switch2 
-                        id="readonly" 
-                        label="Switch2 solo lectura" 
+                    <Switch
+                        id="readonly"
+                        label="Switch solo lectura"
                         checked={true}
                         readOnly={true}
                         onChange={handleChange}
                     />
-                    <Switch 
-                        id="error-switch" 
-                        label="Switch con error" 
+                    <Switch
+                        id="error-switch"
+                        label="Switch con error"
                         checked={settings.notifications}
                         error={validationErrors.notifications}
                         onChange={handleChange}
                     />
-                    <Switch2 
-                        id="error-switch2" 
-                        label="Switch2 con error" 
+                    <Switch
+                        id="error-switch2"
+                        label="Switch con error personalizado"
                         checked={settings.analytics}
                         error={validationErrors.analytics}
                         onChange={handleChange}
+                        onColor="#dc3545"
                     />
                 </div>
             </section>
@@ -388,19 +395,21 @@ export const SwitchExamples = () => {
                 }}>
                     <h4>Conectividad</h4>
                     <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginBottom: '1.5rem' }}>
-                        <Switch2 
-                            id="wifi" 
-                            label="Wi-Fi" 
+                        <Switch
+                            id="wifi"
+                            label="Wi-Fi"
                             checked={settings.wifi}
                             onChange={handleChange}
                             ariaLabel="Activar o desactivar conexión Wi-Fi"
+                            onColor="#28a745"
                         />
-                        <Switch2 
-                            id="bluetooth" 
-                            label="Bluetooth" 
+                        <Switch
+                            id="bluetooth"
+                            label="Bluetooth"
                             checked={settings.bluetooth}
                             onChange={handleChange}
                             ariaLabel="Activar o desactivar Bluetooth"
+                            onColor="#17a2b8"
                         />
                     </div>
 
@@ -489,10 +498,11 @@ export const SwitchExamples = () => {
                             label="Switch accesible 1" 
                             onChange={handleChange}
                         />
-                        <Switch2 
-                            id="a11y2" 
-                            label="Switch2 accesible 2" 
+                        <Switch
+                            id="a11y2"
+                            label="Switch accesible 2"
                             onChange={handleChange}
+                            onColor="#6f42c1"
                         />
                         <Switch 
                             id="a11y3"