# FlexLöve

A comprehensive UI library for LÖVE Framework based on flexbox

## ✨ Features

### 🎨 Flexbox & Grid Layouts

Modern CSS-like layout system with full flexbox and grid support for building responsive UIs.

### 🎭 Theme System

9-patch NinePatch theming with state support (normal, hover, pressed, disabled).

### ✨ State Management

Interactive components with state tracking, counters, toggles, and dynamic updates.

### 📜 Scrollable Content

Smooth scrolling containers with backdrop blur effects and overflow handling for long content lists.

### 🎚️ Sliders & Controls

Draggable sliders with value tracking, perfect for settings menus and adjustable parameters.

### ⌨️ Input & Events

Rich event handling with mouse, keyboard, and touch support. Focus management and input fields.

## Quick Start

    local FlexLove = require("FlexLove")

    -- Initialize with base scaling and theme
    FlexLove.init({
      baseScale = { width = 1920, height = 1080 },
      theme = "space"
    })

    -- Create a button
    local button = FlexLove.new({
      width = "20vw",
      height = "10vh",
      backgroundColor = Color.new(0.2, 0.2, 0.8, 1),
      text = "Click Me",
      themeComponent = "button",
      onEvent = function(element, event)
        print("Button clicked!")
      end
    })

    -- In your love callbacks
    function love.update(dt)
      FlexLove.update(dt)
    end

    function love.draw()
      FlexLove.draw()
    end

## Installation

Add the `modules` directory and `FlexLove.lua` into your LÖVE project.

    git clone https://github.com/mikefreno/FlexLove.git
    cp -r FlexLove/modules your-project/
    cp FlexLove/FlexLove.lua your-project/