getlotui 0.1.0

package/src/templates/expo/Toast.tsx

@@ -0,0 +1,161 @@
+import React, { useState, useEffect, createContext, useContext } from "react";
+import {
+  View,
+  Text,
+  StyleSheet,
+  Animated,
+  Dimensions,
+  Pressable,
+} from "react-native";
+
+type ToastType = "default" | "success" | "error";
+
+interface Toast {
+  id: string;
+  title: string;
+  description?: string;
+  type?: ToastType;
+}
+
+interface ToastContextType {
+  toast: (toast: Omit<Toast, "id">) => void;
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+export const ToastProvider = ({ children }: { children: React.ReactNode }) => {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const toast = ({
+    title,
+    description,
+    type = "default",
+  }: Omit<Toast, "id">) => {
+    const id = Math.random().toString(36).substr(2, 9);
+    setToasts((prev) => [...prev, { id, title, description, type }]);
+  };
+
+  const removeToast = (id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  };
+
+  return (
+    <ToastContext.Provider value={{ toast }}>
+      {children}
+      <View style={styles.container} pointerEvents="box-none">
+        {toasts.map((t) => (
+          <ToastItem key={t.id} toast={t} onRemove={() => removeToast(t.id)} />
+        ))}
+      </View>
+    </ToastContext.Provider>
+  );
+};
+
+export const useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) throw new Error("useToast must be used within ToastProvider");
+  return context;
+};
+
+const ToastItem = ({
+  toast,
+  onRemove,
+}: {
+  toast: Toast;
+  onRemove: () => void;
+}) => {
+  const opacity = useState(new Animated.Value(0))[0];
+  const translateY = useState(new Animated.Value(20))[0];
+
+  useEffect(() => {
+    Animated.parallel([
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: true,
+      }),
+      Animated.timing(translateY, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true,
+      }),
+    ]).start();
+
+    const timer = setTimeout(() => {
+      Animated.parallel([
+        Animated.timing(opacity, {
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+        Animated.timing(translateY, {
+          toValue: 20,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+      ]).start(() => onRemove());
+    }, 3000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  const bgColors = {
+    default: "white",
+    success: "#f0fdf4",
+    error: "#fef2f2",
+  };
+
+  return (
+    <Animated.View
+      style={[
+        styles.toast,
+        {
+          opacity,
+          transform: [{ translateY }],
+          backgroundColor: bgColors[toast.type || "default"],
+        },
+      ]}
+    >
+      <View>
+        <Text style={styles.title}>{toast.title}</Text>
+        {toast.description && (
+          <Text style={styles.description}>{toast.description}</Text>
+        )}
+      </View>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    bottom: 40,
+    left: 20,
+    right: 20,
+    alignItems: "center",
+  },
+  toast: {
+    width: "100%",
+    maxWidth: 400,
+    padding: 16,
+    borderRadius: 8,
+    marginBottom: 8,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+    borderWidth: 1,
+    borderColor: "#e4e4e7",
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#18181b",
+  },
+  description: {
+    fontSize: 12,
+    color: "#71717a",
+    marginTop: 2,
+  },
+});

package/src/templates/expo/utils.ts

@@ -0,0 +1,8 @@
+import { StyleSheet } from "react-native";
+
+/**
+ * A utility to merge React Native styles.
+ */
+export function cn(...inputs: any[]) {
+  return StyleSheet.flatten(inputs.filter(Boolean));
+}

package/src/templates/flutter/Accordion.dart

@@ -0,0 +1,142 @@
+import 'package:flutter/material.dart';
+
+enum CrossUIAccordionType { single, multiple }
+
+class CrossUIAccordionItem {
+  final String value;
+  final String trigger;
+  final String content;
+
+  const CrossUIAccordionItem({
+    required this.value,
+    required this.trigger,
+    required this.content,
+  });
+}
+
+class CrossUIAccordion extends StatefulWidget {
+  final List<CrossUIAccordionItem> items;
+  final CrossUIAccordionType type;
+  final bool collapsible;
+  final dynamic defaultValue;
+
+  const CrossUIAccordion({
+    super.key,
+    required this.items,
+    this.type = CrossUIAccordionType.single,
+    this.collapsible = false,
+    this.defaultValue,
+  });
+
+  @override
+  State<CrossUIAccordion> createState() => _CrossUIAccordionState();
+}
+
+class _CrossUIAccordionState extends State<CrossUIAccordion> {
+  late Set<String> _openItems;
+
+  @override
+  void initState() {
+    super.initState();
+    _openItems = {};
+
+    if (widget.defaultValue != null) {
+      if (widget.defaultValue is String) {
+        _openItems.add(widget.defaultValue as String);
+      } else if (widget.defaultValue is List) {
+        _openItems.addAll((widget.defaultValue as List).cast<String>());
+      }
+    }
+  }
+
+  void _toggleItem(String value) {
+    setState(() {
+      if (widget.type == CrossUIAccordionType.single) {
+        if (_openItems.contains(value)) {
+          if (widget.collapsible) {
+            _openItems.clear();
+          }
+        } else {
+          _openItems.clear();
+          _openItems.add(value);
+        }
+      } else {
+        if (_openItems.contains(value)) {
+          _openItems.remove(value);
+        } else {
+          _openItems.add(value);
+        }
+      }
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: widget.items.asMap().entries.map((entry) {
+        final index = entry.key;
+        final item = entry.value;
+        final isOpen = _openItems.contains(item.value);
+        final isLast = index == widget.items.length - 1;
+
+        return Container(
+          decoration: BoxDecoration(
+            border: Border(
+              bottom: isLast
+                  ? BorderSide.none
+                  : const BorderSide(color: Colors.grey, width: 1),
+            ),
+          ),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              InkWell(
+                onTap: () => _toggleItem(item.value),
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(vertical: 16),
+                  child: Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                      Expanded(
+                        child: Text(
+                          item.trigger,
+                          style: const TextStyle(
+                            fontSize: 16,
+                            fontWeight: FontWeight.w500,
+                          ),
+                        ),
+                      ),
+                      AnimatedRotation(
+                        turns: isOpen ? 0.75 : 0.25,
+                        duration: const Duration(milliseconds: 200),
+                        child: const Icon(Icons.chevron_right, size: 20),
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+              AnimatedCrossFade(
+                firstChild: const SizedBox.shrink(),
+                secondChild: Padding(
+                  padding: const EdgeInsets.only(bottom: 16),
+                  child: Text(
+                    item.content,
+                    style: TextStyle(
+                      fontSize: 14,
+                      color: Colors.grey[600],
+                      height: 1.5,
+                    ),
+                  ),
+                ),
+                crossFadeState: isOpen
+                    ? CrossFadeState.showSecond
+                    : CrossFadeState.showFirst,
+                duration: const Duration(milliseconds: 200),
+              ),
+            ],
+          ),
+        );
+      }).toList(),
+    );
+  }
+}

package/src/templates/flutter/Alert.dart

@@ -0,0 +1,96 @@
+import 'package:flutter/material.dart';
+import '../theme/tokens.dart';
+
+enum CrossUIAlertVariant { info, success, warning, destructive }
+
+class CrossUIAlert extends StatelessWidget {
+  final String title;
+  final String? description;
+  final CrossUIAlertVariant variant;
+  final IconData? icon;
+
+  const CrossUIAlert({
+    Key? key,
+    required this.title,
+    this.description,
+    this.variant = CrossUIAlertVariant.info,
+    this.icon,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    Color borderColor;
+    Color backgroundColor;
+    Color iconColor;
+    IconData defaultIcon;
+
+    switch (variant) {
+      case CrossUIAlertVariant.success:
+        borderColor = CrossUITokens.success;
+        backgroundColor = CrossUITokens.successLight;
+        iconColor = CrossUITokens.onSuccessLight;
+        defaultIcon = Icons.check_circle_outline;
+        break;
+      case CrossUIAlertVariant.warning:
+        borderColor = CrossUITokens.warning;
+        backgroundColor = CrossUITokens.warningLight;
+        iconColor = CrossUITokens.onWarningLight;
+        defaultIcon = Icons.warning_amber_rounded;
+        break;
+      case CrossUIAlertVariant.destructive:
+        borderColor = CrossUITokens.danger;
+        backgroundColor = CrossUITokens.dangerLight;
+        iconColor = CrossUITokens.onDangerLight;
+        defaultIcon = Icons.error_outline;
+        break;
+      case CrossUIAlertVariant.info:
+      default:
+        borderColor = CrossUITokens.info;
+        backgroundColor = CrossUITokens.infoLight;
+        iconColor = CrossUITokens.onInfoLight;
+        defaultIcon = Icons.info_outline;
+        break;
+    }
+
+    return Container(
+      padding: const EdgeInsets.all(CrossUITokens.spacingM),
+      decoration: BoxDecoration(
+        color: backgroundColor,
+        borderRadius: BorderRadius.circular(CrossUITokens.radiusMedium),
+        border: Border.all(color: borderColor.withOpacity(0.5)),
+      ),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Icon(icon ?? defaultIcon, color: iconColor, size: 20),
+          const SizedBox(width: CrossUITokens.spacingSm),
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  title,
+                  style: TextStyle(
+                    fontWeight: FontWeight.bold,
+                    fontSize: CrossUITokens.fontSizeBase,
+                    color: iconColor,
+                  ),
+                ),
+                if (description != null) ...[
+                  const SizedBox(height: 4),
+                  Text(
+                    description!,
+                    style: TextStyle(
+                      fontSize: CrossUITokens.fontSizeSm,
+                      color: iconColor.withOpacity(0.8),
+                    ),
+                  ),
+                ],
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

package/src/templates/flutter/AlertDialog.dart

@@ -0,0 +1,175 @@
+import 'package:flutter/material.dart';
+
+enum CrossUIAlertDialogVariant { defaultVariant, destructive }
+
+class CrossUIAlertDialog extends StatelessWidget {
+  final String title;
+  final String? description;
+  final String cancelText;
+  final String actionText;
+  final VoidCallback? onCancel;
+  final VoidCallback? onAction;
+  final CrossUIAlertDialogVariant variant;
+  final Widget? content;
+
+  const CrossUIAlertDialog({
+    super.key,
+    required this.title,
+    this.description,
+    this.cancelText = 'Cancel',
+    this.actionText = 'Continue',
+    this.onCancel,
+    this.onAction,
+    this.variant = CrossUIAlertDialogVariant.defaultVariant,
+    this.content,
+  });
+
+  static Future<T?> show<T>({
+    required BuildContext context,
+    required String title,
+    String? description,
+    String cancelText = 'Cancel',
+    String actionText = 'Continue',
+    VoidCallback? onCancel,
+    VoidCallback? onAction,
+    CrossUIAlertDialogVariant variant =
+        CrossUIAlertDialogVariant.defaultVariant,
+    Widget? content,
+  }) {
+    return showDialog<T>(
+      context: context,
+      barrierDismissible: true,
+      builder: (BuildContext context) {
+        return CrossUIAlertDialog(
+          title: title,
+          description: description,
+          cancelText: cancelText,
+          actionText: actionText,
+          onCancel: onCancel,
+          onAction: onAction,
+          variant: variant,
+          content: content,
+        );
+      },
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    Color actionBackgroundColor;
+    Color actionTextColor;
+
+    if (variant == CrossUIAlertDialogVariant.destructive) {
+      actionBackgroundColor = Colors.red;
+      actionTextColor = Colors.white;
+    } else {
+      actionBackgroundColor = Colors.blue;
+      actionTextColor = Colors.white;
+    }
+
+    return Dialog(
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(16),
+        side: BorderSide(color: Colors.grey.withValues(alpha: 0.2), width: 1),
+      ),
+      child: Container(
+        constraints: const BoxConstraints(maxWidth: 400),
+        padding: const EdgeInsets.all(24),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  title,
+                  style: const TextStyle(
+                    fontSize: 18,
+                    fontWeight: FontWeight.w700,
+                  ),
+                ),
+                if (description != null) ...[
+                  const SizedBox(height: 8),
+                  Text(
+                    description!,
+                    style: TextStyle(
+                      fontSize: 14,
+                      color: Colors.grey[600],
+                      height: 1.5,
+                    ),
+                  ),
+                ],
+              ],
+            ),
+            if (content != null) ...[const SizedBox(height: 16), content!],
+            const SizedBox(height: 24),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.end,
+              children: [
+                Expanded(
+                  child: InkWell(
+                    onTap: () {
+                      onCancel?.call();
+                      Navigator.of(context).pop(false);
+                    },
+                    borderRadius: BorderRadius.circular(8),
+                    child: Container(
+                      padding: const EdgeInsets.symmetric(
+                        horizontal: 16,
+                        vertical: 12,
+                      ),
+                      decoration: BoxDecoration(
+                        border: Border.all(
+                          color: Colors.grey.withValues(alpha: 0.3),
+                        ),
+                        borderRadius: BorderRadius.circular(8),
+                      ),
+                      child: const Text(
+                        'Cancel',
+                        textAlign: TextAlign.center,
+                        style: TextStyle(
+                          fontSize: 16,
+                          fontWeight: FontWeight.w600,
+                        ),
+                      ),
+                    ),
+                  ),
+                ),
+                const SizedBox(width: 8),
+                Expanded(
+                  child: InkWell(
+                    onTap: () {
+                      onAction?.call();
+                      Navigator.of(context).pop(true);
+                    },
+                    borderRadius: BorderRadius.circular(8),
+                    child: Container(
+                      padding: const EdgeInsets.symmetric(
+                        horizontal: 16,
+                        vertical: 12,
+                      ),
+                      decoration: BoxDecoration(
+                        color: actionBackgroundColor,
+                        borderRadius: BorderRadius.circular(8),
+                      ),
+                      child: Text(
+                        actionText,
+                        textAlign: TextAlign.center,
+                        style: TextStyle(
+                          fontSize: 16,
+                          fontWeight: FontWeight.w600,
+                          color: actionTextColor,
+                        ),
+                      ),
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

package/src/templates/flutter/Avatar.dart

@@ -0,0 +1,82 @@
+import 'package:flutter/material.dart';
+
+enum CrossUIAvatarSize { xs, sm, md, lg, xl, xxl }
+
+class CrossUIAvatar extends StatelessWidget {
+  final String? src;
+  final String? fallback;
+  final CrossUIAvatarSize size;
+
+  const CrossUIAvatar({
+    super.key,
+    this.src,
+    this.fallback,
+    this.size = CrossUIAvatarSize.md,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    double dimension;
+    double fontSize;
+
+    switch (size) {
+      case CrossUIAvatarSize.xs:
+        dimension = 24.0;
+        fontSize = 10.0;
+        break;
+      case CrossUIAvatarSize.sm:
+        dimension = 32.0;
+        fontSize = 12.0;
+        break;
+      case CrossUIAvatarSize.lg:
+        dimension = 48.0;
+        fontSize = 16.0;
+        break;
+      case CrossUIAvatarSize.xl:
+        dimension = 64.0;
+        fontSize = 20.0;
+        break;
+      case CrossUIAvatarSize.xxl:
+        dimension = 80.0;
+        fontSize = 24.0;
+        break;
+      case CrossUIAvatarSize.md:
+        dimension = 40.0;
+        fontSize = 14.0;
+        break;
+    }
+
+    return Container(
+      width: dimension,
+      height: dimension,
+      decoration: BoxDecoration(
+        color: Colors.blue.withValues(alpha: 0.1),
+        shape: BoxShape.circle,
+        border: Border.all(color: Colors.grey.withValues(alpha: 0.2), width: 1),
+      ),
+      clipBehavior: Clip.antiAlias,
+      child: src != null
+          ? Image.network(
+              src!,
+              fit: BoxFit.cover,
+              errorBuilder: (context, error, stackTrace) =>
+                  _buildFallback(fontSize),
+            )
+          : _buildFallback(fontSize),
+    );
+  }
+
+  Widget _buildFallback(double fontSize) {
+    return Center(
+      child: Text(
+        fallback?.substring(0, fallback!.length >= 2 ? 2 : 1).toUpperCase() ??
+            "??",
+        style: TextStyle(
+          color: Colors.blue,
+          fontSize: fontSize,
+          fontWeight: FontWeight.w600,
+        ),
+      ),
+    );
+  }
+}