@tunjiadeyemi/ui 1.0.1 → 1.2.0

package/README.md

@@ -19,24 +19,33 @@ yarn add @tunjiadeyemi/ui framer-motion lucide-react
 First, import the styles in your app's entry point (e.g., `App.tsx` or `main.tsx`):
 
 ```tsx
-import '@tunjiadeyemi/ui/styles.css';
+import "@tunjiadeyemi/ui/styles.css";
 ```
 
 Then use the components:
 
 ```tsx
-import { Modal } from '@tunjiadeyemi/ui';
-import { useState } from 'react';
+import { Modal, Input, Skeleton } from "@tunjiadeyemi/ui";
+import { useState } from "react";
 
 function App() {
   const [showModal, setShowModal] = useState(false);
+  const [email, setEmail] = useState("");
 
   return (
     <>
+      <Input
+        type="email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        placeholder="Enter your email"
+        validate={true}
+      />
+
       <button onClick={() => setShowModal(true)}>Open Modal</button>
-      
-      <Modal 
-        showModal={showModal} 
+
+      <Modal
+        showModal={showModal}
         onClose={() => setShowModal(false)}
         revealMode="fade"
         className="bg-white p-8 rounded-lg max-w-md"
@@ -44,24 +53,114 @@ function App() {
         <h2 className="text-2xl font-bold mb-4">Modal Title</h2>
         <p>Modal content goes here</p>
       </Modal>
+
+      <Skeleton width="200px" height="20px" animation="pulse" />
     </>
   );
 }
 ```
 
-### Available Components
+## Available Components
 
-#### Modal
+### Modal
 
-A flexible modal component with multiple reveal animations.
+A flexible modal component with multiple reveal animations and optional drag-to-dismiss.
 
 **Props:**
+
 - `showModal` (boolean): Controls modal visibility
 - `onClose` (function): Callback when modal is closed
-- `revealMode` ('fade' | 'slide-right' | 'slide-bottom'): Animation style
+- `revealMode` ('fade' | 'slide-right' | 'slide-bottom'): Animation style - Default: `'fade'`
+- `isDrag` (boolean): Enable drag to dismiss (for slide-bottom mode) - Default: `false`
 - `className` (string): Custom classes for the modal content
 - `children` (ReactNode): Modal content
 
