cronixui 1.0.5 → 1.1.0

package/packages/python/cronixui/layout.py

@@ -0,0 +1,143 @@
+"""CronixUI Layout Components"""
+
+from .core import create_el
+
+
+class Header:
+    """Header component."""
+
+    def __init__(self, brand: str = ""):
+        self.brand = brand
+        self.element = self._render()
+
+    def _render(self):
+        el = create_el("header", "cn-header")
+
+        brand_el = create_el("a", "cn-header-brand")
+        brand_el.textContent = self.brand
+        el.appendChild(brand_el)
+
+        self.nav = create_el("nav", "cn-header-nav")
+        el.appendChild(self.nav)
+
+        self.actions = create_el("div", "cn-header-actions")
+        el.appendChild(self.actions)
+
+        return el
+
+    def add_nav_item(self, text: str, href: str = "#"):
+        link = create_el("a", "cn-btn cn-btn-ghost")
+        link.textContent = text
+        link.setAttribute("href", href)
+        self.nav.appendChild(link)
+
+    def add_action(self, element):
+        self.actions.appendChild(element)
+
+
+class Sidebar:
+    """Sidebar navigation component."""
+
+    def __init__(self):
+        self.element = self._render()
+
+    def _render(self):
+        el = create_el("aside", "cn-sidebar")
+
+        self.header = create_el("div", "cn-sidebar-header")
+        el.appendChild(self.header)
+
+        self.nav = create_el("nav", "cn-sidebar-nav")
+        el.appendChild(self.nav)
+
+        self.footer = create_el("div", "cn-sidebar-footer")
+        el.appendChild(self.footer)
+
+        return el
+
+    def add_item(
+        self, text: str, icon: str = None, href: str = "#", active: bool = False
+    ):
+        item = create_el("a", "cn-sidebar-item")
+        item.setAttribute("href", href)
+        if active:
+            item.classList.add("cn-sidebar-active")
+
+        if icon:
+            icon_el = create_el("span")
+            icon_el.innerHTML = icon
+            item.appendChild(icon_el)
+
+        text_el = create_el("span")
+        text_el.textContent = text
+        item.appendChild(text_el)
+
+        self.nav.appendChild(item)
+
+
+class Footer:
+    """Footer component."""
+
+    def __init__(self, copyright: str = ""):
+        self.copyright = copyright
+        self.element = self._render()
+
+    def _render(self):
+        el = create_el("footer", "cn-footer")
+
+        content = create_el("div", "cn-footer-content")
+
+        self.links = create_el("div", "cn-footer-links")
+        content.appendChild(self.links)
+
+        copyright_el = create_el("div", "cn-footer-copyright")
+        copyright_el.textContent = self.copyright
+        content.appendChild(copyright_el)
+
+        el.appendChild(content)
+        return el
+
+    def add_link(self, text: str, href: str = "#"):
+        link = create_el("a", "cn-footer-link")
+        link.textContent = text
+        link.setAttribute("href", href)
+        self.links.appendChild(link)
+
+
+class Container:
+    """Container component."""
+
+    SIZES = ("sm", "md", "lg", "xl", "fluid")
+
+    def __init__(self, size: str = "lg"):
+        self.size = size if size in self.SIZES else "lg"
+        self.element = self._render()
+
+    def _render(self):
+        classes = "cn-container"
+        if self.size != "lg":
+            classes += f" cn-container-{self.size}"
+        return create_el("div", classes)
+
+
+class Divider:
+    """Divider component."""
+
+    def __init__(self):
+        self.element = create_el("div", "cn-divider")
+
+
+class Section:
+    """Section spacing component."""
+
+    SIZES = ("sm", "md", "lg")
+
+    def __init__(self, size: str = "md"):
+        self.size = size if size in self.SIZES else "md"
+        self.element = self._render()
+
+    def _render(self):
+        classes = "cn-section"
+        if self.size != "md":
+            classes += f" cn-section-{self.size}"
+        return create_el("section", classes)

package/packages/python/cronixui/list.py

