cr-ui-lib 1.0.0

package/README.md

@@ -0,0 +1,81 @@
+# cr-fe-ui-components
+
+Welcome to `cr-fe-ui-components`! This is the official reusable UI component library for ChartRequest's frontend applications. It provides a collection of consistent, tested, and theme-friendly React components designed to streamline development and unify our user experience.
+
+[![NPM Version](https://img.shields.io/npm/v/your-package-name.svg)](https://www.npmjs.com/package/your-package-name)
+[![Build Status](https://img.shields.io/travis/com/your-username/your-repo.svg)](https://travis-ci.com/your-username/your-repo)
+[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE.md)
+
+---
+
+## Goals
+
+Our primary goals for this library are to promote efficiency and consistency across all our projects.
+
+*  **Reusable Components**: Build components once and use them everywhere across all ChartRequest projects.
+*  **Design Consistency**: Maintain a shared design system with unified styling, behavior, and UX patterns.
+*  **Isolated Development**: A dedicated playground to quickly build, test, and iterate on components in isolation.
+
+## Project Structure
+
+The repository is organized into two main directories: the library source code and the development playground.
+
+```sh
+cr-fe-ui-components/
+│
+├── src/                # Source code for the UI library
+│   ├── components/     # Individual React components
+│   │   ├── Button/
+│   │   │   ├── Button.tsx
+│   │   │   ├── Button.test.tsx
+│   │   │   └── Button.css
+│   │   │── assets     # Assets for reusable components 
+│   │   │
+│   │   └── ...
+│   ├── index.ts       # Main entry point exporting all components
+│   └── utility/       # Helper functions for all components
+├── playground/        # A standalone app for testing and demoing components
+│   ├── App.tsx        # Example usage of library components
+│   └── ...
+│
+├── package.json
+└── README.md
+```
+**src/:** Contains all the component code that gets published.
+
+**playground/:** A Vite/CRA environment for visually testing and verifying components before they are published.
+
+**Available Scripts**
+
+**Main Folder:**
+1. npm install - install the dependency only
+
+**Run the Playground:**
+This command starts the development server for the playground/ app, allowing you to see your components in action.
+1. npm install - install dependencies
+2. npm run dev - start the app
+
+**How to use library?:**
+1. Use global.css config and tailwind.config.js
+2. config file setup: https://drive.google.com/file/d/1k8NoLdUX6xoE3qreR_B61A7To8Jnilya/view?usp=drive_link
+
+## Tech Stack
+React 18+
+TypeScript
+Tailwind
+
+## Contributing
+
+1. Add new components in src/components/.
+
+2. Use the playground to develop and preview your component.
+
+3. Write tests to ensure consistency.
+
+4. Update the documentation accordingly.
+
+5. Documentation
+   
+    a. Devplan - https://docs.google.com/document/d/1_cqbxp1bRtyzRW8GsrXXNRjsXAeMykgVPul1uSsuMgY/edit?tab=t.0
+
+    b. Component Usage - soon...

package/dist/index.d.mts

@@ -0,0 +1,36 @@
+type NavBarProps = {
+    children?: React.ReactNode;
+    wrapperClassName?: string;
+    innerClassName?: string;
+} & React.HTMLAttributes<HTMLElement>;
+declare const NavBar: ({ children, wrapperClassName, innerClassName, ...rest }: NavBarProps) => JSX.Element;
+
+type ModalProps = {
+    isOpen: boolean;
+    type?: "left" | "right" | "center";
+    onClose?: () => void;
+    widthClassName?: string;
+    children?: React.ReactNode;
+    overlayClassName?: string;
+    modalClassName?: string;
+    stayMounted?: boolean;
+};
+declare const Modal: ({ isOpen, type, onClose, widthClassName, children, overlayClassName, modalClassName, stayMounted, }: ModalProps) => JSX.Element | null;
+
+type PopupWrapperProps = {
+    children?: React.ReactNode;
+    className?: string;
+    isOpen: boolean;
+    stayMounted?: boolean;
+};
+declare const PopupWrapper: ({ children, className, isOpen, stayMounted, }: PopupWrapperProps) => JSX.Element | null;
+
+type LayoutProps = {
+    children: React.ReactNode;
+    wrapperClassName?: string;
+    navClassName?: string;
+    navProps?: React.HTMLAttributes<HTMLElement>;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare const SideNav: ({ children, wrapperClassName, navClassName, navProps, ...rest }: LayoutProps) => JSX.Element;
+
+export { Modal, NavBar, type NavBarProps, PopupWrapper, SideNav, type LayoutProps as SideNavProps };

package/dist/index.d.ts

@@ -0,0 +1,36 @@
+type NavBarProps = {
+    children?: React.ReactNode;
+    wrapperClassName?: string;
+    innerClassName?: string;
+} & React.HTMLAttributes<HTMLElement>;
+declare const NavBar: ({ children, wrapperClassName, innerClassName, ...rest }: NavBarProps) => JSX.Element;
+
+type ModalProps = {
+    isOpen: boolean;
+    type?: "left" | "right" | "center";
+    onClose?: () => void;
+    widthClassName?: string;
+    children?: React.ReactNode;
+    overlayClassName?: string;
+    modalClassName?: string;
+    stayMounted?: boolean;
+};
+declare const Modal: ({ isOpen, type, onClose, widthClassName, children, overlayClassName, modalClassName, stayMounted, }: ModalProps) => JSX.Element | null;
+
+type PopupWrapperProps = {
+    children?: React.ReactNode;
+    className?: string;
+    isOpen: boolean;
+    stayMounted?: boolean;
+};
+declare const PopupWrapper: ({ children, className, isOpen, stayMounted, }: PopupWrapperProps) => JSX.Element | null;
+
+type LayoutProps = {
+    children: React.ReactNode;
+    wrapperClassName?: string;
+    navClassName?: string;
+    navProps?: React.HTMLAttributes<HTMLElement>;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare const SideNav: ({ children, wrapperClassName, navClassName, navProps, ...rest }: LayoutProps) => JSX.Element;
+
+export { Modal, NavBar, type NavBarProps, PopupWrapper, SideNav, type LayoutProps as SideNavProps };

package/dist/index.js

@@ -0,0 +1,181 @@
+"use client";
+"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,
+  NavBar: () => NavBar_default,
+  PopupWrapper: () => PopupWrapper_default,
+  SideNav: () => SideNav_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/wrappers/NavBar.tsx
+var import_tailwind_merge = require("tailwind-merge");
+var import_jsx_runtime = require("react/jsx-runtime");
+var NavBar = ({
+  children,
+  wrapperClassName,
+  innerClassName,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "nav",
+    {
+      ...rest,
+      className: (0, import_tailwind_merge.twMerge)(
+        "z-20 w-full px-4 shadow-navbar bg-white h-[80px]",
+        wrapperClassName
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          className: (0, import_tailwind_merge.twMerge)(
+            "h-[80px] flex justify-between items-center gap-2 px-4 py-1",
+            innerClassName
+          ),
+          children
+        }
+      )
+    }
+  );
+};
+var NavBar_default = NavBar;
+
+// src/components/wrappers/Modal.tsx
+var import_tailwind_merge2 = require("tailwind-merge");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Modal = ({
+  isOpen,
+  type = "right",
+  onClose,
+  widthClassName = "w-[300px]",
+  children,
+  overlayClassName,
+  modalClassName,
+  stayMounted = false
+}) => {
+  if (!stayMounted && !isOpen) return null;
+  let positionClasses = "";
+  if (type === "left") {
+    positionClasses = "left-0 top-0 h-full";
+  } else if (type === "right") {
+    positionClasses = "right-0 top-0 h-full";
+  } else if (type === "center") {
+    positionClasses = "top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2";
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        className: (0, import_tailwind_merge2.twMerge)(
+          "fixed inset-0 bg-black bg-opacity-50 z-40",
+          stayMounted ? isOpen ? "block" : "hidden" : "block",
+          overlayClassName
+        ),
+        onClick: onClose,
+        "aria-hidden": !isOpen
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        className: (0, import_tailwind_merge2.twMerge)(
+          `fixed bg-white shadow-xl z-50 transform transition-transform duration-300 ease-in-out ${positionClasses}`,
+          stayMounted ? isOpen ? "block" : "hidden" : "block",
+          widthClassName,
+          modalClassName
+        ),
+        role: "dialog",
+        "aria-modal": "true",
+        children
+      }
+    )
+  ] });
+};
+var Modal_default = Modal;
+
+// src/components/wrappers/PopupWrapper.tsx
+var import_tailwind_merge3 = require("tailwind-merge");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var PopupWrapper = ({
+  children,
+  className,
+  isOpen = false,
+  stayMounted = false
+}) => {
+  if (!stayMounted && !isOpen) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      className: (0, import_tailwind_merge3.twMerge)(
+        "absolute right-0 top-1 mt-10 shadow-lg bg-white rounded-lg p-4 w-80 z-10 border border-opacity-10",
+        isOpen ? "block" : "hidden",
+        className
+      ),
+      children
+    }
+  );
+};
+var PopupWrapper_default = PopupWrapper;
+
+// src/components/wrappers/SideNav.tsx
+var import_tailwind_merge4 = require("tailwind-merge");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var SideNav = ({
+  children,
+  wrapperClassName,
+  navClassName,
+  navProps,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      ...rest,
+      className: (0, import_tailwind_merge4.twMerge)(
+        "bg-base sm:min-w-[260px] shadow-sidebar relative sm:flex flex-col justify-between h-screen max-h-screen",
+        wrapperClassName
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "nav",
+        {
+          ...navProps,
+          className: (0, import_tailwind_merge4.twMerge)(
+            "relative flex flex-col w-full gap-1 px-4 pt-4",
+            navClassName,
+            navProps == null ? void 0 : navProps.className
+          ),
+          children
+        }
+      )
+    }
+  );
+};
+var SideNav_default = SideNav;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Modal,
+  NavBar,
+  PopupWrapper,
+  SideNav
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/components/wrappers/NavBar.tsx","../src/components/wrappers/Modal.tsx","../src/components/wrappers/PopupWrapper.tsx","../src/components/wrappers/SideNav.tsx"],"sourcesContent":["export * from \"./components/wrappers\";\n","import { twMerge } from \"tailwind-merge\";\n\nexport type NavBarProps = {\n  children?: React.ReactNode;\n  wrapperClassName?: string;\n  innerClassName?: string;\n} & React.HTMLAttributes<HTMLElement>; // allow props like onClick, id, aria-*\n\nconst NavBar = ({\n  children,\n  wrapperClassName,\n  innerClassName,\n  ...rest\n}: NavBarProps) => {\n  return (\n    <nav\n      {...rest}\n      className={twMerge(\n        \"z-20 w-full px-4 shadow-navbar bg-white h-[80px]\",\n        wrapperClassName\n      )}\n    >\n      <div\n        className={twMerge(\n          \"h-[80px] flex justify-between items-center gap-2 px-4 py-1\",\n          innerClassName\n        )}\n      >\n        {children}\n      </div>\n    </nav>\n  );\n};\n\nexport default NavBar;\n","import { twMerge } from \"tailwind-merge\";\n\ntype ModalProps = {\n  isOpen: boolean;\n  type?: \"left\" | \"right\" | \"center\";\n  onClose?: () => void;\n  widthClassName?: string;\n  children?: React.ReactNode;\n  overlayClassName?: string;\n  modalClassName?: string;\n  stayMounted?: boolean;\n};\n\nconst Modal = ({\n  isOpen,\n  type = \"right\",\n  onClose,\n  widthClassName = \"w-[300px]\",\n  children,\n  overlayClassName,\n  modalClassName,\n  stayMounted = false,\n}: ModalProps) => {\n  if (!stayMounted && !isOpen) return null;\n\n  let positionClasses = \"\";\n  if (type === \"left\") {\n    positionClasses = \"left-0 top-0 h-full\";\n  } else if (type === \"right\") {\n    positionClasses = \"right-0 top-0 h-full\";\n  } else if (type === \"center\") {\n    positionClasses =\n      \"top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2\";\n  }\n\n  return (\n    <>\n      <div\n        className={twMerge(\n          \"fixed inset-0 bg-black bg-opacity-50 z-40\",\n          stayMounted ? (isOpen ? \"block\" : \"hidden\") : \"block\",\n          overlayClassName\n        )}\n        onClick={onClose}\n        aria-hidden={!isOpen}\n      />\n\n      <div\n        className={twMerge(\n          `fixed bg-white shadow-xl z-50 transform transition-transform duration-300 ease-in-out ${positionClasses}`,\n          stayMounted ? (isOpen ? \"block\" : \"hidden\") : \"block\",\n          widthClassName,\n          modalClassName\n        )}\n        role=\"dialog\"\n        aria-modal=\"true\"\n      >\n        {children}\n      </div>\n    </>\n  );\n};\n\nexport default Modal;\n","import { twMerge } from \"tailwind-merge\";\n\ntype PopupWrapperProps = {\n  children?: React.ReactNode;\n  className?: string;\n  isOpen: boolean;\n  stayMounted?: boolean;\n};\n\nconst PopupWrapper = ({\n  children,\n  className,\n  isOpen = false,\n  stayMounted = false,\n}: PopupWrapperProps) => {\n  if (!stayMounted && !isOpen) return null;\n\n  return (\n    <div\n      className={twMerge(\n        \"absolute right-0 top-1 mt-10 shadow-lg bg-white rounded-lg p-4 w-80 z-10 border border-opacity-10\",\n        isOpen ? \"block\" : \"hidden\",\n        className\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default PopupWrapper;\n","import { twMerge } from \"tailwind-merge\";\n\nexport type LayoutProps = {\n  children: React.ReactNode;\n  wrapperClassName?: string;\n  navClassName?: string;\n  navProps?: React.HTMLAttributes<HTMLElement>;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst SideNav = ({\n  children,\n  wrapperClassName,\n  navClassName,\n  navProps,\n  ...rest\n}: LayoutProps) => {\n  return (\n    <div\n      {...rest}\n      className={twMerge(\n        \"bg-base sm:min-w-[260px] shadow-sidebar relative sm:flex flex-col justify-between h-screen max-h-screen\",\n        wrapperClassName\n      )}\n    >\n      <nav\n        {...navProps}\n        className={twMerge(\n          \"relative flex flex-col w-full gap-1 px-4 pt-4\",\n          navClassName,\n          navProps?.className\n        )}\n      >\n        {children}\n      </nav>\n    </div>\n  );\n};\n\nexport default SideNav;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,4BAAwB;AAsBlB;AAdN,IAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAmB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,eAAW;AAAA,YACT;AAAA,YACA;AAAA,UACF;AAAA,UAEC;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,iBAAQ;;;AClCf,IAAAA,yBAAwB;AAoCpB,IAAAC,sBAAA;AAvBJ,IAAM,QAAQ,CAAC;AAAA,EACb;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAChB,MAAkB;AAChB,MAAI,CAAC,eAAe,CAAC,OAAQ,QAAO;AAEpC,MAAI,kBAAkB;AACtB,MAAI,SAAS,QAAQ;AACnB,sBAAkB;AAAA,EACpB,WAAW,SAAS,SAAS;AAC3B,sBAAkB;AAAA,EACpB,WAAW,SAAS,UAAU;AAC5B,sBACE;AAAA,EACJ;AAEA,SACE,8EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,cAAe,SAAS,UAAU,WAAY;AAAA,UAC9C;AAAA,QACF;AAAA,QACA,SAAS;AAAA,QACT,eAAa,CAAC;AAAA;AAAA,IAChB;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT,yFAAyF,eAAe;AAAA,UACxG,cAAe,SAAS,UAAU,WAAY;AAAA,UAC9C;AAAA,UACA;AAAA,QACF;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QAEV;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AAEA,IAAO,gBAAQ;;;AC/Df,IAAAC,yBAAwB;AAkBpB,IAAAC,sBAAA;AATJ,IAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,cAAc;AAChB,MAAyB;AACvB,MAAI,CAAC,eAAe,CAAC,OAAQ,QAAO;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,QACT;AAAA,QACA,SAAS,UAAU;AAAA,QACnB;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,uBAAQ;;;AC9Bf,IAAAC,yBAAwB;AAwBlB,IAAAC,sBAAA;AAfN,IAAM,UAAU,CAAC;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAmB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,eAAW;AAAA,YACT;AAAA,YACA;AAAA,YACA,qCAAU;AAAA,UACZ;AAAA,UAEC;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,kBAAQ;","names":["import_tailwind_merge","import_jsx_runtime","import_tailwind_merge","import_jsx_runtime","import_tailwind_merge","import_jsx_runtime"]}

