@hari_digitus/sms-ui-library 5.0.1 → 5.0.3

package/README.md

@@ -508,3 +508,291 @@ export default function TestRadio() {
 | `onChange` | `(value: string) => void` | —           | Triggered when option changes         |
 | `disabled` | `boolean`                 | `false`     | Disables radio interaction            |
 
+-----------------------------------------------Input field Latest-------------------------------
+
+# Input Component
+
+A flexible, fully controlled input component built with React and inline styles — no Tailwind dependency in the consuming app.
+
+---
+
+## Installation
+
+```bash
+npm i @hari_digitus/sms-ui-library
+```
+
+## Import
+
+```tsx
+import { Input } from "@hari_digitus/sms-ui-library";
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `inputSize` | `"sm" \| "md" \| "lg"` | `"md"` | Controls height and font size |
+| `error` | `string` | `undefined` | Shows red border and red error message below input |
+| `hint` | `string` | `undefined` | Shows gray hint text below input (only shown when no error) |
+| `label` | `string` | `undefined` | Label rendered above the input |
+| `required` | `boolean` | `false` | Appends red `*` to the label |
+| `leadingIcon` | `React.ReactNode` | `undefined` | Icon rendered on the left side of the input |
+| `trailingIcon` | `React.ReactNode` | `undefined` | Icon rendered on the right side of the input |
+| `regex` | `RegExp` | `undefined` | Blocks characters that don't match the pattern while typing |
+| `onRegexFail` | `(value: string) => void` | `undefined` | Called when the typed value fails the regex test |
+| `placeholder` | `string` | `"Enter text.."` | Placeholder text (font-weight 400, color #6F778E) |
+| `type` | `string` | `"text"` | HTML input type: `"text"`, `"password"`, `"email"`, `"number"`, `"tel"` etc. |
+| `disabled` | `boolean` | `false` | Disables the input — gray background, not-allowed cursor, no caret |
+| `readOnly` | `boolean` | `false` | Makes input read-only — gray background, not-allowed cursor, no caret |
+| `value` | `string` | `undefined` | Controlled value |
+| `defaultValue` | `string` | `undefined` | Uncontrolled default value |
+| `onChange` | `(e: ChangeEvent<HTMLInputElement>) => void` | `undefined` | Change handler — called only when value passes regex (if set) |
+| `onBlur` | `(e: FocusEvent<HTMLInputElement>) => void` | `undefined` | Blur handler |
+| `onFocus` | `(e: FocusEvent<HTMLInputElement>) => void` | `undefined` | Focus handler |
+| `onKeyDown` | `(e: KeyboardEvent<HTMLInputElement>) => void` | `undefined` | Key down handler |
+| `onKeyUp` | `(e: KeyboardEvent<HTMLInputElement>) => void` | `undefined` | Key up handler |
+| `maxLength` | `number` | `undefined` | Maximum number of characters allowed |
+| `minLength` | `number` | `undefined` | Minimum number of characters required |
+| `min` | `number` | `undefined` | Minimum value (for `type="number"`) |
+| `max` | `number` | `undefined` | Maximum value (for `type="number"`) |
+| `step` | `number` | `undefined` | Step value (for `type="number"`) |
+| `pattern` | `string` | `undefined` | HTML pattern attribute for form validation |
+| `autoComplete` | `string` | `undefined` | Browser autocomplete hint e.g. `"off"`, `"email"` |
+| `autoFocus` | `boolean` | `false` | Autofocus on mount |
+| `spellCheck` | `boolean` | `undefined` | Enable or disable spellcheck |
+| `id` | `string` | `undefined` | Custom id — auto-generated from label if not provided |
+| `name` | `string` | `undefined` | Input name for form submission |
+| `tabIndex` | `number` | `undefined` | Tab order |
+| `style` | `React.CSSProperties` | `undefined` | Override any inline style (border, height, background etc.) |
+| `className` | `string` | `undefined` | Additional CSS class names |
+
+---
+
+## Size Reference
+
+| `inputSize` | Height | Font Size |
+|---|---|---|
+| `sm` | 34px | 12px |
+| `md` | 40px | 14px |
+| `lg` | 48px | 16px |
+
+---
+
+## Examples
+
+### Basic
+
+```tsx
+<Input placeholder="Enter text" />
+```
+
+### With Error
+
+```tsx
+<Input
+  placeholder="Enter department name"
+  error="This field is required"
+/>
+```
+
+### With Hint
+
+```tsx
+<Input
+  placeholder="Enter email"
+  hint="We'll never share your email"
+/>
+```
+
+### With Label
+
+```tsx
+<Input
+  label="Department Name"
+  required
+  placeholder="Enter department name"
+/>
+```
+
+### With Label + Error
+
+```tsx
+<Input
+  label="Department Name"
+  required
+  placeholder="Enter department name"
+  error="This field is required"
+/>
+```
+
+### Sizes
+
+```tsx
+<Input inputSize="sm" placeholder="Small input" />
+<Input inputSize="md" placeholder="Medium input" />
+<Input inputSize="lg" placeholder="Large input" />
+```
+
+### Disabled
+
+```tsx
+<Input placeholder="Disabled input" disabled />
+```
+
+### Read Only
+
+```tsx
+<Input value="Read only value" readOnly />
+```
+
+### Password
+
+```tsx
+<Input type="password" placeholder="Enter password" />
+```
+
+### With Leading Icon
+
+```tsx
+import { SearchIcon } from "lucide-react";
+
+<Input
+  placeholder="Search..."
+  leadingIcon={<SearchIcon size={16} />}
+/>
+```
+
+### With Trailing Icon
+
+```tsx
+import { EyeIcon } from "lucide-react";
+
+<Input
+  type="password"
+  placeholder="Enter password"
+  trailingIcon={<EyeIcon size={16} />}
+/>
+```
+
+### Numbers Only (Regex)
+
+```tsx
+const [value, setValue] = useState("");
+const [error, setError] = useState("");
+
+<Input
+  placeholder="Enter number"
+  value={value}
+  regex={/^\d+$/}
+  onRegexFail={() => setError("Only numbers allowed")}
+  onChange={(e) => {
+    setValue(e.target.value);
+    setError("");
+  }}
+  error={error}
+/>
+```
+
+### Letters Only (Regex)
+
+```tsx
+<Input
+  placeholder="Enter name"
+  regex={/^[a-zA-Z\s]+$/}
+  onRegexFail={() => setError("Only letters allowed")}
+/>
+```
+
+### Email with Regex
+
+```tsx
+const [value, setValue] = useState("");
+const [error, setError] = useState("");
+
+const isValidEmail = (val: string) =>
+  /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val);
+
+<Input
+  placeholder="Enter email"
+  value={value}
+  regex={/^[a-zA-Z0-9._%+\-@]*$/}
+  onRegexFail={() => setError("Invalid characters")}
+  onChange={(e) => {
+    setValue(e.target.value);
+    setError("");
+  }}
+  onBlur={() => {
+    if (value && !isValidEmail(value)) {
+      setError("Please enter a valid email");
+    }
+  }}
+  error={error}
+/>
+```
+
+### Phone Number (Max 10 digits)
+
+```tsx
+<Input
+  placeholder="Enter phone number"
+  regex={/^\d{0,10}$/}
+  onRegexFail={() => setError("Maximum 10 digits allowed")}
+  type="tel"
+/>
+```
+
+### Style Override
+
+```tsx
+{/* Custom border color */}
+<Input
+  placeholder="Enter text"
+  style={{ border: "1px solid #F79009" }}
+/>
+
+{/* Custom height */}
+<Input
+  placeholder="Enter text"
+  style={{ height: "56px" }}
+/>
+
+{/* Custom background */}
+<Input
+  placeholder="Enter text"
+  style={{ backgroundColor: "#F0F4FF" }}
+/>
+```
+
+### Max Length
+
+```tsx
+<Input
+  placeholder="Enter text"
+  maxLength={50}
+/>
+```
+
+### Controlled Input
+
+```tsx
+const [value, setValue] = useState("");
+
+<Input
+  value={value}
+  onChange={(e) => setValue(e.target.value)}
+  placeholder="Controlled input"
+/>
+```
+
+---
+
+## Styling Notes
+
+- All styles are applied via inline `style` — no Tailwind dependency in the consuming app
+- `style` prop is spread last so consumer overrides always win
+- Typed text is `font-weight: 500`, placeholder is `font-weight: 400`
+- `readOnly` and `disabled` both apply `#F3F3F3` background, `not-allowed` cursor, and hidden caret
+- Error border `#FDA29B` and error text `#F04438` are applied automatically when `error` prop is passed