# `PhiaUi.Components.Editor.Blocks`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/editor/blocks.ex#L1)

Editor Block Components — 9 structural block primitives for rich text editors.

These components provide the building blocks for content structuring inside an
editor: task lists, callouts, collapsible sections, column layouts, breaks,
styled blockquotes, and decorative horizontal rules.

All components render meaningful HTML without JavaScript (progressive enhancement)
and support dark mode via Tailwind v4 design tokens.

## Components

### Content Blocks
- `task_list/1`            — checklist with interactive checkboxes
- `callout_block/1`        — colored callout box with icon (info/warning/tip/error/note)
- `collapsible_section/1`  — HTML `<details>/<summary>` disclosure widget
- `columns_layout/1`       — CSS grid multi-column layout
- `details_block/1`        — lightweight `<details>/<summary>` block

### Separators & Breaks
- `page_break/1`           — dashed print-oriented page break indicator
- `section_break/1`        — themed HR variants (line/space/ornament/dashed/dotted)

### Styled Text Blocks
- `block_quote_styled/1`   — blockquote with variant styles (default/border/modern/pull)
- `horizontal_rule_styled/1` — decorative HR (solid/dashed/dotted/ornament/gradient/fade)

# `block_quote_styled`

Renders a styled blockquote with variant visual treatments.

Variants:
- `:default` — left border accent with subtle background
- `:border`  — thick left border, no background
- `:modern`  — large decorative quotation mark
- `:pull`    — centered pull-quote with large italic text

## Example

    <.block_quote_styled variant={:modern} citation="Alan Kay">
      The best way to predict the future is to invent it.
    </.block_quote_styled>

## Attributes

* `variant` (`:atom`) - Defaults to `:default`. Must be one of `:default`, `:border`, `:modern`, or `:pull`.
* `citation` (`:string`) - Defaults to `nil`.
* `class` (`:string`) - Defaults to `nil`.
## Slots

* `inner_block` (required)

# `callout_block`

Renders a colored callout block with an optional icon.

Variants map to semantic color schemes:
- `:info`    — blue tones
- `:warning` — amber tones
- `:tip`     — green tones
- `:error`   — red tones
- `:note`    — muted/neutral tones

## Example

    <.callout_block id="note-1" variant={:warning} icon="alert-triangle">
      This action cannot be undone.
    </.callout_block>

## Attributes

* `id` (`:string`) (required)
* `variant` (`:atom`) - Defaults to `:info`. Must be one of `:info`, `:warning`, `:tip`, `:error`, or `:note`.
* `icon` (`:string`) - Defaults to `nil`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

# `collapsible_section`

Renders a collapsible disclosure section using native HTML `<details>/<summary>`.

The browser handles open/close without JavaScript.

## Example

    <.collapsible_section id="faq-1" summary="What is PhiaUI?" open={true}>
      PhiaUI is an Elixir component library for Phoenix LiveView.
    </.collapsible_section>

## Attributes

* `id` (`:string`) (required)
* `summary` (`:string`) - Defaults to `"Details"`.
* `open` (`:boolean`) - Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.
## Slots

* `inner_block` (required)

# `columns_layout`

Renders a CSS grid multi-column layout for side-by-side content blocks.

Use the `:column` slot (repeatable) to provide individual column content.
The number of visual columns is controlled by the `:columns` attribute.

## Example

    <.columns_layout id="two-cols" columns={2}>
      <:column>Left content</:column>
      <:column>Right content</:column>
    </.columns_layout>

## Attributes

* `id` (`:string`) (required)
* `columns` (`:integer`) - Defaults to `2`.
* `gap` (`:string`) - Defaults to `"1rem"`.
* `class` (`:string`) - Defaults to `nil`.
## Slots

* `column`

# `details_block`

Renders a lightweight `<details>/<summary>` block for inline disclosures.

Similar to `collapsible_section/1` but with a simpler, borderless style suitable
for embedding within prose or editor content.

## Example

    <.details_block id="note-1" summary="Click to expand">
      Hidden content revealed on click.
    </.details_block>

## Attributes

* `id` (`:string`) (required)
* `summary` (`:string`) (required)
* `open` (`:boolean`) - Defaults to `false`.
* `class` (`:string`) - Defaults to `nil`.
## Slots

* `inner_block` (required)

# `horizontal_rule_styled`

Renders a decorative horizontal rule with variant visual styles.

Variants:
- `:solid`    — standard solid line
- `:dashed`   — dashed line
- `:dotted`   — dotted line
- `:ornament` — centered diamond ornament
- `:gradient` — gradient line fading from edges
- `:fade`     — line that fades from center to transparent

## Example

    <.horizontal_rule_styled variant={:gradient} />
    <.horizontal_rule_styled variant={:ornament} />

## Attributes

* `variant` (`:atom`) - Defaults to `:solid`. Must be one of `:solid`, `:dashed`, `:dotted`, `:ornament`, `:gradient`, or `:fade`.
* `class` (`:string`) - Defaults to `nil`.

# `page_break`

Renders a visual page break indicator with a dashed line and centered label.

Intended for print-oriented documents. In `@media print`, this element triggers
a CSS page break.

## Example

    <.page_break />

## Attributes

* `class` (`:string`) - Defaults to `nil`.

# `section_break`

Renders a section break/divider with different visual styles.

Variants:
- `:line`     — solid thin rule
- `:space`    — blank vertical space (no visible element)
- `:ornament` — centered decorative ornament (three dots)
- `:dashed`   — dashed horizontal rule
- `:dotted`   — dotted horizontal rule

## Example

    <.section_break variant={:ornament} />
    <.section_break variant={:dashed} />

## Attributes

* `variant` (`:atom`) - Defaults to `:line`. Must be one of `:line`, `:space`, `:ornament`, `:dashed`, or `:dotted`.
* `class` (`:string`) - Defaults to `nil`.

# `task_list`

Renders a task list with interactive checkboxes.

Each item in the `:items` list should be a map with `:text` (string) and
`:checked` (boolean) keys.

## Example

    <.task_list id="tasks" items={[
      %{text: "Write tests", checked: true},
      %{text: "Update docs", checked: false}
    ]} />

## Attributes

* `id` (`:string`) (required)
* `items` (`:list`) - Defaults to `[]`.
* `class` (`:string`) - Defaults to `nil`.

---

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