cronixui 1.0.4 → 1.0.6

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

@@ -0,0 +1,62 @@
+pub struct CommandPaletteItem {
+    pub title: String,
+    pub kbd: Option<String>,
+}
+
+impl CommandPaletteItem {
+    pub fn new(title: impl Into<String>) -> Self {
+        Self {
+            title: title.into(),
+            kbd: None,
+        }
+    }
+
+    pub fn kbd(mut self, kbd: impl Into<String>) -> Self {
+        self.kbd = Some(kbd.into());
+        self
+    }
+}
+
+pub struct CommandPalette {
+    open: bool,
+    items: Vec<CommandPaletteItem>,
+}
+
+impl CommandPalette {
+    pub fn new() -> Self {
+        Self {
+            open: false,
+            items: Vec::new(),
+        }
+    }
+
+    pub fn open(&mut self) {
+        self.open = true;
+    }
+
+    pub fn close(&mut self) {
+        self.open = false;
+    }
+
+    pub fn toggle(&mut self) {
+        self.open = !self.open;
+    }
+
+    pub fn is_open(&self) -> bool {
+        self.open
+    }
+
+    pub fn set_items(&mut self, items: Vec<CommandPaletteItem>) {
+        self.items = items;
+    }
+
+    pub fn items(&self) -> &[CommandPaletteItem] {
+        &self.items
+    }
+}
+
+impl Default for CommandPalette {
+    fn default() -> Self {
+        Self::new()
+    }
+}

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

@@ -0,0 +1,31 @@
+pub struct Dropdown {
+    open: bool,
+}
+
+impl Dropdown {
+    pub fn new() -> Self {
+        Self { open: false }
+    }
+
+    pub fn open(&mut self) {
+        self.open = true;
+    }
+
+    pub fn close(&mut self) {
+        self.open = false;
+    }
+
+    pub fn toggle(&mut self) {
+        self.open = !self.open;
+    }
+
+    pub fn is_open(&self) -> bool {
+        self.open
+    }
+}
+
+impl Default for Dropdown {
+    fn default() -> Self {
+        Self::new()
+    }
+}

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

@@ -0,0 +1,81 @@
+//! CronixUI - A dark-themed UI toolkit with crimson accents and Outfit typography
+//!
+//! ## Example
+//!
+//! ```rust
+//! use cronixui::{Toast, Toggle, Modal};
+//!
+//! // Create a toast
+//! let toast = Toast::success("Operation completed!");
+//!
+//! // Create a toggle
+//! let mut toggle = Toggle::new();
+//! toggle.toggle();
+//! assert!(toggle.is_on());
+//! ```
+
+pub const VERSION: &str = "1.0.4";
+
+mod toast;
+mod toggle;
+mod modal;
+mod dropdown;
+mod tabs;
+mod accordion;
+mod pagination;
+mod command_palette;
+mod search;
+mod tokens;
+
+pub use toast::{Toast, ToastType};
+pub use toggle::Toggle;
+pub use modal::Modal;
+pub use dropdown::Dropdown;
+pub use tabs::Tabs;
+pub use accordion::Accordion;
+pub use pagination::Pagination;
+pub use command_palette::{CommandPalette, CommandPaletteItem};
+pub use search::{Search, SearchItem};
+pub use tokens::*;
+
+/// Initialize CronixUI
+pub fn init() {
+    println!("CronixUI {} initialized", VERSION);
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_toggle() {
+        let mut toggle = Toggle::new();
+        assert!(!toggle.is_on());
+        toggle.toggle();
+        assert!(toggle.is_on());
+        toggle.set_on(false);
+        assert!(!toggle.is_on());
+    }
+
+    #[test]
+    fn test_pagination() {
+        let mut pagination = Pagination::new(10, 1);
+        assert_eq!(pagination.current(), 1);
+        pagination.next();
+        assert_eq!(pagination.current(), 2);
+        pagination.go_to(5);
+        assert_eq!(pagination.current(), 5);
+    }
+
+    #[test]
+    fn test_search() {
+        let mut search = Search::new();
+        search.set_items(vec![
+            SearchItem::new("Apple"),
+            SearchItem::new("Banana"),
+            SearchItem::new("Apricot"),
+        ]);
+        let results = search.filter("ap");
+        assert_eq!(results.len(), 2);
+    }
+}

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