+**Example:**
+
+```tsx
+<Modal
+  showModal={true}
+  onClose={() => console.log("Modal closed")}
+  revealMode="slide-bottom"
+  isDrag={true}
+  className="bg-white p-6 rounded-lg"
+>
+  <h2>Your Content</h2>
+</Modal>
+```
+
+### Input
+
+A customizable input component with built-in validation, password visibility toggle, and OTP support.
+
+**Props:**
+
+- `type` ('text' | 'email' | 'password' | 'otp' | 'number'): Input type - Default: `'text'`
+- `value` (string): Input value
+- `onChange` (function): Change handler
+- `placeholder` (string): Placeholder text
+- `validate` (boolean): Enable validation - Default: `false`
+- `minLength` (number): Minimum character length
+- `maxLength` (number): Maximum character length
+- `errorMessage` (string): Custom error message
+- `onOtpClick` (function): Callback for OTP button click (when type is 'otp')
+- `className` (string): Additional CSS classes
+- `width` (string): Input width - Default: `'100%'`
+- `height` (string): Input height - Default: `'40px'`
+- `color` (string): Accent color - Default: `'#6B2CE9'`
+- `textColor` (string): Text color - Default: `'white'`
+- `backgroundColor` (string): Background color - Default: `'#1F1F23'`
+- `borderRadius` (string): Border radius - Default: `'10px'`
+
+**Example:**
+
+```tsx
+<Input
+  type="email"
+  value={email}
+  onChange={(e) => setEmail(e.target.value)}
+  placeholder="Enter your email"
+  validate={true}
+  errorMessage="Please enter a valid email"
+/>
+
+<Input
+  type="password"
+  value={password}
+  onChange={(e) => setPassword(e.target.value)}
+  minLength={8}
+  validate={true}
+/>
+
+<Input
+  type="otp"
+  value={otp}
+  onChange={(e) => setOtp(e.target.value)}
+  onOtpClick={() => console.log('Send OTP')}
+  placeholder="Enter OTP"
+/>
+```
+
+### Skeleton
+
+A loading placeholder component with multiple variants and animations.
+
+**Props:**
+
+- `variant` ('text' | 'circular' | 'rectangular'): Skeleton shape - Default: `'rectangular'`
+- `width` (string | number): Width of skeleton - Default: `'100%'`
+- `height` (string | number): Height of skeleton - Default: `'100%'`
+- `animation` ('pulse' | 'wave' | 'none'): Animation type - Default: `'pulse'`
+- `className` (string): Additional CSS classes
+
+**Example:**
+
+```tsx
+<Skeleton variant="text" width="200px" height="20px" />
+<Skeleton variant="circular" width="50px" height="50px" />
+<Skeleton variant="rectangular" width="100%" height="200px" animation="wave" />
+```
+
 ## Development
 
 ```bash

package/dist/index.d.mts

@@ -1,34 +1,46 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React$1 from 'react';
 
 type RevealMode = 'fade' | 'slide-right' | 'slide-bottom';
 interface ModalProps {
-    children: React$1.ReactNode;
+    children: React.ReactNode;
     className?: string;
     revealMode?: RevealMode;
     showModal?: boolean;
     onClose?: () => void;
     isDrag?: boolean;
 }
-declare const Modal: ({ children, className, revealMode, showModal, onClose, isDrag }: ModalProps) => react_jsx_runtime.JSX.Element;
 
-declare const TextInput: ({ type, value, onChange, placeholder, className, backgroundColor, onOtpClick }: {
-    type?: string;
+declare const Modal: ({ isDrag, showModal, onClose, children, className, revealMode, }: ModalProps) => react_jsx_runtime.JSX.Element;
+
+interface TextInputProps {
+    type?: "password" | "otp" | "text" | "email" | "number";
     value?: string;
     onOtpClick?: () => void;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     placeholder?: string;
     className?: string;
     backgroundColor?: string;
-}) => react_jsx_runtime.JSX.Element;
+    validate?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    errorMessage?: string;
+    color?: string;
+    textColor?: string;
+    borderRadius?: string;
+    height?: string;
+    width?: string;
+}
+
+declare const Input: ({ onChange, onOtpClick, validate, type, value, minLength, maxLength, className, placeholder, errorMessage, width, height, color, textColor, borderRadius, backgroundColor, }: TextInputProps) => react_jsx_runtime.JSX.Element;
 
 interface SkeletonProps {
     className?: string;
-    variant?: 'text' | 'circular' | 'rectangular';
+    variant?: "text" | "circular" | "rectangular";
     width?: string | number;
     height?: string | number;
-    animation?: 'pulse' | 'wave' | 'none';
+    animation?: "pulse" | "wave" | "none";
 }
-declare const Skeleton: ({ className, variant, width, height, animation }: SkeletonProps) => react_jsx_runtime.JSX.Element;
 
-export { Modal, Skeleton, TextInput };
+declare const Skeleton: ({ className, variant, width, height, animation, }: SkeletonProps) => react_jsx_runtime.JSX.Element;
+
+export { Input, Modal, Skeleton };

package/dist/index.d.ts

@@ -1,34 +1,46 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React$1 from 'react';
 
 type RevealMode = 'fade' | 'slide-right' | 'slide-bottom';
 interface ModalProps {
-    children: React$1.ReactNode;
+    children: React.ReactNode;
     className?: string;
     revealMode?: RevealMode;
     showModal?: boolean;
     onClose?: () => void;
     isDrag?: boolean;
 }
-declare const Modal: ({ children, className, revealMode, showModal, onClose, isDrag }: ModalProps) => react_jsx_runtime.JSX.Element;
 
-declare const TextInput: ({ type, value, onChange, placeholder, className, backgroundColor, onOtpClick }: {
-    type?: string;
+declare const Modal: ({ isDrag, showModal, onClose, children, className, revealMode, }: ModalProps) => react_jsx_runtime.JSX.Element;
+
+interface TextInputProps {
+    type?: "password" | "otp" | "text" | "email" | "number";
     value?: string;
     onOtpClick?: () => void;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     placeholder?: string;
     className?: string;
     backgroundColor?: string;
-}) => react_jsx_runtime.JSX.Element;
+    validate?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    errorMessage?: string;
+    color?: string;
+    textColor?: string;
+    borderRadius?: string;
+    height?: string;
+    width?: string;
+}
+
+declare const Input: ({ onChange, onOtpClick, validate, type, value, minLength, maxLength, className, placeholder, errorMessage, width, height, color, textColor, borderRadius, backgroundColor, }: TextInputProps) => react_jsx_runtime.JSX.Element;
 
 interface SkeletonProps {
     className?: string;
-    variant?: 'text' | 'circular' | 'rectangular';
+    variant?: "text" | "circular" | "rectangular";
     width?: string | number;
     height?: string | number;
-    animation?: 'pulse' | 'wave' | 'none';
+    animation?: "pulse" | "wave" | "none";
 }
-declare const Skeleton: ({ className, variant, width, height, animation }: SkeletonProps) => react_jsx_runtime.JSX.Element;
 
-export { Modal, Skeleton, TextInput };
+declare const Skeleton: ({ className, variant, width, height, animation, }: SkeletonProps) => react_jsx_runtime.JSX.Element;
+
+export { Input, Modal, Skeleton };

package/dist/index.js

@@ -20,15 +20,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  Input: () => Input_default,
   Modal: () => Modal_default,
-  Skeleton: () => Skeleton_default,
-  TextInput: () => TextInput_default
+  Skeleton: () => Skeleton_default
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/components/Modal.tsx
+// src/components/Modal/Modal.tsx
 var import_framer_motion = require("framer-motion");
-var import_jsx_runtime = require("react/jsx-runtime");
+
+// src/components/Modal/constant.ts
 var revealVariants = {
   fade: {
     initial: { opacity: 0 },
@@ -46,13 +47,16 @@ var revealVariants = {
     exit: { y: "100%", opacity: 0 }
   }
 };
+
+// src/components/Modal/Modal.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
 var Modal = ({
-  children,
-  className,
-  revealMode = "fade",
+  isDrag = false,
   showModal = true,
   onClose,
-  isDrag = false
+  children,
+  className,
+  revealMode = "fade"
 }) => {
   const variants = revealVariants[revealMode];
   const handleOverlayClick = (e) => {
@@ -114,88 +118,190 @@ var Modal = ({
 };
 var Modal_default = Modal;
 
-// src/components/TextInput.tsx
+// src/components/Input/Input.tsx
 var import_react = require("react");
 var import_lucide_react = require("lucide-react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var TextInput = ({
+var Input = ({
+  onChange,
+  onOtpClick,
+  validate = false,
   type,
   value,
-  onChange,
-  placeholder,
+  minLength,
+  maxLength,
   className,
-  backgroundColor = "#1F1F23",
-  onOtpClick
+  placeholder,
+  errorMessage,
+  width = "100%",
+  height = "40px",
+  color = "#6B2CE9",
+  textColor = "white",
+  borderRadius = "10px",
+  backgroundColor = "#1F1F23"
 }) => {
   const [showPassword, setShowPassword] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(null);
   const togglePasswordVisibility = () => {
     setShowPassword(!showPassword);
   };
+  const validateInput = (inputValue = "") => {
+    if (!validate) {
+      setError(null);
+      return true;
+    }
+    if (minLength && inputValue.length < minLength) {
+      setError(errorMessage || `Minimum ${minLength} characters required`);
+      return false;
+    }
+    if (maxLength && inputValue.length > maxLength) {
+      setError(errorMessage || `Maximum ${maxLength} characters allowed`);
+      return false;
+    }
+    switch (type) {
+      case "email":
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (inputValue && !emailRegex.test(inputValue)) {
+          setError(errorMessage || "Invalid email address");
+          return false;
+        }
+        break;
+      case "password":
+        if (!minLength && inputValue.length < 8) {
+          setError(errorMessage || "Password must be at least 8 characters");
+          return false;
+        }
+        break;
+      case "otp":
+        if (inputValue && !/^\d*$/.test(inputValue)) {
+          setError(errorMessage || "OTP must contain only numbers");
+          return false;
+        }
+        if (!minLength && !maxLength && inputValue.length !== 6) {
+          setError(errorMessage || "OTP must be 6 digits");
+          return false;
+        }
+        break;
+      case "number":
+        if (inputValue && isNaN(Number(inputValue))) {
+          setError(errorMessage || "Must be a valid number");
+          return false;
+        }
+        break;
+    }
+    setError(null);
+    return true;
+  };
+  (0, import_react.useEffect)(() => {
+    if (validate && value !== void 0) {
+      validateInput(value);
+    }
+  }, [value, validate, minLength, maxLength, type]);
   if (type === "password") {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative w-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "input",
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { width }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative", style: { width: "100%" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "input",
+          {
+            type: showPassword ? "text" : "password",
+            value,
+            onChange,
+            placeholder,
+            style: {
+              backgroundColor,
+              color: textColor,
+              borderRadius,
+              height,
+              width: "100%"
+            },
+            className: `border ${error ? "border-red-500" : "border-transparent"} placeholder:text-sm text-sm px-4 pr-12 placeholder:opacity-30 focus:outline-none transition ${className}`,
+            onFocus: (e) => !error && (e.target.style.borderColor = color),
+            onBlur: (e) => e.target.style.borderColor = error ? "#ef4444" : "transparent"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: togglePasswordVisibility,
+            className: "absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white transition-colors",
+            "aria-label": showPassword ? "Hide password" : "Show password",
+            children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Eye, { className: "cursor-pointer", size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.EyeClosed, { className: "cursor-pointer", size: 18 })
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-red-500 text-xs mt-1 px-1", children: error })
+    ] });
+  } else if (type === "otp") {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { width }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "div",
         {
-          type: showPassword ? "text" : "password",
-          value,
-          onChange,
-          placeholder,
-          style: { backgroundColor },
-          className: `w-full border rounded-[10px] border-transparent placeholder:text-sm text-sm px-4 pr-12 h-[40px] text-white placeholder:opacity-30 focus:outline-none focus:border-[#6B2CE9] transition ${className}`
+          className: "relative flex items-center gap-4",
+          style: { width: "100%" },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "input",
+              {
+                type: "number",
+                value,
+                onChange,
+                placeholder,
+                style: {
+                  backgroundColor,
+                  color: textColor,
+                  borderRadius,
+                  height,
+                  width: "100%"
+                },
+                className: `border ${error ? "border-red-500" : "border-transparent"} placeholder:text-sm text-sm px-4 pr-28 placeholder:opacity-30 focus:outline-none transition ${className}`,
+                onFocus: (e) => !error && (e.target.style.borderColor = color),
+                onBlur: (e) => e.target.style.borderColor = error ? "#ef4444" : "transparent"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: onOtpClick,
+                className: "text-[#A77BFF] cursor-pointer font-medium text-sm w-fit absolute right-4 top-1/2 -translate-y-1/2",
+                "aria-label": "Resend code",
+                children: "Resend code"
+              }
+            )
+          ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "button",
-        {
-          type: "button",
-          onClick: togglePasswordVisibility,
-          className: "absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white transition-colors",
-          "aria-label": showPassword ? "Hide password" : "Show password",
-          children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Eye, { className: "cursor-pointer", size: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.EyeClosed, { className: "cursor-pointer", size: 18 })
-        }
-      )
+      error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-red-500 text-xs mt-1 px-1", children: error })
     ] });
