cronixui 1.1.2 → 1.1.3

package/packages/python/cronixui/badge.py

@@ -1,46 +1,183 @@
-"""CronixUI Badge & Tag Components"""
+"""CronixUI Badge & Tag Components.
 
-from .core import create_el
+Generates HTML for status badges and removable tags.
+No browser DOM APIs are used - all output is HTML strings or data structures.
+"""
+
+from __future__ import annotations
+
+from dataclasses import dataclass, field
+from typing import Callable, Dict, List, Optional
+
+
+@dataclass
+class BadgeElement:
+    """Represents a rendered badge or tag element."""
+
+    tag: str = "span"
+    classes: List[str] = field(default_factory=list)
+    attributes: Dict[str, str] = field(default_factory=dict)
+    inner_html: str = ""
+
+    def render_html(self) -> str:
+        """Render as HTML string.
+
+        Returns:
+            Complete HTML for the badge element
+        """
+        class_str = " ".join(self.classes)
+        class_attr = f' class="{class_str}"' if class_str else ""
+        attrs_str = "".join(f' {k}="{v}"' for k, v in self.attributes.items())
+        return f"<{self.tag}{class_attr}{attrs_str}>{self.inner_html}</{self.tag}>"
+
+    def render(self) -> "BadgeElement":
+        """Return self for API compatibility."""
+        return self
 
 
 class Badge:
-    """Badge component for status indicators."""
+    """Badge component for status indicators and labels.
+
+    Args:
+        text: Badge text content
+        variant: Badge variant - default, accent, success, warning, error, info (default: default)
+        solid: Whether to use solid styling (default: False)
+
+    Example:
+        >>> badge = Badge("Active", variant="success")
+        >>> print(badge.render_html())
+        <span class="cn-badge cn-badge-success">Active</span>
+
+        >>> solid_badge = Badge("New", variant="accent", solid=True)
+        >>> print(solid_badge.render_html())
+        <span class="cn-badge cn-badge-accent cn-badge-solid">New</span>
+    """
 
     VARIANTS = ("default", "accent", "success", "warning", "error", "info")
 
-    def __init__(self, text: str, variant: str = "default", solid: bool = False):
+    def __init__(
+        self,
+        text: str,
+        variant: str = "default",
+        solid: bool = False,
+    ):
+        if not text:
+            raise ValueError("text cannot be empty")
+        if variant not in self.VARIANTS:
+            raise ValueError(
+                f"Invalid variant '{variant}'. Must be one of {self.VARIANTS}"
+            )
+
         self.text = text
-        self.variant = variant if variant in self.VARIANTS else "default"
+        self.variant = variant
         self.solid = solid
-        self.element = self._render()
 
-    def _render(self):
-        classes = f"cn-badge cn-badge-{self.variant}"
+    def render(self) -> BadgeElement:
+        """Render the badge as a BadgeElement data structure.
+
+        Returns:
+            BadgeElement representing the badge
+        """
+        classes = ["cn-badge", f"cn-badge-{self.variant}"]
         if self.solid:
-            classes += " cn-badge-solid"
-        el = create_el("span", classes)
-        el.textContent = self.text
-        return el
+            classes.append("cn-badge-solid")
+
+        return BadgeElement(
+            classes=classes,
+            inner_html=self._esc(self.text),
+        )
+
+    def render_html(self) -> str:
+        """Render the badge as an HTML string.
+
+        Returns:
+            HTML string representation of the badge
+        """
+        return self.render().render_html()
+
+    @staticmethod
+    def _esc(text: str) -> str:
+        """Escape HTML special characters."""
+        return (
+            text.replace("&", "&amp;")
+            .replace("<", "&lt;")
+            .replace(">", "&gt;")
+            .replace('"', "&quot;")
+            .replace("'", "&#x27;")
+        )
 
 
 class Tag:
-    """Tag component for labels."""
+    """Tag component for labels with optional removal.
+
+    Args:
+        text: Tag text content
+        removable: Whether to show a remove button (default: False)
+        on_remove: Callback name for removal (stored as data attribute)
+
+    Example:
+        >>> tag = Tag("Python")
+        >>> print(tag.render_html())
+        <span class="cn-tag">Python</span>
+
+        >>> removable = Tag("JavaScript", removable=True, on_remove="handleRemove")
+        >>> print(removable.render_html())
+        <span class="cn-tag" data-on-remove="handleRemove">JavaScript<span class="cn-tag-remove">...</span></span>
+    """
+
+    _REMOVE_ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M18 6L6 18M6 6l12 12"/></svg>'
+
+    def __init__(
+        self,
+        text: str,
+        removable: bool = False,
+        on_remove: Optional[str] = None,
+    ):
+        if not text:
+            raise ValueError("text cannot be empty")
 
