cronixui 1.1.0 → 1.1.1

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

@@ -0,0 +1,213 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+class CnModal extends StatelessWidget {
+  final String? title;
+  final Widget? content;
+  final List<Widget>? actions;
+  final bool fullWidth;
+  final double? width;
+  final double? maxHeight;
+  final bool showCloseButton;
+  final VoidCallback? onClose;
+  final IconData? icon;
+  final Color? iconColor;
+
+  const CnModal({
+    super.key,
+    this.title,
+    this.content,
+    this.actions,
+    this.fullWidth = false,
+    this.width,
+    this.maxHeight,
+    this.showCloseButton = true,
+    this.onClose,
+    this.icon,
+    this.iconColor,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Dialog(
+      backgroundColor: Colors.transparent,
+      child: Container(
+        width: fullWidth ? double.infinity : (width ?? 400),
+        constraints: BoxConstraints(
+          maxWidth: fullWidth ? double.infinity : 500,
+          maxHeight: maxHeight ?? 600,
+        ),
+        decoration: BoxDecoration(
+          color: CronixColors.surface,
+          borderRadius: CronixRadius.radiusLG,
+          border: Border.all(color: CronixColors.border),
+        ),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            if (title != null || showCloseButton || icon != null)
+              Container(
+                padding: const EdgeInsets.all(16),
+                decoration: const BoxDecoration(
+                  border: Border(
+                    bottom: BorderSide(color: CronixColors.border),
+                  ),
+                ),
+                child: Row(
+                  children: [
+                    if (icon != null) ...[
+                      Icon(icon, color: iconColor ?? CronixColors.accent, size: 24),
+                      const SizedBox(width: 12),
+                    ],
+                    Expanded(
+                      child: Text(
+                        title ?? '',
+                        style: const TextStyle(
+                          color: CronixColors.text,
+                          fontSize: 18,
+                          fontWeight: FontWeight.w600,
+                        ),
+                      ),
+                    ),
+                    if (showCloseButton)
+                      GestureDetector(
+                        onTap: onClose ?? () => Navigator.of(context).pop(),
+                        child: const Icon(
+                          Icons.close,
+                          color: CronixColors.textSecondary,
+                          size: 20,
+                        ),
+                      ),
+                  ],
+                ),
+              ),
+            if (content != null)
+              Flexible(
+                child: SingleChildScrollView(
+                  padding: const EdgeInsets.all(16),
+                  child: content,
+                ),
+              ),
+            if (actions != null && actions!.isNotEmpty)
+              Container(
+                padding: const EdgeInsets.all(16),
+                decoration: const BoxDecoration(
+                  border: Border(
+                    top: BorderSide(color: CronixColors.border),
+                  ),
+                ),
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.end,
+                  children: [
+                    for (int i = 0; i < actions!.length; i++) ...[
+                      if (i > 0) const SizedBox(width: 8),
+                      actions![i],
+                    ],
+                  ],
+                ),
+              ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  static Future<T?> show<T>({
+    required BuildContext context,
+    String? title,
+    Widget? content,
+    List<Widget>? actions,
+    bool fullWidth = false,
+    bool barrierDismissible = true,
+    bool showCloseButton = true,
+  }) {
+    return showDialog<T>(
+      context: context,
+      barrierDismissible: barrierDismissible,
+      builder: (context) => CnModal(
+        title: title,
+        content: content,
+        actions: actions,
+        fullWidth: fullWidth,
+        showCloseButton: showCloseButton,
+      ),
+    );
+  }
+}
+
+class CnConfirmModal extends StatelessWidget {
+  final String title;
+  final String message;
+  final String confirmText;
+  final String cancelText;
+  final Color? confirmColor;
+  final VoidCallback? onConfirm;
+  final VoidCallback? onCancel;
+  final IconData? icon;
+  final Color? iconColor;
+
+  const CnConfirmModal({
+    super.key,
+    required this.title,
+    required this.message,
+    this.confirmText = 'Confirm',
+    this.cancelText = 'Cancel',
+    this.confirmColor,
+    this.onConfirm,
+    this.onCancel,
+    this.icon,
+    this.iconColor,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return CnModal(
+      title: title,
+      icon: icon ?? Icons.help_outline,
+      iconColor: iconColor,
+      content: Text(
+        message,
+        style: const TextStyle(color: CronixColors.text),
+      ),
+      actions: [
+        TextButton(
+          onPressed: onCancel ?? () => Navigator.of(context).pop(false),
+          child: Text(cancelText, style: const TextStyle(color: CronixColors.textSecondary)),
+        ),
+        ElevatedButton(
+          onPressed: onConfirm ?? () => Navigator.of(context).pop(true),
+          style: ElevatedButton.styleFrom(
+            backgroundColor: confirmColor ?? CronixColors.accent,
+          ),
+          child: Text(confirmText, style: const TextStyle(color: CronixColors.text)),
+        ),
+      ],
+    );
+  }
+
+  static Future<bool?> show({
+    required BuildContext context,
+    required String title,
+    required String message,
+    String confirmText = 'Confirm',
+    String cancelText = 'Cancel',
+    Color? confirmColor,
+    IconData? icon,
+    Color? iconColor,
+  }) {
+    return showDialog<bool>(
+      context: context,
+      builder: (context) => CnConfirmModal(
+        title: title,
+        message: message,
+        confirmText: confirmText,
+        cancelText: cancelText,
+        confirmColor: confirmColor,
+        icon: icon,
+        iconColor: iconColor,
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,157 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+class CnNavItem {
+  final String label;
+  final IconData icon;
+  final IconData? activeIcon;
+  final VoidCallback? onTap;
+  final bool isActive;
+
+  const CnNavItem({
+    required this.label,
+    required this.icon,
+    this.activeIcon,
+    this.onTap,
+    this.isActive = false,
+  });
+}
+
+class CnNav extends StatelessWidget {
+  final List<CnNavItem> items;
+  final int? selectedIndex;
+  final ValueChanged<int>? onIndexChanged;
+  final Color? backgroundColor;
+  final bool showLabels;
+  final double height;
+
+  const CnNav({
+    super.key,
+    required this.items,
+    this.selectedIndex,
+    this.onIndexChanged,
+    this.backgroundColor,
+    this.showLabels = true,
+    this.height = 56,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: height,
+      color: backgroundColor ?? CronixColors.surface,
+      child: Row(
+        children: items.asMap().entries.map((entry) {
+          final index = entry.key;
+          final item = entry.value;
+          final isSelected = selectedIndex == index || item.isActive;
+
+          return Expanded(
+            child: InkWell(
+              onTap: item.onTap ?? (onIndexChanged != null ? () => onIndexChanged!(index) : null),
+              child: Container(
+                padding: const EdgeInsets.symmetric(vertical: 8),
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    Icon(
+                      isSelected && item.activeIcon != null
+                          ? item.activeIcon!
+                          : item.icon,
+                      size: 24,
+                      color: isSelected ? CronixColors.accent : CronixColors.textSecondary,
+                    ),
+                    if (showLabels) ...[
+                      const SizedBox(height: 4),
+                      Text(
+                        item.label,
+                        style: TextStyle(
+                          color: isSelected ? CronixColors.accent : CronixColors.textSecondary,
+                          fontSize: 12,
+                          fontWeight: isSelected ? FontWeight.w500 : FontWeight.w400,
+                        ),
+                      ),
+                    ],
+                  ],
+                ),
+              ),
+            ),
+          );
+        }).toList(),
+      ),
+    );
+  }
+}
+
+class CnNavRail extends StatelessWidget {
+  final List<CnNavItem> items;
+  final int? selectedIndex;
+  final ValueChanged<int>? onIndexChanged;
+  final Color? backgroundColor;
+  final bool showLabels;
+  final double width;
+
+  const CnNavRail({
+    super.key,
+    required this.items,
+    this.selectedIndex,
+    this.onIndexChanged,
+    this.backgroundColor,
+    this.showLabels = true,
+    this.width = 72,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: width,
+      color: backgroundColor ?? CronixColors.surface,
+      child: Column(
+        children: items.asMap().entries.map((entry) {
+          final index = entry.key;
+          final item = entry.value;
+          final isSelected = selectedIndex == index || item.isActive;
+
+          return InkWell(
+            onTap: item.onTap ?? (onIndexChanged != null ? () => onIndexChanged!(index) : null),
+            child: Container(
+              padding: const EdgeInsets.symmetric(vertical: 12),
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Container(
+                    width: 48,
+                    height: 32,
+                    decoration: BoxDecoration(
+                      color: isSelected ? CronixColors.accent.withOpacity(0.2) : null,
+                      borderRadius: CronixRadius.radiusMD,
+                    ),
+                    child: Icon(
+                      isSelected && item.activeIcon != null
+                          ? item.activeIcon!
+                          : item.icon,
+                      size: 22,
+                      color: isSelected ? CronixColors.accent : CronixColors.textSecondary,
+                    ),
+                  ),
+                  if (showLabels) ...[
+                    const SizedBox(height: 4),
+                    Text(
+                      item.label,
+                      style: TextStyle(
+                        color: isSelected ? CronixColors.accent : CronixColors.textSecondary,
+                        fontSize: 11,
+                        fontWeight: isSelected ? FontWeight.w500 : FontWeight.w400,
+                      ),
+                    ),
+                  ],
+                ],
+              ),
+            ),
+          );
+        }).toList(),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,193 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+class CnPagination extends StatelessWidget {
+  final int currentPage;
+  final int totalPages;
+  final ValueChanged<int>? onPageChanged;
+  final bool showPageNumbers;
+  final int maxVisiblePages;
+  final String? previousLabel;
+  final String? nextLabel;
+
+  const CnPagination({
+    super.key,
+    required this.currentPage,
+    required this.totalPages,
+    this.onPageChanged,
+    this.showPageNumbers = true,
+    this.maxVisiblePages = 5,
+    this.previousLabel,
+    this.nextLabel,
+  });
+
+  List<int> get _visiblePages {
+    if (totalPages <= maxVisiblePages) {
+      return List.generate(totalPages, (i) => i + 1);
+    }
+
+    int start = currentPage - (maxVisiblePages ~/ 2);
+    int end = currentPage + (maxVisiblePages ~/ 2);
+
+    if (start < 1) {
+      end += (1 - start);
+      start = 1;
+    }
+    if (end > totalPages) {
+      start -= (end - totalPages);
+      end = totalPages;
+    }
+
+    return List.generate(end - start + 1, (i) => start + i);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        _PageButton(
+          icon: Icons.chevron_left,
+          label: previousLabel,
+          enabled: currentPage > 1,
+          onPressed: () => onPageChanged?.call(currentPage - 1),
+        ),
+        if (showPageNumbers) ...[
+          if (_visiblePages.first > 1) ...[
+            _PageNumber(
+              page: 1,
+              isSelected: currentPage == 1,
+              onPressed: () => onPageChanged?.call(1),
+            ),
+            if (_visiblePages.first > 2)
+              const Padding(
+                padding: EdgeInsets.symmetric(horizontal: 4),
+                child: Text('...', style: TextStyle(color: CronixColors.textMuted)),
+              ),
+          ],
+          ..._visiblePages.map((page) => Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 2),
+            child: _PageNumber(
+              page: page,
+              isSelected: currentPage == page,
+              onPressed: () => onPageChanged?.call(page),
+            ),
+          )),
+          if (_visiblePages.last < totalPages) ...[
+            if (_visiblePages.last < totalPages - 1)
+              const Padding(
+                padding: EdgeInsets.symmetric(horizontal: 4),
+                child: Text('...', style: TextStyle(color: CronixColors.textMuted)),
+              ),
+            _PageNumber(
+              page: totalPages,
+              isSelected: currentPage == totalPages,
+              onPressed: () => onPageChanged?.call(totalPages),
+            ),
+          ],
+        ],
+        _PageButton(
+          icon: Icons.chevron_right,
+          label: nextLabel,
+          enabled: currentPage < totalPages,
+          onPressed: () => onPageChanged?.call(currentPage + 1),
+        ),
+      ],
+    );
+  }
+}
+
+class _PageButton extends StatelessWidget {
+  final IconData icon;
+  final String? label;
+  final bool enabled;
+  final VoidCallback? onPressed;
+
+  const _PageButton({
+    required this.icon,
+    this.label,
+    required this.enabled,
+    this.onPressed,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      color: Colors.transparent,
+      child: InkWell(
+        onTap: enabled ? onPressed : null,
+        borderRadius: CronixRadius.radiusSM,
+        child: Container(
+          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+          decoration: BoxDecoration(
+            color: CronixColors.surface,
+            borderRadius: CronixRadius.radiusSM,
+            border: Border.all(color: CronixColors.border),
+          ),
+          child: Row(
+            children: [
+              Icon(
+                icon,
+                size: 16,
+                color: enabled ? CronixColors.text : CronixColors.textMuted,
+              ),
+              if (label != null) ...[
+                const SizedBox(width: 4),
+                Text(
+                  label!,
+                  style: TextStyle(
+                    color: enabled ? CronixColors.text : CronixColors.textMuted,
+                    fontSize: 13,
+                  ),
+                ),
+              ],
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _PageNumber extends StatelessWidget {
+  final int page;
+  final bool isSelected;
+  final VoidCallback? onPressed;
+
+  const _PageNumber({
+    required this.page,
+    required this.isSelected,
+    this.onPressed,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      color: Colors.transparent,
+      child: InkWell(
+        onTap: onPressed,
+        borderRadius: CronixRadius.radiusSM,
+        child: Container(
+          width: 36,
+          height: 36,
+          decoration: BoxDecoration(
+            color: isSelected ? CronixColors.accent : CronixColors.surface,
+            borderRadius: CronixRadius.radiusSM,
+            border: isSelected ? null : Border.all(color: CronixColors.border),
+          ),
+          child: Center(
+            child: Text(
+              page.toString(),
+              style: TextStyle(
+                color: isSelected ? CronixColors.text : CronixColors.text,
+                fontSize: 13,
+                fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400,
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,146 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+class CnProgress extends StatelessWidget {
+  final double value;
+  final double max;
+  final double height;
+  final Color? backgroundColor;
+  final Color? valueColor;
+  final bool showLabel;
+  final String? label;
+
+  const CnProgress({
+    super.key,
+    required this.value,
+    this.max = 100,
+    this.height = 8,
+    this.backgroundColor,
+    this.valueColor,
+    this.showLabel = false,
+    this.label,
+  });
+
+  double get _percentage => (value / max).clamp(0.0, 1.0);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        if (showLabel || label != null) ...[
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Text(
+                label ?? 'Progress',
+                style: const TextStyle(
+                  color: CronixColors.text,
+                  fontSize: 12,
+                ),
+              ),
+              Text(
+                '${(_percentage * 100).toStringAsFixed(0)}%',
+                style: const TextStyle(
+                  color: CronixColors.textSecondary,
+                  fontSize: 12,
+                ),
+              ),
+            ],
+          ),
+          const SizedBox(height: 8),
+        ],
+        Container(
+          height: height,
+          decoration: BoxDecoration(
+            color: backgroundColor ?? CronixColors.border,
+            borderRadius: CronixRadius.radiusFull,
+          ),
+          child: FractionallySizedBox(
+            alignment: Alignment.centerLeft,
+            widthFactor: _percentage,
+            child: Container(
+              decoration: BoxDecoration(
+                color: valueColor ?? CronixColors.accent,
+                borderRadius: CronixRadius.radiusFull,
+              ),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class CnProgressIndeterminate extends StatefulWidget {
+  final double height;
+  final Color? backgroundColor;
+  final Color? valueColor;
+
+  const CnProgressIndeterminate({
+    super.key,
+    this.height = 8,
+    this.backgroundColor,
+    this.valueColor,
+  });
+
+  @override
+  State<CnProgressIndeterminate> createState() => _CnProgressIndeterminateState();
+}
+
+class _CnProgressIndeterminateState extends State<CnProgressIndeterminate>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 1500),
+    )..repeat();
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedBuilder(
+      animation: _controller,
+      builder: (context, child) {
+        return Container(
+          height: widget.height,
+          decoration: BoxDecoration(
+            color: widget.backgroundColor ?? CronixColors.border,
+            borderRadius: CronixRadius.radiusFull,
+          ),
+          child: LayoutBuilder(
+            builder: (context, constraints) {
+              return Stack(
+                children: [
+                  Positioned(
+                    left: constraints.maxWidth * _controller.value * 0.8,
+                    child: Container(
+                      width: constraints.maxWidth * 0.3,
+                      height: widget.height,
+                      decoration: BoxDecoration(
+                        color: widget.valueColor ?? CronixColors.accent,
+                        borderRadius: CronixRadius.radiusFull,
+                      ),
+                    ),
+                  ),
+                ],
+              );
+            },
+          ),
+        );
+      },
+    );
+  }
+}