cronixui 1.0.5 → 1.1.0

package/packages/react/src/tokens/index.ts

@@ -0,0 +1,94 @@
+export const tokens = {
+  colors: {
+    bg: '#0a0a0a',
+    surface: '#111111',
+    surface2: '#1a1a1a',
+    surface3: '#222222',
+    surface4: '#2a2a2a',
+    border: 'rgba(255, 255, 255, 0.08)',
+    borderHover: 'rgba(255, 255, 255, 0.15)',
+    borderFocus: 'rgba(255, 255, 255, 0.25)',
+    text: '#f0ede8',
+    textMuted: 'rgba(240, 237, 232, 0.5)',
+    textDim: 'rgba(240, 237, 232, 0.25)',
+    accent: '#6b2323',
+    accentHover: '#7d2a2a',
+    accentLight: '#8a3535',
+    accentGlow: 'rgba(107, 35, 35, 0.3)',
+    accentText: '#c97a7a',
+    success: '#1e5028',
+    successBorder: 'rgba(60, 140, 70, 0.4)',
+    successText: '#6bc47a',
+    warning: '#503c14',
+    warningBorder: 'rgba(150, 110, 30, 0.4)',
+    warningText: '#c4a43a',
+    error: '#501414',
+    errorBorder: 'rgba(180, 60, 60, 0.4)',
+    errorText: '#c46b6b',
+    info: '#143550',
+    infoBorder: 'rgba(60, 140, 200, 0.4)',
+    infoText: '#6ba8c4',
+  },
+  typography: {
+    fontFamily: "'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    fontFamilyMono: "'JetBrains Mono', 'Fira Code', 'Consolas', monospace",
+    fontSize: {
+      xs: '11px',
+      sm: '12px',
+      base: '13px',
+      md: '14px',
+      lg: '16px',
+      xl: '20px',
+      '2xl': '28px',
+      '3xl': '36px',
+    },
+  },
+  spacing: {
+    1: '4px',
+    2: '8px',
+    3: '12px',
+    4: '16px',
+    5: '20px',
+    6: '24px',
+    8: '32px',
+    10: '40px',
+    12: '48px',
+  },
+  borderRadius: {
+    sm: '6px',
+    base: '10px',
+    lg: '14px',
+    xl: '20px',
+    full: '9999px',
+  },
+  shadows: {
+    sm: '0 1px 2px rgba(0, 0, 0, 0.3)',
+    base: '0 4px 12px rgba(0, 0, 0, 0.4)',
+    lg: '0 8px 24px rgba(0, 0, 0, 0.5)',
+    glow: '0 0 20px rgba(107, 35, 35, 0.3)',
+  },
+  transitions: {
+    fast: '0.1s ease',
+    base: '0.15s ease',
+    slow: '0.25s ease',
+  },
+  zIndex: {
+    dropdown: 100,
+    sticky: 200,
+    fixed: 300,
+    modalBackdrop: 400,
+    modal: 500,
+    popover: 600,
+    tooltip: 700,
+    toast: 800,
+  },
+  layout: {
+    containerMax: '1200px',
+    sidebarWidth: '260px',
+    headerHeight: '56px',
+  },
+} as const;
+
+export type Tokens = typeof tokens;
+
+export default tokens;

package/packages/rust/cronixui/src/colors.rs

