cronixui 1.0.6 → 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/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;

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

@@ -0,0 +1,80 @@
+import * as React from 'react';
+
+export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: AlertVariant;
+  title?: string;
+  dismissible?: boolean;
+  onClose?: () => void;
+}
+
+export const Alert: React.FC<AlertProps> = ({
+  variant = 'info',
+  title,
+  children,
+  dismissible = true,
+  onClose,
+  className = '',
+  ...props
+}) => {
+  const [visible, setVisible] = React.useState(true);
+
+  const handleClose = () => {
+    setVisible(false);
+    onClose?.();
+  };
+
+  if (!visible) return null;
+
+  const icons: Record<AlertVariant, React.ReactNode> = {
+    success: <polyline points="20 6 9 17 4 12" />,
+    error: (
+      <>
+        <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" />
+      </>
+    ),
+    warning: (
+      <>
+        <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" />
+      </>
+    ),
+    info: (
+      <>
+        <circle cx="12" cy="12" r="10" />
+        <line x1="12" y1="16" x2="12" y2="12" />
+        <line x1="12" y1="8" x2="12.01" y2="8" />
+      </>
+    ),
+  };
+
+  return (
+    <div className={`cn-alert cn-alert-${variant} ${className}`.trim()} role="alert" {...props}>
+      <div className="cn-alert-icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          {icons[variant]}
+        </svg>
+      </div>
+      <div className="cn-alert-content">
+        {title && <div className="cn-alert-title">{title}</div>}
+        <div className="cn-alert-message">{children}</div>
+      </div>
+      {dismissible && (
+        <button className="cn-alert-close" onClick={handleClose} aria-label="Close">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="16" height="16">
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+};
+
+Alert.displayName = 'Alert';
+
+export default Alert;

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

@@ -0,0 +1,54 @@
+import * as React from 'react';
+
+export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+  src?: string;
+  alt?: string;
+  initials?: string;
+  size?: AvatarSize;
+}
+
+export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  max?: number;
+}
+
+export const Avatar: React.FC<AvatarProps> = ({
+  src,
+  alt = '',
+  initials,
+  size = 'md',
+  className = '',
+  ...props
+}) => {
+  const sizeClass = size !== 'md' ? `cn-avatar-${size}` : '';
+
+  return (
+    <div className={`cn-avatar ${sizeClass} ${className}`.trim()} {...props}>
+      {src ? (
+        <img src={src} alt={alt} />
+      ) : initials ? (
+        initials
+      ) : null}
+    </div>
+  );
+};
+
+Avatar.displayName = 'Avatar';
+
+export const AvatarGroup: React.FC<AvatarGroupProps> = ({ children, max, className = '', ...props }) => {
+  const items = React.Children.toArray(children);
+  const visible = max ? items.slice(0, max) : items;
+  const remaining = max ? items.length - max : 0;
+
+  return (
+    <div className={`cn-avatar-group ${className}`.trim()} {...props}>
+      {visible}
+      {remaining > 0 && <div className="cn-avatar">+{remaining}</div>}
+    </div>
+  );
+};
+
+AvatarGroup.displayName = 'AvatarGroup';
+
+export default Avatar;

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+export type BadgeVariant = 'default' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+  solid?: boolean;
+}
+
+export const Badge: React.FC<BadgeProps> = ({
+  children,
+  variant = 'default',
+  solid = false,
+  className = '',
+  ...props
+}) => {
+  const variantClass = variant !== 'default' ? `cn-badge-${variant}` : '';
+  const solidClass = solid ? 'cn-badge-solid' : '';
+
+  return (
+    <span
+      className={`cn-badge ${variantClass} ${solidClass} ${className}`.trim()}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+};
+
+Badge.displayName = 'Badge';
+
+export default Badge;