cronixui 1.1.0 → 1.1.2

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

@@ -0,0 +1,133 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+class CnRadio<T> extends StatelessWidget {
+  final T value;
+  final T? groupValue;
+  final ValueChanged<T?>? onChanged;
+  final String? label;
+  final bool enabled;
+
+  const CnRadio({
+    super.key,
+    required this.value,
+    required this.groupValue,
+    this.onChanged,
+    this.label,
+    this.enabled = true,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final isSelected = value == groupValue;
+    
+    final radio = GestureDetector(
+      onTap: enabled && onChanged != null
+          ? () => onChanged!(value)
+          : null,
+      child: Container(
+        width: 20,
+        height: 20,
+        decoration: BoxDecoration(
+          shape: BoxShape.circle,
+          border: Border.all(
+            color: isSelected 
+                ? CronixColors.accent 
+                : CronixColors.borderLight,
+            width: 2,
+          ),
+        ),
+        child: Center(
+          child: Container(
+            width: 10,
+            height: 10,
+            decoration: BoxDecoration(
+              shape: BoxShape.circle,
+              color: isSelected ? CronixColors.accent : Colors.transparent,
+            ),
+          ),
+        ),
+      ),
+    );
+
+    if (label != null) {
+      return InkWell(
+        onTap: enabled && onChanged != null
+            ? () => onChanged!(value)
+            : null,
+        borderRadius: CronixRadius.radiusSM,
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            radio,
+            const SizedBox(width: 8),
+            Text(
+              label!,
+              style: TextStyle(
+                color: enabled ? CronixColors.text : CronixColors.textMuted,
+                fontSize: 14,
+              ),
+            ),
+          ],
+        ),
+      );
+    }
+
+    return radio;
+  }
+}
+
+class CnRadioGroup<T> extends StatelessWidget {
+  final T? groupValue;
+  final List<CnRadioOption<T>> options;
+  final ValueChanged<T?>? onChanged;
+  final Axis direction;
+  final bool enabled;
+
+  const CnRadioGroup({
+    super.key,
+    required this.groupValue,
+    required this.options,
+    this.onChanged,
+    this.direction = Axis.vertical,
+    this.enabled = true,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final radios = options.map((option) {
+      return Padding(
+        padding: direction == Axis.vertical
+            ? const EdgeInsets.only(bottom: 8)
+            : const EdgeInsets.only(right: 16),
+        child: CnRadio<T>(
+          value: option.value,
+          groupValue: groupValue,
+          onChanged: onChanged,
+          label: option.label,
+          enabled: enabled,
+        ),
+      );
+    }).toList();
+
+    return direction == Axis.vertical
+        ? Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: radios,
+          )
+        : Row(
+            children: radios,
+          );
+  }
+}
+
+class CnRadioOption<T> {
+  final T value;
+  final String label;
+
+  const CnRadioOption({
+    required this.value,
+    required this.label,
+  });
+}

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

