@devekene001/super-input 0.0.4 → 0.0.6

package/README.md

@@ -1,23 +1,105 @@
-# My Super Input
+@devekene001/super-input
+A professional, universal, and highly flexible text input component for React.
 
-A professional, reusable text input for React.
+🚀 Features
+Universal: Built for React (Web) and React Native (Mobile).
 
-## How to use it:
-1. Install it: `npm install my-super-input`
-2. Use it in your code:
+Object Support: Handle complex state objects with ease using the name prop.
 
-```javascript
-import SuperInput from 'my-super-input';
+Accessible: Built-in accessibility with automatic id and htmlFor linking.
+
+Validation Ready: Visual error states and descriptive error messages.
+
+TypeScript: Full type definitions included.
+
+📦 Installation
+Bash
+npm install @devekene001/super-input
+🛠 Usage
+Option 1: Simple String (The Basic Way)
+Best for single inputs like a search bar or a single name field.
+
+JavaScript
+import React, { useState } from 'react';
+import SuperInput from '@devekene001/super-input';
 
 function App() {
-  const [name, setName] = React.useState('');
+  const [name, setName] = useState('');
   
   return (
     <SuperInput 
       label="Your Name"
       value={name}
-      onChange={setName}
-      placeholder="Type here..."
+      onChange={(val) => setName(val)}
+      placeholder="Type your name..."
     />
   );
-}
+}
+Option 2: Handling Objects (The Pro Way)
+Manage multiple inputs with a single state object. This uses the name prop to identify which field is changing.
+
+JavaScript
+import React, { useState } from "react";
+import SuperInput from "@devekene001/super-input";
+import './App.css';
+
+function App() {
+  // 1. Setup an object to hold all our data
+  const [formData, setFormData] = useState({
+    firstName: '',
+    lastName: '',
+    email: ''
+  });
+
+  // 2. The "Universal" handler
+  // Our SuperInput now sends (value, name)
+  const handleInputChange = (value, name) => {
+    setFormData(prev => ({
+      ...prev,
+      [name]: value // This updates only the field that changed!
+    }));
+  };
+
+  return (
+    <!-- <div style={{ padding: '40px', width: "40%", fontFamily: 'Arial' }}> -->
+      <!-- <h1>Registration Form</h1> -->
+
+      {/* Input for First Name */}
+      <SuperInput
+        label="First Name"
+        name="firstName" // <--- The ID tag
+        value={formData.firstName}
+        onChange={handleInputChange}
+        placeholder="Enter first name"
+      />
+
+      {/* Input for Last Name */}
+      <SuperInput
+        label="Last Name"
+        name="lastName" // <--- The ID tag
+        value={formData.lastName}
+        onChange={handleInputChange}
+        placeholder="Enter last name"
+      />
+
+      {/* Input for Email with a basic error check */}
+      <SuperInput
+        label="Email Address"
+        name="email" // <--- The ID tag
+        type="email"
+        value={formData.email}
+        onChange={handleInputChange}
+        placeholder="example@mail.com"
+        error={formData.email && !formData.email.includes('@') ? "Invalid email address" : ""}
+      />
+
+      {/* Preview the Object in real-time */}
+      <div style={{ marginTop: '20px', padding: '10px', background: '#f4f4f4', borderRadius: '8px' }}>
+        <strong>Current State:</strong>
+        <pre>{JSON.stringify(formData, null, 2)}</pre>
+      </div>
+    </div>
+  );
+}
+
+export default App;

package/dist/index.d.ts

@@ -1,14 +1,25 @@
 import React from 'react';
 
 export interface SuperInputProps {
+    /** The title of the input box */
     label?: string;
+    /** The actual text inside the box */
     value: string;
-    onChange: (value: string) => void;
+    /** * The magic function! 
+     * Now it sends back the VALUE and the NAME of the field 
+     */
+    onChange: (value: string, name?: string) => void;
+    /** Grey ghost text shown when empty */
     placeholder?: string;
+    /** Red error message to show below the box */
     error?: string;
+    /** What kind of keyboard/input to show */
     type?: 'text' | 'password' | 'email' | 'number';
+    /** Is the box locked? */
     disabled?: boolean;
+    /** Custom "paint" for the box */
     style?: React.CSSProperties;
+    /** The 'Key' used to identify this input in an object (e.g., 'username') */
     name?: string;
 }
 

package/dist/index.js

@@ -18,7 +18,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 var SuperInput = function SuperInput(_ref) {
   var label = _ref.label,
     value = _ref.value,
-    _onChange = _ref.onChange,
+    onChange = _ref.onChange,
     placeholder = _ref.placeholder,
     error = _ref.error,
     style = _ref.style,
@@ -52,7 +52,7 @@ var SuperInput = function SuperInput(_ref) {
     disabled: disabled,
     placeholder: placeholder,
     onChange: function onChange(e) {
-      return _onChange(e.target.value);
+      return _onChange(e.target.value, name);
     }
     // We use a CSS class or inline style with focus logic
     ,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devekene001/super-input",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "A very fancy and professional text input for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",