-  } else if (type === "otp") {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative w-full flex items-center gap-4", children: [
+  } else {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { width }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "input",
         {
-          type: "number",
+          type,
           value,
           onChange,
           placeholder,
-          style: { backgroundColor },
-          className: `w-full border rounded-[10px] border-transparent placeholder:text-sm text-sm px-4 pr-28 h-[40px] text-white placeholder:opacity-30 focus:outline-none focus:border-[#6B2CE9] transition ${className}`
+          style: {
+            backgroundColor,
+            color: textColor,
+            borderRadius,
+            height,
+            width: "100%"
+          },
+          className: `border ${error ? "border-red-500" : "border-transparent"} placeholder:text-sm text-sm px-4 placeholder:opacity-30 focus:outline-none transition ${className}`,
+          onFocus: (e) => !error && (e.target.style.borderColor = color),
+          onBlur: (e) => e.target.style.borderColor = error ? "#ef4444" : "transparent"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "button",
-        {
-          type: "button",
-          onClick: onOtpClick,
-          className: "text-[#A77BFF] cursor-pointer font-medium text-sm w-fit absolute right-4 top-1/2 -translate-y-1/2",
-          "aria-label": showPassword ? "Hide password" : "Show password",
-          children: "Resend code"
-        }
-      )
+      error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-red-500 text-xs mt-1 px-1", children: error })
     ] });