@@ -0,0 +1,51 @@
+"""CronixUI List Component"""
+
+from typing import Optional, Callable
+from .core import create_el
+
+
+class List:
+    """List component."""
+
+    def __init__(self, items: list, clickable: bool = False):
+        self.items = items
+        self.clickable = clickable
+        self.element = self._render()
+
+    def _render(self):
+        el = create_el("div", "cn-list")
+        for item in self.items:
+            item_el = create_el("div", "cn-list-item")
+            if self.clickable:
+                item_el.classList.add("cn-list-item-clickable")
+
+            if isinstance(item, dict):
+                if icon := item.get("icon"):
+                    icon_el = create_el("span", "cn-list-item-icon")
+                    icon_el.innerHTML = icon
+                    item_el.appendChild(icon_el)
+
+                content = create_el("div", "cn-list-item-content")
+                if title := item.get("title"):
+                    title_el = create_el("div", "cn-list-item-title")
+                    title_el.textContent = title
+                    content.appendChild(title_el)
+
+                if subtitle := item.get("subtitle"):
+                    subtitle_el = create_el("div", "cn-list-item-subtitle")
+                    subtitle_el.textContent = subtitle
+                    content.appendChild(subtitle_el)
+
+                item_el.appendChild(content)
+
+                if actions := item.get("actions"):
+                    actions_el = create_el("div", "cn-list-item-actions")
+                    actions_el.innerHTML = actions
+                    item_el.appendChild(actions_el)
+            else:
+                content = create_el("div", "cn-list-item-content")
+                content.textContent = str(item)
+                item_el.appendChild(content)
+
+            el.appendChild(item_el)
+        return el

package/packages/python/cronixui/loading.py

@@ -0,0 +1,36 @@
+"""CronixUI Loading Components"""
+
+from .core import create_el
+
+
+class Spinner:
+    """Loading spinner component."""
+
+    SIZES = ("sm", "md", "lg")
+
+    def __init__(self, size: str = "md"):
+        self.size = size if size in self.SIZES else "md"
+        self.element = self._render()
+
+    def _render(self):
+        el = create_el("div", "cn-spinner")
+        if self.size != "md":
+            el.classList.add(f"cn-spinner-{self.size}")
+        return el
+
+
+class Skeleton:
+    """Skeleton loading placeholder."""
+
+    VARIANTS = ("text", "title", "avatar")
+
+    def __init__(self, variant: str = "text", width: str = None):
+        self.variant = variant if variant in self.VARIANTS else "text"
+        self.width = width
+        self.element = self._render()
+
+    def _render(self):
+        el = create_el("div", f"cn-skeleton cn-skeleton-{self.variant}")
+        if self.width:
+            el.style.width = self.width
+        return el

package/packages/python/cronixui/progress.py