-    def __init__(self, text: str, removable: bool = False, on_remove=None):
         self.text = text
         self.removable = removable
         self.on_remove = on_remove
-        self.element = self._render()
 
-    def _render(self):
-        el = create_el("span", "cn-tag")
-        el.textContent = self.text
+    def render(self) -> BadgeElement:
+        """Render the tag as a BadgeElement data structure.
+
+        Returns:
+            BadgeElement representing the tag
+        """
+        attrs: Dict[str, str] = {}
+        if self.removable and self.on_remove:
+            attrs["data-on-remove"] = self.on_remove
+
+        inner_parts = [self._esc(self.text)]
 
         if self.removable:
-            remove_btn = create_el("span", "cn-tag-remove")
-            remove_btn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M18 6L6 18M6 6l12 12"/></svg>'
-            if self.on_remove:
-                remove_btn.addEventListener("click", self.on_remove)
-            el.appendChild(remove_btn)
+            inner_parts.append(
+                f'<span class="cn-tag-remove">{self._REMOVE_ICON}</span>'
+            )
+
+        return BadgeElement(
+            classes=["cn-tag"],
+            attributes=attrs,
+            inner_html="".join(inner_parts),
+        )
+
+    def render_html(self) -> str:
+        """Render the tag as an HTML string.
+
+        Returns:
+            HTML string representation of the tag
+        """
+        return self.render().render_html()
 
-        return el
+    @staticmethod
+    def _esc(text: str) -> str:
+        """Escape HTML special characters."""
+        return (
+            text.replace("&", "&amp;")
+            .replace("<", "&lt;")
+            .replace(">", "&gt;")
+            .replace('"', "&quot;")
+            .replace("'", "&#x27;")
+        )

package/packages/python/cronixui/button.py

@@ -1,12 +1,44 @@
 """CronixUI Button Component"""
 
-from typing import Optional, Callable
-from .core import create_el
-from .tokens import ACCENT, SURFACE_2, SURFACE_3, ERROR, SUCCESS, TEXT
+from typing import Optional, Callable, Dict, Any, List
+from dataclasses import dataclass, field
+
+
+@dataclass
+class ButtonElement:
+    """Represents a rendered button element."""
+
+    tag: str = "button"
+    classes: List[str] = field(default_factory=list)
+    attributes: Dict[str, str] = field(default_factory=dict)
+    text: str = ""
+    onclick: Optional[Callable] = field(default=None, repr=False)
+
+    def render(self) -> str:
+        """Render the button as HTML string."""
+        class_str = " ".join(self.classes)
+        attrs_str = " ".join(f'{k}="{v}"' for k, v in self.attributes.items())
+        attrs_str = f" {attrs_str}" if attrs_str else ""
+
+        return f'<{self.tag} class="{class_str}"{attrs_str}>{self.text}</{self.tag}>'
 
 
 class Button:
-    """Button component with variants."""
+    """Button component with variants.
+
+    Args:
+        text: Button text
+        variant: Button variant (default, primary, ghost, outline, danger, success)
+        size: Button size (sm, md, lg)
+        icon: Whether button is icon-only
+        disabled: Whether button is disabled
+        onclick: Click handler callback (for documentation purposes)
+
+    Example:
+        >>> btn = Button("Click me", variant="primary")
+        >>> print(btn.render())
+        <button class="cn-btn cn-btn-primary">Click me</button>
+    """
 
     VARIANTS = ("default", "primary", "ghost", "outline", "danger", "success")
     SIZES = ("sm", "md", "lg")
@@ -20,45 +52,82 @@ class Button:
         disabled: bool = False,
         onclick: Optional[Callable] = None,
     ):
+        if variant not in self.VARIANTS:
+            raise ValueError(
+                f"Invalid variant '{variant}'. Must be one of {self.VARIANTS}"
+            )
+        if size not in self.SIZES:
+            raise ValueError(f"Invalid size '{size}'. Must be one of {self.SIZES}")
+
         self.text = text
-        self.variant = variant if variant in self.VARIANTS else "default"
-        self.size = size if size in self.SIZES else "md"
+        self.variant = variant
+        self.size = size
         self.icon = icon
         self.disabled = disabled
         self.onclick = onclick
-        self.element = self._render()
 
-    def _render(self):
-        el = create_el("button", f"cn-btn cn-btn-{self.variant}")
+    def render(self) -> ButtonElement:
+        """Render the button as a ButtonElement.
+
+        Returns:
+            ButtonElement object representing the rendered button
+        """
+        classes = ["cn-btn", f"cn-btn-{self.variant}"]
+
         if self.size != "md":
-            el.classList.add(f"cn-btn-{self.size}")
+            classes.append(f"cn-btn-{self.size}")
+
         if self.icon:
-            el.classList.add("cn-btn-icon")
+            classes.append("cn-btn-icon")
+
+        attributes: Dict[str, str] = {}
         if self.disabled:
