cronixui 1.0.6 → 1.1.0

package/packages/python/cronixui/__init__.py

@@ -12,6 +12,18 @@ from .pagination import Pagination
 from .command_palette import CommandPalette, CommandPaletteItem
 from .search import Search, SearchItem
 from .nav import Nav
+from .button import Button, ButtonGroup
+from .card import Card, CardIcon
+from .badge import Badge, Tag
+from .avatar import Avatar, AvatarGroup
+from .alert import Alert
+from .loading import Spinner, Skeleton
+from .table import Table
+from .list import List
+from .tooltip import Tooltip
+from .layout import Header, Sidebar, Footer, Container, Divider, Section
+from .form import Input, Textarea, FormField, Checkbox, Radio, Select, Slider, FileInput
+from .progress import Progress, Stat
 from .core import init, query, query_all, create_el
 from .tokens import (
     BG,
@@ -49,9 +61,17 @@ from .tokens import (
     transition,
     z_index,
     layout,
+    Color,
+    Typography,
+    Spacing,
+    Radius,
+    Shadow,
+    Transition,
+    ZIndex,
+    Layout,
 )
 
-__version__ = "1.0.5"
+__version__ = "1.0.6"
 __all__ = [
     "Toast",
     "Toggle",
@@ -65,11 +85,40 @@ __all__ = [
     "Search",
     "SearchItem",
     "Nav",
+    "Button",
+    "ButtonGroup",
+    "Card",
+    "CardIcon",
+    "Badge",
+    "Tag",
+    "Avatar",
+    "AvatarGroup",
+    "Alert",
+    "Spinner",
+    "Skeleton",
+    "Table",
+    "List",
+    "Tooltip",
+    "Header",
+    "Sidebar",
+    "Footer",
+    "Container",
+    "Divider",
+    "Section",
+    "Input",
+    "Textarea",
+    "FormField",
+    "Checkbox",
+    "Radio",
+    "Select",
+    "Slider",
+    "FileInput",
+    "Progress",
+    "Stat",
     "init",
     "query",
     "query_all",
     "create_el",
-    # Colors
     "BG",
     "SURFACE",
     "SURFACE_2",
@@ -98,7 +147,14 @@ __all__ = [
     "BORDER",
     "BORDER_HOVER",
     "BORDER_FOCUS",
-    # Token objects
+    "Color",
+    "Typography",
+    "Spacing",
+    "Radius",
+    "Shadow",
+    "Transition",
+    "ZIndex",
+    "Layout",
     "typography",
     "spacing",
     "radius",

package/packages/python/cronixui/alert.py

@@ -0,0 +1,61 @@
+"""CronixUI Alert Component"""
+
+from typing import Optional
+from .core import create_el
+
+
+class Alert:
+    """Alert component for messages."""
+
+    VARIANTS = ("info", "success", "warning", "error")
+
+    def __init__(
+        self,
+        message: str,
+        title: Optional[str] = None,
+        variant: str = "info",
+        dismissible: bool = False,
+    ):
+        self.message = message
+        self.title = title
+        self.variant = variant if variant in self.VARIANTS else "info"
+        self.dismissible = dismissible
+        self.element = self._render()
+
+    def _render(self):
+        el = create_el("div", f"cn-alert cn-alert-{self.variant}")
+
+        icon_svg = self._get_icon_svg()
+        if icon_svg:
+            icon = create_el("span", "cn-alert-icon")
+            icon.innerHTML = icon_svg
+            el.appendChild(icon)
+
+        content = create_el("div", "cn-alert-content")
+        if self.title:
+            title_el = create_el("div", "cn-alert-title")
+            title_el.textContent = self.title
+            content.appendChild(title_el)
+
+        message_el = create_el("div", "cn-alert-message")
+        message_el.textContent = self.message
+        content.appendChild(message_el)
+
+        el.appendChild(content)
+
+        if self.dismissible:
+            close_btn = create_el("button", "cn-alert-close")
+            close_btn.innerHTML = "×"
+            close_btn.addEventListener("click", lambda: el.remove())
+            el.appendChild(close_btn)
+
+        return el
+
+    def _get_icon_svg(self):
+        icons = {
+            "info": '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>',
+            "success": '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>',
+            "warning": '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',
+            "error": '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>',
+        }
+        return icons.get(self.variant)

package/packages/python/cronixui/avatar.py

@@ -0,0 +1,50 @@
+"""CronixUI Avatar Component"""
+
+from typing import Optional
+from .core import create_el
+
+
+class Avatar:
+    """Avatar component for user images or initials."""
+
+    SIZES = ("sm", "md", "lg", "xl")
+
+    def __init__(
+        self,
+        initials: Optional[str] = None,
+        image_url: Optional[str] = None,
+        size: str = "md",
+    ):
+        self.initials = initials
+        self.image_url = image_url
+        self.size = size if size in self.SIZES else "md"
+        self.element = self._render()
+
+    def _render(self):
+        el = create_el("div", "cn-avatar")
+        if self.size != "md":
+            el.classList.add(f"cn-avatar-{self.size}")
+
+        if self.image_url:
+            img = create_el("img")
+            img.setAttribute("src", self.image_url)
+            img.setAttribute("alt", self.initials or "Avatar")
+            el.appendChild(img)
+        elif self.initials:
+            el.textContent = self.initials[:2].upper()
+
+        return el
+
+
+class AvatarGroup:
+    """Group of overlapping avatars."""
+
+    def __init__(self, *avatars: Avatar):
+        self.avatars = avatars
+        self.element = self._render()
+
+    def _render(self):
+        el = create_el("div", "cn-avatar-group")
+        for avatar in self.avatars:
+            el.appendChild(avatar.element)
+        return el

package/packages/python/cronixui/badge.py

@@ -0,0 +1,46 @@
+"""CronixUI Badge & Tag Components"""
+
+from .core import create_el
+
+
+class Badge:
+    """Badge component for status indicators."""
+
+    VARIANTS = ("default", "accent", "success", "warning", "error", "info")
+
+    def __init__(self, text: str, variant: str = "default", solid: bool = False):
+        self.text = text
+        self.variant = variant if variant in self.VARIANTS else "default"
+        self.solid = solid
+        self.element = self._render()
+
+    def _render(self):
+        classes = f"cn-badge cn-badge-{self.variant}"
+        if self.solid:
+            classes += " cn-badge-solid"
+        el = create_el("span", classes)
+        el.textContent = self.text
+        return el
+
+
+class Tag:
+    """Tag component for labels."""
+
+    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
+
+        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)
+
+        return el

package/packages/python/cronixui/button.py

@@ -0,0 +1,64 @@
+"""CronixUI Button Component"""
+
+from typing import Optional, Callable
+from .core import create_el
+from .tokens import ACCENT, SURFACE_2, SURFACE_3, ERROR, SUCCESS, TEXT
+
+
+class Button:
+    """Button component with variants."""
+
+    VARIANTS = ("default", "primary", "ghost", "outline", "danger", "success")
+    SIZES = ("sm", "md", "lg")
+
+    def __init__(
+        self,
+        text: str,
+        variant: str = "default",
+        size: str = "md",
+        icon: bool = False,
+        disabled: bool = False,
+        onclick: Optional[Callable] = None,
+    ):
+        self.text = text
+        self.variant = variant if variant in self.VARIANTS else "default"
+        self.size = size if size in self.SIZES else "md"
+        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}")
+        if self.size != "md":
+            el.classList.add(f"cn-btn-{self.size}")
+        if self.icon:
+            el.classList.add("cn-btn-icon")
+        if self.disabled:
+            el.setAttribute("disabled", "")
+        el.textContent = self.text
+        if self.onclick:
+            el.addEventListener("click", self.onclick)
+        return el
+
+    def disable(self):
+        self.disabled = True
+        self.element.setAttribute("disabled", "")
+
+    def enable(self):
+        self.disabled = False
+        self.element.removeAttribute("disabled")
+
+
+class ButtonGroup:
+    """Button group component."""
+
+    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

package/packages/python/cronixui/card.py

@@ -0,0 +1,62 @@
+"""CronixUI Card Component"""
+
+from typing import Optional
+from .core import create_el
+
+
+class Card:
+    """Card container component."""
+
+    def __init__(
+        self,
+        title: Optional[str] = None,
+        subtitle: Optional[str] = None,
+        clickable: bool = False,
+    ):
+        self.title = title
+        self.subtitle = subtitle
+        self.clickable = clickable
+        self.element = self._render()
+
+    def _render(self):
+        el = create_el("div", "cn-card")
+        if self.clickable:
+            el.classList.add("cn-card-clickable")
+
+        if self.title or self.subtitle:
+            header = create_el("div", "cn-card-header")
+            if self.title:
+                title_el = create_el("h3", "cn-card-title")
+                title_el.textContent = self.title
+                header.appendChild(title_el)
+            el.appendChild(header)
+
+            if self.subtitle:
+                subtitle_el = create_el("p", "cn-card-subtitle")
+                subtitle_el.textContent = self.subtitle
+                header.appendChild(subtitle_el)
+
+        return el
+
+    def set_body(self, content: str):
+        body = create_el("div", "cn-card-body")
+        body.innerHTML = content
+        self.element.appendChild(body)
+
+    def set_footer(self, content: str):
+        footer = create_el("div", "cn-card-footer")
+        footer.innerHTML = content
+        self.element.appendChild(footer)
+
+
+class CardIcon:
+    """Card with icon."""
+
+    def __init__(self, icon_svg: str):
+        self.icon_svg = icon_svg
+        self.element = self._render()
+
+    def _render(self):
+        el = create_el("div", "cn-card-icon")
+        el.innerHTML = self.icon_svg
+        return el

package/packages/python/cronixui/form.py

@@ -0,0 +1,255 @@
+"""CronixUI Form Components"""
+
+from typing import Optional, Callable
+from .core import create_el
+
+
+class Input:
+    """Input component."""
+
+    SIZES = ("sm", "md", "lg")
+
+    def __init__(
+        self,
+        placeholder: str = "",
+        size: str = "md",
+        error: bool = False,
+        disabled: bool = False,
+        icon: Optional[str] = None,
+    ):
+        self.placeholder = placeholder
+        self.size = size if size in self.SIZES else "md"
+        self.error = error
+        self.disabled = disabled
+        self.icon = icon
+        self.element = self._render()
+
+    def _render(self):
+        if self.icon:
+            wrapper = create_el("div", "cn-input-icon-wrapper")
+            input_el = create_el("input", "cn-input")
+            input_el.setAttribute("placeholder", self.placeholder)
+            if self.disabled:
+                input_el.setAttribute("disabled", "")
+            if self.error:
+                input_el.classList.add("cn-input-error")
+
+            icon_el = create_el("span", "cn-input-icon")
+            icon_el.innerHTML = self.icon
+            wrapper.appendChild(icon_el)
+            wrapper.appendChild(input_el)
+            return wrapper
+
+        el = create_el("input", "cn-input")
+        el.setAttribute("placeholder", self.placeholder)
+        if self.disabled:
+            el.setAttribute("disabled", "")
+        if self.error:
+            el.classList.add("cn-input-error")
+        if self.size != "md":
+            el.classList.add(f"cn-input-{self.size}")
+        return el
+
+
+class Textarea:
+    """Textarea component."""
+
+    def __init__(self, placeholder: str = "", rows: int = 4):
+        self.placeholder = placeholder
+        self.rows = rows
+        self.element = self._render()
+
+    def _render(self):
+        el = create_el("textarea", "cn-input cn-textarea")
+        el.setAttribute("placeholder", self.placeholder)
+        el.setAttribute("rows", str(self.rows))
+        return el
+
+
+class FormField:
+    """Form field with label and error."""
+
+    def __init__(self, label: str, input_el, error: str = None, help_text: str = None):
+        self.label = label
+        self.input = input_el
+        self.error = error
+        self.help_text = help_text
+        self.element = self._render()
+
+    def _render(self):
+        group = create_el("div", "cn-form-group")
+
+        label_el = create_el("label", "cn-form-label")
+        label_el.textContent = self.label
+        group.appendChild(label_el)
+
+        if hasattr(self.input, "element"):
+            group.appendChild(self.input.element)
+        else:
+            group.appendChild(self.input)
+
+        if self.error:
+            error_el = create_el("span", "cn-form-error")
+            error_el.textContent = self.error
+            group.appendChild(error_el)
+
+        if self.help_text:
+            help_el = create_el("span", "cn-form-help")
+            help_el.textContent = self.help_text
+            group.appendChild(help_el)
+
+        return group
+
+
+class Checkbox:
+    """Checkbox component."""
+
+    def __init__(self, label: str, checked: bool = False, disabled: bool = False):
+        self.label = label
+        self.checked = checked
+        self.disabled = disabled
+        self.element = self._render()
+
+    def _render(self):
+        el = create_el("label", "cn-checkbox")
+        if self.disabled:
+            el.classList.add("disabled")
+
+        input_el = create_el("input")
+        input_el.setAttribute("type", "checkbox")
+        if self.checked:
+            input_el.setAttribute("checked", "")
+        if self.disabled:
+            input_el.setAttribute("disabled", "")
+
+        box = create_el("span", "cn-checkbox-box")
+        label_el = create_el("span", "cn-checkbox-label")
+        label_el.textContent = self.label
+
+        el.appendChild(input_el)
+        el.appendChild(box)
+        el.appendChild(label_el)
+        return el
+
+
+class Radio:
+    """Radio button component."""
+
+    def __init__(self, name: str, options: list, selected: str = None):
+        self.name = name
+        self.options = options
+        self.selected = selected
+        self.element = self._render()
+
+    def _render(self):
+        container = create_el("div")
+        for option in self.options:
+            if isinstance(option, tuple):
+                value, label = option
+            else:
+                value = label = option
+
+            el = create_el("label", "cn-radio")
+            input_el = create_el("input")
+            input_el.setAttribute("type", "radio")
+            input_el.setAttribute("name", self.name)
+            input_el.setAttribute("value", value)
+            if value == self.selected:
+                input_el.setAttribute("checked", "")
+
+            box = create_el("span", "cn-radio-box")
+            label_el = create_el("span", "cn-radio-label")
+            label_el.textContent = label
+
+            el.appendChild(input_el)
+            el.appendChild(box)
+            el.appendChild(label_el)
+            container.appendChild(el)
+
+        return container
+
+
+class Select:
+    """Select dropdown component."""
+
+    def __init__(self, options: list, placeholder: str = ""):
+        self.options = options
+        self.placeholder = placeholder
+        self.element = self._render()
+
+    def _render(self):
+        wrapper = create_el("div", "cn-select-wrapper")
+        select = create_el("select", "cn-select")
+
+        if self.placeholder:
+            placeholder_option = create_el("option")
+            placeholder_option.setAttribute("value", "")
+            placeholder_option.setAttribute("disabled", "")
+            placeholder_option.setAttribute("selected", "")
+            placeholder_option.textContent = self.placeholder
+            select.appendChild(placeholder_option)
+
+        for option in self.options:
+            if isinstance(option, tuple):
+                value, label = option
+            else:
+                value = label = option
+
+            opt = create_el("option")
+            opt.setAttribute("value", value)
+            opt.textContent = label
+            select.appendChild(opt)
+
+        wrapper.appendChild(select)
+        return wrapper
+
+
+class Slider:
+    """Slider component."""
+
+    def __init__(self, min: float = 0, max: float = 100, value: float = 50):
+        self.min = min
+        self.max = max
+        self.value = value
+        self.element = self._render()
+
+    def _render(self):
+        el = create_el("input", "cn-slider")
+        el.setAttribute("type", "range")
+        el.setAttribute("min", str(self.min))
+        el.setAttribute("max", str(self.max))
+        el.setAttribute("value", str(self.value))
+        return el
+
+
+class FileInput:
+    """File input component."""
+
+    def __init__(self, accept: str = "", multiple: bool = False):
+        self.accept = accept
+        self.multiple = multiple
+        self.element = self._render()
+
+    def _render(self):
+        wrapper = create_el("div", "cn-file-input")
+
+        input_el = create_el("input")
+        input_el.setAttribute("type", "file")
+        if self.accept:
+            input_el.setAttribute("accept", self.accept)
+        if self.multiple:
+            input_el.setAttribute("multiple", "")
+
+        label = create_el("div", "cn-file-input-label")
+        icon = create_el("div", "cn-file-input-icon")
+        icon.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>'
+
+        text = create_el("div", "cn-file-input-text")
+        text.innerHTML = "Drag and drop or <span>browse</span>"
+
+        label.appendChild(icon)
+        label.appendChild(text)
+        wrapper.appendChild(input_el)
+        wrapper.appendChild(label)
+
+        return wrapper