@@ -0,0 +1,27 @@
+pub struct Modal {
+    open: bool,
+}
+
+impl Modal {
+    pub fn new() -> Self {
+        Self { open: false }
+    }
+
+    pub fn open(&mut self) {
+        self.open = true;
+    }
+
+    pub fn close(&mut self) {
+        self.open = false;
+    }
+
+    pub fn is_open(&self) -> bool {
+        self.open
+    }
+}
+
+impl Default for Modal {
+    fn default() -> Self {
+        Self::new()
+    }
+}

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

@@ -0,0 +1,37 @@
+pub struct Pagination {
+    total: usize,
+    current: usize,
+}
+
+impl Pagination {
+    pub fn new(total: usize, current: usize) -> Self {
+        let current = current.clamp(1, total.max(1));
+        Self { total, current }
+    }
+
+    pub fn go_to(&mut self, page: usize) {
+        if page >= 1 && page <= self.total {
+            self.current = page;
+        }
+    }
+
+    pub fn current(&self) -> usize {
+        self.current
+    }
+
+    pub fn total(&self) -> usize {
+        self.total
+    }
+
+    pub fn next(&mut self) {
+        if self.current < self.total {
+            self.current += 1;
+        }
+    }
+
+    pub fn prev(&mut self) {
+        if self.current > 1 {
+            self.current -= 1;
+        }
+    }
+}

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

@@ -0,0 +1,49 @@
+pub struct SearchItem {
+    pub title: String,
+    pub subtitle: Option<String>,
+}
+
+impl SearchItem {
+    pub fn new(title: impl Into<String>) -> Self {
+        Self {
+            title: title.into(),
+            subtitle: None,
+        }
+    }
+
+    pub fn subtitle(mut self, subtitle: impl Into<String>) -> Self {
+        self.subtitle = Some(subtitle.into());
+        self
+    }
+}
+
+pub struct Search {
+    items: Vec<SearchItem>,
+}
+
+impl Search {
+    pub fn new() -> Self {
+        Self { items: Vec::new() }
+    }
+
+    pub fn set_items(&mut self, items: Vec<SearchItem>) {
+        self.items = items;
+    }
+
+    pub fn filter(&self, query: &str) -> Vec<&SearchItem> {
+        self.items
+            .iter()
+            .filter(|item| item.title.to_lowercase().contains(&query.to_lowercase()))
+            .collect()
+    }
+
+    pub fn items(&self) -> &[SearchItem] {
+        &self.items
+    }
+}
+
+impl Default for Search {
+    fn default() -> Self {
+        Self::new()
+    }
+}

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

@@ -0,0 +1,23 @@
+pub struct Tabs {
+    active_index: usize,
+}
+
+impl Tabs {
+    pub fn new() -> Self {
+        Self { active_index: 0 }
+    }
+
+    pub fn set_active(&mut self, index: usize) {
+        self.active_index = index;
+    }
+
+    pub fn active_index(&self) -> usize {
+        self.active_index
+    }
+}
+
+impl Default for Tabs {
+    fn default() -> Self {
+        Self::new()
+    }
+}

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

@@ -0,0 +1,70 @@
+use std::fmt;
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum ToastType {
+    Success,
+    Error,
+    Warning,
+    Info,
+}
+
+impl fmt::Display for ToastType {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        match self {
+            ToastType::Success => write!(f, "success"),
+            ToastType::Error => write!(f, "error"),
+            ToastType::Warning => write!(f, "warning"),
+            ToastType::Info => write!(f, "info"),
+        }
+    }
+}
+
+#[derive(Debug, Clone)]
+pub struct Toast {
+    pub title: Option<String>,
+    pub message: String,
+    pub toast_type: ToastType,
+    pub duration: u32,
+}
+
+impl Toast {
+    pub fn show(message: impl Into<String>) -> Self {
+        Self {
+            title: None,
+            message: message.into(),
+            toast_type: ToastType::Info,
+            duration: 4000,
+        }
+    }
+
+    pub fn title(mut self, title: impl Into<String>) -> Self {
+        self.title = Some(title.into());
+        self
+    }
+
+    pub fn toast_type(mut self, toast_type: ToastType) -> Self {
+        self.toast_type = toast_type;
+        self
+    }
+
+    pub fn duration(mut self, duration: u32) -> Self {
+        self.duration = duration;
+        self
+    }
+
+    pub fn success(message: impl Into<String>) -> Self {
+        Self::show(message).toast_type(ToastType::Success)
+    }
+
+    pub fn error(message: impl Into<String>) -> Self {
+        Self::show(message).toast_type(ToastType::Error)
+    }
+
+    pub fn warning(message: impl Into<String>) -> Self {
+        Self::show(message).toast_type(ToastType::Warning)
+    }
+
+    pub fn info(message: impl Into<String>) -> Self {
+        Self::show(message).toast_type(ToastType::Info)
+    }
+}

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