-            el.setAttribute("disabled", "")
-        el.textContent = self.text
-        if self.onclick:
-            el.addEventListener("click", self.onclick)
-        return el
+            attributes["disabled"] = ""
+
+        return ButtonElement(
+            classes=classes,
+            attributes=attributes,
+            text=self.text,
+            onclick=self.onclick,
+        )
+
+    def render_html(self) -> str:
+        """Render the button as HTML string.
+
+        Returns:
+            HTML string representation of the button
+        """
+        return self.render().render()
 
-    def disable(self):
+    def disable(self) -> None:
+        """Disable the button."""
         self.disabled = True
-        self.element.setAttribute("disabled", "")
 
-    def enable(self):
+    def enable(self) -> None:
+        """Enable the button."""
         self.disabled = False
-        self.element.removeAttribute("disabled")
 
 
 class ButtonGroup:
-    """Button group component."""
+    """Button group component.
+
+    Args:
+        *buttons: Button instances to include in the group
+
+    Example:
+        >>> group = ButtonGroup(Button("Left"), Button("Right"))
+        >>> print(group.render_html())
+    """
 
     def __init__(self, *buttons: Button):
         self.buttons = buttons
-        self.element = self._render()
 
-    def _render(self):
-        el = create_el("div", "cn-btn-group")
-        for btn in self.buttons:
-            el.appendChild(btn.element)
-        return el
+    def render_html(self) -> str:
+        """Render the button group as HTML string.
+
+        Returns:
+            HTML string representation of the button group
+        """
+        buttons_html = "".join(btn.render_html() for btn in self.buttons)
+        return f'<div class="cn-btn-group">{buttons_html}</div>'
+

package/packages/python/cronixui/card.py

@@ -1,62 +1,235 @@
-"""CronixUI Card Component"""
+"""CronixUI Card Component.
 
-from typing import Optional
-from .core import create_el
+Generates HTML for cards with header, body, footer, and optional icon variants.
+No browser DOM APIs are used - all output is HTML strings or data structures.
+"""
+
+from __future__ import annotations
+
+from dataclasses import dataclass, field
+from typing import Dict, List, Optional
+
+
+@dataclass
+class CardElement:
+    """Represents a rendered card element."""
+
+    tag: str = "div"
+    classes: List[str] = field(default_factory=list)
+    attributes: Dict[str, str] = field(default_factory=dict)
+    inner_html: str = ""
+
+    def render_html(self) -> str:
+        """Render the card as HTML string.
+
+        Returns:
+            Complete HTML for the card element
+        """
+        class_str = " ".join(self.classes)
+        class_attr = f' class="{class_str}"' if class_str else ""
+        attrs_str = "".join(f' {k}="{v}"' for k, v in self.attributes.items())
+        return f"<{self.tag}{class_attr}{attrs_str}>{self.inner_html}</{self.tag}>"
+
+    def render(self) -> "CardElement":
+        """Return self for API compatibility."""
+        return self
 
 
 class Card:
-    """Card container component."""
+    """Card container component with optional header, body, and footer sections.
+
+    Args:
+        title: Optional card title
+        subtitle: Optional card subtitle
+        clickable: Whether card should appear clickable (default: False)
+        body: Optional card body content (HTML string)
+        footer: Optional card footer content (HTML string)
+
+    Example:
+        >>> card = Card(
+        ...     title="Welcome",
+        ...     subtitle="Getting started guide",
+        ...     body="<p>Card body content here.</p>",
+        ...     footer="<a href='#'>Learn more</a>",
+        ... )
+        >>> print(card.render_html())
+        <div class="cn-card">
+            <div class="cn-card-header">
+                <h3 class="cn-card-title">Welcome</h3>
+                <p class="cn-card-subtitle">Getting started guide</p>
+            </div>
+            <div class="cn-card-body"><p>Card body content here.</p></div>
+            <div class="cn-card-footer"><a href='#'>Learn more</a></div>
+        </div>
+    """
 
     def __init__(
         self,
         title: Optional[str] = None,
         subtitle: Optional[str] = None,
         clickable: bool = False,
+        body: Optional[str] = None,
+        footer: Optional[str] = None,
     ):
         self.title = title
         self.subtitle = subtitle
         self.clickable = clickable
-        self.element = self._render()
+        self._body = body
+        self._footer = footer
 
-    def _render(self):
-        el = create_el("div", "cn-card")
+    def render(self) -> CardElement:
+        """Render the card as a CardElement data structure.
+
+        Returns:
+            CardElement representing the complete card
+        """
+        classes = ["cn-card"]
         if self.clickable:
-            el.classList.add("cn-card-clickable")
+            classes.append("cn-card-clickable")
+
+        parts = []
 
+        # Header
         if self.title or self.subtitle:
