# `Toddy.Iced`
[🔗](https://github.com/toddy-ui/toddy-elixir/blob/v0.3.0/lib/toddy/iced.ex#L1)

Strict parity layer for iced widgets.

Every function maps 1:1 to an iced widget and returns a plain node map:

    %{id: id, type: type_string, props: %{...}, children: [...]}

No macro sugar, no auto-IDs -- just data. Props are accepted as atom-keyed
maps for ergonomics and normalised to string keys in the output.

## Per-widget modules

Each widget also lives in its own module under `Toddy.Iced.Widget.*`,
matching iced's `iced::widget::*` structure. Those modules provide typed
structs with builder functions for compile-time safety:

    alias Toddy.Iced.Widget.Button

    Button.new("btn", "Click me")
    |> Button.style(:primary)
    |> Button.build()

This module provides untyped convenience functions that produce raw
`ui_node()` maps from props maps (matching iced's `iced::widget::button()`
pattern):

    Toddy.Iced.button("btn", %{label: "Click me"})
    Toddy.Iced.column("col", %{spacing: 10}, children)

## Types

Several prop values have shared formats across widgets. See the type helper
modules for constructors and encoding:

- `Toddy.Iced.Length` -- `:fill`, `:shrink`, `{:fill_portion, n}`, or a number
- `Toddy.Iced.Padding` -- uniform number, `{v, h}` tuple, or per-side map
- `Toddy.Iced.Color` -- hex string `"#rrggbb"` / `"#rrggbbaa"`, or `%{r, g, b, a}` map (0.0-1.0 floats)
- `Toddy.Iced.Font` -- `:default`, `:monospace`, or `%{family, weight, style, stretch}` map
- `Toddy.Iced.Alignment` -- `:left` / `:center` / `:right` / `:top` / `:bottom` (with `:start` / `:end` aliases)
- `Toddy.Iced.Border` -- `%{color, width, radius}` map
- `Toddy.Iced.Shadow` -- `%{color, offset, blur_radius}` map
- `Toddy.Iced.Theme` -- built-in theme atom or custom palette map
- `Toddy.Iced.Gradient` -- `%{type: "linear", angle, stops}` map

## Named styles

Many widgets accept a `style` prop (atom preset or `StyleMap`). The
available preset names vary by widget and map to iced's built-in style
functions. See each widget's documentation for the list of accepted values.

# `props`

```elixir
@type props() :: %{optional(atom()) => term()}
```

Props map accepted by widget builders (atom keys, normalised to strings internally).

# `ui_node`

```elixir
@type ui_node() :: %{
  id: String.t(),
  type: String.t(),
  props: %{optional(String.t()) => term()},
  children: [ui_node()]
}
```

A UI tree node map. Every widget builder returns this shape.

# `button`

```elixir
@spec button(id :: String.t(), props :: props()) :: ui_node()
```

Button -- clickable widget that emits `%Widget{type: :click, id: id}` events.

See `Toddy.Iced.Widget.Button` for full props documentation.

# `canvas`

```elixir
@spec canvas(id :: String.t(), props :: props()) :: ui_node()
```

Canvas for drawing shapes.

See `Toddy.Iced.Widget.Canvas` for full props documentation.

# `checkbox`

```elixir
@spec checkbox(id :: String.t(), props :: props()) :: ui_node()
```

Checkbox -- toggleable boolean input.

See `Toddy.Iced.Widget.Checkbox` for full props documentation.

# `column`

```elixir
@spec column(id :: String.t(), props :: props(), children :: [ui_node()]) :: ui_node()
```

Column layout -- arranges children vertically.

See `Toddy.Iced.Widget.Column` for full props documentation.

# `combo_box`

```elixir
@spec combo_box(id :: String.t(), props :: props()) :: ui_node()
```

Combo box -- searchable dropdown with free-form text input.

See `Toddy.Iced.Widget.ComboBox` for full props documentation.

# `container`

```elixir
@spec container(id :: String.t(), props :: props(), children :: [ui_node()]) ::
  ui_node()
```

Container layout -- wraps a single child with padding, sizing, and styling.

See `Toddy.Iced.Widget.Container` for full props documentation.

# `float_widget`

```elixir
@spec float_widget(id :: String.t(), props :: props(), children :: [ui_node()]) ::
  ui_node()
```

Floating overlay -- positions child with optional translation and scaling.

See `Toddy.Iced.Widget.Float` for full props documentation.

# `grid`

```elixir
@spec grid(id :: String.t(), props :: props(), children :: [ui_node()]) :: ui_node()
```

Grid layout -- arranges children in a fixed-column grid.

See `Toddy.Iced.Widget.Grid` for full props documentation.

# `image`

```elixir
@spec image(id :: String.t(), props :: props()) :: ui_node()
```

Image display -- renders a raster image from a file path.

See `Toddy.Iced.Widget.Image` for full props documentation.

# `keyed_column`

```elixir
@spec keyed_column(id :: String.t(), props :: props(), children :: [ui_node()]) ::
  ui_node()
```

Keyed column -- like `column/3` but uses child IDs as keys for efficient
list diffing.

See `Toddy.Iced.Widget.KeyedColumn` for full props documentation.

# `markdown`

```elixir
@spec markdown(id :: String.t(), props :: props()) :: ui_node()
```

Markdown display -- renders parsed markdown content.

See `Toddy.Iced.Widget.Markdown` for full props documentation.

# `mouse_area`

```elixir
@spec mouse_area(id :: String.t(), props :: props(), children :: [ui_node()]) ::
  ui_node()
```

Mouse area -- captures mouse events on child content.

See `Toddy.Iced.Widget.MouseArea` for full props documentation.

# `overlay`

```elixir
@spec overlay(id :: String.t(), props :: props(), children :: [ui_node()]) ::
  ui_node()
```

Overlay container -- positions second child as a floating overlay relative
to the first child (anchor).

See `Toddy.Iced.Widget.Overlay` for full props documentation.

# `pane_grid`

```elixir
@spec pane_grid(id :: String.t(), props :: props(), children :: [ui_node()]) ::
  ui_node()
```

Pane grid -- resizable tiled panes.

See `Toddy.Iced.Widget.PaneGrid` for full props documentation.

# `pick_list`

```elixir
@spec pick_list(id :: String.t(), props :: props()) :: ui_node()
```

Pick list -- dropdown selection.

See `Toddy.Iced.Widget.PickList` for full props documentation.

# `pin`

```elixir
@spec pin(id :: String.t(), props :: props(), children :: [ui_node()]) :: ui_node()
```

Pin layout -- positions child at absolute coordinates.

See `Toddy.Iced.Widget.Pin` for full props documentation.

# `progress_bar`

```elixir
@spec progress_bar(id :: String.t(), props :: props()) :: ui_node()
```

Progress bar -- displays progress within a range.

See `Toddy.Iced.Widget.ProgressBar` for full props documentation.

# `qr_code`

```elixir
@spec qr_code(id :: String.t(), props :: props()) :: ui_node()
```

QR code display -- renders a QR code from a data string.

See `Toddy.Iced.Widget.QrCode` for full props documentation.

# `radio`

```elixir
@spec radio(id :: String.t(), props :: props()) :: ui_node()
```

Radio button -- one-of-many selection.

See `Toddy.Iced.Widget.Radio` for full props documentation.

# `responsive`

```elixir
@spec responsive(id :: String.t(), props :: props(), children :: [ui_node()]) ::
  ui_node()
```

Responsive layout -- adapts to available size by reporting resize events.

See `Toddy.Iced.Widget.Responsive` for full props documentation.

# `rich_text`

```elixir
@spec rich_text(id :: String.t(), props :: props()) :: ui_node()
```

Rich text display with individually styled spans.

See `Toddy.Iced.Widget.RichText` for full props documentation.

# `row`

```elixir
@spec row(id :: String.t(), props :: props(), children :: [ui_node()]) :: ui_node()
```

Row layout -- arranges children horizontally.

See `Toddy.Iced.Widget.Row` for full props documentation.

# `rule`

```elixir
@spec rule(id :: String.t(), props :: props()) :: ui_node()
```

Horizontal or vertical rule (divider line).

See `Toddy.Iced.Widget.Rule` for full props documentation.

# `scrollable`

```elixir
@spec scrollable(id :: String.t(), props :: props(), children :: [ui_node()]) ::
  ui_node()
```

Scrollable container -- wraps child content in a scrollable viewport.

See `Toddy.Iced.Widget.Scrollable` for full props documentation.

# `sensor`

```elixir
@spec sensor(id :: String.t(), props :: props(), children :: [ui_node()]) :: ui_node()
```

Sensor -- detects visibility and size changes on child content.

See `Toddy.Iced.Widget.Sensor` for full props documentation.

# `slider`

```elixir
@spec slider(id :: String.t(), props :: props()) :: ui_node()
```

Slider -- horizontal range input.

See `Toddy.Iced.Widget.Slider` for full props documentation.

# `space`

```elixir
@spec space(id :: String.t(), props :: props()) :: ui_node()
```

Empty space -- invisible spacer widget.

See `Toddy.Iced.Widget.Space` for full props documentation.

# `stack`

```elixir
@spec stack(id :: String.t(), props :: props(), children :: [ui_node()]) :: ui_node()
```

Stack layout -- layers children on top of each other.

See `Toddy.Iced.Widget.Stack` for full props documentation.

# `svg`

```elixir
@spec svg(id :: String.t(), props :: props()) :: ui_node()
```

SVG display -- renders a vector image from a file path.

See `Toddy.Iced.Widget.Svg` for full props documentation.

# `table`

```elixir
@spec table(id :: String.t(), props :: props()) :: ui_node()
```

Data table -- composite widget built from columns, rows, and scrollable containers.

See `Toddy.Iced.Widget.Table` for full props documentation.

# `text`

```elixir
@spec text(id :: String.t(), props :: props()) :: ui_node()
```

Text display -- renders static text.

See `Toddy.Iced.Widget.Text` for full props documentation.

# `text_editor`

```elixir
@spec text_editor(id :: String.t(), props :: props()) :: ui_node()
```

Text editor -- multi-line editable text area.

See `Toddy.Iced.Widget.TextEditor` for full props documentation.

# `text_input`

```elixir
@spec text_input(id :: String.t(), props :: props()) :: ui_node()
```

Text input field -- single-line editable text.

See `Toddy.Iced.Widget.TextInput` for full props documentation.

# `themer`

```elixir
@spec themer(id :: String.t(), props :: props(), children :: [ui_node()]) :: ui_node()
```

Per-subtree theme override -- applies a different theme to child widgets.

See `Toddy.Iced.Widget.Themer` for full props documentation.

# `toggler`

```elixir
@spec toggler(id :: String.t(), props :: props()) :: ui_node()
```

Toggler -- on/off switch.

See `Toddy.Iced.Widget.Toggler` for full props documentation.

# `tooltip`

```elixir
@spec tooltip(
  id :: String.t(),
  tip :: String.t(),
  props :: props(),
  children :: [ui_node()]
) ::
  ui_node()
```

Tooltip -- shows a popup tip over child content on hover.

See `Toddy.Iced.Widget.Tooltip` for full props documentation.

# `vertical_slider`

```elixir
@spec vertical_slider(id :: String.t(), props :: props()) :: ui_node()
```

Vertical slider -- vertical range input.

See `Toddy.Iced.Widget.VerticalSlider` for full props documentation.

---

*Consult [api-reference.md](api-reference.md) for complete listing*