# Skua v0.14.1 - Table of Contents

> Headless-first, token-driven UI components for Phoenix LiveView — rich selects, date pickers, dialogs, menus, tables, sliders and toasts that live in the browser top layer. Themeable through CSS tokens, viewport-aware, server-authoritative, with zero third-party JS.

## Pages

- [Skua](readme.md)
- [Skua usage rules](usage-rules.md)
- [Changelog](changelog.md)
- [Skua — Revised Project Plan](plan.md)

## Modules

- [Skua](Skua.md): Skua — headless-first, token-driven UI components for Phoenix LiveView.
- [Skua.Auth.OTP](Skua.Auth.OTP.md): Cryptographically secure numeric one-time-password primitive for the
`mix skua.gen.auth` OTP flows.
- [Skua.Components.Meta](Skua.Components.Meta.md): SEO `<meta>` tags for the document `<head>` — description, Open Graph, and
Twitter cards, plus an optional `robots` directive and a canonical link.
- [Skua.Phone.Countries](Skua.Phone.Countries.md): The country dataset Skua's phone field ships with — `{name, iso2, dial}`
tuples for 230 countries and territories. Self-contained (no third-party
dependency); ported from the aif-core dogfooding app so existing apps get
the identical list.

- Forms
  - [Skua.Components.Date](Skua.Components.Date.md): A date input — a hidden ISO `<input>` that carries the value plus a trigger
that opens a keyboard-navigable calendar (W3C APG date-grid pattern).
  - [Skua.Components.Form](Skua.Components.Form.md): Skua form components — button, label, error, field wrapper, input, textarea,
toggle (checkbox / radio / switch), OTP, chip toggle, segmented control and
slider (single + dual-handle range).
  - [Skua.Components.Phone](Skua.Components.Phone.md): An international phone field — country picker + national number input that
writes a canonical E.164 value (e.g. `"+15555550100"`) into a hidden input
for `phx-change`/`phx-submit`.
  - [Skua.Components.Select](Skua.Components.Select.md): A styled, accessible `<select>` — single or multi, text or badge display,
optionally searchable and creatable.

- Overlays
  - [Skua.Components.Menu](Skua.Components.Menu.md): A dropdown menu — a trigger button that opens a top-layer menu of actions.
  - [Skua.Components.Overlay](Skua.Components.Overlay.md): Top-layer overlay components — popover, dialog and drawer.
  - [Skua.Components.Tooltip](Skua.Components.Tooltip.md): A tooltip — a small top-layer label shown on hover/focus of its trigger.

- Display &amp; feedback
  - [Skua.Components.Display](Skua.Components.Display.md): Display & feedback components — badge, dot, card, header, list, empty state,
spinner, alert, accordion, breadcrumb, avatar, progress, skeleton.
  - [Skua.Components.Table](Skua.Components.Table.md): A token-styled, slot-driven `table` and a `pagination` control.
  - [Skua.Components.Tabs](Skua.Components.Tabs.md): A tabs component — an ARIA tablist with **client-side** panel switching (no
server round-trip), full keyboard support (Left/Right/Up/Down/Home/End), and
roving tabindex. Token-styled and morphdom-safe.

- Theming
  - [Skua.Components.Theme](Skua.Components.Theme.md): A dark/light theme toggle.
  - [Skua.Components.Toast](Skua.Components.Toast.md): Toasts — two complementary mechanisms

- Utilities
  - [Skua.Field](Skua.Field.md): Normalizes a `Phoenix.HTML.FormField` (or raw name/value) into the
attributes every Skua form component needs: a sanitized DOM `id`, the form
`name`, the current `value`, and the list of `errors` to display.
  - [Skua.Phone](Skua.Phone.md): Self-contained phone harness — country data, country/dial-code helpers,
E.164 normalization, display formatting, and an Ecto changeset validator.

## Mix Tasks

- [mix skua.gen.auth](Mix.Tasks.Skua.Gen.Auth.md): Generates an authentication system by running `mix phx.gen.auth` and then
applying Skua's flow-specific changes. The generated code is yours to edit.
- [mix skua.gen.pages](Mix.Tasks.Skua.Gen.Pages.md): Generates editable starter pages and wires their routes
- [mix skua.gen.seo](Mix.Tasks.Skua.Gen.Seo.md): Generate editable, public-facing discovery files and wire them to be served
- [mix skua.install](Mix.Tasks.Skua.Install.md): Installs Skua into the current Phoenix project.
- [mix skua.setup](Mix.Tasks.Skua.Setup.md): A guided, one-command setup that wires up a Skua app end to end. Run it once
inside a fresh Phoenix app
- [mix skua.themes](Mix.Tasks.Skua.Themes.md): Lists every prepackaged theme you can bake in with `mix skua.install --theme <name>`.

