interactions

Headless press & hover primitives — Pressable and Hoverable.

Normalizes mouse, touch, pen and keyboard into one interaction API, tracks pressed / hovered / focus state, and attaches directly to whatever element you render — no wrapper, no styling. These are the interaction layer other widgets are built on: buttons, toggle buttons, menu items, list items, cards, links, tab and accordion headers, tooltip and dialog triggers, navigation items — all of them are "a thing you press and/or hover", so all of them compose these two.

npm i @fluixi-ui/interactions

Pressable

import { Pressable } from '@fluixi-ui/interactions';

<Pressable as="button" onPress={() => save()}>
  Save
</Pressable>

Every press source is normalized into the same callbacks:

<Pressable
  onPressStart={(e) => {}}   // pointer down / key down
  onPressMove={(e) => {}}    // e.dx / e.dy since start
  onPressEnd={(e) => {}}     // released (whether or not it counted)
  onPress={(e) => {}}        // released on the target — the "click"
  onLongPress={(e) => {}}    // held past longPressDelay (default 500ms)
  onPressCancel={(e) => {}}  // dragged off, scrolled away, or blurred
/>

Every callback receives a normalized PressEvent: type, pointerType (mouse | pen | touch | keyboard), target, x/y, dx/dy since start, and the underlying originalEvent.

State via render prop

State is exposed as accessors, so reads stay fine-grained — call them:

<Pressable>
  {(state) => (
    <div class={{ active: state.pressed(), hovered: state.hovered() }}>…</div>
  )}
</Pressable>

Available: pressed, hovered, focused, focusVisible, disabled.

State via data attributes

The rendered element automatically carries the current state, so you can style it in plain CSS with no JS in the consumer:

[data-pressed]       { opacity: 0.7; }
[data-hovered]       { background: var(--hover); }
[data-focus-visible] { outline: 2px solid var(--ring); }
[data-disabled]      { opacity: 0.5; }

Set automatically: data-pressed, data-hovered, data-focused, data-focus-visible, data-disabled.

Props

Hoverable

Pointer-only — it never activates on touch, so a tap never leaves an element stuck hovered.

import { Hoverable } from '@fluixi-ui/interactions';

<Hoverable as="a" href="/pricing" onHoverStart={prefetch}>
  {(state) => <>Pricing {state.hovered() && <Arrow />}</>}
</Hoverable>

Callbacks: onHoverStart, onHoverMove, onHoverEnd. Attribute: data-hovered.

PressableFeedback

Pressable with a built-in visual response — the element scales down (and optionally dims) while pressed, applied via inline style, so you get tactile feedback with no consumer CSS. Same API as Pressable (render prop, data-*, as, accessibility).

import { PressableFeedback } from '@fluixi-ui/interactions';

<PressableFeedback pressScale={0.96} onPress={run}>Tap</PressableFeedback>

Ripple — opt in with ripple. It spawns a self-contained expanding circle from the press point via the Web Animations API — skin-independent (works on any skin, unlike the Material-only installRipple), reduced-motion aware, no consumer CSS. Because it renders through as, a surface can ripple too:

<PressableFeedback as={Surface} elevation={2} ripple>Card</PressableFeedback>

Composition

They never touch each other's state, so nest them either way:

<Hoverable>
  {(hover) => (
    <Pressable>
      {(press) => <Card raised={hover.hovered()} down={press.pressed()} />}
    </Pressable>
  )}
</Hoverable>

As child

as renders any tag or component and attaches the interaction logic to it directly — no extra DOM node. Props are inferred from as:

<Pressable as="button" type="submit">…</Pressable>   {/* button props */}
<Pressable as="a" href="/home">…</Pressable>          {/* anchor props */}
<Pressable as={Card} elevation={2}>…</Pressable>      {/* Card props */}

When wrapping a component or element, props are merged, never clobbered: refs are combined, class concatenated, style merged, and your event handlers run after the internal ones.

Headless hooks

The components are thin shells over the reactive engines, which you can use directly when you need the behavior without the element wiring:

import { createPressable, createHoverable } from '@fluixi-ui/interactions';

const state = createPressable(() => el(), { onPress, longPressDelay: 400 });
state.pressed(); // Accessor<boolean>
state.cancel();  // abort an in-flight press

Accessibility

• Non-native elements get role="button" + tabindex="0" so they focus and activate from the keyboard like a real button; native <button>/<a> are left alone.
• Enter and Space activate; Space's page-scroll is suppressed.
• disabled sets aria-disabled="true", blocks interaction, and drops non-native elements out of the tab order.
• focus-visible follows the browser's :focus-visible heuristic, so a ring shows for keyboard focus but not a mouse press.

Notes

• Pointer Events are the single source — one model for mouse, touch and pen, so no double-firing to de-dupe.
• Global listeners only while pressing — a document pointermove/pointerup pair is added on press so a release or drag outside the element still resolves, then removed. Idle, nothing is bound globally.
• A long press consumes the click — once onLongPress fires, the following release does not also fire onPress, so tap and hold stay distinct.

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.