@@ -0,0 +1,90 @@
+"""CronixUI Progress Components"""
+
+from .core import create_el
+
+
+class Progress:
+    """Progress bar component."""
+
+    VARIANTS = ("default", "success", "warning", "error")
+    SIZES = ("sm", "md", "lg")
+
+    def __init__(
+        self,
+        value: float = 0,
+        max: float = 100,
+        variant: str = "default",
+        size: str = "md",
+        show_label: bool = False,
+    ):
+        self.value = value
+        self.max = max
+        self.variant = variant if variant in self.VARIANTS else "default"
+        self.size = size if size in self.SIZES else "md"
+        self.show_label = show_label
+        self.element = self._render()
+
+    def _render(self):
+        container = create_el("div")
+
+        if self.show_label:
+            label = create_el("div", "cn-progress-label")
+            current = create_el("span")
+            current.textContent = str(int(self.value))
+            total = create_el("span")
+            total.textContent = str(int(self.max))
+            label.appendChild(current)
+            label.appendChild(total)
+            container.appendChild(label)
+
+        progress = create_el("div", "cn-progress")
+        if self.size != "md":
+            progress.classList.add(f"cn-progress-{self.size}")
+        if self.variant != "default":
+            progress.classList.add(f"cn-progress-{self.variant}")
+
+        bar = create_el("div", "cn-progress-bar")
+        bar.style.width = f"{(self.value / self.max) * 100}%"
+        progress.appendChild(bar)
+
+        container.appendChild(progress)
+        return container
+
+    def set_value(self, value: float):
+        self.value = value
+        bar = self.element.querySelector(".cn-progress-bar")
+        if bar:
+            bar.style.width = f"{(self.value / self.max) * 100}%"
+
+
+class Stat:
+    """Stat component for displaying metrics."""
+
+    def __init__(
+        self, value: str, label: str, delta: str = None, delta_type: str = None
+    ):
+        self.value = value
+        self.label = label
+        self.delta = delta
+        self.delta_type = delta_type
+        self.element = self._render()
+
+    def _render(self):
+        el = create_el("div", "cn-stat")
+
+        value_el = create_el("div", "cn-stat-value")
+        value_el.textContent = self.value
+        el.appendChild(value_el)
+
+        label_el = create_el("div", "cn-stat-label")
+        label_el.textContent = self.label
+        el.appendChild(label_el)
+
+        if self.delta:
+            delta_el = create_el(
+                "div", f"cn-stat-delta cn-stat-delta-{self.delta_type}"
+            )
+            delta_el.textContent = self.delta
+            el.appendChild(delta_el)
+
+        return el

package/packages/python/cronixui/table.py

@@ -0,0 +1,48 @@
+"""CronixUI Table Component"""
+
+from typing import List, Optional
+from .core import create_el
+
+
+class Table:
+    """Table component."""
+
+    def __init__(
+        self,
+        headers: List[str],
+        rows: List[List[str]],
+        sortable: bool = False,
+    ):
+        self.headers = headers
+        self.rows = rows
+        self.sortable = sortable
+        self.element = self._render()
+
+    def _render(self):
+        wrapper = create_el("div", "cn-table-wrapper")
+        table = create_el("table", "cn-table")
+
+        if self.sortable:
+            table.classList.add("cn-table-sortable")
+
+        thead = create_el("thead")
+        header_row = create_el("tr")
+        for header in self.headers:
+            th = create_el("th")
+            th.textContent = header
+            header_row.appendChild(th)
+        thead.appendChild(header_row)
+        table.appendChild(thead)
+
+        tbody = create_el("tbody")
+        for row_data in self.rows:
+            row = create_el("tr")
+            for cell in row_data:
+                td = create_el("td")
+                td.textContent = cell
+                row.appendChild(td)
+            tbody.appendChild(row)
+        table.appendChild(tbody)
+
+        wrapper.appendChild(table)
+        return wrapper

package/packages/python/cronixui/tokens.py

