cronixui 1.0.6 → 1.1.0

package/packages/web/src/variables.css

@@ -1,93 +1,93 @@
 :root {
-  /* Colors */
-  --fl-bg: #0a0a0a;
-  --fl-surface: #111111;
-  --fl-surface-2: #1a1a1a;
-  --fl-surface-3: #222222;
-  --fl-surface-4: #2a2a2a;
-  --fl-border: rgba(255, 255, 255, 0.08);
-  --fl-border-hover: rgba(255, 255, 255, 0.15);
-  --fl-border-focus: rgba(255, 255, 255, 0.25);
-  --fl-text: #f0ede8;
-  --fl-text-muted: rgba(240, 237, 232, 0.5);
-  --fl-text-dim: rgba(240, 237, 232, 0.25);
+/* Colors */
+--cn-bg: #0a0a0a;
+--cn-surface: #111111;
+--cn-surface-2: #1a1a1a;
+--cn-surface-3: #222222;
+--cn-surface-4: #2a2a2a;
+--cn-border: rgba(255, 255, 255, 0.08);
+--cn-border-hover: rgba(255, 255, 255, 0.15);
+--cn-border-focus: rgba(255, 255, 255, 0.25);
+--cn-text: #f0ede8;
+--cn-text-muted: rgba(240, 237, 232, 0.5);
+--cn-text-dim: rgba(240, 237, 232, 0.25);
 
-  /* Accent (Crimson) */
-  --fl-accent: #6b2323;
-  --fl-accent-hover: #7d2a2a;
-  --fl-accent-light: #8a3535;
-  --fl-accent-glow: rgba(107, 35, 35, 0.3);
-  --fl-accent-text: #c97a7a;
+/* Accent (Crimson) */
+--cn-accent: #6b2323;
+--cn-accent-hover: #7d2a2a;
+--cn-accent-light: #8a3535;
+--cn-accent-glow: rgba(107, 35, 35, 0.3);
+--cn-accent-text: #c97a7a;
 
-  /* Status Colors */
-  --fl-success: #1e5028;
-  --fl-success-border: rgba(60, 140, 70, 0.4);
-  --fl-success-text: #6bc47a;
-  --fl-warning: #503c14;
-  --fl-warning-border: rgba(150, 110, 30, 0.4);
-  --fl-warning-text: #c4a43a;
-  --fl-error: #501414;
-  --fl-error-border: rgba(180, 60, 60, 0.4);
-  --fl-error-text: #c46b6b;
-  --fl-info: #143550;
-  --fl-info-border: rgba(60, 140, 200, 0.4);
-  --fl-info-text: #6ba8c4;
+/* Status Colors */
+--cn-success: #1e5028;
+--cn-success-border: rgba(60, 140, 70, 0.4);
+--cn-success-text: #6bc47a;
+--cn-warning: #503c14;
+--cn-warning-border: rgba(150, 110, 30, 0.4);
+--cn-warning-text: #c4a43a;
+--cn-error: #501414;
+--cn-error-border: rgba(180, 60, 60, 0.4);
+--cn-error-text: #c46b6b;
+--cn-info: #143550;
+--cn-info-border: rgba(60, 140, 200, 0.4);
+--cn-info-text: #6ba8c4;
 
-  /* Typography */
-  --fl-font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  --fl-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+/* Typography */
+--cn-font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+--cn-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
 
-  /* Font Sizes */
-  --fl-text-xs: 11px;
-  --fl-text-sm: 12px;
-  --fl-text-base: 13px;
-  --fl-text-md: 14px;
-  --fl-text-lg: 16px;
-  --fl-text-xl: 20px;
-  --fl-text-2xl: 28px;
-  --fl-text-3xl: 36px;
+/* Font Sizes */
+--cn-text-xs: 11px;
+--cn-text-sm: 12px;
+--cn-text-base: 13px;
+--cn-text-md: 14px;
+--cn-text-lg: 16px;
+--cn-text-xl: 20px;
+--cn-text-2xl: 28px;
+--cn-text-3xl: 36px;
 
-  /* Spacing */
-  --fl-space-1: 4px;
-  --fl-space-2: 8px;
-  --fl-space-3: 12px;
-  --fl-space-4: 16px;
-  --fl-space-5: 20px;
-  --fl-space-6: 24px;
-  --fl-space-8: 32px;
-  --fl-space-10: 40px;
-  --fl-space-12: 48px;
+/* Spacing */
+--cn-space-1: 4px;
+--cn-space-2: 8px;
+--cn-space-3: 12px;
+--cn-space-4: 16px;
+--cn-space-5: 20px;
+--cn-space-6: 24px;
+--cn-space-8: 32px;
+--cn-space-10: 40px;
+--cn-space-12: 48px;
 
-  /* Border Radius */
-  --fl-radius-sm: 6px;
-  --fl-radius: 10px;
-  --fl-radius-lg: 14px;
-  --fl-radius-xl: 20px;
-  --fl-radius-full: 9999px;
+/* Border Radius */
+--cn-radius-sm: 6px;
+--cn-radius: 10px;
+--cn-radius-lg: 14px;
+--cn-radius-xl: 20px;
+--cn-radius-full: 9999px;
 
-  /* Shadows */
-  --fl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
-  --fl-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-  --fl-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
-  --fl-shadow-glow: 0 0 20px var(--fl-accent-glow);
+/* Shadows */
+--cn-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+--cn-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+--cn-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
+--cn-shadow-glow: 0 0 20px var(--cn-accent-glow);
 
-  /* Transitions */
-  --fl-transition-fast: 0.1s ease;
-  --fl-transition: 0.15s ease;
-  --fl-transition-slow: 0.25s ease;
+/* Transitions */
+--cn-transition-fast: 0.1s ease;
+--cn-transition: 0.15s ease;
+--cn-transition-slow: 0.25s ease;
 
-  /* Z-Index */
-  --fl-z-dropdown: 100;
-  --fl-z-sticky: 200;
-  --fl-z-fixed: 300;
-  --fl-z-modal-backdrop: 400;
-  --fl-z-modal: 500;
-  --fl-z-popover: 600;
-  --fl-z-tooltip: 700;
-  --fl-z-toast: 800;
+/* Z-Index */
+--cn-z-dropdown: 100;
+--cn-z-sticky: 200;
+--cn-z-fixed: 300;
+--cn-z-modal-backdrop: 400;
+--cn-z-modal: 500;
+--cn-z-popover: 600;
+--cn-z-tooltip: 700;
+--cn-z-toast: 800;
 
-  /* Layout */
-  --fl-container-max: 1200px;
-  --fl-sidebar-width: 260px;
-  --fl-header-height: 56px;
+/* Layout */
+--cn-container-max: 1200px;
+--cn-sidebar-width: 260px;
+--cn-header-height: 56px;
 }