@@ -0,0 +1,135 @@
+//! Color tokens for CronixUI
+
+use egui::Color32;
+
+/// All colors extracted from CSS variables
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub struct Colors {
+    // Background
+    pub bg: Color32,
+    pub surface: Color32,
+    pub surface_2: Color32,
+    pub surface_3: Color32,
+    pub surface_4: Color32,
+
+    // Text
+    pub text: Color32,
+    pub text_muted: Color32,
+    pub text_dim: Color32,
+
+    // Accent (Crimson)
+    pub accent: Color32,
+    pub accent_hover: Color32,
+    pub accent_light: Color32,
+    pub accent_text: Color32,
+
+    // Semantic - Success
+    pub success: Color32,
+    pub success_border: Color32,
+    pub success_text: Color32,
+
+    // Semantic - Warning
+    pub warning: Color32,
+    pub warning_border: Color32,
+    pub warning_text: Color32,
+
+    // Semantic - Error
+    pub error: Color32,
+    pub error_border: Color32,
+    pub error_text: Color32,
+
+    // Semantic - Info
+    pub info: Color32,
+    pub info_border: Color32,
+    pub info_text: Color32,
+
+    // Border
+    pub border: Color32,
+    pub border_hover: Color32,
+    pub border_focus: Color32,
+}
+
+impl Default for Colors {
+    fn default() -> Self {
+        Self {
+            // Background
+            bg: Color32::from_rgb(10, 10, 10),
+            surface: Color32::from_rgb(17, 17, 17),
+            surface_2: Color32::from_rgb(26, 26, 26),
+            surface_3: Color32::from_rgb(34, 34, 34),
+            surface_4: Color32::from_rgb(42, 42, 42),
+
+            // Text
+            text: Color32::from_rgb(240, 237, 232),
+            text_muted: Color32::from_rgba_unmultiplied(240, 237, 232, 128),
+            text_dim: Color32::from_rgba_unmultiplied(240, 237, 232, 64),
+
+            // Accent
+            accent: Color32::from_rgb(107, 35, 35),
+            accent_hover: Color32::from_rgb(125, 42, 42),
+            accent_light: Color32::from_rgb(138, 53, 53),
+            accent_text: Color32::from_rgb(201, 122, 122),
+
+            // Success
+            success: Color32::from_rgb(30, 80, 40),
+            success_border: Color32::from_rgba_unmultiplied(60, 140, 70, 102),
+            success_text: Color32::from_rgb(107, 196, 122),
+
+            // Warning
+            warning: Color32::from_rgb(80, 60, 20),
+            warning_border: Color32::from_rgba_unmultiplied(150, 110, 30, 102),
+            warning_text: Color32::from_rgb(196, 164, 58),
+
+            // Error
+            error: Color32::from_rgb(80, 20, 20),
+            error_border: Color32::from_rgba_unmultiplied(180, 60, 60, 102),
+            error_text: Color32::from_rgb(196, 107, 107),
+
+            // Info
+            info: Color32::from_rgb(20, 53, 80),
+            info_border: Color32::from_rgba_unmultiplied(60, 140, 200, 102),
+            info_text: Color32::from_rgb(107, 168, 196),
+
+            // Border
+            border: Color32::from_rgba_unmultiplied(255, 255, 255, 20),
+            border_hover: Color32::from_rgba_unmultiplied(255, 255, 255, 38),
+            border_focus: Color32::from_rgba_unmultiplied(255, 255, 255, 64),
+        }
+    }
+}
+
+// Background color constants
+pub const BG: Color32 = Color32::from_rgb(10, 10, 10);
+pub const SURFACE: Color32 = Color32::from_rgb(17, 17, 17);
+pub const SURFACE_2: Color32 = Color32::from_rgb(26, 26, 26);
+pub const SURFACE_3: Color32 = Color32::from_rgb(34, 34, 34);
+pub const SURFACE_4: Color32 = Color32::from_rgb(42, 42, 42);
+
+// Text color constants
+pub const TEXT: Color32 = Color32::from_rgb(240, 237, 232);
+pub const TEXT_MUTED: Color32 = Color32::from_rgba_unmultiplied(240, 237, 232, 128);
+pub const TEXT_DIM: Color32 = Color32::from_rgba_unmultiplied(240, 237, 232, 64);
+
+// Accent color constants
+pub const ACCENT: Color32 = Color32::from_rgb(107, 35, 35);
+pub const ACCENT_HOVER: Color32 = Color32::from_rgb(125, 42, 42);
+pub const ACCENT_LIGHT: Color32 = Color32::from_rgb(138, 53, 53);
+pub const ACCENT_TEXT: Color32 = Color32::from_rgb(201, 122, 122);
+
+// Semantic color constants
+pub const SUCCESS: Color32 = Color32::from_rgb(30, 80, 40);
+pub const SUCCESS_TEXT: Color32 = Color32::from_rgb(107, 196, 122);
+
+pub const WARNING: Color32 = Color32::from_rgb(80, 60, 20);
+pub const WARNING_TEXT: Color32 = Color32::from_rgb(196, 164, 58);
+
+pub const ERROR: Color32 = Color32::from_rgb(80, 20, 20);
+pub const ERROR_TEXT: Color32 = Color32::from_rgb(196, 107, 107);
+
+pub const INFO: Color32 = Color32::from_rgb(20, 53, 80);
+pub const INFO_TEXT: Color32 = Color32::from_rgb(107, 168, 196);
+
+// Border color constants
+pub const BORDER: Color32 = Color32::from_rgba_unmultiplied(255, 255, 255, 20);
+pub const BORDER_HOVER: Color32 = Color32::from_rgba_unmultiplied(255, 255, 255, 38);
+pub const BORDER_FOCUS: Color32 = Color32::from_rgba_unmultiplied(255, 255, 255, 64);

