# `A2UIPhoenix.Components.Basic`
[🔗](https://github.com/a2ui-elixir/a2ui/blob/v0.1.1/umbrella/apps/a2ui_phoenix/lib/a2ui_phoenix/components/basic.ex#L1)

Function components for the basic catalog (v0.9.1 and v1.0): `Text`,
`Image`, `Icon`, `Video`, `AudioPlayer`, `Row`, `Column`, `List`,
`Card`, `Tabs`, `Modal`, `Divider`, `Button`, `TextField`, `CheckBox`,
`ChoicePicker`, `Slider` and `DateTimeInput`.

Every element carries a namespaced class: the component's
(`a2ui-button`), its variant (`a2ui-button-primary`) and its parts
(`a2ui-tabs-tab`), as in the reference web renderers. States are ARIA
attributes (`aria-selected`, `aria-pressed`, `aria-invalid`), and the
input components share one anatomy: an `a2ui-field` with an
`a2ui-field-label`, the control and the `a2ui-field-errors` of its failed
checks, marked `data-a2ui-empty` while it holds no value.
`priv/static/a2ui_phoenix.css` styles them all from `--a2ui-*` tokens.

Inputs are named with `A2UIPhoenix.Context.input_name/2` and report
changes through the surface's form; buttons, tabs, modals and chips send
click events to the surface (`A2UIPhoenix.Surface`). Interactive elements
use native controls and, where the control alone does not say it, the
ARIA role from `A2UICore.Accessibility` (a `radiogroup` for a
single-choice picker).

`components/0` is the component map `A2UIPhoenix.Surface` starts from;
a host overrides or extends it with its own `%{type => component}`.

# `audio_player`
*since 0.1.0* 

```elixir
@spec audio_player(map()) :: Phoenix.LiveView.Rendered.t()
```

`AudioPlayer`.

# `button`
*since 0.1.0* 

```elixir
@spec button(map()) :: Phoenix.LiveView.Rendered.t()
```

`Button`: invokes its `action`; disabled while its checks fail.

# `card`
*since 0.1.0* 

```elixir
@spec card(map()) :: Phoenix.LiveView.Rendered.t()
```

`Card`.

# `check_box`
*since 0.1.0* 

```elixir
@spec check_box(map()) :: Phoenix.LiveView.Rendered.t()
```

`CheckBox`.

# `choice_picker`
*since 0.1.0* 

```elixir
@spec choice_picker(map()) :: Phoenix.LiveView.Rendered.t()
```

`ChoicePicker`: radio buttons, checkboxes or chips over `options`,
optionally with a filter.

# `column`
*since 0.1.0* 

```elixir
@spec column(map()) :: Phoenix.LiveView.Rendered.t()
```

`Column`: children stacked.

# `components`
*since 0.1.0* 

```elixir
@spec components() :: %{
  required(String.t()) => (map() -> Phoenix.LiveView.Rendered.t())
}
```

The basic catalog's components by type.

# `date_time_input`
*since 0.1.0* 

```elixir
@spec date_time_input(map()) :: Phoenix.LiveView.Rendered.t()
```

`DateTimeInput`: a date input, a time input, or both.

# `divider`
*since 0.1.0* 

```elixir
@spec divider(map()) :: Phoenix.LiveView.Rendered.t()
```

`Divider`.

# `icon`
*since 0.1.0* 

```elixir
@spec icon(map()) :: Phoenix.LiveView.Rendered.t()
```

`Icon`: a Material Symbols ligature, or an SVG path (`{svgPath}`).

# `icon_name`
*since 0.1.0* 

```elixir
@spec icon_name(term()) :: String.t()
```

The Material Symbols ligature of a catalog icon name.

    iex> A2UIPhoenix.Components.Basic.icon_name("arrowBack")
    "arrow_back"
    iex> A2UIPhoenix.Components.Basic.icon_name("play")
    "play_arrow"

# `image`
*since 0.1.0* 

```elixir
@spec image(map()) :: Phoenix.LiveView.Rendered.t()
```

`Image`.

# `list`
*since 0.1.0* 

```elixir
@spec list(map()) :: Phoenix.LiveView.Rendered.t()
```

`List`: children in a scrolling list.

# `modal`
*since 0.1.0* 

```elixir
@spec modal(map()) :: Phoenix.LiveView.Rendered.t()
```

`Modal`: the trigger, and the content in a dialog while it is open. A
click on the trigger opens it — also when the trigger is a button with
an action of its own.

# `row`
*since 0.1.0* 

```elixir
@spec row(map()) :: Phoenix.LiveView.Rendered.t()
```

`Row`: children side by side.

# `slider`
*since 0.1.0* 

```elixir
@spec slider(map()) :: Phoenix.LiveView.Rendered.t()
```

`Slider`: a range input showing its value.

# `tabs`
*since 0.1.0* 

```elixir
@spec tabs(map()) :: Phoenix.LiveView.Rendered.t()
```

`Tabs`: a tab bar and the open tab's content.

# `text_component`
*since 0.1.0* 

```elixir
@spec text_component(map()) :: Phoenix.LiveView.Rendered.t()
```

`Text`: a heading (v0.9 `h1`–`h5`), a caption, or body text.

# `text_field`
*since 0.1.0* 

```elixir
@spec text_field(map()) :: Phoenix.LiveView.Rendered.t()
```

`TextField`: a text, number, password or multi-line input.

# `video`
*since 0.1.0* 

```elixir
@spec video(map()) :: Phoenix.LiveView.Rendered.t()
```

`Video`.

---

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