PhiaUi.Components.SmartInputs (phia_ui v0.1.17)

Smart and interactive input components for PhiaUI.

Provides inputs with advanced interaction patterns:

drag_number/1 + form_drag_number/1 — Figma-style scrubber: drag horizontally to change a numeric value (PhiaDragNumber hook).
suggestion_input/1 + form_suggestion_input/1 — text input with an inline ghost-text suggestion; Tab accepts (PhiaSuggestionInput hook).
emoji_picker/1 — button that opens an emoji grid popover with category tabs and search (PhiaEmojiPicker hook).
keyboard_shortcut_input/1 + form_keyboard_shortcut_input/1 — input that captures and displays a key combination (PhiaKeyShortcut hook).

Summary

Functions

Renders a numeric display that responds to horizontal drag (Figma scrubber style). Drag left to decrease, right to increase. The PhiaDragNumber hook fires pushEvent(on_change, %{value: newValue}) on each change. A hidden <input> carries the value for form submission.

emoji_picker(assigns)

Renders a button that opens an emoji picker popover. The PhiaEmojiPicker hook renders a category-tabbed grid with search. Clicking an emoji fires on_pick via pushEvent.

form_drag_number(assigns)

FormField-integrated wrapper for drag_number/1.

form_keyboard_shortcut_input(assigns)

FormField-integrated wrapper for keyboard_shortcut_input/1.

form_suggestion_input(assigns)

FormField-integrated wrapper for suggestion_input/1.

keyboard_shortcut_input(assigns)

Renders an input that captures a keyboard shortcut. Click to focus, press the key combination, and it is formatted and stored. The PhiaKeyShortcut hook fires pushEvent(on_change, %{shortcut: "Ctrl+K"}).

suggestion_input(assigns)

Renders a text input with an inline ghost-text suggestion overlay. The PhiaSuggestionInput hook positions a transparent <span> behind the input showing the suggestion completion. Tab accepts, Esc dismisses.

Functions

drag_number(assigns)

Attributes

id (:string) (required) - Root element ID — required for PhiaDragNumber hook.
value (:any) - Current numeric value (integer or float). Defaults to 0.
min (:any) - Minimum allowed value. Defaults to nil.
max (:any) - Maximum allowed value. Defaults to nil.
step (:any) - Increment per pixel dragged. Defaults to 1.
unit (:string) - Unit suffix shown after the value (e.g. "px", "%"). Defaults to nil.
on_change (:string) - LiveView event fired with %{value: N}. Defaults to nil.
disabled (:boolean) - Disables drag interaction. Defaults to false.
class (:string) - Additional CSS classes. Defaults to nil.

emoji_picker(assigns)

Renders a button that opens an emoji picker popover. The PhiaEmojiPicker hook renders a category-tabbed grid with search. Clicking an emoji fires on_pick via pushEvent.

Attributes

id (:string) (required) - Root ID — required for PhiaEmojiPicker hook.
on_pick (:string) - LiveView event fired with %{emoji: "..."} on selection. Defaults to nil.
trigger_label (:string) - Button label / emoji shown on the trigger. Defaults to "😊".
placement (:atom) - Popover placement relative to the trigger. Defaults to :bottom. Must be one of :bottom, :top, :left, or :right.
class (:string) - Additional CSS classes on the root element. Defaults to nil.

form_drag_number(assigns)

FormField-integrated wrapper for drag_number/1.

Attributes

field (Phoenix.HTML.FormField) (required) - A Phoenix.HTML.FormField struct.
label (:string) - Label text. Defaults to nil.
description (:string) - Helper text. Defaults to nil.
min (:any) - Minimum value. Defaults to nil.
max (:any) - Maximum value. Defaults to nil.
step (:any) - Step per pixel. Defaults to 1.
unit (:string) - Unit suffix. Defaults to nil.
class (:string) - Additional CSS classes. Defaults to nil.

form_keyboard_shortcut_input(assigns)

FormField-integrated wrapper for keyboard_shortcut_input/1.

Attributes

field (Phoenix.HTML.FormField) (required) - A Phoenix.HTML.FormField struct.
label (:string) - Label text. Defaults to nil.
description (:string) - Helper text. Defaults to nil.
placeholder (:string) - Placeholder text. Defaults to "Click to record shortcut…".
on_change (:string) - LiveView event name. Defaults to nil.
class (:string) - Additional CSS classes. Defaults to nil.

form_suggestion_input(assigns)

FormField-integrated wrapper for suggestion_input/1.

Attributes

field (Phoenix.HTML.FormField) (required) - A Phoenix.HTML.FormField struct.
label (:string) - Label text. Defaults to nil.
description (:string) - Helper text. Defaults to nil.
suggestion (:string) - Ghost-text suggestion. Defaults to nil.
on_accept (:string) - Accept event name. Defaults to nil.
placeholder (:string) - Placeholder text. Defaults to nil.
class (:string) - Additional CSS classes. Defaults to nil.

keyboard_shortcut_input(assigns)

Attributes

id (:string) (required) - Root ID — required for PhiaKeyShortcut hook.
name (:string) - Hidden input name for form submission. Defaults to nil.
value (:string) - Current shortcut string (e.g. "Ctrl+Shift+K"). Defaults to nil.
placeholder (:string) - Placeholder text. Defaults to "Click to record shortcut…".
on_change (:string) - LiveView event fired with %{shortcut: "..."} on capture. Defaults to nil.
disabled (:boolean) - Disables the input. Defaults to false.
class (:string) - Additional CSS classes. Defaults to nil.

suggestion_input(assigns)

Attributes

id (:string) (required) - Root ID — required for PhiaSuggestionInput hook.
name (:string) - Input name for form submission. Defaults to nil.
value (:string) - Current input value. Defaults to "".
suggestion (:string) - Ghost-text suggestion shown inline. Tab key accepts it. Defaults to nil.
on_accept (:string) - LiveView event fired when the user accepts the suggestion (Tab). Defaults to nil.
on_change (:string) - LiveView event fired on input change. Defaults to nil.
placeholder (:string) - Placeholder text. Defaults to nil.
disabled (:boolean) - Disables the input. Defaults to false.
class (:string) - Additional CSS classes. Defaults to nil.