jett.admin.npmpackage 2.0.22 → 2.0.24

package/dist/index.css

@@ -2,23 +2,6 @@
 @layer properties;
 :root,
 :host {
-  --font-sans:
-    ui-sans-serif,
-    system-ui,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
-  --font-mono:
-    ui-monospace,
-    SFMono-Regular,
-    Menlo,
-    Monaco,
-    Consolas,
-    "Liberation Mono",
-    "Courier New",
-    monospace;
   --color-red-50: oklch(97.1% 0.013 17.38);
   --color-red-100: oklch(93.6% 0.032 17.717);
   --color-red-200: oklch(88.5% 0.062 18.334);
@@ -172,6 +155,9 @@
 .mb-6 {
   margin-bottom: calc(var(--spacing) * 6);
 }
+.ml-0\.5 {
+  margin-left: calc(var(--spacing) * 0.5);
+}
 .ml-2 {
   margin-left: calc(var(--spacing) * 2);
 }
@@ -866,6 +852,10 @@
     var(--tw-ring-shadow),
     var(--tw-shadow);
 }
+.outline {
+  outline-style: var(--tw-outline-style);
+  outline-width: 1px;
+}
 .outline-offset-2 {
   outline-offset: 2px;
 }
@@ -961,6 +951,22 @@
     background-color: var(--color-primary);
   }
 }
+.placeholder\:text-\[14px\] {
+  &::placeholder {
+    font-size: 14px;
+  }
+}
+.placeholder\:font-normal {
+  &::placeholder {
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
+}
+.placeholder\:text-\[\#6b7280\] {
+  &::placeholder {
+    color: #6b7280;
+  }
+}
 .focus-within\:outline-2 {
   &:focus-within {
     outline-style: var(--tw-outline-style);
@@ -1395,9 +1401,9 @@ body {
 @property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }
 @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
 @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+@property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; }
 @property --tw-duration { syntax: "*"; inherits: false; }
 @property --tw-ease { syntax: "*"; inherits: false; }
-@property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; }
 @property --tw-space-x-reverse { syntax: "*"; inherits: false; initial-value: 0; }
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
@@ -1431,9 +1437,9 @@ body {
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
       --tw-duration: initial;
       --tw-ease: initial;
-      --tw-outline-style: solid;
       --tw-space-x-reverse: 0;
     }
   }

package/dist/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   AppSideBar: () => AppSideBar,
+  Calendar: () => Calendar,
   Chip: () => Chip,
   CustomAutocomplete: () => CustomAutocomplete,
   CustomButton: () => CustomButton,
