@tunjiadeyemi/ui 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Tunji Adeyemi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,80 @@
+# @tunjiadeyemi/ui
+
+A collection of reusable React UI components built with TypeScript.
+
+## Installation
+
+```bash
+npm install @tunjiadeyemi/ui framer-motion lucide-react
+```
+
+or
+
+```bash
+yarn add @tunjiadeyemi/ui framer-motion lucide-react
+```
+
+## Usage
+
+First, import the styles in your app's entry point (e.g., `App.tsx` or `main.tsx`):
+
+```tsx
+import '@tunjiadeyemi/ui/styles.css';
+```
+
+Then use the components:
+
+```tsx
+import { Modal } from '@tunjiadeyemi/ui';
+import { useState } from 'react';
+
+function App() {
+  const [showModal, setShowModal] = useState(false);
+
+  return (
+    <>
+      <button onClick={() => setShowModal(true)}>Open Modal</button>
+      
+      <Modal 
+        showModal={showModal} 
+        onClose={() => setShowModal(false)}
+        revealMode="fade"
+        className="bg-white p-8 rounded-lg max-w-md"
+      >
+        <h2 className="text-2xl font-bold mb-4">Modal Title</h2>
+        <p>Modal content goes here</p>
+      </Modal>
+    </>
+  );
+}
+```
+
+### Available Components
+
+#### Modal
+
+A flexible modal component with multiple reveal animations.
+
+**Props:**
+- `showModal` (boolean): Controls modal visibility
+- `onClose` (function): Callback when modal is closed
+- `revealMode` ('fade' | 'slide-right' | 'slide-bottom'): Animation style
+- `className` (string): Custom classes for the modal content
+- `children` (ReactNode): Modal content
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build the package
+npm run build
+
+# Watch mode for development
+npm run dev
+```
+
+## License
+
+MIT © Tunji Adeyemi

package/dist/index.d.mts

@@ -0,0 +1,34 @@
+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;
+    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;
+    value?: string;
+    onOtpClick?: () => void;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+    className?: string;
+    backgroundColor?: string;
+}) => react_jsx_runtime.JSX.Element;
+
+interface SkeletonProps {
+    className?: string;
+    variant?: 'text' | 'circular' | 'rectangular';
+    width?: string | number;
+    height?: string | number;
+    animation?: 'pulse' | 'wave' | 'none';
+}
+declare const Skeleton: ({ className, variant, width, height, animation }: SkeletonProps) => react_jsx_runtime.JSX.Element;
+
+export { Modal, Skeleton, TextInput };

package/dist/index.d.ts

@@ -0,0 +1,34 @@
+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;
+    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;
+    value?: string;
+    onOtpClick?: () => void;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+    className?: string;
+    backgroundColor?: string;
+}) => react_jsx_runtime.JSX.Element;
+
+interface SkeletonProps {
+    className?: string;
+    variant?: 'text' | 'circular' | 'rectangular';
+    width?: string | number;
+    height?: string | number;
+    animation?: 'pulse' | 'wave' | 'none';
+}
+declare const Skeleton: ({ className, variant, width, height, animation }: SkeletonProps) => react_jsx_runtime.JSX.Element;
+
+export { Modal, Skeleton, TextInput };

package/dist/index.js

@@ -0,0 +1,247 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Modal: () => Modal_default,
+  Skeleton: () => Skeleton_default,
+  TextInput: () => TextInput_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/Modal.tsx
+var import_framer_motion = require("framer-motion");
+var import_jsx_runtime = require("react/jsx-runtime");
+var revealVariants = {
+  fade: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 }
+  },
+  "slide-right": {
+    initial: { x: "100%", opacity: 0 },
+    animate: { x: 0, opacity: 1 },
+    exit: { x: "100%", opacity: 0 }
+  },
+  "slide-bottom": {
+    initial: { y: "100%", opacity: 0 },
+    animate: { y: 0, opacity: 1 },
+    exit: { y: "100%", opacity: 0 }
+  }
+};
+var Modal = ({
+  children,
+  className,
+  revealMode = "fade",
+  showModal = true,
+  onClose,
+  isDrag = false
+}) => {
+  const variants = revealVariants[revealMode];
+  const handleOverlayClick = (e) => {
+    if (e.target === e.currentTarget && onClose) {
+      onClose();
+    }
+  };
+  const handleDragEnd = (_event, info) => {
+    if (info.offset.y > 100 && onClose) {
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { mode: "wait", children: showModal && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_framer_motion.motion.div,
+    {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: { duration: 0.3 },
+      className: `fixed inset-0 bg-black/80 flex items-center z-50 ${revealMode === "slide-right" ? "justify-end" : "justify-center"}`,
+      onClick: handleOverlayClick,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_framer_motion.motion.div,
+        {
+          initial: variants.initial,
+          animate: variants.animate,
+          exit: variants.exit,
+          transition: { duration: 0.4, ease: "easeInOut" },
+          className: `${className}`,
+          onClick: (e) => e.stopPropagation(),
+          drag: revealMode === "slide-bottom" ? "y" : false,
+          dragConstraints: { top: 0, bottom: 0 },
+          dragElastic: { top: 0, bottom: 0.5 },
+          onDragEnd: handleDragEnd,
+          children: [
+            isDrag && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                className: "w-full flex justify-center mb-4 lg:hidden pt-2",
+                "aria-label": "Drag Indicator",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "img",
+                  {
+                    src: `/icons/mobile-modal-drag.svg`,
+                    height: 50,
+                    width: 50,
+                    alt: "Modal Icon"
+                  }
+                )
+              }
+            ),
+            children
+          ]
+        },
+        "modal-content"
+      )
+    }
+  ) });
+};
+var Modal_default = Modal;
+
+// src/components/TextInput.tsx
+var import_react = require("react");
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var TextInput = ({
+  type,
+  value,
+  onChange,
+  placeholder,
+  className,
+  backgroundColor = "#1F1F23",
+  onOtpClick
+}) => {
+  const [showPassword, setShowPassword] = (0, import_react.useState)(false);
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+  if (type === "password") {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "input",
+        {
+          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}`
+        }
+      ),
+      /* @__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 })
+        }
+      )
+    ] });
+  } else if (type === "otp") {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative w-full flex items-center gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "input",
+        {
+          type: "number",
+          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}`
+        }
+      ),
+      /* @__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"
+        }
+      )
+    ] });
+  } 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;
+
+// src/components/Skeleton.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Skeleton = ({
+  className = "",
+  variant = "rectangular",
+  width,
+  height,
+  animation = "pulse"
+}) => {
+  const getVariantClasses = () => {
+    switch (variant) {
+      case "text":
+        return "rounded-[4px] h-4";
+      case "circular":
+        return "rounded-full";
+      case "rectangular":
+      default:
+        return "rounded-[12px]";
+    }
+  };
+  const getAnimationClasses = () => {
+    switch (animation) {
+      case "pulse":
+        return "animate-pulse";
+      case "wave":
+        return "animate-shimmer bg-gradient-to-r from-[#27272E] via-[#2f2f35] to-[#27272E] bg-[length:200%_100%]";
+      case "none":
+      default:
+        return "";
+    }
+  };
+  const style = {
+    width: width || "100%",
+    height: height || "100%"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      className: `bg-[#27272E] ${getVariantClasses()} ${getAnimationClasses()} ${className}`,
+      style
+    }
+  );
+};
+var Skeleton_default = Skeleton;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Modal,
+  Skeleton,
+  TextInput
+});

package/dist/index.mjs

@@ -0,0 +1,218 @@
+// src/components/Modal.tsx
+import { motion, AnimatePresence } from "framer-motion";
+import { jsx, jsxs } from "react/jsx-runtime";
+var revealVariants = {
+  fade: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 }
+  },
+  "slide-right": {
+    initial: { x: "100%", opacity: 0 },
+    animate: { x: 0, opacity: 1 },
+    exit: { x: "100%", opacity: 0 }
+  },
+  "slide-bottom": {
+    initial: { y: "100%", opacity: 0 },
+    animate: { y: 0, opacity: 1 },
+    exit: { y: "100%", opacity: 0 }
+  }
+};
+var Modal = ({
+  children,
+  className,
+  revealMode = "fade",
+  showModal = true,
+  onClose,
+  isDrag = false
+}) => {
+  const variants = revealVariants[revealMode];
+  const handleOverlayClick = (e) => {
+    if (e.target === e.currentTarget && onClose) {
+      onClose();
+    }
+  };
+  const handleDragEnd = (_event, info) => {
+    if (info.offset.y > 100 && onClose) {
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: showModal && /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: { duration: 0.3 },
+      className: `fixed inset-0 bg-black/80 flex items-center z-50 ${revealMode === "slide-right" ? "justify-end" : "justify-center"}`,
+      onClick: handleOverlayClick,
+      children: /* @__PURE__ */ jsxs(
+        motion.div,
+        {
+          initial: variants.initial,
+          animate: variants.animate,
+          exit: variants.exit,
+          transition: { duration: 0.4, ease: "easeInOut" },
+          className: `${className}`,
+          onClick: (e) => e.stopPropagation(),
+          drag: revealMode === "slide-bottom" ? "y" : false,
+          dragConstraints: { top: 0, bottom: 0 },
+          dragElastic: { top: 0, bottom: 0.5 },
+          onDragEnd: handleDragEnd,
+          children: [
+            isDrag && /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "w-full flex justify-center mb-4 lg:hidden pt-2",
+                "aria-label": "Drag Indicator",
+                children: /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: `/icons/mobile-modal-drag.svg`,
+                    height: 50,
+                    width: 50,
+                    alt: "Modal Icon"
+                  }
+                )
+              }
+            ),
+            children
+          ]
+        },
+        "modal-content"
+      )
+    }
+  ) });
+};
+var Modal_default = Modal;
+
+// src/components/TextInput.tsx
+import { useState } from "react";
+import { Eye, EyeClosed } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var TextInput = ({
+  type,
+  value,
+  onChange,
+  placeholder,
+  className,
+  backgroundColor = "#1F1F23",
+  onOtpClick
+}) => {
+  const [showPassword, setShowPassword] = useState(false);
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+  if (type === "password") {
+    return /* @__PURE__ */ jsxs2("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          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}`
+        }
+      ),
+      /* @__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 })
+        }
+      )
+    ] });
+  } else if (type === "otp") {
+    return /* @__PURE__ */ jsxs2("div", { className: "relative w-full flex items-center gap-4", children: [
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          type: "number",
+          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}`
+        }
+      ),
+      /* @__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"
+        }
+      )
+    ] });
+  } 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;
+
+// src/components/Skeleton.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Skeleton = ({
+  className = "",
+  variant = "rectangular",
+  width,
+  height,
+  animation = "pulse"
+}) => {
+  const getVariantClasses = () => {
+    switch (variant) {
+      case "text":
+        return "rounded-[4px] h-4";
+      case "circular":
+        return "rounded-full";
+      case "rectangular":
+      default:
+        return "rounded-[12px]";
+    }
+  };
+  const getAnimationClasses = () => {
+    switch (animation) {
+      case "pulse":
+        return "animate-pulse";
+      case "wave":
+        return "animate-shimmer bg-gradient-to-r from-[#27272E] via-[#2f2f35] to-[#27272E] bg-[length:200%_100%]";
+      case "none":
+      default:
+        return "";
+    }
+  };
+  const style = {
+    width: width || "100%",
+    height: height || "100%"
+  };
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: `bg-[#27272E] ${getVariantClasses()} ${getAnimationClasses()} ${className}`,
+      style
+    }
+  );
+};
+var Skeleton_default = Skeleton;
+export {
+  Modal_default as Modal,
+  Skeleton_default as Skeleton,
+  TextInput_default as TextInput
+};

package/dist/styles.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@tunjiadeyemi/ui",
+  "version": "1.0.0",
+  "description": "A collection of reusable UI components",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --external react --external react-dom --external framer-motion --external lucide-react && npm run build:css",
+    "build:css": "cp ./src/styles.css ./dist/styles.css",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch --external react --external react-dom --external framer-motion --external lucide-react",
+    "prepublishOnly": "npm run build",
+    "lint": "eslint src --ext .ts,.tsx"
+  },
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "typescript"
+  ],
+  "author": "Tunji Adeyemi",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tunjiadeyemi/ui"
+  },
+  "peerDependencies": {
+    "framer-motion": "^11.0.0",
+    "lucide-react": "^0.400.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "autoprefixer": "^10.4.16",
+    "lucide-react": "^0.562.0",
+    "postcss": "^8.4.32",
+    "tailwindcss": "4.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0"
+  }
+}