@tunjiadeyemi/ui 1.1.0 → 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

@@ -43,4 +43,4 @@ interface SkeletonProps {
 
 declare const Skeleton: ({ className, variant, width, height, animation, }: SkeletonProps) => react_jsx_runtime.JSX.Element;
 
-export { Modal, Skeleton, Input as TextInput };
+export { Input, Modal, Skeleton };

package/dist/index.d.ts

@@ -43,4 +43,4 @@ interface SkeletonProps {
 
 declare const Skeleton: ({ className, variant, width, height, animation, }: SkeletonProps) => react_jsx_runtime.JSX.Element;
 
-export { Modal, Skeleton, Input as TextInput };
+export { Input, Modal, Skeleton };

package/dist/index.js

@@ -20,9 +20,9 @@ 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: () => Input_default
+  Skeleton: () => Skeleton_default
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -347,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

@@ -318,7 +318,7 @@ var Skeleton = ({
 };
 var Skeleton_default = Skeleton;
 export {
+  Input_default as Input,
   Modal_default as Modal,
-  Skeleton_default as Skeleton,
-  Input_default as TextInput
+  Skeleton_default as Skeleton
 };

package/dist/styles.css

@@ -314,6 +314,9 @@
   .bg-\[length\:200\%_100\%\] {
     background-size: 200% 100%;
   }
+  .p-6 {
+    padding: calc(var(--spacing) * 6);
+  }
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }

package/package.json

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