# `PhiaUi.Components.SmartInputs`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/inputs/smart_inputs.ex#L1)

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).

# `drag_number`

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.

## 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`

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`

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`

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`

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`

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"})`.

## 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`

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.

## 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`.

---

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