master-components-react-ts 2.1.9 → 2.1.10

package/dist/components/Popup/Popup.js

@@ -1,116 +1,9 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-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__ */ jsx(IconTrash, {});
-      }
-      case "unsaved": {
-        return /* @__PURE__ */ jsx(IconSave, {});
-      }
-      case "success": {
-        return /* @__PURE__ */ 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__ */ jsx(
-    "div",
-    {
-      ref: componentRef,
-      style: modalOverlayStyle ?? {},
-      className: `
-                    ${style.modalOverlay}
-                    ${options && options?.mode === "drawer" ? style.popupDrawerMode : ""}
-                `,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: popupContainerStyle ?? {},
-          className: `
+import{jsx as r,jsxs as t}from"react/jsx-runtime";import c from"./Popup.module.scss.js";import{IconCheckCircle as C}from"../../assets/Icons/IconCheckCircle.js";import{IconSave as $}from"../../assets/Icons/IconSave.js";import{IconTrash as g}from"../../assets/Icons/IconTrash.js";import{useRef as I,useEffect as w}from"react";import{IconCloseBlack as F}from"../../assets/Icons/IconClose.js";const P=({visible:p,template:i,options:e,children:s,onClickOutside:l,onClose:a,widthType:o,modalOverlayStyle:u,popupContainerStyle:f,templateWrapperStyle:y,popupHeaderStyle:h,popupTitleStyle:v,closeButtonStyle:E})=>{const n=()=>{if(!(!e||!e?.type))switch(String(e?.type)){case"delete":return r(g,{});case"unsaved":return r($,{});case"success":return r(C,{})}},N=()=>{a&&typeof a=="function"&&a()},d=I(null),m=k=>{k.target===d.current&&l&&typeof l=="function"&&l()};return w(()=>(document.addEventListener("click",m),()=>{document.removeEventListener("click",m)}),[]),p&&r("div",{ref:d,style:u??{},className:`
+                    ${c.modalOverlay}
+                    ${e&&e?.mode==="drawer"?c.popupDrawerMode:""}
+                `,children:t("div",{style:f??{},className:`
                         mcPopup_global
-                        ${style.popupContainer}
-                        ${options?.type ? style.withOptions : ""}
-                        ${widthType === "horizontal" ? style.horizontal : ""}
-                    `,
-          children: [
-            /* @__PURE__ */ jsx("div", { className: style.closeButton, style: closeButtonStyle ?? {}, onClick: ClickClose, children: /* @__PURE__ */ jsx(
-              IconCloseBlack,
-              {
-                color: "#131314"
-              }
-            ) }),
-            (options?.title || options?.description || options?.type) && /* @__PURE__ */ jsxs("div", { className: `${style.popupHeader}`, style: popupHeaderStyle ?? {}, children: [
-              _getType() && /* @__PURE__ */ jsx("div", { className: style.typeIcon, children: /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: { backgroundColor: options?.type === "success" ? "#DCFAE6" : options?.type === "unsaved" ? "#FEF0C7" : "#FEE4E2" },
-                  className: style.icon,
-                  children: _getType()
-                }
-              ) }),
-              options && options?.title && /* @__PURE__ */ jsx("div", { className: style.popupTitle, children: /* @__PURE__ */ jsxs("h2", { style: popupTitleStyle ?? {}, children: [
-                " ",
-                options?.title ?? "",
-                " "
-              ] }) }),
-              options && options?.description && /* @__PURE__ */ jsx("div", { className: style.popupDescription, children: /* @__PURE__ */ jsxs("p", { children: [
-                " ",
-                options?.description ?? "",
-                " "
-              ] }) })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: style.templateWrapper, style: templateWrapperStyle ?? {}, children: [
-              template && template,
-              children && children
-            ] })
-          ]
-        }
-      )
-    }
-  );
-};
-export {
-  Popup as default
-};
+                        ${c.popupContainer}
+                        ${e?.type?c.withOptions:""}
+                        ${o==="horizontal"?c.horizontal:""}
+                    `,children:[r("div",{className:c.closeButton,style:E??{},onClick:N,children:r(F,{color:"#131314"})}),(e?.title||e?.description||e?.type)&&t("div",{className:`${c.popupHeader}`,style:h??{},children:[n()&&r("div",{className:c.typeIcon,children:r("div",{style:{backgroundColor:e?.type==="success"?"#DCFAE6":e?.type==="unsaved"?"#FEF0C7":"#FEE4E2"},className:c.icon,children:n()})}),e&&e?.title&&r("div",{className:c.popupTitle,children:t("h2",{style:v??{},children:[" ",e?.title??""," "]})}),e&&e?.description&&r("div",{className:c.popupDescription,children:t("p",{children:[" ",e?.description??""," "]})})]}),t("div",{className:c.templateWrapper,style:y??{},children:[i&&i,s&&s]})]})})};export{P as default};

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

