master-components-react-ts 1.0.9 → 1.0.11

package/dist/master-components-react-ts.es10.js

@@ -0,0 +1,116 @@
+import { j as jsxRuntimeExports } from "./master-components-react-ts.es17.js";
+import style from "./master-components-react-ts.es40.js";
+import { IconCheckCircle } from "./master-components-react-ts.es41.js";
+import { IconSave } from "./master-components-react-ts.es42.js";
+import { IconTrash } from "./master-components-react-ts.es43.js";
+import { useRef, useEffect } from "react";
+import { IconCloseBlack } from "./master-components-react-ts.es32.js";
+const Popup = ({
+  visible,
+  template,
+  options,
+  children,
+  onClickOutside,
+  onClose,
+  widthType,
+  // "horizontal"
+  modalOverlayStyle,
+  popupContainerStyle,
+  templateWrapperStyle,
+  popupHeaderStyle,
+  popupTitleStyle,
+  closeButtonStyle
+}) => {
+  const _getType = () => {
+    if (!options || !options?.type) return;
+    switch (String(options?.type)) {
+      case "delete": {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(IconTrash, {});
+      }
+      case "unsaved": {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(IconSave, {});
+      }
+      case "success": {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(IconCheckCircle, {});
+      }
+    }
+  };
+  const ClickClose = () => {
+    if (onClose && typeof onClose === "function") {
+      onClose();
+    }
+  };
+  const componentRef = useRef(null);
+  const handleClick = (event) => {
+    const clickedElement = event.target;
+    if (clickedElement === componentRef.current) {
+      if (onClickOutside && typeof onClickOutside === "function") {
+        onClickOutside();
+      }
+    }
+  };
+  useEffect(() => {
+    document.addEventListener("click", handleClick);
+    return () => {
+      document.removeEventListener("click", handleClick);
+    };
+  }, []);
+  return visible && /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      ref: componentRef,
+      style: modalOverlayStyle ?? {},
+      className: `
+                    ${style.modalOverlay}
+                    ${options && options?.mode === "drawer" ? style.popupDrawerMode : ""}
+                `,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          style: popupContainerStyle ?? {},
+          className: `
+                        mcPopup_global
+                        ${style.popupContainer}
+                        ${options?.type ? style.withOptions : ""}
+                        ${widthType === "horizontal" ? style.horizontal : ""}
+                    `,
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.closeButton, style: closeButtonStyle ?? {}, onClick: ClickClose, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              IconCloseBlack,
+              {
+                color: "#131314"
+              }
+            ) }),
+            (options?.title || options?.description || options?.type) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${style.popupHeader}`, style: popupHeaderStyle ?? {}, children: [
+              _getType() && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.typeIcon, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "div",
+                {
+                  style: { backgroundColor: options?.type === "success" ? "#DCFAE6" : options?.type === "unsaved" ? "#FEF0C7" : "#FEE4E2" },
+                  className: style.icon,
+                  children: _getType()
+                }
+              ) }),
+              options && options?.title && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.popupTitle, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("h2", { style: popupTitleStyle ?? {}, children: [
+                " ",
+                options?.title ?? "",
+                " "
+              ] }) }),
+              options && options?.description && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.popupDescription, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { children: [
+                " ",
+                options?.description ?? "",
+                " "
+              ] }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.templateWrapper, style: templateWrapperStyle ?? {}, children: [
+              template && template,
+              children && children
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  Popup as default
+};

package/dist/master-components-react-ts.es11.js

@@ -0,0 +1,10 @@
+import { ToastContext } from "./master-components-react-ts.es12.js";
+import { useContext } from "react";
+const createNotificationToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) throw new Error("createNotificationToast must be used within ToastProvider");
+  return context.showToast;
+};
+export {
+  createNotificationToast as default
+};

package/dist/master-components-react-ts.es12.js

@@ -0,0 +1,57 @@
+import { j as jsxRuntimeExports } from "./master-components-react-ts.es17.js";
+import { createContext, useState, useCallback } from "react";
+import NotificationToast from "./master-components-react-ts.es44.js";
+import style from "./master-components-react-ts.es45.js";
+const ToastContext = createContext(null);
+let idCounter = 0;
+const ToastProvider = ({ children }) => {
+  const [toasts, setToasts] = useState([]);
+  const showToast = (props) => {
+    setToasts((prev) => {
+      const max = props.max ?? Infinity;
+      if (prev.length >= max) return prev;
+      const id = idCounter++;
+      setTimeout(() => {
+        setToasts((prev2) => prev2.filter((t) => t.id !== id));
+      }, props.timeout || 4e3);
+      return [...prev, { id, props }];
+    });
+  };
+  const getPosition = useCallback(() => {
+    if (toasts.length > 0) {
+      switch (toasts[0]?.props?.position) {
+        case "top-left":
+          return { top: "20px", left: "20px" };
+        case "top-right":
+          return { top: "20px", right: "20px" };
+        case "bottom-left":
+          return { bottom: "20px", left: "20px" };
+        case "bottom-right":
+          return { bottom: "20px", right: "20px" };
+        case "top-center":
+          return { top: "20px", left: "50%", transform: "translateX(-50%)" };
+        case "bottom-center":
+          return { bottom: "20px", left: "50%", transform: "translateX(-50%)" };
+        default:
+          return {};
+      }
+    }
+  }, [toasts.length]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(ToastContext.Provider, { value: { showToast }, children: [
+    children,
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.toastContainer, style: getPosition(), children: toasts.map(({ id, props }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      NotificationToast,
+      {
+        ...props,
+        onClose: () => {
+          setToasts((prev) => prev.filter((t) => t.id !== id));
+        }
+      },
+      id
+    )) })
+  ] });
+};
+export {
+  ToastContext,
+  ToastProvider as default
+};

package/dist/master-components-react-ts.es13.js

@@ -0,0 +1,172 @@
+import { j as jsxRuntimeExports } from "./master-components-react-ts.es17.js";
+import { useRef, useState, useEffect } from "react";
+import style from "./master-components-react-ts.es46.js";
+import FormInput from "./master-components-react-ts.es3.js";
+import { IconArrowUp } from "./master-components-react-ts.es33.js";
+import { IconCloseCircle } from "./master-components-react-ts.es22.js";
+import customParseFormat from "./master-components-react-ts.es47.js";
+import dayjs from "dayjs";
+import MainButton from "./master-components-react-ts.es2.js";
+dayjs.extend(customParseFormat);
+const TimePicker = ({
+  value,
+  defaultTimeType = "24",
+  defaultAmPm = "AM",
+  withConfirm = true,
+  mode = "single",
+  onChange,
+  onFocus,
+  onBlur,
+  ...rest
+}) => {
+  const ComponentRef = useRef(null);
+  const DropdownRef = useRef(null);
+  const [IsFocused, setIsFocused] = useState(false);
+  const [TimeType, setTimeType] = useState(defaultTimeType);
+  const hours12 = Array.from({ length: 12 }, (_, index) => index < 10 ? `0${index}` : `${index}`);
+  const hours24 = Array.from({ length: 24 }, (_, index) => index < 10 ? `0${index}` : `${index}`);
+  const minutes = Array.from({ length: 60 }, (_, index) => index < 10 ? `0${index}` : `${index}`);
+  const [Value, setValue] = useState("");
+  const [Minutes, setMinutes] = useState(null);
+  const [Hours, setHours] = useState(null);
+  const [AmPm, setAmPm] = useState(defaultAmPm);
+  const CalculatePos = () => {
+    const componentEl = ComponentRef.current;
+    const dropdownEl = DropdownRef.current;
+    if (!dropdownEl || !componentEl) return;
+    const componentRect = componentEl.getBoundingClientRect();
+    const windowHeight = window.innerHeight;
+    dropdownEl.style.position = "fixed";
+    dropdownEl.style.left = `${componentRect.left + window.pageXOffset}px`;
+    if (componentRect.bottom + dropdownEl.offsetHeight > windowHeight) {
+      dropdownEl.style.top = `${window.scrollY + componentRect.top - dropdownEl.offsetHeight + 18}px`;
+      dropdownEl.style.bottom = "unset";
+    } else {
+      dropdownEl.style.top = `${window.scrollY + componentRect.bottom + 8}px`;
+      dropdownEl.style.bottom = "unset";
+    }
+  };
+  const Focus = () => {
+    onFocus?.();
+  };
+  const Clear = () => {
+    setValue("");
+    setHours(null);
+    setMinutes(null);
+    setAmPm("AM");
+  };
+  useEffect(() => {
+    if (value && value.length > 0) {
+      setValue(value);
+    }
+  }, [value]);
+  useEffect(() => {
+    if (!Hours && !Minutes) return;
+    const hour = parseInt(Hours ?? "0", 10);
+    const minute = parseInt(Minutes ?? "0", 10);
+    const adjustedHour = TimeType === "12" ? AmPm === "PM" && hour < 12 ? hour + 12 : AmPm === "AM" && hour === 12 ? 0 : hour : hour;
+    const formattedTime = dayjs().hour(adjustedHour).minute(minute).format(TimeType === "12" ? "hh:mm A" : "HH:mm");
+    setValue(formattedTime);
+    if (!withConfirm) {
+      onChange?.(formattedTime);
+    }
+  }, [Hours, Minutes, AmPm, TimeType]);
+  const isInitialRender = useRef(true);
+  useEffect(() => {
+    if (isInitialRender.current) {
+      isInitialRender.current = false;
+      return;
+    }
+    if (!IsFocused) {
+      onBlur?.();
+    }
+  }, [IsFocused]);
+  useEffect(() => {
+    CalculatePos();
+  }, [ComponentRef, IsFocused]);
+  useEffect(() => {
+    const ClickHandler = (event) => {
+      if (!ComponentRef.current || !DropdownRef.current) return;
+      if (event.composedPath().includes(ComponentRef.current) || event.composedPath().includes(DropdownRef.current)) return;
+      setIsFocused(false);
+    };
+    const ScrollHandler = (event) => {
+      if (!ComponentRef.current || DropdownRef.current) return;
+      setIsFocused(false);
+    };
+    document.addEventListener("click", ClickHandler);
+    document.addEventListener("wheel", ScrollHandler);
+    return () => {
+      document.removeEventListener("click", ClickHandler);
+      document.removeEventListener("wheel", ScrollHandler);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${style.timepickerWrapper} ${IsFocused ? style.focused : ""}`, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: ComponentRef, className: style.timepickerInputWrapper, onClick: () => (setIsFocused((state) => !state), CalculatePos()), onFocus: Focus, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      FormInput,
+      {
+        ...rest,
+        onFocusChange: (value2) => setIsFocused(value2),
+        customFocus: IsFocused,
+        withActive: false,
+        value: Value,
+        toggleFocus: true,
+        formInputStyle: { cursor: "pointer" },
+        rightSlot: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${style.dropdownRightIcon} ${IsFocused ? style.focused : ""}`, children: [
+          Value && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                Clear();
+              },
+              className: style.dropdownRightIconClose,
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconCloseCircle, {})
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.dropdownRightIconArrow, children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconArrowUp, {}) })
+        ] }),
+        readOnly: true,
+        forDropdown: true
+      }
+    ) }),
+    IsFocused && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: DropdownRef, className: style.timepickerDropdownWrapper, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.timepickerDropdownHeader, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.timepickerDropdownHeaderButtons, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "p",
+          {
+            className: TimeType === "12" ? style.active : "",
+            onClick: () => {
+              Clear();
+              setTimeType("12");
+            },
+            children: "AM -PM"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "p",
+          {
+            className: TimeType === "24" ? style.active : "",
+            onClick: () => {
+              Clear();
+              setTimeType("24");
+            },
+            children: "24 Hours"
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.timepickerDropdownBody, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.timepickerDropdownBodyHours, children: (TimeType === "12" ? hours12 : hours24).map((hour) => /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: Hours === hour || Value?.split(":")[0] === hour ? style.active : "", onClick: () => setHours(hour), children: hour }, hour)) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.timepickerDropdownBodyMinutes, children: minutes.map((minute) => /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: Minutes === minute || Value?.split(":")[1] === minute ? style.active : "", onClick: () => setMinutes(minute), children: minute }, minute)) }),
+        TimeType === "12" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.timepickerDropdownBodyAmPm, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: AmPm === "AM" ? style.active : "", onClick: () => setAmPm("AM"), children: "AM" }, "AM"),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: AmPm === "PM" ? style.active : "", onClick: () => setAmPm("PM"), children: "PM" }, "PM")
+        ] })
+      ] }),
+      withConfirm && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.timepickerDropdownFooter, children: /* @__PURE__ */ jsxRuntimeExports.jsx(MainButton, { label: "Confirm time", onClick: () => onChange?.(Value) }) })
+    ] })
+  ] });
+};
+export {
+  TimePicker as default
+};

package/dist/master-components-react-ts.es14.js

@@ -0,0 +1,211 @@
+import { j as jsxRuntimeExports } from "./master-components-react-ts.es17.js";
+import { useState, useRef, useEffect } from "react";
+import dayjs from "dayjs";
+import style from "./master-components-react-ts.es48.js";
+import Calendar from "./master-components-react-ts.es49.js";
+import { IconCalendar } from "./master-components-react-ts.es50.js";
+import customParseFormat from "./master-components-react-ts.es47.js";
+import { useNamespace } from "./master-components-react-ts.es29.js";
+import FormInput from "./master-components-react-ts.es3.js";
+import { IconCloseCircle } from "./master-components-react-ts.es22.js";
+dayjs.extend(customParseFormat);
+const DatePicker = ({
+  defaultValue,
+  valueFormat = "DD-MM-YYYY",
+  onChange,
+  onBlur,
+  onFocus,
+  customYears,
+  fixedDropdown = true,
+  disabledDatesFrom,
+  disabledDatesTill,
+  disabledDatesRange,
+  datepickerStyle,
+  datepickerLabelStyle,
+  requiredStyle,
+  datepickerHelperTextStyle,
+  selectedStyle,
+  endDateStyle,
+  startDateStyle,
+  inRangeStyle,
+  otherMonthStyle,
+  todayStyle,
+  weekDayStyle,
+  quickPickStyle,
+  monthStyle,
+  quickPick,
+  mode = "single",
+  pickerType = "single",
+  disabled = false,
+  ...rest
+}) => {
+  const namespace = useNamespace();
+  const [IsFocused, setIsFocused] = useState(false);
+  const [Value, setValue] = useState("");
+  const DefaultValue = useRef({ state: false, value: "" });
+  const CalendarRef = useRef(null);
+  const [CurrentMonth, setCurrentMonth] = useState(() => {
+    const thisYear = dayjs().year().toString();
+    if (customYears?.length) {
+      return customYears.includes(thisYear) ? dayjs() : dayjs(`${Math.min(...customYears.map(Number))}-01-01`);
+    }
+    return dayjs();
+  });
+  useEffect(() => {
+    const thisYear = dayjs().year().toString();
+    if (customYears?.length) {
+      setCurrentMonth(customYears.includes(thisYear) ? dayjs() : dayjs(`${Math.min(...customYears.map(Number))}-01-01`));
+    }
+  }, [customYears]);
+  const [SelectedDate, setSelectedDate] = useState("");
+  const [RangeSelection, setRangeSelection] = useState({
+    start: null,
+    end: null
+  });
+  const ComponentRef = useRef(null);
+  const Change = (value, singleQuickPick, withDefault) => {
+    let dateValue = "";
+    let objValue = { start: "", end: "" };
+    if (mode === "single" || typeof value === "string") {
+      dateValue = value;
+      setValue(dateValue);
+    }
+    if (mode !== "single" || typeof value !== "string") {
+      dateValue = `${dayjs(value?.start ?? "").format(valueFormat)} / ${value?.end ? dayjs(value?.end).format(valueFormat) : ""}`;
+      objValue.start = dayjs(value?.start ?? "").format(valueFormat);
+      objValue.end = value?.end ? dayjs(value?.end).format(valueFormat) : "";
+      setValue(dateValue);
+    }
+    if (value?.end) {
+      setIsFocused(false);
+    }
+    if (onChange && typeof onChange === "function" && !withDefault) {
+      onChange(objValue.start !== "" ? objValue : dateValue);
+      DefaultValue.current.value = objValue.start !== "" ? objValue : dateValue;
+    }
+  };
+  const Clear = (e) => {
+    e.stopPropagation();
+    setSelectedDate("");
+    DefaultValue.current.value = "";
+    setValue("");
+    setRangeSelection({
+      start: null,
+      end: null
+    });
+    if (onChange && typeof onChange === "function") {
+      onChange("");
+    }
+  };
+  const ClickHandler = (event) => {
+    if (!ComponentRef.current) return;
+    if (event.composedPath().includes(ComponentRef.current)) return;
+    setIsFocused(false);
+  };
+  const ScrollHandler = (event) => {
+    if (!ComponentRef.current || !CalendarRef.current) return;
+    if (event.composedPath().includes(ComponentRef.current) || event.composedPath().includes(CalendarRef.current)) return;
+    setIsFocused(false);
+  };
+  const CalculatePos = () => {
+    if (!ComponentRef.current || !CalendarRef.current) return;
+    const componentEl = ComponentRef.current;
+    const calendarEl = CalendarRef.current;
+    if (!calendarEl || !componentEl) return;
+    const componentRect = componentEl.getBoundingClientRect();
+    const windowHeight = window.innerHeight;
+    const windowWidth = window.innerWidth;
+    calendarEl.style.position = "fixed";
+    if (componentRect.bottom + calendarEl.offsetHeight > windowHeight) {
+      calendarEl.style.top = `${window.scrollY + componentRect.top - calendarEl.offsetHeight - 8}px`;
+      calendarEl.style.bottom = "unset";
+    } else {
+      calendarEl.style.top = `${window.scrollY + componentRect.bottom + 8}px`;
+      calendarEl.style.bottom = "unset";
+    }
+    if (componentRect.right + componentRect.width > windowWidth - 120) {
+      calendarEl.style.left = `${window.scrollX + componentRect.left + componentRect.width - calendarEl.offsetWidth}px`;
+    } else {
+      calendarEl.style.left = `${window.scrollX + componentRect.left}px`;
+    }
+  };
+  useEffect(() => {
+    if (defaultValue && DefaultValue.current.value === "") {
+      let value = Array.isArray(defaultValue) ? {
+        start: dayjs(defaultValue[0], valueFormat),
+        end: defaultValue.length > 1 ? dayjs(defaultValue[1], valueFormat) : ""
+      } : dayjs(defaultValue, valueFormat).format(valueFormat);
+      DefaultValue.current.value = defaultValue;
+      DefaultValue.current.state = true;
+      if (value) {
+        Change(value, false, true);
+      }
+    }
+  }, []);
+  useEffect(() => {
+    if (IsFocused) {
+      CalculatePos();
+    }
+  }, [CalendarRef, IsFocused]);
+  useEffect(() => {
+    document.addEventListener("click", ClickHandler);
+    document.addEventListener("wheel", ScrollHandler);
+    return () => {
+      document.removeEventListener("click", ClickHandler);
+      document.removeEventListener("wheel", ScrollHandler);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${namespace === "namespaceHr" ? style.namespaceHr : ""} ${style.datepickerContainer}`, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: ComponentRef, className: style.datepickerInputWrapper, onClick: () => (setIsFocused((state) => !state), CalculatePos()), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      FormInput,
+      {
+        ...rest,
+        customFocus: IsFocused,
+        withActive: false,
+        value: Value,
+        toggleFocus: true,
+        formInputStyle: { cursor: "pointer" },
+        leftSlot: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.datepickerLeftIcon, children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconCalendar, {}) }),
+        rightSlot: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${style.datepickerRightIcon}`, onClick: Clear, children: Value && /* @__PURE__ */ jsxRuntimeExports.jsx(IconCloseCircle, {}) }),
+        readOnly: true
+      }
+    ) }),
+    IsFocused && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Calendar,
+      {
+        namespace,
+        defaultValue: DefaultValue.current,
+        CalendarRef,
+        disabledDatesFrom,
+        disabledDatesTill,
+        disabledDatesRange,
+        valueFormat,
+        onChange: (value) => Change(value, false, false),
+        customYears,
+        CurrentMonth,
+        setCurrentMonth,
+        SelectedDate,
+        setSelectedDate,
+        IsFocused,
+        setIsFocused,
+        quickPick,
+        mode,
+        RangeSelection,
+        setRangeSelection,
+        pickerType,
+        selectedStyle,
+        endDateStyle,
+        startDateStyle,
+        inRangeStyle,
+        otherMonthStyle,
+        todayStyle,
+        weekDayStyle,
+        quickPickStyle,
+        monthStyle
+      }
+    )
+  ] });
+};
+export {
+  DatePicker as default
+};

package/dist/master-components-react-ts.es15.js

@@ -0,0 +1,8 @@
+import { j as jsxRuntimeExports } from "./master-components-react-ts.es17.js";
+import style from "./master-components-react-ts.es51.js";
+const Skeleton = ({ type = "text", customStyle, children }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: customStyle ?? {}, className: ` ${style.skeleton} ${style[type] || ""}`, children });
+};
+export {
+  Skeleton as default
+};

package/dist/master-components-react-ts.es16.js

@@ -0,0 +1,74 @@
+import { j as jsxRuntimeExports } from "./master-components-react-ts.es17.js";
+import style from "./master-components-react-ts.es52.js";
+import { IconArrowUp } from "./master-components-react-ts.es33.js";
+import { useState, useRef, useEffect } from "react";
+const ActionDropdown = ({ title, data, onSelect }) => {
+  const [Collapsed, setCollapsed] = useState(false);
+  const DropdownRef = useRef(null);
+  const ListRef = useRef(null);
+  const [Selected, setSelected] = useState(null);
+  const HandleSelect = (item) => {
+    setSelected(item);
+    onSelect?.(item);
+    setCollapsed(false);
+  };
+  const CalculatePos = () => {
+    const componentEl = DropdownRef.current;
+    const dropdownEl = ListRef.current;
+    if (!dropdownEl || !componentEl) return;
+    const componentRect = componentEl.getBoundingClientRect();
+    const windowHeight = window.innerHeight;
+    dropdownEl.style.position = "fixed";
+    dropdownEl.style.width = componentRect.width + "px";
+    dropdownEl.style.left = `${componentRect.left + window.pageXOffset}px`;
+    if (componentRect.bottom + dropdownEl.offsetHeight > windowHeight) {
+      dropdownEl.style.top = `${window.scrollY + componentRect.top - dropdownEl.offsetHeight - 4}px`;
+      dropdownEl.style.bottom = "unset";
+    } else {
+      dropdownEl.style.top = `${window.scrollY + componentRect.bottom + 8}px`;
+      dropdownEl.style.bottom = "unset";
+    }
+  };
+  useEffect(() => {
+    CalculatePos();
+  }, [DropdownRef, Collapsed]);
+  useEffect(() => {
+    const ClickHandler = (event) => {
+      if (!DropdownRef.current) return;
+      if (event.composedPath().includes(DropdownRef.current)) return;
+      setCollapsed(false);
+    };
+    const ScrollHandler = (event) => {
+      if (!DropdownRef.current || !ListRef.current) return;
+      if (ListRef.current.contains(event.target)) return;
+      setCollapsed(false);
+    };
+    document.addEventListener("click", ClickHandler);
+    document.addEventListener("wheel", ScrollHandler);
+    return () => {
+      document.removeEventListener("click", ClickHandler);
+      document.removeEventListener("wheel", ScrollHandler);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${style.actionDropdownContainer} ${Collapsed ? style.collapsed : ""}`, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: DropdownRef, className: style.actionDropdownContent, onClick: () => setCollapsed((state) => !state), children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { title, className: style.actionDropdownTitle, children: Selected?.label || title }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.actionDropdownIcon, children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconArrowUp, { width: "10", height: "6", color: "#131314" }) })
+    ] }),
+    Collapsed && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { ref: ListRef, onClick: (e) => e.stopPropagation(), className: style.actionDropdownList, children: data.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "li",
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+          HandleSelect(item);
+        },
+        className: `${style.actionDropdownItem} ${Selected?.id === item.id ? style.selected : ""}`,
+        children: item.label
+      },
+      item.id
+    )) }, data.length)
+  ] });
+};
+export {
+  ActionDropdown as default
+};

package/dist/master-components-react-ts.es17.js

@@ -0,0 +1,12 @@
+import { __module as jsxRuntime } from "./master-components-react-ts.es53.js";
+import { __require as requireReactJsxRuntime_production } from "./master-components-react-ts.es54.js";
+import { __require as requireReactJsxRuntime_development } from "./master-components-react-ts.es55.js";
+if (process.env.NODE_ENV === "production") {
+  jsxRuntime.exports = requireReactJsxRuntime_production();
+} else {
+  jsxRuntime.exports = requireReactJsxRuntime_development();
+}
+var jsxRuntimeExports = jsxRuntime.exports;
+export {
+  jsxRuntimeExports as j
+};