master-components-react-ts 2.1.2 → 2.1.3

package/dist/components/Popup/Popup.js

@@ -0,0 +1,116 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import style from "./Popup.module.scss.js";
+import { IconCheckCircle } from "../../assets/Icons/IconCheckCircle.js";
+import { IconSave } from "../../assets/Icons/IconSave.js";
+import { IconTrash } from "../../assets/Icons/IconTrash.js";
+import { useRef, useEffect } from "react";
+import { IconCloseBlack } from "../../assets/Icons/IconClose.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/components/Popup/Popup.module.scss.js

@@ -0,0 +1,41 @@
+const modalOverlay = "Popup-module__modalOverlay";
+const popupDrawerMode = "Popup-module__popupDrawerMode";
+const popupContainer = "Popup-module__popupContainer";
+const closeButton = "Popup-module__closeButton";
+const withOptions = "Popup-module__withOptions";
+const horizontal = "Popup-module__horizontal";
+const popupHeader = "Popup-module__popupHeader";
+const popupTitle = "Popup-module__popupTitle";
+const popupDescription = "Popup-module__popupDescription";
+const typeIcon = "Popup-module__typeIcon";
+const icon = "Popup-module__icon";
+const templateWrapper = "Popup-module__templateWrapper";
+const style = {
+  modalOverlay,
+  popupDrawerMode,
+  popupContainer,
+  closeButton,
+  withOptions,
+  horizontal,
+  popupHeader,
+  popupTitle,
+  popupDescription,
+  typeIcon,
+  icon,
+  templateWrapper
+};
+export {
+  closeButton,
+  style as default,
+  horizontal,
+  icon,
+  modalOverlay,
+  popupContainer,
+  popupDescription,
+  popupDrawerMode,
+  popupHeader,
+  popupTitle,
+  templateWrapper,
+  typeIcon,
+  withOptions
+};

package/dist/components/Radio/Radio.js

@@ -0,0 +1,46 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import style from "./Radio.module.scss.js";
+import { useState } from "react";
+import { useNamespace } from "../../context/NamespaceContext.js";
+import { IconRadioCheckedDisabled } from "../../assets/Icons/IconRadioCheckedDisabled.js";
+import { IconRadioChecked } from "../../assets/Icons/IconRadioChecked.js";
+import { IconRadioUncheckedDisabled } from "../../assets/Icons/IconRadioUncheckedDisabled.js";
+import { IconRadioUnchecked } from "../../assets/Icons/IconRadioUnchecked.js";
+const Radio = ({ checked, change, disabled, required, withUncheckState = false, radioType = "default" }) => {
+  useNamespace();
+  useState(false);
+  const onChange = () => {
+    if (!disabled) {
+      if (withUncheckState) {
+        change?.(!checked);
+      } else {
+        change?.(true);
+      }
+    }
+  };
+  const RadioIcon = () => {
+    let icon = null;
+    let color = disabled ? "#95969C" : radioType === "error" ? "#E3292F" : "#0058FF";
+    if (checked) {
+      if (disabled) {
+        icon = /* @__PURE__ */ jsxRuntimeExports.jsx(IconRadioCheckedDisabled, { color });
+      } else {
+        icon = /* @__PURE__ */ jsxRuntimeExports.jsx(IconRadioChecked, { color });
+      }
+    } else {
+      if (disabled) {
+        icon = /* @__PURE__ */ jsxRuntimeExports.jsx(IconRadioUncheckedDisabled, { color });
+      } else {
+        icon = /* @__PURE__ */ jsxRuntimeExports.jsx(IconRadioUnchecked, { color });
+      }
+    }
+    return icon;
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: style.radioWrapper, style: { cursor: disabled ? "not-allowed" : "pointer" }, onClick: onChange, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("input", { type: "radio", checked: true, readOnly: true, hidden: true, disabled: disabled ?? false, required }),
+    RadioIcon()
+  ] });
+};
+export {
+  Radio as default
+};

package/dist/components/Radio/Radio.module.scss.js

@@ -0,0 +1,8 @@
+const radioWrapper = "Radio-module__radioWrapper";
+const style = {
+  radioWrapper
+};
+export {
+  style as default,
+  radioWrapper
+};

package/dist/components/Skeleton/Skeleton.js

@@ -0,0 +1,8 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import style from "./Skeleton.module.scss.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/components/Skeleton/Skeleton.module.scss.js

@@ -0,0 +1,20 @@
+const skeleton = "Skeleton-module__skeleton";
+const shimmer = "Skeleton-module__shimmer";
+const text = "Skeleton-module__text";
+const avatar = "Skeleton-module__avatar";
+const dark = "Skeleton-module__dark";
+const style = {
+  skeleton,
+  shimmer,
+  text,
+  avatar,
+  dark
+};
+export {
+  avatar,
+  dark,
+  style as default,
+  shimmer,
+  skeleton,
+  text
+};

package/dist/components/Textarea/Textarea.js