@@ -41,6 +42,7 @@ __export(index_exports, {
   CustomTable: () => CustomTable,
   CustomTextarea: () => CustomTextarea,
   CustomUpload: () => CustomUpload,
+  Dropdown: () => Dropdown,
   Pagination: () => Pagination,
   ProgressBar: () => ProgressBar,
   RightSheet: () => RightSheet
@@ -320,6 +322,7 @@ var CustomInput = ({
     "input",
     {
       className: `border border-gray-200 rounded-md h-10 px-4 py-2 w-full text-[14px]
+          placeholder:text-[14px] placeholder:font-normal placeholder:text-[#6b7280]
           focus:outline-2 outline-black dark:outline-white outline-offset-2
           dark:bg-transparent dark:text-white dark:border-[#303036]
           ${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%)]"}
@@ -1654,8 +1657,238 @@ var CustomTable = ({
   )), /* @__PURE__ */ import_react16.default.createElement("tbody", { id: `${id}-tbody-1` }, children))));
 };
 
-// src/Pagination/Pagination.jsx
+// src/inputs/Dropdown.jsx
 var import_react17 = __toESM(require("react"));
+var import_react_select = __toESM(require("react-select"));
+var isDarkMode = () => typeof document !== "undefined" && document.documentElement.classList.contains("dark");
+function buildStyles(isDark, error) {
+  return {
+    control: (base, state) => ({
+      ...base,
+      minHeight: "40px !important",
+      fontSize: 14,
+      borderRadius: "6px",
+      boxShadow: "none",
+      backgroundColor: state.isDisabled ? "#f3f4f6" : error ? "#fef2f2" : isDark ? "#18181b" : "#ffffff",
+      borderColor: state.isDisabled ? "#d1d5db" : error ? "#ef4444" : isDark ? "#303036" : "#e5e5e5",
+      outline: state.isFocused ? "2px solid #000" : "none",
+      outlineOffset: "2px",
+      "&:hover": {
+        borderColor: error ? "#ef4444" : "none"
+      }
+    }),
+    menu: (base) => ({
+      ...base,
+      backgroundColor: isDark ? "#18181b" : "#ffffff",
+      zIndex: 9999
+    }),
+    menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+    option: (base, state) => ({
+      ...base,
+      fontSize: 14,
+      cursor: "pointer",
+      backgroundColor: state.isSelected ? "#0087FA" : state.isFocused ? isDark ? "#303036" : "#EBF5FF" : "transparent",
+      color: state.isSelected ? "#ffffff" : isDark ? "#f3f4f6" : "#111827",
+      "&:active": { backgroundColor: "#0087FA", color: "#ffffff" }
+    }),
+    singleValue: (base, state) => ({
+      ...base,
+      fontSize: 14,
+      fontWeight: 400,
+      color: state.isDisabled ? "#6b7280" : isDark ? "#f3f4f6" : "#111827"
+    }),
+    multiValue: (base) => ({
+      ...base,
+      backgroundColor: isDark ? "#303036" : "#EBF5FF"
+    }),
+    multiValueLabel: (base) => ({
+      ...base,
+      fontSize: 12,
+      color: isDark ? "#f3f4f6" : "#0087FA"
+    }),
+    multiValueRemove: (base) => ({
+      ...base,
+      color: isDark ? "#9ca3af" : "#0087FA",
+      "&:hover": { backgroundColor: "#0087FA", color: "#ffffff" }
+    }),
+    placeholder: (base) => ({
+      ...base,
+      fontSize: 14,
+      fontWeight: 400,
+      color: "#6b7280"
+    }),
+    input: (base) => ({
+      ...base,
+      fontSize: 14,
+      fontWeight: 400,
+      color: isDark ? "#f3f4f6" : "#111827"
+    }),
+    indicatorSeparator: () => ({ display: "none" }),
+    dropdownIndicator: (base) => ({
+      ...base,
+      padding: "0 6px",
+      color: isDark ? "#9ca3af" : "#6b7280"
+    }),
+    clearIndicator: (base) => ({
+      ...base,
+      padding: "0 4px",
+      color: isDark ? "#9ca3af" : "#6b7280",
+      cursor: "pointer",
+      "&:hover": { color: "#0087FA" }
+    }),
+    valueContainer: (base) => ({ ...base, padding: "2px 16px" })
+  };
+}
+var Dropdown = import_react17.default.forwardRef(
+  ({
+    id = "dropdown",
+    options,
+    placeholder = "Select...",
+    isDisabled = false,
+    isClearable = true,
+    isLoading = false,
+    error = false,
+    label,
+    heading,
+    isRequired = false,
+    name,
+    menuPortalTarget,
+    menuPosition = "absolute",
+    className,
+    style,
+    isMulti = false,
+    value,
+    onChange
+  }, ref) => {
+    const reactId = (0, import_react17.useId)();
+    const isDark = isDarkMode();
+    const styles = (0, import_react17.useMemo)(() => buildStyles(isDark, !!error), [isDark, error]);
+    const selectedValue = isMulti ? options.filter((o) => (value ?? []).includes(o.value)) : options.find((o) => o.value === value) ?? null;
+    const handleChange = (selected) => {
+      if (isMulti) {
+        onChange((selected ?? []).map((o) => o.value));
+      } else {
+        onChange((selected == null ? void 0 : selected.value) ?? null);
+      }
+    };
+    return /* @__PURE__ */ import_react17.default.createElement("div", { className: `flex flex-col gap-1 w-full ${className ?? ""}`, style, id: `${id}-div-1` }, heading && /* @__PURE__ */ import_react17.default.createElement("h3", { className: "text-lg font-semibold", id: `${id}-h3-1` }, heading), label && /* @__PURE__ */ import_react17.default.createElement(
+      "label",
+      {
+        htmlFor: reactId,
+        className: `font-[500] text-sm ${heading ? "text-[#737373]" : "text-black"} dark:text-white`,
+        id: `${id}-label-1`
+      },
+      label,
+      isRequired && /* @__PURE__ */ import_react17.default.createElement("span", { className: "text-red-500 ml-0.5", id: `${id}-span-1` }, "*")
+    ), /* @__PURE__ */ import_react17.default.createElement(
+      import_react_select.default,
+      {
+        ref,
+        inputId: reactId,
+        name,
+        options,
+        value: selectedValue,
+        onChange: handleChange,
+        placeholder,
+        isDisabled,
+        isClearable,
+        isLoading,
+        isMulti,
+        styles,
+        menuPortalTarget,
+        menuPosition,
+        classNamePrefix: "jett-dropdown"
+      }
+    ));
+  }
+);
+Dropdown.displayName = "Dropdown";
+
+// src/Calendar/Calendar.tsx
+var import_react18 = __toESM(require("react"));
+var import_dates = require("@mantine/dates");
+var Calendar = (props) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const {
+    minDate,
+    maxDate,
+    excludeDate,
+    firstDayOfWeek = 1,
+    locale,
+    size,
+    className,
+    error
+  } = props;
+  const isRange = props.mode === "range";
+  const isDateTime = props.mode === "datetime";
+  const datesProviderSettings = {
+    firstDayOfWeek,
+    consistentWeeks: true
+  };
+  if (locale) {
+    datesProviderSettings.locale = locale;
+  }
+  const anchorDate = isRange ? ((_a = props.value) == null ? void 0 : _a[0]) ?? ((_b = props.value) == null ? void 0 : _b[1]) ?? ((_c = props.defaultValue) == null ? void 0 : _c[0]) ?? ((_d = props.defaultValue) == null ? void 0 : _d[1]) ?? void 0 : !isDateTime ? props.value ?? props.defaultValue ?? void 0 : void 0;
+  const [displayDate, setDisplayDate] = (0, import_react18.useState)(anchorDate ?? void 0);
+  const anchorTime = isRange ? ((_f = (_e = props.value) == null ? void 0 : _e[0]) == null ? void 0 : _f.getTime()) ?? ((_h = (_g = props.value) == null ? void 0 : _g[1]) == null ? void 0 : _h.getTime()) : !isDateTime ? (_i = props.value) == null ? void 0 : _i.getTime() : void 0;
+  (0, import_react18.useEffect)(() => {
+    if (anchorTime !== void 0) {
+      setDisplayDate(new Date(anchorTime));
+    }
+  }, [anchorTime]);
+  const weekendColorStyle = {
+    "--mantine-color-red-6": "var(--mantine-color-text)"
+  };
+  if (isRange) {
+    const datePickerProps2 = {
+      type: "range",
+      value: props.value,
+      defaultValue: props.defaultValue,
+      onChange: props.onChange,
+      minDate,
+      maxDate,
+      excludeDate,
+      size,
+      className,
+      date: displayDate,
+      onDateChange: setDisplayDate,
+      style: weekendColorStyle
+    };
+    return /* @__PURE__ */ import_react18.default.createElement(import_dates.DatesProvider, { settings: datesProviderSettings }, /* @__PURE__ */ import_react18.default.createElement(import_dates.DatePicker, { ...datePickerProps2 }));
+  }
+  if (isDateTime) {
+    const dateTimePickerProps = {
+      value: props.value,
+      defaultValue: props.defaultValue,
+      onChange: props.onChange,
+      minDate,
+      maxDate,
+      excludeDate,
+      size,
+      className,
+      error,
+      style: weekendColorStyle
+    };
+    return /* @__PURE__ */ import_react18.default.createElement(import_dates.DatesProvider, { settings: datesProviderSettings }, /* @__PURE__ */ import_react18.default.createElement(import_dates.DateTimePicker, { ...dateTimePickerProps }));
+  }
+  const datePickerProps = {
+    value: props.value,
+    defaultValue: props.defaultValue,
+    onChange: props.onChange,
+    minDate,
+    maxDate,
+    excludeDate,
+    size,
+    className,
+    date: displayDate,
+    onDateChange: setDisplayDate,
+    style: weekendColorStyle
+  };
+  return /* @__PURE__ */ import_react18.default.createElement(import_dates.DatesProvider, { settings: datesProviderSettings }, /* @__PURE__ */ import_react18.default.createElement(import_dates.DatePicker, { ...datePickerProps }));
+};
+
+// src/Pagination/Pagination.jsx
+var import_react19 = __toESM(require("react"));
 var import_lucide_react9 = require("lucide-react");
 var Pagination = ({
   id = "pagination",
@@ -1680,26 +1913,26 @@ var Pagination = ({
   componentProps = {},
   ...restProps
 }) => {
-  const [internalCurrentPage, setInternalCurrentPage] = (0, import_react17.useState)(1);
-  const [internalItemsPerPage, setInternalItemsPerPage] = (0, import_react17.useState)(itemsPerPage);
+  const [internalCurrentPage, setInternalCurrentPage] = (0, import_react19.useState)(1);
+  const [internalItemsPerPage, setInternalItemsPerPage] = (0, import_react19.useState)(itemsPerPage);
   const isControlled = controlledCurrentPage !== void 0;
   const isItemsPerPageControlled = controlledOnItemsPerPageChange !== void 0;
   const currentPage = isControlled ? controlledCurrentPage : internalCurrentPage;
   const activeItemsPerPage = isItemsPerPageControlled ? itemsPerPage : internalItemsPerPage;
   const totalItems = legacyTotalItems !== void 0 ? legacyTotalItems : data.length;
-  const calculatedTotalPages = (0, import_react17.useMemo)(() => {
+  const calculatedTotalPages = (0, import_react19.useMemo)(() => {
     if (totalItems > 0 && activeItemsPerPage > 0) {
       return Math.ceil(totalItems / activeItemsPerPage);
     }
     return 1;
   }, [totalItems, activeItemsPerPage]);
-  const paginatedData = (0, import_react17.useMemo)(() => {
+  const paginatedData = (0, import_react19.useMemo)(() => {
     if (!data || data.length === 0) return [];
     const startIndex = (currentPage - 1) * activeItemsPerPage;
     const endIndex = startIndex + activeItemsPerPage;
     return data.slice(startIndex, endIndex);
   }, [data, currentPage, activeItemsPerPage]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!isControlled && currentPage > calculatedTotalPages && calculatedTotalPages > 0) {
       setInternalCurrentPage(1);
     }
@@ -1732,11 +1965,11 @@ var Pagination = ({
   const endItem = totalItems !== void 0 ? Math.min(currentPage * activeItemsPerPage, totalItems) : null;
   const renderContent = () => {
     if (Component) {
-      if (import_react17.default.isValidElement(Component)) {
+      if (import_react19.default.isValidElement(Component)) {
         const ComponentType = Component.type;
         const elementProps = Component.props;
         if (isTable) {
-          return /* @__PURE__ */ import_react17.default.createElement(
+          return /* @__PURE__ */ import_react19.default.createElement(
             CustomTable,
             {
               tableHeader,
@@ -1744,7 +1977,7 @@ var Pagination = ({
               id: `${id}-custom-table-1`
             },
             data.map((item, index) => {
-              return /* @__PURE__ */ import_react17.default.createElement(
+              return /* @__PURE__ */ import_react19.default.createElement(
                 ComponentType,
                 {
                   key: item.id || item._id || index,
@@ -1759,7 +1992,7 @@ var Pagination = ({
           );
         } else {
           if (isTable) {
-            return /* @__PURE__ */ import_react17.default.createElement(
+            return /* @__PURE__ */ import_react19.default.createElement(
               CustomTable,
               {
                 tableHeader,
@@ -1767,7 +2000,7 @@ var Pagination = ({
                 id: `${id}-custom-table-2`
               },
               paginatedData.map((item, index) => {
-                return /* @__PURE__ */ import_react17.default.createElement(
+                return /* @__PURE__ */ import_react19.default.createElement(
                   ComponentType,
                   {
                     key: item.id || item._id || index,
@@ -1783,7 +2016,7 @@ var Pagination = ({
           }
         }
       } else {
-        return /* @__PURE__ */ import_react17.default.createElement(
+        return /* @__PURE__ */ import_react19.default.createElement(
           CustomTable,
           {
             tableHeader,
@@ -1791,7 +2024,7 @@ var Pagination = ({
             id: `${id}-custom-table-3`
           },
           paginatedData.map((item, index) => {
-            return /* @__PURE__ */ import_react17.default.createElement(
+            return /* @__PURE__ */ import_react19.default.createElement(
               Component,
               {
                 key: item.id || item._id || index,
@@ -1807,7 +2040,7 @@ var Pagination = ({
     }
     return null;
   };
-  return /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, renderContent()), /* @__PURE__ */ import_react17.default.createElement("div", { className: "flex flex-col sm:flex-row justify-between items-center gap-4 px-4 py-3 border-t border-[#e5e5e5] dark:border-[#303036] bg-white dark:bg-[#18181b] z-10", id: `${id}-div-1` }, totalItems !== void 0 && /* @__PURE__ */ import_react17.default.createElement("div", { className: "text-sm text-[#737373] dark:text-white", id: `${id}-div-2` }, "Showing ", startItem, " to ", endItem, " of ", totalItems, " entries"), /* @__PURE__ */ import_react17.default.createElement("div", { className: "flex items-center gap-2", id: `${id}-div-3` }, /* @__PURE__ */ import_react17.default.createElement(
+  return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, renderContent()), /* @__PURE__ */ import_react19.default.createElement("div", { className: "flex flex-col sm:flex-row justify-between items-center gap-4 px-4 py-3 border-t border-[#e5e5e5] dark:border-[#303036] bg-white dark:bg-[#18181b] z-10", id: `${id}-div-1` }, totalItems !== void 0 && /* @__PURE__ */ import_react19.default.createElement("div", { className: "text-sm text-[#737373] dark:text-white", id: `${id}-div-2` }, "Showing ", startItem, " to ", endItem, " of ", totalItems, " entries"), /* @__PURE__ */ import_react19.default.createElement("div", { className: "flex items-center gap-2", id: `${id}-div-3` }, /* @__PURE__ */ import_react19.default.createElement(
     "button",
     {
       onClick: () => handlePageChange(1),
@@ -1816,8 +2049,8 @@ var Pagination = ({
       title: "First page",
       id: `${id}-button-1`
     },
-    /* @__PURE__ */ import_react17.default.createElement(import_lucide_react9.ChevronsLeft, { size: 16 })
-  ), /* @__PURE__ */ import_react17.default.createElement(
+    /* @__PURE__ */ import_react19.default.createElement(import_lucide_react9.ChevronsLeft, { size: 16 })
+  ), /* @__PURE__ */ import_react19.default.createElement(
     "button",
     {
       onClick: () => handlePageChange(currentPage - 1),
@@ -1826,8 +2059,8 @@ var Pagination = ({
       title: "Previous page",
       id: `${id}-button-2`
     },
-    /* @__PURE__ */ import_react17.default.createElement(import_lucide_react9.ChevronLeft, { size: 16 })
-  ), getPageNumbers().map((pageNum) => /* @__PURE__ */ import_react17.default.createElement(
+    /* @__PURE__ */ import_react19.default.createElement(import_lucide_react9.ChevronLeft, { size: 16 })
+  ), getPageNumbers().map((pageNum) => /* @__PURE__ */ import_react19.default.createElement(
     "button",
     {
       key: pageNum,
@@ -1836,7 +2069,7 @@ var Pagination = ({
       id: `${id}-button-3`
     },
     pageNum
-  )), /* @__PURE__ */ import_react17.default.createElement(
+  )), /* @__PURE__ */ import_react19.default.createElement(
     "button",
     {
       onClick: () => handlePageChange(currentPage + 1),
@@ -1845,8 +2078,8 @@ var Pagination = ({
       title: "Next page",
       id: `${id}-button-4`
     },
-    /* @__PURE__ */ import_react17.default.createElement(import_lucide_react9.ChevronRight, { size: 16 })
-  ), /* @__PURE__ */ import_react17.default.createElement(
+    /* @__PURE__ */ import_react19.default.createElement(import_lucide_react9.ChevronRight, { size: 16 })
+  ), /* @__PURE__ */ import_react19.default.createElement(
     "button",
     {
       onClick: () => handlePageChange(calculatedTotalPages),
@@ -1855,12 +2088,13 @@ var Pagination = ({
       title: "Last page",
       id: `${id}-button-5`
     },
-    /* @__PURE__ */ import_react17.default.createElement(import_lucide_react9.ChevronsRight, { size: 16 })
+    /* @__PURE__ */ import_react19.default.createElement(import_lucide_react9.ChevronsRight, { size: 16 })
   ))));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AppSideBar,
+  Calendar,
   Chip,
   CustomAutocomplete,
   CustomButton,
@@ -1872,6 +2106,7 @@ var Pagination = ({
   CustomTable,
   CustomTextarea,
   CustomUpload,
+  Dropdown,
   Pagination,
   ProgressBar,
   RightSheet

package/dist/index.mjs

@@ -271,6 +271,7 @@ var CustomInput = ({
     "input",
     {
       className: `border border-gray-200 rounded-md h-10 px-4 py-2 w-full text-[14px]
+          placeholder:text-[14px] placeholder:font-normal placeholder:text-[#6b7280]
           focus:outline-2 outline-black dark:outline-white outline-offset-2
           dark:bg-transparent dark:text-white dark:border-[#303036]
           ${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%)]"}
@@ -1622,8 +1623,242 @@ var CustomTable = ({
   )), /* @__PURE__ */ React16.createElement("tbody", { id: `${id}-tbody-1` }, children))));
 };
 
+// src/inputs/Dropdown.jsx
+import React17, { useId, useMemo } from "react";
+import ReactSelect from "react-select";
+var isDarkMode = () => typeof document !== "undefined" && document.documentElement.classList.contains("dark");
+function buildStyles(isDark, error) {
+  return {
+    control: (base, state) => ({
+      ...base,
+      minHeight: "40px !important",
+      fontSize: 14,
+      borderRadius: "6px",
+      boxShadow: "none",
+      backgroundColor: state.isDisabled ? "#f3f4f6" : error ? "#fef2f2" : isDark ? "#18181b" : "#ffffff",
+      borderColor: state.isDisabled ? "#d1d5db" : error ? "#ef4444" : isDark ? "#303036" : "#e5e5e5",
+      outline: state.isFocused ? "2px solid #000" : "none",
+      outlineOffset: "2px",
+      "&:hover": {
+        borderColor: error ? "#ef4444" : "none"
+      }
+    }),
+    menu: (base) => ({
+      ...base,
+      backgroundColor: isDark ? "#18181b" : "#ffffff",
+      zIndex: 9999
+    }),
+    menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+    option: (base, state) => ({
+      ...base,
+      fontSize: 14,
+      cursor: "pointer",
+      backgroundColor: state.isSelected ? "#0087FA" : state.isFocused ? isDark ? "#303036" : "#EBF5FF" : "transparent",
+      color: state.isSelected ? "#ffffff" : isDark ? "#f3f4f6" : "#111827",
+      "&:active": { backgroundColor: "#0087FA", color: "#ffffff" }
+    }),
+    singleValue: (base, state) => ({
+      ...base,
+      fontSize: 14,
+      fontWeight: 400,
+      color: state.isDisabled ? "#6b7280" : isDark ? "#f3f4f6" : "#111827"
+    }),
+    multiValue: (base) => ({
+      ...base,
+      backgroundColor: isDark ? "#303036" : "#EBF5FF"
+    }),
+    multiValueLabel: (base) => ({
+      ...base,
+      fontSize: 12,
+      color: isDark ? "#f3f4f6" : "#0087FA"
+    }),
+    multiValueRemove: (base) => ({
+      ...base,
+      color: isDark ? "#9ca3af" : "#0087FA",
+      "&:hover": { backgroundColor: "#0087FA", color: "#ffffff" }
+    }),
+    placeholder: (base) => ({
+      ...base,
+      fontSize: 14,
+      fontWeight: 400,
+      color: "#6b7280"
+    }),
+    input: (base) => ({
+      ...base,
+      fontSize: 14,
+      fontWeight: 400,
+      color: isDark ? "#f3f4f6" : "#111827"
+    }),
+    indicatorSeparator: () => ({ display: "none" }),
+    dropdownIndicator: (base) => ({
+      ...base,
+      padding: "0 6px",
+      color: isDark ? "#9ca3af" : "#6b7280"
+    }),
+    clearIndicator: (base) => ({
+      ...base,
+      padding: "0 4px",
+      color: isDark ? "#9ca3af" : "#6b7280",
+      cursor: "pointer",
+      "&:hover": { color: "#0087FA" }
+    }),
+    valueContainer: (base) => ({ ...base, padding: "2px 16px" })
+  };
+}
+var Dropdown = React17.forwardRef(
+  ({
+    id = "dropdown",
+    options,
+    placeholder = "Select...",
+    isDisabled = false,
+    isClearable = true,
+    isLoading = false,
+    error = false,
+    label,
+    heading,
+    isRequired = false,
+    name,
+    menuPortalTarget,
+    menuPosition = "absolute",
+    className,
+    style,
+    isMulti = false,
+    value,
+    onChange
+  }, ref) => {
+    const reactId = useId();
+    const isDark = isDarkMode();
+    const styles = useMemo(() => buildStyles(isDark, !!error), [isDark, error]);
+    const selectedValue = isMulti ? options.filter((o) => (value ?? []).includes(o.value)) : options.find((o) => o.value === value) ?? null;
+    const handleChange = (selected) => {
+      if (isMulti) {
+        onChange((selected ?? []).map((o) => o.value));
+      } else {
+        onChange((selected == null ? void 0 : selected.value) ?? null);
+      }
+    };
+    return /* @__PURE__ */ React17.createElement("div", { className: `flex flex-col gap-1 w-full ${className ?? ""}`, style, id: `${id}-div-1` }, heading && /* @__PURE__ */ React17.createElement("h3", { className: "text-lg font-semibold", id: `${id}-h3-1` }, heading), label && /* @__PURE__ */ React17.createElement(
+      "label",
+      {
+        htmlFor: reactId,
+        className: `font-[500] text-sm ${heading ? "text-[#737373]" : "text-black"} dark:text-white`,
+        id: `${id}-label-1`
+      },
+      label,
+      isRequired && /* @__PURE__ */ React17.createElement("span", { className: "text-red-500 ml-0.5", id: `${id}-span-1` }, "*")
+    ), /* @__PURE__ */ React17.createElement(
+      ReactSelect,
+      {
+        ref,
+        inputId: reactId,
+        name,
+        options,
+        value: selectedValue,
+        onChange: handleChange,
+        placeholder,
+        isDisabled,
+        isClearable,
+        isLoading,
+        isMulti,
+        styles,
+        menuPortalTarget,
+        menuPosition,
+        classNamePrefix: "jett-dropdown"
+      }
+    ));
+  }
+);
+Dropdown.displayName = "Dropdown";
+
+// src/Calendar/Calendar.tsx
+import React18, { useEffect as useEffect4, useState as useState6 } from "react";
+import {
+  DatePicker,
+  DateTimePicker,
+  DatesProvider
+} from "@mantine/dates";
+var Calendar = (props) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const {
+    minDate,
+    maxDate,
+    excludeDate,
+    firstDayOfWeek = 1,
+    locale,
+    size,
+    className,
+    error
+  } = props;
+  const isRange = props.mode === "range";
+  const isDateTime = props.mode === "datetime";
+  const datesProviderSettings = {
+    firstDayOfWeek,
+    consistentWeeks: true
+  };
+  if (locale) {
+    datesProviderSettings.locale = locale;
+  }
+  const anchorDate = isRange ? ((_a = props.value) == null ? void 0 : _a[0]) ?? ((_b = props.value) == null ? void 0 : _b[1]) ?? ((_c = props.defaultValue) == null ? void 0 : _c[0]) ?? ((_d = props.defaultValue) == null ? void 0 : _d[1]) ?? void 0 : !isDateTime ? props.value ?? props.defaultValue ?? void 0 : void 0;
+  const [displayDate, setDisplayDate] = useState6(anchorDate ?? void 0);
+  const anchorTime = isRange ? ((_f = (_e = props.value) == null ? void 0 : _e[0]) == null ? void 0 : _f.getTime()) ?? ((_h = (_g = props.value) == null ? void 0 : _g[1]) == null ? void 0 : _h.getTime()) : !isDateTime ? (_i = props.value) == null ? void 0 : _i.getTime() : void 0;
+  useEffect4(() => {
+    if (anchorTime !== void 0) {
+      setDisplayDate(new Date(anchorTime));
+    }
+  }, [anchorTime]);
+  const weekendColorStyle = {
+    "--mantine-color-red-6": "var(--mantine-color-text)"
+  };
+  if (isRange) {
+    const datePickerProps2 = {
+      type: "range",
+      value: props.value,
+      defaultValue: props.defaultValue,
+      onChange: props.onChange,
+      minDate,
+      maxDate,
+      excludeDate,
+      size,
+      className,
+      date: displayDate,
+      onDateChange: setDisplayDate,
+      style: weekendColorStyle
+    };
+    return /* @__PURE__ */ React18.createElement(DatesProvider, { settings: datesProviderSettings }, /* @__PURE__ */ React18.createElement(DatePicker, { ...datePickerProps2 }));
+  }
+  if (isDateTime) {
+    const dateTimePickerProps = {
+      value: props.value,
+      defaultValue: props.defaultValue,
+      onChange: props.onChange,
+      minDate,
+      maxDate,
+      excludeDate,
+      size,
+      className,
+      error,
+      style: weekendColorStyle
+    };
+    return /* @__PURE__ */ React18.createElement(DatesProvider, { settings: datesProviderSettings }, /* @__PURE__ */ React18.createElement(DateTimePicker, { ...dateTimePickerProps }));
+  }
+  const datePickerProps = {
+    value: props.value,
+    defaultValue: props.defaultValue,
+    onChange: props.onChange,
+    minDate,
+    maxDate,
+    excludeDate,
+    size,
+    className,
+    date: displayDate,
+    onDateChange: setDisplayDate,
+    style: weekendColorStyle
+  };
+  return /* @__PURE__ */ React18.createElement(DatesProvider, { settings: datesProviderSettings }, /* @__PURE__ */ React18.createElement(DatePicker, { ...datePickerProps }));
+};
+
 // src/Pagination/Pagination.jsx
-import React17, { useMemo, useState as useState6, useEffect as useEffect4 } from "react";
+import React19, { useMemo as useMemo2, useState as useState7, useEffect as useEffect5 } from "react";
 import { ChevronLeft, ChevronRight as ChevronRight2, ChevronsLeft, ChevronsRight } from "lucide-react";
 var Pagination = ({
   id = "pagination",
@@ -1648,26 +1883,26 @@ var Pagination = ({
   componentProps = {},
   ...restProps
 }) => {
-  const [internalCurrentPage, setInternalCurrentPage] = useState6(1);
-  const [internalItemsPerPage, setInternalItemsPerPage] = useState6(itemsPerPage);
+  const [internalCurrentPage, setInternalCurrentPage] = useState7(1);
+  const [internalItemsPerPage, setInternalItemsPerPage] = useState7(itemsPerPage);
   const isControlled = controlledCurrentPage !== void 0;
   const isItemsPerPageControlled = controlledOnItemsPerPageChange !== void 0;
   const currentPage = isControlled ? controlledCurrentPage : internalCurrentPage;
   const activeItemsPerPage = isItemsPerPageControlled ? itemsPerPage : internalItemsPerPage;
   const totalItems = legacyTotalItems !== void 0 ? legacyTotalItems : data.length;
-  const calculatedTotalPages = useMemo(() => {
+  const calculatedTotalPages = useMemo2(() => {
     if (totalItems > 0 && activeItemsPerPage > 0) {
       return Math.ceil(totalItems / activeItemsPerPage);
     }
     return 1;
   }, [totalItems, activeItemsPerPage]);
-  const paginatedData = useMemo(() => {
+  const paginatedData = useMemo2(() => {
     if (!data || data.length === 0) return [];
     const startIndex = (currentPage - 1) * activeItemsPerPage;
     const endIndex = startIndex + activeItemsPerPage;
     return data.slice(startIndex, endIndex);
   }, [data, currentPage, activeItemsPerPage]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!isControlled && currentPage > calculatedTotalPages && calculatedTotalPages > 0) {
       setInternalCurrentPage(1);
     }
@@ -1700,11 +1935,11 @@ var Pagination = ({
   const endItem = totalItems !== void 0 ? Math.min(currentPage * activeItemsPerPage, totalItems) : null;
   const renderContent = () => {
     if (Component) {
-      if (React17.isValidElement(Component)) {
+      if (React19.isValidElement(Component)) {
         const ComponentType = Component.type;
         const elementProps = Component.props;
         if (isTable) {
-          return /* @__PURE__ */ React17.createElement(
+          return /* @__PURE__ */ React19.createElement(
             CustomTable,
             {
               tableHeader,
@@ -1712,7 +1947,7 @@ var Pagination = ({
               id: `${id}-custom-table-1`
             },
             data.map((item, index) => {
-              return /* @__PURE__ */ React17.createElement(
+              return /* @__PURE__ */ React19.createElement(
                 ComponentType,
                 {
                   key: item.id || item._id || index,
@@ -1727,7 +1962,7 @@ var Pagination = ({
           );
         } else {
           if (isTable) {
-            return /* @__PURE__ */ React17.createElement(
+            return /* @__PURE__ */ React19.createElement(
               CustomTable,
               {
                 tableHeader,
@@ -1735,7 +1970,7 @@ var Pagination = ({
                 id: `${id}-custom-table-2`
               },
               paginatedData.map((item, index) => {
-                return /* @__PURE__ */ React17.createElement(
+                return /* @__PURE__ */ React19.createElement(
                   ComponentType,
                   {
                     key: item.id || item._id || index,
@@ -1751,7 +1986,7 @@ var Pagination = ({
           }
         }
       } else {
-        return /* @__PURE__ */ React17.createElement(
+        return /* @__PURE__ */ React19.createElement(
           CustomTable,
           {
             tableHeader,
@@ -1759,7 +1994,7 @@ var Pagination = ({
             id: `${id}-custom-table-3`
           },
           paginatedData.map((item, index) => {
-            return /* @__PURE__ */ React17.createElement(
+            return /* @__PURE__ */ React19.createElement(
               Component,
               {
                 key: item.id || item._id || index,
@@ -1775,7 +2010,7 @@ var Pagination = ({
     }
     return null;
   };
-  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(React17.Fragment, null, renderContent()), /* @__PURE__ */ React17.createElement("div", { className: "flex flex-col sm:flex-row justify-between items-center gap-4 px-4 py-3 border-t border-[#e5e5e5] dark:border-[#303036] bg-white dark:bg-[#18181b] z-10", id: `${id}-div-1` }, totalItems !== void 0 && /* @__PURE__ */ React17.createElement("div", { className: "text-sm text-[#737373] dark:text-white", id: `${id}-div-2` }, "Showing ", startItem, " to ", endItem, " of ", totalItems, " entries"), /* @__PURE__ */ React17.createElement("div", { className: "flex items-center gap-2", id: `${id}-div-3` }, /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(React19.Fragment, null, renderContent()), /* @__PURE__ */ React19.createElement("div", { className: "flex flex-col sm:flex-row justify-between items-center gap-4 px-4 py-3 border-t border-[#e5e5e5] dark:border-[#303036] bg-white dark:bg-[#18181b] z-10", id: `${id}-div-1` }, totalItems !== void 0 && /* @__PURE__ */ React19.createElement("div", { className: "text-sm text-[#737373] dark:text-white", id: `${id}-div-2` }, "Showing ", startItem, " to ", endItem, " of ", totalItems, " entries"), /* @__PURE__ */ React19.createElement("div", { className: "flex items-center gap-2", id: `${id}-div-3` }, /* @__PURE__ */ React19.createElement(
     "button",
     {
       onClick: () => handlePageChange(1),
@@ -1784,8 +2019,8 @@ var Pagination = ({
       title: "First page",
       id: `${id}-button-1`
     },
-    /* @__PURE__ */ React17.createElement(ChevronsLeft, { size: 16 })
-  ), /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React19.createElement(ChevronsLeft, { size: 16 })
+  ), /* @__PURE__ */ React19.createElement(
     "button",
     {
       onClick: () => handlePageChange(currentPage - 1),
@@ -1794,8 +2029,8 @@ var Pagination = ({
       title: "Previous page",
       id: `${id}-button-2`
     },
-    /* @__PURE__ */ React17.createElement(ChevronLeft, { size: 16 })
-  ), getPageNumbers().map((pageNum) => /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React19.createElement(ChevronLeft, { size: 16 })
+  ), getPageNumbers().map((pageNum) => /* @__PURE__ */ React19.createElement(
     "button",
     {
       key: pageNum,
@@ -1804,7 +2039,7 @@ var Pagination = ({
       id: `${id}-button-3`
     },
     pageNum
-  )), /* @__PURE__ */ React17.createElement(
+  )), /* @__PURE__ */ React19.createElement(
     "button",
     {
       onClick: () => handlePageChange(currentPage + 1),
@@ -1813,8 +2048,8 @@ var Pagination = ({
       title: "Next page",
       id: `${id}-button-4`
     },
-    /* @__PURE__ */ React17.createElement(ChevronRight2, { size: 16 })
-  ), /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React19.createElement(ChevronRight2, { size: 16 })
+  ), /* @__PURE__ */ React19.createElement(
     "button",
     {
       onClick: () => handlePageChange(calculatedTotalPages),
@@ -1823,11 +2058,12 @@ var Pagination = ({
       title: "Last page",
       id: `${id}-button-5`
     },
-    /* @__PURE__ */ React17.createElement(ChevronsRight, { size: 16 })
+    /* @__PURE__ */ React19.createElement(ChevronsRight, { size: 16 })
   ))));
 };
 export {
   AppSideBar,
+  Calendar,
   Chip,
   CustomAutocomplete,
   CustomButton,
@@ -1839,6 +2075,7 @@ export {
   CustomTable,
   CustomTextarea,
   CustomUpload,
+  Dropdown,
   Pagination,
   ProgressBar,
   RightSheet

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jett.admin.npmpackage",
-  "version": "2.0.22",
+  "version": "2.0.24",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "exports": {
@@ -22,11 +22,16 @@
     "react-dom": ">=18"
   },
   "dependencies": {
+    "@mantine/core": "^7.17.8",
+    "@mantine/dates": "^7.17.8",
+    "@mantine/hooks": "^7.17.8",
     "@tailwindcss/postcss": "^4.1.13",
     "clsx": "^2.1.1",
+    "dayjs": "^1.11.23",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.544.0",
     "node-forge": "^1.4.0",
+    "react-select": "^5.10.2",
     "tailwind-merge": "^3.3.1",
     "tsup": "^8.5.0"
   },