# `JobyKit.CoreComponents`
[🔗](https://github.com/jobycorp/joby_kit/blob/v0.2.0/lib/joby_kit/core_components.ex#L1)

Core wrapper components shipped by JobyKit. Each component:

  * Carries `data-component="JobyKit.CoreComponents.<name>"` on its
    root element.
  * Declares every prop with `attr` (variant/size enums via `values:`).
  * Accepts `attr :rest, :global` so callers can pass id/class/aria-*/
    phx-* through.
  * Composes daisyUI primitives + theme tokens internally; the `class`
    attr (where exposed) is **additive**, layered on top of the
    wrapper's identity classes.

Hosts register these against `JobyKit.CoreComponents` in their
manifest:

    component JobyKit.CoreComponents, :button,
      category: :core,
      daisy_basis: "btn",
      summary: "Standard text button.",
      preview: &MyAppWeb.DesignPreviews.button_preview/1

And expose them by `import`ing this module into their `core_components`
/ `html_helpers` (or `_web.ex`) so call sites can use the `<.button>`
form.

## Components

  * `flash/1`, `flash_group/1` — toast-style flashes
  * `button/1` — text/link button with variant + size
  * `card/1` — content surface with eyebrow/title/actions slots
  * `header/1` — page or section header
  * `icon/1` — Heroicon span
  * `input/1` — form input (text, email, select, textarea, checkbox…)
  * `list/1` — generic list
  * `table/1` — table with col/action slots, stream-aware

Plus the JS helpers `show/2`, `hide/2`, and the i18n-free
`translate_error/1`.

# `button`

Standard text button. Renders as `<button>` by default, or `<.link>`
when `href`/`navigate`/`patch` is passed via `:rest`.

    <.button>Send</.button>
    <.button variant="primary" size="sm">Save</.button>
    <.button navigate={~p"/dashboard"}>Home</.button>

## Attributes

* `class` (`:any`) - Defaults to `nil`.
* `variant` (`:string`) - Must be one of `"primary"`.
* `size` (`:string`) - Defaults to `"md"`. Must be one of `"sm"`, `"md"`, or `"lg"`.
* Global attributes are accepted. Supports all globals plus: `["href", "navigate", "patch", "method", "download", "name", "value", "disabled"]`.
## Slots

* `inner_block` (required)

# `card`

daisyUI card with optional eyebrow, title, and actions slots.

    <.card>
      <:eyebrow>/design</:eyebrow>
      <:title>Kit-curated wrappers</:title>
      Body content goes here.
      <:actions><.button>Open</.button></:actions>
    </.card>

## Attributes

* `class` (`:any`) - Defaults to `nil`.
* `variant` (`:string`) - Defaults to `"bordered"`. Must be one of `"bordered"`, `"ghost"`, or `"elevated"`.
* Global attributes are accepted.
## Slots

* `eyebrow`
* `title`
* `actions`
* `inner_block` (required)

# `flash`

Renders a single flash notice. Use inside `flash_group/1` (which the
layout calls), or directly when you want a one-off toast.

    <.flash kind={:info} flash={@flash} />
    <.flash kind={:error} title="Heads up">Something happened</.flash>

## Attributes

* `id` (`:string`) - Defaults to `nil`.
* `flash` (`:map`) - Defaults to `%{}`.
* `title` (`:string`) - Defaults to `nil`.
* `kind` (`:atom`) (required) - Must be one of `:info`, or `:error`.
* Global attributes are accepted.
## Slots

* `inner_block`

# `flash_group`

Renders the standard flash group: `:info` and `:error` flashes plus
the disconnected/server-error toasts wired to `phx-disconnected` /
`phx-connected`. Hosts call this from their root layout.

## Attributes

* `id` (`:string`) - Defaults to `"flash-group"`.
* `flash` (`:map`) (required)
* Global attributes are accepted.

# `header`

Page or section header with optional subtitle and actions slots.

## Attributes

* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)
* `subtitle`
* `actions`

