{"id":18290808,"url":"https://github.com/debrajhyper/rc-input-component","last_synced_at":"2026-01-05T03:09:19.490Z","repository":{"id":256451760,"uuid":"855342578","full_name":"debrajhyper/Rc-Input-Component","owner":"debrajhyper","description":null,"archived":false,"fork":false,"pushed_at":"2024-09-11T17:53:39.000Z","size":91,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-18T23:46:09.314Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://rc-input-component.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/debrajhyper.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-10T17:58:11.000Z","updated_at":"2025-01-06T10:34:17.000Z","dependencies_parsed_at":"2024-09-12T02:13:00.300Z","dependency_job_id":null,"html_url":"https://github.com/debrajhyper/Rc-Input-Component","commit_stats":null,"previous_names":["debrajhyper/input-component","debrajhyper/rc-input-component"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/debrajhyper%2FRc-Input-Component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/debrajhyper%2FRc-Input-Component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/debrajhyper%2FRc-Input-Component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/debrajhyper%2FRc-Input-Component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/debrajhyper","download_url":"https://codeload.github.com/debrajhyper/Rc-Input-Component/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247324455,"owners_count":20920650,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-05T14:12:17.437Z","updated_at":"2026-01-05T03:09:19.404Z","avatar_url":"https://github.com/debrajhyper.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ![](./template/logo32.png) Rc Input Component\n\nA highly customizable, accessible, and feature-rich React input component library with support for multiple input types, states, and themes.\n\n[![NPM Version](https://img.shields.io/npm/v/rc-input-component.svg)](https://www.npmjs.com/package/rc-input-component)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n## ✨ Features\n\n- 🎨 13 input types: Text, Password, Email, Number, Date, Time, DateTime-Local, Month, Search, URL, Telephone, File, and Textarea\n- 🖌️ 6 customizable variants: Normal, Floating Label, Outlined, Filled, Underlined, Rounded\n- 🚦 8 different states: Default, Hover, Focus, Disabled, Read-Only, Error, Success, Loading\n- 🌓 Dark mode support\n- 🎭 Themeable with CSS variables\n- ♿ Accessibility-friendly\n- 📏 TypeScript support\n- 📁 File input with drag and drop support and file preview\n- 🛠️ Extensive customization options\n\n## 🚀 Installation\n\n```bash\nnpm install rc-input-component\n```\n\n## 🏁 Quick Start\n\nWrap your app with the `ThemeProvider`:\n\n```jsx\nimport { ThemeProvider } from 'rc-input-component';\n\nfunction App() {\n  return (\n    \u003cThemeProvider\u003e\n      {/* Your app components */}\n    \u003c/ThemeProvider\u003e\n  );\n}\n```\n\nUse the input components in your React components:\n\n```jsx\nimport { TextInput, EmailInput, PasswordInput } from 'rc-input-component';\n\nfunction MyForm() {\n  return (\n    \u003cform\u003e\n      \u003cTextInput label=\"Name\" placeholder=\"Enter your name\" /\u003e\n      \u003cEmailInput \n        label=\"Email Address\" \n        placeholder=\"Enter your email\"\n        helpText=\"We will never share your email.\"\n        icon={\u003cEmailIcon /\u003e}\n        clearable={true}\n        validationMessage=\"Please enter a valid email.\"\n        characterLimit={255}\n        prefix=\"@\"\n        suffix=\".com\"\n        autocomplete=\"email\"\n        variant=\"floating\"\n        inputState=\"error\"\n      /\u003e\n      \u003cPasswordInput label=\"Password\" placeholder=\"Enter your password\" /\u003e\n    \u003c/form\u003e\n  );\n}\n```\n\n## 🧩 Available Components\n\n- `\u003cTextInput /\u003e`\n- `\u003cPasswordInput /\u003e`\n- `\u003cEmailInput /\u003e`\n- `\u003cNumberInput /\u003e`\n- `\u003cDateInput /\u003e`\n- `\u003cTimeInput /\u003e`\n- `\u003cDateTimeInput /\u003e`\n- `\u003cMonthInput /\u003e`\n- `\u003cSearchInput /\u003e`\n- `\u003cUrlInput /\u003e`\n- `\u003cTelephoneInput /\u003e`\n- `\u003cFileInput /\u003e`\n- `\u003cTextareaInput /\u003e`\n\n## 🎨 Customization\n\n### Variants\n\n- `normal`: Standard input field\n- `floating`: Placeholder transitions to floating label on focus/input\n- `outlined`: Input with a pronounced border\n- `filled`: Input with a solid background color\n- `underlined`: Minimalist design with only a bottom border\n- `rounded`: Input with rounded corners\n\n```jsx\n\u003cTextInput variant=\"floating\" label=\"Username\" /\u003e\n```\n\n### States\n\n- `default`: Standard state\n- `hover`: Styles applied on hover\n- `focus`: Styles applied when input is focused\n- `disabled`: Input is inactive\n- `readonly`: Content can be read but not edited\n- `error`: Displays validation errors\n- `success`: Indicates correct input\n- `loading`: Shows a loading state\n\n```jsx\n\u003cTextInput inputState=\"error\" validationMessage=\"This field is required\" /\u003e\n```\n\n### Additional Features\n\n- `icon`: Add an icon inside the input\n- `clearable`: Add a clear button to reset input\n- `characterLimit`: Set and display character limit\n- `prefix/suffix`: Add text or icons at the start/end of input\n- `mask`: Format input in a specific pattern\n\n```jsx\n\u003cTextInput \n  icon={\u003cUserIcon /\u003e}\n  clearable={true}\n  characterLimit={50}\n  prefix=\"$\"\n  suffix=\".00\"\n  mask={(value) =\u003e value.replace(/\\D/g, '')}\n/\u003e\n```\n\n## 🔧 Props\n\nThe Input Component accepts the following props:\n\n| Prop Name | Type | Default | Description |\n|-----------|------|---------|-------------|\n| label | React.ReactNode | undefined | Label for the input field |\n| helpText | React.ReactNode | undefined | Additional help text displayed below the input |\n| icon | React.ReactNode | undefined | Icon to display inside the input |\n| clearable | boolean | false | Whether to show a clear button |\n| validationMessage | React.ReactNode | undefined | Validation or error message |\n| characterLimit | number | undefined | Maximum number of characters allowed |\n| prefix | React.ReactNode | undefined | Content to display before the input |\n| suffix | React.ReactNode | undefined | Content to display after the input |\n| variant | 'normal' \\| 'floating' \\| 'outlined' \\| 'filled' \\| 'underlined' \\| 'rounded' | 'normal' | Visual variant of the input |\n| inputState | 'default' \\| 'hover' \\| 'focus' \\| 'disabled' \\| 'readonly' \\| 'error' \\| 'success' \\| 'loading' | 'default' | Current state of the input |\n| onValidate | (value: string) =\u003e string \\| null | undefined | Custom validation function |\n| mask | (value: string) =\u003e string | undefined | Function to mask/format the input value |\n| wrapperStyle | React.CSSProperties | undefined | Custom styles for the wrapper element |\n| inputStyle | React.CSSProperties | undefined | Custom styles for the input element |\n| labelStyle | React.CSSProperties | undefined | Custom styles for the label |\n| helpTextStyle | React.CSSProperties | undefined | Custom styles for the help text |\n| validationMessageStyle | React.CSSProperties | undefined | Custom styles for the validation message |\n| characterCountStyle | React.CSSProperties | undefined | Custom styles for the character count |\n| prefixStyle | React.CSSProperties | undefined | Custom styles for the prefix |\n| suffixStyle | React.CSSProperties | undefined | Custom styles for the suffix |\n| customClasses | object | {} | Custom CSS classes for various parts of the component |\n\nAdditionally, the Input Component accepts all standard HTML input attributes.\n\n## 🔧 Props for Each Input Component\n\nBelow are tables listing the props for each individual input component. Note that all components also accept standard HTML attributes corresponding to their input types.\n\n### TextInput\n\n| Prop Name | Type | Default | Description |\n|-----------|------|---------|-------------|\n| label | React.ReactNode | undefined | Label for the input field |\n| helpText | React.ReactNode | undefined | Additional help text displayed below the input |\n| icon | React.ReactNode | undefined | Icon to display inside the input |\n| clearable | boolean | false | Whether to show a clear button |\n| validationMessage | React.ReactNode | undefined | Validation or error message |\n| characterLimit | number | undefined | Maximum number of characters allowed |\n| prefix | React.ReactNode | undefined | Content to display before the input |\n| suffix | React.ReactNode | undefined | Content to display after the input |\n| variant | 'normal' \\| 'floating' \\| 'outlined' \\| 'filled' \\| 'underlined' \\| 'rounded' | 'normal' | Visual variant of the input |\n| inputState | 'default' \\| 'hover' \\| 'focus' \\| 'disabled' \\| 'readonly' \\| 'error' \\| 'success' \\| 'loading' | 'default' | Current state of the input |\n| onValidate | (value: string) =\u003e string \\| null | undefined | Custom validation function |\n| mask | (value: string) =\u003e string | undefined | Function to mask/format the input value |\n\n### PasswordInput\n\n| Prop Name | Type | Default | Description |\n|-----------|------|---------|-------------|\n| label | React.ReactNode | undefined | Label for the input field |\n| helpText | React.ReactNode | undefined | Additional help text displayed below the input |\n| icon | React.ReactNode | undefined | Icon to display inside the input |\n| clearable | boolean | false | Whether to show a clear button |\n| validationMessage | React.ReactNode | undefined | Validation or error message |\n| characterLimit | number | undefined | Maximum number of characters allowed |\n| prefix | React.ReactNode | undefined | Content to display before the input |\n| suffix | React.ReactNode | undefined | Content to display after the input |\n| variant | 'normal' \\| 'floating' \\| 'outlined' \\| 'filled' \\| 'underlined' \\| 'rounded' | 'normal' | Visual variant of the input |\n| inputState | 'default' \\| 'hover' \\| 'focus' \\| 'disabled' \\| 'readonly' \\| 'error' \\| 'success' \\| 'loading' | 'default' | Current state of the input |\n| onValidate | (value: string) =\u003e string \\| null | undefined | Custom validation function |\n| mask | (value: string) =\u003e string | undefined | Function to mask/format the input value |\n| showPasswordToggle | boolean | true | Whether to show the password toggle button |\n\n### EmailInput\n\n| Prop Name | Type | Default | Description |\n|-----------|------|---------|-------------|\n| label | React.ReactNode | undefined | Label for the input field |\n| helpText | React.ReactNode | undefined | Additional help text displayed below the input |\n| icon | React.ReactNode | undefined | Icon to display inside the input |\n| clearable | boolean | false | Whether to show a clear button |\n| validationMessage | React.ReactNode | undefined | Validation or error message |\n| characterLimit | number | undefined | Maximum number of characters allowed |\n| prefix | React.ReactNode | undefined | Content to display before the input |\n| suffix | React.ReactNode | undefined | Content to display after the input |\n| variant | 'normal' \\| 'floating' \\| 'outlined' \\| 'filled' \\| 'underlined' \\| 'rounded' | 'normal' | Visual variant of the input |\n| inputState | 'default' \\| 'hover' \\| 'focus' \\| 'disabled' \\| 'readonly' \\| 'error' \\| 'success' \\| 'loading' | 'default' | Current state of the input |\n| onValidate | (value: string) =\u003e string \\| null | undefined | Custom validation function |\n| mask | (value: string) =\u003e string | undefined | Function to mask/format the input value |\n\n### NumberInput\n\n| Prop Name | Type | Default | Description |\n|-----------|------|---------|-------------|\n| label | React.ReactNode | undefined | Label for the input field |\n| helpText | React.ReactNode | undefined | Additional help text displayed below the input |\n| icon | React.ReactNode | undefined | Icon to display inside the input |\n| clearable | boolean | false | Whether to show a clear button |\n| validationMessage | React.ReactNode | undefined | Validation or error message |\n| characterLimit | number | undefined | Maximum number of characters allowed |\n| prefix | React.ReactNode | undefined | Content to display before the input |\n| suffix | React.ReactNode | undefined | Content to display after the input |\n| variant | 'normal' \\| 'floating' \\| 'outlined' \\| 'filled' \\| 'underlined' \\| 'rounded' | 'normal' | Visual variant of the input |\n| inputState | 'default' \\| 'hover' \\| 'focus' \\| 'disabled' \\| 'readonly' \\| 'error' \\| 'success' \\| 'loading' | 'default' | Current state of the input |\n| onValidate | (value: string) =\u003e string \\| null | undefined | Custom validation function |\n| mask | (value: string) =\u003e string | undefined | Function to mask/format the input value |\n| min | number | undefined | The minimum value allowed |\n| max | number | undefined | The maximum value allowed |\n| step | number | undefined | The step value for the number input |\n\n### DateInput\n\n| Prop Name | Type | Default | Description |\n|-----------|------|---------|-------------|\n| label | React.ReactNode | undefined | Label for the input field |\n| helpText | React.ReactNode | undefined | Additional help text displayed below the input |\n| icon | React.ReactNode | undefined | Icon to display inside the input |\n| clearable | boolean | false | Whether to show a clear button |\n| validationMessage | React.ReactNode | undefined | Validation or error message |\n| variant | 'normal' \\| 'floating' \\| 'outlined' \\| 'filled' \\| 'underlined' \\| 'rounded' | 'normal' | Visual variant of the input |\n| inputState | 'default' \\| 'hover' \\| 'focus' \\| 'disabled' \\| 'readonly' \\| 'error' \\| 'success' \\| 'loading' | 'default' | Current state of the input |\n| onValidate | (value: string) =\u003e string \\| null | undefined | Custom validation function |\n| min | string | undefined | The minimum date allowed |\n| max | string | undefined | The maximum date allowed |\n\n### TimeInput\n\n| Prop Name | Type | Default | Description |\n|-----------|------|---------|-------------|\n| label | React.ReactNode | undefined | Label for the input field |\n| helpText | React.ReactNode | undefined | Additional help text displayed below the input |\n| icon | React.ReactNode | undefined | Icon to display inside the input |\n| clearable | boolean | false | Whether to show a clear button |\n| validationMessage | React.ReactNode | undefined | Validation or error message |\n| variant | 'normal' \\| 'floating' \\| 'outlined' \\| 'filled' \\| 'underlined' \\| 'rounded' | 'normal' | Visual variant of the input |\n| inputState | 'default' \\| 'hover' \\| 'focus' \\| 'disabled' \\| 'readonly' \\| 'error' \\| 'success' \\| 'loading' | 'default' | Current state of the input |\n| onValidate | (value: string) =\u003e string \\| null | undefined | Custom validation function |\n| step | number | undefined | The step value for the time input (in seconds) |\n\n### DateTimeInput\n\n| Prop Name | Type | Default | Description |\n|-----------|------|---------|-------------|\n| label | React.ReactNode | undefined | Label for the input field |\n| helpText | React.ReactNode | undefined | Additional help text displayed below the input |\n| icon | React.ReactNode | undefined | Icon to display inside the input |\n| clearable | boolean | false | Whether to show a clear button |\n| validationMessage | React.ReactNode | undefined | Validation or error message |\n| variant | 'normal' \\| 'floating' \\| 'outlined' \\| 'filled' \\| 'underlined' \\| 'rounded' | 'normal' | Visual variant of the input |\n| inputState | 'default' \\| 'hover' \\| 'focus' \\| 'disabled' \\| 'readonly' \\| 'error' \\| 'success' \\| 'loading' | 'default' | Current state of the input |\n| onValidate | (value: string) =\u003e string \\| null | undefined | Custom validation function |\n| min | string | undefined | The minimum date and time allowed |\n| max | string | undefined | The maximum date and time allowed |\n| step | number | undefined | The step value for the time part (in seconds) |\n\n### MonthInput\n\n| Prop Name | Type | Default | Description |\n|-----------|------|---------|-------------|\n| label | React.ReactNode | undefined | Label for the input field |\n| helpText | React.ReactNode | undefined | Additional help text displayed below the input |\n| icon | React.ReactNode | undefined | Icon to display inside the input |\n| clearable | boolean | false | Whether to show a clear button |\n| validationMessage | React.ReactNode | undefined | Validation or error message |\n| variant | 'normal' \\| 'floating' \\| 'outlined' \\| 'filled' \\| 'underlined' \\| 'rounded' | 'normal' | Visual variant of the input |\n| inputState | 'default' \\| 'hover' \\| 'focus' \\| 'disabled' \\| 'readonly' \\| 'error' \\| 'success' \\| 'loading' | 'default' | Current state of the input |\n| onValidate | (value: string) =\u003e string \\| null | undefined | Custom validation function |\n| min | string | undefined | The minimum month allowed |\n| max | string | undefined | The maximum month allowed |\n\n### SearchInput\n\n| Prop Name | Type | Default | Description |\n|-----------|------|---------|-------------|\n| label | React.ReactNode | undefined | Label for the input field |\n| helpText | React.ReactNode | undefined | Additional help text displayed below the input |\n| icon | React.ReactNode | undefined | Icon to display inside the input |\n| clearable | boolean | false | Whether to show a clear button |\n| validationMessage | React.ReactNode | undefined | Validation or error message |\n| characterLimit | number | undefined | Maximum number of characters allowed |\n| prefix | React.ReactNode | undefined | Content to display before the input |\n| suffix | React.ReactNode | undefined | Content to display after the input |\n| variant | 'normal' \\| 'floating' \\| 'outlined' \\| 'filled' \\| 'underlined' \\| 'rounded' | 'normal' | Visual variant of the input |\n| inputState | 'default' \\| 'hover' \\| 'focus' \\| 'disabled' \\| 'readonly' \\| 'error' \\| 'success' \\| 'loading' | 'default' | Current state of the input |\n| onValidate | (value: string) =\u003e string \\| null | undefined | Custom validation function |\n| mask | (value: string) =\u003e string | undefined | Function to mask/format the input value |\n| showSearchIcon | boolean | true | Whether to show the search icon |\n\n### UrlInput\n\n| Prop Name | Type | Default | Description |\n|-----------|------|---------|-------------|\n| label | React.ReactNode | undefined | Label for the input field |\n| helpText | React.ReactNode | undefined | Additional help text displayed below the input |\n| icon | React.ReactNode | undefined | Icon to display inside the input |\n| clearable | boolean | false | Whether to show a clear button |\n| validationMessage | React.ReactNode | undefined | Validation or error message |\n| characterLimit | number | undefined | Maximum number of characters allowed |\n| prefix | React.ReactNode | undefined | Content to display before the input |\n| suffix | React.ReactNode | undefined | Content to display after the input |\n| variant | 'normal' \\| 'floating' \\| 'outlined' \\| 'filled' \\| 'underlined' \\| 'rounded' | 'normal' | Visual variant of the input |\n| inputState | 'default' \\| 'hover' \\| 'focus' \\| 'disabled' \\| 'readonly' \\| 'error' \\| 'success' \\| 'loading' | 'default' | Current state of the input |\n| onValidate | (value: string) =\u003e string \\| null | undefined | Custom validation function |\n| mask | (value: string) =\u003e string | undefined | Function to mask/format the input value |\n\n### TelephoneInput\n\n| Prop Name | Type | Default | Description |\n|-----------|------|---------|-------------|\n| label | React.ReactNode | undefined | Label for the input field |\n| helpText | React.ReactNode | undefined | Additional help text displayed below the input |\n| icon | React.ReactNode | undefined | Icon to display inside the input |\n| clearable | boolean | false | Whether to show a clear button |\n| validationMessage | React.ReactNode | undefined | Validation or error message |\n| characterLimit | number | undefined | Maximum number of characters allowed |\n| prefix | React.ReactNode | undefined | Content to display before the input |\n| suffix | React.ReactNode | undefined | Content to display after the input |\n| variant | 'normal' \\| 'floating' \\| 'outlined' \\| 'filled' \\| 'underlined' \\| 'rounded' | 'normal' | Visual variant of the input |\n| inputState | 'default' \\| 'hover' \\| 'focus' \\| 'disabled' \\| 'readonly' \\| 'error' \\| 'success' \\| 'loading' | 'default' | Current state of the input |\n| onValidate | (value: string) =\u003e string \\| null | undefined | Custom validation function |\n| mask | (value: string) =\u003e string | undefined | Function to mask/format the input value |\n\n### FileInput\n\n| Prop Name | Type | Default | Description |\n|-----------|------|---------|-------------|\n| label | React.ReactNode | undefined | Label for the input field |\n| helpText | React.ReactNode | undefined | Additional help text displayed below the input |\n| validationMessage | React.ReactNode | undefined | Validation or error message |\n| variant | 'normal' \\| 'floating' \\| 'outlined' \\| 'filled' \\| 'underlined' \\| 'rounded' | 'normal' | Visual variant of the input |\n| inputState | 'default' \\| 'hover' \\| 'focus' \\| 'disabled' \\| 'readonly' \\| 'error' \\| 'success' \\| 'loading' | 'default' | Current state of the input |\n| onValidate | (value: string) =\u003e string \\| null | undefined | Custom validation function |\n| accept | string | undefined | File types to accept |\n| multiple | boolean | false | Whether to allow multiple file selection |\n| preview | boolean | false | Whether to show file preview |\n| fileUploadText | React.ReactNode | undefined | Text to display for file upload |\n\n### TextareaInput\n\n| Prop Name | Type | Default | Description |\n|-----------|------|---------|-------------|\n| label | React.ReactNode | undefined | Label for the input field |\n| helpText | React.ReactNode | undefined | Additional help text displayed below the input |\n| validationMessage | React.ReactNode | undefined | Validation or error message |\n| characterLimit | number | undefined | Maximum number of characters allowed |\n| variant | 'normal' \\| 'floating' \\| 'outlined' \\| 'filled' \\\n\n### Usage Example\n\n```jsx\n\u003cInput\n  label=\"Username\"\n  helpText=\"Enter your username or email\"\n  icon={\u003cUserIcon /\u003e}\n  clearable={true}\n  validationMessage=\"Username is required\"\n  characterLimit={50}\n  prefix=\"@\"\n  suffix=\".com\"\n  variant=\"outlined\"\n  inputState=\"default\"\n  onValidate={(value) =\u003e value.length \u003c 3 ? \"Username too short\" : null}\n  mask={(value) =\u003e value.toLowerCase()}\n  wrapperStyle={{ marginBottom: '20px' }}\n  inputStyle={{ fontWeight: 'bold' }}\n/\u003e\n```\n\nThis example demonstrates many of the available props. Adjust as needed for your specific use case.\n\n## 🎭 Theming\n\nCustomize the theme by passing a theme object to the ThemeProvider:\n\n```jsx\nimport { ThemeProvider, lightTheme } from 'rc-input-component';\n\nconst customTheme = {\n  ...lightTheme,\n  colors: {\n    ...lightTheme.colors,\n    primary: '#007bff',\n    secondary: '#6c757d',\n  },\n};\n\nfunction App() {\n  return (\n    \u003cThemeProvider initialTheme=\"light\" theme={customTheme}\u003e\n      {/* Your app components */}\n    \u003c/ThemeProvider\u003e\n  );\n}\n```\n\n## ♿ Accessibility\n\n- Every input has an associated label\n- Keyboard navigation support\n- ARIA attributes for enhanced screen reader support\n- Clear error identification for users with disabilities\n\n## 🛠️ Development\n\nTo start the development server:\n\n```bash\nnpm run dev\n```\n\nTo build the package:\n\n```bash\nnpm run build\n```\n\n## 📄 License\n\nMIT\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## 📚 Documentation\n\nFor full documentation and a showcase of all input variations, clone this repository and run:\n\n```bash\nnpm run dev\n```\n\nThis will start a development server with a showcase page demonstrating all input types, variations, and states.\n\n---\n\nMade with ❤️ by [Debraj Karmakar](https://www.linkedin.com/in/debrajkarmakar010/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdebrajhyper%2Frc-input-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdebrajhyper%2Frc-input-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdebrajhyper%2Frc-input-component/lists"}