fyarn 1.1.4

A high-performance, context-aware CLI and Design System engine for Flutter.

🧶 Fyarn CLI & UI Design System

Fyarn is a high-performance, context-aware CLI and Design System for Flutter. Strongly inspired by the philosophy of modern web tools (like shadcn/ui), Fyarn allows you to generate beautifully designed, accessible, and highly customizable UI components directly into your Flutter source code.

It's not a package you install. It's code you own.

---

⚡ Why Fyarn?

Most UI libraries in Flutter lock you into rigid ThemeData implementations or force you to install heavy external packages. Fyarn takes a different approach:

• Code Ownership: The CLI generates raw .dart files into your project. Modify every pixel, animation, and behavior.
• Zero Global State: Powered by an atomic InheritedWidget architecture.
• 100% Theme Reactive: Through the context.fy extension, components react to Dark/Light modes instantly.
• Atomic Design: Built on top of tokens (Spacing, Typography, Shapes, Colors) for total consistency.

---

🚀 Quick Start

1. Install the CLI

Activate Fyarn globally on your machine:

dart pub global activate fyarn

2. Initialize your Project

Navigate to your Flutter project and run:

fyarn init

This generates the foundational Design System Engine inside lib/components/core/.

3. Setup the Engine

Initialize the themes in your main() and wrap your app:

import 'package:your_app/components/core/theme/fyarn_theme.dart';
import 'package:your_app/components/core/theme/fyarn_theme_engine.dart';
import 'package:your_app/components/core/theme/presets/default_colors.dart';

void main() {
  // Register your themes
  FyarnThemeEngine.register('default', FyarnColorsDefault());
  FyarnThemeEngine.register('default_dark', FyarnColorsDefaultDark());

  runApp(
    const FyApp(),
  );
}

class FyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FyarnTheme(
      themeName: 'default', // Your registered theme name
      child: MaterialApp(
        home: const HomePage(),
      ),
    );
  }
}

---

📦 Adding Components

Need a component? Use the add command. Fyarn will generate the component and its dependencies.

# Add a single component
fyarn add button

# Add multiple components
fyarn add card text badge dialog

Usage

Access the engine tokens using the semantic context.fy extension:

Widget build(BuildContext context) {
  final fy = context.fy;
  
  return Container(
    padding: EdgeInsets.all(fy.spacing.md),
    color: fy.colors.background,
    child: FyarnButton(
      text: 'Fyarn Rocks!',
      variant: FyarnButtonVariant.primary,
      onPressed: () {},
    ),
  );
}

---

🧩 Component Registry

Fyarn inclui mais de 50 componentes premium prontos para uso. Abaixo estão os principais:

Componente	Comando	Descrição
Accordion	fyarn add accordion	Painéis de expansão animados.
Alert	fyarn add alert	Mensagens de feedback e status.
Alert Dialog	fyarn add alert_dialog	Modais de confirmação crítica.
Avatar	fyarn add avatar	Imagens de perfil com fallback.
Badge	fyarn add badge	Pequenos indicadores de status.
Button	fyarn add button	Botões premium com ícones e loading.
Calendar	fyarn add calendar	Seletor de data elegante.
Card	fyarn add card	Container versátil para conteúdo.
Carousel	fyarn add carousel	Slider de conteúdo animado.
Checkbox	fyarn add checkbox	Seleção binária premium.
Data Table	fyarn add data_table	Tabelas de dados complexas.
Dialog	fyarn add dialog	Janelas modais versáteis.
Input	fyarn add input	Campos de texto com ícones.
Input OTP	fyarn add input_otp	Campos para códigos de verificação.
Sonner	fyarn add sonner	Sistema de notificações (Toasts).
Tabs	fyarn add tabs	Navegação por abas.
User	fyarn add user	Cartões de perfil com email e bio.

Veja a lista completa em COMPOENTS.md

---

🔐 Autenticação Imersiva

Fyarn se destaca em fluxos de Auth com variantes de alta fidelidade:

• fyarn add login --variant immersive
• fyarn add signup --variant immersive
• E mais variantes: minimal, card, split.

---

🎨 The context.fy Philosophy

Stop wrestling with Flutter's massive global Theme.of(context). Fyarn provides localized, semantic tokens:

Old Flutter Way	✅ The Fyarn Way
Theme.of(context).colorScheme.primary	context.fy.colors.primary
const EdgeInsets.all(16.0)	EdgeInsets.all(context.fy.spacing.md)
Theme.of(context).textTheme.headlineMedium	context.fy.typography.h2

---

📄 License

Distributed under the MIT License. See LICENSE for more information.

Made with passion by the Fyarn Team.