getlotui 0.1.0

package/src/templates/flutter/Badge.dart

@@ -0,0 +1,89 @@
+import 'package:flutter/material.dart';
+
+enum CrossUIBadgeVariant {
+  defaultVariant,
+  secondary,
+  outline,
+  destructive,
+  success,
+  warning,
+}
+
+enum CrossUIBadgeSize { sm, md }
+
+class CrossUIBadge extends StatelessWidget {
+  final String label;
+  final CrossUIBadgeVariant variant;
+  final CrossUIBadgeSize size;
+
+  const CrossUIBadge({
+    super.key,
+    required this.label,
+    this.variant = CrossUIBadgeVariant.defaultVariant,
+    this.size = CrossUIBadgeSize.md,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    Color backgroundColor;
+    Color textColor;
+    BorderSide borderSide = BorderSide.none;
+
+    switch (variant) {
+      case CrossUIBadgeVariant.secondary:
+        backgroundColor = Colors.blue.withValues(alpha: 0.1);
+        textColor = Colors.blue;
+        break;
+      case CrossUIBadgeVariant.outline:
+        backgroundColor = Colors.transparent;
+        textColor = Colors.blue;
+        borderSide = const BorderSide(color: Colors.blue);
+        break;
+      case CrossUIBadgeVariant.destructive:
+        backgroundColor = Colors.red;
+        textColor = Colors.white;
+        break;
+      case CrossUIBadgeVariant.success:
+        backgroundColor = Colors.green.withValues(alpha: 0.1);
+        textColor = Colors.green;
+        break;
+      case CrossUIBadgeVariant.warning:
+        backgroundColor = Colors.amber.withValues(alpha: 0.1);
+        textColor = Colors.amber;
+        break;
+      case CrossUIBadgeVariant.defaultVariant:
+        backgroundColor = Colors.blue;
+        textColor = Colors.white;
+        break;
+    }
+
+    EdgeInsets padding;
+    double fontSize;
+
+    if (size == CrossUIBadgeSize.sm) {
+      padding = const EdgeInsets.symmetric(horizontal: 6, vertical: 2);
+      fontSize = 10;
+    } else {
+      padding = const EdgeInsets.symmetric(horizontal: 10, vertical: 4);
+      fontSize = 12;
+    }
+
+    return Container(
+      padding: padding,
+      decoration: BoxDecoration(
+        color: backgroundColor,
+        borderRadius: BorderRadius.circular(999),
+        border: Border.fromBorderSide(borderSide),
+      ),
+      child: Text(
+        label.toUpperCase(),
+        style: TextStyle(
+          color: textColor,
+          fontSize: fontSize,
+          fontWeight: FontWeight.w700,
+          letterSpacing: 0.5,
+        ),
+      ),
+    );
+  }
+}

package/src/templates/flutter/Button.dart

@@ -0,0 +1,116 @@
+import 'package:flutter/material.dart';
+import '../theme/config.dart';
+
+enum CrossUIButtonVariant {
+  defaultVariant,
+  secondary,
+  outline,
+  ghost,
+  destructive,
+}
+
+enum CrossUIButtonSize { sm, defaultSize, lg }
+
+class CrossUIButton extends StatelessWidget {
+  final String label;
+  final VoidCallback? onPressed;
+  final CrossUIButtonVariant variant;
+  final CrossUIButtonSize size;
+  final bool disabled;
+  final Widget? icon;
+
+  const CrossUIButton({
+    Key? key,
+    required this.label,
+    this.onPressed,
+    this.variant = CrossUIButtonVariant.defaultVariant,
+    this.size = CrossUIButtonSize.defaultSize,
+    this.disabled = false,
+    this.icon,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    Color backgroundColor;
+    Color foregroundColor;
+    BorderSide borderSide = BorderSide.none;
+
+    final themeColors = CrossUITheme.colors;
+
+    switch (variant) {
+      case CrossUIButtonVariant.secondary:
+        backgroundColor = themeColors['secondary'] ?? Colors.grey;
+        foregroundColor = Colors.white;
+        break;
+      case CrossUIButtonVariant.outline:
+        backgroundColor = Colors.transparent;
+        foregroundColor = themeColors['primary'] ?? Colors.blue;
+        borderSide = BorderSide(color: themeColors['primary'] ?? Colors.blue);
+        break;
+      case CrossUIButtonVariant.ghost:
+        backgroundColor = Colors.transparent;
+        foregroundColor = themeColors['primary'] ?? Colors.blue;
+        break;
+      case CrossUIButtonVariant.destructive:
+        backgroundColor = Colors.red;
+        foregroundColor = Colors.white;
+        break;
+      case CrossUIButtonVariant.defaultVariant:
+      default:
+        backgroundColor = themeColors['primary'] ?? Colors.blue;
+        foregroundColor = themeColors['background'] ?? Colors.white;
+        break;
+    }
+
+    if (disabled) {
+      backgroundColor = backgroundColor.withOpacity(0.5);
+      foregroundColor = foregroundColor.withOpacity(0.5);
+    }
+
+    EdgeInsets padding;
+    double fontSize;
+    switch (size) {
+      case CrossUIButtonSize.sm:
+        padding = const EdgeInsets.symmetric(horizontal: 12, vertical: 8);
+        fontSize = CrossUITokens.fontSizeSm;
+        break;
+      case CrossUIButtonSize.lg:
+        padding = const EdgeInsets.symmetric(horizontal: 24, vertical: 16);
+        fontSize = CrossUITokens.fontSizeLg;
+        break;
+      case CrossUIButtonSize.defaultSize:
+      default:
+        padding = const EdgeInsets.symmetric(horizontal: 16, vertical: 12);
+        fontSize = CrossUITokens.fontSizeBase;
+        break;
+    }
+
+    return InkWell(
+      onTap: disabled ? null : onPressed,
+      borderRadius: BorderRadius.circular(CrossUITokens.radiusMedium),
+      child: Container(
+        padding: padding,
+        decoration: BoxDecoration(
+          color: backgroundColor,
+          borderRadius: BorderRadius.circular(CrossUITokens.radiusMedium),
+          border: Border.fromBorderSide(borderSide),
+        ),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            if (icon != null) ...[icon!, const SizedBox(width: 8)],
+            Text(
+              label,
+              style: TextStyle(
+                color: foregroundColor,
+                fontSize: fontSize,
+                fontWeight: FontWeight.w600,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

package/src/templates/flutter/Card.dart

@@ -0,0 +1,91 @@
+import 'package:flutter/material.dart';
+import '../theme/tokens.dart';
+
+class CrossUICard extends StatelessWidget {
+  final Widget? header;
+  final Widget? title;
+  final Widget? description;
+  final Widget child;
+  final Widget? footer;
+  final VoidCallback? onTap;
+
+  const CrossUICard({
+    Key? key,
+    required this.child,
+    this.header,
+    this.title,
+    this.description,
+    this.footer,
+    this.onTap,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: onTap,
+      borderRadius: BorderRadius.circular(CrossUITokens.radiusLarge),
+      child: Container(
+        decoration: BoxDecoration(
+          color: Colors.white,
+          borderRadius: BorderRadius.circular(CrossUITokens.radiusLarge),
+          border: Border.all(color: CrossUITokens.border),
+          boxShadow: [
+            BoxShadow(
+              color: Colors.black.withOpacity(0.05),
+              blurRadius: 10,
+              offset: const Offset(0, 4),
+            ),
+          ],
+        ),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            if (header != null || title != null || description != null)
+              Padding(
+                padding: const EdgeInsets.all(CrossUITokens.spacingL),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    if (header != null) header!,
+                    if (title != null) ...[
+                      DefaultTextStyle(
+                        style: const TextStyle(
+                          fontSize: CrossUITokens.fontSize2xl,
+                          fontWeight: FontWeight.bold,
+                          color: CrossUITokens.dark,
+                        ),
+                        child: title!,
+                      ),
+                    ],
+                    if (description != null) ...[
+                      const SizedBox(height: 4),
+                      DefaultTextStyle(
+                        style: const TextStyle(
+                          fontSize: CrossUITokens.fontSizeSm,
+                          color: Colors.grey,
+                        ),
+                        child: description!,
+                      ),
+                    ],
+                  ],
+                ),
+              ),
+            Padding(
+              padding: const EdgeInsets.symmetric(horizontal: CrossUITokens.spacingL),
+              child: child,
+            ),
+            if (footer != null) ...[
+              const SizedBox(height: CrossUITokens.spacingL),
+              const Divider(height: 1),
+              Padding(
+                padding: const EdgeInsets.all(CrossUITokens.spacingL),
+                child: footer!,
+              ),
+            ] else 
+              const SizedBox(height: CrossUITokens.spacingL),
+          ],
+        ),
+      ),
+    );
+  }
+}

package/src/templates/flutter/Input.dart

@@ -0,0 +1,73 @@
+import 'package:flutter/material.dart';
+import '../theme/tokens.dart';
+
+class CrossUIInput extends StatelessWidget {
+  final String? placeholder;
+  final TextEditingController? controller;
+  final bool obscureText;
+  final TextInputType? keyboardType;
+  final void Function(String)? onChanged;
+  final bool disabled;
+  final String? label;
+
+  const CrossUIInput({
+    Key? key,
+    this.placeholder,
+    this.controller,
+    this.obscureText = false,
+    this.keyboardType,
+    this.onChanged,
+    this.disabled = false,
+    this.label,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        if (label != null) ...[
+          Text(
+            label!,
+            style: const TextStyle(
+              fontSize: CrossUITokens.fontSizeSm,
+              fontWeight: FontWeight.w600,
+              color: CrossUITokens.dark,
+            ),
+          ),
+          const SizedBox(height: CrossUITokens.spacingXs),
+        ],
+        TextField(
+          controller: controller,
+          obscureText: obscureText,
+          keyboardType: keyboardType,
+          onChanged: onChanged,
+          enabled: !disabled,
+          style: const TextStyle(fontSize: CrossUITokens.fontSizeBase),
+          decoration: InputDecoration(
+            hintText: placeholder,
+            hintStyle: const TextStyle(color: Color(0xFF94A3B8)),
+            contentPadding: const EdgeInsets.symmetric(
+              horizontal: CrossUITokens.spacingM,
+              vertical: CrossUITokens.spacingM,
+            ),
+            filled: true,
+            fillColor: disabled ? const Color(0xFFF1F5F9) : Colors.white,
+            enabledBorder: OutlineInputBorder(
+              borderRadius: BorderRadius.circular(CrossUITokens.radiusMedium),
+              borderSide: const BorderSide(color: CrossUITokens.border),
+            ),
+            focusedBorder: OutlineInputBorder(
+              borderRadius: BorderRadius.circular(CrossUITokens.radiusMedium),
+              borderSide: const BorderSide(color: CrossUITokens.primary, width: 2),
+            ),
+            disabledBorder: OutlineInputBorder(
+              borderRadius: BorderRadius.circular(CrossUITokens.radiusMedium),
+              borderSide: const BorderSide(color: CrossUITokens.border),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}

package/src/templates/flutter/Text.dart

@@ -0,0 +1,87 @@
+import 'package:flutter/material.dart';
+import '../theme/tokens.dart';
+
+enum CrossUITextVariant { h1, h2, h3, h4, h5, h6, body, subtitle, caption, muted, code }
+
+class CrossUIText extends StatelessWidget {
+  final String text;
+  final CrossUITextVariant variant;
+  final Color? color;
+  final TextAlign? textAlign;
+  final FontWeight? fontWeight;
+
+  const CrossUIText(
+    this.text, {
+    Key? key,
+    this.variant = CrossUITextVariant.body,
+    this.color,
+    this.textAlign,
+    this.fontWeight,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    double fontSize;
+    FontWeight defaultFontWeight = FontWeight.normal;
+    Color defaultColor = color ?? CrossUITokens.dark;
+    bool isCode = false;
+
+    switch (variant) {
+      case CrossUITextVariant.h1:
+        fontSize = CrossUITokens.fontSize6xl;
+        defaultFontWeight = FontWeight.w900;
+        break;
+      case CrossUITextVariant.h2:
+        fontSize = CrossUITokens.fontSize4xl;
+        defaultFontWeight = FontWeight.bold;
+        break;
+      case CrossUITextVariant.h3:
+        fontSize = CrossUITokens.fontSize2xl;
+        defaultFontWeight = FontWeight.bold;
+        break;
+      case CrossUITextVariant.h4:
+        fontSize = CrossUITokens.fontSizeXl;
+        defaultFontWeight = FontWeight.w600;
+        break;
+      case CrossUITextVariant.h5:
+        fontSize = CrossUITokens.fontSizeLg;
+        defaultFontWeight = FontWeight.w600;
+        break;
+      case CrossUITextVariant.h6:
+        fontSize = CrossUITokens.fontSizeBase;
+        defaultFontWeight = FontWeight.w600;
+        break;
+      case CrossUITextVariant.subtitle:
+        fontSize = CrossUITokens.fontSizeLg;
+        defaultColor = color ?? Colors.grey[700]!;
+        break;
+      case CrossUITextVariant.caption:
+        fontSize = CrossUITokens.fontSizeXs;
+        defaultColor = color ?? Colors.grey[600]!;
+        break;
+      case CrossUITextVariant.muted:
+        fontSize = CrossUITokens.fontSizeSm;
+        defaultColor = color ?? Colors.grey[500]!;
+        break;
+      case CrossUITextVariant.code:
+        fontSize = CrossUITokens.fontSizeSm;
+        isCode = true;
+        break;
+      case CrossUITextVariant.body:
+      default:
+        fontSize = CrossUITokens.fontSizeBase;
+        break;
+    }
+
+    return Text(
+      text,
+      textAlign: textAlign,
+      style: TextStyle(
+        fontSize: fontSize,
+        fontWeight: fontWeight ?? defaultFontWeight,
+        color: defaultColor,
+        fontFamily: isCode ? 'monospace' : null,
+      ),
+    );
+  }
+}

package/src/templates/flutter/utils.dart

@@ -0,0 +1,13 @@
+import 'package:flutter/material.dart';
+
+class CrossUIUtils {
+  static TextStyle cnText(List<TextStyle?> styles) {
+    TextStyle result = const TextStyle();
+    for (var style in styles) {
+      if (style != null) {
+        result = result.merge(style);
+      }
+    }
+    return result;
+  }
+}

package/src/templates/web/Accordion.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "flex flex-1 items-center justify-between py-4 text-left text-sm font-medium transition-all hover:underline [&&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDown className="size-4 shrink-0 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+      {...props}
+    >
+      <div className={cn("pb-4 pt-0", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/templates/web/Alert.tsx

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid grid-cols-[auto_1fr] gap-x-3 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive border-destructive/50 bg-destructive/5 dark:bg-destructive/10 [&>svg]:text-destructive",
+        info: "text-blue-600 border-blue-500/50 bg-blue-50 dark:bg-blue-950/20 dark:text-blue-400 [&>svg]:text-blue-600 dark:[&>svg]:text-blue-400",
+        success:
+          "text-green-600 border-green-500/50 bg-green-50 dark:bg-green-950/20 dark:text-green-400 [&>svg]:text-green-600 dark:[&>svg]:text-green-400",
+        warning:
+          "text-yellow-600 border-yellow-500/50 bg-yellow-50 dark:bg-yellow-950/20 dark:text-yellow-400 [&>svg]:text-yellow-600 dark:[&>svg]:text-yellow-400",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription };