meticulous-ui 1.5.1 → 1.6.0

package/README.md

@@ -54,6 +54,7 @@ export default App;
 | `Timer`       | Renders analog / digital clock with alarm |
 | `OtpInput`    | Gives inputs to enter and edit OTP        |
 | `VideoPlayer` | Renders video with keyboard shortcuts     |
+| `Input`       | Renders input box to let user enter input |
 
 ## 📦 Icon Components
 

package/components/Input/Input/Input.js

@@ -0,0 +1,45 @@
+import { j as o } from "../../../_virtual/jsx-runtime.js";
+import { useState as F } from "react";
+import { Wrapper as g, InputBox as B, Label as I, HelperText as $ } from "./styles.js";
+import { getColor as b } from "./helpers.js";
+const W = ({
+  label: n,
+  onChange: l,
+  value: r,
+  type: p,
+  hasError: e,
+  name: a = "input",
+  color: d = "blue",
+  size: i = "20",
+  disableAutoComplete: m,
+  helperText: u = "",
+  ...f
+}) => {
+  const [t, c] = F(!1), s = b(d), x = () => c(!0), h = () => c(!1), j = (C) => {
+    l(C);
+  };
+  return /* @__PURE__ */ o.jsxs(g, { children: [
+    /* @__PURE__ */ o.jsx(
+      B,
+      {
+        type: p,
+        name: a,
+        hasError: e,
+        size: i,
+        value: r,
+        $isFocused: t,
+        $shade: s,
+        onFocus: x,
+        onBlur: h,
+        onChange: j,
+        autoComplete: m ? "off" : "on",
+        ...f
+      }
+    ),
+    n && /* @__PURE__ */ o.jsx(I, { hasError: e, $isFocused: t, $shade: s, value: r, children: n }),
+    u && /* @__PURE__ */ o.jsx($, { hasError: e, $isFocused: t, $shade: s, children: u })
+  ] });
+};
+export {
+  W as default
+};

package/components/Input/Input/helpers.js

@@ -0,0 +1,30 @@
+import f from "../../../node_modules/lodash-es/get.js";
+import l from "../../../colors/blue.js";
+import t from "../../../colors/green.js";
+import p from "../../../colors/red.js";
+import n from "../../../colors/yellow.js";
+import g from "../../../colors/orange.js";
+import a from "../../../colors/black.js";
+import r from "../../../colors/grey.js";
+import u from "../../../colors/violet.js";
+import y from "../../../colors/teal.js";
+import b from "../../../colors/purple.js";
+import c from "../../../colors/pink.js";
+const k = {
+  blue: l.m500,
+  green: t.m500,
+  red: p.m500,
+  green: t.m500,
+  yellow: n.m500,
+  orange: g.m500,
+  black: a.m500,
+  grey: r.m500,
+  violet: u.m500,
+  teal: y.m500,
+  purple: b.m500,
+  pink: c.m500
+}, E = (m) => f(k, m, r.m500), H = ({ hasError: m, $shade: i, $isFocused: o, value: e }) => m ? typeof e == "string" && !e && !o ? r.m500 : p.m400 : o ? i : r.m500;
+export {
+  E as getColor,
+  H as getCssShade
+};

package/components/Input/Input/index.js

@@ -0,0 +1,4 @@
+import o from "./Input.js";
+export {
+  o as default
+};

package/components/Input/Input/styles.js

@@ -0,0 +1,63 @@
+import e, { css as i } from "../../../node_modules/styled-components/dist/styled-components.browser.esm.js";
+import n from "../../../colors/black.js";
+import s from "../../../colors/red.js";
+import { getCssShade as r } from "./helpers.js";
+const d = e.input`
+  height: 3rem;
+  border-radius: 0.4rem;
+  font-size: 1.4rem;
+  border: 2px solid ${({ hasError: o }) => o ? s.m400 : n.m200};
+  padding: 0 0.6rem;
+  font-weight: 400;
+  transition: border-color 0.3s ease;
+  background-color: transparent !important;
+  overflow: hidden;
+
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus,
+  &:-webkit-autofill:active {
+    -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset;
+    -webkit-text-fill-color: var(--input-text);
+    transition: background-color 9999s ease-in-out 0s;
+  }
+
+  &:focus {
+    border: 2px solid
+      ${({ $shade: o, hasError: t }) => r({ $shade: o, hasError: t, $isFocused: !0 })};
+    outline: none;
+  }
+`, f = e.p`
+  margin-top: 0.4rem;
+  margin-left: 0.4rem;
+  font-size: 0.8rem;
+  color: ${r};
+`, c = e.div`
+  position: relative;
+`, u = e.div`
+  position: absolute;
+  top: -0.4rem;
+  left: 0.5rem;
+  font-size: 0.8rem;
+  background-color: white;
+  padding: 0 0.4rem;
+  transition: 0.25s;
+  font-weight: 400;
+  pointer-events: none;
+  color: ${r};
+
+  ${({ $isFocused: o, value: t }) => o || t ? i`
+          top: -0.4rem;
+          left: 0.5rem;
+        ` : i`
+          top: 0.8rem;
+          left: 0.5rem;
+          font-size: 1.4rem;
+        `}
+`;
+export {
+  f as HelperText,
+  d as InputBox,
+  u as Label,
+  c as Wrapper
+};

package/index.js

@@ -1,14 +1,16 @@
 import { default as a } from "./components/Pagination/Pagination.js";
 import { default as e } from "./components/Toast/Toast.js";
 import { default as s } from "./components/OtpInput/OtpInput.js";
-import { default as p } from "./colors/index.js";
-import { default as d } from "./utils/index.js";
-import { default as x } from "./components/Icons/index.js";
+import { default as u } from "./components/Input/Input/Input.js";
+import { default as d } from "./colors/index.js";
+import { default as x } from "./utils/index.js";
+import { default as i } from "./components/Icons/index.js";
 export {
+  u as Input,
   s as OtpInput,
   a as Pagination,
   e as Toast,
-  p as colors,
-  x as icons,
-  d as utils
+  d as colors,
+  i as icons,
+  x as utils
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {