API Reference Corex v#0.2.0

Import Corex function components into your Phoenix web layer.

Expandable panels for Phoenix LiveView. Behavior follows Zag.js Accordion.

Renders a button element for actions based on Phoenix Core Components. Use the type attribute to set the button type. Icon-only buttons must pass aria_label to screen readers.

Circular angle control for Phoenix LiveView forms. Behavior follows Zag.js Angle Slider. WAI-ARIA circular angle control. Use angle_slider/1 with an optional label slot and marks.

Web Animations tuning for Corex components when animation is js.

Accordion and tree-view panel animation when animation is js (opacity + height).

Dialog open/close animation when animation is js (opacity + scale).

Builders for the HTML attribute maps the Connect modules hand to templates.

Avatar image with fallback for Phoenix LiveView. Behavior follows Zag.js Avatar.

Carousel for Phoenix LiveView. Behavior follows Zag.js Carousel.

Checkbox for Phoenix LiveView forms. Behavior follows Zag.js Checkbox.

Copy-to-clipboard control for Phoenix LiveView. Behavior follows Zag.js Clipboard. Set value for the initial string to copy. Use Corex.Clipboard.set_value/2 or corex:clipboard:set-value to change it on the client.

Displays syntax-highlighted code with Makeup.

Collapsible panel for Phoenix LiveView. Behavior follows Zag.js Collapsible.

Color picker for Phoenix LiveView forms. Behavior follows Zag.js Color Picker.

Translatable strings for Corex.ColorPicker.

Searchable combobox for Phoenix LiveView forms. Behavior follows Zag.js Combobox. Pass options with Corex.List.new/1. With redirect, use per-item :to, :redirect (:href | :patch | :navigate | false), and :new_tab; Zag runs single-select when redirect is true.

Translatable strings for Corex.Combobox.

Preludes for component and Connect modules.

Generates mounted_<part>/1 for each <part>/1 and ignore_<part>/1 pair in a Connect module.

Content items for components with trigger/content patterns to be used with

Content item structure. Use it to create content items for components with trigger/content patterns

Phoenix component for rendering semantic data lists.

Phoenix table component for tabular data with column slots, optional row actions, sorting, and row selection.

Helpers for selectable data_table/1 usage in LiveViews.

Helpers for sortable data_table/1 usage in LiveViews.

Translatable strings for Corex.DataTable.

Encode multi-value datasets for Corex component data-* attributes.

Date picker for Phoenix LiveView forms. Behavior follows Zag.js Date Picker.

Translatable strings for Corex.DatePicker.

Modal dialog for Phoenix LiveView. Behavior follows Zag.js Dialog.

Translatable strings for Corex.Dialog.

Inline editable text for Phoenix LiveView forms. Behavior follows Zag.js Editable.

Translatable strings for Corex.Editable.

File upload for Phoenix LiveView. Behavior follows Zag.js File Upload. Use multipart on the parent form and read %Plug.Upload{} from params in a controller action, as in Phoenix file uploads.

Translatable strings for Corex.FileUpload.

LiveView uploads wrapper that shares Corex.FileUpload layout tokens (data-scope / data-part) and styling.

Configuration for Phoenix flash messages rendered as Zag toasts.

Defaults for Phoenix :error flashes shown by toast_group/1.

Defaults for Phoenix :info flashes shown by toast_group/1.

Draggable floating panel for Phoenix LiveView. Behavior follows Zag.js Floating Panel.

Translatable strings for Corex.FloatingPanel.

Use invalid?/1 when you need an explicit invalid={...} from visible changeset errors. Prefer auto_invalid on the component for the common case. Explicit invalid wins over auto_invalid.

Renders a Heroicon.

Hidden input component based on Phoenix Core Components.

Attributes shared by every component root that mounts a JavaScript hook.

Data struct for image slides in Corex.Carousel.

The shared contract behind Corex.Content.Item, Corex.List.Item, and Corex.Tree.Item.

OTP :json wrapper that encodes nil as null and decodes null back to nil.

