jett.admin.npmpackage 1.0.17 → 1.0.18

package/dist/index.css

@@ -249,6 +249,9 @@
   }
 }
 @layer utilities {
+  .visible {
+    visibility: visible;
+  }
   .absolute {
     position: absolute;
   }

package/dist/index.js

@@ -36,6 +36,7 @@ __export(index_exports, {
   CustomCheckbox: () => CustomCheckbox,
   CustomInput: () => CustomInput,
   CustomSearch: () => CustomSearch,
+  CustomSelect: () => CustomSelect,
   CustomSwitch: () => CustomSwitch,
   CustomTable: () => CustomTable,
   CustomTextarea: () => CustomTextarea,
@@ -672,7 +673,15 @@ var AppSideBar = ({ username, role, navItems, additionalItems, sideBarLogo }) =>
 
 // src/RightSheet/RightSheet.jsx
 var import_react12 = __toESM(require("react"));
-var RightSheet = ({ open, setOpen, children, callBack }) => {
+var RightSheet = ({
+  open,
+  setOpen,
+  children,
+  callBack,
+  actionLabel = "Save",
+  onAction = () => {
+  }
+}) => {
   const [visible, setVisible] = (0, import_react12.useState)(open);
   (0, import_react12.useEffect)(() => {
     if (open) {
@@ -690,24 +699,28 @@ var RightSheet = ({ open, setOpen, children, callBack }) => {
       callBack();
     }, 200);
   };
+  const handleAction = () => {
+    onAction();
+    handleClose();
+  };
   if (!visible) return null;
-  return /* @__PURE__ */ import_react12.default.createElement("div", { className: "fixed inset-0 overflow-x-hidden bg-black/80 sheetPopIn h-full overflow-auto ", onClick: handleClose }, /* @__PURE__ */ import_react12.default.createElement(
+  return /* @__PURE__ */ import_react12.default.createElement(
     "div",
     {
-      className: `absolute flex flex-col right-0 top-0 min-h-full min-w-[100%] md:min-w-[576px] bg-white
-                ${visible ? "sheetRightSlide" : "transition-all duration-200 translate-x-[100%]"} justify-between `,
-      onClick: (e) => e.stopPropagation()
+      className: "fixed inset-0 overflow-x-hidden bg-black/80 sheetPopIn h-full overflow-auto ",
+      onClick: handleClose
     },
-    /* @__PURE__ */ import_react12.default.createElement("div", { className: "bg-white min-h-full " }, children),
-    /* @__PURE__ */ import_react12.default.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__ */ import_react12.default.createElement(
-      CustomButton,
+    /* @__PURE__ */ import_react12.default.createElement(
+      "div",
       {
-        variant: "SECONDARY",
-        onClick: () => handleClose()
+        className: `absolute flex flex-col right-0 top-0 min-h-full min-w-[100%] md:min-w-[576px] bg-white
+                ${visible ? "sheetRightSlide" : "transition-all duration-200 translate-x-[100%]"} justify-between `,
+        onClick: (e) => e.stopPropagation()
       },
-      "Cancel"
-    ))
-  ));
+      /* @__PURE__ */ import_react12.default.createElement("div", { className: "bg-white min-h-full " }, children),
+      /* @__PURE__ */ import_react12.default.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__ */ import_react12.default.createElement(CustomButton, { variant: "SECONDARY", onClick: () => handleClose() }, "Cancel"), /* @__PURE__ */ import_react12.default.createElement(CustomButton, { variant: "SECONDARY", onClick: handleAction }, actionLabel))
+    )
+  );
 };
 
 // src/Table/CustomTable.jsx
@@ -719,6 +732,93 @@ var CustomTable = ({ tableHeader, setIsAllChecked, isAllChecked, children }) =>
     return /* @__PURE__ */ import_react13.default.createElement("th", { className: `px-4 py-3 text-sm font-medium ${index == tableHeader.length - 1 ? "text-right" : "text-left"}`, key: header + index }, header);
   }))), /* @__PURE__ */ import_react13.default.createElement("tbody", null, children))));
 };