@@ -1,41 +1 @@
-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
-};
+const p="Popup-module__modalOverlay",o="Popup-module__popupDrawerMode",e="Popup-module__popupContainer",t="Popup-module__closeButton",u="Popup-module__withOptions",n="Popup-module__horizontal",l="Popup-module__popupHeader",r="Popup-module__popupTitle",a="Popup-module__popupDescription",c="Popup-module__typeIcon",i="Popup-module__icon",s="Popup-module__templateWrapper",_={modalOverlay:p,popupDrawerMode:o,popupContainer:e,closeButton:t,withOptions:u,horizontal:n,popupHeader:l,popupTitle:r,popupDescription:a,typeIcon:c,icon:i,templateWrapper:s};export{t as closeButton,_ as default,n as horizontal,i as icon,p as modalOverlay,e as popupContainer,a as popupDescription,o as popupDrawerMode,l as popupHeader,r as popupTitle,s as templateWrapper,c as typeIcon,u as withOptions};

package/dist/components/Radio/Radio.js

@@ -1,46 +1 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-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__ */ jsx(IconRadioCheckedDisabled, { color });
-      } else {
-        icon = /* @__PURE__ */ jsx(IconRadioChecked, { color });
-      }
-    } else {
-      if (disabled) {
-        icon = /* @__PURE__ */ jsx(IconRadioUncheckedDisabled, { color });
-      } else {
-        icon = /* @__PURE__ */ jsx(IconRadioUnchecked, { color });
-      }
-    }
-    return icon;
-  };
-  return /* @__PURE__ */ jsxs("div", { className: style.radioWrapper, style: { cursor: disabled ? "not-allowed" : "pointer" }, onClick: onChange, children: [
-    /* @__PURE__ */ jsx("input", { type: "radio", checked: true, readOnly: true, hidden: true, disabled: disabled ?? false, required }),
-    RadioIcon()
-  ] });
-};
-export {
-  Radio as default
-};
+import{jsxs as m,jsx as r}from"react/jsx-runtime";import p from"./Radio.module.scss.js";import{useState as d}from"react";import{useNamespace as u}from"../../context/NamespaceContext.js";import{IconRadioCheckedDisabled as h}from"../../assets/Icons/IconRadioCheckedDisabled.js";import{IconRadioChecked as R}from"../../assets/Icons/IconRadioChecked.js";import{IconRadioUncheckedDisabled as k}from"../../assets/Icons/IconRadioUncheckedDisabled.js";import{IconRadioUnchecked as C}from"../../assets/Icons/IconRadioUnchecked.js";const v=({checked:i,change:n,disabled:e,required:a,withUncheckState:c=!1,radioType:l="default"})=>{u(),d(!1);const s=()=>{e||n?.(c?!i:!0)},f=()=>{let o=null,t=e?"#95969C":l==="error"?"#E3292F":"#0058FF";return i?e?o=r(h,{color:t}):o=r(R,{color:t}):e?o=r(k,{color:t}):o=r(C,{color:t}),o};return m("div",{className:p.radioWrapper,style:{cursor:e?"not-allowed":"pointer"},onClick:s,children:[r("input",{type:"radio",checked:!0,readOnly:!0,hidden:!0,disabled:e??!1,required:a}),f()]})};export{v as default};

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

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