package/packages/rust/cronixui/src/components/accordion.rs

@@ -0,0 +1,47 @@
+//! Accordion component
+
+pub struct Accordion {
+    pub open_indices: Vec<bool>,
+}
+
+impl Accordion {
+    pub fn new(count: usize) -> Self {
+        Self {
+            open_indices: vec![false; count],
+        }
+    }
+
+    pub fn toggle(&mut self, index: usize) {
+        if index < self.open_indices.len() {
+            self.open_indices[index] = !self.open_indices[index];
+        }
+    }
+
+    pub fn open(&mut self, index: usize) {
+        if index < self.open_indices.len() {
+            self.open_indices[index] = true;
+        }
+    }
+
+    pub fn close(&mut self, index: usize) {
+        if index < self.open_indices.len() {
+            self.open_indices[index] = false;
+        }
+    }
+
+    pub fn open_all(&mut self) {
+        for open in &mut self.open_indices {
+            *open = true;
+        }
+    }
+
+    pub fn close_all(&mut self) {
+        for open in &mut self.open_indices {
+            *open = false;
+        }
+    }
+
+    pub fn is_open(&self, index: usize) -> bool {
+        self.open_indices.get(index).copied().unwrap_or(false)
+    }
+}

package/packages/rust/cronixui/src/components/alert.rs

@@ -0,0 +1,95 @@
+//! Alert component
+
+use crate::colors::*;
+use egui::Color32;
+
+pub enum AlertVariant {
+    Info,
+    Success,
+    Warning,
+    Error,
+}
+
+impl AlertVariant {
+    pub fn bg_color(&self) -> Color32 {
+        match self {
+            AlertVariant::Info => INFO,
+            AlertVariant::Success => SUCCESS,
+            AlertVariant::Warning => WARNING,
+            AlertVariant::Error => ERROR,
+        }
+    }
+
+    pub fn border_color(&self) -> Color32 {
+        match self {
+            AlertVariant::Info => INFO_TEXT,
+            AlertVariant::Success => SUCCESS_TEXT,
+            AlertVariant::Warning => WARNING_TEXT,
+            AlertVariant::Error => ERROR_TEXT,
+        }
+    }
+
+    pub fn icon(&self) -> &'static str {
+        match self {
+            AlertVariant::Info => "ℹ",
+            AlertVariant::Success => "✓",
+            AlertVariant::Warning => "⚠",
+            AlertVariant::Error => "✕",
+        }
+    }
+}
+
+pub struct Alert {
+    pub title: Option<String>,
+    pub message: String,
+    pub variant: AlertVariant,
+    pub dismissible: bool,
+}
+
+impl Alert {
+    pub fn info(message: impl Into<String>) -> Self {
+        Self {
+            title: None,
+            message: message.into(),
+            variant: AlertVariant::Info,
+            dismissible: false,
+        }
+    }
+
+    pub fn success(message: impl Into<String>) -> Self {
+        Self {
+            title: None,
+            message: message.into(),
+            variant: AlertVariant::Success,
+            dismissible: false,
+        }
+    }
+
+    pub fn warning(message: impl Into<String>) -> Self {
+        Self {
+            title: None,
+            message: message.into(),
+            variant: AlertVariant::Warning,
+            dismissible: false,
+        }
+    }
+
+    pub fn error(message: impl Into<String>) -> Self {
+        Self {
+            title: None,
+            message: message.into(),
+            variant: AlertVariant::Error,
+            dismissible: false,
+        }
+    }
+
+    pub fn title(mut self, title: impl Into<String>) -> Self {
+        self.title = Some(title.into());
+        self
+    }
+
+    pub fn dismissible(mut self) -> Self {
+        self.dismissible = true;
+        self
+    }
+}

