cronixui 1.1.0 → 1.1.2

package/packages/flutter/lib/src/widgets/cn_alert.dart

@@ -0,0 +1,137 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+enum CnAlertVariant { info, success, warning, error }
+
+class CnAlert extends StatelessWidget {
+  final String message;
+  final String? title;
+  final CnAlertVariant variant;
+  final IconData? icon;
+  final bool showIcon;
+  final VoidCallback? onDismiss;
+  final Widget? action;
+
+  const CnAlert({
+    super.key,
+    required this.message,
+    this.title,
+    this.variant = CnAlertVariant.info,
+    this.icon,
+    this.showIcon = true,
+    this.onDismiss,
+    this.action,
+  });
+
+  IconData get _defaultIcon {
+    switch (variant) {
+      case CnAlertVariant.info:
+        return Icons.info_outline;
+      case CnAlertVariant.success:
+        return Icons.check_circle_outline;
+      case CnAlertVariant.warning:
+        return Icons.warning_amber_outlined;
+      case CnAlertVariant.error:
+        return Icons.error_outline;
+    }
+  }
+
+  Color get _backgroundColor {
+    switch (variant) {
+      case CnAlertVariant.info:
+        return CronixColors.info.withOpacity(0.1);
+      case CnAlertVariant.success:
+        return CronixColors.success.withOpacity(0.1);
+      case CnAlertVariant.warning:
+        return CronixColors.warning.withOpacity(0.1);
+      case CnAlertVariant.error:
+        return CronixColors.error.withOpacity(0.1);
+    }
+  }
+
+  Color get _borderColor {
+    switch (variant) {
+      case CnAlertVariant.info:
+        return CronixColors.info;
+      case CnAlertVariant.success:
+        return CronixColors.success;
+      case CnAlertVariant.warning:
+        return CronixColors.warning;
+      case CnAlertVariant.error:
+        return CronixColors.error;
+    }
+  }
+
+  Color get _iconColor {
+    switch (variant) {
+      case CnAlertVariant.info:
+        return CronixColors.info;
+      case CnAlertVariant.success:
+        return CronixColors.success;
+      case CnAlertVariant.warning:
+        return CronixColors.warning;
+      case CnAlertVariant.error:
+        return CronixColors.error;
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(16),
+      decoration: BoxDecoration(
+        color: _backgroundColor,
+        borderRadius: CronixRadius.radiusMD,
+        border: Border.all(color: _borderColor.withOpacity(0.5)),
+      ),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          if (showIcon) ...[
+            Icon(icon ?? _defaultIcon, color: _iconColor, size: 20),
+            const SizedBox(width: 12),
+          ],
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                if (title != null) ...[
+                  Text(
+                    title!,
+                    style: const TextStyle(
+                      color: CronixColors.text,
+                      fontSize: 14,
+                      fontWeight: FontWeight.w600,
+                    ),
+                  ),
+                  const SizedBox(height: 4),
+                ],
+                Text(
+                  message,
+                  style: const TextStyle(
+                    color: CronixColors.text,
+                    fontSize: 14,
+                  ),
+                ),
+                if (action != null) ...[
+                  const SizedBox(height: 8),
+                  action!,
+                ],
+              ],
+            ),
+          ),
+          if (onDismiss != null)
+            GestureDetector(
+              onTap: onDismiss,
+              child: const Icon(
+                Icons.close,
+                color: CronixColors.textSecondary,
+                size: 18,
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+}

package/packages/flutter/lib/src/widgets/cn_avatar.dart

@@ -0,0 +1,98 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+class CnAvatar extends StatelessWidget {
+  final String? imageUrl;
+  final String? name;
+  final double size;
+  final Color? backgroundColor;
+  final Color? textColor;
+  final VoidCallback? onTap;
+  final IconData? fallbackIcon;
+
+  const CnAvatar({
+    super.key,
+    this.imageUrl,
+    this.name,
+    this.size = 40,
+    this.backgroundColor,
+    this.textColor,
+    this.onTap,
+    this.fallbackIcon,
+  });
+
+  String get _initials {
+    if (name == null || name!.isEmpty) return '';
+    final parts = name!.trim().split(' ');
+    if (parts.length >= 2) {
+      return '${parts[0][0]}${parts[1][0]}'.toUpperCase();
+    }
+    return parts[0][0].toUpperCase();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    Widget content;
+    
+    if (imageUrl != null && imageUrl!.isNotEmpty) {
+      content = ClipRRect(
+        borderRadius: BorderRadius.circular(size / 2),
+        child: Image.network(
+          imageUrl!,
+          width: size,
+          height: size,
+          fit: BoxFit.cover,
+          errorBuilder: (_, __, ___) => _buildFallback(),
+        ),
+      );
+    } else if (_initials.isNotEmpty) {
+      content = Container(
+        width: size,
+        height: size,
+        decoration: BoxDecoration(
+          color: backgroundColor ?? CronixColors.accent,
+          borderRadius: BorderRadius.circular(size / 2),
+        ),
+        child: Center(
+          child: Text(
+            _initials,
+            style: TextStyle(
+              color: textColor ?? CronixColors.text,
+              fontSize: size * 0.4,
+              fontWeight: FontWeight.w600,
+            ),
+          ),
+        ),
+      );
+    } else {
+      content = _buildFallback();
+    }
+
+    if (onTap != null) {
+      return GestureDetector(
+        onTap: onTap,
+        child: content,
+      );
+    }
+
+    return content;
+  }
+
+  Widget _buildFallback() {
+    return Container(
+      width: size,
+      height: size,
+      decoration: BoxDecoration(
+        color: backgroundColor ?? CronixColors.surfaceLight,
+        borderRadius: BorderRadius.circular(size / 2),
+        border: Border.all(color: CronixColors.border),
+      ),
+      child: Icon(
+        fallbackIcon ?? Icons.person,
+        size: size * 0.5,
+        color: CronixColors.textSecondary,
+      ),
+    );
+  }
+}

package/packages/flutter/lib/src/widgets/cn_badge.dart

@@ -0,0 +1,80 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+enum CnBadgeVariant { default_, success, warning, error, info }
+
+class CnBadge extends StatelessWidget {
+  final String label;
+  final CnBadgeVariant variant;
+  final IconData? icon;
+  final double fontSize;
+  final EdgeInsetsGeometry? padding;
+
+  const CnBadge({
+    super.key,
+    required this.label,
+    this.variant = CnBadgeVariant.default_,
+    this.icon,
+    this.fontSize = 12,
+    this.padding,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: padding ?? const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+      decoration: BoxDecoration(
+        color: _getBackgroundColor(),
+        borderRadius: CronixRadius.radiusFull,
+      ),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          if (icon != null) ...[
+            Icon(icon, size: fontSize, color: _getTextColor()),
+            const SizedBox(width: 4),
+          ],
+          Text(
+            label,
+            style: TextStyle(
+              color: _getTextColor(),
+              fontSize: fontSize,
+              fontWeight: FontWeight.w500,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Color _getBackgroundColor() {
+    switch (variant) {
+      case CnBadgeVariant.default_:
+        return CronixColors.surfaceLight;
+      case CnBadgeVariant.success:
+        return CronixColors.success.withOpacity(0.2);
+      case CnBadgeVariant.warning:
+        return CronixColors.warning.withOpacity(0.2);
+      case CnBadgeVariant.error:
+        return CronixColors.error.withOpacity(0.2);
+      case CnBadgeVariant.info:
+        return CronixColors.info.withOpacity(0.2);
+    }
+  }
+
+  Color _getTextColor() {
+    switch (variant) {
+      case CnBadgeVariant.default_:
+        return CronixColors.text;
+      case CnBadgeVariant.success:
+        return CronixColors.success;
+      case CnBadgeVariant.warning:
+        return CronixColors.warning;
+      case CnBadgeVariant.error:
+        return CronixColors.error;
+      case CnBadgeVariant.info:
+        return CronixColors.info;
+    }
+  }
+}

package/packages/flutter/lib/src/widgets/cn_breadcrumb.dart

@@ -0,0 +1,88 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+class CnBreadcrumbItem {
+  final String label;
+  final VoidCallback? onTap;
+  final IconData? icon;
+
+  const CnBreadcrumbItem({
+    required this.label,
+    this.onTap,
+    this.icon,
+  });
+}
+
+class CnBreadcrumb extends StatelessWidget {
+  final List<CnBreadcrumbItem> items;
+  final IconData separator;
+  final double fontSize;
+  final Color? textColor;
+  final Color? activeColor;
+
+  const CnBreadcrumb({
+    super.key,
+    required this.items,
+    this.separator = Icons.chevron_right,
+    this.fontSize = 14,
+    this.textColor,
+    this.activeColor,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return SingleChildScrollView(
+      scrollDirection: Axis.horizontal,
+      child: Row(
+        children: items.asMap().entries.map((entry) {
+          final index = entry.key;
+          final item = entry.value;
+          final isLast = index == items.length - 1;
+
+          return Row(
+            children: [
+              if (index > 0)
+                Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 4),
+                  child: Icon(
+                    separator,
+                    size: 16,
+                    color: CronixColors.textMuted,
+                  ),
+                ),
+              InkWell(
+                onTap: isLast ? null : item.onTap,
+                borderRadius: CronixRadius.radiusSM,
+                child: Row(
+                  children: [
+                    if (item.icon != null) ...[
+                      Icon(
+                        item.icon,
+                        size: 16,
+                        color: isLast
+                            ? CronixColors.text
+                            : CronixColors.textSecondary,
+                      ),
+                      const SizedBox(width: 6),
+                    ],
+                    Text(
+                      item.label,
+                      style: TextStyle(
+                        color: isLast
+                            ? (activeColor ?? CronixColors.text)
+                            : (textColor ?? CronixColors.textSecondary),
+                        fontSize: fontSize,
+                        fontWeight: isLast ? FontWeight.w500 : FontWeight.w400,
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          );
+        }).toList(),
+      ),
+    );
+  }
+}

package/packages/flutter/lib/src/widgets/cn_button.dart

@@ -0,0 +1,137 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+enum CnButtonVariant { primary, ghost, outline, danger, success }
+
+class CnButton extends StatelessWidget {
+  final String? label;
+  final Widget? child;
+  final CnButtonVariant variant;
+  final VoidCallback? onPressed;
+  final bool disabled;
+  final bool loading;
+  final IconData? icon;
+  final IconData? trailingIcon;
+  final double? width;
+  final double height;
+  final EdgeInsetsGeometry? padding;
+
+  const CnButton({
+    super.key,
+    this.label,
+    this.child,
+    this.variant = CnButtonVariant.primary,
+    this.onPressed,
+    this.disabled = false,
+    this.loading = false,
+    this.icon,
+    this.trailingIcon,
+    this.width,
+    this.height = 40,
+    this.padding,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final effectiveOnPressed = (disabled || loading) ? null : onPressed;
+    
+    Widget content;
+    if (loading) {
+      content = Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          SizedBox(
+            width: 16,
+            height: 16,
+            child: CircularProgressIndicator(
+              strokeWidth: 2,
+              valueColor: AlwaysStoppedAnimation<Color>(_getTextColor()),
+            ),
+          ),
+          if (label != null) ...[
+            const SizedBox(width: 8),
+            Text(label!, style: TextStyle(color: _getTextColor())),
+          ],
+        ],
+      );
+    } else if (child != null) {
+      content = child!;
+    } else {
+      content = Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          if (icon != null) ...[
+            Icon(icon, size: 18, color: _getTextColor()),
+            const SizedBox(width: 8),
+          ],
+          if (label != null) Text(label!, style: TextStyle(color: _getTextColor())),
+          if (trailingIcon != null) ...[
+            const SizedBox(width: 8),
+            Icon(trailingIcon, size: 18, color: _getTextColor()),
+          ],
+        ],
+      );
+    }
+
+    return SizedBox(
+      width: width,
+      height: height,
+      child: Material(
+        color: Colors.transparent,
+        child: InkWell(
+          onTap: effectiveOnPressed,
+          borderRadius: CronixRadius.radiusMD,
+          child: Container(
+            padding: padding ?? const EdgeInsets.symmetric(horizontal: 16),
+            decoration: BoxDecoration(
+              color: _getBackgroundColor(),
+              border: _getBorder(),
+              borderRadius: CronixRadius.radiusMD,
+            ),
+            child: Center(child: content),
+          ),
+        ),
+      ),
+    );
+  }
+
+  Color _getBackgroundColor() {
+    if (disabled) return CronixColors.surfaceLight;
+    switch (variant) {
+      case CnButtonVariant.primary:
+        return CronixColors.accent;
+      case CnButtonVariant.ghost:
+        return Colors.transparent;
+      case CnButtonVariant.outline:
+        return Colors.transparent;
+      case CnButtonVariant.danger:
+        return CronixColors.error;
+      case CnButtonVariant.success:
+        return CronixColors.success;
+    }
+  }
+
+  Color _getTextColor() {
+    if (disabled) return CronixColors.textMuted;
+    switch (variant) {
+      case CnButtonVariant.primary:
+      case CnButtonVariant.danger:
+      case CnButtonVariant.success:
+        return CronixColors.text;
+      case CnButtonVariant.ghost:
+      case CnButtonVariant.outline:
+        return CronixColors.text;
+    }
+  }
+
+  BoxBorder? _getBorder() {
+    if (disabled) return null;
+    switch (variant) {
+      case CnButtonVariant.outline:
+        return Border.all(color: CronixColors.borderLight);
+      default:
+        return null;
+    }
+  }
+}

package/packages/flutter/lib/src/widgets/cn_card.dart

@@ -0,0 +1,99 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+class CnCard extends StatelessWidget {
+  final Widget? header;
+  final Widget? body;
+  final Widget? footer;
+  final EdgeInsetsGeometry? padding;
+  final EdgeInsetsGeometry? headerPadding;
+  final EdgeInsetsGeometry? footerPadding;
+  final Color? backgroundColor;
+  final double? width;
+  final double? elevation;
+  final VoidCallback? onTap;
+  final bool borderless;
+
+  const CnCard({
+    super.key,
+    this.header,
+    this.body,
+    this.footer,
+    this.padding,
+    this.headerPadding,
+    this.footerPadding,
+    this.backgroundColor,
+    this.width,
+    this.elevation,
+    this.onTap,
+    this.borderless = false,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    Widget content = Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        if (header != null)
+          Container(
+            padding: headerPadding ?? const EdgeInsets.all(16),
+            decoration: const BoxDecoration(
+              border: Border(
+                bottom: BorderSide(color: CronixColors.border),
+              ),
+            ),
+            child: header,
+          ),
+        if (body != null)
+          Flexible(
+            child: Padding(
+              padding: padding ?? const EdgeInsets.all(16),
+              child: body,
+            ),
+          ),
+        if (footer != null)
+          Container(
+            padding: footerPadding ?? const EdgeInsets.all(16),
+            decoration: const BoxDecoration(
+              border: Border(
+                top: BorderSide(color: CronixColors.border),
+              ),
+            ),
+            child: footer,
+          ),
+      ],
+    );
+
+    if (onTap != null) {
+      content = InkWell(
+        onTap: onTap,
+        borderRadius: CronixRadius.radiusLG,
+        child: content,
+      );
+    }
+
+    return Container(
+      width: width,
+      decoration: BoxDecoration(
+        color: backgroundColor ?? CronixColors.surface,
+        borderRadius: CronixRadius.radiusLG,
+        border: borderless ? null : Border.all(color: CronixColors.border),
+        boxShadow: elevation != null
+            ? [
+                BoxShadow(
+                  color: Colors.black.withOpacity(0.2),
+                  blurRadius: elevation!,
+                  offset: Offset(0, elevation! / 2),
+                ),
+              ]
+            : null,
+      ),
+      child: ClipRRect(
+        borderRadius: CronixRadius.radiusLG,
+        child: content,
+      ),
+    );
+  }
+}

package/packages/flutter/lib/src/widgets/cn_checkbox.dart

@@ -0,0 +1,77 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+class CnCheckbox extends StatelessWidget {
+  final bool value;
+  final ValueChanged<bool?>? onChanged;
+  final String? label;
+  final bool enabled;
+  final Color? activeColor;
+
+  const CnCheckbox({
+    super.key,
+    required this.value,
+    this.onChanged,
+    this.label,
+    this.enabled = true,
+    this.activeColor,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final checkbox = GestureDetector(
+      onTap: enabled && onChanged != null
+          ? () => onChanged!(!value)
+          : null,
+      child: Container(
+        width: 20,
+        height: 20,
+        decoration: BoxDecoration(
+          color: value 
+              ? (activeColor ?? CronixColors.accent)
+              : Colors.transparent,
+          borderRadius: CronixRadius.radiusSM,
+          border: Border.all(
+            color: value 
+                ? (activeColor ?? CronixColors.accent)
+                : CronixColors.borderLight,
+            width: 2,
+          ),
+        ),
+        child: value
+            ? const Icon(
+                Icons.check,
+                size: 14,
+                color: CronixColors.text,
+              )
+            : null,
+      ),
+    );
+
+    if (label != null) {
+      return InkWell(
+        onTap: enabled && onChanged != null
+            ? () => onChanged!(!value)
+            : null,
+        borderRadius: CronixRadius.radiusSM,
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            checkbox,
+            const SizedBox(width: 8),
+            Text(
+              label!,
+              style: TextStyle(
+                color: enabled ? CronixColors.text : CronixColors.textMuted,
+                fontSize: 14,
+              ),
+            ),
+          ],
+        ),
+      );
+    }
+
+    return checkbox;
+  }
+}