cronixui 1.0.6 → 1.1.1

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

@@ -0,0 +1,121 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+enum CnToastVariant { info, success, warning, error }
+
+class CnToast {
+  final String message;
+  final CnToastVariant variant;
+  final Duration duration;
+  final IconData? icon;
+  final String? actionLabel;
+  final VoidCallback? onAction;
+
+  CnToast({
+    required this.message,
+    this.variant = CnToastVariant.info,
+    this.duration = const Duration(seconds: 3),
+    this.icon,
+    this.actionLabel,
+    this.onAction,
+  });
+
+  IconData get _defaultIcon {
+    switch (variant) {
+      case CnToastVariant.info:
+        return Icons.info_outline;
+      case CnToastVariant.success:
+        return Icons.check_circle_outline;
+      case CnToastVariant.warning:
+        return Icons.warning_amber_outlined;
+      case CnToastVariant.error:
+        return Icons.error_outline;
+    }
+  }
+
+  Color get _backgroundColor {
+    switch (variant) {
+      case CnToastVariant.info:
+        return CronixColors.info;
+      case CnToastVariant.success:
+        return CronixColors.success;
+      case CnToastVariant.warning:
+        return CronixColors.warning;
+      case CnToastVariant.error:
+        return CronixColors.error;
+    }
+  }
+
+  SnackBar toSnackBar() {
+    return SnackBar(
+      content: Row(
+        children: [
+          Icon(icon ?? _defaultIcon, color: CronixColors.text, size: 20),
+          const SizedBox(width: 12),
+          Expanded(
+            child: Text(
+              message,
+              style: const TextStyle(color: CronixColors.text),
+            ),
+          ),
+          if (actionLabel != null)
+            TextButton(
+              onPressed: onAction,
+              child: Text(
+                actionLabel!,
+                style: const TextStyle(
+                  color: CronixColors.text,
+                  fontWeight: FontWeight.w600,
+                ),
+              ),
+            ),
+        ],
+      ),
+      backgroundColor: _backgroundColor,
+      duration: duration,
+      behavior: SnackBarBehavior.floating,
+      shape: RoundedRectangleBorder(
+        borderRadius: CronixRadius.radiusMD,
+      ),
+      margin: const EdgeInsets.all(16),
+    );
+  }
+
+  static void show(
+    BuildContext context, {
+    required String message,
+    CnToastVariant variant = CnToastVariant.info,
+    Duration duration = const Duration(seconds: 3),
+    IconData? icon,
+    String? actionLabel,
+    VoidCallback? onAction,
+  }) {
+    final toast = CnToast(
+      message: message,
+      variant: variant,
+      duration: duration,
+      icon: icon,
+      actionLabel: actionLabel,
+      onAction: onAction,
+    );
+    ScaffoldMessenger.of(context).hideCurrentSnackBar();
+    ScaffoldMessenger.of(context).showSnackBar(toast.toSnackBar());
+  }
+
+  static void success(BuildContext context, String message) {
+    show(context, message: message, variant: CnToastVariant.success);
+  }
+
+  static void error(BuildContext context, String message) {
+    show(context, message: message, variant: CnToastVariant.error);
+  }
+
+  static void warning(BuildContext context, String message) {
+    show(context, message: message, variant: CnToastVariant.warning);
+  }
+
+  static void info(BuildContext context, String message) {
+    show(context, message: message, variant: CnToastVariant.info);
+  }
+}

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

@@ -0,0 +1,78 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+class CnToggle extends StatelessWidget {
+  final bool value;
+  final ValueChanged<bool>? onChanged;
+  final String? label;
+  final bool enabled;
+  final Color? activeColor;
+
+  const CnToggle({
+    super.key,
+    required this.value,
+    this.onChanged,
+    this.label,
+    this.enabled = true,
+    this.activeColor,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final toggle = GestureDetector(
+      onTap: enabled && onChanged != null
+          ? () => onChanged!(!value)
+          : null,
+      child: AnimatedContainer(
+        duration: const Duration(milliseconds: 200),
+        width: 44,
+        height: 24,
+        decoration: BoxDecoration(
+          color: value 
+              ? (activeColor ?? CronixColors.accent)
+              : CronixColors.border,
+          borderRadius: CronixRadius.radiusFull,
+        ),
+        child: AnimatedAlign(
+          duration: const Duration(milliseconds: 200),
+          alignment: value ? Alignment.centerRight : Alignment.centerLeft,
+          child: Container(
+            width: 20,
+            height: 20,
+            margin: const EdgeInsets.all(2),
+            decoration: BoxDecoration(
+              color: CronixColors.text,
+              borderRadius: CronixRadius.radiusFull,
+            ),
+          ),
+        ),
+      ),
+    );
+
+    if (label != null) {
+      return InkWell(
+        onTap: enabled && onChanged != null
+            ? () => onChanged!(!value)
+            : null,
+        borderRadius: CronixRadius.radiusSM,
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Text(
+              label!,
+              style: TextStyle(
+                color: enabled ? CronixColors.text : CronixColors.textMuted,
+                fontSize: 14,
+              ),
+            ),
+            const SizedBox(width: 12),
+            toggle,
+          ],
+        ),
+      );
+    }
+
+    return toggle;
+  }
+}

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