package/dist/components/Skeleton/Skeleton.js

@@ -1,8 +1 @@
-import { jsx } from "react/jsx-runtime";
-import style from "./Skeleton.module.scss.js";
-const Skeleton = ({ type = "text", customStyle, children }) => {
-  return /* @__PURE__ */ jsx("div", { style: customStyle ?? {}, className: ` ${style.skeleton} ${style[type] || ""}`, children });
-};
-export {
-  Skeleton as default
-};
+import{jsx as r}from"react/jsx-runtime";import t from"./Skeleton.module.scss.js";const a=({type:e="text",customStyle:o,children:s})=>r("div",{style:o??{},className:` ${t.skeleton} ${t[e]||""}`,children:s});export{a as default};

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

@@ -1,20 +1 @@
-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
-};
+const e="Skeleton-module__skeleton",t="Skeleton-module__shimmer",o="Skeleton-module__text",l="Skeleton-module__avatar",a="Skeleton-module__dark",n={skeleton:e,shimmer:t,text:o,avatar:l,dark:a};export{l as avatar,a as dark,n as default,t as shimmer,e as skeleton,o as text};

package/dist/components/Textarea/Textarea.js

@@ -1,149 +1 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-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__ */ jsxs(
-    "div",
-    {
-      style: textareaContainerStyle ?? {},
-      className: `${style.textareaContainer} ${inputState.error ? style.error : ""} ${disabled ? style.disabled : null}`,
-      children: [
-        label && /* @__PURE__ */ jsxs("div", { style: textareaLabelStyle, className: style.textAreaLabel, children: [
-          /* @__PURE__ */ jsx("p", { children: label }),
-          /* @__PURE__ */ jsx("span", { style: requiredStyle ?? {}, className: style.required, children: required && "*" }),
-          labelSlot && iconSlot(labelSlot)
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: `${style.wrap} ${withResize ? style.resize : ""}`, ref: TextareaRef, children: [
-          /* @__PURE__ */ 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__ */ jsx("div", { className: style.textareaIconClose, onClick: HandleClose, children: /* @__PURE__ */ jsx(IconCloseBackground, {}) })
-        ] }),
-        /* @__PURE__ */ jsx("div", { style: textareaFooterStyle ?? {}, className: style.textareaFooter, children: /* @__PURE__ */ jsxs("p", { children: [
-          value?.length,
-          "/",
-          maxLength
-        ] }) })
-      ]
-    }
-  );
-};
-export {
-  Textarea as default
-};
+import{jsxs as a,jsx as n}from"react/jsx-runtime";import{useRef as G,useState as b,useEffect as w}from"react";import r from"./Textarea.module.scss.js";import{IconCloseBackground as J}from"../../assets/Icons/IconCloseBackground.js";const Z=({placeholder:z,label:h,cols:H=30,rows:M=5,value:l,inputState:c={error:!1,success:!0},maxLength:x=20,withFocus:k=!0,withActive:q=!0,withResize:A=!0,withClose:B=!0,onChange:s,onFocus:u,onBlur:f,disabled:d,required:F,textareaContainerStyle:I,textareaLabelStyle:L,requiredStyle:j,labelSlot:y,textareaFooterStyle:E})=>{const o=G(null),[p,$]=b(!1),[C,m]=b(!1),D=e=>{let t=e.target.value;s&&typeof s=="function"&&s(t)},O=e=>e,S=e=>{$(!0),u&&typeof u=="function"&&u(e)},T=e=>{$(!1),f&&typeof f=="function"&&f(e)};let i=!1;w(()=>{if(!o.current)return;const e=o.current.querySelector("textarea");if(!e)return;let t=!1;const v=N=>{const R=e.getBoundingClientRect();N.clientX>R.right-20&&N.clientY>R.bottom-20&&(t=!0)},g=new ResizeObserver(()=>{t&&(i=!0,t=!1)});return e.addEventListener("mousedown",v),g.observe(e),()=>{e.removeEventListener("mousedown",v),g.disconnect()}},[]);const U=()=>{if(!o.current)return;const e=o.current.querySelector("textarea");!e||i||(e.style.height="auto",e.style.height=`${e.scrollHeight}px`)};w(()=>{if(!o.current)return;const e=o.current.querySelector("textarea"),t=new ResizeObserver(()=>{i=e.offsetHeight<e.scrollHeight});return t.observe(e),()=>t.disconnect()},[]);const X=e=>{i=!1,s?.(e.target.value),U()},Y=()=>{s&&typeof s=="function"&&s("")};return a("div",{style:I??{},className:`${r.textareaContainer} ${c.error?r.error:""} ${d?r.disabled:null}`,children:[h&&a("div",{style:L,className:r.textAreaLabel,children:[n("p",{children:h}),n("span",{style:j??{},className:r.required,children:F&&"*"}),y&&O(y)]}),a("div",{className:`${r.wrap} ${A?r.resize:""}`,ref:o,children:[n("textarea",{className:`${r.textarea} ${p?r.focused:""} ${d?r.disabled:""}  ${k&&p?c.error?r.errorFocused:r.focused:""} ${q&&C?c.error?r.errorActive:r.active:""} ${c.error?r.error:""} ${c.success?r.success:""}`,value:l,placeholder:z??"",cols:H,rows:M,maxLength:x??void 0,onInput:X,onFocus:S,disabled:d,onBlur:T,onChange:D,onMouseDown:()=>m(!0),onMouseUp:()=>m(!1),onMouseLeave:()=>m(!1)}),B&&l&&n("div",{className:r.textareaIconClose,onClick:Y,children:n(J,{})})]}),n("div",{style:E??{},className:r.textareaFooter,children:a("p",{children:[l?.length,"/",x]})})]})};export{Z as default};

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