@@ -0,0 +1,149 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import { useRef, useState, useEffect } from "react";
+import style from "./Textarea.module.scss.js";
+import { IconCloseBackground } from "../../assets/Icons/IconCloseBackground.js";
+const Textarea = ({
+  placeholder,
+  label,
+  cols = 30,
+  rows = 5,
+  value,
+  inputState = { error: false, success: true },
+  maxLength = 20,
+  withFocus = true,
+  withActive = true,
+  withResize = true,
+  withClose = true,
+  onChange,
+  onFocus,
+  onBlur,
+  disabled,
+  required,
+  textareaContainerStyle,
+  textareaLabelStyle,
+  requiredStyle,
+  labelSlot,
+  textareaFooterStyle
+}) => {
+  const TextareaRef = useRef(null);
+  const [Focused, setFocused] = useState(false);
+  const [Active, setActive] = useState(false);
+  const Change = (e) => {
+    let value2 = e.target.value;
+    if (onChange && typeof onChange === "function") {
+      onChange(value2);
+    }
+  };
+  const iconSlot = (icon) => {
+    return icon;
+  };
+  const Focus = (e) => {
+    setFocused(true);
+    if (onFocus && typeof onFocus === "function") {
+      onFocus(e);
+    }
+  };
+  const Blur = (e) => {
+    setFocused(false);
+    if (onBlur && typeof onBlur === "function") {
+      onBlur(e);
+    }
+  };
+  let isManuallyResized = false;
+  useEffect(() => {
+    if (!TextareaRef.current) return;
+    const textarea = TextareaRef.current.querySelector("textarea");
+    if (!textarea) return;
+    let isUserResizing = false;
+    const onMouseDown = (e) => {
+      const bounds = textarea.getBoundingClientRect();
+      const isNearBottomRight = e.clientX > bounds.right - 20 && e.clientY > bounds.bottom - 20;
+      if (isNearBottomRight) {
+        isUserResizing = true;
+      }
+    };
+    const observer = new ResizeObserver(() => {
+      if (isUserResizing) {
+        isManuallyResized = true;
+        isUserResizing = false;
+      }
+    });
+    textarea.addEventListener("mousedown", onMouseDown);
+    observer.observe(textarea);
+    return () => {
+      textarea.removeEventListener("mousedown", onMouseDown);
+      observer.disconnect();
+    };
+  }, []);
+  const adjustHeight = () => {
+    if (!TextareaRef.current) return;
+    const el = TextareaRef.current.querySelector("textarea");
+    if (!el || isManuallyResized) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  };
+  useEffect(() => {
+    if (!TextareaRef.current) return;
+    const textarea = TextareaRef.current.querySelector("textarea");
+    const observer = new ResizeObserver(() => {
+      const isShrunk = textarea.offsetHeight < textarea.scrollHeight;
+      isManuallyResized = isShrunk;
+    });
+    observer.observe(textarea);
+    return () => observer.disconnect();
+  }, []);
+  const handleInput = (e) => {
+    isManuallyResized = false;
+    onChange?.(e.target.value);
+    adjustHeight();
+  };
+  const HandleClose = () => {
+    if (onChange && typeof onChange === "function") {
+      onChange("");
+    }
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      style: textareaContainerStyle ?? {},
+      className: `${style.textareaContainer} ${inputState.error ? style.error : ""} ${disabled ? style.disabled : null}`,
+      children: [
+        label && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: textareaLabelStyle, className: style.textAreaLabel, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: label }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: requiredStyle ?? {}, className: style.required, children: required && "*" }),
+          labelSlot && iconSlot(labelSlot)
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${style.wrap} ${withResize ? style.resize : ""}`, ref: TextareaRef, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "textarea",
+            {
+              className: `${style.textarea} ${Focused ? style.focused : ""} ${disabled ? style.disabled : ""}  ${withFocus && Focused ? !inputState.error ? style.focused : style.errorFocused : ""} ${withActive && Active ? !inputState.error ? style.active : style.errorActive : ""} ${inputState.error ? style.error : ""} ${inputState.success ? style.success : ""}`,
+              value,
+              placeholder: placeholder ?? "",
+              cols,
+              rows,
+              maxLength: maxLength ?? void 0,
+              onInput: handleInput,
+              onFocus: Focus,
+              disabled,
+              onBlur: Blur,
+              onChange: Change,
+              onMouseDown: () => setActive(true),
+              onMouseUp: () => setActive(false),
+              onMouseLeave: () => setActive(false)
+            }
+          ),
+          withClose && value && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.textareaIconClose, onClick: HandleClose, children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconCloseBackground, {}) })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: textareaFooterStyle ?? {}, className: style.textareaFooter, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { children: [
+          value?.length,
+          "/",
+          maxLength
+        ] }) })
+      ]
+    }
+  );
+};
+export {
+  Textarea as default
+};

package/dist/components/Textarea/Textarea.module.scss.js

@@ -0,0 +1,41 @@
+const textareaContainer = "Textarea-module__textareaContainer";
+const textAreaLabel = "Textarea-module__textAreaLabel";
+const required = "Textarea-module__required";
+const wrap = "Textarea-module__wrap";
+const resize = "Textarea-module__resize";
+const textareaIconClose = "Textarea-module__textareaIconClose";
+const textarea = "Textarea-module__textarea";
+const focused = "Textarea-module__focused";
+const active = "Textarea-module__active";
+const errorFocused = "Textarea-module__errorFocused";
+const errorActive = "Textarea-module__errorActive";
+const textareaFooter = "Textarea-module__textareaFooter";
+const style = {
+  textareaContainer,
+  textAreaLabel,
+  required,
+  wrap,
+  resize,
+  textareaIconClose,
+  textarea,
+  focused,
+  active,
+  errorFocused,
+  errorActive,
+  textareaFooter
+};
+export {
+  active,
+  style as default,
+  errorActive,
+  errorFocused,
+  focused,
+  required,
+  resize,
+  textAreaLabel,
+  textarea,
+  textareaContainer,
+  textareaFooter,
+  textareaIconClose,
+  wrap
+};

package/dist/components/TimePicker/TimePicker.js

@@ -0,0 +1,172 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import { useRef, useState, useEffect } from "react";
+import style from "./TimePicker.module.scss.js";
+import FormInput from "../FormInput/FormInput.js";
+import { IconArrowUp } from "../../assets/Icons/IconArrowUp.js";
+import { IconCloseCircle } from "../../assets/Icons/IconCloseCircle.js";
+import customParseFormat from "../../node_modules/dayjs/plugin/customParseFormat.js";
+import dayjs from "dayjs";
+import MainButton from "../MainButton/MainButton.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/components/TimePicker/TimePicker.module.scss.js

@@ -0,0 +1,50 @@
+const timepickerWrapper = "TimePicker-module__timepickerWrapper";
+const timepickerInputWrapper = "TimePicker-module__timepickerInputWrapper";
+const dropdownRightIcon = "TimePicker-module__dropdownRightIcon";
+const dropdownRightIconClose = "TimePicker-module__dropdownRightIconClose";
+const dropdownRightIconArrow = "TimePicker-module__dropdownRightIconArrow";
+const focused = "TimePicker-module__focused";
+const timepickerDropdownWrapper = "TimePicker-module__timepickerDropdownWrapper";
+const timepickerDropdownHeader = "TimePicker-module__timepickerDropdownHeader";
+const timepickerDropdownHeaderButtons = "TimePicker-module__timepickerDropdownHeaderButtons";
+const active = "TimePicker-module__active";
+const timepickerDropdownBody = "TimePicker-module__timepickerDropdownBody";
+const timepickerDropdownBodyHours = "TimePicker-module__timepickerDropdownBodyHours";
+const timepickerDropdownBodyMinutes = "TimePicker-module__timepickerDropdownBodyMinutes";
+const timepickerDropdownBodyAmPm = "TimePicker-module__timepickerDropdownBodyAmPm";
+const timepickerDropdownFooter = "TimePicker-module__timepickerDropdownFooter";
+const style = {
+  timepickerWrapper,
+  timepickerInputWrapper,
+  dropdownRightIcon,
+  dropdownRightIconClose,
+  dropdownRightIconArrow,
+  focused,
+  timepickerDropdownWrapper,
+  timepickerDropdownHeader,
+  timepickerDropdownHeaderButtons,
+  active,
+  timepickerDropdownBody,
+  timepickerDropdownBodyHours,
+  timepickerDropdownBodyMinutes,
+  timepickerDropdownBodyAmPm,
+  timepickerDropdownFooter
+};
+export {
+  active,
+  style as default,
+  dropdownRightIcon,
+  dropdownRightIconArrow,
+  dropdownRightIconClose,
+  focused,
+  timepickerDropdownBody,
+  timepickerDropdownBodyAmPm,
+  timepickerDropdownBodyHours,
+  timepickerDropdownBodyMinutes,
+  timepickerDropdownFooter,
+  timepickerDropdownHeader,
+  timepickerDropdownHeaderButtons,
+  timepickerDropdownWrapper,
+  timepickerInputWrapper,
+  timepickerWrapper
+};

package/dist/components/Toggle/Toggle.js

@@ -0,0 +1,20 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import style from "./Toggle.module.scss.js";
+const Toggle = ({ checked, change, disabled = false, size = "md", toggleType = "default", required = false }) => {
+  const onChange = () => {
+    if (!disabled) {
+      change?.(!checked);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      onClick: onChange,
+      className: `${style.toggleWrapper}  ${toggleType === "error" ? style.error : ""} ${style[size]} ${checked ? style.checked : ""} ${disabled ? style.disabled : ""}`,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: style.toggleState, children: /* @__PURE__ */ jsxRuntimeExports.jsx("input", { type: "checkbox", checked, readOnly: true, disabled: disabled ?? false, hidden: true, required }) })
+    }
+  );
+};
+export {
+  Toggle as default
+};