Add isClearable option to Input components

[Maschina]

Description

When enabled for input components, an X button appears at the trailing edge while the input has a value (hidden via :placeholder-shown). The X button is an accessibility improvements that clears the input field's value. This is helpful especially for search fields.

When combined with a tooltip or invalid icon, the secondary icon shifts left to avoid overlap and snaps back when the input is empty.

Type of change

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Documentation update
• Style/UI change (visual improvements, no functional changes)
• Accessibility improvement
• Refactoring (code changes that neither fix a bug nor add a feature)
• Performance improvement
• Chore (dependency updates, tooling changes, etc.)

Testing

• Tested with "search" type inputs using storybook (see "Clearable input" in storybook)
• Tested with non-"search" type inputs using storybook (see "Clearable input" in storybook)

Testing checklist

• Functionality: Component works as expected
• TypeScript: No TypeScript errors
• Storybook: Stories render correctly
• Accessibility:
  • Keyboard navigation works
  • Screen reader compatible
  • Focus management is correct
  • Color contrast meets WCAG AA standards
• Responsive: Works on mobile, tablet, and desktop
• Browser testing: Tested in multiple browsers
• Performance: No performance regressions

Manual testing steps

1. Import Input (import { Input, InputBase, TextField } from "@/components/base/input/input";)
2. Add "isClearable" to Input component of type "search", e.g.

<Input
                    isRequired
type="search"
                    isClearable
                    size="sm"
                    label="Email"
                    hint="This is a hint text to help user."
                    placeholder="olivia@untitledui.com"
                    tooltip="This is a tooltip"
                />

3. Alternatively, add "isClearable" to Input component on any type, e.g.

<Input
                    isRequired
                    isClearable
                    size="sm"
                    label="Email"
                    hint="This is a hint text to help user."
                    placeholder="olivia@untitledui.com"
                    tooltip="This is a tooltip"
                />

Screenshots/Videos

Code quality checklist

• Code style: Follows project conventions
• ESLint: No linting errors
• Prettier: Code is properly formatted
• TypeScript: Full type coverage
• Imports: Uses correct import paths (@/components/...)
• Performance: No unnecessary re-renders or heavy computations
• Error handling: Appropriate error boundaries and validation

📚 Documentation

• Component props are documented with TypeScript interfaces
• Storybook stories cover all variants
• Usage examples are provided

Breaking changes

Not applicable

Migration guide

Not applicable

Additional context