cronixui 1.1.0 → 1.1.2

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

@@ -0,0 +1,136 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+class CnTableColumn<T> {
+  final String label;
+  final double? width;
+  final bool sortable;
+  final String? Function(T item)? valueBuilder;
+  final Widget Function(T item)? cellBuilder;
+  final TextAlign alignment;
+
+  const CnTableColumn({
+    required this.label,
+    this.width,
+    this.sortable = false,
+    this.valueBuilder,
+    this.cellBuilder,
+    this.alignment = TextAlign.left,
+  });
+}
+
+class CnTable<T> extends StatefulWidget {
+  final List<CnTableColumn<T>> columns;
+  final List<T> data;
+  final void Function(T item)? onRowTap;
+  final bool striped;
+  final bool bordered;
+  final String? emptyMessage;
+  final Widget? emptyWidget;
+
+  const CnTable({
+    super.key,
+    required this.columns,
+    required this.data,
+    this.onRowTap,
+    this.striped = false,
+    this.bordered = false,
+    this.emptyMessage,
+    this.emptyWidget,
+  });
+
+  @override
+  State<CnTable<T>> createState() => _CnTableState<T>();
+}
+
+class _CnTableState<T> extends State<CnTable<T>> {
+  int? _sortColumnIndex;
+  bool _sortAscending = true;
+
+  void _sort(int columnIndex) {
+    setState(() {
+      if (_sortColumnIndex == columnIndex) {
+        _sortAscending = !_sortAscending;
+      } else {
+        _sortColumnIndex = columnIndex;
+        _sortAscending = true;
+      }
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (widget.data.isEmpty) {
+      return widget.emptyWidget ??
+          Center(
+            child: Padding(
+              padding: const EdgeInsets.all(32),
+              child: Text(
+                widget.emptyMessage ?? 'No data available',
+                style: const TextStyle(color: CronixColors.textMuted),
+              ),
+            ),
+          );
+    }
+
+    return Container(
+      decoration: BoxDecoration(
+        border: widget.bordered
+            ? Border.all(color: CronixColors.border)
+            : null,
+        borderRadius: CronixRadius.radiusMD,
+      ),
+      child: SingleChildScrollView(
+        scrollDirection: Axis.horizontal,
+        child: DataTable(
+          headingRowColor: WidgetStateProperty.all(CronixColors.surfaceLight),
+          dataRowColor: WidgetStateProperty.resolveWith((states) {
+            if (widget.striped) {
+              final index = states.contains(WidgetState.selected) ? -1 : 0;
+              return index % 2 == 0
+                  ? CronixColors.surface
+                  : CronixColors.surfaceLight;
+            }
+            return Colors.transparent;
+          }),
+          dividerThickness: widget.bordered ? 1 : 0,
+          columns: widget.columns.map((col) {
+            return DataColumn(
+              label: Text(
+                col.label,
+                style: const TextStyle(
+                  color: CronixColors.text,
+                  fontWeight: FontWeight.w600,
+                ),
+              ),
+              onSort: col.sortable ? (_) => _sort(widget.columns.indexOf(col)) : null,
+            );
+          }).toList(),
+          rows: widget.data.map((item) {
+            return DataRow(
+              onSelectChanged: widget.onRowTap != null
+                  ? (_) => widget.onRowTap!(item)
+                  : null,
+              cells: widget.columns.map((col) {
+                Widget cell;
+                if (col.cellBuilder != null) {
+                  cell = col.cellBuilder!(item);
+                } else if (col.valueBuilder != null) {
+                  cell = Text(
+                    col.valueBuilder!(item) ?? '',
+                    style: const TextStyle(color: CronixColors.text),
+                    textAlign: col.alignment,
+                  );
+                } else {
+                  cell = const SizedBox.shrink();
+                }
+                return DataCell(cell);
+              }).toList(),
+            );
+          }).toList(),
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,229 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+class CnTabs extends StatefulWidget {
+  final List<String> tabs;
+  final int initialIndex;
+  final ValueChanged<int>? onChanged;
+  final bool fullWidth;
+  final Color? indicatorColor;
+  final Color? backgroundColor;
+
+  const CnTabs({
+    super.key,
+    required this.tabs,
+    this.initialIndex = 0,
+    this.onChanged,
+    this.fullWidth = false,
+    this.indicatorColor,
+    this.backgroundColor,
+  });
+
+  @override
+  State<CnTabs> createState() => _CnTabsState();
+}
+
+class _CnTabsState extends State<CnTabs> with SingleTickerProviderStateMixin {
+  late TabController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = TabController(
+      length: widget.tabs.length,
+      vsync: this,
+      initialIndex: widget.initialIndex,
+    );
+    _controller.addListener(_handleTabChange);
+  }
+
+  void _handleTabChange() {
+    if (!_controller.indexIsChanging) {
+      widget.onChanged?.call(_controller.index);
+    }
+  }
+
+  @override
+  void didUpdateWidget(CnTabs oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.tabs.length != widget.tabs.length) {
+      _controller.removeListener(_handleTabChange);
+      _controller.dispose();
+      _controller = TabController(
+        length: widget.tabs.length,
+        vsync: this,
+        initialIndex: _controller.index.clamp(0, widget.tabs.length - 1),
+      );
+      _controller.addListener(_handleTabChange);
+    }
+  }
+
+  @override
+  void dispose() {
+    _controller.removeListener(_handleTabChange);
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: widget.backgroundColor ?? Colors.transparent,
+      child: TabBar(
+        controller: _controller,
+        isScrollable: !widget.fullWidth,
+        indicatorSize: TabBarIndicatorSize.label,
+        indicator: UnderlineTabIndicator(
+          borderSide: BorderSide(
+            color: widget.indicatorColor ?? CronixColors.accent,
+            width: 2,
+          ),
+        ),
+        indicatorWeight: 2,
+        labelColor: CronixColors.text,
+        unselectedLabelColor: CronixColors.textSecondary,
+        labelStyle: const TextStyle(
+          fontSize: 14,
+          fontWeight: FontWeight.w500,
+        ),
+        unselectedLabelStyle: const TextStyle(
+          fontSize: 14,
+          fontWeight: FontWeight.w400,
+        ),
+        tabs: widget.tabs.map((tab) => Tab(text: tab)).toList(),
+      ),
+    );
+  }
+}
+
+class CnTabView extends StatefulWidget {
+  final List<Widget> children;
+  final int initialIndex;
+
+  const CnTabView({
+    super.key,
+    required this.children,
+    this.initialIndex = 0,
+  });
+
+  @override
+  State<CnTabView> createState() => _CnTabViewState();
+}
+
+class _CnTabViewState extends State<CnTabView> with SingleTickerProviderStateMixin {
+  late TabController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = TabController(
+      length: widget.children.length,
+      vsync: this,
+      initialIndex: widget.initialIndex,
+    );
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return TabBarView(
+      controller: _controller,
+      children: widget.children,
+    );
+  }
+}
+
+class CnTabsWithContent extends StatefulWidget {
+  final List<TabData> tabs;
+  final int initialIndex;
+  final ValueChanged<int>? onChanged;
+
+  const CnTabsWithContent({
+    super.key,
+    required this.tabs,
+    this.initialIndex = 0,
+    this.onChanged,
+  });
+
+  @override
+  State<CnTabsWithContent> createState() => _CnTabsWithContentState();
+}
+
+class _CnTabsWithContentState extends State<CnTabsWithContent>
+    with SingleTickerProviderStateMixin {
+  late TabController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = TabController(
+      length: widget.tabs.length,
+      vsync: this,
+      initialIndex: widget.initialIndex,
+    );
+    _controller.addListener(() {
+      if (!_controller.indexIsChanging) {
+        widget.onChanged?.call(_controller.index);
+      }
+    });
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Container(
+          decoration: const BoxDecoration(
+            border: Border(
+              bottom: BorderSide(color: CronixColors.border),
+            ),
+          ),
+          child: TabBar(
+            controller: _controller,
+            indicator: UnderlineTabIndicator(
+              borderSide: BorderSide(
+                color: CronixColors.accent,
+                width: 2,
+              ),
+            ),
+            labelColor: CronixColors.text,
+            unselectedLabelColor: CronixColors.textSecondary,
+            labelStyle: const TextStyle(
+              fontSize: 14,
+              fontWeight: FontWeight.w500,
+            ),
+            tabs: widget.tabs.map((tab) => Tab(text: tab.label)).toList(),
+          ),
+        ),
+        Expanded(
+          child: TabBarView(
+            controller: _controller,
+            children: widget.tabs.map((tab) => tab.content).toList(),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class TabData {
+  final String label;
+  final Widget content;
+
+  const TabData({
+    required this.label,
+    required this.content,
+  });
+}

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

@@ -0,0 +1,185 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+class CnTag extends StatelessWidget {
+  final String label;
+  final IconData? icon;
+  final VoidCallback? onRemove;
+  final VoidCallback? onTap;
+  final Color? backgroundColor;
+  final Color? textColor;
+  final double fontSize;
+  final bool outlined;
+
+  const CnTag({
+    super.key,
+    required this.label,
+    this.icon,
+    this.onRemove,
+    this.onTap,
+    this.backgroundColor,
+    this.textColor,
+    this.fontSize = 12,
+    this.outlined = false,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    Widget content = Container(
+      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+      decoration: BoxDecoration(
+        color: outlined ? null : (backgroundColor ?? CronixColors.surfaceLight),
+        borderRadius: CronixRadius.radiusFull,
+        border: outlined
+            ? Border.all(color: backgroundColor ?? CronixColors.border)
+            : null,
+      ),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          if (icon != null) ...[
+            Icon(icon, size: fontSize, color: textColor ?? CronixColors.text),
+            const SizedBox(width: 4),
+          ],
+          Text(
+            label,
+            style: TextStyle(
+              color: textColor ?? CronixColors.text,
+              fontSize: fontSize,
+              fontWeight: FontWeight.w500,
+            ),
+          ),
+          if (onRemove != null) ...[
+            const SizedBox(width: 6),
+            GestureDetector(
+              onTap: onRemove,
+              child: Icon(
+                Icons.close,
+                size: fontSize + 2,
+                color: textColor ?? CronixColors.textSecondary,
+              ),
+            ),
+          ],
+        ],
+      ),
+    );
+
+    if (onTap != null) {
+      return InkWell(
+        onTap: onTap,
+        borderRadius: CronixRadius.radiusFull,
+        child: content,
+      );
+    }
+
+    return content;
+  }
+}
+
+class CnTagGroup extends StatelessWidget {
+  final List<CnTag> tags;
+  final WrapAlignment alignment;
+  final double spacing;
+  final double runSpacing;
+
+  const CnTagGroup({
+    super.key,
+    required this.tags,
+    this.alignment = WrapAlignment.start,
+    this.spacing = 8,
+    this.runSpacing = 8,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Wrap(
+      alignment: alignment,
+      spacing: spacing,
+      runSpacing: runSpacing,
+      children: tags,
+    );
+  }
+}
+
+class CnTagInput extends StatefulWidget {
+  final List<String> initialTags;
+  final ValueChanged<List<String>>? onChanged;
+  final String? placeholder;
+  final int? maxTags;
+
+  const CnTagInput({
+    super.key,
+    this.initialTags = const [],
+    this.onChanged,
+    this.placeholder,
+    this.maxTags,
+  });
+
+  @override
+  State<CnTagInput> createState() => _CnTagInputState();
+}
+
+class _CnTagInputState extends State<CnTagInput> {
+  late List<String> _tags;
+  final TextEditingController _controller = TextEditingController();
+
+  @override
+  void initState() {
+    super.initState();
+    _tags = List.from(widget.initialTags);
+  }
+
+  void _addTag(String tag) {
+    if (tag.isEmpty || _tags.contains(tag)) return;
+    if (widget.maxTags != null && _tags.length >= widget.maxTags!) return;
+    
+    setState(() => _tags.add(tag));
+    _controller.clear();
+    widget.onChanged?.call(_tags);
+  }
+
+  void _removeTag(String tag) {
+    setState(() => _tags.remove(tag));
+    widget.onChanged?.call(_tags);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(8),
+      decoration: BoxDecoration(
+        color: CronixColors.surface,
+        borderRadius: CronixRadius.radiusMD,
+        border: Border.all(color: CronixColors.border),
+      ),
+      child: Wrap(
+        spacing: 8,
+        runSpacing: 8,
+        children: [
+          ..._tags.map((tag) => CnTag(
+                label: tag,
+                onRemove: () => _removeTag(tag),
+              )),
+          if (widget.maxTags == null || _tags.length < widget.maxTags!)
+            SizedBox(
+              width: 120,
+              height: 28,
+              child: TextField(
+                controller: _controller,
+                onSubmitted: _addTag,
+                style: const TextStyle(color: CronixColors.text, fontSize: 12),
+                decoration: InputDecoration(
+                  hintText: widget.placeholder ?? 'Add tag...',
+                  hintStyle: const TextStyle(color: CronixColors.textMuted),
+                  border: InputBorder.none,
+                  contentPadding: EdgeInsets.zero,
+                  isDense: true,
+                ),
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,143 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+class CnTextarea extends StatefulWidget {
+  final String? label;
+  final String? placeholder;
+  final String? initialValue;
+  final TextEditingController? controller;
+  final bool enabled;
+  final int minLines;
+  final int maxLines;
+  final int? maxLength;
+  final ValueChanged<String>? onChanged;
+  final String? Function(String?)? validator;
+
+  const CnTextarea({
+    super.key,
+    this.label,
+    this.placeholder,
+    this.initialValue,
+    this.controller,
+    this.enabled = true,
+    this.minLines = 3,
+    this.maxLines = 5,
+    this.maxLength,
+    this.onChanged,
+    this.validator,
+  });
+
+  @override
+  State<CnTextarea> createState() => _CnTextareaState();
+}
+
+class _CnTextareaState extends State<CnTextarea> {
+  late TextEditingController _controller;
+  String? _errorText;
+  int _currentLength = 0;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = widget.controller ?? 
+        TextEditingController(text: widget.initialValue);
+    _currentLength = _controller.text.length;
+    _controller.addListener(_updateLength);
+  }
+
+  void _updateLength() {
+    setState(() => _currentLength = _controller.text.length);
+  }
+
+  @override
+  void dispose() {
+    _controller.removeListener(_updateLength);
+    if (widget.controller == null) {
+      _controller.dispose();
+    }
+    super.dispose();
+  }
+
+  @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),
+        ],
+        TextFormField(
+          controller: _controller,
+          enabled: widget.enabled,
+          minLines: widget.minLines,
+          maxLines: widget.maxLines,
+          maxLength: widget.maxLength,
+          onChanged: widget.onChanged,
+          validator: (value) {
+            if (widget.validator != null) {
+              final error = widget.validator!(value);
+              setState(() => _errorText = error);
+              return error;
+            }
+            return null;
+          },
+          style: const TextStyle(color: CronixColors.text),
+          decoration: InputDecoration(
+            hintText: widget.placeholder,
+            hintStyle: const TextStyle(color: CronixColors.textMuted),
+            filled: true,
+            fillColor: widget.enabled ? CronixColors.surface : CronixColors.surfaceLight,
+            contentPadding: const EdgeInsets.all(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),
+            ),
+            errorBorder: OutlineInputBorder(
+              borderRadius: CronixRadius.radiusMD,
+              borderSide: const BorderSide(color: CronixColors.error),
+            ),
+            counterText: '',
+          ),
+        ),
+        if (widget.maxLength != null)
+          Align(
+            alignment: Alignment.centerRight,
+            child: Text(
+              '$_currentLength/${widget.maxLength}',
+              style: TextStyle(
+                color: _currentLength >= widget.maxLength! 
+                    ? CronixColors.error 
+                    : CronixColors.textMuted,
+                fontSize: 12,
+              ),
+            ),
+          ),
+        if (_errorText != null) ...[
+          const SizedBox(height: 4),
+          Text(
+            _errorText!,
+            style: const TextStyle(color: CronixColors.error, fontSize: 12),
+          ),
+        ],
+      ],
+    );
+  }
+}