jett.admin.npmpackage 1.0.0

package/dist/index.mjs

@@ -0,0 +1,485 @@
+// src/utils/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/Button.jsx
+import React from "react";
+var variantStyles = {
+  PRIMARY: "bg-white",
+  SECONDARY: "bg-black text-white",
+  DEFAULT: "bg-white text-black hover:bg-gray-100"
+};
+var CustomButton = ({
+  variant,
+  children,
+  className,
+  onClick,
+  disabled = false
+}) => {
+  console.log(disabled);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cn(
+        `cursor-pointer flex items-center py-2 px-3 min-h-10 justify-center border rounded-[6px] border-[#e5e5e5]`,
+        variantStyles[variant],
+        className
+      ),
+      onClick
+    },
+    children
+  );
+};
+
+// src/inputs/Autocomplete.jsx
+import React2, { useState, useRef } from "react";
+import { ChevronDown, Check, Search } from "lucide-react";
+var CustomAutocomplete = ({
+  label,
+  value,
+  onChange,
+  options,
+  placeholder = "Search & select...",
+  isRequired = false,
+  error,
+  heading,
+  disabled = false
+}) => {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const wrapperRef = useRef(null);
+  const selectedOptions = options.filter((opt) => value.includes(opt.value));
+  const handleBlur = (e) => {
+    var _a;
+    if (!((_a = wrapperRef.current) == null ? void 0 : _a.contains(e.relatedTarget))) {
+      setOpen(false);
+    }
+  };
+  const filteredOptions = options.filter(
+    (opt) => opt.label.toLowerCase().includes(search.toLowerCase())
+  );
+  const toggleValue = (val) => {
+    if (value.includes(val)) {
+      onChange(value.filter((v) => v !== val));
+    } else {
+      onChange([...value, val]);
+    }
+  };
+  return /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      className: "flex flex-col w-full relative",
+      ref: wrapperRef,
+      tabIndex: disabled ? -1 : 0,
+      onBlur: handleBlur
+    },
+    heading && /* @__PURE__ */ React2.createElement("h3", { className: "text-lg font-semibold leading-6 mb-1" }, heading),
+    label && /* @__PURE__ */ React2.createElement(
+      "label",
+      {
+        className: `font-[500] text-sm leading-5 mb-1 ${heading ? "text-[#737373]" : "text-black"}`
+      },
+      label,
+      " ",
+      isRequired && /* @__PURE__ */ React2.createElement("span", { className: "text-red-500" }, "*")
+    ),
+    /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        onClick: () => {
+          if (!disabled) setOpen((prev) => !prev);
+        },
+        className: `flex justify-between items-center flex-wrap gap-1 rounded-md px-3 py-2 text-sm transition border h-auto min-h-10
+          ${disabled ? "bg-gray-100 cursor-not-allowed text-gray-400" : "cursor-text"}
+          ${error ? "border-red-500 bg-red-50" : "bg-white border-[hsl(0_0%_89.8%)] hover:border-gray-400"}
+        `
+      },
+      /* @__PURE__ */ React2.createElement("div", { className: "flex flex-wrap gap-1 flex-1" }, selectedOptions.length > 0 ? selectedOptions.map((opt) => /* @__PURE__ */ React2.createElement(
+        "span",
+        {
+          key: opt.value,
+          className: "bg-gray-100 border border-gray-300 px-2 py-0.5 rounded text-xs flex items-center gap-1"
+        },
+        opt.label,
+        /* @__PURE__ */ React2.createElement(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              toggleValue(opt.value);
+            },
+            className: "text-gray-500 hover:text-gray-700"
+          },
+          "\u2715"
+        )
+      )) : /* @__PURE__ */ React2.createElement("span", { className: "text-gray-400" }, placeholder)),
+      /* @__PURE__ */ React2.createElement(
+        ChevronDown,
+        {
+          className: `w-4 h-4 text-gray-500 transition-transform ${open ? "rotate-180" : ""}`
+        }
+      )
+    ),
+    !disabled && open && /* @__PURE__ */ React2.createElement("div", { className: "absolute top-full mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg z-10 max-h-60 overflow-y-auto" }, /* @__PURE__ */ React2.createElement("div", { className: "flex items-center gap-2 p-2 border-b border-gray-200" }, /* @__PURE__ */ React2.createElement(Search, { size: 16, className: "text-gray-400" }), /* @__PURE__ */ React2.createElement(
+      "input",
+      {
+        type: "text",
+        value: search,
+        onChange: (e) => setSearch(e.target.value),
+        placeholder: "Search...",
+        className: "flex-1 text-sm focus:outline-none"
+      }
+    )), /* @__PURE__ */ React2.createElement("ul", null, filteredOptions.length > 0 ? filteredOptions.map((opt) => {
+      const selected = value.includes(opt.value);
+      return /* @__PURE__ */ React2.createElement(
+        "li",
+        {
+          key: opt.value,
+          onClick: () => toggleValue(opt.value),
+          className: `flex items-center gap-2 px-3 py-2 text-sm cursor-pointer hover:bg-gray-100 ${selected ? "bg-gray-50 font-medium" : ""}`
+        },
+        /* @__PURE__ */ React2.createElement(
+          "span",
+          {
+            className: `w-4 h-4 flex items-center justify-center border rounded-sm ${selected ? "bg-blue-600 border-blue-600 text-white" : "border-gray-300"}`
+          },
+          selected && /* @__PURE__ */ React2.createElement(Check, { size: 14 })
+        ),
+        opt.label
+      );
+    }) : /* @__PURE__ */ React2.createElement("li", { className: "px-3 py-2 text-sm text-gray-400" }, "No results found")))
+  );
+};
+
+// src/inputs/Checkbox.jsx
+import React3 from "react";
+var CustomCheckbox = ({ onChange, checked }) => {
+  const handleChange = (e) => {
+    onChange(e.target.checked);
+  };
+  return /* @__PURE__ */ React3.createElement("label", { className: "inline-flex items-center cursor-pointer select-none" }, /* @__PURE__ */ React3.createElement(
+    "input",
+    {
+      type: "checkbox",
+      checked,
+      onChange: handleChange,
+      className: "peer hidden"
+    }
+  ), /* @__PURE__ */ React3.createElement(
+    "span",
+    {
+      className: "\r\n          w-4 h-4 flex items-center justify-center border-2 border-gray-400 rounded \r\n          peer-checked:bg-black peer-checked:border-black\r\n          transition-colors\r\n        "
+    },
+    checked && /* @__PURE__ */ React3.createElement(
+      "svg",
+      {
+        className: "w-4 h-4 text-white",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "3",
+        viewBox: "0 0 24 24"
+      },
+      /* @__PURE__ */ React3.createElement("path", { d: "M5 13l4 4L19 7" })
+    )
+  ));
+};
+
+// src/inputs/Chip.jsx
+import React4 from "react";
+var VARIANTS = {
+  PRIMARY: "bg-gray-100 text-black",
+  GREEN: "bg-green-100 text-green-800",
+  RED: "bg-red-100 text-red-800",
+  YELLOW: "bg-yellow-100 text-yellow-800"
+};
+var Chip = ({ label, variant }) => {
+  return /* @__PURE__ */ React4.createElement(
+    "div",
+    {
+      className: `inline-flex text-[12px] items-center px-3 py-1 rounded-full ${VARIANTS[variant] || VARIANTS.PRIMARY} text-sm font-[600]`
+    },
+    label
+  );
+};
+
+// src/inputs/CustomSwitch.jsx
+import React5 from "react";
+var CustomSwitch = ({ checked, onChange, label, description }) => {
+  return /* @__PURE__ */ React5.createElement("div", { className: "flex items-start gap-3 rounded-lg border border-gray-200 p-4 bg-white mb-4" }, /* @__PURE__ */ React5.createElement(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      onClick: () => onChange(!checked),
+      className: `relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors ${checked ? "bg-black" : "bg-gray-300"}`
+    },
+    /* @__PURE__ */ React5.createElement(
+      "span",
+      {
+        className: `inline-block h-4 w-4 transform rounded-full bg-white shadow transition ${checked ? "translate-x-6" : "translate-x-1"}`
+      }
+    )
+  ), /* @__PURE__ */ React5.createElement("div", { className: "flex flex-col" }, label && /* @__PURE__ */ React5.createElement("h3", { className: "font-[500] text-sm text-black mb-2" }, label), description && /* @__PURE__ */ React5.createElement("p", { className: "font-[500] text-sm text-[#737373]" }, description)));
+};
+
+// src/inputs/Input.jsx
+import React6 from "react";
+var CustomInput = ({
+  label,
+  isRequired,
+  value,
+  onChange,
+  placeholder,
+  disabled = false,
+  error,
+  heading
+}) => {
+  return /* @__PURE__ */ React6.createElement("div", { className: "flex flex-col gap-1 w-full" }, heading && /* @__PURE__ */ React6.createElement("h3", { className: "text-lg font-semibold" }, heading), /* @__PURE__ */ React6.createElement(
+    "label",
+    {
+      className: `font-[500] text-sm ${heading ? "text-[#737373]" : "text-black"}`
+    },
+    label,
+    " ",
+    isRequired && /* @__PURE__ */ React6.createElement("span", { className: "text-red-500" }, "*")
+  ), /* @__PURE__ */ React6.createElement(
+    "input",
+    {
+      className: `border border-gray-200 rounded-md h-10 px-4 py-2 w-full text-[14px]
+          focus:outline-2 outline-black outline-offset-2
+          ${disabled ? "bg-gray-100 cursor-not-allowed text-gray-500 border-gray-300" : error ? "border-red-500 bg-red-50" : "bg-white border-[hsl(0_0%_89.8%)]"}
+        `,
+      value,
+      onChange: (e) => onChange == null ? void 0 : onChange(e.target.value),
+      placeholder,
+      disabled,
+      readOnly: disabled
+    }
+  ));
+};
+
+// src/inputs/ProgressBar.jsx
+import React7 from "react";
+var ProgressBar = ({ step, totalSteps }) => {
+  const progress = step / totalSteps * 100;
+  return /* @__PURE__ */ React7.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React7.createElement("p", { className: "text-gray-600 text-sm mb-2" }, "Step ", step, " of ", totalSteps), /* @__PURE__ */ React7.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2" }, /* @__PURE__ */ React7.createElement(
+    "div",
+    {
+      className: "bg-black h-2 rounded-full transition-all duration-300",
+      style: { width: `${progress}%` }
+    }
+  )));
+};
+
+// src/inputs/Search.jsx
+import React8 from "react";
+import { Search as Search2 } from "lucide-react";
+var CustomSearch = ({
+  value,
+  onChange,
+  placeholder = "Search Markets..."
+}) => {
+  return /* @__PURE__ */ React8.createElement("div", { className: "flex items-center border bg-transparent text-[14px] border-[hsl(0_0%_89.8%)] \r\n                    rounded-md h-10 px-2 w-full focus-within:outline-2 focus-within:outline-black focus-within:outline-offset-2" }, /* @__PURE__ */ React8.createElement(Search2, { width: 16, height: 16, color: "gray", className: "mr-2" }), /* @__PURE__ */ React8.createElement(
+    "input",
+    {
+      type: "text",
+      value,
+      onChange,
+      placeholder,
+      className: "bg-transparent w-full h-full focus:outline-none"
+    }
+  ));
+};
+
+// src/inputs/TextArea.jsx
+import React9 from "react";
+var CustomTextarea = ({
+  label,
+  isRequired,
+  value,
+  onChange,
+  placeholder,
+  disabled = false,
+  error,
+  heading,
+  rows = 4
+}) => {
+  return /* @__PURE__ */ React9.createElement("div", { className: "flex flex-col gap-1 w-full" }, heading && /* @__PURE__ */ React9.createElement("h3", { className: "text-lg font-semibold" }, heading), /* @__PURE__ */ React9.createElement(
+    "label",
+    {
+      className: `font-[500] text-sm ${heading ? "text-[#737373]" : "text-black"}`
+    },
+    label,
+    " ",
+    isRequired && /* @__PURE__ */ React9.createElement("span", { className: "text-red-500" }, "*")
+  ), /* @__PURE__ */ React9.createElement(
+    "textarea",
+    {
+      rows,
+      className: `border rounded-md px-4 py-2 w-full text-[14px]
+          focus:outline-2 focus:outline-black focus:outline-offset-2
+          focus:ring-0 focus:shadow-none focus:border-black
+          ${disabled ? "bg-gray-100 text-gray-500 border-gray-300" : error ? "border-red-500 bg-red-50" : "bg-white border-[hsl(0_0%_89.8%)]"}
+        `,
+      value,
+      onChange: (e) => onChange == null ? void 0 : onChange(e.target.value),
+      placeholder,
+      disabled,
+      readOnly: disabled
+    }
+  ));
+};
+
+// src/inputs/Upload.jsx
+import React10, { useRef as useRef2 } from "react";
+import { Upload } from "lucide-react";
+var CustomUpload = ({
+  label = "Supporting documents",
+  description = "Drop items here or Browse Files",
+  accept = ".pdf,.jpg,.jpeg,.png",
+  maxSizeMB = 5,
+  onChange,
+  error,
+  value
+}) => {
+  const inputRef = useRef2(null);
+  const handleFileSelect = (files) => {
+    if (!files || files.length === 0) return;
+    const selectedFile = files[0];
+    if (selectedFile.size > maxSizeMB * 1024 * 1024) {
+      alert(`File size must be less than ${maxSizeMB} MB`);
+      return;
+    }
+    onChange == null ? void 0 : onChange(selectedFile);
+  };
+  return /* @__PURE__ */ React10.createElement("div", { className: "flex flex-col gap-2 w-full" }, label && /* @__PURE__ */ React10.createElement("label", { className: "text-sm font-medium" }, label), /* @__PURE__ */ React10.createElement(
+    "div",
+    {
+      className: `border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center text-center cursor-pointer transition
+          ${error ? "border-red-500 bg-red-50" : "border-gray-300 hover:border-gray-400 bg-gray-50"}`,
+      onClick: () => {
+        var _a;
+        return (_a = inputRef.current) == null ? void 0 : _a.click();
+      },
+      onDragOver: (e) => e.preventDefault(),
+      onDrop: (e) => {
+        e.preventDefault();
+        handleFileSelect(e.dataTransfer.files);
+      }
+    },
+    /* @__PURE__ */ React10.createElement(Upload, { className: "w-6 h-6 text-gray-500 mb-2" }),
+    /* @__PURE__ */ React10.createElement("p", { className: "text-sm text-gray-700" }, description),
+    /* @__PURE__ */ React10.createElement("p", { className: "text-xs text-gray-500 mt-1" }, "File Supported: PDF/JPG/PNG, up to ", maxSizeMB, " MB"),
+    /* @__PURE__ */ React10.createElement(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept,
+        className: "hidden",
+        onChange: (e) => handleFileSelect(e.target.files)
+      }
+    )
+  ), value && /* @__PURE__ */ React10.createElement("span", { className: "text-sm truncate text-gray-500" }, "Selected: ", value.name), error && /* @__PURE__ */ React10.createElement("p", { className: "text-xs text-red-500" }, error));
+};
+
+// src/sideBar/SideBar.jsx
+import { ChevronDown as ChevronDown2, LogOut } from "lucide-react";
+import React11 from "react";
+var AppSideBar = ({ sideBarHeading, username, role, navItems, additionalItems }) => {
+  const handleIconRotate = (e, index) => {
+    let dropDownIcon = e.currentTarget.children[2];
+    if (!dropDownIcon) return;
+    if (dropDownIcon.classList.contains("rotate-180")) {
+      dropDownIcon.classList.remove("rotate-180");
+    } else {
+      dropDownIcon.classList.add("transition-all");
+      dropDownIcon.classList.add("rotate-180");
+    }
+    const optionsContainer = document.getElementById(`dropDownOptions-${index}`);
+    if (!optionsContainer) return;
+    optionsContainer.classList.add("transition-all");
+    if (optionsContainer.classList.contains("max-h-0")) {
+      optionsContainer.classList.remove("max-h-0");
+      optionsContainer.classList.add("min-h-[50px]");
+    } else {
+      optionsContainer.classList.remove("min-h-[50px]");
+      optionsContainer.classList.add("max-h-0");
+    }
+  };
+  return /* @__PURE__ */ React11.createElement("div", { className: "w-72 bg-gray-50 border-r border-gray-200 flex flex-col p-4 h-full" }, /* @__PURE__ */ React11.createElement("div", { className: "p-2 mb-4" }, /* @__PURE__ */ React11.createElement("div", { className: "w-24 h-10 bg-black text-white flex items-center \r\n                    justify-center font-bold text-2xl border-2border-black" }, sideBarHeading)), /* @__PURE__ */ React11.createElement("div", null, navItems.map((item, index) => {
+    return /* @__PURE__ */ React11.createElement("div", { key: index, className: "" }, /* @__PURE__ */ React11.createElement("div", { className: "flex items-center gap-3 p-2 hover:bg-[#f3f4f6] cursor-pointer", onClick: (e) => {
+      item.onClick && item.onClick(e);
+      handleIconRotate(e, index);
+    } }, /* @__PURE__ */ React11.createElement(item.Icon, { width: 20, height: 20, color: "rgb(75 85 99)" }), /* @__PURE__ */ React11.createElement("span", { className: "font-medium text-[#374151]" }, item.label), item.isDropDown && /* @__PURE__ */ React11.createElement("div", { className: `ml-auto transition-all delay-75` }, /* @__PURE__ */ React11.createElement(ChevronDown2, { width: 20, height: 20 }))), item.options && item.options.length > 0 && /* @__PURE__ */ React11.createElement("div", { className: "ml-[40px] max-h-0 overflow-hidden flex flex-col", id: `dropDownOptions-${index}` }, item.options.map((options) => {
+      return /* @__PURE__ */ React11.createElement(
+        "div",
+        {
+          className: "p-2 rounded-lg hover:bg-gray-100 text-gray-600 font-medium text-sm",
+          onClick: () => options.onclick && options.onclick()
+        },
+        options.label
+      );
+    })));
+  })), /* @__PURE__ */ React11.createElement("div", { className: "border-t border-[#e5e5e5] mt-4" }, (additionalItems == null ? void 0 : additionalItems.length) > 0 && additionalItems.map((item, index) => {
+    return /* @__PURE__ */ React11.createElement("div", { key: index, className: "flex items-center gap-3 p-2 hover:bg-[#f3f4f6] cursor-pointer", onClick: () => item.onClick && item.onClick() }, /* @__PURE__ */ React11.createElement(item.Icon, { width: 20, height: 20, color: "rgb(75 85 99)" }), /* @__PURE__ */ React11.createElement("span", { className: "font-medium text-[#374151]" }, item.label));
+  })), /* @__PURE__ */ React11.createElement("div", { className: "mt-auto bg-gray-50 border-t border-[#e5e5e5] sticky bottom-0 pt-2" }, /* @__PURE__ */ React11.createElement("div", { className: "flex items-center justify-between p-2 rounded-lg hover:bg-gray-100 cursor-pointer" }, /* @__PURE__ */ React11.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React11.createElement("span", { className: "relative flex shrink-0 overflow-hidden rounded-full h-10 w-10" }, /* @__PURE__ */ React11.createElement("span", { className: "flex h-full w-full items-center justify-center rounded-full bg-muted" }, username && username.split("")[0])), /* @__PURE__ */ React11.createElement("div", null, /* @__PURE__ */ React11.createElement("p", { className: "font-semibold" }, username), /* @__PURE__ */ React11.createElement("p", { className: "text-sm text-gray-500" }, role))), /* @__PURE__ */ React11.createElement(LogOut, null))));
+};
+
+// src/RightSheet/RightSheet.jsx
+import React12, { useEffect, useState as useState2 } from "react";
+var RightSheet = ({ open, setOpen, children, callBack }) => {
+  const [visible, setVisible] = useState2(open);
+  useEffect(() => {
+    if (open) {
+      document.body.style.overflow = "hidden";
+      setVisible(true);
+    }
+    return () => {
+      document.body.style.overflow = "auto";
+    };
+  }, [open]);
+  const handleClose = () => {
+    setOpen(false);
+    setTimeout(() => {
+      setVisible(false);
+      callBack();
+    }, 200);
+  };
+  if (!visible) return null;
+  return /* @__PURE__ */ React12.createElement("div", { className: "fixed inset-0 overflow-x-hidden bg-black/80 sheetPopIn h-full overflow-auto ", onClick: handleClose }, /* @__PURE__ */ React12.createElement(
+    "div",
+    {
+      className: `absolute flex flex-col right-0 top-0 min-h-full min-w-[100%] md:min-w-[576px] bg-white
+                ${open ? "sheetRightSlide" : "transition-all duration-200 translate-x-[100%]"} justify-between `,
+      onClick: (e) => e.stopPropagation()
+    },
+    /* @__PURE__ */ React12.createElement("div", { className: "bg-white min-h-full " }, children),
+    /* @__PURE__ */ React12.createElement("div", { className: "h-[90px] flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 p-6 border-t  sticky bottom-0 bg-white border-[#e6e6e6]" }, /* @__PURE__ */ React12.createElement(
+      CustomButton,
+      {
+        variant: "SECONDARY",
+        onClick: () => handleClose()
+      },
+      "Cancel"
+    ))
+  ));
+};
+export {
+  AppSideBar,
+  Chip,
+  CustomAutocomplete,
+  CustomButton,
+  CustomCheckbox,
+  CustomInput,
+  CustomSearch,
+  CustomSwitch,
+  CustomTextarea,
+  CustomUpload,
+  ProgressBar,
+  RightSheet
+};

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "jett.admin.npmpackage",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./dist/index.css": "./dist/index.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.js --format esm,cjs"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@tailwindcss/postcss": "^4.1.13",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.544.0",
+    "tailwind-merge": "^3.3.1",
+    "tsup": "^8.5.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.13",
+    "typescript": "^5.9.2",
+    "vite": "^7.1.5"
+  }
+}