@@ -0,0 +1,183 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+class CnSearch extends StatefulWidget {
+  final String? placeholder;
+  final ValueChanged<String>? onChanged;
+  final ValueChanged<String>? onSubmitted;
+  final List<String>? suggestions;
+  final ValueChanged<String>? onSuggestionSelected;
+  final bool loading;
+  final IconData? searchIcon;
+  final IconData? clearIcon;
+  final TextEditingController? controller;
+  final FocusNode? focusNode;
+
+  const CnSearch({
+    super.key,
+    this.placeholder,
+    this.onChanged,
+    this.onSubmitted,
+    this.suggestions,
+    this.onSuggestionSelected,
+    this.loading = false,
+    this.searchIcon,
+    this.clearIcon,
+    this.controller,
+    this.focusNode,
+  });
+
+  @override
+  State<CnSearch> createState() => _CnSearchState();
+}
+
+class _CnSearchState extends State<CnSearch> {
+  late TextEditingController _controller;
+  late FocusNode _focusNode;
+  bool _showSuggestions = false;
+  final LayerLink _layerLink = LayerLink();
+  OverlayEntry? _overlayEntry;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = widget.controller ?? TextEditingController();
+    _focusNode = widget.focusNode ?? FocusNode();
+    _focusNode.addListener(_handleFocusChange);
+  }
+
+  void _handleFocusChange() {
+    if (_focusNode.hasFocus && widget.suggestions != null && widget.suggestions!.isNotEmpty) {
+      _showSuggestionsOverlay();
+    } else {
+      _hideSuggestionsOverlay();
+    }
+  }
+
+  void _showSuggestionsOverlay() {
+    if (_overlayEntry != null) return;
+    _overlayEntry = _createOverlayEntry();
+    Overlay.of(context).insert(_overlayEntry!);
+  }
+
+  void _hideSuggestionsOverlay() {
+    _overlayEntry?.remove();
+    _overlayEntry = null;
+  }
+
+  OverlayEntry _createOverlayEntry() {
+    return OverlayEntry(
+      builder: (context) => Positioned(
+        width: 300,
+        child: CompositedTransformFollower(
+          link: _layerLink,
+          showWhenUnlinked: false,
+          offset: const Offset(0, 48),
+          child: Material(
+            color: Colors.transparent,
+            child: Container(
+              constraints: const BoxConstraints(maxHeight: 240),
+              decoration: BoxDecoration(
+                color: CronixColors.surface,
+                borderRadius: CronixRadius.radiusMD,
+                border: Border.all(color: CronixColors.border),
+              ),
+              child: ListView.builder(
+                shrinkWrap: true,
+                padding: const EdgeInsets.symmetric(vertical: 4),
+                itemCount: widget.suggestions?.length ?? 0,
+                itemBuilder: (context, index) {
+                  final suggestion = widget.suggestions![index];
+                  return InkWell(
+                    onTap: () {
+                      widget.onSuggestionSelected?.call(suggestion);
+                      _controller.text = suggestion;
+                      _hideSuggestionsOverlay();
+                    },
+                    child: Padding(
+                      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
+                      child: Text(
+                        suggestion,
+                        style: const TextStyle(color: CronixColors.text),
+                      ),
+                    ),
+                  );
+                },
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  @override
+  void dispose() {
+    _focusNode.removeListener(_handleFocusChange);
+    if (widget.controller == null) _controller.dispose();
+    if (widget.focusNode == null) _focusNode.dispose();
+    _hideSuggestionsOverlay();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return CompositedTransformTarget(
+      link: _layerLink,
+      child: TextField(
+        controller: _controller,
+        focusNode: _focusNode,
+        onChanged: widget.onChanged,
+        onSubmitted: widget.onSubmitted,
+        style: const TextStyle(color: CronixColors.text),
+        decoration: InputDecoration(
+          hintText: widget.placeholder ?? 'Search...',
+          hintStyle: const TextStyle(color: CronixColors.textMuted),
+          filled: true,
+          fillColor: CronixColors.surface,
+          contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
+          border: OutlineInputBorder(
+            borderRadius: CronixRadius.radiusMD,
+            borderSide: const BorderSide(color: CronixColors.border),
+          ),
+          enabledBorder: OutlineInputBorder(
+            borderRadius: CronixRadius.radiusMD,
+            borderSide: const BorderSide(color: CronixColors.border),
+          ),
+          focusedBorder: OutlineInputBorder(
+            borderRadius: CronixRadius.radiusMD,
+            borderSide: const BorderSide(color: CronixColors.accent, width: 2),
+          ),
+          prefixIcon: widget.loading
+              ? const Padding(
+                  padding: EdgeInsets.all(12),
+                  child: SizedBox(
+                    width: 16,
+                    height: 16,
+                    child: CircularProgressIndicator(strokeWidth: 2),
+                  ),
+                )
+              : Icon(
+                  widget.searchIcon ?? Icons.search,
+                  color: CronixColors.textSecondary,
+                  size: 20,
+                ),
+          suffixIcon: _controller.text.isNotEmpty
+              ? IconButton(
+                  icon: Icon(
+                    widget.clearIcon ?? Icons.clear,
+                    color: CronixColors.textSecondary,
+                    size: 18,
+                  ),
+                  onPressed: () {
+                    _controller.clear();
+                    widget.onChanged?.call('');
+                  },
+                )
+              : null,
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,244 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+class CnSelectOption<T> {
+  final T value;
+  final String label;
+  final IconData? icon;
+
+  const CnSelectOption({
+    required this.value,
+    required this.label,
+    this.icon,
+  });
+}
+
+class CnSelect<T> extends StatefulWidget {
+  final String? label;
+  final String? placeholder;
+  final T? value;
+  final List<CnSelectOption<T>> options;
+  final ValueChanged<T?>? onChanged;
+  final bool enabled;
+  final bool searchable;
+  final String? Function(T?)? validator;
+
+  const CnSelect({
+    super.key,
+    this.label,
+    this.placeholder,
+    this.value,
+    required this.options,
+    this.onChanged,
+    this.enabled = true,
+    this.searchable = false,
+    this.validator,
+  });
+
+  @override
+  State<CnSelect<T>> createState() => _CnSelectState<T>();
+}
+
+class _CnSelectState<T> extends State<CnSelect<T>> {
+  final LayerLink _layerLink = LayerLink();
+  OverlayEntry? _overlayEntry;
+  bool _isOpen = false;
+  String _searchQuery = '';
+  String? _errorText;
+
+  String get _selectedLabel {
+    if (widget.value == null) return widget.placeholder ?? 'Select...';
+    final option = widget.options.firstWhere(
+      (o) => o.value == widget.value,
+      orElse: () => CnSelectOption(value: widget.value, label: widget.placeholder ?? 'Select...'),
+    );
+    return option.label;
+  }
+
+  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 _selectOption(T value) {
+    widget.onChanged?.call(value);
+    if (widget.validator != null) {
+      setState(() => _errorText = widget.validator!(value));
+    }
+    _closeDropdown();
+  }
+
+  OverlayEntry _createOverlayEntry() {
+    final renderBox = context.findRenderObject() as RenderBox;
+    final size = renderBox.size;
+
+    final filteredOptions = _searchQuery.isEmpty
+        ? widget.options
+        : widget.options
+            .where((o) => o.label.toLowerCase().contains(_searchQuery.toLowerCase()))
+            .toList();
+
+    return OverlayEntry(
+      builder: (context) => Positioned(
+        width: size.width,
+        child: CompositedTransformFollower(
+          link: _layerLink,
+          showWhenUnlinked: false,
+          offset: Offset(0, size.height + 4),
+          child: Material(
+            color: Colors.transparent,
+            child: Container(
+              constraints: const BoxConstraints(maxHeight: 240),
+              decoration: BoxDecoration(
+                color: CronixColors.surface,
+                borderRadius: CronixRadius.radiusMD,
+                border: Border.all(color: CronixColors.border),
+              ),
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  if (widget.searchable)
+                    Padding(
+                      padding: const EdgeInsets.all(8),
+                      child: TextField(
+                        onChanged: (value) => setState(() => _searchQuery = value),
+                        style: const TextStyle(color: CronixColors.text),
+                        decoration: InputDecoration(
+                          hintText: 'Search...',
+                          hintStyle: const TextStyle(color: CronixColors.textMuted),
+                          filled: true,
+                          fillColor: CronixColors.background,
+                          contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+                          border: OutlineInputBorder(
+                            borderRadius: CronixRadius.radiusSM,
+                            borderSide: const BorderSide(color: CronixColors.border),
+                          ),
+                          prefixIcon: const Icon(Icons.search, color: CronixColors.textSecondary, size: 18),
+                        ),
+                      ),
+                    ),
+                  Flexible(
+                    child: ListView.builder(
+                      shrinkWrap: true,
+                      padding: const EdgeInsets.symmetric(vertical: 4),
+                      itemCount: filteredOptions.length,
+                      itemBuilder: (context, index) {
+                        final option = filteredOptions[index];
+                        final isSelected = option.value == widget.value;
+                        return InkWell(
+                          onTap: () => _selectOption(option.value),
+                          child: Container(
+                            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
+                            color: isSelected ? CronixColors.accent.withOpacity(0.2) : null,
+                            child: Row(
+                              children: [
+                                if (option.icon != null) ...[
+                                  Icon(option.icon, size: 18, color: CronixColors.textSecondary),
+                                  const SizedBox(width: 8),
+                                ],
+                                Text(
+                                  option.label,
+                                  style: TextStyle(
+                                    color: isSelected ? CronixColors.accent : CronixColors.text,
+                                    fontWeight: isSelected ? FontWeight.w500 : FontWeight.w400,
+                                  ),
+                                ),
+                                const Spacer(),
+                                if (isSelected)
+                                  const Icon(Icons.check, size: 16, color: CronixColors.accent),
+                              ],
+                            ),
+                          ),
+                        );
+                      },
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        if (widget.label != null) ...[
+          Text(
+            widget.label!,
+            style: const TextStyle(
+              color: CronixColors.text,
+              fontSize: 14,
+              fontWeight: FontWeight.w500,
+            ),
+          ),
+          const SizedBox(height: 8),
+        ],
+        CompositedTransformTarget(
+          link: _layerLink,
+          child: GestureDetector(
+            onTap: widget.enabled ? _toggleDropdown : null,
+            child: Container(
+              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
+              decoration: BoxDecoration(
+                color: widget.enabled ? CronixColors.surface : CronixColors.surfaceLight,
+                borderRadius: CronixRadius.radiusMD,
+                border: Border.all(
+                  color: _errorText != null 
+                      ? CronixColors.error 
+                      : CronixColors.border,
+                ),
+              ),
+              child: Row(
+                children: [
+                  Expanded(
+                    child: Text(
+                      _selectedLabel,
+                      style: TextStyle(
+                        color: widget.value != null 
+                            ? CronixColors.text 
+                            : CronixColors.textMuted,
+                      ),
+                    ),
+                  ),
+                  Icon(
+                    _isOpen ? Icons.keyboard_arrow_up : Icons.keyboard_arrow_down,
+                    color: CronixColors.textSecondary,
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ),
+        if (_errorText != null) ...[
+          const SizedBox(height: 4),
+          Text(
+            _errorText!,
+            style: const TextStyle(color: CronixColors.error, fontSize: 12),
+          ),
+        ],
+      ],
+    );
+  }
+}