cronixui 1.1.0 → 1.1.1

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

@@ -0,0 +1,108 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+class CnFooter extends StatelessWidget {
+  final List<Widget>? leading;
+  final List<Widget>? trailing;
+  final String? copyright;
+  final Color? backgroundColor;
+  final double height;
+  final bool bordered;
+
+  const CnFooter({
+    super.key,
+    this.leading,
+    this.trailing,
+    this.copyright,
+    this.backgroundColor,
+    this.height = 56,
+    this.bordered = true,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: height,
+      decoration: BoxDecoration(
+        color: backgroundColor ?? CronixColors.surface,
+        border: bordered
+            ? const Border(
+                top: BorderSide(color: CronixColors.border),
+              )
+            : null,
+      ),
+      padding: const EdgeInsets.symmetric(horizontal: 16),
+      child: Row(
+        children: [
+          if (leading != null) ...leading!,
+          const Spacer(),
+          if (copyright != null)
+            Text(
+              copyright!,
+              style: const TextStyle(
+                color: CronixColors.textMuted,
+                fontSize: 12,
+              ),
+            ),
+          const Spacer(),
+          if (trailing != null) ...trailing!,
+        ],
+      ),
+    );
+  }
+}
+
+class CnFooterLinks extends StatelessWidget {
+  final List<FooterLink> links;
+  final String? divider;
+
+  const CnFooterLinks({
+    super.key,
+    required this.links,
+    this.divider,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: links.asMap().entries.map((entry) {
+        final index = entry.key;
+        final link = entry.value;
+        return Row(
+          children: [
+            if (index > 0 && divider != null)
+              Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 8),
+                child: Text(
+                  divider!,
+                  style: const TextStyle(color: CronixColors.textMuted),
+                ),
+              ),
+            InkWell(
+              onTap: link.onTap,
+              child: Text(
+                link.label,
+                style: TextStyle(
+                  color: CronixColors.textSecondary,
+                  fontSize: 12,
+                  decoration: TextDecoration.underline,
+                ),
+              ),
+            ),
+          ],
+        );
+      }).toList(),
+    );
+  }
+}
+
+class FooterLink {
+  final String label;
+  final VoidCallback? onTap;
+
+  const FooterLink({
+    required this.label,
+    this.onTap,
+  });
+}

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