# `hide`

JS command for fading an element out.

# `icon`

Renders a [Heroicon](https://heroicons.com).

Heroicons come in three styles — outline, solid, and mini. Default is
outline; pass `name="hero-foo-solid"` or `name="hero-foo-mini"` for the
others. The host must have the Heroicons CSS plugin installed (Phoenix
ships this by default in `assets/vendor/heroicons.js`).

    <.icon name="hero-x-mark" />
    <.icon name="hero-arrow-path" class="ml-1 size-3 motion-safe:animate-spin" />

## Attributes

* `name` (`:string`) (required)
* `class` (`:any`) - Defaults to `"size-4"`.
* Global attributes are accepted.

# `input`

Renders a form input with label and error messages.

Pass `field={@form[:foo]}` for the common case; the input pulls id,
name, value, and errors from the form field. Otherwise pass `name`,
`value`, `errors` explicitly.

Supported types: text, email, password, number, search, tel, url,
date, datetime-local, month, time, week, color, file, hidden,
checkbox, select, textarea.

    <.input field={@form[:email]} type="email" label="Email" />
    <.input field={@form[:role]} type="select" options={["Admin": "admin"]} />

## Class composition

The wrapper composes the daisyUI input class set internally
(`input` / `select` / `textarea` / `checkbox`). Passing `class` adds
utilities **on top** of those — it does not replace them. To toggle
variants (`size`, error state) the wrapper uses dedicated logic.

## Attributes

* `id` (`:any`) - Defaults to `nil`.
* `name` (`:any`)
* `label` (`:string`) - Defaults to `nil`.
* `value` (`:any`)
* `type` (`:string`) - Defaults to `"text"`. Must be one of `"checkbox"`, `"color"`, `"date"`, `"datetime-local"`, `"email"`, `"file"`, `"month"`, `"number"`, `"password"`, `"search"`, `"select"`, `"tel"`, `"text"`, `"textarea"`, `"time"`, `"url"`, `"week"`, or `"hidden"`.
* `field` (`Phoenix.HTML.FormField`)
* `errors` (`:list`) - Defaults to `[]`.
* `checked` (`:boolean`)
* `prompt` (`:string`) - Defaults to `nil`.
* `options` (`:list`)
* `multiple` (`:boolean`) - Defaults to `false`.
* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted. Supports all globals plus: `["accept", "autocomplete", "capture", "cols", "disabled", "form", "list", "max", "maxlength", "min", "minlength", "multiple", "pattern", "placeholder", "readonly", "required", "rows", "size", "step"]`.

# `list`

Generic data list, one row per `:item` slot.

    <.list>
      <:item title="Title">{@post.title}</:item>
      <:item title="Views">{@post.views}</:item>
    </.list>

## Attributes

* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `item` (required) - Accepts attributes:

  * `title` (`:string`) (required)

# `show`

JS command for fading an element in.

# `table`

Generic table with `:col` slots and an optional `:action` slot. Accepts
either a regular list or a `Phoenix.LiveView.LiveStream` for `:rows`.

    <.table id="users" rows={@users}>
      <:col :let={user} label="id">{user.id}</:col>
      <:col :let={user} label="username">{user.username}</:col>
    </.table>

## Attributes

* `id` (`:string`) (required)
* `rows` (`:list`) (required)
* `class` (`:any`) - Defaults to `nil`.
* `row_id` (`:any`) - Defaults to `nil`.
* `row_click` (`:any`) - Defaults to `nil`.
* `row_item` (`:any`) - Defaults to `&Function.identity/1`.
* Global attributes are accepted.
## Slots

* `col` (required) - Accepts attributes:

  * `label` (`:string`)
* `action`

# `translate_error`

Translate an Ecto error tuple `{msg, opts}` into a plain string by
interpolating `%{key}` placeholders. No Gettext dependency — hosts
that need i18n should override this function (or wrap `<.input>`).

---

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