cronixui 1.1.0 → 1.1.2

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

@@ -0,0 +1,299 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+class CnCommandItem {
+  final String label;
+  final String? shortcut;
+  final IconData? icon;
+  final VoidCallback? onTap;
+  final String? category;
+
+  const CnCommandItem({
+    required this.label,
+    this.shortcut,
+    this.icon,
+    this.onTap,
+    this.category,
+  });
+}
+
+class CnCommandPalette extends StatefulWidget {
+  final List<CnCommandItem> commands;
+  final String? placeholder;
+  final VoidCallback? onClose;
+
+  const CnCommandPalette({
+    super.key,
+    required this.commands,
+    this.placeholder,
+    this.onClose,
+  });
+
+  static Future<void> show({
+    required BuildContext context,
+    required List<CnCommandItem> commands,
+    String? placeholder,
+  }) {
+    return showDialog(
+      context: context,
+      barrierColor: Colors.black87,
+      builder: (context) => CnCommandPalette(
+        commands: commands,
+        placeholder: placeholder,
+      ),
+    );
+  }
+
+  @override
+  State<CnCommandPalette> createState() => _CnCommandPaletteState();
+}
+
+class _CnCommandPaletteState extends State<CnCommandPalette> {
+  final TextEditingController _searchController = TextEditingController();
+  final FocusNode _focusNode = FocusNode();
+  String _query = '';
+  int _selectedIndex = 0;
+
+  List<CnCommandItem> get _filteredCommands {
+    if (_query.isEmpty) return widget.commands;
+    return widget.commands
+        .where((cmd) => cmd.label.toLowerCase().contains(_query.toLowerCase()))
+        .toList();
+  }
+
+  Map<String, List<CnCommandItem>> get _groupedCommands {
+    final groups = <String, List<CnCommandItem>>{};
+    for (final cmd in _filteredCommands) {
+      final category = cmd.category ?? 'General';
+      groups.putIfAbsent(category, () => []).add(cmd);
+    }
+    return groups;
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      _focusNode.requestFocus();
+    });
+  }
+
+  @override
+  void dispose() {
+    _searchController.dispose();
+    _focusNode.dispose();
+    super.dispose();
+  }
+
+  void _handleKeyEvent(KeyEvent event) {
+    if (event is KeyDownEvent || event is RawKeyDownEvent) {
+      final rawEvent = event as RawKeyEvent;
+      if (rawEvent.logicalKey == LogicalKeyboardKey.arrowDown) {
+        setState(() {
+          _selectedIndex = (_selectedIndex + 1).clamp(0, _filteredCommands.length - 1);
+        });
+      } else if (rawEvent.logicalKey == LogicalKeyboardKey.arrowUp) {
+        setState(() {
+          _selectedIndex = (_selectedIndex - 1).clamp(0, _filteredCommands.length - 1);
+        });
+      } else if (rawEvent.logicalKey == LogicalKeyboardKey.enter) {
+        if (_filteredCommands.isNotEmpty && _selectedIndex < _filteredCommands.length) {
+          _filteredCommands[_selectedIndex].onTap?.call();
+          Navigator.of(context).pop();
+        }
+      } else if (rawEvent.logicalKey == LogicalKeyboardKey.escape) {
+        Navigator.of(context).pop();
+      }
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return RawKeyboardListener(
+      focusNode: FocusNode(),
+      onKey: _handleKeyEvent,
+      child: Dialog(
+        backgroundColor: Colors.transparent,
+        child: Container(
+          width: 560,
+          constraints: const BoxConstraints(maxHeight: 400),
+          decoration: BoxDecoration(
+            color: CronixColors.surface,
+            borderRadius: CronixRadius.radiusLG,
+            border: Border.all(color: CronixColors.border),
+          ),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Padding(
+                padding: const EdgeInsets.all(16),
+                child: TextField(
+                  controller: _searchController,
+                  focusNode: _focusNode,
+                  onChanged: (value) => setState(() => _query = value),
+                  style: const TextStyle(color: CronixColors.text, fontSize: 16),
+                  decoration: InputDecoration(
+                    hintText: widget.placeholder ?? 'Type a command or search...',
+                    hintStyle: const TextStyle(color: CronixColors.textMuted),
+                    filled: true,
+                    fillColor: CronixColors.background,
+                    contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
+                    border: OutlineInputBorder(
+                      borderRadius: CronixRadius.radiusMD,
+                      borderSide: BorderSide.none,
+                    ),
+                    prefixIcon: const Icon(Icons.search, color: CronixColors.textSecondary),
+                  ),
+                ),
+              ),
+              Flexible(
+                child: ListView.builder(
+                  shrinkWrap: true,
+                  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+                  itemCount: _groupedCommands.length,
+                  itemBuilder: (context, groupIndex) {
+                    final entry = _groupedCommands.entries.elementAt(groupIndex);
+                    return Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Padding(
+                          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+                          child: Text(
+                            entry.key,
+                            style: const TextStyle(
+                              color: CronixColors.textMuted,
+                              fontSize: 11,
+                              fontWeight: FontWeight.w600,
+                              letterSpacing: 0.5,
+                            ),
+                          ),
+                        ),
+                        ...entry.value.asMap().entries.map((itemEntry) {
+                          final index = _filteredCommands.indexOf(itemEntry.value);
+                          final isSelected = index == _selectedIndex;
+                          return _CommandItemWidget(
+                            item: itemEntry.value,
+                            isSelected: isSelected,
+                            onTap: () {
+                              itemEntry.value.onTap?.call();
+                              Navigator.of(context).pop();
+                            },
+                          );
+                        }),
+                      ],
+                    );
+                  },
+                ),
+              ),
+              Container(
+                padding: const EdgeInsets.all(12),
+                decoration: const BoxDecoration(
+                  border: Border(
+                    top: BorderSide(color: CronixColors.border),
+                  ),
+                ),
+                child: Row(
+                  children: [
+                    _KeyboardHint(icon: Icons.arrow_upward, label: 'Up'),
+                    _KeyboardHint(icon: Icons.arrow_downward, label: 'Down'),
+                    _KeyboardHint(icon: Icons.keyboard_return, label: 'Select'),
+                    _KeyboardHint(icon: Icons.close, label: 'Close'),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _CommandItemWidget extends StatelessWidget {
+  final CnCommandItem item;
+  final bool isSelected;
+  final VoidCallback onTap;
+
+  const _CommandItemWidget({
+    required this.item,
+    required this.isSelected,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: onTap,
+      child: Container(
+        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 10),
+        decoration: BoxDecoration(
+          color: isSelected ? CronixColors.accent.withOpacity(0.2) : null,
+          borderRadius: CronixRadius.radiusSM,
+        ),
+        child: Row(
+          children: [
+            if (item.icon != null) ...[
+              Icon(item.icon, size: 18, color: CronixColors.textSecondary),
+              const SizedBox(width: 12),
+            ],
+            Expanded(
+              child: Text(
+                item.label,
+                style: TextStyle(
+                  color: CronixColors.text,
+                  fontWeight: isSelected ? FontWeight.w500 : FontWeight.w400,
+                ),
+              ),
+            ),
+            if (item.shortcut != null)
+              Container(
+                padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
+                decoration: BoxDecoration(
+                  color: CronixColors.border,
+                  borderRadius: CronixRadius.radiusSM,
+                ),
+                child: Text(
+                  item.shortcut!,
+                  style: const TextStyle(
+                    color: CronixColors.textSecondary,
+                    fontSize: 11,
+                  ),
+                ),
+              ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class _KeyboardHint extends StatelessWidget {
+  final IconData icon;
+  final String label;
+
+  const _KeyboardHint({
+    required this.icon,
+    required this.label,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(right: 16),
+      child: Row(
+        children: [
+          Icon(icon, size: 14, color: CronixColors.textMuted),
+          const SizedBox(width: 4),
+          Text(
+            label,
+            style: const TextStyle(
+              color: CronixColors.textMuted,
+              fontSize: 12,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,131 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+class CnContainer extends StatelessWidget {
+  final Widget? child;
+  final double? maxWidth;
+  final double? minWidth;
+  final EdgeInsetsGeometry? padding;
+  final EdgeInsetsGeometry? margin;
+  final Color? backgroundColor;
+  final bool centered;
+  final double? width;
+  final double? height;
+
+  const CnContainer({
+    super.key,
+    this.child,
+    this.maxWidth,
+    this.minWidth,
+    this.padding,
+    this.margin,
+    this.backgroundColor,
+    this.centered = false,
+    this.width,
+    this.height,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    Widget content = Container(
+      width: width,
+      height: height,
+      constraints: BoxConstraints(
+        maxWidth: maxWidth ?? 1200,
+        minWidth: minWidth ?? 0,
+      ),
+      padding: padding,
+      decoration: backgroundColor != null
+          ? BoxDecoration(color: backgroundColor)
+          : null,
+      child: child,
+    );
+
+    if (centered) {
+      content = Center(child: content);
+    }
+
+    if (margin != null) {
+      content = Padding(padding: margin!, child: content);
+    }
+
+    return content;
+  }
+}
+
+class CnResponsiveContainer extends StatelessWidget {
+  final Widget child;
+  final double xsMaxWidth;
+  final double smMaxWidth;
+  final double mdMaxWidth;
+  final double lgMaxWidth;
+  final double xlMaxWidth;
+  final EdgeInsetsGeometry? padding;
+
+  const CnResponsiveContainer({
+    super.key,
+    required this.child,
+    this.xsMaxWidth = 640,
+    this.smMaxWidth = 768,
+    this.mdMaxWidth = 1024,
+    this.lgMaxWidth = 1280,
+    this.xlMaxWidth = 1536,
+    this.padding,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        double maxWidth;
+        if (constraints.maxWidth < 640) {
+          maxWidth = xsMaxWidth;
+        } else if (constraints.maxWidth < 768) {
+          maxWidth = smMaxWidth;
+        } else if (constraints.maxWidth < 1024) {
+          maxWidth = mdMaxWidth;
+        } else if (constraints.maxWidth < 1280) {
+          maxWidth = lgMaxWidth;
+        } else {
+          maxWidth = xlMaxWidth;
+        }
+
+        return Container(
+          width: double.infinity,
+          constraints: BoxConstraints(maxWidth: maxWidth),
+          padding: padding ?? EdgeInsets.symmetric(
+            horizontal: constraints.maxWidth < 640 ? 16 : 24,
+          ),
+          child: child,
+        );
+      },
+    );
+  }
+}
+
+class CnSection extends StatelessWidget {
+  final Widget? child;
+  final String? title;
+  final String? subtitle;
+  final EdgeInsetsGeometry? padding;
+  final double minHeight;
+
+  const CnSection({
+    super.key,
+    this.child,
+    this.title,
+    this.subtitle,
+    this.padding,
+    this.minHeight = 0,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      constraints: BoxConstraints(minHeight: minHeight),
+      padding: padding ?? const EdgeInsets.symmetric(vertical: 48),
+      child: child,
+    );
+  }
+}

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

@@ -0,0 +1,149 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+class CnDropdownItem {
+  final String label;
+  final IconData? icon;
+  final VoidCallback? onTap;
+  final bool enabled;
+  final bool danger;
+
+  const CnDropdownItem({
+    required this.label,
+    this.icon,
+    this.onTap,
+    this.enabled = true,
+    this.danger = false,
+  });
+}
+
+class CnDropdown extends StatefulWidget {
+  final Widget trigger;
+  final List<CnDropdownItem> items;
+  final double? width;
+  final Offset offset;
+  final bool closeOnSelect;
+
+  const CnDropdown({
+    super.key,
+    required this.trigger,
+    required this.items,
+    this.width,
+    this.offset = Offset.zero,
+    this.closeOnSelect = true,
+  });
+
+  @override
+  State<CnDropdown> createState() => _CnDropdownState();
+}
+
+class _CnDropdownState extends State<CnDropdown> {
+  final LayerLink _layerLink = LayerLink();
+  OverlayEntry? _overlayEntry;
+  bool _isOpen = false;
+
+  void _toggleDropdown() {
+    if (_isOpen) {
+      _closeDropdown();
+    } else {
+      _openDropdown();
+    }
+  }
+
+  void _openDropdown() {
+    _overlayEntry = _createOverlayEntry();
+    Overlay.of(context).insert(_overlayEntry!);
+    setState(() => _isOpen = true);
+  }
+
+  void _closeDropdown() {
+    _overlayEntry?.remove();
+    _overlayEntry = null;
+    setState(() => _isOpen = false);
+  }
+
+  void _onItemTap(CnDropdownItem item) {
+    if (!item.enabled) return;
+    item.onTap?.call();
+    if (widget.closeOnSelect) {
+      _closeDropdown();
+    }
+  }
+
+  OverlayEntry _createOverlayEntry() {
+    return OverlayEntry(
+      builder: (context) => Positioned(
+        width: widget.width,
+        child: CompositedTransformFollower(
+          link: _layerLink,
+          showWhenUnlinked: false,
+          offset: Offset(0, 40) + widget.offset,
+          child: Material(
+            color: Colors.transparent,
+            child: Container(
+              width: widget.width ?? 200,
+              constraints: const BoxConstraints(maxHeight: 300),
+              decoration: BoxDecoration(
+                color: CronixColors.surface,
+                borderRadius: CronixRadius.radiusMD,
+                border: Border.all(color: CronixColors.border),
+              ),
+              child: ClipRRect(
+                borderRadius: CronixRadius.radiusMD,
+                child: ListView.builder(
+                  shrinkWrap: true,
+                  padding: const EdgeInsets.symmetric(vertical: 4),
+                  itemCount: widget.items.length,
+                  itemBuilder: (context, index) {
+                    final item = widget.items[index];
+                    return InkWell(
+                      onTap: item.enabled ? () => _onItemTap(item) : null,
+                      child: Container(
+                        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
+                        child: Row(
+                          children: [
+                            if (item.icon != null) ...[
+                              Icon(
+                                item.icon,
+                                size: 18,
+                                color: item.danger
+                                    ? CronixColors.error
+                                    : CronixColors.textSecondary,
+                              ),
+                              const SizedBox(width: 8),
+                            ],
+                            Text(
+                              item.label,
+                              style: TextStyle(
+                                color: item.enabled
+                                    ? (item.danger ? CronixColors.error : CronixColors.text)
+                                    : CronixColors.textMuted,
+                                fontSize: 14,
+                              ),
+                            ),
+                          ],
+                        ),
+                      ),
+                    );
+                  },
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return CompositedTransformTarget(
+      link: _layerLink,
+      child: GestureDetector(
+        onTap: _toggleDropdown,
+        child: widget.trigger,
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,113 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+class CnFileInput extends StatelessWidget {
+  final String? label;
+  final String buttonText;
+  final IconData? icon;
+  final VoidCallback? onPick;
+  final String? fileName;
+  final bool enabled;
+  final bool loading;
+  final List<String>? allowedExtensions;
+
+  const CnFileInput({
+    super.key,
+    this.label,
+    this.buttonText = 'Choose File',
+    this.icon,
+    this.onPick,
+    this.fileName,
+    this.enabled = true,
+    this.loading = false,
+    this.allowedExtensions,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        if (label != null) ...[
+          Text(
+            label!,
+            style: const TextStyle(
+              color: CronixColors.text,
+              fontSize: 14,
+              fontWeight: FontWeight.w500,
+            ),
+          ),
+          const SizedBox(height: 8),
+        ],
+        Container(
+          padding: const EdgeInsets.all(16),
+          decoration: BoxDecoration(
+            color: CronixColors.surface,
+            borderRadius: CronixRadius.radiusMD,
+            border: Border.all(color: CronixColors.border),
+          ),
+          child: Column(
+            children: [
+              Icon(
+                icon ?? Icons.cloud_upload_outlined,
+                size: 40,
+                color: CronixColors.textSecondary,
+              ),
+              const SizedBox(height: 12),
+              if (loading)
+                const CircularProgressIndicator(
+                  strokeWidth: 2,
+                  valueColor: AlwaysStoppedAnimation(CronixColors.accent),
+                )
+              else
+                ElevatedButton(
+                  onPressed: enabled ? onPick : null,
+                  style: ElevatedButton.styleFrom(
+                    backgroundColor: CronixColors.accent,
+                    foregroundColor: CronixColors.text,
+                    shape: RoundedRectangleBorder(
+                      borderRadius: CronixRadius.radiusMD,
+                    ),
+                  ),
+                  child: Text(buttonText),
+                ),
+              if (fileName != null) ...[
+                const SizedBox(height: 8),
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    const Icon(
+                      Icons.insert_drive_file,
+                      size: 16,
+                      color: CronixColors.textSecondary,
+                    ),
+                    const SizedBox(width: 8),
+                    Text(
+                      fileName!,
+                      style: const TextStyle(
+                        color: CronixColors.text,
+                        fontSize: 13,
+                      ),
+                    ),
+                  ],
+                ),
+              ],
+              if (allowedExtensions != null) ...[
+                const SizedBox(height: 8),
+                Text(
+                  'Allowed: ${allowedExtensions!.join(', ')}',
+                  style: const TextStyle(
+                    color: CronixColors.textMuted,
+                    fontSize: 12,
+                  ),
+                ),
+              ],
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}