cronixui 1.1.0 → 1.1.1

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

@@ -0,0 +1,207 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+class CnSidebarItem {
+  final String label;
+  final IconData icon;
+  final IconData? activeIcon;
+  final VoidCallback? onTap;
+  final bool isActive;
+  final List<CnSidebarItem>? children;
+
+  const CnSidebarItem({
+    required this.label,
+    required this.icon,
+    this.activeIcon,
+    this.onTap,
+    this.isActive = false,
+    this.children,
+  });
+}
+
+class CnSidebar extends StatefulWidget {
+  final List<CnSidebarItem> items;
+  final Widget? header;
+  final Widget? footer;
+  final double width;
+  final Color? backgroundColor;
+  final bool collapsible;
+  final VoidCallback? onCollapseToggle;
+  final bool isCollapsed;
+
+  const CnSidebar({
+    super.key,
+    required this.items,
+    this.header,
+    this.footer,
+    this.width = 240,
+    this.backgroundColor,
+    this.collapsible = false,
+    this.onCollapseToggle,
+    this.isCollapsed = false,
+  });
+
+  @override
+  State<CnSidebar> createState() => _CnSidebarState();
+}
+
+class _CnSidebarState extends State<CnSidebar> {
+  late bool _isCollapsed;
+  final Map<int, bool> _expandedItems = {};
+
+  @override
+  void initState() {
+    super.initState();
+    _isCollapsed = widget.isCollapsed;
+  }
+
+  void _toggleCollapse() {
+    setState(() => _isCollapsed = !_isCollapsed);
+    widget.onCollapseToggle?.call();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedContainer(
+      duration: const Duration(milliseconds: 200),
+      width: _isCollapsed ? 64 : widget.width,
+      decoration: BoxDecoration(
+        color: widget.backgroundColor ?? CronixColors.surface,
+        border: const Border(
+          right: BorderSide(color: CronixColors.border),
+        ),
+      ),
+      child: Column(
+        children: [
+          if (widget.header != null)
+            Container(
+              padding: const EdgeInsets.all(16),
+              decoration: const BoxDecoration(
+                border: Border(
+                  bottom: BorderSide(color: CronixColors.border),
+                ),
+              ),
+              child: _isCollapsed ? null : widget.header,
+            ),
+          if (widget.collapsible)
+            IconButton(
+              icon: Icon(
+                _isCollapsed ? Icons.chevron_right : Icons.chevron_left,
+                color: CronixColors.textSecondary,
+              ),
+              onPressed: _toggleCollapse,
+            ),
+          Expanded(
+            child: SingleChildScrollView(
+              child: Column(
+                children: widget.items.asMap().entries.map((entry) {
+                  final index = entry.key;
+                  final item = entry.value;
+                  return _buildItem(item, index);
+                }).toList(),
+              ),
+            ),
+          ),
+          if (widget.footer != null)
+            Container(
+              padding: const EdgeInsets.all(16),
+              decoration: const BoxDecoration(
+                border: Border(
+                  top: BorderSide(color: CronixColors.border),
+                ),
+              ),
+              child: _isCollapsed ? null : widget.footer,
+            ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildItem(CnSidebarItem item, int index) {
+    final hasChildren = item.children != null && item.children!.isNotEmpty;
+    final isExpanded = _expandedItems[index] ?? false;
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        InkWell(
+          onTap: hasChildren
+              ? () => setState(() => _expandedItems[index] = !isExpanded)
+              : item.onTap,
+          child: Container(
+            padding: EdgeInsets.symmetric(
+              horizontal: _isCollapsed ? 20 : 16,
+              vertical: 12,
+            ),
+            decoration: BoxDecoration(
+              color: item.isActive
+                  ? CronixColors.accent.withOpacity(0.15)
+                  : null,
+              border: item.isActive
+                  ? const Border(
+                      left: BorderSide(color: CronixColors.accent, width: 3),
+                    )
+                  : null,
+            ),
+            child: Row(
+              children: [
+                Icon(
+                  item.isActive && item.activeIcon != null
+                      ? item.activeIcon!
+                      : item.icon,
+                  size: 20,
+                  color: item.isActive ? CronixColors.accent : CronixColors.textSecondary,
+                ),
+                if (!_isCollapsed) ...[
+                  const SizedBox(width: 12),
+                  Expanded(
+                    child: Text(
+                      item.label,
+                      style: TextStyle(
+                        color: item.isActive ? CronixColors.accent : CronixColors.text,
+                        fontWeight: item.isActive ? FontWeight.w500 : FontWeight.w400,
+                      ),
+                    ),
+                  ),
+                  if (hasChildren)
+                    Icon(
+                      isExpanded ? Icons.expand_less : Icons.expand_more,
+                      size: 18,
+                      color: CronixColors.textSecondary,
+                    ),
+                ],
+              ],
+            ),
+          ),
+        ),
+        if (hasChildren && !_isCollapsed && isExpanded)
+          ...item.children!.map((child) => Container(
+                margin: const EdgeInsets.only(left: 32),
+                child: _buildChildItem(child),
+              )),
+      ],
+    );
+  }
+
+  Widget _buildChildItem(CnSidebarItem item) {
+    return InkWell(
+      onTap: item.onTap,
+      child: Container(
+        padding: const EdgeInsets.symmetric(vertical: 10),
+        decoration: BoxDecoration(
+          color: item.isActive
+              ? CronixColors.accent.withOpacity(0.1)
+              : null,
+        ),
+        child: Text(
+          item.label,
+          style: TextStyle(
+            color: item.isActive ? CronixColors.accent : CronixColors.textSecondary,
+            fontSize: 13,
+          ),
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,136 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+enum CnSkeletonVariant { text, circular, rectangular }
+
+class CnSkeleton extends StatefulWidget {
+  final double? width;
+  final double? height;
+  final CnSkeletonVariant variant;
+  final BorderRadius? borderRadius;
+
+  const CnSkeleton({
+    super.key,
+    this.width,
+    this.height,
+    this.variant = CnSkeletonVariant.rectangular,
+    this.borderRadius,
+  });
+
+  const CnSkeleton.text({
+    super.key,
+    this.width,
+    this.height = 14,
+    this.borderRadius,
+  }) : variant = CnSkeletonVariant.text;
+
+  const CnSkeleton.circular({
+    super.key,
+    double? size,
+  })  : width = size,
+        height = size,
+        variant = CnSkeletonVariant.circular,
+        borderRadius = null;
+
+  @override
+  State<CnSkeleton> createState() => _CnSkeletonState();
+}
+
+class _CnSkeletonState extends State<CnSkeleton>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+  late Animation<double> _animation;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 1500),
+    )..repeat();
+    _animation = Tween<double>(begin: -1, end: 2).animate(
+      CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
+    );
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedBuilder(
+      animation: _animation,
+      builder: (context, child) {
+        return Container(
+          width: widget.width,
+          height: widget.height,
+          decoration: BoxDecoration(
+            color: CronixColors.shimmerBase,
+            borderRadius: _getBorderRadius(),
+          ),
+          child: ClipRRect(
+            borderRadius: _getBorderRadius(),
+            child: LinearGradient(
+              begin: Alignment.topLeft,
+              end: Alignment.bottomRight,
+              colors: const [
+                CronixColors.shimmerBase,
+                CronixColors.shimmerHighlight,
+                CronixColors.shimmerBase,
+              ],
+              stops: [
+                _animation.value - 0.3,
+                _animation.value,
+                _animation.value + 0.3,
+              ].map((e) => e.clamp(0.0, 1.0)).toList(),
+            ).createShader(
+              Rect.fromLTWH(0, 0, widget.width ?? 100, widget.height ?? 14),
+            ),
+          ),
+        );
+      },
+    );
+  }
+
+  BorderRadius _getBorderRadius() {
+    if (widget.borderRadius != null) return widget.borderRadius!;
+    switch (widget.variant) {
+      case CnSkeletonVariant.text:
+        return CronixRadius.radiusSM;
+      case CnSkeletonVariant.circular:
+        return BorderRadius.circular((widget.width ?? 40) / 2);
+      case CnSkeletonVariant.rectangular:
+        return CronixRadius.radiusMD;
+    }
+  }
+}
+
+class CnSkeletonList extends StatelessWidget {
+  final int itemCount;
+  final double itemHeight;
+  final double spacing;
+
+  const CnSkeletonList({
+    super.key,
+    this.itemCount = 5,
+    this.itemHeight = 60,
+    this.spacing = 8,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: List.generate(
+        itemCount,
+        (index) => Padding(
+          padding: EdgeInsets.only(bottom: index < itemCount - 1 ? spacing : 0),
+          child: const CnSkeleton(height: 60),
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,141 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+class CnSlider extends StatefulWidget {
+  final double min;
+  final double max;
+  final double value;
+  final ValueChanged<double>? onChanged;
+  final int divisions;
+  final String? label;
+  final bool enabled;
+  final String Function(double)? valueFormatter;
+
+  const CnSlider({
+    super.key,
+    this.min = 0,
+    this.max = 100,
+    required this.value,
+    this.onChanged,
+    this.divisions = 100,
+    this.label,
+    this.enabled = true,
+    this.valueFormatter,
+  });
+
+  @override
+  State<CnSlider> createState() => _CnSliderState();
+}
+
+class _CnSliderState extends State<CnSlider> {
+  late double _value;
+
+  @override
+  void initState() {
+    super.initState();
+    _value = widget.value;
+  }
+
+  @override
+  void didUpdateWidget(CnSlider oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.value != widget.value) {
+      _value = widget.value;
+    }
+  }
+
+  String _formatValue(double value) {
+    if (widget.valueFormatter != null) {
+      return widget.valueFormatter!(value);
+    }
+    return value.toStringAsFixed(0);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final percent = (_value - widget.min) / (widget.max - widget.min);
+    
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        if (widget.label != null) ...[
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Text(
+                widget.label!,
+                style: const TextStyle(
+                  color: CronixColors.text,
+                  fontSize: 14,
+                  fontWeight: FontWeight.w500,
+                ),
+              ),
+              Text(
+                _formatValue(_value),
+                style: const TextStyle(
+                  color: CronixColors.accent,
+                  fontSize: 14,
+                  fontWeight: FontWeight.w600,
+                ),
+              ),
+            ],
+          ),
+          const SizedBox(height: 12),
+        ],
+        Stack(
+          clipBehavior: Clip.none,
+          children: [
+            Container(
+              height: 4,
+              decoration: BoxDecoration(
+                color: CronixColors.border,
+                borderRadius: CronixRadius.radiusFull,
+              ),
+            ),
+            FractionallySizedBox(
+              widthFactor: percent,
+              child: Container(
+                height: 4,
+                decoration: BoxDecoration(
+                  color: widget.enabled ? CronixColors.accent : CronixColors.textMuted,
+                  borderRadius: CronixRadius.radiusFull,
+                ),
+              ),
+            ),
+            Positioned(
+              left: MediaQuery.of(context).size.width > 0
+                  ? 0
+                  : 0,
+              child: LayoutBuilder(
+                builder: (context, constraints) {
+                  return GestureDetector(
+                    behavior: HitTestBehavior.opaque,
+                    onHorizontalDragUpdate: widget.enabled
+                        ? (details) {
+                            final box = context.findRenderObject() as RenderBox;
+                            final localPosition = box.globalToLocal(details.globalPosition);
+                            final sliderWidth = box.size.width;
+                            final newValue = widget.min + 
+                                (localPosition.dx / sliderWidth) * (widget.max - widget.min);
+                            final clampedValue = newValue.clamp(widget.min, widget.max);
+                            setState(() => _value = clampedValue);
+                            widget.onChanged?.call(clampedValue);
+                          }
+                        : null,
+                    child: Container(
+                      width: double.infinity,
+                      height: 24,
+                      color: Colors.transparent,
+                    ),
+                  );
+                },
+              ),
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+}

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

@@ -0,0 +1,85 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+enum CnSpinnerSize { sm, md, lg }
+
+class CnSpinner extends StatelessWidget {
+  final CnSpinnerSize size;
+  final Color? color;
+  final double? strokeWidth;
+
+  const CnSpinner({
+    super.key,
+    this.size = CnSpinnerSize.md,
+    this.color,
+    this.strokeWidth,
+  });
+
+  double get _size {
+    switch (size) {
+      case CnSpinnerSize.sm:
+        return 16;
+      case CnSpinnerSize.md:
+        return 24;
+      case CnSpinnerSize.lg:
+        return 40;
+    }
+  }
+
+  double get _strokeWidth {
+    return strokeWidth ?? _size / 8;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: _size,
+      height: _size,
+      child: CircularProgressIndicator(
+        strokeWidth: _strokeWidth,
+        valueColor: AlwaysStoppedAnimation<Color>(
+          color ?? CronixColors.accent,
+        ),
+      ),
+    );
+  }
+}
+
+class CnSpinnerOverlay extends StatelessWidget {
+  final String? message;
+  final bool visible;
+
+  const CnSpinnerOverlay({
+    super.key,
+    this.message,
+    this.visible = true,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    if (!visible) return const SizedBox.shrink();
+    
+    return Container(
+      color: Colors.black54,
+      child: Center(
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            const CnSpinner(size: CnSpinnerSize.lg),
+            if (message != null) ...[
+              const SizedBox(height: 16),
+              Text(
+                message!,
+                style: const TextStyle(
+                  color: CronixColors.text,
+                  fontSize: 14,
+                ),
+              ),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,135 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+class CnStat extends StatelessWidget {
+  final String label;
+  final String value;
+  final String? change;
+  final bool changePositive;
+  final IconData? icon;
+  final Color? accentColor;
+  final Widget? trailing;
+
+  const CnStat({
+    super.key,
+    required this.label,
+    required this.value,
+    this.change,
+    this.changePositive = true,
+    this.icon,
+    this.accentColor,
+    this.trailing,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(16),
+      decoration: BoxDecoration(
+        color: CronixColors.surface,
+        borderRadius: CronixRadius.radiusMD,
+        border: Border.all(color: CronixColors.border),
+      ),
+      child: Row(
+        children: [
+          if (icon != null) ...[
+            Container(
+              padding: const EdgeInsets.all(12),
+              decoration: BoxDecoration(
+                color: (accentColor ?? CronixColors.accent).withOpacity(0.15),
+                borderRadius: CronixRadius.radiusMD,
+              ),
+              child: Icon(
+                icon,
+                size: 24,
+                color: accentColor ?? CronixColors.accent,
+              ),
+            ),
+            const SizedBox(width: 16),
+          ],
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  label,
+                  style: const TextStyle(
+                    color: CronixColors.textSecondary,
+                    fontSize: 13,
+                  ),
+                ),
+                const SizedBox(height: 4),
+                Text(
+                  value,
+                  style: const TextStyle(
+                    color: CronixColors.text,
+                    fontSize: 28,
+                    fontWeight: FontWeight.w600,
+                  ),
+                ),
+                if (change != null) ...[
+                  const SizedBox(height: 4),
+                  Row(
+                    children: [
+                      Icon(
+                        changePositive
+                            ? Icons.arrow_upward
+                            : Icons.arrow_downward,
+                        size: 14,
+                        color: changePositive
+                            ? CronixColors.success
+                            : CronixColors.error,
+                      ),
+                      const SizedBox(width: 4),
+                      Text(
+                        change!,
+                        style: TextStyle(
+                          color: changePositive
+                              ? CronixColors.success
+                              : CronixColors.error,
+                          fontSize: 12,
+                          fontWeight: FontWeight.w500,
+                        ),
+                      ),
+                    ],
+                  ),
+                ],
+              ],
+            ),
+          ),
+          if (trailing != null) trailing!,
+        ],
+      ),
+    );
+  }
+}
+
+class CnStatGrid extends StatelessWidget {
+  final List<CnStat> stats;
+  final int crossAxisCount;
+  final double spacing;
+
+  const CnStatGrid({
+    super.key,
+    required this.stats,
+    this.crossAxisCount = 4,
+    this.spacing = 16,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return GridView.builder(
+      shrinkWrap: true,
+      physics: const NeverScrollableScrollPhysics(),
+      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: crossAxisCount,
+        crossAxisSpacing: spacing,
+        mainAxisSpacing: spacing,
+        childAspectRatio: 1.5,
+      ),
+      itemCount: stats.length,
+      itemBuilder: (context, index) => stats[index],
+    );
+  }
+}