# `EzAuth.UI.Core`
[🔗](https://github.com/thiagomajesk/ez_auth/blob/v0.1.0/lib/ez_auth/ui/core.ex#L1)

Top-level Core helpers for EzAuth.UI.

Sub-namespaces (`Core.Buttons`, `Core.Errors`, `Core.Inputs`) group
focused components by role. This module hosts standalone helpers that
don't fit a sub-namespace.

# `auth_card`

Renders the visual card of an authentication flow: the outer container,
header (built from `:title` + `:subtitle`), the main `:inner_block`,
and an optional `:footer`. Used by SignIn, SignUp, and the task flows
so they share one chrome.

Phoenix LiveComponents require a static HTML tag at the root of their
own template, so hosts wrap this in a thin id-only `<div id={@id}>` for
diff tracking — the visible card lives in this component's `<div>`.

## Options

  * `:title` - heading text shown in the header (required).
  * `:subtitle` - supporting text under the title (required).

## Slots

  * `:inner_block` - main flow content (required).
  * `:footer` - rendered inside `<footer data-part="footer">` (required).

## Styling

  * `[data-part="auth-card"]` - the outer card container.
  * `[data-part="header"]` - the header block.
  * `[data-part="title"]` - the title.
  * `[data-part="subtitle"]` - the subtitle.
  * `[data-part="footer"]` - the footer block.

## Examples

    <div id={@id}>
      <EzAuth.UI.Core.auth_card title="Sign in" subtitle="Welcome back!">
        <.form ...>...</.form>

        <:footer>
          Don't have an account?
          <a href="/sign-up" data-part="footer-link">Sign up</a>
        </:footer>
      </EzAuth.UI.Core.auth_card>
    </div>

## Attributes

* `title` (`:string`) (required)
* `subtitle` (`:string`) (required)
## Slots

* `inner_block` (required)
* `footer` (required)

# `auth_form`

Renders the shared `<.form>` wrapper used by SignIn and SignUp.

Encapsulates the boilerplate that's identical across both flows:
`method="post"`, `phx-target`, `phx-change="change"`, `phx-submit="submit"`,
and `phx-trigger-action`. The host LiveComponent must implement
`handle_event/3` clauses for `"change"` and `"submit"`.

## Options

  * `:form` - the `Phoenix.HTML.Form` to bind (required).
  * `:action` - the form's `action` URL (required).
  * `:trigger_action` - whether to trigger native form submission (required).
  * `:myself` - the host LiveComponent's `@myself` (required).

## Slots

  * `:inner_block` - the form body (required).

## Examples

    <EzAuth.UI.Core.auth_form
      form={@form}
      action="/auth/sign-up"
      trigger_action={@trigger_action}
      myself={@myself}
    >
      <Inputs.email field={@form[:email]} required />
      <Inputs.password field={@form[:password]} required />
      <Buttons.submit label="Sign up" />
    </EzAuth.UI.Core.auth_form>

## Attributes

* `form` (`:any`) (required)
* `action` (`:string`) (required)
* `trigger_action` (`:boolean`) (required)
* `myself` (`:any`) (required)
## Slots

* `inner_block` (required)

# `icon`

Renders an icon SVG inline at the requested size (pixels, applied to
both width and height).

Icons are sourced from [Remix Icon](https://remixicon.com) (Apache 2.0).
Supported names: brand icons (`:apple`, `:facebook`, `:github`, `:google`,
`:microsoft`, `:x`) and generic UI icons (`:link`, `:phone`, `:envelope`,
`:arrow_right`). See `EzAuth.UI.Core.Icon` for the exact Remix Icon
mappings.

## Options

  * `:name` - icon atom to render (required).
  * `:size` - edge length in pixels (required).

## Styling

  * `[data-part="icon"]` - icon container.
  * `[data-icon={name}]` - icon identity on the container.

## Examples

    <EzAuth.UI.Core.icon name={:google} size={20} />
    <EzAuth.UI.Core.icon name={:link} size={20} />

## Attributes

* `name` (`:atom`) (required)
* `size` (`:integer`) (required)
* Global attributes are accepted.

---

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