+
+// src/inputs/CustomSelect.jsx
+var import_react14 = __toESM(require("react"));
+var import_lucide_react6 = require("lucide-react");
+var CustomSelect = ({
+  label,
+  value,
+  onChange,
+  options,
+  placeholder = "Select...",
+  isRequired = false,
+  error,
+  heading,
+  disabled = false
+}) => {
+  const [open, setOpen] = (0, import_react14.useState)(false);
+  const [search, setSearch] = (0, import_react14.useState)("");
+  const wrapperRef = (0, import_react14.useRef)(null);
+  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 handleSelect = (val) => {
+    onChange(val);
+    setOpen(false);
+  };
+  const selectedOption = options.find((opt) => opt.value === value);
+  return /* @__PURE__ */ import_react14.default.createElement(
+    "div",
+    {
+      className: "flex flex-col w-full relative",
+      ref: wrapperRef,
+      tabIndex: disabled ? -1 : 0,
+      onBlur: handleBlur
+    },
+    heading && /* @__PURE__ */ import_react14.default.createElement("h3", { className: "text-lg font-semibold mb-1" }, heading),
+    label && /* @__PURE__ */ import_react14.default.createElement(
+      "label",
+      {
+        className: `font-medium text-sm mb-1 ${heading ? "text-gray-500" : "text-black"}`
+      },
+      label,
+      " ",
+      isRequired && /* @__PURE__ */ import_react14.default.createElement("span", { className: "text-red-500" }, "*")
+    ),
+    /* @__PURE__ */ import_react14.default.createElement(
+      "div",
+      {
+        onClick: () => !disabled && setOpen((prev) => !prev),
+        className: `flex justify-between items-center rounded-md px-3 py-2 text-sm border h-10 cursor-pointer
+          ${disabled ? "bg-gray-100 text-gray-400" : "bg-white hover:border-gray-400"}
+          ${error ? "border-red-500" : "border-gray-300"}
+        `
+      },
+      /* @__PURE__ */ import_react14.default.createElement("span", { className: `${selectedOption ? "text-black" : "text-gray-400"}` }, selectedOption ? selectedOption.label : placeholder),
+      /* @__PURE__ */ import_react14.default.createElement(
+        import_lucide_react6.ChevronDown,
+        {
+          className: `w-4 h-4 text-gray-500 transition-transform ${open ? "rotate-180" : ""}`
+        }
+      )
+    ),
+    open && !disabled && /* @__PURE__ */ import_react14.default.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__ */ import_react14.default.createElement("div", { className: "flex items-center gap-2 p-2 border-b border-gray-200" }, /* @__PURE__ */ import_react14.default.createElement(import_lucide_react6.Search, { size: 16, className: "text-gray-400" }), /* @__PURE__ */ import_react14.default.createElement(
+      "input",
+      {
+        type: "text",
+        value: search,
+        onChange: (e) => setSearch(e.target.value),
+        placeholder: "Search...",
+        className: "flex-1 text-sm focus:outline-none"
+      }
+    )), /* @__PURE__ */ import_react14.default.createElement("ul", null, filteredOptions.length > 0 ? filteredOptions.map((opt) => /* @__PURE__ */ import_react14.default.createElement(
+      "li",
+      {
+        key: opt.value,
+        onClick: () => handleSelect(opt.value),
+        className: `px-3 py-2 text-sm cursor-pointer hover:bg-gray-100 ${value === opt.value ? "bg-gray-100 font-medium" : ""}`
+      },
+      opt.label
+    )) : /* @__PURE__ */ import_react14.default.createElement("li", { className: "px-3 py-2 text-sm text-gray-400" }, "No results found")))
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AppSideBar,
@@ -728,6 +828,7 @@ var CustomTable = ({ tableHeader, setIsAllChecked, isAllChecked, children }) =>
   CustomCheckbox,
   CustomInput,
   CustomSearch,
+  CustomSelect,
   CustomSwitch,
   CustomTable,
   CustomTextarea,

package/dist/index.mjs

@@ -625,7 +625,15 @@ var AppSideBar = ({ username, role, navItems, additionalItems, sideBarLogo }) =>
 
 // src/RightSheet/RightSheet.jsx
 import React12, { useEffect as useEffect2, useState as useState3 } from "react";
-var RightSheet = ({ open, setOpen, children, callBack }) => {
+var RightSheet = ({
+  open,
+  setOpen,
+  children,
+  callBack,
+  actionLabel = "Save",
+  onAction = () => {
+  }
+}) => {
   const [visible, setVisible] = useState3(open);
   useEffect2(() => {
     if (open) {
@@ -643,24 +651,28 @@ var RightSheet = ({ open, setOpen, children, callBack }) => {
       callBack();
     }, 200);
   };
+  const handleAction = () => {
+    onAction();
+    handleClose();
+  };
   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(
+  return /* @__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
-                ${visible ? "sheetRightSlide" : "transition-all duration-200 translate-x-[100%]"} justify-between `,
-      onClick: (e) => e.stopPropagation()
+      className: "fixed inset-0 overflow-x-hidden bg-black/80 sheetPopIn h-full overflow-auto ",
+      onClick: handleClose
     },
-    /* @__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,
+    /* @__PURE__ */ React12.createElement(
+      "div",
       {
-        variant: "SECONDARY",
-        onClick: () => handleClose()
+        className: `absolute flex flex-col right-0 top-0 min-h-full min-w-[100%] md:min-w-[576px] bg-white
+                ${visible ? "sheetRightSlide" : "transition-all duration-200 translate-x-[100%]"} justify-between `,
+        onClick: (e) => e.stopPropagation()
       },
-      "Cancel"
-    ))
-  ));
+      /* @__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"), /* @__PURE__ */ React12.createElement(CustomButton, { variant: "SECONDARY", onClick: handleAction }, actionLabel))
+    )
+  );
 };
 
 // src/Table/CustomTable.jsx