-  } else {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "input",
-      {
-        type,
-        value,
-        onChange,
-        placeholder,
-        style: { backgroundColor },
-        className: `w-full border rounded-[10px] border-transparent placeholder:text-sm text-sm px-4 h-[40px] text-white placeholder:opacity-30 focus:outline-none focus:border-[#6B2CE9] transition ${className}`
-      }
-    );
   }
 };
-var TextInput_default = TextInput;
+var Input_default = Input;
 
-// src/components/Skeleton.tsx
+// src/components/Skeleton/Skeleton.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var Skeleton = ({
   className = "",
@@ -241,7 +347,7 @@ var Skeleton = ({
 var Skeleton_default = Skeleton;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Input,
   Modal,
-  Skeleton,
-  TextInput
+  Skeleton
 });

package/dist/index.mjs

@@ -1,6 +1,7 @@
-// src/components/Modal.tsx
+// src/components/Modal/Modal.tsx
 import { motion, AnimatePresence } from "framer-motion";
-import { jsx, jsxs } from "react/jsx-runtime";
+
+// src/components/Modal/constant.ts
 var revealVariants = {
   fade: {
     initial: { opacity: 0 },
@@ -18,13 +19,16 @@ var revealVariants = {
     exit: { y: "100%", opacity: 0 }
   }
 };
+
+// src/components/Modal/Modal.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
 var Modal = ({
-  children,
-  className,
-  revealMode = "fade",
+  isDrag = false,
   showModal = true,
   onClose,
-  isDrag = false
+  children,
+  className,
+  revealMode = "fade"
 }) => {
   const variants = revealVariants[revealMode];
   const handleOverlayClick = (e) => {
@@ -86,88 +90,190 @@ var Modal = ({
 };
 var Modal_default = Modal;
 
-// src/components/TextInput.tsx
-import { useState } from "react";
+// src/components/Input/Input.tsx
+import { useState, useEffect } from "react";
 import { Eye, EyeClosed } from "lucide-react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var TextInput = ({
+var Input = ({
+  onChange,
+  onOtpClick,
+  validate = false,
   type,
   value,
-  onChange,
-  placeholder,
+  minLength,
+  maxLength,
   className,
-  backgroundColor = "#1F1F23",
-  onOtpClick
+  placeholder,
+  errorMessage,
+  width = "100%",
+  height = "40px",
+  color = "#6B2CE9",
+  textColor = "white",
+  borderRadius = "10px",
+  backgroundColor = "#1F1F23"
 }) => {
   const [showPassword, setShowPassword] = useState(false);
+  const [error, setError] = useState(null);
   const togglePasswordVisibility = () => {
     setShowPassword(!showPassword);
   };
+  const validateInput = (inputValue = "") => {
+    if (!validate) {
+      setError(null);
+      return true;
+    }
+    if (minLength && inputValue.length < minLength) {
+      setError(errorMessage || `Minimum ${minLength} characters required`);
+      return false;
+    }
+    if (maxLength && inputValue.length > maxLength) {
+      setError(errorMessage || `Maximum ${maxLength} characters allowed`);
+      return false;
+    }
+    switch (type) {
+      case "email":
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (inputValue && !emailRegex.test(inputValue)) {
+          setError(errorMessage || "Invalid email address");
+          return false;
+        }
+        break;
+      case "password":
+        if (!minLength && inputValue.length < 8) {
+          setError(errorMessage || "Password must be at least 8 characters");
+          return false;
+        }
+        break;
+      case "otp":
+        if (inputValue && !/^\d*$/.test(inputValue)) {
+          setError(errorMessage || "OTP must contain only numbers");
+          return false;
+        }
+        if (!minLength && !maxLength && inputValue.length !== 6) {
+          setError(errorMessage || "OTP must be 6 digits");
+          return false;
+        }
+        break;
+      case "number":
+        if (inputValue && isNaN(Number(inputValue))) {
+          setError(errorMessage || "Must be a valid number");
+          return false;
+        }
+        break;
+    }
+    setError(null);
+    return true;
+  };
+  useEffect(() => {
+    if (validate && value !== void 0) {
+      validateInput(value);
+    }
+  }, [value, validate, minLength, maxLength, type]);
   if (type === "password") {
-    return /* @__PURE__ */ jsxs2("div", { className: "relative w-full", children: [
-      /* @__PURE__ */ jsx2(
-        "input",
+    return /* @__PURE__ */ jsxs2("div", { style: { width }, children: [
+      /* @__PURE__ */ jsxs2("div", { className: "relative", style: { width: "100%" }, children: [
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            type: showPassword ? "text" : "password",
+            value,
+            onChange,
+            placeholder,
+            style: {
+              backgroundColor,
+              color: textColor,
+              borderRadius,
+              height,
+              width: "100%"
+            },
+            className: `border ${error ? "border-red-500" : "border-transparent"} placeholder:text-sm text-sm px-4 pr-12 placeholder:opacity-30 focus:outline-none transition ${className}`,
+            onFocus: (e) => !error && (e.target.style.borderColor = color),
+            onBlur: (e) => e.target.style.borderColor = error ? "#ef4444" : "transparent"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            onClick: togglePasswordVisibility,
+            className: "absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white transition-colors",
+            "aria-label": showPassword ? "Hide password" : "Show password",
+            children: showPassword ? /* @__PURE__ */ jsx2(Eye, { className: "cursor-pointer", size: 18 }) : /* @__PURE__ */ jsx2(EyeClosed, { className: "cursor-pointer", size: 18 })
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ jsx2("p", { className: "text-red-500 text-xs mt-1 px-1", children: error })
+    ] });
+  } else if (type === "otp") {
+    return /* @__PURE__ */ jsxs2("div", { style: { width }, children: [
+      /* @__PURE__ */ jsxs2(
+        "div",
         {
-          type: showPassword ? "text" : "password",
-          value,
-          onChange,
-          placeholder,
-          style: { backgroundColor },
-          className: `w-full border rounded-[10px] border-transparent placeholder:text-sm text-sm px-4 pr-12 h-[40px] text-white placeholder:opacity-30 focus:outline-none focus:border-[#6B2CE9] transition ${className}`
+          className: "relative flex items-center gap-4",
+          style: { width: "100%" },
+          children: [
+            /* @__PURE__ */ jsx2(
+              "input",
+              {
+                type: "number",
+                value,
+                onChange,
+                placeholder,
+                style: {
+                  backgroundColor,
+                  color: textColor,
+                  borderRadius,
+                  height,
+                  width: "100%"
+                },
+                className: `border ${error ? "border-red-500" : "border-transparent"} placeholder:text-sm text-sm px-4 pr-28 placeholder:opacity-30 focus:outline-none transition ${className}`,
+                onFocus: (e) => !error && (e.target.style.borderColor = color),
+                onBlur: (e) => e.target.style.borderColor = error ? "#ef4444" : "transparent"
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                onClick: onOtpClick,
+                className: "text-[#A77BFF] cursor-pointer font-medium text-sm w-fit absolute right-4 top-1/2 -translate-y-1/2",
+                "aria-label": "Resend code",
+                children: "Resend code"
+              }
+            )
+          ]
         }
       ),
-      /* @__PURE__ */ jsx2(
-        "button",
-        {
-          type: "button",
-          onClick: togglePasswordVisibility,
-          className: "absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white transition-colors",
-          "aria-label": showPassword ? "Hide password" : "Show password",
-          children: showPassword ? /* @__PURE__ */ jsx2(Eye, { className: "cursor-pointer", size: 18 }) : /* @__PURE__ */ jsx2(EyeClosed, { className: "cursor-pointer", size: 18 })
-        }
-      )
+      error && /* @__PURE__ */ jsx2("p", { className: "text-red-500 text-xs mt-1 px-1", children: error })
     ] });
-  } else if (type === "otp") {
-    return /* @__PURE__ */ jsxs2("div", { className: "relative w-full flex items-center gap-4", children: [
+  } else {
+    return /* @__PURE__ */ jsxs2("div", { style: { width }, children: [
       /* @__PURE__ */ jsx2(
         "input",
         {
-          type: "number",
+          type,
           value,
           onChange,
           placeholder,
-          style: { backgroundColor },
-          className: `w-full border rounded-[10px] border-transparent placeholder:text-sm text-sm px-4 pr-28 h-[40px] text-white placeholder:opacity-30 focus:outline-none focus:border-[#6B2CE9] transition ${className}`
+          style: {
+            backgroundColor,
+            color: textColor,
+            borderRadius,
+            height,
+            width: "100%"
+          },
+          className: `border ${error ? "border-red-500" : "border-transparent"} placeholder:text-sm text-sm px-4 placeholder:opacity-30 focus:outline-none transition ${className}`,
+          onFocus: (e) => !error && (e.target.style.borderColor = color),
+          onBlur: (e) => e.target.style.borderColor = error ? "#ef4444" : "transparent"
         }
       ),
-      /* @__PURE__ */ jsx2(
-        "button",
-        {
-          type: "button",
-          onClick: onOtpClick,
-          className: "text-[#A77BFF] cursor-pointer font-medium text-sm w-fit absolute right-4 top-1/2 -translate-y-1/2",
-          "aria-label": showPassword ? "Hide password" : "Show password",
-          children: "Resend code"
-        }
-      )
+      error && /* @__PURE__ */ jsx2("p", { className: "text-red-500 text-xs mt-1 px-1", children: error })
     ] });
-  } else {
-    return /* @__PURE__ */ jsx2(
-      "input",
-      {
-        type,
-        value,
-        onChange,
-        placeholder,
-        style: { backgroundColor },
-        className: `w-full border rounded-[10px] border-transparent placeholder:text-sm text-sm px-4 h-[40px] text-white placeholder:opacity-30 focus:outline-none focus:border-[#6B2CE9] transition ${className}`
-      }
-    );
   }
 };
-var TextInput_default = TextInput;
+var Input_default = Input;
 
-// src/components/Skeleton.tsx
+// src/components/Skeleton/Skeleton.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
 var Skeleton = ({
   className = "",
@@ -212,7 +318,7 @@ var Skeleton = ({
 };
 var Skeleton_default = Skeleton;
 export {
+  Input_default as Input,
   Modal_default as Modal,
-  Skeleton_default as Skeleton,
-  TextInput_default as TextInput
+  Skeleton_default as Skeleton
 };

package/dist/styles.css

@@ -7,11 +7,14 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
       "Liberation Mono", "Courier New", monospace;
+    --color-red-500: oklch(0.637 0.237 25.331);
     --color-gray-400: oklch(0.707 0.022 261.325);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
     --container-md: 28rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
     --text-2xl: 1.5rem;
@@ -213,6 +216,9 @@
   .z-50 {
     z-index: 50;
   }
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
@@ -222,9 +228,6 @@
   .h-4 {
     height: calc(var(--spacing) * 4);
   }
-  .h-\[40px\] {
-    height: 40px;
-  }
   .w-fit {
     width: -moz-fit-content;
     width: fit-content;
@@ -260,9 +263,6 @@
   .rounded-\[4px\] {
     border-radius: 4px;
   }
-  .rounded-\[10px\] {
-    border-radius: 10px;
-  }
   .rounded-\[12px\] {
     border-radius: 12px;
   }
@@ -276,6 +276,9 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-red-500 {
+    border-color: var(--color-red-500);
+  }
   .border-transparent {
     border-color: transparent;
   }
@@ -311,9 +314,15 @@
   .bg-\[length\:200\%_100\%\] {
     background-size: 200% 100%;
   }
+  .p-6 {
+    padding: calc(var(--spacing) * 6);
+  }
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }
+  .px-1 {
+    padding-inline: calc(var(--spacing) * 1);
+  }
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
@@ -334,6 +343,10 @@
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -348,8 +361,8 @@
   .text-gray-400 {
     color: var(--color-gray-400);
   }
-  .text-white {
-    color: var(--color-white);
+  .text-red-500 {
+    color: var(--color-red-500);
   }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
@@ -386,11 +399,6 @@
       }
     }
   }
-  .focus\:border-\[\#6B2CE9\] {
-    &:focus {
-      border-color: #6B2CE9;
-    }
-  }
   .focus\:outline-none {
     &:focus {
       --tw-outline-style: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tunjiadeyemi/ui",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "description": "A collection of reusable UI components",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",