@metadiv-studio/input

A modern, accessible React input component with enhanced functionality and beautiful styling. Built with TypeScript, Tailwind CSS, and designed for seamless integration into your React applications.

📦 Installation

npm i @metadiv-studio/input

✨ Features

• Multiple Input Types: Text, email, password, number, dollar (cents), time, and color
• Enhanced Password Input: Built-in show/hide password toggle with eye icons
• Smart Dollar Input: Automatically formats currency values and handles cents
• Number Validation: Clean number-only input with proper formatting
• Accessibility: Full keyboard navigation and screen reader support
• Dark Mode Ready: Built-in dark mode support with CSS variables
• Customizable: Extensible styling with Tailwind CSS classes
• TypeScript: Full type safety with comprehensive prop interfaces

🚀 Quick Start

import { Input } from '@metadiv-studio/input';

function MyForm() {
  return (
    <Input
      type="text"
      placeholder="Enter your name"
      className="max-w-md"
    />
  );
}

📚 Usage Examples

Basic Text Input

import { Input } from '@metadiv-studio/input';

<Input
  type="text"
  placeholder="Enter your name"
  value={name}
  onChange={(e) => setName(e.target.value)}
/>

Email Input

<Input
  type="email"
  placeholder="Enter your email"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
/>

Password Input with Toggle

The password input automatically includes a show/hide toggle button:

<Input
  type="password"
  placeholder="Enter your password"
  value={password}
  onChange={(e) => setPassword(e.target.value)}
/>

Number Input

Automatically filters non-numeric characters and provides clean number handling:

<Input
  type="number"
  placeholder="Enter a number"
  value={number}
  onChange={(e) => setNumber(e.target.value)}
/>

Dollar Input (Cents)

Special input type that handles currency values in cents and displays formatted dollar amounts:

<Input
  type="dollar"
  placeholder="Enter amount in cents"
  value={amount}
  onChange={(e) => setAmount(e.target.value)}
/>
// Input: 1250 → Display: $12.50
// Input: 100 → Display: $1.00

Time Input

<Input
  type="time"
  value={time}
  onChange={(e) => setTime(e.target.value)}
/>

Color Input

<Input
  type="color"
  value={color}
  onChange={(e) => setColor(e.target.value)}
/>

Disabled State

<Input
  type="text"
  placeholder="This input is disabled"
  disabled
/>

Custom Styling

<Input
  type="text"
  placeholder="Custom styled input"
  className="max-w-md border-2 border-blue-500 focus:border-blue-700 bg-blue-50 dark:bg-blue-900/20"
/>

🎨 Props

The Input component extends all standard HTML input attributes and includes:

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  type?: 'text' | 'password' | 'email' | 'number' | 'dollar' | 'time' | 'color';
  // ... all standard HTML input props
}

Common Props

• type: Input type (defaults to 'text')
• value: Controlled input value
• onChange: Change event handler
• placeholder: Placeholder text
• disabled: Disabled state
• className: Additional CSS classes for customization

🎯 Advanced Features

Dollar Input Behavior

The dollar input type automatically:

• Converts user input to cents (stored as numbers)
• Displays formatted currency (e.g., "$12.50")
• Handles edge cases and validation
• Provides clean numeric values to your form handlers

Password Input Features

• Built-in show/hide toggle button
• Eye and eye-off icons from Lucide React
• Proper accessibility labels
• Smooth transitions

Number Input Validation

• Filters non-numeric characters
• Handles negative numbers
• Provides clean numeric output
• Maintains proper number formatting

🎨 Styling

The component uses Tailwind CSS with a clean, modern design that includes:

• Responsive design
• Dark mode support
• Focus states with ring indicators
• Hover effects
• Disabled state styling
• Customizable borders and backgrounds

CSS Variables

The component uses CSS custom properties for theming:

:root {
  --ring: hsl(var(--primary));
  --muted-foreground: hsl(var(--muted-foreground));
  --foreground: hsl(var(--foreground));
}

🔧 Requirements

• React 18+
• Tailwind CSS 3.4+
• TypeScript (recommended)

📦 Dependencies

• @metadiv-studio/button: For internal button components
• lucide-react: For icons
• clsx: For conditional class names

🚀 Development

To run the development environment:

npm run dev

To build for production:

npm run build

📄 License

This package is part of the MetaDiv Studio component library.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Built with ❤️ by MetaDiv Studio