package/packages/go/cronixui/tokens.go

@@ -1,129 +0,0 @@
-package cronixui
-
-// Color represents a color token
-type Color struct {
-	Hex string
-	R   int
-	G   int
-	B   int
-}
-
-// Background colors
-var (
-	BG       = Color{Hex: "#0a0a0a", R: 10, G: 10, B: 10}
-	Surface  = Color{Hex: "#111111", R: 17, G: 17, B: 17}
-	Surface2 = Color{Hex: "#1a1a1a", R: 26, G: 26, B: 26}
-	Surface3 = Color{Hex: "#222222", R: 34, G: 34, B: 34}
-	Surface4 = Color{Hex: "#2a2a2a", R: 42, G: 42, B: 42}
-)
-
-// Text colors
-var (
-	Text      = Color{Hex: "#f0ede8", R: 240, G: 237, B: 232}
-	TextMuted = "rgba(240, 237, 232, 0.5)"
-	TextDim   = "rgba(240, 237, 232, 0.25)"
-)
-
-// Accent colors (Crimson)
-var (
-	Accent      = Color{Hex: "#6b2323", R: 107, G: 35, B: 35}
-	AccentHover = Color{Hex: "#7d2a2a", R: 125, G: 42, B: 42}
-	AccentLight = Color{Hex: "#8a3535", R: 138, G: 53, B: 53}
-	AccentGlow  = "rgba(107, 35, 35, 0.3)"
-	AccentText  = Color{Hex: "#c97a7a", R: 201, G: 122, B: 122}
-)
-
-// Semantic colors
-var (
-	Success       = Color{Hex: "#1e5028", R: 30, G: 80, B: 40}
-	SuccessBorder = "rgba(60, 140, 70, 0.4)"
-	SuccessText   = Color{Hex: "#6bc47a", R: 107, G: 196, B: 122}
-
-	Warning       = Color{Hex: "#503c14", R: 80, G: 60, B: 20}
-	WarningBorder = "rgba(150, 110, 30, 0.4)"
-	WarningText   = Color{Hex: "#c4a43a", R: 196, G: 164, B: 58}
-
-	Error_      = Color{Hex: "#501414", R: 80, G: 20, B: 20}
-	ErrorBorder = "rgba(180, 60, 60, 0.4)"
-	ErrorText   = Color{Hex: "#c46b6b", R: 196, G: 107, B: 107}
-
-	Info       = Color{Hex: "#143550", R: 20, G: 53, B: 80}
-	InfoBorder = "rgba(60, 140, 200, 0.4)"
-	InfoText   = Color{Hex: "#6ba8c4", R: 107, G: 168, B: 196}
-)
-
-// Border colors
-var (
-	Border      = "rgba(255, 255, 255, 0.08)"
-	BorderHover = "rgba(255, 255, 255, 0.15)"
-	BorderFocus = "rgba(255, 255, 255, 0.25)"
-)
-
-// Typography tokens
-var (
-	FontFamily   = "'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
-	FontMono     = "'JetBrains Mono', 'Fira Code', 'Consolas', monospace"
-	FontSizeXs   = 11
-	FontSizeSm   = 12
-	FontSizeBase = 13
-	FontSizeMd   = 14
-	FontSizeLg   = 16
-	FontSizeXl   = 20
-	FontSize2xl  = 28
-	FontSize3xl  = 36
-)
-
-// Spacing tokens
-var (
-	Space1  = 4
-	Space2  = 8
-	Space3  = 12
-	Space4  = 16
-	Space5  = 20
-	Space6  = 24
-	Space8  = 32
-	Space10 = 40
-	Space12 = 48
-)
-
-// Border radius tokens
-var (
-	RadiusSm   = 6
-	Radius     = 10
-	RadiusLg   = 14
-	RadiusXl   = 20
-	RadiusFull = 9999
-)
-
-// Shadow tokens
-var (
-	ShadowSm   = "0 1px 2px rgba(0, 0, 0, 0.3)"
-	Shadow     = "0 4px 12px rgba(0, 0, 0, 0.4)"
-	ShadowLg   = "0 8px 24px rgba(0, 0, 0, 0.5)"
-	ShadowGlow = "0 0 20px rgba(107, 35, 35, 0.3)"
-)
-
-// Transition tokens
-var (
-	TransitionFast    = "0.1s ease"
-	TransitionDefault = "0.15s ease"
-	TransitionSlow    = "0.25s ease"
-)
-
-// Z-index tokens
-var (
-	ZIndexDropdown      = 100
-	ZIndexSticky        = 200
-	ZIndexFixed         = 300
-	ZIndexModalBackdrop = 400
-	ZIndexModal         = 500
-	ZIndexPopover       = 600
-	ZIndexTooltip       = 700
-	ZIndexToast         = 800
-)
-
-// Layout tokens
-var (
-	ContainerMax = 1200
-	SidebarWidth = 260
-)

