update readme, update types

FlexLove.lua

@@ -23,10 +23,10 @@ function Color.new(r, g, b, a)
 end
 
 --- Convert hex string to color
----@param hex string -- e.g. "#RRGGBB" or "#RRGGBBAA"
+---@param hexWithTag string -- e.g. "#RRGGBB" or "#RRGGBBAA"
 ---@return Color
-function Color.fromHex(hex)
+function Color.fromHex(hexWithTag)
-  local hex = hex:gsub("#", "")
+  local hex = hexWithTag:gsub("#", "")
   if #hex == 6 then
     local r = tonumber("0x" .. hex:sub(1, 2))
     local g = tonumber("0x" .. hex:sub(3, 4))
@@ -206,6 +206,16 @@ Animation.__index = Animation
 ---@field transition table?
 local AnimationProps = {}
 
+---@class TransformProps
+---@field scale {x?:number, y?:number}?
+---@field rotate number?
+---@field translate {x?:number, y?:number}?
+---@field skew {x?:number, y?:number}?
+
+---@class TransitionProps
+---@field duration number?
+---@field easing string?
+
 ---@param props AnimationProps
 ---@return Animation
 function Animation.new(props)
@@ -359,8 +369,8 @@ end
 ---@field justifySelf JustifySelf -- Alignment of the item itself along main axis (default: AUTO)
 ---@field alignSelf AlignSelf -- Alignment of the item itself along cross axis (default: AUTO)
 ---@field textSize number? -- Font size for text content
----@field transform table -- Transform properties for animations and styling
+---@field transform TransformProps -- Transform properties for animations and styling
----@field transition table -- Transition settings for animations
+---@field transition TransitionProps -- Transition settings for animations
 local Window = {}
 Window.__index = Window
 
@@ -553,7 +563,7 @@ function Window:layoutChildren()
 
   -- Position children
   local currentPos = spacing
-  for i, child in ipairs(self.children) do
+  for _, child in ipairs(self.children) do
     if child.positioning == Positioning.ABSOLUTE then
       goto continue
     end
@@ -949,8 +959,8 @@ end
 ---@field textSize number?
 ---@field justifySelf JustifySelf -- default: auto
 ---@field alignSelf AlignSelf -- default: auto
----@field transform table
+---@field transform TransformProps
----@field transition table
+---@field transition TransitionProps
 local Button = {}
 Button.__index = Button
 

README.md

@@ -1,4 +1,120 @@
 # FlexLöve
+
 A Löve Gui based on Flexbox
 
-This is a single file lib, to use all you need is FlexLove.lua. But you shouldn't use this lib, it is way too early for sane use.
+FlexLöve is a lightweight, flexible GUI library for Löve2D that implements a flexbox-based layout system. It provides a simple way to create and manage UI elements like windows and buttons with automatic layout calculations, animations, and responsive design.
+
+## Features
+
+- **Flexbox Layout**: Implement modern flexbox layouts for UI elements
+- **Window Management**: Create hierarchical window structures with automatic sizing
+- **Button System**: Interactive buttons with click detection and callbacks
+- **Animations**: Built-in animation support for transitions and effects
+- **Responsive Design**: Automatic resizing based on window dimensions
+- **Color Handling**: Utility classes for managing colors in various formats
+- **Text Rendering**: Flexible text display with alignment options
+
+## Installation
+
+To use FlexLove, simply copy the `FlexLove.lua` file into your project's `libs` directory and require it in your main application:
+
+```lua
+local FlexLove = require("libs.FlexLove")
+```
+
+## Basic Usage
+
+```lua
+-- Create a main window
+local mainWindow = FlexLove.GUI.Window.new({
+    x = 100,
+    y = 100,
+    w = 400,
+    h = 300,
+    background = FlexLove.Color.new(0.2, 0.2, 0.2, 1),
+    text = "Main Window",
+})
+
+-- Create a button inside the window
+local button = FlexLove.GUI.Button.new({
+    parent = mainWindow,
+    x = 50,
+    y = 50,
+    w = 100,
+    h = 40,
+    text = "Click Me",
+    callback = function(button)
+        print("Button clicked!")
+    end,
+})
+
+-- In your love.update function
+function love.update(dt)
+    FlexLove.GUI.update(dt)
+end
+
+-- In your love.draw function
+function love.draw()
+    FlexLove.GUI.draw()
+end
+```
+
+## API Reference
+
+### Color
+
+Utility class for color handling with RGB and RGBA components.
+
+- `Color.new(r, g, b, a)` - Create new color instance
+- `Color.fromHex(hex)` - Convert hex string to color
+- `Color:toHex()` - Convert color to hex string
+- `Color:toRGBA()` - Get RGBA values
+
+### Window
+
+Main window class for creating UI containers.
+
+- `Window.new(props)` - Create a new window
+- `Window:addChild(child)` - Add child elements to the window
+- `Window:draw()` - Draw the window and all its children
+- `Window:update(dt)` - Update window state (propagates to children)
+- `Window:resize(newWidth, newHeight)` - Resize window based on game size change
+
+### Button
+
+Interactive button element.
+
+- `Button.new(props)` - Create a new button
+- `Button:draw()` - Draw the button
+- `Button:update(dt)` - Update button state (handles click detection)
+- `Button:updateText(newText, autoresize)` - Update button text
+
+### Animation
+
+Animation system for UI transitions.
+
+- `Animation.new(props)` - Create a new animation
+- `Animation:interpolate()` - Get interpolated values during animation
+- `Animation:apply(element)` - Apply animation to a GUI element
+- `Animation.fade(duration, fromOpacity, toOpacity)` - Create a fade animation
+- `Animation.scale(duration, fromScale, toScale)` - Create a scale animation
+
+## Enums
+
+Predefined enums for various layout and styling options:
+
+- TextAlign: START, CENTER, END, JUSTIFY
+- Positioning: ABSOLUTE, FLEX
+- FlexDirection: HORIZONTAL, VERTICAL
+- JustifyContent: FLEX_START, CENTER, SPACE_AROUND, FLEX_END, SPACE_EVENLY, SPACE_BETWEEN
+- AlignItems: STRETCH, FLEX_START, FLEX_END, CENTER, BASELINE
+- AlignSelf: AUTO, STRETCH, FLEX_START, FLEX_END, CENTER, BASELINE
+- AlignContent: STRETCH, FLEX_START, FLEX_END, CENTER, SPACE_BETWEEN, SPACE_AROUND
+
+## Examples
+
+See the `examples/` directory for complete usage examples.
+
+## License
+
+MIT License - see LICENSE file for details.