# linea_ui v0.1.1 - Table of Contents

> Phoenix LiveView components with the LineOne design.

## Pages

- [LineaUI](readme.md)
- [Changelog](changelog.md)
- [LICENSE](license.md)

## Modules

- [LineaUI](LineaUI.md): Phoenix LiveView components with the LineOne design.
- [LineaUI.ClassMerge](LineaUI.ClassMerge.md): Joins Tailwind class lists so that a later class replaces an earlier one of the same kind.
- [LineaUI.Component.Helpers](LineaUI.Component.Helpers.md): What every component shares: ids, form fields and the color vocabulary.
- [LineaUI.Components.Accordion](LineaUI.Components.Accordion.md): LineOne's accordion and collapse: a list of sections that open under their titles, in LineOne's
six styles (basic, border bottom, full bordered, divided items, primary, advanced).
- [LineaUI.Components.Alert](LineaUI.Components.Alert.md): LineOne's alerts: filled, outlined, soft and bordered, with an icon, an accent bar or a close
button.
- [LineaUI.Components.AppShell](LineaUI.Components.AppShell.md): LineOne's application shell: the page frame, the main sidebar (the icon rail), the sidebar panel with its
collapsible groups, the minimized panel, the sideblock and the horizontal navigation, the header, the right
sidebar, the page header and the dark mode and monochrome toggles.
- [LineaUI.Components.Avatar](LineaUI.Components.Avatar.md): LineOne's avatars: an image or initials in a circle, a square, a squircle or any mask shape,
with a status dot, a gradient ring, and stacked in groups.
- [LineaUI.Components.Badge](LineaUI.Components.Badge.md): LineOne's badges: filled, glowing, soft, outlined or bare text, with a dot, an icon or a
remove button.
- [LineaUI.Components.Breadcrumb](LineaUI.Components.Breadcrumb.md): LineOne's breadcrumb: the links to the pages above the current one, then the current page.
- [LineaUI.Components.Button](LineaUI.Components.Button.md): LineOne's buttons: filled, outlined, soft, bordered, flat and glowing, in every theme color.
- [LineaUI.Components.Card](LineaUI.Components.Card.md): LineOne's cards: the white panel, bordered, filled with a theme color, glowing, gradient and
gradient-outlined.
- [LineaUI.Components.Carousel](LineaUI.Components.Carousel.md): LineOne's Swiper carousels, without Swiper: slides on a CSS scroll-snap track, and the
`LineaUI.Carousel` hook for arrows, pagination, autoplay, keyboard, swipe and effects.
- [LineaUI.Components.Chart](LineaUI.Components.Chart.md): An ApexCharts chart with LineOne's skin (axis labels, grid lines, legend, tooltips, light
and dark).
- [LineaUI.Components.Checkbox](LineaUI.Components.Checkbox.md): LineOne's checkboxes: basic (filled when checked) or outline (a colored check on a clear
box), on a plain or a filled box, square or circle, in every theme color.
- [LineaUI.Components.Clipboard](LineaUI.Components.Clipboard.md): LineOne's copy to clipboard: a button that copies a text, and a field with a copy button
joined to it.
- [LineaUI.Components.Collapse](LineaUI.Components.Collapse.md): A section that opens and closes under its trigger, with LineOne's 200ms height animation. It is
the piece LineOne's Collapse and Accordion pages are built from (see `LineaUI.Components.Accordion`).
- [LineaUI.Components.DataTable](LineaUI.Components.DataTable.md): A table with a search box, sortable headers, a pagination footer and row selection, in the
two looks LineOne shows: `advanced` (the Table Advanced page: a title bar with a search
that slides open, the table as a card, "Show 10 entries" and a pager underneath) and `grid`
(the Grid Table page: a search box on the right, sort arrows, "Showing 1 to 10 of 15
results" and Previous/Next).
- [LineaUI.Components.DatePicker](LineaUI.Components.DatePicker.md): LineOne's date pickers (flatpickr's calendar in LineOne's skin): one date, several dates or a
range, with limits, disabled days, a custom text format, a time row, and a calendar that pops
under the input or stays inline.
- [LineaUI.Components.Divider](LineaUI.Components.Divider.md): LineOne's divider: a hairline between stacked or side-by-side content, with optional text in
the middle.
- [LineaUI.Components.Drawer](LineaUI.Components.Drawer.md): LineOne's drawer: a full-height panel that slides in from the left or the right over a dark
backdrop.
- [LineaUI.Components.Dropdown](LineaUI.Components.Dropdown.md): LineOne's dropdown menu: a white box under its button with links and actions, groups split by
separators, icons, a header, a search field, people.
- [LineaUI.Components.Form](LineaUI.Components.Form.md): The pieces LineOne's forms are made of: a caption, a help line, an error line and the
`field` wrapper that puts them around any control.
- [LineaUI.Components.Icon](LineaUI.Components.Icon.md): Icons: Hugeicons Stroke Rounded by name, and the small glyphs LineaUI's own components draw (the cross of a
toast, the chevron of a select, the check of a checkbox, the tools of the text editor).
- [LineaUI.Components.Input](LineaUI.Components.Input.md): LineOne's text inputs: outlined or filled, rounded or pill, three sizes, icons inside,
success and error states, and input masks.
- [LineaUI.Components.InputGroup](LineaUI.Components.InputGroup.md): Joins inputs, addons, selects and buttons into one row with shared borders, as LineOne's
input groups do. Only the outer ends keep their rounded corners.
- [LineaUI.Components.Mask](LineaUI.Components.Mask.md): Crops its content to one of LineOne's mask shapes: squircle, reuleaux triangle, diamond,
hexagon, octagon, star or heart.
- [LineaUI.Components.MenuList](LineaUI.Components.MenuList.md): LineOne's menu lists: a vertical list of links with one active entry.
- [LineaUI.Components.Modal](LineaUI.Components.Modal.md): LineOne's modal: a centered card over a dark backdrop, with LineOne's enter and leave animations.
- [LineaUI.Components.Overlay](LineaUI.Components.Overlay.md): What the overlays share: the `on_open` / `on_close` callbacks, which take an event name or a `%JS{}`,
and the close glyph.