@@ -0,0 +1,200 @@
+"""
+CronixUI Design Tokens
+"""
+
+from dataclasses import dataclass
+from typing import Tuple
+
+
+@dataclass(frozen=True)
+class Color:
+    """Color token."""
+
+    hex: str
+    rgb: Tuple[int, int, int]
+
+
+# Background colors
+BG = Color("#0a0a0a", (10, 10, 10))
+SURFACE = Color("#111111", (17, 17, 17))
+SURFACE_2 = Color("#1a1a1a", (26, 26, 26))
+SURFACE_3 = Color("#222222", (34, 34, 34))
+SURFACE_4 = Color("#2a2a2a", (42, 42, 42))
+
+# Text colors
+TEXT = Color("#f0ede8", (240, 237, 232))
+TEXT_MUTED = "rgba(240, 237, 232, 0.5)"
+TEXT_DIM = "rgba(240, 237, 232, 0.25)"
+
+# Accent (Crimson)
+ACCENT = Color("#6b2323", (107, 35, 35))
+ACCENT_HOVER = Color("#7d2a2a", (125, 42, 42))
+ACCENT_LIGHT = Color("#8a3535", (138, 53, 53))
+ACCENT_GLOW = "rgba(107, 35, 35, 0.3)"
+ACCENT_TEXT = Color("#c97a7a", (201, 122, 122))
+
+# Semantic colors
+SUCCESS = Color("#1e5028", (30, 80, 40))
+SUCCESS_BORDER = "rgba(60, 140, 70, 0.4)"
+SUCCESS_TEXT = Color("#6bc47a", (107, 196, 122))
+
+WARNING = Color("#503c14", (80, 60, 20))
+WARNING_BORDER = "rgba(150, 110, 30, 0.4)"
+WARNING_TEXT = Color("#c4a43a", (196, 164, 58))
+
+ERROR = Color("#501414", (80, 20, 20))
+ERROR_BORDER = "rgba(180, 60, 60, 0.4)"
+ERROR_TEXT = Color("#c46b6b", (196, 107, 107))
+
+INFO = Color("#143550", (20, 53, 80))
+INFO_BORDER = "rgba(60, 140, 200, 0.4)"
+INFO_TEXT = Color("#6ba8c4", (107, 168, 196))
+
+# Border
+BORDER = "rgba(255, 255, 255, 0.08)"
+BORDER_HOVER = "rgba(255, 255, 255, 0.15)"
+BORDER_FOCUS = "rgba(255, 255, 255, 0.25)"
+
+
+@dataclass(frozen=True)
+class Typography:
+    """Typography tokens."""
+
+    font_family: str = (
+        "'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+    )
+    font_mono: str = "'JetBrains Mono', 'Fira Code', 'Consolas', monospace"
+
+    # Font sizes
+    xs: int = 11
+    sm: int = 12
+    base: int = 13
+    md: int = 14
+    lg: int = 16
+    xl: int = 20
+    xxl: int = 28
+    xxxl: int = 36
+
+
+@dataclass(frozen=True)
+class Spacing:
+    """Spacing tokens."""
+
+    space_1: int = 4
+    space_2: int = 8
+    space_3: int = 12
+    space_4: int = 16
+    space_5: int = 20
+    space_6: int = 24
+    space_8: int = 32
+    space_10: int = 40
+    space_12: int = 48
+
+
+@dataclass(frozen=True)
+class Radius:
+    """Border radius tokens."""
+
+    sm: int = 6
+    default: int = 10
+    lg: int = 14
+    xl: int = 20
+    full: int = 9999
+
+
+@dataclass(frozen=True)
+class Shadow:
+    """Shadow tokens."""
+
+    sm: str = "0 1px 2px rgba(0, 0, 0, 0.3)"
+    default: str = "0 4px 12px rgba(0, 0, 0, 0.4)"
+    lg: str = "0 8px 24px rgba(0, 0, 0, 0.5)"
+    glow: str = "0 0 20px rgba(107, 35, 35, 0.3)"
+
+
+@dataclass(frozen=True)
+class Transition:
+    """Transition tokens."""
+
+    fast: str = "0.1s ease"
+    default: str = "0.15s ease"
+    slow: str = "0.25s ease"
+
+
+@dataclass(frozen=True)
+class ZIndex:
+    """Z-index tokens."""
+
+    dropdown: int = 100
+    sticky: int = 200
+    fixed: int = 300
+    modal_backdrop: int = 400
+    modal: int = 500
+    popover: int = 600
+    tooltip: int = 700
+    toast: int = 800
+
+
+@dataclass(frozen=True)
+class Layout:
+    """Layout tokens."""
+
+    container_max: int = 1200
+    sidebar_width: int = 260
+
+
+# Token instances
+typography = Typography()
+spacing = Spacing()
+radius = Radius()
+shadow = Shadow()
+transition = Transition()
+z_index = ZIndex()
+layout = Layout()
+
+
+__all__ = [
+    "Color",
+    "BG",
+    "SURFACE",
+    "SURFACE_2",
+    "SURFACE_3",
+    "SURFACE_4",
+    "TEXT",
+    "TEXT_MUTED",
+    "TEXT_DIM",
+    "ACCENT",
+    "ACCENT_HOVER",
+    "ACCENT_LIGHT",
+    "ACCENT_GLOW",
+    "ACCENT_TEXT",
+    "SUCCESS",
+    "SUCCESS_BORDER",
+    "SUCCESS_TEXT",
+    "WARNING",
+    "WARNING_BORDER",
+    "WARNING_TEXT",
+    "ERROR",
+    "ERROR_BORDER",
+    "ERROR_TEXT",
+    "INFO",
+    "INFO_BORDER",
+    "INFO_TEXT",
+    "BORDER",
+    "BORDER_HOVER",
+    "BORDER_FOCUS",
+    "Typography",
+    "typography",
+    "Spacing",
+    "spacing",
+    "Radius",
+    "radius",
+    "Shadow",
+    "shadow",
+    "Transition",
+    "transition",
+    "ZIndex",
+    "z_index",
+    "Layout",
+    "layout",
+]

package/packages/python/cronixui/tooltip.py

@@ -0,0 +1,28 @@
+"""CronixUI Tooltip Component"""
+
+from .core import create_el
+
+
+class Tooltip:
+    """Tooltip component."""
+
+    POSITIONS = ("top", "bottom", "left", "right")
+
+    def __init__(self, content: str, position: str = "top"):
+        self.content = content
+        self.position = position if position in self.POSITIONS else "top"
+        self.element = self._render()
+
+    def _render(self):
+        el = create_el("div", "cn-tooltip")
+
+        tooltip_content = create_el("div", "cn-tooltip-content")
+        tooltip_content.textContent = self.content
+
+        el.appendChild(tooltip_content)
+        return el
+
+    def wrap(self, element):
+        """Wrap an element with tooltip."""
+        self.element.insertBefore(element, self.element.firstChild)
+        return self.element

package/packages/react/src/components/Accordion.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+
+export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+  allowMultiple?: boolean;
+  defaultOpen?: number[];
+}
+
+export interface AccordionItemProps {
+  title: string;
+  children: React.ReactNode;
+}
+
+export const Accordion: React.FC<AccordionProps> & {
+  Item: React.FC<AccordionItemProps>;
+} = Object.assign(
+  ({ allowMultiple = false, defaultOpen = [], children, className = '', ...props }: AccordionProps) => {
+    const [openItems, setOpenItems] = React.useState(new Set(defaultOpen));
+
+    const toggleItem = (index: number) => {
+      setOpenItems((prev) => {
+        const next = new Set(prev);
+        if (next.has(index)) {
+          next.delete(index);
+        } else {
+          if (!allowMultiple) {
+            next.clear();
+          }
+          next.add(index);
+        }
+        return next;
+      });
+    };
+
+    const items = React.Children.toArray(children);
+
+    return (
+      <div className={`cn-accordion ${className}`.trim()} {...props}>
+        {items.map((child, idx) => {
+          if (React.isValidElement<AccordionItemProps>(child)) {
+            return (
+              <div
+                key={idx}
+                className={`cn-accordion-item ${openItems.has(idx) ? 'cn-accordion-open' : ''}`.trim()}
+              >
+                <div
+                  className="cn-accordion-header"
+                  onClick={() => toggleItem(idx)}
+                  role="button"
+                  tabIndex={0}
+                  aria-expanded={openItems.has(idx)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault();
+                      toggleItem(idx);
+                    }
+                  }}
+                >
+                  <span className="cn-accordion-title">{child.props.title}</span>
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="20" height="20" className="cn-accordion-icon">
+                    <polyline points="6 9 12 15 18 9" />
+                  </svg>
+                </div>
+                <div className="cn-accordion-content">
+                  {child.props.children}
+                </div>
+              </div>
+            );
+          }
+          return child;
+        })}
+      </div>
+    );
+  },
+  {
+    Item: ({ children }: AccordionItemProps) => <>{children}</>,
+  }
+);
+
+Accordion.displayName = 'Accordion';
+(Accordion.Item as React.FC<AccordionItemProps> & { displayName?: string }).displayName = 'AccordionItem';
+
+export default Accordion;