package/dist/index.mjs

@@ -0,0 +1,152 @@
+"use client";
+
+// src/components/wrappers/NavBar.tsx
+import { twMerge } from "tailwind-merge";
+import { jsx } from "react/jsx-runtime";
+var NavBar = ({
+  children,
+  wrapperClassName,
+  innerClassName,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      ...rest,
+      className: twMerge(
+        "z-20 w-full px-4 shadow-navbar bg-white h-[80px]",
+        wrapperClassName
+      ),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: twMerge(
+            "h-[80px] flex justify-between items-center gap-2 px-4 py-1",
+            innerClassName
+          ),
+          children
+        }
+      )
+    }
+  );
+};
+var NavBar_default = NavBar;
+
+// src/components/wrappers/Modal.tsx
+import { twMerge as twMerge2 } from "tailwind-merge";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Modal = ({
+  isOpen,
+  type = "right",
+  onClose,
+  widthClassName = "w-[300px]",
+  children,
+  overlayClassName,
+  modalClassName,
+  stayMounted = false
+}) => {
+  if (!stayMounted && !isOpen) return null;
+  let positionClasses = "";
+  if (type === "left") {
+    positionClasses = "left-0 top-0 h-full";
+  } else if (type === "right") {
+    positionClasses = "right-0 top-0 h-full";
+  } else if (type === "center") {
+    positionClasses = "top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2";
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: twMerge2(
+          "fixed inset-0 bg-black bg-opacity-50 z-40",
+          stayMounted ? isOpen ? "block" : "hidden" : "block",
+          overlayClassName
+        ),
+        onClick: onClose,
+        "aria-hidden": !isOpen
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: twMerge2(
+          `fixed bg-white shadow-xl z-50 transform transition-transform duration-300 ease-in-out ${positionClasses}`,
+          stayMounted ? isOpen ? "block" : "hidden" : "block",
+          widthClassName,
+          modalClassName
+        ),
+        role: "dialog",
+        "aria-modal": "true",
+        children
+      }
+    )
+  ] });
+};
+var Modal_default = Modal;
+
+// src/components/wrappers/PopupWrapper.tsx
+import { twMerge as twMerge3 } from "tailwind-merge";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var PopupWrapper = ({
+  children,
+  className,
+  isOpen = false,
+  stayMounted = false
+}) => {
+  if (!stayMounted && !isOpen) return null;
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: twMerge3(
+        "absolute right-0 top-1 mt-10 shadow-lg bg-white rounded-lg p-4 w-80 z-10 border border-opacity-10",
+        isOpen ? "block" : "hidden",
+        className
+      ),
+      children
+    }
+  );
+};
+var PopupWrapper_default = PopupWrapper;
+
+// src/components/wrappers/SideNav.tsx
+import { twMerge as twMerge4 } from "tailwind-merge";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var SideNav = ({
+  children,
+  wrapperClassName,
+  navClassName,
+  navProps,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      ...rest,
+      className: twMerge4(
+        "bg-base sm:min-w-[260px] shadow-sidebar relative sm:flex flex-col justify-between h-screen max-h-screen",
+        wrapperClassName
+      ),
+      children: /* @__PURE__ */ jsx4(
+        "nav",
+        {
+          ...navProps,
+          className: twMerge4(
+            "relative flex flex-col w-full gap-1 px-4 pt-4",
+            navClassName,
+            navProps == null ? void 0 : navProps.className
+          ),
+          children
+        }
+      )
+    }
+  );
+};
+var SideNav_default = SideNav;
+export {
+  Modal_default as Modal,
+  NavBar_default as NavBar,
+  PopupWrapper_default as PopupWrapper,
+  SideNav_default as SideNav
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/wrappers/NavBar.tsx","../src/components/wrappers/Modal.tsx","../src/components/wrappers/PopupWrapper.tsx","../src/components/wrappers/SideNav.tsx"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\n\nexport type NavBarProps = {\n  children?: React.ReactNode;\n  wrapperClassName?: string;\n  innerClassName?: string;\n} & React.HTMLAttributes<HTMLElement>; // allow props like onClick, id, aria-*\n\nconst NavBar = ({\n  children,\n  wrapperClassName,\n  innerClassName,\n  ...rest\n}: NavBarProps) => {\n  return (\n    <nav\n      {...rest}\n      className={twMerge(\n        \"z-20 w-full px-4 shadow-navbar bg-white h-[80px]\",\n        wrapperClassName\n      )}\n    >\n      <div\n        className={twMerge(\n          \"h-[80px] flex justify-between items-center gap-2 px-4 py-1\",\n          innerClassName\n        )}\n      >\n        {children}\n      </div>\n    </nav>\n  );\n};\n\nexport default NavBar;\n","import { twMerge } from \"tailwind-merge\";\n\ntype ModalProps = {\n  isOpen: boolean;\n  type?: \"left\" | \"right\" | \"center\";\n  onClose?: () => void;\n  widthClassName?: string;\n  children?: React.ReactNode;\n  overlayClassName?: string;\n  modalClassName?: string;\n  stayMounted?: boolean;\n};\n\nconst Modal = ({\n  isOpen,\n  type = \"right\",\n  onClose,\n  widthClassName = \"w-[300px]\",\n  children,\n  overlayClassName,\n  modalClassName,\n  stayMounted = false,\n}: ModalProps) => {\n  if (!stayMounted && !isOpen) return null;\n\n  let positionClasses = \"\";\n  if (type === \"left\") {\n    positionClasses = \"left-0 top-0 h-full\";\n  } else if (type === \"right\") {\n    positionClasses = \"right-0 top-0 h-full\";\n  } else if (type === \"center\") {\n    positionClasses =\n      \"top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2\";\n  }\n\n  return (\n    <>\n      <div\n        className={twMerge(\n          \"fixed inset-0 bg-black bg-opacity-50 z-40\",\n          stayMounted ? (isOpen ? \"block\" : \"hidden\") : \"block\",\n          overlayClassName\n        )}\n        onClick={onClose}\n        aria-hidden={!isOpen}\n      />\n\n      <div\n        className={twMerge(\n          `fixed bg-white shadow-xl z-50 transform transition-transform duration-300 ease-in-out ${positionClasses}`,\n          stayMounted ? (isOpen ? \"block\" : \"hidden\") : \"block\",\n          widthClassName,\n          modalClassName\n        )}\n        role=\"dialog\"\n        aria-modal=\"true\"\n      >\n        {children}\n      </div>\n    </>\n  );\n};\n\nexport default Modal;\n","import { twMerge } from \"tailwind-merge\";\n\ntype PopupWrapperProps = {\n  children?: React.ReactNode;\n  className?: string;\n  isOpen: boolean;\n  stayMounted?: boolean;\n};\n\nconst PopupWrapper = ({\n  children,\n  className,\n  isOpen = false,\n  stayMounted = false,\n}: PopupWrapperProps) => {\n  if (!stayMounted && !isOpen) return null;\n\n  return (\n    <div\n      className={twMerge(\n        \"absolute right-0 top-1 mt-10 shadow-lg bg-white rounded-lg p-4 w-80 z-10 border border-opacity-10\",\n        isOpen ? \"block\" : \"hidden\",\n        className\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default PopupWrapper;\n","import { twMerge } from \"tailwind-merge\";\n\nexport type LayoutProps = {\n  children: React.ReactNode;\n  wrapperClassName?: string;\n  navClassName?: string;\n  navProps?: React.HTMLAttributes<HTMLElement>;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst SideNav = ({\n  children,\n  wrapperClassName,\n  navClassName,\n  navProps,\n  ...rest\n}: LayoutProps) => {\n  return (\n    <div\n      {...rest}\n      className={twMerge(\n        \"bg-base sm:min-w-[260px] shadow-sidebar relative sm:flex flex-col justify-between h-screen max-h-screen\",\n        wrapperClassName\n      )}\n    >\n      <nav\n        {...navProps}\n        className={twMerge(\n          \"relative flex flex-col w-full gap-1 px-4 pt-4\",\n          navClassName,\n          navProps?.className\n        )}\n      >\n        {children}\n      </nav>\n    </div>\n  );\n};\n\nexport default SideNav;\n"],"mappings":";;;AAAA,SAAS,eAAe;AAsBlB;AAdN,IAAM,SAAS,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAmB;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA;AAAA,UACF;AAAA,UAEC;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,iBAAQ;;;AClCf,SAAS,WAAAA,gBAAe;AAoCpB,mBACE,OAAAC,MADF;AAvBJ,IAAM,QAAQ,CAAC;AAAA,EACb;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAChB,MAAkB;AAChB,MAAI,CAAC,eAAe,CAAC,OAAQ,QAAO;AAEpC,MAAI,kBAAkB;AACtB,MAAI,SAAS,QAAQ;AACnB,sBAAkB;AAAA,EACpB,WAAW,SAAS,SAAS;AAC3B,sBAAkB;AAAA,EACpB,WAAW,SAAS,UAAU;AAC5B,sBACE;AAAA,EACJ;AAEA,SACE,iCACE;AAAA,oBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAWD;AAAA,UACT;AAAA,UACA,cAAe,SAAS,UAAU,WAAY;AAAA,UAC9C;AAAA,QACF;AAAA,QACA,SAAS;AAAA,QACT,eAAa,CAAC;AAAA;AAAA,IAChB;AAAA,IAEA,gBAAAC;AAAA,MAAC;AAAA;AAAA,QACC,WAAWD;AAAA,UACT,yFAAyF,eAAe;AAAA,UACxG,cAAe,SAAS,UAAU,WAAY;AAAA,UAC9C;AAAA,UACA;AAAA,QACF;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QAEV;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AAEA,IAAO,gBAAQ;;;AC/Df,SAAS,WAAAE,gBAAe;AAkBpB,gBAAAC,YAAA;AATJ,IAAM,eAAe,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,cAAc;AAChB,MAAyB;AACvB,MAAI,CAAC,eAAe,CAAC,OAAQ,QAAO;AAEpC,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAWD;AAAA,QACT;AAAA,QACA,SAAS,UAAU;AAAA,QACnB;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,uBAAQ;;;AC9Bf,SAAS,WAAAE,gBAAe;AAwBlB,gBAAAC,YAAA;AAfN,IAAM,UAAU,CAAC;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAmB;AACjB,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAWD;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEA,0BAAAC;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,WAAWD;AAAA,YACT;AAAA,YACA;AAAA,YACA,qCAAU;AAAA,UACZ;AAAA,UAEC;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,kBAAQ;","names":["twMerge","jsx","twMerge","jsx","twMerge","jsx"]}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "cr-ui-lib",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "@types/react": "18.0.21",
+    "@types/react-dom": "18.0.6",
+    "tsup": "^8.5.0",
+    "typescript": "^5.6.2",
+    "next": "^12.3.1"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "tailwindcss": ">=3",
+    "tailwind-merge": ">=2.0.0",
+    "react-chartjs-2": ">= 5.3.0",
+    "chart.js": ">=4.4.7",
+    "next": ">=12",
+    "lucide-react": ">=0.525.0",
+    "date-fns": ">=2.0.1",
+    "react-datepicker": ">=4.10.0",
+    "react-paginate": ">=8.3.0"
+  },
+  "engines": {
+    "node": ">=18",
+    "npm": ">=8"
+  }
+}