astrum-ui 0.1.1 → 0.1.2

package/dist/index.mjs

@@ -198,7 +198,6 @@ var Checkbox = React4.forwardRef(
   ({
     checked: checkedProp,
     indeterminate = false,
-    size = "m",
     disabled = false,
     onChange,
     className = "",
@@ -239,7 +238,7 @@ var Checkbox = React4.forwardRef(
         htmlFor: inputId,
         className: [
           "astrum-checkbox",
-          size === "s" ? "astrum-checkbox--s" : "astrum-checkbox--m",
+          "astrum-checkbox--m",
           isChecked ? "astrum-checkbox--checked" : "",
           indeterminate ? "astrum-checkbox--indeterminate" : "",
           disabled ? "astrum-checkbox--disabled" : "",
@@ -382,36 +381,27 @@ var Input = React6.forwardRef(
     const handleClear = React6.useCallback(
       (e) => {
         e.stopPropagation();
-        if (inputRef.current) {
-          if (isControlled && onChange) {
+        if (!inputRef.current) return;
+        inputRef.current.value = "";
+        if (isControlled && onChange) {
+          const syntheticEvent = {
+            ...e,
+            target: inputRef.current,
+            currentTarget: inputRef.current
+          };
+          onChange(syntheticEvent);
+        } else {
+          setInternalValue("");
+          if (onChange) {
             const syntheticEvent = {
               ...e,
               target: inputRef.current,
               currentTarget: inputRef.current
             };
-            Object.defineProperty(syntheticEvent.target, "value", {
-              writable: true,
-              value: ""
-            });
             onChange(syntheticEvent);
-          } else {
-            setInternalValue("");
-            inputRef.current.value = "";
-            if (onChange) {
-              const syntheticEvent = {
-                ...e,
-                target: inputRef.current,
-                currentTarget: inputRef.current
-              };
-              Object.defineProperty(syntheticEvent.target, "value", {
-                writable: true,
-                value: ""
-              });
-              onChange(syntheticEvent);
-            }
           }
-          inputRef.current.focus();
         }
+        inputRef.current.focus();
       },
       [onChange, isControlled]
     );
@@ -663,25 +653,14 @@ InputCode.displayName = "InputCode";
 
 // src/Select/Select.tsx
 import * as React8 from "react";
-import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
-var ChevronDownIcon = () => /* @__PURE__ */ jsx8("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx8(
-  "path",
-  {
-    d: "M5 7.5l5 5 5-5",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }
-) });
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var ChevronDownIcon = () => /* @__PURE__ */ jsx8("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx8("path", { d: "M6 9L12 15L18 9", stroke: "#5988FF", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) });
 var Select = React8.forwardRef(
   ({
-    label,
     error,
     required,
     options,
     placeholder,
-    size = "m",
     className = "",
     id: idProp,
     value,
@@ -693,6 +672,7 @@ var Select = React8.forwardRef(
     const id = React8.useId();
     const selectId = idProp ?? id;
     const [isOpen, setIsOpen] = React8.useState(false);
+    const [internalValue, setInternalValue] = React8.useState(defaultValue ?? "");
     const selectRef = React8.useRef(null);
     const dropdownRef = React8.useRef(null);
     const containerRef = React8.useRef(null);
@@ -704,9 +684,12 @@ var Select = React8.forwardRef(
       },
       [ref]
     );
-    const currentValue = value !== void 0 ? value : defaultValue ?? "";
+    const currentValue = value !== void 0 ? value : internalValue;
     const selectedOption = currentValue ? options.find((opt) => opt.value === currentValue) : null;
     const displayValue = selectedOption ? selectedOption.label : placeholder ?? "";
+    React8.useEffect(() => {
+      if (value === void 0) setInternalValue(defaultValue ?? "");
+    }, [value, defaultValue]);
     React8.useEffect(() => {
       const handleClickOutside = (e) => {
         if (containerRef.current && !containerRef.current.contains(e.target) && dropdownRef.current && !dropdownRef.current.contains(e.target)) {
@@ -720,6 +703,7 @@ var Select = React8.forwardRef(
     }, [isOpen]);
     const handleOptionClick = (optionValue) => {
       if (selectRef.current) {
+        if (value === void 0) setInternalValue(optionValue);
         const nativeEvent = new Event("change", { bubbles: true });
         Object.defineProperty(nativeEvent, "target", {
           writable: false,
@@ -747,17 +731,12 @@ var Select = React8.forwardRef(
         setIsOpen(true);
       }
     };
-    return /* @__PURE__ */ jsxs7(Fragment3, { children: [
+    return /* @__PURE__ */ jsxs7("div", { ref: containerRef, className: "astrum-select__container", children: [
       /* @__PURE__ */ jsxs7(
         "div",
         {
-          ref: containerRef,
-          className: `astrum-select ${size === "s" ? "astrum-select--s" : size === "l" ? "astrum-select--l" : "astrum-select--m"} ${error ? "astrum-select--error" : ""} ${isOpen ? "astrum-select--open" : ""} ${className}`.trim(),
+          className: `astrum-select ${error ? "astrum-select--error" : ""} ${isOpen ? "astrum-select--open" : ""} ${className}`.trim(),
           children: [
-            label != null && /* @__PURE__ */ jsxs7("label", { htmlFor: selectId, className: "astrum-select__label", children: [
-              label,
-              required && /* @__PURE__ */ jsx8("span", { className: "astrum-select__required", "aria-hidden": true, children: "*" })
-            ] }),
             /* @__PURE__ */ jsxs7("div", { className: "astrum-select__wrap", children: [
               /* @__PURE__ */ jsxs7(
                 "select",
@@ -768,6 +747,7 @@ var Select = React8.forwardRef(
                   value: value !== void 0 ? value : void 0,
                   defaultValue: value === void 0 ? defaultValue : void 0,
                   onChange: (e) => {
+                    if (value === void 0) setInternalValue(e.target.value);
                     onChange?.(e);
                     setIsOpen(false);
                   },
@@ -813,16 +793,19 @@ var Select = React8.forwardRef(
           ]
         }
       ),
-      isOpen && /* @__PURE__ */ jsx8("div", { ref: dropdownRef, className: "astrum-select__dropdown", role: "listbox", children: options.map((option) => /* @__PURE__ */ jsx8(
+      isOpen && /* @__PURE__ */ jsx8("div", { ref: dropdownRef, className: "astrum-select__dropdown", role: "listbox", children: options.map((option) => /* @__PURE__ */ jsxs7(
         "button",
         {
           type: "button",
           role: "option",
           "aria-selected": option.value === currentValue,
-          className: `astrum-select__option ${option.value === currentValue ? "astrum-select__option--selected" : ""} ${option.disabled ? "astrum-select__option--disabled" : ""}`,
+          className: `astrum-select__option ${option.value === currentValue ? "astrum-select__option--selected" : ""} ${option.disabled ? "astrum-select__option--disabled" : ""} ${option.secondaryLabel != null ? "astrum-select__option--two-line" : ""}`,
           onClick: () => !option.disabled && handleOptionClick(option.value),
           disabled: option.disabled,
-          children: option.label
+          children: [
+            /* @__PURE__ */ jsx8("span", { className: "astrum-select__option-label", children: option.label }),
+            option.secondaryLabel != null && /* @__PURE__ */ jsx8("span", { className: "astrum-select__option-caption", children: option.secondaryLabel })
+          ]
         },
         option.value
       )) })
@@ -897,39 +880,19 @@ Chips.displayName = "Chips";
 
 // src/FileUpload/FileUpload.tsx
 import * as React10 from "react";
-import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
-var UploadIcon = () => /* @__PURE__ */ jsx10("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx10(
-  "path",
-  {
-    d: "M24 8v24m0 0l-8-8m8 8l8-8M8 32h32",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }
-) });
-var FileIcon = () => /* @__PURE__ */ jsxs9("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, children: [
-  /* @__PURE__ */ jsx10(
-    "path",
-    {
-      d: "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z",
-      stroke: "currentColor",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ),
-  /* @__PURE__ */ jsx10("path", { d: "M14 2v6h6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+var UploadIcon = () => /* @__PURE__ */ jsxs9("svg", { xmlns: "http://www.w3.org/2000/svg", width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", children: [
+  /* @__PURE__ */ jsx10("path", { d: "M12.2666 53.1766C12.2666 54.7295 13.5372 56.0001 15.0901 56.0001H48.9725C50.5254 56.0001 51.796 54.7295 51.796 53.1766C51.796 51.6236 50.5254 50.353 48.9725 50.353H15.0901C13.5372 50.353 12.2666 51.6236 12.2666 53.1766Z", fill: "#D5D5D5" }),
+  /* @__PURE__ */ jsx10("path", { d: "M44.9917 26.6142H40.5023V40.7319C40.5023 42.2848 39.2317 43.5554 37.6787 43.5554H26.3846C24.8317 43.5554 23.5611 42.2848 23.5611 40.7319V26.6142H19.0717C16.5587 26.6142 15.2881 23.5648 17.067 21.786L30.027 8.82601C31.1281 7.72483 32.907 7.72483 34.0081 8.82601L46.9681 21.786C48.747 23.5648 47.5046 26.6142 44.9917 26.6142Z", fill: "#D5D5D5" })
+] });
+var FileIcon = () => /* @__PURE__ */ jsxs9("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [
+  /* @__PURE__ */ jsx10("path", { d: "M9 3.8C9 3.32261 9.18964 2.86477 9.52721 2.52721C9.86477 2.18964 10.3226 2 10.8 2H15.4548C15.932 2.00042 16.3896 2.19034 16.7268 2.528L20.4732 6.272C20.6405 6.43937 20.7731 6.63808 20.8635 6.85675C20.9539 7.07543 21.0003 7.30978 21 7.5464V14.6C21 15.0774 20.8104 15.5352 20.4728 15.8728C20.1352 16.2104 19.6774 16.4 19.2 16.4H18V12.3452C17.9998 11.3905 17.6204 10.475 16.9452 9.8L13.2 6.0548C12.525 5.37962 11.6095 5.0002 10.6548 5H9V3.8Z", fill: "#2653f2" }),
+  /* @__PURE__ */ jsx10("path", { d: "M4.95 7C4.43283 7 3.93684 7.19755 3.57114 7.54918C3.20545 7.90081 3 8.37772 3 8.875V20.125C3 20.6223 3.20545 21.0992 3.57114 21.4508C3.93684 21.8025 4.43283 22 4.95 22H14.05C14.5672 22 15.0632 21.8025 15.4289 21.4508C15.7946 21.0992 16 20.6223 16 20.125V12.7763C15.9995 12.2791 15.7938 11.8025 15.428 11.4513L11.372 7.54875C11.1907 7.37452 10.9754 7.23637 10.7385 7.14221C10.5016 7.04805 10.2477 6.99973 9.9914 7H4.95Z", fill: "#2653f2" })
+] });
+var CloseIcon2 = () => /* @__PURE__ */ jsxs9("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [
+  /* @__PURE__ */ jsx10("path", { d: "M6.00049 6L18.0005 18", stroke: "#818181", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ jsx10("path", { d: "M18.0005 6L6.00049 18", stroke: "#818181", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })
 ] });
-var CloseIcon2 = () => /* @__PURE__ */ jsx10("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx10(
-  "path",
-  {
-    d: "M4 4l8 8M12 4l-8 8",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round"
-  }
-) });
 var FileUpload = React10.forwardRef(
   ({
     accept,
@@ -996,8 +959,9 @@ var FileUpload = React10.forwardRef(
         inputRef.current.click();
       }
     }, [disabled]);
-    const defaultLabel = label ?? (accept?.includes("pdf") ? "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 PDF-\u0444\u0430\u0439\u043B\u044B" : "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0444\u0430\u0439\u043B\u044B");
-    const defaultDescription = description ?? (size === "large" ? "\u041F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0444\u0430\u0439\u043B\u044B \u0441\u044E\u0434\u0430 \u0438\u043B\u0438 \u0432\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0438\u0445, \u0449\u0435\u043B\u043A\u043D\u0443\u0432 \u043C\u044B\u0448\u044C\u044E." : "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0444\u0430\u0439\u043B \u0438\u043B\u0438 \u043F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0441\u044E\u0434\u0430");
+    const isPdf = accept?.toLowerCase().includes("pdf");
+    const defaultLabel = label ?? (isPdf ? "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 PDF-\u0444\u0430\u0439\u043B\u044B" : "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0444\u0430\u0439\u043B\u044B");
+    const defaultDescription = description ?? (size === "large" ? isPdf ? "\u041F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 PDF-\u0444\u0430\u0439\u043B\u044B \u0441\u044E\u0434\u0430 \u0438\u043B\u0438 \u0432\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0438\u0445, \u0449\u0435\u043B\u043A\u043D\u0443\u0432 \u043C\u044B\u0448\u044C\u044E." : "\u041F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0444\u0430\u0439\u043B\u044B \u0441\u044E\u0434\u0430 \u0438\u043B\u0438 \u0432\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0438\u0445, \u0449\u0435\u043B\u043A\u043D\u0443\u0432 \u043C\u044B\u0448\u044C\u044E." : "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0444\u0430\u0439\u043B \u0438\u043B\u0438 \u043F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0441\u044E\u0434\u0430");
     return /* @__PURE__ */ jsxs9(
       "div",
       {
@@ -1020,7 +984,7 @@ var FileUpload = React10.forwardRef(
               "aria-label": defaultLabel
             }
           ),
-          size === "large" ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
+          size === "large" ? /* @__PURE__ */ jsxs9(Fragment3, { children: [
             /* @__PURE__ */ jsx10("div", { className: "astrum-file-upload__icon", children: /* @__PURE__ */ jsx10(UploadIcon, {}) }),
             /* @__PURE__ */ jsx10("div", { className: "astrum-file-upload__label", children: defaultLabel }),
             /* @__PURE__ */ jsx10("div", { className: "astrum-file-upload__description", children: defaultDescription }),
@@ -1045,8 +1009,21 @@ var FileUpload = React10.forwardRef(
   }
 );
 FileUpload.displayName = "FileUpload";
+var IMAGE_TYPES = /^image\//i;
 var FileItem = React10.forwardRef(
-  ({ name, size, icon, onRemove, className = "" }, ref) => {
+  ({ name, size, file, previewUrl: previewUrlProp, icon, onRemove, className = "" }, ref) => {
+    const [objectUrl, setObjectUrl] = React10.useState(null);
+    React10.useEffect(() => {
+      if (previewUrlProp != null || !file || !IMAGE_TYPES.test(file.type)) return;
+      const url = URL.createObjectURL(file);
+      setObjectUrl(url);
+      return () => {
+        URL.revokeObjectURL(url);
+        setObjectUrl(null);
+      };
+    }, [file, previewUrlProp]);
+    const previewUrl = previewUrlProp ?? objectUrl;
+    const showPreview = previewUrl != null && previewUrl !== "";
     const formatSize = React10.useCallback((sizeValue) => {
       if (!sizeValue) return "";
       if (typeof sizeValue === "string") return sizeValue;
@@ -1055,18 +1032,27 @@ var FileItem = React10.forwardRef(
       return `${(sizeValue / (1024 * 1024)).toFixed(1)} MB`;
     }, []);
     return /* @__PURE__ */ jsxs9("div", { ref, className: `astrum-file-item ${className}`.trim(), children: [
-      /* @__PURE__ */ jsx10("div", { className: "astrum-file-item__icon", children: icon ?? /* @__PURE__ */ jsx10(FileIcon, {}) }),
+      /* @__PURE__ */ jsx10("div", { className: "astrum-file-item__preview-wrap", children: showPreview ? /* @__PURE__ */ jsx10(
+        "img",
+        {
+          src: previewUrl,
+          alt: "",
+          className: "astrum-file-item__preview",
+          decoding: "async"
+        }
+      ) : /* @__PURE__ */ jsx10("span", { className: "astrum-file-item__icon", children: icon ?? /* @__PURE__ */ jsx10(FileIcon, {}) }) }),
       /* @__PURE__ */ jsxs9("div", { className: "astrum-file-item__content", children: [
         /* @__PURE__ */ jsx10("div", { className: "astrum-file-item__name", children: name }),
         size != null && /* @__PURE__ */ jsx10("div", { className: "astrum-file-item__size", children: formatSize(size) })
       ] }),
-      onRemove != null && /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx10(
         "button",
         {
           type: "button",
           className: "astrum-file-item__remove",
           onClick: onRemove,
           "aria-label": "\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0444\u0430\u0439\u043B",
+          disabled: onRemove == null,
           children: /* @__PURE__ */ jsx10(CloseIcon2, {})
         }
       )
@@ -1077,7 +1063,7 @@ FileItem.displayName = "FileItem";
 
 // src/Avatar/Avatar.tsx
 import * as React11 from "react";
-import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function cn(...args) {
   return args.flatMap(
     (x) => typeof x === "object" && x !== null ? Object.entries(x).filter(([, v]) => v).map(([k]) => k) : x
@@ -1088,15 +1074,10 @@ var EditIcon = () => /* @__PURE__ */ jsxs10("svg", { width: "24", height: "24",
   /* @__PURE__ */ jsx11("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M5.293 15.619L15.619 5.29299C16.009 4.90299 16.642 4.90299 17.032 5.29299L18.708 6.96899C19.098 7.35899 19.098 7.99199 18.708 8.38199L8.381 18.707C8.194 18.895 7.94 19 7.675 19H5V16.325C5 16.06 5.105 15.806 5.293 15.619Z", stroke: "white", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
   /* @__PURE__ */ jsx11("path", { d: "M13.75 7.16016L16.84 10.2502", stroke: "white", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })
 ] });
-var CrossIcon = () => /* @__PURE__ */ jsx11("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx11(
-  "path",
-  {
-    d: "M4 4l8 8M12 4l-8 8",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round"
-  }
-) });
+var CrossIcon = () => /* @__PURE__ */ jsxs10("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: [
+  /* @__PURE__ */ jsx11("path", { d: "M3.00012 3L9.00012 9", stroke: "white", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ jsx11("path", { d: "M9.00012 3L3.00012 9", stroke: "white", "stroke-linecap": "round", "stroke-linejoin": "round" })
+] });
 var Avatar = React11.forwardRef(
   ({
     src,
@@ -1171,7 +1152,7 @@ var Avatar = React11.forwardRef(
               className: "astrum-avatar__input"
             }
           ),
-          hasImage ? /* @__PURE__ */ jsxs10(Fragment5, { children: [
+          hasImage ? /* @__PURE__ */ jsxs10(Fragment4, { children: [
             /* @__PURE__ */ jsxs10("div", { className: "astrum-avatar__body", children: [
               /* @__PURE__ */ jsx11("img", { src, alt, className: "astrum-avatar__image" }),
               /* @__PURE__ */ jsx11("div", { className: "astrum-avatar__overlay", "aria-hidden": true }),
@@ -1198,12 +1179,527 @@ var Avatar = React11.forwardRef(
   }
 );
 Avatar.displayName = "Avatar";
+
+// src/DatePicker/DatePicker.tsx
+import * as React12 from "react";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+var CalendarIcon = ({ isActive }) => /* @__PURE__ */ jsxs11("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [
+  /* @__PURE__ */ jsx12("path", { d: "M3 8.40004C3 6.70264 3 5.85485 3.5274 5.32745C4.0548 4.80005 4.9026 4.80005 6.6 4.80005H17.4C19.0974 4.80005 19.9452 4.80005 20.4726 5.32745C21 5.85485 21 6.70264 21 8.40004C21 8.82394 21 9.03634 20.8686 9.16864C20.7363 9.30004 20.523 9.30004 20.1 9.30004H3.9C3.4761 9.30004 3.2637 9.30004 3.1314 9.16864C3 9.03634 3 8.82304 3 8.40004Z", fill: isActive ? "#2653F2" : "#ABABAB" }),
+  /* @__PURE__ */ jsx12("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M3.5274 19.5727C3 19.0453 3 18.1975 3 16.5001V12.0001C3 11.5762 3 11.3638 3.1314 11.2315C3.2637 11.1001 3.477 11.1001 3.9 11.1001H20.1C20.5239 11.1001 20.7363 11.1001 20.8686 11.2315C21 11.3638 21 11.5762 21 12.0001V16.5001C21 18.1975 21 19.0453 20.4726 19.5727C19.9452 20.1001 19.0974 20.1001 17.4 20.1001H6.6C4.9026 20.1001 4.0548 20.1001 3.5274 19.5727ZM8.4 14.7001C8.1613 14.7001 7.93239 14.7949 7.7636 14.9637C7.59482 15.1325 7.5 15.3614 7.5 15.6001C7.5 15.8388 7.59482 16.0677 7.7636 16.2365C7.93239 16.4053 8.1613 16.5001 8.4 16.5001H15.6C15.8387 16.5001 16.0676 16.4053 16.2364 16.2365C16.4052 16.0677 16.5 15.8388 16.5 15.6001C16.5 15.3614 16.4052 15.1325 16.2364 14.9637C16.0676 14.7949 15.8387 14.7001 15.6 14.7001H8.4Z", fill: isActive ? "#2653F2" : "#ABABAB" }),
+  /* @__PURE__ */ jsx12("path", { d: "M7.5 3V5.69999M16.5 3V5.69999", stroke: isActive ? "#2653F2" : "#ABABAB", "stroke-width": "2", "stroke-linecap": "round" })
+] });
+var ChevronLeftIcon = () => /* @__PURE__ */ jsx12("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx12("path", { d: "M15 6L9 12L15 18", stroke: "#ABABAB", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) });
+var ChevronRightIcon = () => /* @__PURE__ */ jsx12("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx12("path", { d: "M9 18L15 12L9 6", stroke: "#ABABAB", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) });
+var ClockIcon = () => /* @__PURE__ */ jsx12("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx12("path", { d: "M10 2.5C14.1423 2.5 17.5 5.85777 17.5 10C17.5 14.1423 14.1423 17.5001 10 17.5001C5.85775 17.5001 2.5 14.1423 2.5 10C2.5 5.85777 5.85775 2.5 10 2.5ZM10 5.50002C9.80109 5.50002 9.61032 5.57903 9.46967 5.71969C9.32902 5.86034 9.25 6.05111 9.25 6.25002V10C9.25004 10.1989 9.32909 10.3897 9.46975 10.5303L11.7198 12.7803C11.8612 12.9169 12.0507 12.9925 12.2473 12.9908C12.4439 12.9891 12.6321 12.9102 12.7711 12.7712C12.9102 12.6321 12.989 12.444 12.9908 12.2474C12.9925 12.0507 12.9169 11.8613 12.7802 11.7198L10.75 9.68954V6.25002C10.75 6.05111 10.671 5.86034 10.5303 5.71969C10.3897 5.57903 10.1989 5.50002 10 5.50002Z", fill: "#ABABAB" }) });
+var formatDate = (date) => {
+  if (!date) return "";
+  const day = String(date.getDate()).padStart(2, "0");
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const year = date.getFullYear();
+  return `${day}.${month}.${year}`;
+};
+var parseDate = (value) => {
+  const match = value.match(/^(\d{2})\.(\d{2})\.(\d{4})$/);
+  if (!match) return null;
+  const [, day, month, year] = match;
+  const date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
+  if (date.getFullYear() === parseInt(year) && date.getMonth() === parseInt(month) - 1 && date.getDate() === parseInt(day)) {
+    return date;
+  }
+  return null;
+};
+var formatTime = (date) => {
+  if (!date) return "";
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  return `${hours}:${minutes}`;
+};
+var parseTime = (value) => {
+  const match = value.match(/^(\d{2}):(\d{2})$/);
+  if (!match) return null;
+  const hours = parseInt(match[1]);
+  const minutes = parseInt(match[2]);
+  if (hours >= 0 && hours < 24 && minutes >= 0 && minutes < 60) {
+    return { hours, minutes };
+  }
+  return null;
+};
+var getDaysInMonth = (date) => {
+  return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
+};
+var getFirstDayOfMonth = (date) => {
+  const firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
+  return firstDay.getDay() === 0 ? 6 : firstDay.getDay() - 1;
+};
+var isSameDay = (date1, date2) => {
+  if (!date1 || !date2) return false;
+  return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
+};
+var isToday = (date) => {
+  const today = /* @__PURE__ */ new Date();
+  return isSameDay(date, today);
+};
+var isDateInRange = (date, start, end) => {
+  if (!start || !end) return false;
+  const dateTime = date.getTime();
+  const startTime = start.getTime();
+  const endTime = end.getTime();
+  return dateTime >= startTime && dateTime <= endTime;
+};
+var isDateRangeStart = (date, start, end) => {
+  if (!start) return false;
+  return isSameDay(date, start);
+};
+var isDateRangeEnd = (date, start, end) => {
+  if (!end) return false;
+  return isSameDay(date, end);
+};
+var monthNames = [
+  "\u042F\u043D\u0432\u0430\u0440\u044C",
+  "\u0424\u0435\u0432\u0440\u0430\u043B\u044C",
+  "\u041C\u0430\u0440\u0442",
+  "\u0410\u043F\u0440\u0435\u043B\u044C",
+  "\u041C\u0430\u0439",
+  "\u0418\u044E\u043D\u044C",
+  "\u0418\u044E\u043B\u044C",
+  "\u0410\u0432\u0433\u0443\u0441\u0442",
+  "\u0421\u0435\u043D\u0442\u044F\u0431\u0440\u044C",
+  "\u041E\u043A\u0442\u044F\u0431\u0440\u044C",
+  "\u041D\u043E\u044F\u0431\u0440\u044C",
+  "\u0414\u0435\u043A\u0430\u0431\u0440\u044C"
+];
+var weekDays = ["\u041F\u043D", "\u0412\u0442", "\u0421\u0440", "\u0427\u0442", "\u041F\u0442", "\u0421\u0431", "\u0412\u0441"];
+var DatePicker = React12.forwardRef(
+  ({
+    placeholder = "\u0414\u0430\u0442\u0430",
+    placeholderFrom = "\u041E\u0442",
+    placeholderTo = "\u0414\u043E",
+    value,
+    defaultValue,
+    onChange,
+    error,
+    required,
+    disabled,
+    showTime = false,
+    timeLabel = "\u0412\u0440\u0435\u043C\u044F (UTC):",
+    range = false,
+    className = "",
+    id: idProp
+  }, ref) => {
+    const id = React12.useId();
+    const inputId = idProp ?? id;
+    const [isOpen, setIsOpen] = React12.useState(false);
+    const [internalDate, setInternalDate] = React12.useState(
+      range ? null : defaultValue ?? null
+    );
+    const [internalRange, setInternalRange] = React12.useState(
+      range ? defaultValue ?? [null, null] : [null, null]
+    );
+    const [selectingStart, setSelectingStart] = React12.useState(true);
+    const [internalTime, setInternalTime] = React12.useState(
+      !range && defaultValue ? formatTime(defaultValue) : ""
+    );
+    const [viewDate, setViewDate] = React12.useState(() => {
+      if (range) {
+        const rangeValue = value ?? defaultValue;
+        return rangeValue?.[0] ? new Date(rangeValue[0].getFullYear(), rangeValue[0].getMonth(), 1) : /* @__PURE__ */ new Date();
+      }
+      return value ? value : defaultValue ? defaultValue : /* @__PURE__ */ new Date();
+    });
+    const getRangeDisplayValue = (rangeValue) => {
+      if (!rangeValue[0] && !rangeValue[1]) return "";
+      if (rangeValue[0] && rangeValue[1]) {
+        return `${formatDate(rangeValue[0])} \u2014 ${formatDate(rangeValue[1])}`;
+      }
+      if (rangeValue[0]) {
+        return formatDate(rangeValue[0]);
+      }
+      return "";
+    };
+    const [inputValue, setInputValue] = React12.useState(() => {
+      if (range) {
+        const rangeValue = value ?? defaultValue;
+        return rangeValue ? getRangeDisplayValue(rangeValue) : "";
+      }
+      return value ? formatDate(value) : defaultValue ? formatDate(defaultValue) : "";
+    });
+    const [timeValue, setTimeValue] = React12.useState(
+      !range && value && showTime ? formatTime(value) : !range && defaultValue && showTime ? formatTime(defaultValue) : ""
+    );
+    const containerRef = React12.useRef(null);
+    const calendarRef = React12.useRef(null);
+    const inputRef = React12.useRef(null);
+    const timeInputRef = React12.useRef(null);
+    const isControlled = value !== void 0;
+    const currentDate = range ? null : isControlled ? value : internalDate;
+    const currentRange = range ? isControlled ? value : internalRange : [null, null];
+    const setCombinedRef = React12.useCallback(
+      (node) => {
+        inputRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    React12.useEffect(() => {
+      if (range) {
+        const rangeValue = value;
+        if (isControlled && rangeValue) {
+          setInputValue(getRangeDisplayValue(rangeValue));
+          if (rangeValue[0]) {
+            setViewDate(new Date(rangeValue[0].getFullYear(), rangeValue[0].getMonth(), 1));
+          }
+        } else if (isControlled && (!rangeValue || !rangeValue[0] && !rangeValue[1])) {
+          setInputValue("");
+        }
+      } else {
+        if (isControlled && value) {
+          setInputValue(formatDate(value));
+          if (showTime) {
+            setTimeValue(formatTime(value));
+          }
+          setViewDate(new Date(value.getFullYear(), value.getMonth(), 1));
+        } else if (isControlled && !value) {
+          setInputValue("");
+          if (showTime) {
+            setTimeValue("");
+          }
+        }
+      }
+    }, [value, isControlled, showTime, range]);
+    React12.useEffect(() => {
+      if (range) {
+        const rangeDefault = defaultValue;
+        if (!isControlled && rangeDefault !== void 0) {
+          setInternalRange(rangeDefault);
+          setInputValue(getRangeDisplayValue(rangeDefault));
+          if (rangeDefault[0]) {
+            setViewDate(new Date(rangeDefault[0].getFullYear(), rangeDefault[0].getMonth(), 1));
+          }
+        }
+      } else {
+        if (!isControlled && defaultValue !== void 0) {
+          setInternalDate(defaultValue);
+          setInputValue(defaultValue ? formatDate(defaultValue) : "");
+          if (showTime && defaultValue) {
+            setTimeValue(formatTime(defaultValue));
+            setInternalTime(formatTime(defaultValue));
+          }
+          if (defaultValue) {
+            setViewDate(new Date(defaultValue.getFullYear(), defaultValue.getMonth(), 1));
+          }
+        }
+      }
+    }, [defaultValue, isControlled, showTime, range]);
+    React12.useEffect(() => {
+      const handleClickOutside = (e) => {
+        if (containerRef.current && !containerRef.current.contains(e.target) && calendarRef.current && !calendarRef.current.contains(e.target)) {
+          if (range) {
+            if (currentRange[0] && currentRange[1]) {
+              setIsOpen(false);
+            }
+          } else {
+            setIsOpen(false);
+          }
+        }
+      };
+      if (isOpen) {
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+      }
+    }, [isOpen, range, currentRange]);
+    const handleInputChange = (e) => {
+      const newValue = e.target.value;
+      setInputValue(newValue);
+      if (range) {
+        const rangeMatch = newValue.match(/^(\d{2}\.\d{2}\.\d{4})\s*—\s*(\d{2}\.\d{2}\.\d{4})$/);
+        if (rangeMatch) {
+          const parsedFrom = parseDate(rangeMatch[1]);
+          const parsedTo = parseDate(rangeMatch[2]);
+          const newRange = [parsedFrom, parsedTo];
+          if (isControlled) {
+            onChange?.(newRange);
+          } else {
+            setInternalRange(newRange);
+            onChange?.(newRange);
+          }
+          if (parsedFrom) {
+            setViewDate(new Date(parsedFrom.getFullYear(), parsedFrom.getMonth(), 1));
+          }
+        } else {
+          const singleDateMatch = newValue.match(/^(\d{2}\.\d{2}\.\d{4})$/);
+          if (singleDateMatch) {
+            const parsed2 = parseDate(singleDateMatch[1]);
+            const newRange = [parsed2, null];
+            if (isControlled) {
+              onChange?.(newRange);
+            } else {
+              setInternalRange(newRange);
+              onChange?.(newRange);
+            }
+            if (parsed2) {
+              setViewDate(new Date(parsed2.getFullYear(), parsed2.getMonth(), 1));
+            }
+          } else if (newValue === "") {
+            const newRange = [null, null];
+            if (isControlled) {
+              onChange?.(newRange);
+            } else {
+              setInternalRange(newRange);
+              onChange?.(newRange);
+            }
+          }
+        }
+        return;
+      }
+      const parsed = parseDate(newValue);
+      if (parsed) {
+        if (showTime && timeValue) {
+          const time = parseTime(timeValue);
+          if (time) {
+            parsed.setHours(time.hours, time.minutes);
+          }
+        }
+        if (isControlled) {
+          onChange?.(parsed);
+        } else {
+          setInternalDate(parsed);
+          onChange?.(parsed);
+        }
+      } else if (newValue === "") {
+        if (isControlled) {
+          onChange?.(null);
+        } else {
+          setInternalDate(null);
+          onChange?.(null);
+        }
+      }
+    };
+    const handleTimeChange = (e) => {
+      if (range) return;
+      const newValue = e.target.value;
+      setTimeValue(newValue);
+      const parsed = parseTime(newValue);
+      if (parsed && currentDate) {
+        const newDate = new Date(currentDate);
+        newDate.setHours(parsed.hours, parsed.minutes);
+        if (isControlled) {
+          onChange?.(newDate);
+        } else {
+          setInternalDate(newDate);
+          onChange?.(newDate);
+        }
+      }
+      setInternalTime(newValue);
+    };
+    const handleDateClick = (day, isOtherMonth) => {
+      if (disabled) return;
+      const newDate = new Date(viewDate);
+      if (isOtherMonth) {
+        if (day > 15) {
+          newDate.setMonth(newDate.getMonth() - 1);
+        } else {
+          newDate.setMonth(newDate.getMonth() + 1);
+        }
+      }
+      newDate.setDate(day);
+      if (range) {
+        let newRange;
+        if (!currentRange[0]) {
+          newRange = [newDate, null];
+          setSelectingStart(false);
+        } else if (!currentRange[1]) {
+          if (newDate.getTime() < currentRange[0].getTime()) {
+            newRange = [newDate, currentRange[0]];
+          } else {
+            newRange = [currentRange[0], newDate];
+          }
+          setSelectingStart(true);
+        } else {
+          newRange = [newDate, null];
+          setSelectingStart(false);
+        }
+        setViewDate(new Date(newDate.getFullYear(), newDate.getMonth(), 1));
+        if (isControlled) {
+          onChange?.(newRange);
+        } else {
+          setInternalRange(newRange);
+          onChange?.(newRange);
+        }
+        setInputValue(getRangeDisplayValue(newRange));
+        if (newRange[0] && newRange[1] && !showTime) {
+          setIsOpen(false);
+        }
+      } else {
+        if (showTime && timeValue) {
+          const time = parseTime(timeValue);
+          if (time) {
+            newDate.setHours(time.hours, time.minutes);
+          }
+        }
+        setViewDate(new Date(newDate.getFullYear(), newDate.getMonth(), 1));
+        if (isControlled) {
+          onChange?.(newDate);
+        } else {
+          setInternalDate(newDate);
+          onChange?.(newDate);
+        }
+        setInputValue(formatDate(newDate));
+        if (!showTime) {
+          setIsOpen(false);
+        }
+      }
+    };
+    const handlePrevMonth = () => {
+      setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1));
+    };
+    const handleNextMonth = () => {
+      setViewDate(new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1));
+    };
+    const renderCalendar = () => {
+      const daysInMonth = getDaysInMonth(viewDate);
+      const firstDay = getFirstDayOfMonth(viewDate);
+      const days = [];
+      const prevMonth = new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 0);
+      const daysInPrevMonth = prevMonth.getDate();
+      for (let i = firstDay - 1; i >= 0; i--) {
+        days.push({ day: daysInPrevMonth - i, isOtherMonth: true });
+      }
+      for (let i = 1; i <= daysInMonth; i++) {
+        days.push({ day: i, isOtherMonth: false });
+      }
+      const remainingDays = 35 - days.length;
+      for (let i = 1; i <= remainingDays; i++) {
+        days.push({ day: i, isOtherMonth: true });
+      }
+      return days;
+    };
+    const calendarDays = renderCalendar();
+    const isActive = isOpen;
+    return /* @__PURE__ */ jsxs11("div", { ref: containerRef, className: `astrum-datepicker ${range ? "astrum-datepicker--range" : ""} ${error ? "astrum-datepicker--error" : ""} ${className}`.trim(), children: [
+      /* @__PURE__ */ jsxs11("div", { className: "astrum-datepicker__wrap", children: [
+        /* @__PURE__ */ jsx12(
+          "input",
+          {
+            ref: setCombinedRef,
+            id: inputId,
+            type: "text",
+            value: inputValue,
+            onChange: handleInputChange,
+            onFocus: () => !disabled && setIsOpen(true),
+            placeholder: range ? `${placeholderFrom} \u2014 ${placeholderTo}` : placeholder,
+            disabled,
+            className: `astrum-datepicker__field ${error ? "astrum-datepicker__field--invalid" : ""}`.trim(),
+            "aria-invalid": !!error,
+            "aria-required": required,
+            "aria-describedby": error ? `${inputId}-error` : void 0,
+            "aria-expanded": isOpen
+          }
+        ),
+        /* @__PURE__ */ jsx12(
+          "button",
+          {
+            type: "button",
+            className: `astrum-datepicker__icon ${isActive ? "astrum-datepicker__icon--active" : ""}`,
+            onClick: () => !disabled && setIsOpen(!isOpen),
+            disabled,
+            "aria-label": "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u043A\u0430\u043B\u0435\u043D\u0434\u0430\u0440\u044C",
+            children: /* @__PURE__ */ jsx12(CalendarIcon, { isActive })
+          }
+        )
+      ] }),
+      error != null && /* @__PURE__ */ jsx12("span", { id: `${inputId}-error`, className: "astrum-datepicker__error", role: "alert", children: error }),
+      isOpen && /* @__PURE__ */ jsxs11("div", { ref: calendarRef, className: "astrum-datepicker__calendar", children: [
+        /* @__PURE__ */ jsxs11("div", { className: "astrum-datepicker__calendar-header", children: [
+          /* @__PURE__ */ jsx12(
+            "button",
+            {
+              type: "button",
+              className: "astrum-datepicker__calendar-nav",
+              onClick: handlePrevMonth,
+              "aria-label": "\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u043C\u0435\u0441\u044F\u0446",
+              children: /* @__PURE__ */ jsx12(ChevronLeftIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsxs11("div", { className: "astrum-datepicker__calendar-month", children: [
+            monthNames[viewDate.getMonth()],
+            " ",
+            viewDate.getFullYear()
+          ] }),
+          /* @__PURE__ */ jsx12(
+            "button",
+            {
+              type: "button",
+              className: "astrum-datepicker__calendar-nav",
+              onClick: handleNextMonth,
+              "aria-label": "\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u043C\u0435\u0441\u044F\u0446",
+              children: /* @__PURE__ */ jsx12(ChevronRightIcon, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx12("div", { className: "astrum-datepicker__calendar-weekdays", children: weekDays.map((day) => /* @__PURE__ */ jsx12("div", { className: "astrum-datepicker__calendar-weekday", children: day }, day)) }),
+        /* @__PURE__ */ jsx12("div", { className: "astrum-datepicker__calendar-days", children: calendarDays.map(({ day, isOtherMonth }, index) => {
+          const dayDate = new Date(viewDate.getFullYear(), viewDate.getMonth() + (isOtherMonth ? day > 15 ? -1 : 1 : 0), day);
+          const isCurrentDay = !isOtherMonth && isToday(dayDate);
+          let isSelected;
+          let isInRange = false;
+          let isRangeStart = false;
+          let isRangeEnd = false;
+          if (range) {
+            const hasSelectedRange = currentRange[0] != null || currentRange[1] != null;
+            isSelected = hasSelectedRange ? currentRange[0] != null && isSameDay(dayDate, currentRange[0]) || currentRange[1] != null && isSameDay(dayDate, currentRange[1]) || false : isCurrentDay;
+            if (currentRange[0] && currentRange[1]) {
+              isInRange = isDateInRange(dayDate, currentRange[0], currentRange[1]) && !isSelected;
+              isRangeStart = isDateRangeStart(dayDate, currentRange[0], currentRange[1]);
+              isRangeEnd = isDateRangeEnd(dayDate, currentRange[0], currentRange[1]);
+            }
+          } else {
+            isSelected = currentDate ? isSameDay(dayDate, currentDate) : isCurrentDay;
+          }
+          return /* @__PURE__ */ jsx12(
+            "button",
+            {
+              type: "button",
+              className: `astrum-datepicker__calendar-day ${isOtherMonth ? "astrum-datepicker__calendar-day--other-month" : ""} ${isSelected ? "astrum-datepicker__calendar-day--selected" : ""} ${isInRange ? "astrum-datepicker__calendar-day--in-range" : ""} ${isRangeStart ? "astrum-datepicker__calendar-day--range-start" : ""} ${isRangeEnd ? "astrum-datepicker__calendar-day--range-end" : ""}`,
+              onClick: () => handleDateClick(day, isOtherMonth),
+              disabled,
+              children: day
+            },
+            `${day}-${isOtherMonth}-${index}`
+          );
+        }) }),
+        showTime && /* @__PURE__ */ jsxs11("div", { className: "astrum-datepicker__calendar-time", children: [
+          /* @__PURE__ */ jsx12("label", { className: "astrum-datepicker__calendar-time-label", children: timeLabel }),
+          /* @__PURE__ */ jsxs11("div", { className: "astrum-datepicker__calendar-time-input-wrap", children: [
+            /* @__PURE__ */ jsx12(
+              "input",
+              {
+                ref: timeInputRef,
+                type: "text",
+                value: timeValue,
+                onChange: handleTimeChange,
+                placeholder: "00:00",
+                className: "astrum-datepicker__calendar-time-input"
+              }
+            ),
+            /* @__PURE__ */ jsx12("span", { className: "astrum-datepicker__calendar-time-icon", "aria-hidden": true, children: /* @__PURE__ */ jsx12(ClockIcon, {}) })
+          ] })
+        ] })
+      ] })
+    ] });
+  }
+);
+DatePicker.displayName = "DatePicker";
 export {
   Avatar,
   Button,
   Checkbox,
   Chips,
   ColorPicker,
+  DatePicker,
   FileItem,
   FileUpload,
   Input,