@@ -0,0 +1,118 @@
+import 'package:flutter/material.dart';
+import '../tokens/colors.dart';
+import '../tokens/spacing.dart';
+
+class CnTooltip extends StatelessWidget {
+  final String message;
+  final Widget child;
+  final EdgeInsetsGeometry? padding;
+  final Color? backgroundColor;
+  final Color? textColor;
+  final Duration? waitDuration;
+  final Duration? showDuration;
+  final bool preferBelow;
+
+  const CnTooltip({
+    super.key,
+    required this.message,
+    required this.child,
+    this.padding,
+    this.backgroundColor,
+    this.textColor,
+    this.waitDuration,
+    this.showDuration,
+    this.preferBelow = true,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Tooltip(
+      message: message,
+      padding: padding ?? const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+      margin: const EdgeInsets.all(8),
+      decoration: BoxDecoration(
+        color: backgroundColor ?? CronixColors.surfaceLight,
+        borderRadius: CronixRadius.radiusSM,
+        border: Border.all(color: CronixColors.border),
+      ),
+      textStyle: TextStyle(
+        color: textColor ?? CronixColors.text,
+        fontSize: 12,
+      ),
+      waitDuration: waitDuration ?? const Duration(milliseconds: 500),
+      showDuration: showDuration ?? const Duration(seconds: 2),
+      preferBelow: preferBelow,
+      child: child,
+    );
+  }
+}
+
+class CnRichTooltip extends StatelessWidget {
+  final Widget Function(BuildContext context) builder;
+  final Widget child;
+  final Offset? offset;
+
+  const CnRichTooltip({
+    super.key,
+    required this.builder,
+    required this.child,
+    this.offset,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return _CnRichTooltipWrapper(
+      builder: builder,
+      offset: offset,
+      child: child,
+    );
+  }
+}
+
+class _CnRichTooltipWrapper extends StatefulWidget {
+  final Widget Function(BuildContext context) builder;
+  final Widget child;
+  final Offset? offset;
+
+  const _CnRichTooltipWrapper({
+    required this.builder,
+    required this.child,
+    this.offset,
+  });
+
+  @override
+  State<_CnRichTooltipWrapper> createState() => _CnRichTooltipWrapperState();
+}
+
+class _CnRichTooltipWrapperState extends State<_CnRichTooltipWrapper> {
+  OverlayEntry? _overlayEntry;
+  bool _isVisible = false;
+
+  void _showTooltip() {
+    _overlayEntry = OverlayEntry(
+      builder: widget.builder,
+    );
+    Overlay.of(context).insert(_overlayEntry!);
+    setState(() => _isVisible = true);
+  }
+
+  void _hideTooltip() {
+    _overlayEntry?.remove();
+    _overlayEntry = null;
+    setState(() => _isVisible = false);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return MouseRegion(
+      onEnter: (_) => _showTooltip(),
+      onExit: (_) => _hideTooltip(),
+      child: GestureDetector(
+        onTapDown: (_) => _showTooltip(),
+        onTapUp: (_) => _hideTooltip(),
+        onTapCancel: () => _hideTooltip(),
+        child: widget.child,
+      ),
+    );
+  }
+}

package/packages/flutter/pubspec.yaml

@@ -0,0 +1,20 @@
+name: cronixui
+description: A dark-themed Flutter UI component library with Material Design 3 base
+version: 0.1.0
+publish_to: none
+
+environment:
+  sdk: '>=3.0.0 <4.0.0'
+  flutter: '>=3.16.0'
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+  flutter_lints: ^3.0.0
+
+flutter:
+  uses-material-design: true