-            header = create_el("div", "cn-card-header")
+            header_parts = []
             if self.title:
-                title_el = create_el("h3", "cn-card-title")
-                title_el.textContent = self.title
-                header.appendChild(title_el)
-            el.appendChild(header)
-
+                header_parts.append(
+                    f'<h3 class="cn-card-title">{self._esc(self.title)}</h3>'
+                )
             if self.subtitle:
-                subtitle_el = create_el("p", "cn-card-subtitle")
-                subtitle_el.textContent = self.subtitle
-                header.appendChild(subtitle_el)
+                header_parts.append(
+                    f'<p class="cn-card-subtitle">{self._esc(self.subtitle)}</p>'
+                )
+            parts.append(f'<div class="cn-card-header">{"".join(header_parts)}</div>')
+
+        # Body
+        if self._body is not None:
+            parts.append(f'<div class="cn-card-body">{self._body}</div>')
+
+        # Footer
+        if self._footer is not None:
+            parts.append(f'<div class="cn-card-footer">{self._footer}</div>')
+
+        return CardElement(
+            classes=classes,
+            inner_html="".join(parts),
+        )
+
+    def render_html(self) -> str:
+        """Render the card as an HTML string.
+
+        Returns:
+            HTML string representation of the card
+        """
+        return self.render().render_html()
+
+    def with_body(self, content: str) -> "Card":
+        """Set the card body content and return self for chaining.
+
+        Args:
+            content: HTML string for the card body
 
-        return el
+        Returns:
+            Self for method chaining
 
-    def set_body(self, content: str):
-        body = create_el("div", "cn-card-body")
-        body.innerHTML = content
-        self.element.appendChild(body)
+        Example:
+            >>> card = Card(title="Title").with_body("<p>Body content</p>")
+        """
+        self._body = content
+        return self
 
-    def set_footer(self, content: str):
-        footer = create_el("div", "cn-card-footer")
-        footer.innerHTML = content
-        self.element.appendChild(footer)
+    def with_footer(self, content: str) -> "Card":
+        """Set the card footer content and return self for chaining.
+
+        Args:
+            content: HTML string for the card footer
+
+        Returns:
+            Self for method chaining
+
+        Example:
+            >>> card = Card(title="Title").with_footer("<a href='#'>Link</a>")
+        """
+        self._footer = content
+        return self
+
+    @staticmethod
+    def _esc(text: str) -> str:
+        """Escape HTML special characters."""
+        return (
+            text.replace("&", "&amp;")
+            .replace("<", "&lt;")
+            .replace(">", "&gt;")
+            .replace('"', "&quot;")
+            .replace("'", "&#x27;")
+        )
 
 
 class CardIcon:
-    """Card with icon."""
+    """Card variant with an icon display.
+
+    Args:
+        icon_svg: SVG markup string for the icon
+        title: Optional card title
+        subtitle: Optional card subtitle
 
-    def __init__(self, icon_svg: str):
+    Example:
+        >>> icon_card = CardIcon(
+        ...     icon_svg='<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>',
+        ...     title="Settings",
+        ... )
+        >>> print(icon_card.render_html())
+    """
+
+    def __init__(
+        self,
+        icon_svg: str,
+        title: Optional[str] = None,
+        subtitle: Optional[str] = None,
+    ):
+        if not icon_svg:
+            raise ValueError("icon_svg cannot be empty")
         self.icon_svg = icon_svg
-        self.element = self._render()
+        self.title = title
+        self.subtitle = subtitle
+
+    def render(self) -> CardElement:
+        """Render the icon card as a CardElement.
+
+        Returns:
+            CardElement representing the icon card
+        """
+        classes = ["cn-card", "cn-card-icon"]
+
+        parts = [f'<div class="cn-card-icon-inner">{self.icon_svg}</div>']
+
+        if self.title:
+            parts.append(f'<h3 class="cn-card-title">{self._esc(self.title)}</h3>')
+        if self.subtitle:
+            parts.append(
+                f'<p class="cn-card-subtitle">{self._esc(self.subtitle)}</p>'
+            )
+
+        return CardElement(
+            classes=classes,
+            inner_html="".join(parts),
+        )
+
+    def render_html(self) -> str:
+        """Render the icon card as an HTML string.
+
+        Returns:
+            HTML string representation of the icon card
+        """
+        return self.render().render_html()
 
-    def _render(self):
-        el = create_el("div", "cn-card-icon")
-        el.innerHTML = self.icon_svg
-        return el
+    @staticmethod
+    def _esc(text: str) -> str:
+        """Escape HTML special characters."""
+        return (
+            text.replace("&", "&amp;")
+            .replace("<", "&lt;")
+            .replace(">", "&gt;")
+            .replace('"', "&quot;")
+            .replace("'", "&#x27;")
+        )