@@ -0,0 +1,27 @@
+pub struct Toggle {
+    on: bool,
+}
+
+impl Toggle {
+    pub fn new() -> Self {
+        Self { on: false }
+    }
+
+    pub fn toggle(&mut self) {
+        self.on = !self.on;
+    }
+
+    pub fn is_on(&self) -> bool {
+        self.on
+    }
+
+    pub fn set_on(&mut self, value: bool) {
+        self.on = value;
+    }
+}
+
+impl Default for Toggle {
+    fn default() -> Self {
+        Self::new()
+    }
+}

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

@@ -0,0 +1,137 @@
+//! Design tokens for CronixUI
+
+use std::fmt;
+
+/// Color representation
+#[derive(Debug, Clone, Copy)]
+pub struct Color {
+    pub hex: &'static str,
+    pub r: u8,
+    pub g: u8,
+    pub b: u8,
+}
+
+impl fmt::Display for Color {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        write!(f, "{}", self.hex)
+    }
+}
+
+// Background colors
+pub const BG: Color = Color { hex: "#0a0a0a", r: 10, g: 10, b: 10 };
+pub const SURFACE: Color = Color { hex: "#111111", r: 17, g: 17, b: 17 };
+pub const SURFACE_2: Color = Color { hex: "#1a1a1a", r: 26, g: 26, b: 26 };
+pub const SURFACE_3: Color = Color { hex: "#222222", r: 34, g: 34, b: 34 };
+pub const SURFACE_4: Color = Color { hex: "#2a2a2a", r: 42, g: 42, b: 42 };
+
+// Text colors
+pub const TEXT: Color = Color { hex: "#f0ede8", r: 240, g: 237, b: 232 };
+pub const TEXT_MUTED: &str = "rgba(240, 237, 232, 0.5)";
+pub const TEXT_DIM: &str = "rgba(240, 237, 232, 0.25)";
+
+// Accent colors (Crimson)
+pub const ACCENT: Color = Color { hex: "#6b2323", r: 107, g: 35, b: 35 };
+pub const ACCENT_HOVER: Color = Color { hex: "#7d2a2a", r: 125, g: 42, b: 42 };
+pub const ACCENT_LIGHT: Color = Color { hex: "#8a3535", r: 138, g: 53, b: 53 };
+pub const ACCENT_GLOW: &str = "rgba(107, 35, 35, 0.3)";
+pub const ACCENT_TEXT: Color = Color { hex: "#c97a7a", r: 201, g: 122, b: 122 };
+
+// Semantic colors - Success
+pub const SUCCESS: Color = Color { hex: "#1e5028", r: 30, g: 80, b: 40 };
+pub const SUCCESS_BORDER: &str = "rgba(60, 140, 70, 0.4)";
+pub const SUCCESS_TEXT: Color = Color { hex: "#6bc47a", r: 107, g: 196, b: 122 };
+
+// Semantic colors - Warning
+pub const WARNING: Color = Color { hex: "#503c14", r: 80, g: 60, b: 20 };
+pub const WARNING_BORDER: &str = "rgba(150, 110, 30, 0.4)";
+pub const WARNING_TEXT: Color = Color { hex: "#c4a43a", r: 196, g: 164, b: 58 };
+
+// Semantic colors - Error
+pub const ERROR: Color = Color { hex: "#501414", r: 80, g: 20, b: 20 };
+pub const ERROR_BORDER: &str = "rgba(180, 60, 60, 0.4)";
+pub const ERROR_TEXT: Color = Color { hex: "#c46b6b", r: 196, g: 107, b: 107 };
+
+// Semantic colors - Info
+pub const INFO: Color = Color { hex: "#143550", r: 20, g: 53, b: 80 };
+pub const INFO_BORDER: &str = "rgba(60, 140, 200, 0.4)";
+pub const INFO_TEXT: Color = Color { hex: "#6ba8c4", r: 107, g: 168, b: 196 };
+
+// Border colors
+pub const BORDER: &str = "rgba(255, 255, 255, 0.08)";
+pub const BORDER_HOVER: &str = "rgba(255, 255, 255, 0.15)";
+pub const BORDER_FOCUS: &str = "rgba(255, 255, 255, 0.25)";
+
+// Typography
+pub const FONT_FAMILY: &str = "'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
+pub const FONT_MONO: &str = "'JetBrains Mono', 'Fira Code', 'Consolas', monospace";
+
+pub const FONT_SIZE_XS: u8 = 11;
+pub const FONT_SIZE_SM: u8 = 12;
+pub const FONT_SIZE_BASE: u8 = 13;
+pub const FONT_SIZE_MD: u8 = 14;
+pub const FONT_SIZE_LG: u8 = 16;
+pub const FONT_SIZE_XL: u8 = 20;
+pub const FONT_SIZE_2XL: u8 = 28;
+pub const FONT_SIZE_3XL: u8 = 36;
+
+// Spacing
+pub const SPACE_1: u8 = 4;
+pub const SPACE_2: u8 = 8;
+pub const SPACE_3: u8 = 12;
+pub const SPACE_4: u8 = 16;
+pub const SPACE_5: u8 = 20;
+pub const SPACE_6: u8 = 24;
+pub const SPACE_8: u8 = 32;
+pub const SPACE_10: u8 = 40;
+pub const SPACE_12: u8 = 48;
+
+// Border radius
+pub const RADIUS_SM: u8 = 6;
+pub const RADIUS: u8 = 10;
+pub const RADIUS_LG: u8 = 14;
+pub const RADIUS_XL: u8 = 20;
+pub const RADIUS_FULL: u16 = 9999;
+
+// Shadows
+pub const SHADOW_SM: &str = "0 1px 2px rgba(0, 0, 0, 0.3)";
+pub const SHADOW: &str = "0 4px 12px rgba(0, 0, 0, 0.4)";
+pub const SHADOW_LG: &str = "0 8px 24px rgba(0, 0, 0, 0.5)";
+pub const SHADOW_GLOW: &str = "0 0 20px rgba(107, 35, 35, 0.3)";
+
+// Transitions
+pub const TRANSITION_FAST: &str = "0.1s ease";
+pub const TRANSITION_DEFAULT: &str = "0.15s ease";
+pub const TRANSITION_SLOW: &str = "0.25s ease";
+
+// Z-index
+pub const Z_INDEX_DROPDOWN: u16 = 100;
+pub const Z_INDEX_STICKY: u16 = 200;
+pub const Z_INDEX_FIXED: u16 = 300;
+pub const Z_INDEX_MODAL_BACKDROP: u16 = 400;
+pub const Z_INDEX_MODAL: u16 = 500;
+pub const Z_INDEX_POPOVER: u16 = 600;
+pub const Z_INDEX_TOOLTIP: u16 = 700;
+pub const Z_INDEX_TOAST: u16 = 800;
+
+// Layout
+pub const CONTAINER_MAX: u16 = 1200;
+pub const SIDEBAR_WIDTH: u16 = 260;
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn test_colors() {
+        assert_eq!(BG.hex, "#0a0a0a");
+        assert_eq!(ACCENT.hex, "#6b2323");
+        assert_eq!(TEXT.r, 240);
+    }
+
+    #[test]
+    fn test_spacing() {
+        assert_eq!(SPACE_1, 4);
+        assert_eq!(SPACE_4, 16);
+        assert_eq!(SPACE_12, 48);
+    }
+}

