Utilities
The helpers heyo-ui exports alongside its components — cn, renderIcon, useSelection, useMediaQuery and the control primitives.
Loading documentation…
Powered by heyo
Besides components, heyo-ui exports the handful of helpers the components use on themselves. They exist so an application can build a one-off control that still looks like it belongs — not because the library needs a kitchen sink.
The class merger every component forwards className through: clsx for
conditionals, tailwind-merge for conflicts. Nothing to copy into your
repository.
Because conflicts resolve last-wins, overriding a component is just a class:
Accepts the same three shapes every icon prop in the library accepts — a
component, an element, or any node — and applies a class to the first two.
The first argument is IconLike — a ReactNode, or a component taking
className and aria-hidden. The second is a class, merged into a component
or element icon and ignored for a plain node.
Row selection for a table — the reason Checkbox has an indeterminate state
at all. ids is the current page of rows, so toggleAll only ever touches
what the reader can actually see.
It returns:
| Member | What it is |
|---|---|
selected: Id[] | The selected ids, in no particular order |
isSelected(id) | Membership test for a single row |
toggle(id, next?) | Flips a row, or sets it explicitly when next is given |
toggleAll(next?) | Selects or clears every id passed in. Omit next to flip |
clear() | Empties the selection |
allSelected | Every row is selected — the header checkbox is checked |
someSelected | Some but not all — the header checkbox is indeterminate |
count | How many rows are selected |
A subscription to a media query, SSR-safe and shared between the components
that need one (Sidebar turns into a drawer with it).
The chrome every form control is assembled from. Use them to build a control heyo-ui does not ship — a colour picker, a tag input — that still matches the rest of the system down to the focus ring.
| Export | What it is |
|---|---|
controlBase | Chrome plus the typing focus ring. The default for Input and Textarea |
controlTriggerBase | Chrome plus the pressing focus ring (:focus-visible), for triggers that keep focus after their popup closes |
controlChrome | Fill, ring, inset shadow, disabled and invalid states — without any focus treatment |
controlFocusRing / controlFocusVisibleRing | The two focus treatments on their own |
controlSizeVariants | Height, radius, padding and gap for xs (20px), sm (26px), base (32px) and lg (40px) |
controlIconSize | The icon size that keeps an adornment optically balanced at each height |
ControlSize | The shared size union, exported as a type |
The shared chrome behind every floating surface — Select, Dropdown,
Popover, Tooltip, Combobox. One definition is what keeps them visually
identical.
| Export | What it is |
|---|---|
popupSurface | Radius, surface, ring, shadow and the anchor-width custom property |
popupMotion | The enter and exit transition: a 4px rise and a hair of scale. Nothing bouncy, and it respects reduced motion |
popupItem | A row inside a floating menu, including its highlighted and disabled states |