Skip to content

feat: Input primitive#54

Merged
amarques-godaddy merged 30 commits intomainfrom
input-primitive
Dec 15, 2025
Merged

feat: Input primitive#54
amarques-godaddy merged 30 commits intomainfrom
input-primitive

Conversation

@amarques-godaddy
Copy link
Copy Markdown
Contributor

@amarques-godaddy amarques-godaddy commented Nov 20, 2025

These changes introduce a new Input primitive based on the Input Primitive PDR. The only major difference between them is that I did not end up implementing the prop filtering that I mentioned in the PDR. I decided not to include it because it went against the patterns established in Bento/my idea for this component, which was to keep its functionality as close to the native HTML input as possible, with slight enhancements (data-attributes, slot-ability, react aria hooks for accessibility).

Also, the unrelated file changes are due to the linter auto fixing them on each commit.

Running into strange issues with tests that I am still looking into. Everything seems fine in Storybook.

Checklist

  • My code follows the project's code style (biome)
  • I have added/updated tests that prove my fix is effective or that my feature works
  • I have added/updated documentation (README, Storybook stories, etc.)
  • All new and existing tests pass locally
  • I have added a changeset (run npm run changeset if this affects packages)
  • I have reviewed my own code and commented any complex areas

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Nov 20, 2025

🦋 Changeset detected

Latest commit: 59200fa

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
Name Type
@bento/input Minor
@bento/checkbox Patch
@bento/radio Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Comment thread packages/input/test/input.browser.test.tsx Fixed
@amarques-godaddy amarques-godaddy marked this pull request as ready for review November 20, 2025 19:43
@amarques-godaddy amarques-godaddy requested a review from a team as a code owner November 20, 2025 19:43
Copilot AI review requested due to automatic review settings November 20, 2025 19:43
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR introduces a new @bento/input primitive component that provides a universal input element with React Aria interactions, supporting all HTML input types with proper accessibility features. Additionally, the PR performs cleanup by removing trailing whitespace from various configuration files and removing an unused @bento/portal dependency.

Key changes:

  • New Input component with comprehensive accessibility support (focus management, hover states, ARIA attributes)
  • Data attribute system for state-based styling
  • Support for controlled and uncontrolled input patterns

Reviewed Changes

Copilot reviewed 33 out of 35 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
packages/input/src/index.tsx Core Input component implementation with React Aria hooks
packages/input/package.json Package configuration and dependencies for the new @bento/input package
packages/input/README.mdx Comprehensive documentation including usage examples and accessibility guidelines
packages/input/test/*.tsx Test suites covering SSR, browser rendering, and example usage
packages/input/examples/*.tsx Example implementations demonstrating controlled, uncontrolled, and form usage
packages/focus-lock/package.json Removal of unused @bento/portal dependency
apps/docs/package.json Addition of new packages to documentation dependencies
.changeset/hot-hornets-poke.md Changeset documenting the new feature and cleanup changes
packages/*/vitest.config.ts, tsup.config.ts, tsconfig.json Removal of trailing whitespace from configuration files

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread packages/input/examples/controlled.tsx Outdated
Comment thread packages/input/src/index.tsx Outdated
Comment thread packages/input/CHANGELOG.md Outdated
Comment thread packages/input/package.json Outdated
Comment thread packages/dismiss/tsup.config.ts Outdated
Comment thread packages/input/src/index.tsx Outdated
Comment thread packages/input/src/index.tsx Outdated
Comment thread packages/input/test/input.node.test.tsx Outdated
Comment thread packages/input/test/input.node.test.tsx Outdated
Comment thread packages/input/vitest.config.ts Outdated
Comment thread packages/input/src/index.tsx Outdated
Comment thread packages/input/examples/form.tsx Outdated
Comment thread packages/input/examples/form.tsx Outdated
Comment thread packages/input/README.mdx Outdated
Comment thread packages/input/README.mdx Outdated
Comment thread packages/input/README.mdx Outdated
Comment thread packages/input/src/index.tsx Outdated
Comment thread packages/input/src/index.tsx Outdated
Comment thread packages/input/src/index.tsx Outdated
Comment thread packages/input/src/index.tsx Outdated
Comment thread packages/input/src/index.tsx Outdated
Comment thread packages/input/src/index.tsx Outdated
Comment thread packages/input/src/index.tsx Outdated
Comment thread packages/input/examples/basic-form.tsx Outdated
Comment thread packages/input/src/index.tsx Outdated
@amarques-godaddy amarques-godaddy merged commit 3dd71ed into main Dec 15, 2025
3 checks passed
This was referenced Dec 15, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants