# PhoenixPaper v0.1.0 - Table of Contents

> A Material Design component library for Phoenix and LiveView, styled with Tailwind CSS.

## Pages

- [README](readme.md)
- [Changelog](changelog.md)
- [AGENTS.md — PhoenixPaper base rules](agents.md)
- [LICENSE](license.md)

## Modules

- [PhoenixPaper](PhoenixPaper.md): PhoenixPaper — a Material Design component library for Phoenix, in the
spirit of [ember-paper](https://github.com/miguelcobain/ember-paper),
built on Tailwind CSS.
- [PhoenixPaper.Accordion](PhoenixPaper.Accordion.md): A collapsible panel (`pp_accordion/1`), in the spirit of MUI's
`Accordion` — composed with `PhoenixPaper.AccordionSummary` (the
clickable header), `PhoenixPaper.AccordionDetails` (the collapsible
content), and optionally `PhoenixPaper.AccordionActions` (a button row
shown only while expanded)
- [PhoenixPaper.AccordionActions](PhoenixPaper.AccordionActions.md): An optional row of right-aligned buttons at the end of an expanded
`PhoenixPaper.Accordion` (`pp_accordion_actions/1`) — shown only while
expanded, the same as `PhoenixPaper.AccordionDetails`. See
`PhoenixPaper.Accordion`'s moduledoc for a full example.
- [PhoenixPaper.AccordionDetails](PhoenixPaper.AccordionDetails.md): The collapsible content of a `PhoenixPaper.Accordion`
(`pp_accordion_details/1`) — hidden until the accordion's checkbox/radio
is checked, via `peer-checked:`. See `PhoenixPaper.Accordion`'s moduledoc
for a full example.
- [PhoenixPaper.AccordionSummary](PhoenixPaper.AccordionSummary.md): The clickable header of a `PhoenixPaper.Accordion` (`pp_accordion_summary/1`)
— a `<label>` pointing at the accordion's hidden checkbox/radio, with a
trailing expand icon that rotates via `peer-checked:`. See
`PhoenixPaper.Accordion`'s moduledoc for a full example.
- [PhoenixPaper.Alert](PhoenixPaper.Alert.md): A Material-flavored alert banner (`pp_alert/1`) — a colored, icon-led
message for status feedback, in the spirit of MUI's `Alert`.
- [PhoenixPaper.AppBar](PhoenixPaper.AppBar.md): A Material Design app bar (`pp_app_bar/1`), in the spirit of MUI's
`AppBar` — a horizontal header bar with a `leading` slot (e.g.
`PhoenixPaper.Drawer.pp_drawer_toggle/1` on mobile), a title (the default
slot), and trailing `actions`.
- [PhoenixPaper.Autocomplete](PhoenixPaper.Autocomplete.md): A Material Design autocomplete — a text field with a filtered dropdown of
options.
- [PhoenixPaper.Avatar](PhoenixPaper.Avatar.md): A user's profile picture, initials, or icon (`pp_avatar/1`), in the
spirit of MUI's `Avatar`.
- [PhoenixPaper.Backdrop](PhoenixPaper.Backdrop.md): A full-screen dimming overlay (`pp_backdrop/1`), in the spirit of MUI's
`Backdrop` — most often used behind a full-page loading spinner, or as the
piece `PhoenixPaper.Dialog` composes for its own overlay.
- [PhoenixPaper.Badge](PhoenixPaper.Badge.md): A small count/status indicator overlapping the corner of its child
(`pp_badge/1`), in the spirit of MUI's `Badge`.
- [PhoenixPaper.Box](PhoenixPaper.Box.md): A generic layout container (`pp_box/1`), in the spirit of MUI's
[`Box`](https://mui.com/material-ui/react-box/) — a bare `<div>` (or
`<span>`/`<pre>` via `tag=`) that exists purely to hold a `class`, not to
apply any visual style of its own.
- [PhoenixPaper.Breadcrumbs](PhoenixPaper.Breadcrumbs.md): A Material Design breadcrumb trail (`pp_breadcrumbs/1`), in the spirit of
MUI's `Breadcrumbs` — a horizontal list of `:item`s with a separator
automatically inserted between them.
- [PhoenixPaper.Button](PhoenixPaper.Button.md): A Material Design button (`pp_button/1`).
- [PhoenixPaper.ButtonGroup](PhoenixPaper.ButtonGroup.md): A Material Design button group (`pp_button_group/1`) — visually joins a
row of `PhoenixPaper.Button`s (or `PhoenixPaper.ToggleButton`s) into one
segmented control by rounding only the group's outer corners and
collapsing the shared borders.
- [PhoenixPaper.Card](PhoenixPaper.Card.md): A Material Design card (`pp_card/1`): `PhoenixPaper.Paper` (the surface)
plus padding and optional title/actions slots.

- [PhoenixPaper.Checkbox](PhoenixPaper.Checkbox.md): A Material Design checkbox (`pp_checkbox/1`).
- [PhoenixPaper.Chip](PhoenixPaper.Chip.md): A compact element for input, attribute, or action (`pp_chip/1`), in the
spirit of MUI's `Chip`.
- [PhoenixPaper.Components](PhoenixPaper.Components.md): `use PhoenixPaper.Components` imports every PhoenixPaper component
(`pp_button/1`, `pp_card/1`, `pp_icon/1`, `pp_checkbox/1`, ...) at once.
- [PhoenixPaper.Container](PhoenixPaper.Container.md): A centered, width-constrained content wrapper (`pp_container/1`), in the
spirit of MUI's
[`Container`](https://mui.com/material-ui/react-container/).
- [PhoenixPaper.Dialog](PhoenixPaper.Dialog.md): A Material-styled modal dialog (`pp_dialog/1`), in the spirit of MUI's
`Dialog` — but built the same way Phoenix's own `mix phx.new`-generated
`core_components.ex` builds its `modal/1`: always present in the DOM,
shown/hidden via `Phoenix.LiveView.JS` commands and CSS transitions, not a
server-tracked `open` assign that re-renders the whole tree. If you've used
that generated modal before, this is the same mechanism with Material
chrome (`PhoenixPaper.Paper` for the surface, elevation, rounded corners)
and `:title`/`:actions` slots instead of one opaque body.
- [PhoenixPaper.Divider](PhoenixPaper.Divider.md): A thin separator line (`pp_divider/1`) — most often used between sections
of a `PhoenixPaper.List`.

- [PhoenixPaper.Drawer](PhoenixPaper.Drawer.md): A Material Design navigation drawer (`pp_drawer/1`) — a vertical panel,
persistent on large screens (`lg:` and up, pinned via `sticky` so it stays
in place as the page scrolls, with its own internal scroll if its content
is taller than the viewport) and toggled by a mobile drawer below that
breakpoint. Compose it with `PhoenixPaper.List` / `PhoenixPaper.ListItem`
for its contents.
- [PhoenixPaper.Elevation](PhoenixPaper.Elevation.md): Material Design elevation (dp 0-24) as Tailwind utility classes.
- [PhoenixPaper.Fab](PhoenixPaper.Fab.md): A Material Design Floating Action Button (`pp_fab/1`) — a circular,
elevated, icon-only button, or (with `extended`) a pill with a label.
Typically anchored to a screen corner by the caller (e.g. `class="fixed
bottom-6 right-6"`).

- [PhoenixPaper.Grid](PhoenixPaper.Grid.md): A 12-column CSS grid container (`pp_grid/1`), in the spirit of MUI's
[`Grid`](https://mui.com/material-ui/react-grid/) `container`. Pair with
`PhoenixPaper.GridItem` for each column-spanning child
- [PhoenixPaper.GridItem](PhoenixPaper.GridItem.md): A column-spanning child (`pp_grid_item/1`) of `PhoenixPaper.Grid`, in the
spirit of MUI's [`Grid`](https://mui.com/material-ui/react-grid/) `item`.
- [PhoenixPaper.Helpers](PhoenixPaper.Helpers.md): Shared helpers used by every `PhoenixPaper` component to implement the
`paperize` contract (see `AGENTS.md`).

- [PhoenixPaper.Icon](PhoenixPaper.Icon.md): A thin wrapper around the heroicon classes that `mix phx.new` already
vendors into every Phoenix 1.7+ app (`assets/vendor/heroicons` + the
Tailwind heroicons plugin generated by the installer).
- [PhoenixPaper.ImageList](PhoenixPaper.ImageList.md): A grid gallery of images (`pp_image_list/1`), in the spirit of MUI's
[`ImageList`](https://mui.com/material-ui/react-image-list/) (the
`standard` variant — masonry/quilted/woven layouts aren't implemented).
Pair with `PhoenixPaper.ImageListItem`
- [PhoenixPaper.ImageListItem](PhoenixPaper.ImageListItem.md): A single tile (`pp_image_list_item/1`) inside `PhoenixPaper.ImageList`, in
the spirit of MUI's `ImageListItem` + `ImageListItemBar` combined — an
image with an optional title/subtitle overlay bar along the bottom edge.

- [PhoenixPaper.Input](PhoenixPaper.Input.md): A Material Design text field (`pp_input/1`) with a floating label — pure
CSS, no JavaScript. Three variants: `outlined` (bordered box), `filled`
(filled background with an underline accent), and `standard` (underline
only, no box/background — and no `shape`, since there's nothing to round).
- [PhoenixPaper.List](PhoenixPaper.List.md): A Material Design list container (`pp_list/1`) — a vertical stack of
`PhoenixPaper.ListItem`s (and optionally `PhoenixPaper.ListSubheader`/
`PhoenixPaper.Divider`).
- [PhoenixPaper.ListItem](PhoenixPaper.ListItem.md): A Material Design list item (`pp_list_item/1`) — for inside
`PhoenixPaper.List`, but also usable on its own (e.g. inside a
`PhoenixPaper.Card`).
- [PhoenixPaper.ListSubheader](PhoenixPaper.ListSubheader.md): A small section label (`pp_list_subheader/1`) for grouping items inside a
`PhoenixPaper.List` (e.g. "Main", "Account").

- [PhoenixPaper.NumberField](PhoenixPaper.NumberField.md): A Material Design number field (`pp_number_field/1`) — a numeric input
with increment/decrement stepper buttons.
- [PhoenixPaper.Paper](PhoenixPaper.Paper.md): The base Material surface (`pp_paper/1`) — a background, an elevation
shadow, and rounded corners. No padding, no title/actions slots; it's the
primitive `PhoenixPaper.Card` is built on top of, for anything that just
needs a raised surface to sit on.
- [PhoenixPaper.Progress](PhoenixPaper.Progress.md): A Material progress indicator (`pp_progress/1`) — `variant="linear"`
(MUI's `LinearProgress`) or `variant="circular"` (MUI's
`CircularProgress`), combined into one component since they share the
same `value`/`color` contract.
- [PhoenixPaper.RadioGroup](PhoenixPaper.RadioGroup.md): A Material Design radio group (`pp_radio_group/1`) — a labeled set of
mutually exclusive radio buttons sharing one `name`.
- [PhoenixPaper.Rating](PhoenixPaper.Rating.md): A Material Design star rating (`pp_rating/1`). Interactive by default (a
row of radio inputs with a pure-CSS hover/checked fill effect, no JS);
pass `readonly` to render a fixed display of `value` filled stars instead.
- [PhoenixPaper.Ripple](PhoenixPaper.Ripple.md): The Material Design ripple effect — a circle that expands from the
click/tap position and fades out.
- [PhoenixPaper.Select](PhoenixPaper.Select.md): A Material Design select field (`pp_select/1`) — a native `<select>`
styled to match `PhoenixPaper.Input`'s `outlined`/`filled` variants.
- [PhoenixPaper.Shape](PhoenixPaper.Shape.md): Material's corner-radius scale as Tailwind classes, so components share
one consistent set of tokens instead of hand-picking `rounded-*` per
component. As with `PhoenixPaper.Elevation`/`PhoenixPaper.Spacing`, every
class is a full literal string (never interpolated) so Tailwind's static
scanner can find it in this file.

- [PhoenixPaper.Skeleton](PhoenixPaper.Skeleton.md): A placeholder loading shape (`pp_skeleton/1`), in the spirit of MUI's
`Skeleton` — a text line, a circular avatar outline, or a rectangular
block, with a pulsing or shimmering animation while real content loads.
- [PhoenixPaper.Slider](PhoenixPaper.Slider.md): A Material Design slider (`pp_slider/1`) — a native `<input
type="range">`, in the spirit of MUI's `Slider`.
- [PhoenixPaper.Snackbar](PhoenixPaper.Snackbar.md): A brief toast notification (`pp_snackbar/1`), in the spirit of MUI's
`Snackbar`.
- [PhoenixPaper.Spacing](PhoenixPaper.Spacing.md): Named spacing tokens on top of Tailwind's default scale (which is already
a 4px/0.25rem grid, compatible with Material's 8dp baseline grid).
- [PhoenixPaper.Stack](PhoenixPaper.Stack.md): A one-dimensional flex layout (`pp_stack/1`), in the spirit of MUI's
[`Stack`](https://mui.com/material-ui/react-stack/) — arranges children in
a row or column with consistent spacing between them.
- [PhoenixPaper.Switch](PhoenixPaper.Switch.md): A Material Design switch (`pp_switch/1`) — an on/off toggle, structured
like `PhoenixPaper.Checkbox` but rendered as a sliding track/thumb.
- [PhoenixPaper.Tab](PhoenixPaper.Tab.md): A single clickable tab (`pp_tab/1`) inside a `PhoenixPaper.Tabs` tablist,
paired with a `PhoenixPaper.TabPanel` sharing the same `id`/`value`. See
`PhoenixPaper.Tabs`'s moduledoc for the full composition example and for
why switching is JS-command-driven rather than the CSS-only
`peer-checked:` trick `PhoenixPaper.Accordion` uses.
- [PhoenixPaper.TabPanel](PhoenixPaper.TabPanel.md): The content shown for one `PhoenixPaper.Tab` (`pp_tab_panel/1`) — hidden
until its matching tab is selected. See `PhoenixPaper.Tabs`'s moduledoc
for the full composition example and why switching needs real
per-element JS targeting rather than a CSS-only trick.
- [PhoenixPaper.Table](PhoenixPaper.Table.md): A Material Design table (`pp_table/1`) — renders a `<table>`, composed
with `PhoenixPaper.TableHead`/`PhoenixPaper.TableBody`/
`PhoenixPaper.TableRow`/`PhoenixPaper.TableCell` (and optionally
`PhoenixPaper.TableFooter`, `PhoenixPaper.TableContainer`)
- [PhoenixPaper.TableBody](PhoenixPaper.TableBody.md): The body section of a `PhoenixPaper.Table` (`pp_table_body/1`) — renders a
`<tbody>` of `PhoenixPaper.TableRow`s. See `PhoenixPaper.Table`'s moduledoc
for a full example.
- [PhoenixPaper.TableCell](PhoenixPaper.TableCell.md): A cell inside a `PhoenixPaper.TableRow` (`pp_table_cell/1`) — renders a
`<th>` when `variant="head"`, a `<td>` otherwise. See
`PhoenixPaper.Table`'s moduledoc for a full example.
- [PhoenixPaper.TableContainer](PhoenixPaper.TableContainer.md): A horizontally-scrolling wrapper for `PhoenixPaper.Table` (`pp_table_container/1`)
— composes `PhoenixPaper.Paper` for the surface (background, elevation,
rounded corners), the same pairing MUI's own docs show
(`<TableContainer component={Paper}>`).
- [PhoenixPaper.TableFooter](PhoenixPaper.TableFooter.md): An optional footer section of a `PhoenixPaper.Table` (`pp_table_footer/1`)
— renders a `<tfoot>` of `PhoenixPaper.TableRow`s, typically for totals or
summary values. See `PhoenixPaper.Table`'s moduledoc for a full example.
- [PhoenixPaper.TableHead](PhoenixPaper.TableHead.md): The header section of a `PhoenixPaper.Table` (`pp_table_head/1`) — renders
a `<thead>` containing `PhoenixPaper.TableRow`s of `variant="head"`
`PhoenixPaper.TableCell`s. See `PhoenixPaper.Table`'s moduledoc for a full
example.
- [PhoenixPaper.TableRow](PhoenixPaper.TableRow.md): A row inside `PhoenixPaper.TableHead`/`PhoenixPaper.TableBody`/
`PhoenixPaper.TableFooter` (`pp_table_row/1`) — renders a `<tr>` with a
hover highlight. See `PhoenixPaper.Table`'s moduledoc for a full example.
- [PhoenixPaper.Tabs](PhoenixPaper.Tabs.md): A tablist container (`pp_tabs/1`), in the spirit of MUI's `Tabs` —
composed with `PhoenixPaper.Tab` (a clickable tab) and
`PhoenixPaper.TabPanel` (its content, usually written *after* the whole
`pp_tabs/1` block, not nested inside it, same as MUI)
- [PhoenixPaper.Tails](PhoenixPaper.Tails.md): Tailwind class utilities like class merging.
- [PhoenixPaper.ThemeToggle](PhoenixPaper.ThemeToggle.md): A light/dark mode toggle (`pp_theme_toggle/1`) with a sun/moon icon in
its thumb, wired to flip `data-theme="dark"` on `<html>` (the same
attribute daisyUI and Phoenix 1.8's generated `app.css` already use —
see AGENTS.md, "Theming"), so it plugs straight into a dark-mode toggle
that may already exist elsewhere on the page.
- [PhoenixPaper.ToggleButton](PhoenixPaper.ToggleButton.md): A Material Design toggle button (`pp_toggle_button/1`) — a button with a
boolean `pressed` state, filled when pressed. Combine several inside a
`PhoenixPaper.ButtonGroup` for a segmented toggle control (e.g. text
alignment, view mode).

- [PhoenixPaper.Tooltip](PhoenixPaper.Tooltip.md): A short text label shown on hover/focus (`pp_tooltip/1`), in the spirit
of MUI's `Tooltip`.
- [PhoenixPaper.TransferList](PhoenixPaper.TransferList.md): A Material Design transfer list — two list boxes with buttons to move
checked items between them.
- [PhoenixPaper.Typography](PhoenixPaper.Typography.md): Material's type scale (`pp_typography/1`) — `variant` picks both the
rendered tag and the text classes, in the spirit of MUI's
[`Typography`](https://mui.com/material-ui/react-typography/).