@@ -0,0 +1,173 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+class CnHeader extends StatelessWidget implements PreferredSizeWidget {
+  final String? title;
+  final List<Widget>? actions;
+  final Widget? leading;
+  final bool showBackButton;
+  final double height;
+  final Color? backgroundColor;
+  final bool borderless;
+  final Widget? flexibleSpace;
+
+  const CnHeader({
+    super.key,
+    this.title,
+    this.actions,
+    this.leading,
+    this.showBackButton = false,
+    this.height = 56,
+    this.backgroundColor,
+    this.borderless = false,
+    this.flexibleSpace,
+  });
+
+  @override
+  Size get preferredSize => Size.fromHeight(height);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        color: backgroundColor ?? CronixColors.background,
+        border: borderless ? null : const Border(
+          bottom: BorderSide(color: CronixColors.border),
+        ),
+      ),
+      child: AppBar(
+        backgroundColor: Colors.transparent,
+        elevation: 0,
+        scrolledUnderElevation: 0,
+        automaticallyImplyLeading: false,
+        leading: showBackButton
+            ? IconButton(
+                icon: const Icon(Icons.arrow_back, color: CronixColors.text),
+                onPressed: () => Navigator.of(context).pop(),
+              )
+            : leading,
+        title: title != null
+            ? Text(
+                title!,
+                style: const TextStyle(
+                  color: CronixColors.text,
+                  fontSize: 18,
+                  fontWeight: FontWeight.w600,
+                ),
+              )
+            : null,
+        actions: actions?.map((action) => Padding(
+              padding: const EdgeInsets.only(right: 8),
+              child: action,
+            )).toList(),
+        flexibleSpace: flexibleSpace,
+      ),
+    );
+  }
+}
+
+class CnHeaderWithSearch extends StatefulWidget implements PreferredSizeWidget {
+  final String title;
+  final ValueChanged<String>? onSearch;
+  final String? searchPlaceholder;
+  final List<Widget>? actions;
+  final double height;
+
+  const CnHeaderWithSearch({
+    super.key,
+    required this.title,
+    this.onSearch,
+    this.searchPlaceholder,
+    this.actions,
+    this.height = 56,
+  });
+
+  @override
+  Size get preferredSize => Size.fromHeight(height * 2);
+
+  @override
+  State<CnHeaderWithSearch> createState() => _CnHeaderWithSearchState();
+}
+
+class _CnHeaderWithSearchState extends State<CnHeaderWithSearch> {
+  bool _isSearching = false;
+  final TextEditingController _searchController = TextEditingController();
+
+  @override
+  void dispose() {
+    _searchController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: const BoxDecoration(
+        color: CronixColors.background,
+        border: Border(
+          bottom: BorderSide(color: CronixColors.border),
+        ),
+      ),
+      child: Column(
+        children: [
+          SizedBox(
+            height: widget.height,
+            child: Row(
+              children: [
+                Expanded(
+                  child: _isSearching
+                      ? TextField(
+                          controller: _searchController,
+                          autofocus: true,
+                          onChanged: widget.onSearch,
+                          style: const TextStyle(color: CronixColors.text),
+                          decoration: InputDecoration(
+                            hintText: widget.searchPlaceholder ?? 'Search...',
+                            hintStyle: const TextStyle(color: CronixColors.textMuted),
+                            filled: true,
+                            fillColor: CronixColors.surface,
+                            contentPadding: const EdgeInsets.symmetric(horizontal: 16),
+                            border: OutlineInputBorder(
+                              borderRadius: CronixRadius.radiusMD,
+                              borderSide: BorderSide.none,
+                            ),
+                            prefixIcon: const Icon(Icons.search, color: CronixColors.textSecondary),
+                          ),
+                        )
+                      : Padding(
+                          padding: const EdgeInsets.only(left: 16),
+                          child: Text(
+                            widget.title,
+                            style: const TextStyle(
+                              color: CronixColors.text,
+                              fontSize: 20,
+                              fontWeight: FontWeight.w600,
+                            ),
+                          ),
+                        ),
+                ),
+                IconButton(
+                  icon: Icon(
+                    _isSearching ? Icons.close : Icons.search,
+                    color: CronixColors.text,
+                  ),
+                  onPressed: () {
+                    setState(() {
+                      _isSearching = !_isSearching;
+                      if (!_isSearching) {
+                        _searchController.clear();
+                        widget.onSearch?.call('');
+                      }
+                    });
+                  },
+                ),
+                if (widget.actions != null) ...widget.actions!,
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,142 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+class CnInput extends StatefulWidget {
+  final String? label;
+  final String? placeholder;
+  final String? initialValue;
+  final TextEditingController? controller;
+  final bool obscureText;
+  final bool enabled;
+  final int maxLines;
+  final IconData? prefixIcon;
+  final IconData? suffixIcon;
+  final VoidCallback? onSuffixTap;
+  final ValueChanged<String>? onChanged;
+  final ValueChanged<String>? onSubmitted;
+  final String? Function(String?)? validator;
+  final TextInputType? keyboardType;
+  final FocusNode? focusNode;
+
+  const CnInput({
+    super.key,
+    this.label,
+    this.placeholder,
+    this.initialValue,
+    this.controller,
+    this.obscureText = false,
+    this.enabled = true,
+    this.maxLines = 1,
+    this.prefixIcon,
+    this.suffixIcon,
+    this.onSuffixTap,
+    this.onChanged,
+    this.onSubmitted,
+    this.validator,
+    this.keyboardType,
+    this.focusNode,
+  });
+
+  @override
+  State<CnInput> createState() => _CnInputState();
+}
+
+class _CnInputState extends State<CnInput> {
+  late TextEditingController _controller;
+  String? _errorText;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = widget.controller ?? 
+        TextEditingController(text: widget.initialValue);
+  }
+
+  @override
+  void dispose() {
+    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,
+          obscureText: widget.obscureText,
+          enabled: widget.enabled,
+          maxLines: widget.maxLines,
+          keyboardType: widget.keyboardType,
+          focusNode: widget.focusNode,
+          onChanged: widget.onChanged,
+          onFieldSubmitted: widget.onSubmitted,
+          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.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),
+            ),
+            errorBorder: OutlineInputBorder(
+              borderRadius: CronixRadius.radiusMD,
+              borderSide: const BorderSide(color: CronixColors.error),
+            ),
+            prefixIcon: widget.prefixIcon != null
+                ? Icon(widget.prefixIcon, color: CronixColors.textSecondary, size: 20)
+                : null,
+            suffixIcon: widget.suffixIcon != null
+                ? IconButton(
+                    icon: Icon(widget.suffixIcon, color: CronixColors.textSecondary, size: 20),
+                    onPressed: widget.onSuffixTap,
+                  )
+                : null,
+          ),
+        ),
+        if (_errorText != null) ...[
+          const SizedBox(height: 4),
+          Text(
+            _errorText!,
+            style: const TextStyle(color: CronixColors.error, fontSize: 12),
+          ),
+        ],
+      ],
+    );
+  }
+}

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

