[Task] Implement Input

[soroushm]

Task Description ✏️

Implement the Input component as part of the design system epic #40.
This component should be fully theme-aware, built with @emotion/styled and styled-system, and support a comprehensive set of props (see table below). It will serve as the base for more complex form components while ensuring consistent design and behavior across the application.

Required Props

Name	Type	Default	Description
autoComplete	string	-	Helps users fill forms faster, especially on mobile.
autoFocus	bool	-	If true, focuses input on first mount.
classes	object	-	Override or extend styles applied to the component.
color	'primary'|'secondary'|string	-	Supports default or custom theme colors. Defaults to 'primary' if inside FormControl.
components	{ Input?: elementType, Root?: elementType }	{}	Custom components for slots.
disabled	bool	false	If true, disables the input.
error	bool	false	If true, marks input as error.
fullWidth	bool	false	If true, input takes full container width.
id	string	-	ID of the input element.
inputComponent	elementType	'input'	Custom component for input element.
inputProps	object	{}	Attributes applied to input element.
maxRows	number|string	-	Max rows if multiline.
minRows	number|string	-	Min rows if multiline.
multiline	bool	false	If true, renders a TextareaAutosize.
name	string	-	Name attribute of input element.
onChange	func	-	Callback fired when value changes.
placeholder	string	-	Short hint displayed before user enters value.
readOnly	bool	-	Prevents changing the value, but not interacting with field.
required	bool	false	If true, marks input as required.
rows	number|string	-	Rows displayed if multiline.
type	string	'text'	Input type, must be valid HTML5 type.
value	any	-	The input value (for controlled components).

Acceptance Criteria ✅

• Input component implemented with shouldForwardProp to prevent DOM prop leakage.
• Supports all required props (autoComplete, autoFocus, classes, color, components, disabled, error, fullWidth, id, inputComponent, inputProps, maxRows, minRows, multiline, name, onChange, placeholder, readOnly, required, rows, type, value).
• All style-related values derived from theme tokens — no raw CSS.
• Works seamlessly as a controlled and uncontrolled component.
• Unit tests verify behavior for focus, disabled, error, fullWidth, multiline, value change, and theming.
• Storybook stories with adjustable controls for all props.
• Lint and type checks pass without errors.

Dependencies 🔗

No response

Definition of Ready (DoR) 📋

• Task is independent and clearly scoped.
• Theme tokens and form guidelines are available.
• Prop requirements are confirmed and documented (see table below).
• Understands scope, value, and technical approach.

Definition of Done (DoD) 🏁

• Input component supports required props and styled-system integration.
• Unit tests cover all key behaviors and states.
• Storybook demonstrates controlled/uncontrolled usage and theming.
• Code reviewed and passes linting, typing, and CI checks.
• Documentation updated in Storybook.
• Component is reusable in forms and other components.

Additional Notes or Resources 📎

• HTML autocomplete spec: https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete