ywana-core8 0.1.81 → 0.1.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.1.81",
+  "version": "0.1.83",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/html/list.css

@@ -10,7 +10,6 @@
 }
 
 .list>header {
-  padding: .5rem 0 0 1.5rem;
   color: var(--text-color-light);
   text-transform: capitalize;
   font-size: .8rem;
@@ -20,10 +19,10 @@
   overflow: auto;
   list-style: none;
   margin: 0;
-  padding: 0.5rem 0;
   cursor: pointer;
   display: flex;
   flex-direction: column;
+  padding: 0;
 }
 
 .list.grouped>ul {
@@ -100,17 +99,25 @@
 /* Search functionality */
 .list__search {
   padding: 1rem;
-  border-bottom: 1px solid var(--divider-color, #e0e0e0);
   background-color: var(--background-color-light, #fafafa);
 }
 
+/* Outlined variant - search with border */
+.list--outlined .list__search {
+  border-bottom: 1px solid var(--divider-color, #e0e0e0);
+}
+
 /* Sort functionality */
 .list__sort {
   padding: 0.5rem 1rem;
-  border-bottom: 1px solid var(--divider-color, #e0e0e0);
   background-color: var(--background-color-light, #fafafa);
 }
 
+/* Outlined variant - sort with border */
+.list--outlined .list__sort {
+  border-bottom: 1px solid var(--divider-color, #e0e0e0);
+}
+
 .list__sort-button {
   display: flex;
   align-items: center;
@@ -163,25 +170,28 @@
   align-items: center;
   padding: 0.75rem;
   cursor: pointer;
-  border-bottom: solid 1px var(--divider-color, #e0e0e0);
   transition: background-color 0.2s ease, transform 0.1s ease;
   outline: none;
   position: relative;
 }
 
+/* Outlined variant - items with borders */
+.list--outlined .list__item {
+  border-bottom: solid 1px var(--divider-color, #e0e0e0);
+}
+
 .list--dense .list__item {
   padding: 0.5rem 0.75rem;
 }
 
 .list__item:focus {
   background-color: var(--focus-color, rgba(0, 0, 0, 0.08));
-  outline: 2px solid var(--primary-color, #2196f3);
   outline-offset: -2px;
 }
 
 .list__item--selected {
   background-color: var(--primary-color-lighter, #e3f2fd);
-  border-left: 4px solid var(--primary-color, #2196f3);
+  border-left: .1rem solid var(--primary-color, #2196f3);
 }
 
 .list__item--disabled {
@@ -313,7 +323,6 @@
   align-items: center;
   padding: 0.5rem 0.75rem;
   background-color: var(--background-color-light, #fafafa);
-  border-bottom: solid 1px var(--divider-color, #e0e0e0);
   font-weight: 600;
   color: var(--text-color-light, #666);
   cursor: pointer;
@@ -321,6 +330,11 @@
   outline: none;
 }
 
+/* Outlined variant - group headers with border */
+.list--outlined .list__group-header {
+  border-bottom: solid 1px var(--divider-color, #e0e0e0);
+}
+
 .list__group-header:hover {
   background-color: var(--hover-color, rgba(0, 0, 0, 0.04));
 }
@@ -412,7 +426,7 @@
 
 /* High Contrast Mode */
 @media (prefers-contrast: high) {
-  .list__item {
+  .list--outlined .list__item {
     border-bottom-width: 2px;
   }
 
@@ -455,10 +469,13 @@
 
   .list__item {
     break-inside: avoid;
-    border-bottom: 1px solid black !important;
     background: white !important;
   }
 
+  .list--outlined .list__item {
+    border-bottom: 1px solid black !important;
+  }
+
   .list__item-line1,
   .list__item-line2,
   .list__item-meta {

package/src/html/list.example.js

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
 import { List } from './list'
 import { Button } from './button'
-import { Icon } from '
-import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'./icon'
+import { Icon } from './icon'
+import { ExampleLayout, ExampleSection, ExampleSubsection, CodeSnippet } from './ExampleLayout'
 
 /**
  * Ejemplos del componente List mejorado manteniendo 100% compatibilidad
@@ -13,54 +13,109 @@ export const ListExamples = () => {
     const [isLoading, setIsLoading] = useState(false)
     const [showEmpty, setShowEmpty] = useState(false)
 
+    // Función para generar avatares con iniciales y colores aleatorios
+    const generateAvatar = (name) => {
+        const colors = [
+            '#2196F3', '#4CAF50', '#FF9800', '#9C27B0', '#F44336',
+            '#00BCD4', '#795548', '#607D8B', '#3F51B5', '#8BC34A',
+            '#FFC107', '#E91E63', '#009688', '#673AB7', '#FF5722'
+        ]
+
+        const initials = name
+            .split(' ')
+            .map(word => word.charAt(0).toUpperCase())
+            .slice(0, 2)
+            .join('')
+
+        const colorIndex = name.length % colors.length
+        const backgroundColor = colors[colorIndex]
+
+        return (
+            <div style={{
+                width: '40px',
+                height: '40px',
+                borderRadius: '50%',
+                backgroundColor,
+                color: 'white',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: '14px',
+                fontWeight: 'bold'
+            }}>
+                {initials}
+            </div>
+        )
+    }
+
     // Datos de ejemplo
     const basicItems = [
-        { 
-            id: 1, 
-            line1: 'John Doe', 
-            line2: 'Software Engineer', 
-            icon: 'person',
+        {
+            id: 1,
+            line1: 'John Doe',
+            line2: 'Software Engineer',
+            avatar: generateAvatar('John Doe'),
             meta: 'Active',
             badge: 'New'
         },
-        { 
-            id: 2, 
-            line1: 'Jane Smith', 
-            line2: 'Product Manager', 
-            icon: 'business_center',
-            meta: '2 days ago',
-            avatar: 'https://via.placeholder.com/40x40/2196f3/ffffff?text=JS'
+        {
+            id: 2,
+            line1: 'Jane Smith',
+            line2: 'Product Manager',
+            avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=40&h=40&fit=crop&crop=face',
+            meta: '2 days ago'
         },
-        { 
-            id: 3, 
-            line1: 'Mike Johnson', 
-            line2: 'UX Designer', 
-            icon: 'design_services',
-            meta: 'Offline',
+        {
+            id: 3,
+            line1: 'Mike Johnson',
+            line2: 'UX Designer',
+            avatar: generateAvatar('Mike Johnson'),
             actions: (
                 <div style={{ display: 'flex', gap: '0.25rem' }}>
                     <Button icon="edit" size="small" />
                     <Button icon="delete" size="small" />
                 </div>
-            )
+            ),
+            meta: 'Offline'
         },
-        { 
-            id: 4, 
-            line1: 'Sarah Wilson', 
-            line2: 'Data Scientist', 
-            icon: 'analytics',
+        {
+            id: 4,
+            line1: 'Sarah Wilson',
+            line2: 'Data Scientist',
+            avatar: generateAvatar('Sarah Wilson'),
             meta: 'Online',
             disabled: true
         }
     ]
 
     const groupedItems = [
-        { id: 1, line1: 'Apple iPhone 14', line2: '$999', category: 'Electronics', icon: 'phone_iphone' },
-        { id: 2, line1: 'Samsung Galaxy S23', line2: '$899', category: 'Electronics', icon: 'smartphone' },
-        { id: 3, line1: 'Nike Air Max', line2: '$120', category: 'Clothing', icon: 'sports_soccer' },
-        { id: 4, line1: 'Adidas Ultraboost', line2: '$180', category: 'Clothing', icon: 'directions_run' },
-        { id: 5, line1: 'MacBook Pro', line2: '$2499', category: 'Electronics', icon: 'laptop_mac' },
-        { id: 6, line1: 'Levi\'s Jeans', line2: '$80', category: 'Clothing', icon: 'checkroom' }
+        { id: 1, line1: 'Apple iPhone 14', line2: '$999', category: 'Electronics', avatar: generateAvatar('Apple iPhone 14') },
+        { id: 2, line1: 'Samsung Galaxy S23', line2: '$899', category: 'Electronics', avatar: generateAvatar('Samsung Galaxy S23') },
+        { id: 3, line1: 'Nike Air Max', line2: '$120', category: 'Clothing', avatar: generateAvatar('Nike Air Max') },
+        { id: 4, line1: 'Adidas Ultraboost', line2: '$180', category: 'Clothing', avatar: generateAvatar('Adidas Ultraboost') },
+        { id: 5, line1: 'MacBook Pro', line2: '$2499', category: 'Electronics', avatar: generateAvatar('MacBook Pro') },
+        { id: 6, line1: 'Levi\'s Jeans', line2: '$80', category: 'Clothing', avatar: generateAvatar('Levi\'s Jeans') }
+    ]
+
+    // Items para lista densa (solo una línea) con iconos
+    const denseItems = [
+        { id: 1, line1: 'Dashboard', icon: 'dashboard', meta: 'Ctrl+D' },
+        { id: 2, line1: 'Analytics', icon: 'analytics', meta: 'Ctrl+A' },
+        { id: 3, line1: 'Settings', icon: 'settings', meta: 'Ctrl+S' },
+        { id: 4, line1: 'Profile', icon: 'person', meta: 'Ctrl+P' },
+        { id: 5, line1: 'Messages', icon: 'message', meta: 'Ctrl+M', badge: '3' },
+        { id: 6, line1: 'Notifications', icon: 'notifications', meta: 'Ctrl+N', badge: '12' },
+        { id: 7, line1: 'Help', icon: 'help', meta: 'F1' },
+        { id: 8, line1: 'Logout', icon: 'logout', meta: 'Ctrl+Q' }
+    ]
+
+    // Items con iconos para otros ejemplos
+    const iconItems = [
+        { id: 1, line1: 'Home', line2: 'Main dashboard', icon: 'home', meta: 'Active' },
+        { id: 2, line1: 'Documents', line2: 'File management', icon: 'folder', meta: '24 files' },
+        { id: 3, line1: 'Photos', line2: 'Image gallery', icon: 'photo_library', meta: '156 photos' },
+        { id: 4, line1: 'Music', line2: 'Audio player', icon: 'library_music', meta: '89 songs' },
+        { id: 5, line1: 'Downloads', line2: 'Downloaded files', icon: 'download', meta: '12 items' }
     ]
 
     const handleSelect = (id) => {
@@ -105,6 +160,11 @@ export const ListExamples = () => {
             },
 
 
+            {
+                    "id": "variants",
+                    "title": "Variantes",
+                    "icon": "view_list"
+            },
             {
 
 
@@ -233,11 +293,66 @@ export const ListExamples = () => {
                 </div>
             </section>
 
+            {/* Variantes de Lista */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Variantes de Lista</h3>
+
+                <div style={{ marginBottom: '1.5rem' }}>
+                    <h4>Lista por Defecto (Sin líneas separadoras)</h4>
+                    <div style={{
+                        background: '#fff',
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        overflow: 'hidden'
+                    }}>
+                        <List
+                            items={basicItems.slice(0, 3)}
+                            onSelect={handleSelect}
+                            selected={selectedItem}
+                        />
+                    </div>
+                    <CodeSnippet
+                        language="jsx"
+                        code={`<List
+    items={items}
+    onSelect={handleSelect}
+    selected={selectedItem}
+/>`}
+                    />
+                </div>
+
+                <div style={{ marginBottom: '1.5rem' }}>
+                    <h4>Lista Outlined (Con líneas separadoras)</h4>
+                    <div style={{
+                        background: '#fff',
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        overflow: 'hidden'
+                    }}>
+                        <List
+                            items={basicItems.slice(0, 3)}
+                            onSelect={handleSelect}
+                            selected={selectedItem}
+                            outlined
+                        />
+                    </div>
+                    <CodeSnippet
+                        language="jsx"
+                        code={`<List
+    items={items}
+    onSelect={handleSelect}
+    selected={selectedItem}
+    outlined
+/>`}
+                    />
+                </div>
+            </section>
+
             {/* Lista básica (compatible con versión original) */}
             <section style={{ marginBottom: '2rem' }}>
                 <h3>Lista Básica (100% Compatible)</h3>
-                <div style={{ 
-                    background: '#fff', 
+                <div style={{
+                    background: '#fff',
                     border: '1px solid #ddd',
                     borderRadius: '8px',
                     overflow: 'hidden'
@@ -248,34 +363,99 @@ export const ListExamples = () => {
                         onSelect={handleSelect}
                     />
                 </div>
+                <CodeSnippet
+                    language="jsx"
+                    code={`const items = [
+    {
+        id: 1,
+        line1: 'John Doe',
+        line2: 'Software Engineer',
+        avatar: generateAvatar('John Doe'),
+        meta: 'Active',
+        badge: 'New'
+    },
+    // ... más items
+]
+
+<List
+    items={items}
+    selected={selectedItem}
+    onSelect={handleSelect}
+/>`}
+                />
             </section>
 
             {/* Lista con búsqueda */}
             <section style={{ marginBottom: '2rem' }}>
                 <h3>Lista con Búsqueda Integrada</h3>
-                <div style={{ 
-                    background: '#fff', 
-                    border: '1px solid #ddd',
-                    borderRadius: '8px',
-                    overflow: 'hidden'
-                }}>
-                    <List
-                        items={basicItems}
-                        selected={selectedItem}
-                        onSelect={handleSelect}
-                        searchable={true}
-                        searchPlaceholder="Buscar personas..."
-                        searchBy={['line1', 'line2']}
-                        ariaLabel="Lista de personas con búsqueda"
-                    />
+
+                <div style={{ marginBottom: '1.5rem' }}>
+                    <h4>Búsqueda Arriba (por defecto)</h4>
+                    <div style={{
+                        background: '#fff',
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        overflow: 'hidden'
+                    }}>
+                        <List
+                            items={basicItems}
+                            selected={selectedItem}
+                            onSelect={handleSelect}
+                            searchable={true}
+                            searchPlaceholder="Buscar personas..."
+                            searchBy={['line1', 'line2']}
+                            ariaLabel="Lista de personas con búsqueda"
+                        />
+                    </div>
                 </div>
+
+                <div style={{ marginBottom: '1.5rem' }}>
+                    <h4>Búsqueda Abajo</h4>
+                    <div style={{
+                        background: '#fff',
+                        border: '1px solid #ddd',
+                        borderRadius: '8px',
+                        overflow: 'hidden'
+                    }}>
+                        <List
+                            items={basicItems}
+                            selected={selectedItem}
+                            onSelect={handleSelect}
+                            searchable={true}
+                            searchPosition="bottom"
+                            searchPlaceholder="Buscar personas..."
+                            searchBy={['line1', 'line2']}
+                            ariaLabel="Lista de personas con búsqueda abajo"
+                        />
+                    </div>
+                </div>
+
+                <CodeSnippet
+                    language="jsx"
+                    code={`// Búsqueda arriba (por defecto)
+<List
+    items={items}
+    searchable={true}
+    searchPlaceholder="Buscar personas..."
+    searchBy={['line1', 'line2']}
+/>
+
+// Búsqueda abajo
+<List
+    items={items}
+    searchable={true}
+    searchPosition="bottom"
+    searchPlaceholder="Buscar personas..."
+    searchBy={['line1', 'line2']}
+/>`}
+                />
             </section>
 
             {/* Lista con ordenamiento */}
             <section style={{ marginBottom: '2rem' }}>
                 <h3>Lista con Ordenamiento</h3>
-                <div style={{ 
-                    background: '#fff', 
+                <div style={{
+                    background: '#fff',
                     border: '1px solid #ddd',
                     borderRadius: '8px',
                     overflow: 'hidden'
@@ -290,13 +470,25 @@ export const ListExamples = () => {
                         ariaLabel="Lista ordenable de personas"
                     />
                 </div>
+                <CodeSnippet
+                    language="jsx"
+                    code={`<List
+    items={items}
+    selected={selectedItem}
+    onSelect={handleSelect}
+    sortable={true}
+    sortBy="line1"
+    onSort={handleSort}
+    ariaLabel="Lista ordenable de personas"
+/>`}
+                />
             </section>
 
             {/* Lista con selección múltiple */}
             <section style={{ marginBottom: '2rem' }}>
                 <h3>Lista con Selección Múltiple</h3>
-                <div style={{ 
-                    background: '#fff', 
+                <div style={{
+                    background: '#fff',
                     border: '1px solid #ddd',
                     borderRadius: '8px',
                     overflow: 'hidden'
@@ -304,19 +496,36 @@ export const ListExamples = () => {
                     <List
                         items={basicItems}
                         selected={selectedItems}
-                        onSelect={handleSelect}
+                        onSelect={(id) => {
+                            // Para multiselect, manejar la selección individual también
+                            const newSelection = selectedItems.includes(id)
+                                ? selectedItems.filter(item => item !== id)
+                                : [...selectedItems, id]
+                            setSelectedItems(newSelection)
+                        }}
                         multiSelect={true}
                         onMultiSelect={handleMultiSelect}
                         ariaLabel="Lista con selección múltiple"
                     />
                 </div>
+                <CodeSnippet
+                    language="jsx"
+                    code={`<List
+    items={items}
+    selected={selectedItems}
+    onSelect={handleSelect}
+    multiSelect={true}
+    onMultiSelect={handleMultiSelect}
+    ariaLabel="Lista con selección múltiple"
+/>`}
+                />
             </section>
 
             {/* Lista agrupada (compatible con versión original) */}
             <section style={{ marginBottom: '2rem' }}>
                 <h3>Lista Agrupada (100% Compatible)</h3>
-                <div style={{ 
-                    background: '#fff', 
+                <div style={{
+                    background: '#fff',
                     border: '1px solid #ddd',
                     borderRadius: '8px',
                     overflow: 'hidden'
@@ -330,25 +539,92 @@ export const ListExamples = () => {
                         searchPlaceholder="Buscar productos..."
                     />
                 </div>
+                <CodeSnippet
+                    language="jsx"
+                    code={`const groupedItems = [
+    { id: 1, line1: 'Apple iPhone 14', line2: '$999', category: 'Electronics' },
+    { id: 2, line1: 'Samsung Galaxy S23', line2: '$899', category: 'Electronics' },
+    { id: 3, line1: 'Nike Air Max', line2: '$120', category: 'Clothing' },
+    // ... más items
+]
+
+<List
+    items={groupedItems}
+    selected={selectedItem}
+    onSelect={handleSelect}
+    groupBy="category"
+    searchable={true}
+    searchPlaceholder="Buscar productos..."
+/>`}
+                />
+            </section>
+
+            {/* Lista con iconos */}
+            <section style={{ marginBottom: '2rem' }}>
+                <h3>Lista con Iconos</h3>
+                <div style={{
+                    background: '#fff',
+                    border: '1px solid #ddd',
+                    borderRadius: '8px',
+                    overflow: 'hidden'
+                }}>
+                    <List
+                        items={iconItems}
+                        selected={selectedItem}
+                        onSelect={handleSelect}
+                        ariaLabel="Lista con iconos"
+                    />
+                </div>
+                <CodeSnippet
+                    language="jsx"
+                    code={`const iconItems = [
+    { id: 1, line1: 'Home', line2: 'Main dashboard', icon: 'home', meta: 'Active' },
+    { id: 2, line1: 'Documents', line2: 'File management', icon: 'folder', meta: '24 files' },
+    // ... más items
+]
+
+<List
+    items={iconItems}
+    selected={selectedItem}
+    onSelect={handleSelect}
+    ariaLabel="Lista con iconos"
+/>`}
+                />
             </section>
 
             {/* Lista densa */}
             <section style={{ marginBottom: '2rem' }}>
-                <h3>Lista Densa</h3>
-                <div style={{ 
-                    background: '#fff', 
+                <h3>Lista Densa (Una línea)</h3>
+                <div style={{
+                    background: '#fff',
                     border: '1px solid #ddd',
                     borderRadius: '8px',
                     overflow: 'hidden'
                 }}>
                     <List
-                        items={basicItems}
+                        items={denseItems}
                         selected={selectedItem}
                         onSelect={handleSelect}
                         dense={true}
                         ariaLabel="Lista densa"
                     />
                 </div>
+                <CodeSnippet
+                    language="jsx"
+                    code={`const denseItems = [
+    { id: 1, line1: 'Dashboard', icon: 'dashboard', meta: 'Ctrl+D' },
+    { id: 2, line1: 'Analytics', icon: 'analytics', meta: 'Ctrl+A' },
+    // ... más items (solo line1, sin line2)
+]
+
+<List
+    items={denseItems}
+    selected={selectedItem}
+    onSelect={handleSelect}
+    dense={true}
+    ariaLabel="Lista densa"
+/>`}
+                />
             </section>
 
             {/* Estados especiales */}