@@ -672,6 +684,93 @@ var CustomTable = ({ tableHeader, setIsAllChecked, isAllChecked, children }) =>
     return /* @__PURE__ */ React13.createElement("th", { className: `px-4 py-3 text-sm font-medium ${index == tableHeader.length - 1 ? "text-right" : "text-left"}`, key: header + index }, header);
   }))), /* @__PURE__ */ React13.createElement("tbody", null, children))));
 };
+
+// src/inputs/CustomSelect.jsx
+import React14, { useState as useState4, useRef as useRef3 } from "react";
+import { ChevronDown as ChevronDown3, Search as Search3 } from "lucide-react";
+var CustomSelect = ({
+  label,
+  value,
+  onChange,
+  options,
+  placeholder = "Select...",
+  isRequired = false,
+  error,
+  heading,
+  disabled = false
+}) => {
+  const [open, setOpen] = useState4(false);
+  const [search, setSearch] = useState4("");
+  const wrapperRef = useRef3(null);
+  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 handleSelect = (val) => {
+    onChange(val);
+    setOpen(false);
+  };
+  const selectedOption = options.find((opt) => opt.value === value);
+  return /* @__PURE__ */ React14.createElement(
+    "div",
+    {
+      className: "flex flex-col w-full relative",
+      ref: wrapperRef,
+      tabIndex: disabled ? -1 : 0,
+      onBlur: handleBlur
+    },
+    heading && /* @__PURE__ */ React14.createElement("h3", { className: "text-lg font-semibold mb-1" }, heading),
+    label && /* @__PURE__ */ React14.createElement(
+      "label",
+      {
+        className: `font-medium text-sm mb-1 ${heading ? "text-gray-500" : "text-black"}`
+      },
+      label,
+      " ",
+      isRequired && /* @__PURE__ */ React14.createElement("span", { className: "text-red-500" }, "*")
+    ),
+    /* @__PURE__ */ React14.createElement(
+      "div",
+      {
+        onClick: () => !disabled && setOpen((prev) => !prev),
+        className: `flex justify-between items-center rounded-md px-3 py-2 text-sm border h-10 cursor-pointer
+          ${disabled ? "bg-gray-100 text-gray-400" : "bg-white hover:border-gray-400"}
+          ${error ? "border-red-500" : "border-gray-300"}
+        `
+      },
+      /* @__PURE__ */ React14.createElement("span", { className: `${selectedOption ? "text-black" : "text-gray-400"}` }, selectedOption ? selectedOption.label : placeholder),
+      /* @__PURE__ */ React14.createElement(
+        ChevronDown3,
+        {
+          className: `w-4 h-4 text-gray-500 transition-transform ${open ? "rotate-180" : ""}`
+        }
+      )
+    ),
+    open && !disabled && /* @__PURE__ */ React14.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__ */ React14.createElement("div", { className: "flex items-center gap-2 p-2 border-b border-gray-200" }, /* @__PURE__ */ React14.createElement(Search3, { size: 16, className: "text-gray-400" }), /* @__PURE__ */ React14.createElement(
+      "input",
+      {
+        type: "text",
+        value: search,
+        onChange: (e) => setSearch(e.target.value),
+        placeholder: "Search...",
+        className: "flex-1 text-sm focus:outline-none"
+      }
+    )), /* @__PURE__ */ React14.createElement("ul", null, filteredOptions.length > 0 ? filteredOptions.map((opt) => /* @__PURE__ */ React14.createElement(
+      "li",
+      {
+        key: opt.value,
+        onClick: () => handleSelect(opt.value),
+        className: `px-3 py-2 text-sm cursor-pointer hover:bg-gray-100 ${value === opt.value ? "bg-gray-100 font-medium" : ""}`
+      },
+      opt.label
+    )) : /* @__PURE__ */ React14.createElement("li", { className: "px-3 py-2 text-sm text-gray-400" }, "No results found")))
+  );
+};
 export {
   AppSideBar,
   Chip,
@@ -680,6 +779,7 @@ export {
   CustomCheckbox,
   CustomInput,
   CustomSearch,
+  CustomSelect,
   CustomSwitch,
   CustomTable,
   CustomTextarea,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jett.admin.npmpackage",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "exports": {