@devekene001/super-input 0.0.2

package/README.md

@@ -0,0 +1,23 @@
+# My Super Input
+
+A professional, reusable text input for React.
+
+## How to use it:
+1. Install it: `npm install my-super-input`
+2. Use it in your code:
+
+```javascript
+import SuperInput from 'my-super-input';
+
+function App() {
+  const [name, setName] = React.useState('');
+  
+  return (
+    <SuperInput 
+      label="Your Name"
+      value={name}
+      onChange={setName}
+      placeholder="Type here..."
+    />
+  );
+}

package/dist/index.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+// The "Safety Guard"
+
+var SuperInput = function SuperInput(_ref) {
+  var label = _ref.label,
+    value = _ref.value,
+    _onChange = _ref.onChange,
+    placeholder = _ref.placeholder,
+    error = _ref.error,
+    style = _ref.style,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'text' : _ref$type,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    name = _ref.name;
+  // We create a unique ID so the label knows exactly which box it belongs to
+  var inputId = "super-input-".concat(name || Math.random().toString(36).substr(2, 9));
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      marginBottom: '15px',
+      fontFamily: 'Arial, sans-serif',
+      opacity: disabled ? 0.6 : 1 // Look faded if locked
+    }
+  }, label && /*#__PURE__*/_react["default"].createElement("label", {
+    htmlFor: inputId,
+    style: {
+      fontWeight: 'bold',
+      marginBottom: '5px',
+      fontSize: '14px'
+    }
+  }, label), /*#__PURE__*/_react["default"].createElement("input", {
+    id: inputId,
+    name: name,
+    type: type,
+    value: value,
+    disabled: disabled,
+    placeholder: placeholder,
+    onChange: function onChange(e) {
+      return _onChange(e.target.value);
+    }
+    // We use a CSS class or inline style with focus logic
+    ,
+    style: _objectSpread({
+      padding: '12px',
+      fontSize: '16px',
+      borderRadius: '8px',
+      border: error ? '2px solid #ff4d4f' : '1px solid #d9d9d9',
+      outline: 'none',
+      transition: 'all 0.3s',
+      // Makes color changes smooth
+      cursor: disabled ? 'not-allowed' : 'text'
+    }, style)
+  }), error && /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      color: '#ff4d4f',
+      fontSize: '12px',
+      marginTop: '5px',
+      fontWeight: '500'
+    }
+  }, error));
+};
+
+// This is the "Safety Manual" for other developers
+SuperInput.propTypes = {
+  label: _propTypes["default"].string,
+  value: _propTypes["default"].string.isRequired,
+  // It MUST have a value
+  onChange: _propTypes["default"].func.isRequired,
+  // It MUST have a function
+  placeholder: _propTypes["default"].string,
+  error: _propTypes["default"].string,
+  type: _propTypes["default"].oneOf(['text', 'password', 'email', 'number']),
+  disabled: _propTypes["default"].bool,
+  style: _propTypes["default"].object,
+  name: _propTypes["default"].string
+};
+var _default = exports["default"] = SuperInput;

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@devekene001/super-input",
+  "version": "0.0.2",
+  "description": "A very fancy and professional text input for React",
+  "main": "dist/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "rm -rf dist && babel src --out-dir dist"
+  },
+  "peerDependencies": {
+    "react": ">=16"
+  },
+  "keywords": [],
+  "author": "developerekene",
+  "license": "MIT",
+  "dependencies": {
+    "prop-types": "^15.8.1",
+    "react": ">=16",
+    "react-dom": "^19.2.4"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.28.6",
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.2",
+    "@babel/preset-react": "^7.28.5"
+  },
+  "files": [
+    "dist"
+  ]
+}