package/packages/rust/cronixui/src/components/avatar.rs

@@ -0,0 +1,85 @@
+//! Avatar component
+
+use egui::*;
+use crate::{colors::*, tokens::*};
+
+pub struct Avatar {
+    pub initials: String,
+    pub size: AvatarSize,
+}
+
+#[derive(Clone, Copy)]
+pub enum AvatarSize {
+    SM,
+    MD,
+    LG,
+    XL,
+}
+
+impl AvatarSize {
+    pub fn diameter(&self) -> f32 {
+        match self {
+            AvatarSize::SM => 24.0,
+            AvatarSize::MD => 32.0,
+            AvatarSize::LG => 40.0,
+            AvatarSize::XL => 56.0,
+        }
+    }
+
+    pub fn font_size(&self) -> f32 {
+        match self {
+            AvatarSize::SM => 10.0,
+            AvatarSize::MD => 12.0,
+            AvatarSize::LG => 14.0,
+            AvatarSize::XL => 18.0,
+        }
+    }
+}
+
+impl Avatar {
+    pub fn new(initials: impl Into<String>) -> Self {
+        Self {
+            initials: initials.into(),
+            size: AvatarSize::MD,
+        }
+    }
+
+    pub fn size(mut self, size: AvatarSize) -> Self {
+        self.size = size;
+        self
+    }
+
+    pub fn show(&self, ui: &mut Ui) -> Response {
+        let colors = Colors::default();
+        let diameter = self.size.diameter();
+        let font_size = self.size.font_size();
+        let radius = diameter / 2.0;
+
+        let (rect, response) = ui.allocate_exact_size(vec2(diameter, diameter), Sense::hover());
+
+        // Draw background circle
+        ui.painter().circle_filled(
+            rect.center(),
+            radius,
+            colors.accent,
+        );
+
+        // Draw border
+        ui.painter().circle_stroke(
+            rect.center(),
+            radius,
+            Stroke::new(1.0, colors.border),
+        );
+
+        // Draw initials text
+        ui.painter().text(
+            rect.center(),
+            Align2::CENTER_CENTER,
+            &self.initials,
+            FontId::new(font_size, FontFamily::Proportional),
+            colors.accent_text,
+        );
+
+        response
+    }
+}

package/packages/rust/cronixui/src/components/badge.rs

@@ -0,0 +1,35 @@
+//! Badge component
+
+use crate::colors::*;
+use egui::Color32;
+
+pub enum BadgeVariant {
+    Default,
+    Accent,
+    Success,
+    Warning,
+    Error,
+    Info,
+}
+
+pub fn badge_color(variant: BadgeVariant) -> Color32 {
+    match variant {
+        BadgeVariant::Default => SURFACE_2,
+        BadgeVariant::Accent => ACCENT,
+        BadgeVariant::Success => SUCCESS,
+        BadgeVariant::Warning => WARNING,
+        BadgeVariant::Error => ERROR,
+        BadgeVariant::Info => INFO,
+    }
+}
+
+pub fn badge_text_color(variant: BadgeVariant) -> Color32 {
+    match variant {
+        BadgeVariant::Default => TEXT_MUTED,
+        BadgeVariant::Accent => ACCENT_TEXT,
+        BadgeVariant::Success => SUCCESS_TEXT,
+        BadgeVariant::Warning => WARNING_TEXT,
+        BadgeVariant::Error => ERROR_TEXT,
+        BadgeVariant::Info => INFO_TEXT,
+    }
+}