- [LineaUI.Components.Pagination](LineaUI.Components.Pagination.md): LineOne's pagination: a joined bar or `divided` buttons, `rounded` or `pill`, in three sizes.
- [LineaUI.Components.Popover](LineaUI.Components.Popover.md): LineOne's popover: a white card with an arrow next to its trigger, for more than a tooltip
holds (text, tags, people, a small form).
- [LineaUI.Components.Progress](LineaUI.Components.Progress.md): LineOne's linear progress bar, solid or soft, in every size, with the active shimmer or the
indeterminate slide.
- [LineaUI.Components.Radio](LineaUI.Components.Radio.md): LineOne's radios, in a group that shares one `name`: basic or outline, plain or filled box,
circle or squircle, in every theme color.
- [LineaUI.Components.Range](LineaUI.Components.Range.md): LineOne's range slider: a rounded track with a round thumb in the theme color, in three sizes.
- [LineaUI.Components.Select](LineaUI.Components.Select.md): LineOne's selects: the styled native `<select>` of the Select page and the searchable
listbox of the Tom Select page, with chips, groups, a clear button and created options.
- [LineaUI.Components.Select.Options](LineaUI.Components.Select.Options.md): The options of a select, in every shape the components accept, read into one shape.
- [LineaUI.Components.Skeleton](LineaUI.Components.Skeleton.md): LineOne's skeleton: placeholder blocks shown while the content loads, with a light wave
passing over them or a pulse.
- [LineaUI.Components.Spinner](LineaUI.Components.Spinner.md): LineOne's spinners: the border ring (plain or soft), the growing dot and the SVG ring, with
the linear or the elastic timing.
- [LineaUI.Components.Steps](LineaUI.Components.Steps.md): LineOne's steps: numbered or plain points joined by a line, horizontal or vertical.
- [LineaUI.Components.Switch](LineaUI.Components.Switch.md): LineOne's switches: solid or outline (plain or filled track), pill or squircle, three sizes,
four thumb sizes, in every theme color.
- [LineaUI.Components.Table](LineaUI.Components.Table.md): LineOne's tables: basic, bordered, hoverable, zebra and the grid look, with `:col` slots
the way Phoenix's generated `CoreComponents.table/1` takes them.
- [LineaUI.Components.Tabs](LineaUI.Components.Tabs.md): LineOne's tabs: underlined (`line`), on a gray track (`boxed`), rounded (`pill`) and plain text (`text`), laid out
horizontally or vertically, with or without icons.
- [LineaUI.Components.Tag](LineaUI.Components.Tag.md): LineOne's tags: clickable badges that represent an attribute, a filter or an action.
- [LineaUI.Components.TagsInput](LineaUI.Components.TagsInput.md): LineOne's tag input (the Tom Select page's Input Tags demos): what is typed becomes a chip
on Enter, Tab or the delimiter, chips are removed with Backspace or their remove button.
- [LineaUI.Components.TextEditor](LineaUI.Components.TextEditor.md): LineOne's rich text editor (Quill's snow toolbar in LineOne's skin) on a plain
`contenteditable`: bold, italic, underline, strike, quote, code, headings, lists,
sub/superscript, indent, text direction, size, font, colors, alignment, links and clean.
- [LineaUI.Components.Textarea](LineaUI.Components.Textarea.md): LineOne's textareas: outlined or filled, fixed or resizable, and framed with a header or a
footer (a title input, a toolbar, a submit button).
- [LineaUI.Components.TimePicker](LineaUI.Components.TimePicker.md): LineOne's time picker (flatpickr with no calendar): an input with a clock icon that opens
flatpickr's hour and minute row, on a 12-hour clock with AM/PM or a 24-hour one, held inside
a minimum and a maximum.
- [LineaUI.Components.Timeline](LineaUI.Components.Timeline.md): LineOne's timeline: events down a line, each marked by a filled, outlined or icon point.
- [LineaUI.Components.Toast](LineaUI.Components.Toast.md): LineOne's notifications: a small colored note at a corner or an edge of the screen that leaves by
itself after a few seconds.
- [LineaUI.Components.Tooltip](LineaUI.Components.Tooltip.md): LineOne's tooltip (its tippy.js look and options): a hint around a trigger, in every theme
color, on twelve placements, after a delay, on hover, click or focus, following the cursor,
or holding HTML.
- [LineaUI.Components.Treeview](LineaUI.Components.Treeview.md): LineOne's tree view: a hierarchical list whose branches expand and collapse.
- [LineaUI.Components.Typography](LineaUI.Components.Typography.md): LineOne's typography: headings in every level and weight, display headings, gradient and
decorated text, decorated links, inline code and keyboard keys.
- [LineaUI.Components.Upload](LineaUI.Components.Upload.md): LineOne's file uploads, built on LiveView uploads: the drop panel of its FilePond demos
(bordered, filled, in a grid, or a round avatar drop) with each file's progress, errors and
cancel button, and the styled "Choose File" buttons of its Input File demo.
- [LineaUI.Docs](LineaUI.Docs.md): The installed components as data: their modules, docs, attrs and slots.
- [LineaUI.Skill](LineaUI.Skill.md): Builds the Claude Code skill that teaches an agent to write LineaUI markup.

## Mix Tasks

- [mix linea_ui.gen.skill](Mix.Tasks.LineaUi.Gen.Skill.md): Writes `.claude/skills/linea-ui/`: a short `SKILL.md` index and one reference per component,
generated from the components' attrs, slots and docs.
- [mix linea_ui.install](Mix.Tasks.LineaUi.Install.md): Run once after adding `{:linea_ui, ...}` to `mix.exs`, and again after each upgrade