@@ -1,41 +1 @@
-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
-};
+const e="Textarea-module__textareaContainer",t="Textarea-module__textAreaLabel",a="Textarea-module__required",r="Textarea-module__wrap",o="Textarea-module__resize",c="Textarea-module__textareaIconClose",x="Textarea-module__textarea",s="Textarea-module__focused",_="Textarea-module__active",d="Textarea-module__errorFocused",n="Textarea-module__errorActive",u="Textarea-module__textareaFooter",l={textareaContainer:e,textAreaLabel:t,required:a,wrap:r,resize:o,textareaIconClose:c,textarea:x,focused:s,active:_,errorFocused:d,errorActive:n,textareaFooter:u};export{_ as active,l as default,n as errorActive,d as errorFocused,s as focused,a as required,o as resize,t as textAreaLabel,x as textarea,e as textareaContainer,u as textareaFooter,c as textareaIconClose,r as wrap};

package/dist/components/TimePicker/TimePicker.js

@@ -1,172 +1 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-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__ */ jsxs("div", { className: `${style.timepickerWrapper} ${IsFocused ? style.focused : ""}`, children: [
-    /* @__PURE__ */ jsx("div", { ref: ComponentRef, className: style.timepickerInputWrapper, onClick: () => (setIsFocused((state) => !state), CalculatePos()), onFocus: Focus, children: /* @__PURE__ */ jsx(
-      FormInput,
-      {
-        ...rest,
-        onFocusChange: (value2) => setIsFocused(value2),
-        customFocus: IsFocused,
-        withActive: false,
-        value: Value,
-        toggleFocus: true,
-        formInputStyle: { cursor: "pointer" },
-        rightSlot: /* @__PURE__ */ jsxs("div", { className: `${style.dropdownRightIcon} ${IsFocused ? style.focused : ""}`, children: [
-          Value && /* @__PURE__ */ jsx(
-            "div",
-            {
-              onClick: (e) => {
-                e.stopPropagation();
-                Clear();
-              },
-              className: style.dropdownRightIconClose,
-              children: /* @__PURE__ */ jsx(IconCloseCircle, {})
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: style.dropdownRightIconArrow, children: /* @__PURE__ */ jsx(IconArrowUp, {}) })
-        ] }),
-        readOnly: true,
-        forDropdown: true
-      }
-    ) }),
-    IsFocused && /* @__PURE__ */ jsxs("div", { ref: DropdownRef, className: style.timepickerDropdownWrapper, children: [
-      /* @__PURE__ */ jsx("div", { className: style.timepickerDropdownHeader, children: /* @__PURE__ */ jsxs("div", { className: style.timepickerDropdownHeaderButtons, children: [
-        /* @__PURE__ */ jsx(
-          "p",
-          {
-            className: TimeType === "12" ? style.active : "",
-            onClick: () => {
-              Clear();
-              setTimeType("12");
-            },
-            children: "AM -PM"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "p",
-          {
-            className: TimeType === "24" ? style.active : "",
-            onClick: () => {
-              Clear();
-              setTimeType("24");
-            },
-            children: "24 Hours"
-          }
-        )
-      ] }) }),
-      /* @__PURE__ */ jsxs("div", { className: style.timepickerDropdownBody, children: [
-        /* @__PURE__ */ jsx("div", { className: style.timepickerDropdownBodyHours, children: (TimeType === "12" ? hours12 : hours24).map((hour) => /* @__PURE__ */ jsx("p", { className: Hours === hour || Value?.split(":")[0] === hour ? style.active : "", onClick: () => setHours(hour), children: hour }, hour)) }),
-        /* @__PURE__ */ jsx("div", { className: style.timepickerDropdownBodyMinutes, children: minutes.map((minute) => /* @__PURE__ */ jsx("p", { className: Minutes === minute || Value?.split(":")[1] === minute ? style.active : "", onClick: () => setMinutes(minute), children: minute }, minute)) }),
-        TimeType === "12" && /* @__PURE__ */ jsxs("div", { className: style.timepickerDropdownBodyAmPm, children: [
-          /* @__PURE__ */ jsx("p", { className: AmPm === "AM" ? style.active : "", onClick: () => setAmPm("AM"), children: "AM" }, "AM"),
-          /* @__PURE__ */ jsx("p", { className: AmPm === "PM" ? style.active : "", onClick: () => setAmPm("PM"), children: "PM" }, "PM")
-        ] })
-      ] }),
-      withConfirm && /* @__PURE__ */ jsx("div", { className: style.timepickerDropdownFooter, children: /* @__PURE__ */ jsx(MainButton, { label: "Confirm time", onClick: () => onChange?.(Value) }) })
-    ] })
-  ] });
-};
-export {
-  TimePicker as default
-};
+import{jsxs as l,jsx as r}from"react/jsx-runtime";import{useRef as A,useState as m,useEffect as u}from"react";import o from"./TimePicker.module.scss.js";import _ from"../FormInput/FormInput.js";import{IconArrowUp as x}from"../../assets/Icons/IconArrowUp.js";import{IconCloseCircle as O}from"../../assets/Icons/IconCloseCircle.js";import V from"../../node_modules/dayjs/plugin/customParseFormat.js";import F from"dayjs";import Y from"../MainButton/MainButton.js";F.extend(V);const te=({value:f,defaultTimeType:R="24",defaultAmPm:B="AM",withConfirm:M=!0,mode:U="single",onChange:C,onFocus:E,onBlur:T,...b})=>{const i=A(null),a=A(null),[s,h]=m(!1),[c,H]=m(R),j=Array.from({length:12},(e,t)=>t<10?`0${t}`:`${t}`),L=Array.from({length:24},(e,t)=>t<10?`0${t}`:`${t}`),S=Array.from({length:60},(e,t)=>t<10?`0${t}`:`${t}`),[d,g]=m(""),[w,P]=m(null),[v,I]=m(null),[p,y]=m(B),$=()=>{const e=i.current,t=a.current;if(!t||!e)return;const n=e.getBoundingClientRect(),k=window.innerHeight;t.style.position="fixed",t.style.left=`${n.left+window.pageXOffset}px`,n.bottom+t.offsetHeight>k?(t.style.top=`${window.scrollY+n.top-t.offsetHeight+18}px`,t.style.bottom="unset"):(t.style.top=`${window.scrollY+n.bottom+8}px`,t.style.bottom="unset")},W=()=>{E?.()},N=()=>{g(""),I(null),P(null),y("AM")};u(()=>{f&&f.length>0&&g(f)},[f]),u(()=>{if(!v&&!w)return;const e=parseInt(v??"0",10),t=parseInt(w??"0",10),n=c==="12"?p==="PM"&&e<12?e+12:p==="AM"&&e===12?0:e:e,k=F().hour(n).minute(t).format(c==="12"?"hh:mm A":"HH:mm");g(k),M||C?.(k)},[v,w,p,c]);const D=A(!0);return u(()=>{if(D.current){D.current=!1;return}s||T?.()},[s]),u(()=>{$()},[i,s]),u(()=>{const e=n=>{!i.current||!a.current||n.composedPath().includes(i.current)||n.composedPath().includes(a.current)||h(!1)},t=n=>{!i.current||a.current||h(!1)};return document.addEventListener("click",e),document.addEventListener("wheel",t),()=>{document.removeEventListener("click",e),document.removeEventListener("wheel",t)}},[]),l("div",{className:`${o.timepickerWrapper} ${s?o.focused:""}`,children:[r("div",{ref:i,className:o.timepickerInputWrapper,onClick:()=>(h(e=>!e),$()),onFocus:W,children:r(_,{...b,onFocusChange:e=>h(e),customFocus:s,withActive:!1,value:d,toggleFocus:!0,formInputStyle:{cursor:"pointer"},rightSlot:l("div",{className:`${o.dropdownRightIcon} ${s?o.focused:""}`,children:[d&&r("div",{onClick:e=>{e.stopPropagation(),N()},className:o.dropdownRightIconClose,children:r(O,{})}),r("div",{className:o.dropdownRightIconArrow,children:r(x,{})})]}),readOnly:!0,forDropdown:!0})}),s&&l("div",{ref:a,className:o.timepickerDropdownWrapper,children:[r("div",{className:o.timepickerDropdownHeader,children:l("div",{className:o.timepickerDropdownHeaderButtons,children:[r("p",{className:c==="12"?o.active:"",onClick:()=>{N(),H("12")},children:"AM -PM"}),r("p",{className:c==="24"?o.active:"",onClick:()=>{N(),H("24")},children:"24 Hours"})]})}),l("div",{className:o.timepickerDropdownBody,children:[r("div",{className:o.timepickerDropdownBodyHours,children:(c==="12"?j:L).map(e=>r("p",{className:v===e||d?.split(":")[0]===e?o.active:"",onClick:()=>I(e),children:e},e))}),r("div",{className:o.timepickerDropdownBodyMinutes,children:S.map(e=>r("p",{className:w===e||d?.split(":")[1]===e?o.active:"",onClick:()=>P(e),children:e},e))}),c==="12"&&l("div",{className:o.timepickerDropdownBodyAmPm,children:[r("p",{className:p==="AM"?o.active:"",onClick:()=>y("AM"),children:"AM"},"AM"),r("p",{className:p==="PM"?o.active:"",onClick:()=>y("PM"),children:"PM"},"PM")]})]}),M&&r("div",{className:o.timepickerDropdownFooter,children:r(Y,{label:"Confirm time",onClick:()=>C?.(d)})})]})]})};export{te as default};