@@ -0,0 +1,150 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+class CnListItem {
+  final String title;
+  final String? subtitle;
+  final IconData? leadingIcon;
+  final IconData? trailingIcon;
+  final VoidCallback? onTap;
+  final Widget? trailing;
+  final Color? backgroundColor;
+
+  const CnListItem({
+    required this.title,
+    this.subtitle,
+    this.leadingIcon,
+    this.trailingIcon,
+    this.onTap,
+    this.trailing,
+    this.backgroundColor,
+  });
+}
+
+class CnList extends StatelessWidget {
+  final List<CnListItem> items;
+  final bool divided;
+  final bool bordered;
+  final double itemHeight;
+
+  const CnList({
+    super.key,
+    required this.items,
+    this.divided = true,
+    this.bordered = false,
+    this.itemHeight = 56,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        color: CronixColors.surface,
+        borderRadius: CronixRadius.radiusMD,
+        border: bordered ? Border.all(color: CronixColors.border) : null,
+      ),
+      child: ListView.separated(
+        shrinkWrap: true,
+        physics: const NeverScrollableScrollPhysics(),
+        itemCount: items.length,
+        separatorBuilder: (context, index) => divided
+            ? const Divider(color: CronixColors.border, height: 1)
+            : const SizedBox.shrink(),
+        itemBuilder: (context, index) {
+          final item = items[index];
+          return _buildItem(item);
+        },
+      ),
+    );
+  }
+
+  Widget _buildItem(CnListItem item) {
+    return InkWell(
+      onTap: item.onTap,
+      child: Container(
+        height: itemHeight,
+        padding: const EdgeInsets.symmetric(horizontal: 16),
+        color: item.backgroundColor,
+        child: Row(
+          children: [
+            if (item.leadingIcon != null) ...[
+              Icon(
+                item.leadingIcon,
+                size: 20,
+                color: CronixColors.textSecondary,
+              ),
+              const SizedBox(width: 12),
+            ],
+            Expanded(
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    item.title,
+                    style: const TextStyle(
+                      color: CronixColors.text,
+                      fontSize: 14,
+                    ),
+                  ),
+                  if (item.subtitle != null) ...[
+                    const SizedBox(height: 2),
+                    Text(
+                      item.subtitle!,
+                      style: const TextStyle(
+                        color: CronixColors.textSecondary,
+                        fontSize: 12,
+                      ),
+                    ),
+                  ],
+                ],
+              ),
+            ),
+            if (item.trailing != null) item.trailing!,
+            if (item.trailingIcon != null)
+              Icon(
+                item.trailingIcon,
+                size: 18,
+                color: CronixColors.textMuted,
+              ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class CnListBuilder<T> extends StatelessWidget {
+  final List<T> items;
+  final Widget Function(BuildContext context, T item, int index) itemBuilder;
+  final bool divided;
+  final bool bordered;
+
+  const CnListBuilder({
+    super.key,
+    required this.items,
+    required this.itemBuilder,
+    this.divided = true,
+    this.bordered = false,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        borderRadius: CronixRadius.radiusMD,
+        border: bordered ? Border.all(color: CronixColors.border) : null,
+      ),
+      child: ListView.separated(
+        shrinkWrap: true,
+        physics: const NeverScrollableScrollPhysics(),
+        itemCount: items.length,
+        separatorBuilder: (context, index) => divided
+            ? const Divider(color: CronixColors.border, height: 1)
+            : const SizedBox.shrink(),
+        itemBuilder: (context, index) => itemBuilder(context, items[index], index),
+      ),
+    );
+  }
+}