author-ui-components

Create a module under packages/ui/src/<name> with index.ts as the public entry, add primitives.ts if the component needs headless behavior, and update exports and publishConfig.exports in packages/ui/package.json. Add tests, demos, and a README importing from remix/ui/....

Primitives own behavior, ARIA, keyboard handling, refs, and public events through named providers and mixins. Styled wrappers compose primitives with shared styles and icons for an ergonomic API without duplicating primitive behavior.

Components use a two-phase shape: a setup function receiving a Handle returns a render function returning RemixNode. State lives in setup scope, updates are scheduled with handle.update(), and post-render work uses handle.queueTask().

Use a style helper when the job only needs css() descriptors and a small default-attr mixin, like button() or input.root(). Choose a headless primitive when the component owns behavior, ARIA, registration, keyboard handling, or public events.

Public contracts use bubbling DOM events with a constant like 'rmx:select-change', an exported event class with readonly payload fields, and an on<Component><Action> mixin wrapping on(...). Stateful components also support callback props such as onValueChange.