Rxova
← All repos

react-inputs

Updates mentioning react-inputs. See the repository ↗ for commits and releases.

  1. The inputs suite is 1.0.0

    react-inputsrelease@rxova/react-inputs@1.0.1

    All nine components and @rxova/codemod are now on 1.0.0, and the meta-package sits one patch ahead at 1.0.1 because the alignment moved its dependencies.

    The numbers had drifted for no reason worth keeping: currency had taken three minor bumps where a later-landing component took a single major, so 0.3.0 sat next to 1.0.0 implying a difference in maturity that did not exist. Merge order is not a maturity signal, and a codemod claiming 0.2.0 while every package it rewrites claims 1.0.0 reads as the older half of a pair it is actually in step with.

    For six of these — date, time, phone, password, tags and file — 1.0.0 is simply the first version anyone can install. 0.1.0 was versioned and its notes written, but the release run failed before it reached npm, so the number never existed as far as consumers are concerned. The alignment itself changes no API and needs no migration; the one break in 1.0 is the token namespacing, which landed with the nine-input standard and has a codemod.

    Jonatan Kruszewski

  2. One standard across all nine inputs

    react-inputsbreakingfeature@rxova/react-inputs@1.0.0

    Going from three components to nine broke the conventions that worked for three. Every styling hook in the suite is now namespaced --rx-<name>-* / data-rx-<name>-*: --rx-otp-slot-size, --rx-rating-size, --rx-date-segment-radius. This is the breaking part of 1.0 — the two components whose prefixes actually change are OTP (--otp-*) and rating (--rfs-*), and npx @rxova/codemod rx-token-prefixes plus one sed line over your stylesheets is the whole migration.

    The old scheme was each package’s initials, which does not survive nine components: password and phone both reduce to rpi. Custom properties inherit, so setting the wrong one is silently inert rather than an error — the knob just does nothing, on a component that looks like it should have it. pnpm check:tokens now fails any hook that leaves its component’s namespace. The shared state hooks — data-state, data-filled, data-active, data-disabled, data-readonly, data-invalid — are deliberately untouched, because they mean the same thing on every input and one selector should reach all of them.

    The rest of the standard is the same exercise applied elsewhere. The meta-package now re-exports everything its components export rather than a hand-picked subset — 37 names were missing, which is how you get DateInputProps.onPartsChange re-exported without DateParts, a prop you can see and cannot name the argument of; a test fails on any export that is neither re-exported nor one of the six that genuinely collide. Development warnings say the package you installed rather than a name it had two renames ago. The date and time fields paint a focus ring on the focused segment, which a <span role="spinbutton"> gets from nobody. Password and phone always cap their length now. And the whole suite is exercised on every PR in real Vite, Next and Remix apps, because “renders in a test renderer” and “hydrates in your framework” are different claims.

    Jonatan Kruszewski

  3. Six new inputs, and the suite is nine

    react-inputsfeaturerelease

    The suite was currency, rating and OTP. It is now nine: date, time, phone, password, tags and file landed together, each one headless, typed, with no stylesheet to import and zero runtime dependencies.

    The through-line is that the platform already ships most of what these components are usually sold with. Date and time are segmented, keyboard-first fields with no calendar, no clock popup and no date library — segment order, separators, month names and the AM/PM words come from Intl, and the value is a YYYY-MM-DD or HH:mm[:ss] string end to end with no Date ever constructed, because a calendar date is not an instant. Phone drops the metadata blob: country names from Intl.DisplayNames, flags from Unicode regional indicators, and a ~4 kB dial-code table, which is ~6 kB brotli against 10.2 MB unpacked and five dependencies for the category leader.

    The other three are about the details you only meet in use. Tags is not the smallest option in its category and says so — the case is six accessibility failures common to the popular alternatives, each with a test here, starting with focus never landing on <body> after a removal. File validates, deduplicates and revokes its own preview URLs, and never uploads anything. Password has a reveal toggle that keeps focus and the caret, a Caps Lock warning read off the real modifier state, and a 1.2 kB entropy estimator you can swap for zxcvbn if you want its wordlists.

    Jonatan Kruszewski

  4. The inputs docs now read well to an agent

    react-inputsdocsfeature

    An agent asked to use one of these components fetched a whole Starlight page — nav, sidebar, search index, live-example islands — to read a prop table. Every docs page is now also served as raw markdown at <route>.md, which is the same content at a fraction of the bytes and needs no HTML parsing.

    llms.txt indexes the site for agents and llms-full.txt inlines the lot, under a size budget so the build complains rather than an agent silently truncating it. AGENTS.md covers the other case: working in the repo rather than reading the site.

    Jonatan Kruszewski

  5. A new landing page for react-inputs

    react-inputsdocs

    The landing page read as thin documentation — the h1 was the org name, the body was a component catalogue, and none of the CTAs a visitor needs were on it. It runs hero → quick start → why → proof → one live demo → budgets → headless now, and no longer enumerates components, so a fourth input changes nothing here.

    The numbers are derived from the same configs CI enforces — size budgets, coverage thresholds, Playwright projects, axe tags — so the page renders the pipeline’s own inputs and cannot drift from it. Budgets are quoted Brotli rather than gzip, and the coverage floor is the minimum across packages, not the best case.

    Jonatan Kruszewski

  6. Input fixes across OTP, currency and rating

    react-inputsfix

    Small bugs, all of them the kind you only meet by using the thing rather than testing it.

    • OTP — a pointer press no longer flashes a stale slot active before the pressed one.
    • OTP — typing over a full code replaces the character under the caret instead of being swallowed by maxLength.
    • OTP — keyboard focus parks the caret deterministically: first empty slot, or the last character when the code is full.
    • OTP — clicks land the caret in the slot actually pressed, including edges, separators and a scrolled field.
    • Currency — a keystroke that cannot contribute to the amount is rejected before it moves the value or the caret.
    • Currency — controlled hosts that echo onValueChange asynchronously no longer clobber the field with stale text.
    • Rating — the cursor no longer flickers back to the default in the gaps between icons.

    Also: the docs sidebar mark is keyed per component, GFM tables render in Storybook, and the autodocs prop tables are back with a test guarding them.

    Jonatan Kruszewski

  7. Two new contracts, and Storybook on rxova.org

    WebsiteBrandreact-inputsuse-everywhereinfrafeature@rxova/website-schemas@0.6.0

    @rxova/website-schemas grew two contracts. Page-component bundles: a producer’s artifact now carries only its page bodies, and the website supplies the header, footer, global head and analytics at deploy time. The docs sites moved onto it through one shared mode instead of each repo keeping a copy.

    And a storybook source kind: a project’s workshop ingests like any other source and nests under one /storybook/ tree. The react-inputs workshop is the first through — live at rxova.org/storybook/react-inputs/.

    Jonatan Kruszewski

  8. A Storybook workshop for the inputs

    react-inputsfeaturedocs

    Every input has stories now — currency, OTP and rating each get an args-driven Playground plus one story per behaviour worth showing off, with a toolbar toggle that flips the whole workshop to RTL.

    The prop tables are generated from the annotated source interfaces, so documenting a prop in a package updates its table here with no extra work. The workshop aliases the packages’ source directly: no build step in between, and library edits hot-reload into the stories.

    Jonatan Kruszewski

  9. The docs ingest contract

    WebsiteJourneyuse-everywherereact-inputsinfra

    rxova.org used to check out three repos and build their docs itself, which meant one project’s broken build took the whole site down with it.

    Each repo now builds its own docs and ships them as a release asset; the site ingests the artifact. A project either publishes something valid or the site keeps serving the last good copy.

    Jonatan Kruszewski

  10. Clearing the audit backlog

    Journeyreact-inputsuse-everywherefixinfra

    pnpm audit is only useful if it is ever green. svgo was pinned to a vulnerable 3.3.3 by an override, so it got unpinned; brace-expansion, js-yaml, webpack-dev-server and dompurify were resolved behind it.

    Dropping Docusaurus left sixteen overrides pointing at packages no longer in the tree, and those went too — a stale override is a silent way to hold a dependency back.

    Jonatan Kruszewski

  11. One Turborepo standard across every repo

    Journeyuse-everywherereact-inputsBrandinfra

    Four repos had drifted into four ways of running the same six checks. They now share one Turborepo pipeline and one CI shape, so a fix to the build order is made once.

    Node 24, TypeScript 6 and pnpm 11 across all of them, which also got pnpm audit working again.

    Jonatan Kruszewski

  12. Docusaurus out, Astro Starlight in

    use-everywherereact-inputsJourneydocsfeature

    All three docs sites moved to Astro Starlight. The landing already was Astro, so this leaves one framework across the whole origin — and dropped a webpack build that had been the flakiest job in every pipeline.

    react-inputs took the chance to restructure: one component library with a flat sidebar and shared guides, instead of three manuals bolted together.

    Jonatan Kruszewski

  13. Every docs site points at the aggregator

    Journeyreact-inputsuse-everywhereinfra

    Each project used to deploy its own GitHub Pages site at its own URL. All three stopped, and now take their url and baseUrl from the environment instead of hardcoding one.

    The same build therefore works standalone at / and mounted at /packages/<name>/, which is what let rxova.org host them without forking anything.

    Jonatan Kruszewski

  14. Three input libraries become one

    react-inputsreleasebreaking@rxova/react-inputs@0.1.1

    react-intl-currency-input, react-feedback-stars and react-otp-slots were three repos with three CI setups, three docs sites and three release processes for what is really one problem: the tricky React inputs.

    They are now @rxova/react-intl-currency-input, @rxova/react-rating-input and @rxova/react-otp-input, with @rxova/react-inputs as the umbrella if you want all three. The old package names are deprecated, and @rxova/codemod rewrites the imports for you.

    Jonatan Kruszewski