A layout heading component for page titles, subtitles, and actions.

Flat selectable items for Combobox, Listbox, and Select.

One selectable row for Combobox, Listbox, or Select.

Listbox for Phoenix LiveView forms. Behavior follows Zag.js Listbox. Pass items={Corex.List.new([...])}. With redirect, use per-item :to and :redirect (:href | :patch | :navigate | false); Zag runs single-select when redirect is true.

Marquee / ticker for Phoenix LiveView. Behavior follows Zag.js Marquee.

Menu for Phoenix LiveView. Behavior follows Zag.js Menu.

Unified native input component based on Phoenix Core Components Used for text, textarea, date, datetime-local, time, month, week, email, url, tel, search, color, number, password, checkbox, radio, and select. Optional icon slot and shared styling via data-scope="native-input". Uses same data-part structure as Corex components (root, label, control, input, error) for consistency.

Renders an anchor element for navigation based of Phoenix Core Components and Phoenix Link

The config :corex_design, components: list written into generated apps.

Number input for Phoenix LiveView forms. Behavior follows Zag.js Number Input.

Translatable strings for Corex.NumberInput.

Main-axis and cross-axis offset for floating UI placement.

Pagination for Phoenix LiveView. Behavior follows Zag.js Pagination. Pagination and Carousel both use 1-based page (first page is 1). Page numbers and ellipses are rendered on the server so the control is complete before the hook runs.

Translatable strings for Corex.Pagination.

Password input for Phoenix LiveView forms. Behavior follows Zag.js Password Input.

Translatable strings for Corex.PasswordInput.

PIN / OTP input for Phoenix LiveView forms. Behavior follows Zag.js Pin Input.

Translatable strings for Corex.PinInput.

Two-dimensional point (x, y) for Zag.js layout.

Positioning for floating layers (select, menu, tooltip, date picker, and others).

Radio group for Phoenix LiveView forms. Behavior follows Zag.js Radio Group.

Select for Phoenix LiveView forms and navigation. Behavior follows Zag.js Select.

Translatable strings for Corex.Select.

Signature pad for Phoenix LiveView forms. Behavior follows Zag.js Signature Pad.

Switch for Phoenix LiveView forms. Behavior follows Zag.js Switch.

Tabs for Phoenix LiveView. Behavior follows Zag.js Tabs.

Tags input for Phoenix LiveView forms. Behavior follows Zag.js Tags Input.

Translatable strings for Corex.TagsInput.

Timer for Phoenix LiveView. Behavior follows Zag.js Timer. Countdown leading-zero collapse is on by default when countdown is true. Override with collapse_leading_zeros={false} or fixed segments.

Translatable strings for Corex.Timer.

Toast notifications for Phoenix LiveView. Behavior follows Zag.js Toast. Replace layout flash groups with <.toast_group> and drive toasts from LiveView or the client API.

Default titles for flash-driven toasts on Corex.Toast.

Toggle button for Phoenix LiveView. Behavior follows Zag.js Toggle.

Toggle group for Phoenix LiveView. Behavior follows Zag.js Toggle Group.

Tooltip for Phoenix LiveView. Behavior follows Zag.js Tooltip.

Tree items for hierarchical/nested structures to be used with

Tree item structure.

Tree view for Phoenix LiveView. Behavior follows Zag.js Tree View.

Coercions for the values that reach a component from outside the library.

Prints Corex tasks and their information.

Generates the full Makeup syntax highlighting stylesheet and writes it to your project.

Generates controller, view, templates, schema, and context for an HTML resource, using Corex form components and layout assigns.

Generates LiveView, templates, and context for a resource, using Corex form components and layout assigns.

Copies the Heroicons Tailwind plugin into your project so the Corex.Heroicon component works. Creates assets/vendor/heroicons.js (or per-app in umbrella) and instructs adding @plugin "../vendor/heroicons"; to your main CSS.

Creates a new Phoenix application with Corex installed.

Creates a new Tableau static site with Corex installed.

Updates the corex_new Mix archive used by mix corex.new.