package/packages/rust/cronixui/src/components/breadcrumb.rs

@@ -0,0 +1,58 @@
+//! Breadcrumb component
+
+use egui::*;
+use crate::{colors::*, tokens::*};
+
+pub struct Breadcrumb {
+    pub items: Vec<String>,
+}
+
+impl Breadcrumb {
+    pub fn new() -> Self {
+        Self { items: Vec::new() }
+    }
+
+    pub fn item(mut self, item: impl Into<String>) -> Self {
+        self.items.push(item.into());
+        self
+    }
+
+    pub fn show(&self, ui: &mut Ui) -> Response {
+        let colors = Colors::default();
+
+        ui.horizontal(|ui| {
+            for (i, item) in self.items.iter().enumerate() {
+                if i > 0 {
+                    ui.label(
+                        RichText::new("/")
+                            .size(tokens::FONT_SIZE_SM)
+                            .color(colors.text_muted),
+                    );
+                }
+
+                let is_last = i == self.items.len() - 1;
+                if is_last {
+                    ui.label(
+                        RichText::new(item)
+                            .size(tokens::FONT_SIZE_BASE)
+                            .color(colors.text)
+                            .strong(),
+                    );
+                } else {
+                    ui.hyperlink_to(
+                        RichText::new(item)
+                            .size(tokens::FONT_SIZE_BASE)
+                            .color(colors.accent_text),
+                        format!("#{}", item.to_lowercase().replace(" ", "-")),
+                    );
+                }
+            }
+        }).response
+    }
+}
+
+impl Default for Breadcrumb {
+    fn default() -> Self {
+        Self::new()
+    }
+}

package/packages/rust/cronixui/src/components/button.rs

@@ -0,0 +1,70 @@
+//! Button component
+
+use egui::{Color32, Ui};
+
+use crate::{colors::*, tokens::*};
+
+pub enum ButtonVariant {
+    Default,
+    Primary,
+    Ghost,
+    Outline,
+    Danger,
+    Success,
+}
+
+pub trait ButtonExt {
+    fn button_primary(&mut self, text: &str) -> egui::Response;
+    fn button_danger(&mut self, text: &str) -> egui::Response;
+    fn button_success(&mut self, text: &str) -> egui::Response;
+    fn button_ghost(&mut self, text: &str) -> egui::Response;
+    fn button_outline(&mut self, text: &str) -> egui::Response;
+}
+
+impl ButtonExt for Ui {
+    fn button_primary(&mut self, text: &str) -> egui::Response {
+        self.add(egui::Button::new(text).fill(ACCENT))
+    }
+
+    fn button_danger(&mut self, text: &str) -> egui::Response {
+        self.add(egui::Button::new(text).fill(ERROR))
+    }
+
+    fn button_success(&mut self, text: &str) -> egui::Response {
+        self.add(egui::Button::new(text).fill(SUCCESS))
+    }
+
+    fn button_ghost(&mut self, text: &str) -> egui::Response {
+        self.add(egui::Button::new(text).fill(Color32::TRANSPARENT))
+    }
+
+    fn button_outline(&mut self, text: &str) -> egui::Response {
+        self.add(egui::Button::new(text)
+            .fill(Color32::TRANSPARENT)
+            .stroke(egui::Stroke::new(1.0, BORDER)))
+    }
+}
+
+pub fn button(ui: &mut Ui, text: &str) -> egui::Response {
+    ui.button(text)
+}
+
+pub fn button_primary(ui: &mut Ui, text: &str) -> egui::Response {
+    ui.button_primary(text)
+}
+
+pub fn button_danger(ui: &mut Ui, text: &str) -> egui::Response {
+    ui.button_danger(text)
+}
+
+pub fn button_success(ui: &mut Ui, text: &str) -> egui::Response {
+    ui.button_success(text)
+}
+
+pub fn button_ghost(ui: &mut Ui, text: &str) -> egui::Response {
+    ui.button_ghost(text)
+}
+
+pub fn button_outline(ui: &mut Ui, text: &str) -> egui::Response {
+    ui.button_outline(text)
+}