package/packages/web/src/index.js

@@ -0,0 +1,2 @@
+export { default as CronixUI } from './cronixui.js';
+export * from './cronixui.js';

package/packages/web/src/index.mjs

@@ -0,0 +1,2 @@
+export { default as CronixUI } from './cronixui.js';
+export * from './cronixui.js';

package/packages/web/src/tokens.ts

@@ -0,0 +1,120 @@
+export interface ColorToken {
+  hex: string;
+  r: number;
+  g: number;
+  b: number;
+}
+
+// Background colors
+export const BG: ColorToken = { hex: '#0a0a0a', r: 10, g: 10, b: 10 };
+export const SURFACE: ColorToken = { hex: '#111111', r: 17, g: 17, b: 17 };
+export const SURFACE_2: ColorToken = { hex: '#1a1a1a', r: 26, g: 26, b: 26 };
+export const SURFACE_3: ColorToken = { hex: '#222222', r: 34, g: 34, b: 34 };
+export const SURFACE_4: ColorToken = { hex: '#2a2a2a', r: 42, g: 42, b: 42 };
+
+// Text colors
+export const TEXT: ColorToken = { hex: '#f0ede8', r: 240, g: 237, b: 232 };
+export const TEXT_MUTED = 'rgba(240, 237, 232, 0.5)' as const;
+export const TEXT_DIM = 'rgba(240, 237, 232, 0.25)' as const;
+
+// Accent colors (Crimson)
+export const ACCENT: ColorToken = { hex: '#6b2323', r: 107, g: 35, b: 35 };
+export const ACCENT_HOVER: ColorToken = { hex: '#7d2a2a', r: 125, g: 42, b: 42 };
+export const ACCENT_LIGHT: ColorToken = { hex: '#8a3535', r: 138, g: 53, b: 53 };
+export const ACCENT_GLOW = 'rgba(107, 35, 35, 0.3)' as const;
+export const ACCENT_TEXT: ColorToken = { hex: '#c97a7a', r: 201, g: 122, b: 122 };
+
+// Semantic colors - Success
+export const SUCCESS: ColorToken = { hex: '#1e5028', r: 30, g: 80, b: 40 };
+export const SUCCESS_BORDER = 'rgba(60, 140, 70, 0.4)' as const;
+export const SUCCESS_TEXT: ColorToken = { hex: '#6bc47a', r: 107, g: 196, b: 122 };
+
+// Semantic colors - Warning
+export const WARNING: ColorToken = { hex: '#503c14', r: 80, g: 60, b: 20 };
+export const WARNING_BORDER = 'rgba(150, 110, 30, 0.4)' as const;
+export const WARNING_TEXT: ColorToken = { hex: '#c4a43a', r: 196, g: 164, b: 58 };
+
+// Semantic colors - Error
+export const ERROR: ColorToken = { hex: '#501414', r: 80, g: 20, b: 20 };
+export const ERROR_BORDER = 'rgba(180, 60, 60, 0.4)' as const;
+export const ERROR_TEXT: ColorToken = { hex: '#c46b6b', r: 196, g: 107, b: 107 };
+
+// Semantic colors - Info
+export const INFO: ColorToken = { hex: '#143550', r: 20, g: 53, b: 80 };
+export const INFO_BORDER = 'rgba(60, 140, 200, 0.4)' as const;
+export const INFO_TEXT: ColorToken = { hex: '#6ba8c4', r: 107, g: 168, b: 196 };
+
+// Border colors
+export const BORDER = 'rgba(255, 255, 255, 0.08)' as const;
+export const BORDER_HOVER = 'rgba(255, 255, 255, 0.15)' as const;
+export const BORDER_FOCUS = 'rgba(255, 255, 255, 0.25)' as const;
+
+// Typography
+export const FONT_FAMILY = "'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" as const;
+export const FONT_MONO = "'JetBrains Mono', 'Fira Code', 'Consolas', monospace" as const;
+
+export const FONT_SIZE = {
+  xs: 11,
+  sm: 12,
+  base: 13,
+  md: 14,
+  lg: 16,
+  xl: 20,
+  '2xl': 28,
+  '3xl': 36,
+} as const;
+
+// Spacing
+export const SPACE = {
+  1: 4,
+  2: 8,
+  3: 12,
+  4: 16,
+  5: 20,
+  6: 24,
+  8: 32,
+  10: 40,
+  12: 48,
+} as const;
+
+// Border radius
+export const RADIUS = {
+  sm: 6,
+  default: 10,
+  lg: 14,
+  xl: 20,
+  full: 9999,
+} as const;
+
+// Shadows
+export const SHADOW = {
+  sm: '0 1px 2px rgba(0, 0, 0, 0.3)',
+  default: '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)',
+} as const;
+
+// Transitions
+export const TRANSITION = {
+  fast: '0.1s ease',
+  default: '0.15s ease',
+  slow: '0.25s ease',
+} as const;
+
+// Z-index
+export const Z_INDEX = {
+  dropdown: 100,
+  sticky: 200,
+  fixed: 300,
+  modalBackdrop: 400,
+  modal: 500,
+  popover: 600,
+  tooltip: 700,
+  toast: 800,
+} as const;
+
+// Layout
+export const LAYOUT = {
+  containerMax: 1200,
+  sidebarWidth: 260,
+} as const;