eidosui 0.2.0__py3-none-any.whl → 0.4.0__py3-none-any.whl

eidos/__init__.py

@@ -1,2 +0,0 @@
-from . import tags
-from . import styles

eidos/components/headers.py

@@ -1,5 +1,6 @@
-from air import Meta, Script, Link, Html, Head, Title
+from air import Meta, Script, Link
 from ..tags import Body
+from typing import Literal
 
 def get_css_urls():
     """Return list of CSS URLs for EidosUI."""
@@ -9,21 +10,59 @@ def get_css_urls():
         "/eidos/css/themes/light.css",
         "/eidos/css/themes/dark.css"
     ]
-def EidosHeaders(include_tailwind=True, theme="light"):
-    """Standard EidosUI headers with CSS includes."""
+
+def EidosHeaders(
+    include_tailwind: bool = True,
+    include_lucide: bool = True,
+    include_eidos_js: bool = True,
+    theme: Literal["light", "dark"] = "light",
+):
+    """Complete EidosUI headers with EidosUI JavaScript support.
+    
+    Args:
+        include_tailwind: Include Tailwind CSS CDN
+        include_lucide: Include Lucide Icons CDN
+        include_eidos_js: Include EidosUI JavaScript (navigation, future features)
+        theme: Initial theme
+    """
     headers = [
         Meta(charset="UTF-8"),
         Meta(name="viewport", content="width=device-width, initial-scale=1.0"),
     ]
     
+    # Core libraries
     if include_tailwind:
         headers.append(Script(src="https://cdn.tailwindcss.com"))
     
