feat(react): add Input component with light theme and states

js/react/lib/components/input/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./input";
+export * from './input.types';

js/react/lib/components/input/input.const.ts

@@ -0,0 +1,9 @@
+export const INPUT_VARIANTS = {
+  default: "bg-white border border-black text-black placeholder:text-neutral-500",
+  hover: "bg-neutral-100 border border-black text-black placeholder:text-neutral-500",
+  active: "bg-white border border-orange-500 ring-1 ring-orange-500 text-black placeholder:text-neutral-500",
+  inactive: "bg-neutral-100 border border-neutral-300 text-neutral-400 placeholder:text-neutral-400 cursor-not-allowed",
+  error: "bg-white border border-red-600 text-black placeholder:text-neutral-500",
+};
+
+export const ERROR_TEXT_CLASSES = "text-sm text-red-600 mt-1";

js/react/lib/components/input/input.tsx

@@ -0,0 +1,39 @@
+import { INPUT_VARIANTS, ERROR_TEXT_CLASSES } from "./input.const";
+import { InputFieldProps } from "./input.types";
+import clsx from "clsx";
+
+export default function InputField({
+  variant = "default",
+  label,
+  errorMessage,
+  icon,
+  disabled,
+  className,
+  ...props
+}: InputFieldProps) {
+  return (
+    <div className="flex flex-col gap-1">
+      {label && <label className="text-sm font-medium text-black">{label}</label>}
+      <div
+        className={clsx(
+          "flex items-center gap-2 px-4 py-2 rounded-xl transition-colors",
+          INPUT_VARIANTS[variant],
+          className
+        )}
+      >
+        {icon && <span className="text-neutral-500">{icon}</span>}
+        <input
+          disabled={variant === "inactive" || disabled}
+          className={clsx(
+            "w-full outline-none bg-transparent placeholder:text-inherit",
+            { "text-neutral-400": variant === "inactive" }
+          )}
+          {...props}
+        />
+      </div>
+      {variant === "error" && errorMessage && (
+        <span className={ERROR_TEXT_CLASSES}>{errorMessage}</span>
+      )}
+    </div>
+  );
+}

js/react/lib/components/input/input.types.ts

@@ -0,0 +1,9 @@
+import { InputHTMLAttributes, ReactNode } from "react";
+import { INPUT_VARIANTS } from "./input.const";
+
+export interface InputFieldProps extends InputHTMLAttributes<HTMLInputElement> {
+  variant?: keyof typeof INPUT_VARIANTS;
+  label?: string;
+  errorMessage?: string;
+  icon?: ReactNode;
+}

js/react/lib/index.ts

@@ -5,6 +5,7 @@ export * from "./components/contact-form";
 export * from "./components/chip";
 export * from "./components/tag";
 export * from "./components/flap";
+export { default as Input } from "./components/input";
 export * from "./components/level";
 export * from "./components/avatar";
 export * from "./components/collaborators";

js/react/showcase/App.tsx

@@ -5,6 +5,8 @@ import {
   Github,
   Tag,
   Telegram,
+  Input,
+  Location,
   Flap,
   Chip,
   Level,
@@ -524,6 +526,94 @@ export function App() {
           </div>
         </div>
       </ShowComponent>
+      <ShowComponent title="Labels">
+        <div className="mx-auto max-w-4xl space-y-6 py-10">
+          <div>
+            <label className="mb-2 block text-sm font-semibold text-black">
+              Default
+            </label>
+            <div className="flex gap-4">
+              <Input placeholder="Input" variant="default" className="w-full" />
+              <Input
+                placeholder="Input"
+                variant="default"
+                icon={<Location />}
+                className="w-full"
+              />
+            </div>
+          </div>
+
+          <div>
+            <label className="mb-2 block text-sm font-semibold text-black">
+              Hover
+            </label>
+            <div className="flex gap-4">
+              <Input placeholder="Input" variant="hover" className="w-full" />
+              <Input
+                placeholder="Input"
+                variant="hover"
+                icon={<Location />}
+                className="w-full"
+              />
+            </div>
+          </div>
+
+          <div>
+            <label className="mb-2 block text-sm font-semibold text-black">
+              Pressed/Activo
+            </label>
+            <div className="flex gap-4">
+              <Input placeholder="Input" variant="active" className="w-full" />
+              <Input
+                placeholder="Input"
+                variant="active"
+                icon={<Location />}
+                className="w-full"
+              />
+            </div>
+          </div>
+
+          <div>
+            <label className="mb-2 block text-sm font-semibold text-black">
+              Inactivo
+            </label>
+            <div className="flex gap-4">
+              <Input
+                placeholder="Input"
+                variant="inactive"
+                className="w-full"
+              />
+              <Input
+                placeholder="Input"
+                variant="inactive"
+                icon={<Location />}
+                className="w-full"
+              />
+            </div>
+          </div>
+
+          <div>
+            <label className="mb-2 block text-sm font-semibold text-black">
+              Error
+            </label>
+            <div className="flex gap-4">
+              <Input
+                placeholder="Input"
+                variant="error"
+                errorMessage="Mensaje de error"
+                className="w-full"
+              />
+              <Input
+                placeholder="Input"
+                variant="error"
+                icon={<Location />}
+                errorMessage="Mensaje de error"
+                className="w-full"
+              />
+            </div>
+          </div>
+        </div>
+      </ShowComponent>
       <ShowComponent title="Input Search">
         <div className="flex min-h-60 w-full flex-wrap justify-evenly gap-40 p-5">
           <InputSearch