package/packages/python/cronixui/pyproject.toml

@@ -1,11 +0,0 @@
-[project]
-name = "cronixui"
-version = "1.0.2"
-description = "CronixUI - A dark-themed UI toolkit with crimson accents and Outfit typography"
-license = {text = "GPL-3.0"}
-authors = [{name = "CazyUndee"}]
-keywords = ["ui", "dark-mode", "design-system", "components"]
-requires-python = ">=3.8"
-
-[project.urls]
-Repository = "https://github.com/CazyUndee/CronixUI"

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

@@ -1,50 +0,0 @@
-import { useState } from 'react';
-
-export default function Accordion({ 
-  allowMultiple = false, 
-  defaultOpen = [],
-  children,
-  className = '' 
-}) {
-  const [openItems, setOpenItems] = useState(new Set(defaultOpen));
-
-  const toggleItem = (index) => {
-    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 = Array.isArray(children) ? children : [children];
-
-  return (
-    <div className={`cn-accordion ${className}`}>
-      {items.map((child, idx) => (
-        <div key={idx} className={`cn-accordion-item ${openItems.has(idx) ? 'cn-accordion-open' : ''}`}>
-          <div className="cn-accordion-header" onClick={() => toggleItem(idx)}>
-            <span>{child.props.title}</span>
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="20" height="20">
-              <polyline points="6 9 12 15 18 9"></polyline>
-            </svg>
-          </div>
-          <div className="cn-accordion-content">
-            {child.props.children}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-export function AccordionItem({ children }) {
-  return children;
-}
-AccordionItem.displayName = 'AccordionItem';

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

@@ -1,62 +0,0 @@
-import { useState } from 'react';
-
-export default function Alert({ 
-  type = 'info', 
-  title,
-  children,
-  closable = true,
-  onClose,
-  className = '' 
-}) {
-  const [visible, setVisible] = useState(true);
-
-  const handleClose = () => {
-    setVisible(false);
-    onClose?.();
-  };
-
-  if (!visible) return null;
-
-  return (
-    <div className={`cn-alert cn-alert-${type} ${className}`}>
-      <div className="cn-alert-icon">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-          {type === 'success' && <polyline points="20 6 9 17 4 12"></polyline>}
-          {type === 'error' && (
-            <>
-              <circle cx="12" cy="12" r="10"></circle>
-              <line x1="15" y1="9" x2="9" y2="15"></line>
-              <line x1="9" y1="9" x2="15" y2="15"></line>
-            </>
-          )}
-          {type === '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"></path>
-              <line x1="12" y1="9" x2="12" y2="13"></line>
-              <line x1="12" y1="17" x2="12.01" y2="17"></line>
-            </>
-          )}
-          {type === 'info' && (
-            <>
-              <circle cx="12" cy="12" r="10"></circle>
-              <line x1="12" y1="16" x2="12" y2="12"></line>
-              <line x1="12" y1="8" x2="12.01" y2="8"></line>
-            </>
-          )}
-        </svg>
-      </div>
-      <div className="cn-alert-content">
-        {title && <div className="cn-alert-title">{title}</div>}
-        <div className="cn-alert-message">{children}</div>
-      </div>
-      {closable && (
-        <button className="cn-alert-close" onClick={handleClose}>
-          <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>
-            <line x1="6" y1="6" x2="18" y2="18"></line>
-          </svg>
-        </button>
-      )}
-    </div>
-  );
-}

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

@@ -1,34 +0,0 @@
-export default function Avatar({ 
-  src, 
-  alt = '', 
-  initials,
-  size = 'md',
-  className = '' 
-}) {
-  const sizeClass = size !== 'md' ? `cn-avatar-${size}` : '';
-
-  return (
-    <div className={`cn-avatar ${sizeClass} ${className}`}>
-      {src ? (
-        <img src={src} alt={alt} />
-      ) : initials ? (
-        initials
-      ) : null}
-    </div>
-  );
-}
-
-export function AvatarGroup({ children, max, className = '' }) {
-  const items = Array.isArray(children) ? children : [children];
-  const visible = max ? items.slice(0, max) : items;
-  const remaining = max ? items.length - max : 0;
-
-  return (
-    <div className={`cn-avatar-group ${className}`}>
-      {visible}
-      {remaining > 0 && (
-        <div className="cn-avatar">+{remaining}</div>
-      )}
-    </div>
-  );
-}

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

@@ -1,15 +0,0 @@
-export default function Badge({ 
-  children, 
-  variant = 'default', 
-  size = 'md',
-  className = '' 
-}) {
-  const variantClass = variant !== 'default' ? `cn-badge-${variant}` : '';
-  const sizeClass = size !== 'md' ? `cn-badge-${size}` : '';
-
-  return (
-    <span className={`cn-badge ${variantClass} ${sizeClass} ${className}`}>
-      {children}
-    </span>
-  );
-}

package/packages/react/src/components/Breadcrumb.jsx

@@ -1,27 +0,0 @@
-export function Breadcrumb({ children, className = '' }) {
-  const items = Array.isArray(children) ? children : [children];
-
-  return (
-    <nav className={`cn-breadcrumb ${className}`}>
-      {items.map((child, idx) => (
-        <span key={idx}>
-          {child}
-          {idx < items.length - 1 && (
-            <span className="cn-breadcrumb-separator">/</span>
-          )}
-        </span>
-      ))}
-    </nav>
-  );
-}
-
-export function BreadcrumbItem({ children, href, active = false, className = '' }) {
-  if (active) {
-    return <span className={`cn-breadcrumb-current ${className}`}>{children}</span>;
-  }
-  return (
-    <a href={href} className={`cn-breadcrumb-item ${className}`}>
-      {children}
-    </a>
-  );
-}

package/packages/react/src/components/Button.jsx

@@ -1,21 +0,0 @@
-export default function Button({ 
-  children, 
-  variant = 'default', 
-  size = 'md', 
-  disabled = false,
-  className = '',
-  ...props 
-}) {
-  const variantClass = variant !== 'default' ? `cn-btn-${variant}` : '';
-  const sizeClass = size !== 'md' ? `cn-btn-${size}` : '';
-
-  return (
-    <button 
-      className={`cn-btn ${variantClass} ${sizeClass} ${className}`}
-      disabled={disabled}
-      {...props}
-    >
-      {children}
-    </button>
-  );
-}

package/packages/react/src/components/Card.jsx

@@ -1,23 +0,0 @@
-export default function Card({ 
-  children, 
-  hoverable = false,
-  className = '' 
-}) {
-  return (
-    <div className={`cn-card ${hoverable ? 'cn-card-hoverable' : ''} ${className}`}>
-      {children}
-    </div>
-  );
-}
-
-Card.Header = function CardHeader({ children, className = '' }) {
-  return <div className={`cn-card-header ${className}`}>{children}</div>;
-};
-
-Card.Body = function CardBody({ children, className = '' }) {
-  return <div className={`cn-card-body ${className}`}>{children}</div>;
-};
-
-Card.Footer = function CardFooter({ children, className = '' }) {
-  return <div className={`cn-card-footer ${className}`}>{children}</div>;
-};

package/packages/react/src/components/Checkbox.jsx

@@ -1,27 +0,0 @@
-import { forwardRef } from 'react';
-
-const Checkbox = forwardRef(function Checkbox({ 
-  checked = false, 
-  onChange, 
-  disabled = false,
-  children,
-  className = '',
-  ...props 
-}, ref) {
-  return (
-    <label className={`cn-checkbox ${disabled ? 'disabled' : ''} ${className}`}>
-      <input
-        ref={ref}
-        type="checkbox"
-        checked={checked}
-        onChange={(e) => onChange?.(e.target.checked)}
-        disabled={disabled}
-        {...props}
-      />
-      <span className="cn-checkbox-box"></span>
-      {children && <span className="cn-checkbox-label">{children}</span>}
-    </label>
-  );
-});
-
-export default Checkbox;

package/packages/react/src/components/CommandPalette.jsx

@@ -1,93 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-
-export default function CommandPalette({ 
-  items = [],
-  isOpen = false,
-  onClose,
-  onSelect,
-  placeholder = 'Search commands...',
-  className = '' 
-}) {
-  const [query, setQuery] = useState('');
-  const [activeIndex, setActiveIndex] = useState(0);
-  const inputRef = useRef(null);
-
-  const filtered = items.filter(item =>
-    item.title.toLowerCase().includes(query.toLowerCase()) ||
-    (item.subtitle && item.subtitle.toLowerCase().includes(query.toLowerCase()))
-  );
-
-  useEffect(() => {
-    if (isOpen) {
-      setQuery('');
-      setActiveIndex(0);
-      setTimeout(() => inputRef.current?.focus(), 100);
-    }
-  }, [isOpen]);
-
-  useEffect(() => {
-    const handleKeyDown = (e) => {
-      if (!isOpen) return;
-
-      if (e.key === 'Escape') {
-        onClose?.();
-      } else if (e.key === 'ArrowDown') {
-        e.preventDefault();
-        setActiveIndex(i => Math.min(i + 1, filtered.length - 1));
-      } else if (e.key === 'ArrowUp') {
-        e.preventDefault();
-        setActiveIndex(i => Math.max(i - 1, 0));
-      } else if (e.key === 'Enter' && filtered[activeIndex]) {
-        handleSelect(filtered[activeIndex]);
-      }
-    };
-
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [isOpen, filtered, activeIndex, onClose]);
-
-  const handleSelect = (item) => {
-    item.action?.();
-    onSelect?.(item);
-    onClose?.();
-  };
-
-  if (!isOpen) return null;
-
-  return (
-    <div className={`cn-command-palette cn-command-palette-open ${className}`} onClick={(e) => e.target === e.currentTarget && onClose?.()}>
-      <div className="cn-command-palette-inner">
-        <input
-          ref={inputRef}
-          type="text"
-          className="cn-command-palette-input"
-          placeholder={placeholder}
-          value={query}
-          onChange={(e) => {
-            setQuery(e.target.value);
-            setActiveIndex(0);
-          }}
-        />
-        <div className="cn-command-palette-results">
-          {filtered.map((item, idx) => (
-            <div
-              key={idx}
-              className={`cn-command-item ${idx === activeIndex ? 'cn-command-item-active' : ''}`}
-              onClick={() => handleSelect(item)}
-              onMouseEnter={() => setActiveIndex(idx)}
-            >
-              {item.icon && <div className="cn-command-item-icon">{item.icon}</div>}
-              <div className="cn-command-item-content">
-                <div className="cn-command-item-title">{item.title}</div>
-                {item.subtitle && (
-                  <div className="cn-command-item-subtitle">{item.subtitle}</div>
-                )}
-              </div>
-              {item.kbd && <div className="cn-command-item-kbd">{item.kbd}</div>}
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}