-    # Add EidosUI CSS files
+    if include_lucide:
+        headers.append(Script(src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"))
+    
+    # EidosUI CSS
     for css_url in get_css_urls():
         headers.append(Link(rel="stylesheet", href=css_url))
     
-    # Set initial theme
-    headers.append(Script(f"document.documentElement.setAttribute('data-theme', '{theme}');"))
+    # EidosUI JavaScript
+    if include_eidos_js:
+        headers.append(Script(src="/eidos/js/eidos.js", defer=True))
+    
+    # Initialization script
+    init_script = f"""
+        // Set theme
+        document.documentElement.setAttribute('data-theme', '{theme}');
+    """
+    
+    if include_lucide:
+        init_script += """
+        // Initialize Lucide icons
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => {
+                if (window.lucide) lucide.createIcons();
+            });
+        } else {
+            if (window.lucide) lucide.createIcons();
+        }
+    """
+    
+    headers.append(Script(init_script))
     
     return headers

eidos/components/navigation.py

@@ -0,0 +1,78 @@
+from air import Div, A, I, Tag
+from ..tags import *
+from ..utils import stringify
+from typing import Final, Optional, Any, Union
+from uuid import uuid4
+
+class ScrollspyT:
+    underline: Final[str] = 'navbar-underline'
+    bold: Final[str] = 'navbar-bold'
+
+def NavBar(*c: Any,
+           lcontents: Tag = H3("Title"),
+           right_cls: str = 'items-center space-x-4',
+           mobile_cls: str = '',
+           sticky: bool = False,
+           scrollspy: bool = False,
+           cls: str = 'p-4',
+           scrollspy_cls: str = ScrollspyT.underline,
+           menu_id: Optional[str] = None,
+           ) -> Tag:
+    """Pure Tailwind responsive navigation bar with optional scrollspy.
+    
+    Mobile menu uses best practice dropdown with:
+    - Centered text links
+    - Large touch targets
+    - Auto-close on selection
+    - Smooth animations
+    """
+    if menu_id is None: menu_id = f"menu-{uuid4().hex[:8]}"
+    
+    sticky_cls = 'sticky top-0 eidos-navbar-sticky z-50' if sticky else ''
+    
+    # Mobile toggle button with hamburger/close icon
+    mobile_icon = A(
+        I(data_lucide="menu", class_="w-6 h-6", data_menu_icon="open"),
+        I(data_lucide="x", class_="w-6 h-6 hidden", data_menu_icon="close"),
+        class_="md:hidden cursor-pointer p-2 eidos-navbar-toggle rounded-lg transition-colors",
+        data_toggle=f"#{menu_id}",
+        role="button",
+        aria_label="Toggle navigation",
+        aria_expanded="false"
+    )
+    
+    # Desktop navigation
+    desktop_nav = Div(
+        *c,
+        class_=stringify(right_cls, 'hidden md:flex'),
+        data_scrollspy="true" if scrollspy else None
+    )
+    
+    # Mobile navigation
+    mobile_nav = Div(
+        *c,
+        class_=stringify(
+            mobile_cls, 
+            'hidden md:hidden absolute top-full left-0 right-0 eidos-navbar-mobile shadow-lg border-t',
+            'flex flex-col eidos-navbar-mobile-divider' if not mobile_cls else '',
+            scrollspy_cls
+        ),
+        id=menu_id,
+        data_scrollspy="true" if scrollspy else None,
+        data_mobile_menu="true"
+    )
+    
+    return Div(
+        # Main navbar container with relative positioning for mobile dropdown
+        Div(
+            Div(
+                lcontents,
+                mobile_icon,
+                desktop_nav,
+                class_='flex items-center justify-between'
+            ),
+            mobile_nav,
+            class_=stringify('eidos-navbar relative', cls, scrollspy_cls)
+        ),
+        class_=sticky_cls
+    )

eidos/css/styles.css

@@ -27,76 +27,79 @@
     transform: scale(0.98);
 }
 
-/* Primary Button */
-.eidos-btn-primary {
-    background-color: var(--color-primary);
-    color: var(--color-primary-foreground);
+/* Button Variants - Using CSS Custom Properties to reduce redundancy */
+.eidos-btn-primary,
+.eidos-btn-secondary,
+.eidos-btn-ghost,
+.eidos-btn-outline,
+.eidos-btn-success,
+.eidos-btn-error,
+.eidos-btn-cta {
+    background-color: var(--btn-bg, transparent);
+    color: var(--btn-color);
+    border: var(--btn-border, none);
 }
 
-.eidos-btn-primary:hover {
-    background-color: var(--color-primary-hover);
+.eidos-btn-primary:hover,
+.eidos-btn-secondary:hover,
+.eidos-btn-ghost:hover,
+.eidos-btn-outline:hover,
+.eidos-btn-success:hover,
+.eidos-btn-error:hover,
+.eidos-btn-cta:hover {
+    background-color: var(--btn-bg-hover);
+    color: var(--btn-color-hover, var(--btn-color));
 }
 
-/* Secondary Button */
-.eidos-btn-secondary {
-    background-color: var(--color-secondary-light);
-    color: var(--color-secondary-dark);
+/* Primary Button */
+.eidos-btn-primary {
+    --btn-bg: var(--color-primary);
+    --btn-color: var(--color-primary-foreground);
+    --btn-bg-hover: var(--color-primary-hover);
 }
 
-.eidos-btn-secondary:hover {
-    background-color: var(--color-border);
+/* Secondary Button */
+.eidos-btn-secondary {
+    --btn-bg: var(--color-secondary-light);
+    --btn-color: var(--color-secondary-dark);
+    --btn-bg-hover: var(--color-border);
 }
 
 /* Ghost Button */
 .eidos-btn-ghost {
-    background-color: transparent;
-    color: var(--color-secondary-dark);
-}
-
-.eidos-btn-ghost:hover {
-    background-color: rgba(0, 0, 0, var(--opacity-5));
+    --btn-bg: transparent;
+    --btn-color: var(--color-secondary-dark);
+    --btn-bg-hover: rgba(0, 0, 0, var(--opacity-5));
 }
 
 /* Outline Button */
 .eidos-btn-outline {
-    background-color: transparent;
-    border: var(--border-2) solid var(--color-primary);
-    color: var(--color-primary);
-}
-
-.eidos-btn-outline:hover {
-    background-color: var(--color-primary);
-    color: var(--color-primary-foreground);
+    --btn-bg: transparent;
+    --btn-border: var(--border-2) solid var(--color-primary);
+    --btn-color: var(--color-primary);
+    --btn-bg-hover: var(--color-primary);
+    --btn-color-hover: var(--color-primary-foreground);
 }
 
 /* Success Button */
 .eidos-btn-success {
-    background-color: var(--color-success);
-    color: var(--color-success-foreground);
-}
-
-.eidos-btn-success:hover {
-    background-color: var(--color-success-hover);
+    --btn-bg: var(--color-success);
+    --btn-color: var(--color-success-foreground);
+    --btn-bg-hover: var(--color-success-hover);
 }
 
 /* Error Button */
 .eidos-btn-error {
-    background-color: var(--color-error);
-    color: var(--color-error-foreground);
-}
-
-.eidos-btn-error:hover {
-    background-color: var(--color-error-hover);
+    --btn-bg: var(--color-error);
+    --btn-color: var(--color-error-foreground);
+    --btn-bg-hover: var(--color-error-hover);
 }
 
 /* CTA Button */
 .eidos-btn-cta {
-    background-color: var(--color-cta);
-    color: var(--color-cta-foreground);
-}
-
-.eidos-btn-cta:hover {
-    background-color: var(--color-cta-hover);
+    --btn-bg: var(--color-cta);
+    --btn-color: var(--color-cta-foreground);
+    --btn-bg-hover: var(--color-cta-hover);
 }
 
 .eidos-h1 {
@@ -335,3 +338,93 @@
     border-top: var(--border) solid var(--color-border);
     margin: var(--space-xl) 0;
 }
+
+/* Navigation base styles */
+.eidos-navbar {
+    width: 100%;
+}
+
+.eidos-navbar a {
+    padding: 0.5rem 0.75rem;
+    border-radius: 0.375rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    position: relative;
+}
+
+.eidos-navbar a:hover {
+    background-color: var(--color-border);
+}
+
+/* Sticky navbar */
+.eidos-navbar-sticky {
+    background-color: var(--color-background);
+    box-shadow: var(--shadow-sm);
+}
+
+/* Mobile toggle button */
+.eidos-navbar-toggle:hover {
+    background-color: var(--color-border);
+}
+
+/* Mobile menu dropdown */
+.eidos-navbar-mobile {
+    background-color: var(--color-background);
+    border-color: var(--color-border);
+}
+
+/* Mobile menu dividers */
+.eidos-navbar-mobile-divider > a:not(:last-child) {
+    border-bottom: var(--border) solid var(--color-border);
+}
+
+/* Underline style */
+.navbar-underline a.eidos-active::after {
+    content: '';
+    position: absolute;
+    bottom: -2px;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background-color: var(--color-primary);
+}
+
+/* Bold style */
+.navbar-bold a.eidos-active {
+    font-weight: 700;
+    color: var(--color-primary);
+}
+
+/* Mobile menu animation */
+[data-toggle] + * {
+    transition: all 0.3s ease;
+}
+
+/* Mobile navigation styles */
+[data-mobile-menu="true"] {
+    animation: slideDown 0.2s ease-out;
+}
+
+[data-mobile-menu="true"] a {
+    padding: 1rem 1.5rem;
+    text-align: center;
+    display: block;
+    font-weight: 500;
+    transition: all 0.2s ease;
+}
+
+[data-mobile-menu="true"] a:hover {
+    background-color: var(--color-border);
+}
+
+@keyframes slideDown {
+    from {
+        transform: translateY(-0.5rem);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}

eidos/js/eidos.js

@@ -0,0 +1,112 @@
+// eidos.js - Main EidosUI JavaScript file
+(function() {
+    'use strict';
+    
+    class EidosUI {
+        constructor() {
+            this.initToggle();
+            this.initScrollspy();
+        }
+        
+        initToggle() {
+            document.querySelectorAll('[data-toggle]').forEach(btn => {
+                btn.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    const targetId = btn.dataset.toggle;
+                    const target = document.querySelector(targetId);
+                    if (target) {
+                        const isHidden = target.classList.contains('hidden');
+                        target.classList.toggle('hidden');
+                        
+                        // Update ARIA attributes
+                        const toggleButtons = document.querySelectorAll(`[data-toggle="${targetId}"][role="button"]`);
+                        toggleButtons.forEach(toggleBtn => {
+                            toggleBtn.setAttribute('aria-expanded', isHidden);
+                            
+                            // Toggle menu icons if they exist
+                            const openIcon = toggleBtn.querySelector('[data-menu-icon="open"]');
+                            const closeIcon = toggleBtn.querySelector('[data-menu-icon="close"]');
+                            if (openIcon && closeIcon) {
+                                openIcon.classList.toggle('hidden');
+                                closeIcon.classList.toggle('hidden');
+                            }
+                        });
+                    }
+                });
+            });
+            
+            // Auto-close mobile menu when clicking a link
+            document.querySelectorAll('[data-mobile-menu="true"] a').forEach(link => {
+                link.addEventListener('click', () => {
+                    const menu = link.closest('[data-mobile-menu="true"]');
+                    if (menu && !menu.classList.contains('hidden')) {
+                        menu.classList.add('hidden');
+                        // Update toggle button state
+                        const menuId = '#' + menu.id;
+                        const toggleBtn = document.querySelector(`[data-toggle="${menuId}"][role="button"]`);
+                        if (toggleBtn) {
+                            toggleBtn.setAttribute('aria-expanded', 'false');
+                            const openIcon = toggleBtn.querySelector('[data-menu-icon="open"]');
+                            const closeIcon = toggleBtn.querySelector('[data-menu-icon="close"]');
+                            if (openIcon && closeIcon) {
+                                openIcon.classList.remove('hidden');
+                                closeIcon.classList.add('hidden');
+                            }
+                        }
+                    }
+                });
+            });
+        }
+        
+        initScrollspy() {
+            const containers = document.querySelectorAll('[data-scrollspy="true"]');
+            if (!containers.length) return;
+            
+            const sections = document.querySelectorAll('section[id], [data-scrollspy-target]');
+            if (!sections.length) return;
+            
+            const observerOptions = {
+                rootMargin: '-20% 0px -70% 0px',
+                threshold: [0, 0.1, 0.5, 1]
+            };
+            
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach(entry => {
+                    if (entry.intersectionRatio > 0.1) {
+                        const id = entry.target.id;
+                        containers.forEach(container => {
+                            const links = container.querySelectorAll('a[href^="#"]');
+                            links.forEach(link => {
+                                const isActive = link.getAttribute('href') === `#${id}`;
+                                link.classList.toggle('eidos-active', isActive);
+                            });
+                        });
+                    }
+                });
+            }, observerOptions);
+            
+            sections.forEach(section => observer.observe(section));
+            
+            // Smooth scrolling for nav links
+            containers.forEach(container => {
+                container.querySelectorAll('a[href^="#"]').forEach(link => {
+                    link.addEventListener('click', (e) => {
+                        const targetId = link.getAttribute('href');
+                        const target = document.querySelector(targetId);
+                        if (target) {
+                            e.preventDefault();
+                            target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                        }
+                    });
+                });
+            });
+        }
+    }
+    
+    window.EidosUI = EidosUI;
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', () => new EidosUI());
+    } else {
+        new EidosUI();
+    }
+})();

eidos/plugins/__init__.py

@@ -0,0 +1 @@
+# EidosUI plugins package

eidos/plugins/markdown/__init__.py

@@ -0,0 +1,21 @@
+"""EidosUI Markdown Plugin - Theme-aware markdown rendering
+
+This plugin provides markdown rendering that automatically integrates with
+EidosUI themes through CSS variables.
+
+Basic usage:
+    from eidos.plugins.markdown import Markdown, MarkdownCSS
+    
+    # In your document head
+    MarkdownCSS()
+    
+    # In your content
+    Markdown("# Hello World\\n\\nThis is **markdown**!")
+"""
+
+from .components import Markdown, MarkdownCSS
+from .renderer import MarkdownRenderer
+
+__all__ = ["Markdown", "MarkdownCSS", "MarkdownRenderer"]
+
+__version__ = "0.1.0"

eidos/plugins/markdown/components.py

@@ -0,0 +1,53 @@
+"""Markdown components for EidosUI"""
+
+import air
+from typing import Optional
+from .renderer import MarkdownRenderer
+
+
+# Global renderer instance for reuse
+_renderer = MarkdownRenderer()
+
+
+def Markdown(content: str, class_: Optional[str] = None, **kwargs) -> air.Div:
+    """Main markdown component that renders markdown content with theme integration.
+    
+    Args:
+        content: Markdown text to render
+        class_: Additional CSS classes to apply
+        **kwargs: Additional attributes to pass to the wrapper div
+        
+    Returns:
+        air.Div containing the rendered markdown HTML
+    """
+    # Render the markdown content
+    html_content = _renderer.render(content)
+    
+    # Create the div with raw HTML content
+    if class_:
+        return air.Div(
+            air.RawHTML(html_content),
+            class_=class_,
+            **kwargs
+        )
+    else:
+        return air.Div(
+            air.RawHTML(html_content),
+            **kwargs
+        )
+
+
+def MarkdownCSS() -> air.Link:
+    """Returns a link tag to include the markdown CSS.
+    
+    This should be included in the head of your document to ensure
+    markdown styling is available.
+    
+    Returns:
+        air.Link element pointing to the markdown CSS file
+    """
+    return air.Link(
+        rel="stylesheet",
+        href="/eidos/plugins/markdown/css/markdown.css",
+        type="text/css"
+    )