astrum-ui 0.1.1

package/dist/index.mjs

@@ -0,0 +1,1216 @@
+"use client";
+
+// src/Button/Button.tsx
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var variantStyles = {
+  primary: "astrum-btn-primary",
+  outlined: "astrum-btn-outlined",
+  dashed: "astrum-btn-dashed",
+  grey: "astrum-btn-grey",
+  white: "astrum-btn-white",
+  ghost: "astrum-btn-ghost"
+};
+var sizeStyles = {
+  s: "astrum-btn-s",
+  m: "astrum-btn-m",
+  l: "astrum-btn-l"
+};
+var shapeStyles = {
+  default: "",
+  square: "astrum-btn-shape-square",
+  circle: "astrum-btn-shape-circle"
+};
+var Button = React.forwardRef(
+  ({
+    variant = "primary",
+    size = "m",
+    icon,
+    iconPosition = "right",
+    shape = "default",
+    className = "",
+    children,
+    ...rest
+  }, ref) => {
+    const iconOnly = icon != null && (children == null || children === "");
+    const effectiveShape = iconOnly && shape !== "default" ? shape : "default";
+    const classes = [
+      "astrum-btn",
+      variantStyles[variant],
+      sizeStyles[size],
+      shapeStyles[effectiveShape],
+      iconOnly ? "astrum-btn-icon-only" : "",
+      className
+    ].filter(Boolean).join(" ");
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon && iconPosition === "left" && /* @__PURE__ */ jsx("span", { className: "astrum-btn-icon", children: icon }),
+      children != null && children !== "" && /* @__PURE__ */ jsx("span", { className: "astrum-btn-text", children }),
+      icon && iconPosition === "right" && /* @__PURE__ */ jsx("span", { className: "astrum-btn-icon", children: icon })
+    ] });
+    return /* @__PURE__ */ jsx("button", { ref, className: classes, type: "button", ...rest, children: content });
+  }
+);
+Button.displayName = "Button";
+
+// src/ColorPicker/ColorPicker.tsx
+import * as React2 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var CHECK_ICON = /* @__PURE__ */ jsx2("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx2(
+  "path",
+  {
+    d: "M1 5.5L4.5 9L11 1",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var DEFAULT_COLORS = [
+  "#E53935",
+  "#FF9800",
+  "#FDD835",
+  "#8BC34A",
+  "#4CAF50",
+  "#009688",
+  "#00BCD4",
+  "#2196F3",
+  "#7B1FA2",
+  "#E91E63"
+];
+var ColorPicker = React2.forwardRef(
+  ({
+    value = null,
+    onChange,
+    colors = DEFAULT_COLORS,
+    disabled = false,
+    className = "",
+    "aria-label": ariaLabel = "\u0412\u044B\u0431\u043E\u0440 \u0446\u0432\u0435\u0442\u0430"
+  }, ref) => {
+    const [hovered, setHovered] = React2.useState(null);
+    return /* @__PURE__ */ jsx2(
+      "div",
+      {
+        ref,
+        className: `astrum-color-swatch-picker ${className}`.trim(),
+        role: "listbox",
+        "aria-label": ariaLabel,
+        "aria-disabled": disabled,
+        children: colors.map((color) => {
+          const isSelected = value != null && value.toLowerCase() === color.toLowerCase();
+          const isHovered = hovered === color && !disabled;
+          return /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": isSelected,
+              "aria-label": color,
+              disabled,
+              className: "astrum-color-swatch-picker__swatch",
+              style: { ["--astrum-swatch-color"]: color },
+              "data-selected": isSelected || void 0,
+              "data-hovered": isHovered || void 0,
+              onClick: () => onChange?.(color),
+              onMouseEnter: () => setHovered(color),
+              onMouseLeave: () => setHovered(null),
+              children: /* @__PURE__ */ jsx2("span", { className: "astrum-color-swatch-picker__check", "aria-hidden": true, children: CHECK_ICON })
+            },
+            color
+          );
+        })
+      }
+    );
+  }
+);
+ColorPicker.displayName = "ColorPicker";
+
+// src/Radio/Radio.tsx
+import * as React3 from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var Radio = React3.forwardRef(
+  ({ value, className = "", id: idProp, ...rest }, ref) => {
+    const id = React3.useId();
+    const inputId = idProp ?? id;
+    return /* @__PURE__ */ jsxs2(
+      "label",
+      {
+        htmlFor: inputId,
+        className: `astrum-radio ${className}`.trim(),
+        children: [
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              ref,
+              type: "radio",
+              id: inputId,
+              value,
+              className: "astrum-radio__input",
+              ...rest
+            }
+          ),
+          /* @__PURE__ */ jsx3("span", { className: "astrum-radio__circle", "aria-hidden": true })
+        ]
+      }
+    );
+  }
+);
+Radio.displayName = "Radio";
+var RadioGroup = React3.forwardRef(
+  ({ name, value, onChange, children, ...rest }, ref) => {
+    const handleChange = React3.useCallback(
+      (e) => {
+        onChange?.(e.target.value);
+      },
+      [onChange]
+    );
+    return /* @__PURE__ */ jsx3("fieldset", { ref, className: "astrum-radio-group", ...rest, children: React3.Children.map(children, (child) => {
+      if (React3.isValidElement(child) && child.type === Radio) {
+        return React3.cloneElement(child, {
+          name,
+          checked: value != null && child.props.value === value,
+          onChange: (e) => {
+            child.props.onChange?.(e);
+            handleChange(e);
+          }
+        });
+      }
+      return child;
+    }) });
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+
+// src/Checkbox/Checkbox.tsx
+import * as React4 from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var CHECK_ICON2 = /* @__PURE__ */ jsx4("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx4(
+  "path",
+  {
+    d: "M1 5.5L4.5 9L11 1",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var MINUS_ICON = /* @__PURE__ */ jsx4("svg", { width: "10", height: "2", viewBox: "0 0 10 2", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx4("path", { d: "M1 1h8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) });
+var Checkbox = React4.forwardRef(
+  ({
+    checked: checkedProp,
+    indeterminate = false,
+    size = "m",
+    disabled = false,
+    onChange,
+    className = "",
+    id: idProp,
+    ...rest
+  }, ref) => {
+    const { defaultChecked, ...restInput } = rest;
+    const isControlled = checkedProp !== void 0;
+    const checked = checkedProp ?? false;
+    const [internalChecked, setInternalChecked] = React4.useState(defaultChecked ?? false);
+    const isChecked = (isControlled ? checked : internalChecked) || indeterminate;
+    const id = React4.useId();
+    const inputId = idProp ?? id;
+    const inputRef = React4.useRef(null);
+    const setRef = React4.useCallback(
+      (el) => {
+        inputRef.current = el;
+        if (typeof ref === "function") ref(el);
+        else if (ref) ref.current = el;
+      },
+      [ref]
+    );
+    React4.useEffect(() => {
+      const el = inputRef.current;
+      if (el) el.indeterminate = indeterminate;
+    }, [indeterminate]);
+    const handleChange = React4.useCallback(
+      (e) => {
+        if (disabled) return;
+        if (!isControlled) setInternalChecked(e.target.checked);
+        onChange?.(e.target.checked);
+      },
+      [disabled, isControlled, onChange]
+    );
+    return /* @__PURE__ */ jsxs3(
+      "label",
+      {
+        htmlFor: inputId,
+        className: [
+          "astrum-checkbox",
+          size === "s" ? "astrum-checkbox--s" : "astrum-checkbox--m",
+          isChecked ? "astrum-checkbox--checked" : "",
+          indeterminate ? "astrum-checkbox--indeterminate" : "",
+          disabled ? "astrum-checkbox--disabled" : "",
+          className
+        ].filter(Boolean).join(" "),
+        children: [
+          /* @__PURE__ */ jsx4(
+            "input",
+            {
+              ref: setRef,
+              type: "checkbox",
+              id: inputId,
+              className: "astrum-checkbox__input",
+              ...isControlled ? { checked } : { defaultChecked },
+              disabled,
+              onChange: handleChange,
+              "aria-checked": indeterminate ? "mixed" : isControlled ? checked : internalChecked,
+              ...restInput
+            }
+          ),
+          /* @__PURE__ */ jsx4("span", { className: "astrum-checkbox__box", "aria-hidden": true, children: isChecked && /* @__PURE__ */ jsx4("span", { className: "astrum-checkbox__icon", "aria-hidden": true, children: indeterminate ? MINUS_ICON : CHECK_ICON2 }) })
+        ]
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// src/Toggler/Toggler.tsx
+import * as React5 from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var Toggler = React5.forwardRef(
+  ({ checked: checkedProp, disabled = false, onChange, className = "" }, ref) => {
+    const [internalChecked, setInternalChecked] = React5.useState(false);
+    const isControlled = checkedProp !== void 0;
+    const checked = isControlled ? checkedProp : internalChecked;
+    const handleChange = React5.useCallback(
+      (e) => {
+        if (!disabled) {
+          if (!isControlled) {
+            setInternalChecked(e.target.checked);
+          }
+          onChange?.(e.target.checked);
+        }
+      },
+      [disabled, onChange, isControlled]
+    );
+    const classes = [
+      "astrum-toggler",
+      checked && "astrum-toggler--checked",
+      disabled && "astrum-toggler--disabled",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs4("label", { className: classes, children: [
+      /* @__PURE__ */ jsx5(
+        "input",
+        {
+          ref,
+          type: "checkbox",
+          checked: isControlled ? checked : void 0,
+          onChange: handleChange,
+          disabled,
+          className: "astrum-toggler__input"
+        }
+      ),
+      /* @__PURE__ */ jsx5("span", { className: "astrum-toggler__track", children: /* @__PURE__ */ jsx5("span", { className: "astrum-toggler__thumb" }) })
+    ] });
+  }
+);
+Toggler.displayName = "Toggler";
+
+// src/Input/Input.tsx
+import * as React6 from "react";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var SearchIcon = () => /* @__PURE__ */ jsxs5("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx6("circle", { cx: "11.0586", cy: "11.0586", r: "7.06194", stroke: "#ABABAB", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ jsx6("path", { d: "M20.0033 20.0034L16.0517 16.0518", stroke: "#ABABAB", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })
+] });
+var ClearIcon = () => /* @__PURE__ */ jsxs5("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx6("path", { d: "M6.00037 6.00024L18.0004 18.0002", stroke: "#ABABAB", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx6("path", { d: "M18.0004 6.00024L6.00037 18.0002", stroke: "#ABABAB", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var EyeOpenIcon = () => /* @__PURE__ */ jsxs5("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx6("path", { d: "M3 11.5455C3 11.5455 6.27273 5 12 5C17.7273 5 21 11.5455 21 11.5455C21 11.5455 17.7273 18.0909 12 18.0909C6.27273 18.0909 3 11.5455 3 11.5455Z", stroke: "#ABABAB", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ jsx6("path", { d: "M12 14C13.3556 14 14.4545 12.9011 14.4545 11.5455C14.4545 10.1898 13.3556 9.09091 12 9.09091C10.6444 9.09091 9.54545 10.1898 9.54545 11.5455C9.54545 12.9011 10.6444 14 12 14Z", stroke: "#ABABAB", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })
+] });
+var EyeClosedIcon = () => /* @__PURE__ */ jsx6("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx6("path", { d: "M16.86 16.86C15.4614 17.9261 13.7584 18.5167 12 18.5455C6.27273 18.5455 3 12 3 12C4.01773 10.1034 5.42929 8.44632 7.14 7.14M10.2818 5.65091C10.845 5.51908 11.4216 5.45319 12 5.45455C17.7273 5.45455 21 12 21 12C20.5033 12.9291 19.911 13.8039 19.2327 14.61M13.7345 13.7345C13.5098 13.9757 13.2388 14.1691 12.9378 14.3033C12.6367 14.4374 12.3116 14.5096 11.9821 14.5154C11.6525 14.5212 11.3251 14.4606 11.0195 14.3371C10.7139 14.2137 10.4362 14.0299 10.2031 13.7969C9.97007 13.5638 9.78632 13.2861 9.66287 12.9805C9.53942 12.6749 9.47879 12.3475 9.48461 12.0179C9.49042 11.6884 9.56256 11.3633 9.69672 11.0622C9.83087 10.7612 10.0243 10.4902 10.2655 10.2655M3 3L21 21", stroke: "#ABABAB", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) });
+var Input = React6.forwardRef(
+  ({
+    type = "text",
+    name,
+    required = false,
+    label,
+    placeholder,
+    error,
+    value,
+    onChange,
+    disabled,
+    size = "m",
+    className = "",
+    id: idProp,
+    defaultValue,
+    ...rest
+  }, ref) => {
+    const id = React6.useId();
+    const inputId = idProp ?? id;
+    const [isPasswordVisible, setIsPasswordVisible] = React6.useState(false);
+    const [internalValue, setInternalValue] = React6.useState(defaultValue ?? "");
+    const inputRef = React6.useRef(null);
+    const combinedRef = React6.useCallback(
+      (node) => {
+        inputRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    const wrapClasses = [
+      "astrum-input__wrap",
+      type === "search" && "astrum-input__wrap--search",
+      type === "password" && "astrum-input__wrap--password"
+    ].filter(Boolean).join(" ");
+    const inputType = type === "password" && isPasswordVisible ? "text" : type;
+    const sizeClass = size === "s" ? "astrum-input--s" : "astrum-input--m";
+    const isControlled = value !== void 0;
+    const currentValue = isControlled ? value : internalValue;
+    const hasValue = currentValue != null && currentValue !== "";
+    const handleChange = React6.useCallback(
+      (e) => {
+        if (!isControlled) {
+          setInternalValue(e.target.value);
+        }
+        onChange?.(e);
+      },
+      [onChange, isControlled]
+    );
+    const handleClear = React6.useCallback(
+      (e) => {
+        e.stopPropagation();
+        if (inputRef.current) {
+          if (isControlled && 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();
+        }
+      },
+      [onChange, isControlled]
+    );
+    return /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        className: `astrum-input ${sizeClass} ${error ? "astrum-input--error" : ""} ${className}`.trim(),
+        children: [
+          label != null && /* @__PURE__ */ jsx6("label", { htmlFor: inputId, className: "astrum-input__label", children: label }),
+          /* @__PURE__ */ jsxs5("div", { className: wrapClasses, children: [
+            required && /* @__PURE__ */ jsx6("span", { className: "astrum-input__required-icon", "aria-hidden": true, children: /* @__PURE__ */ jsx6("svg", { width: "7", height: "6", viewBox: "0 0 7 6", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx6("path", { d: "M2.21831 3.52817L0 3.57042V2.47183L2.21831 2.53521L1.03521 0.59155L2.07042 0L3.19014 1.90141L4.28873 0L5.28169 0.59155L4.07746 2.53521L6.25352 2.47183V3.57042L4.09859 3.52817L5.26056 5.42958L4.26761 6L3.14789 4.07747L2.02817 6L1.01408 5.40845L2.21831 3.52817Z", fill: "#ABABAB" }) }) }),
+            /* @__PURE__ */ jsx6(
+              "input",
+              {
+                ref: combinedRef,
+                id: inputId,
+                type: inputType,
+                name,
+                placeholder,
+                value: isControlled ? value : void 0,
+                defaultValue: isControlled ? void 0 : defaultValue,
+                onChange: handleChange,
+                required,
+                disabled,
+                className: `astrum-input__field ${error ? "astrum-input__field--invalid" : ""}`.trim(),
+                "aria-invalid": !!error,
+                "aria-required": required,
+                "aria-describedby": error ? `${inputId}-error` : void 0,
+                ...rest
+              }
+            ),
+            type === "search" && /* @__PURE__ */ jsx6(Fragment2, { children: hasValue ? /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                className: "astrum-input__clear-icon",
+                onClick: handleClear,
+                tabIndex: -1,
+                "aria-label": "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C",
+                children: /* @__PURE__ */ jsx6(ClearIcon, {})
+              }
+            ) : /* @__PURE__ */ jsx6("span", { className: "astrum-input__search-icon", "aria-hidden": true, children: /* @__PURE__ */ jsx6(SearchIcon, {}) }) }),
+            type === "password" && /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                className: "astrum-input__password-toggle",
+                onClick: () => setIsPasswordVisible((prev) => !prev),
+                tabIndex: -1,
+                "aria-label": isPasswordVisible ? "\u0421\u043A\u0440\u044B\u0442\u044C \u043F\u0430\u0440\u043E\u043B\u044C" : "\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u0430\u0440\u043E\u043B\u044C",
+                children: isPasswordVisible ? /* @__PURE__ */ jsx6(EyeOpenIcon, {}) : /* @__PURE__ */ jsx6(EyeClosedIcon, {})
+              }
+            )
+          ] }),
+          error != null && /* @__PURE__ */ jsx6("span", { id: `${inputId}-error`, className: "astrum-input__error", role: "alert", children: error })
+        ]
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// src/InputCode/InputCode.tsx
+import * as React7 from "react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var LENGTH = 6;
+function normalizeValue(s) {
+  return s.replace(/\D/g, "").slice(0, LENGTH);
+}
+var InputCode = React7.forwardRef(
+  ({
+    value: valueProp,
+    defaultValue = "",
+    onChange,
+    onComplete,
+    error,
+    required,
+    disabled = false,
+    id: idProp,
+    className = ""
+  }, ref) => {
+    const id = React7.useId();
+    const rootId = idProp ?? id;
+    const [internalValue, setInternalValue] = React7.useState(
+      () => normalizeValue(defaultValue)
+    );
+    const value = valueProp !== void 0 ? normalizeValue(valueProp) : internalValue;
+    const digits = value.split("");
+    while (digits.length < LENGTH) digits.push("");
+    const inputRefs = React7.useRef([]);
+    for (let i = 0; i < LENGTH; i++) {
+      if (!inputRefs.current[i]) {
+        inputRefs.current[i] = null;
+      }
+    }
+    const setValue = React7.useCallback(
+      (next) => {
+        const normalized = normalizeValue(next);
+        if (valueProp === void 0) setInternalValue(normalized);
+        onChange?.(normalized);
+        if (normalized.length === LENGTH) onComplete?.(normalized);
+      },
+      [valueProp, onChange, onComplete]
+    );
+    React7.useEffect(() => {
+      if (value.length === LENGTH && onComplete) {
+        onComplete(value);
+      }
+    }, [value, onComplete]);
+    React7.useEffect(() => {
+      inputRefs.current.forEach((ref2, index) => {
+        if (ref2) {
+          ref2.value = digits[index] || "";
+        }
+      });
+    }, [value, digits]);
+    const handleInput = React7.useCallback(
+      (e, index) => {
+        const input = e.target;
+        const previousInput = inputRefs.current[index - 1];
+        const nextInput = inputRefs.current[index + 1];
+        const newCode = [...digits];
+        const char = normalizeValue(input.value);
+        if (char) {
+          newCode[index] = char;
+          setValue(newCode.join(""));
+          input.select();
+          if (nextInput) {
+            nextInput.focus();
+            nextInput.select();
+          }
+        } else {
+          newCode[index] = "";
+          setValue(newCode.join(""));
+          if (previousInput) {
+            previousInput.focus();
+            previousInput.select();
+          }
+        }
+      },
+      [digits, setValue]
+    );
+    const handleFocus = React7.useCallback(
+      (e) => {
+        e.target.select();
+      },
+      []
+    );
+    const handleKeyDown = React7.useCallback(
+      (e, index) => {
+        const input = e.target;
+        const previousInput = inputRefs.current[index - 1];
+        if ((e.key === "Backspace" || e.key === "Delete") && !input.value && index > 0) {
+          e.preventDefault();
+          const newCode = [...digits];
+          newCode[index - 1] = "";
+          setValue(newCode.join(""));
+          if (previousInput) {
+            previousInput.focus();
+            previousInput.select();
+          }
+        }
+      },
+      [digits, setValue]
+    );
+    const handlePaste = React7.useCallback(
+      (e) => {
+        e.preventDefault();
+        const pastedCode = normalizeValue(e.clipboardData.getData("text"));
+        if (pastedCode.length === LENGTH) {
+          setValue(pastedCode);
+          inputRefs.current.forEach((inputRef, index) => {
+            if (inputRef) {
+              inputRef.value = pastedCode[index] || "";
+            }
+          });
+          const lastInput = inputRefs.current[LENGTH - 1];
+          if (lastInput) {
+            lastInput.focus();
+            lastInput.select();
+          }
+        } else if (pastedCode.length > 0) {
+          const activeIndex = inputRefs.current.findIndex(
+            (ref2) => ref2 === document.activeElement
+          );
+          if (activeIndex >= 0) {
+            const newCode = [...digits];
+            for (let i = 0; i < pastedCode.length && activeIndex + i < LENGTH; i++) {
+              newCode[activeIndex + i] = pastedCode[i];
+            }
+            setValue(newCode.join(""));
+            const nextIndex = Math.min(activeIndex + pastedCode.length, LENGTH - 1);
+            const nextInput = inputRefs.current[nextIndex];
+            if (nextInput) {
+              nextInput.focus();
+              nextInput.select();
+            }
+          }
+        }
+      },
+      [digits, setValue]
+    );
+    return /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        ref,
+        id: rootId,
+        className: `astrum-input-code ${error ? "astrum-input-code--error" : ""} ${className}`.trim(),
+        children: [
+          /* @__PURE__ */ jsx7("div", { className: "astrum-input-code__wrap", children: digits.map((digit, index) => /* @__PURE__ */ jsx7(
+            "input",
+            {
+              ref: (el) => {
+                inputRefs.current[index] = el;
+              },
+              id: index === 0 ? `${rootId}-0` : void 0,
+              type: "text",
+              inputMode: "numeric",
+              autoComplete: index === 0 ? "one-time-code" : "off",
+              maxLength: 1,
+              className: `astrum-input-code__cell ${index === 3 ? "astrum-input-code__cell--spaced" : ""}`.trim(),
+              value: digit,
+              onChange: (e) => handleInput(e, index),
+              onFocus: handleFocus,
+              onKeyDown: (e) => handleKeyDown(e, index),
+              onPaste: handlePaste,
+              disabled,
+              "aria-invalid": !!error,
+              "aria-required": required,
+              "aria-describedby": error ? `${rootId}-error` : void 0
+            },
+            index
+          )) }),
+          error != null && /* @__PURE__ */ jsx7("div", { className: "astrum-input-code__footer", children: /* @__PURE__ */ jsx7(
+            "span",
+            {
+              id: `${rootId}-error`,
+              className: "astrum-input-code__error",
+              role: "alert",
+              children: error
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+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"
+  }
+) });
+var Select = React8.forwardRef(
+  ({
+    label,
+    error,
+    required,
+    options,
+    placeholder,
+    size = "m",
+    className = "",
+    id: idProp,
+    value,
+    defaultValue,
+    onChange,
+    disabled,
+    ...rest
+  }, ref) => {
+    const id = React8.useId();
+    const selectId = idProp ?? id;
+    const [isOpen, setIsOpen] = React8.useState(false);
+    const selectRef = React8.useRef(null);
+    const dropdownRef = React8.useRef(null);
+    const containerRef = React8.useRef(null);
+    const setRef = React8.useCallback(
+      (el) => {
+        selectRef.current = el;
+        if (typeof ref === "function") ref(el);
+        else if (ref) ref.current = el;
+      },
+      [ref]
+    );
+    const currentValue = value !== void 0 ? value : defaultValue ?? "";
+    const selectedOption = currentValue ? options.find((opt) => opt.value === currentValue) : null;
+    const displayValue = selectedOption ? selectedOption.label : placeholder ?? "";
+    React8.useEffect(() => {
+      const handleClickOutside = (e) => {
+        if (containerRef.current && !containerRef.current.contains(e.target) && dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+          setIsOpen(false);
+        }
+      };
+      if (isOpen) {
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+      }
+    }, [isOpen]);
+    const handleOptionClick = (optionValue) => {
+      if (selectRef.current) {
+        const nativeEvent = new Event("change", { bubbles: true });
+        Object.defineProperty(nativeEvent, "target", {
+          writable: false,
+          value: selectRef.current
+        });
+        selectRef.current.value = optionValue;
+        selectRef.current.dispatchEvent(nativeEvent);
+        const reactEvent = {
+          ...nativeEvent,
+          target: selectRef.current,
+          currentTarget: selectRef.current
+        };
+        onChange?.(reactEvent);
+      }
+      setIsOpen(false);
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        setIsOpen(!isOpen);
+      } else if (e.key === "Escape") {
+        setIsOpen(false);
+      } else if (e.key === "ArrowDown" && !isOpen) {
+        e.preventDefault();
+        setIsOpen(true);
+      }
+    };
+    return /* @__PURE__ */ jsxs7(Fragment3, { 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(),
+          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",
+                {
+                  ref: setRef,
+                  id: selectId,
+                  className: "astrum-select__field",
+                  value: value !== void 0 ? value : void 0,
+                  defaultValue: value === void 0 ? defaultValue : void 0,
+                  onChange: (e) => {
+                    onChange?.(e);
+                    setIsOpen(false);
+                  },
+                  onMouseDown: (e) => {
+                    e.preventDefault();
+                    if (!disabled) setIsOpen(!isOpen);
+                  },
+                  onClick: (e) => {
+                    e.preventDefault();
+                    if (!disabled) setIsOpen(!isOpen);
+                  },
+                  disabled,
+                  "aria-invalid": !!error,
+                  "aria-required": required,
+                  "aria-describedby": error ? `${selectId}-error` : void 0,
+                  "aria-expanded": isOpen,
+                  ...rest,
+                  children: [
+                    placeholder && /* @__PURE__ */ jsx8("option", { value: "", disabled: true, hidden: true, children: placeholder }),
+                    options.map((option) => /* @__PURE__ */ jsx8("option", { value: option.value, disabled: option.disabled, children: typeof option.label === "string" ? option.label : option.value }, option.value))
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs7(
+                "button",
+                {
+                  type: "button",
+                  className: "astrum-select__trigger",
+                  onClick: () => !disabled && setIsOpen(!isOpen),
+                  onKeyDown: handleKeyDown,
+                  disabled,
+                  "aria-label": "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0441\u043F\u0438\u0441\u043E\u043A",
+                  "aria-haspopup": "listbox",
+                  "aria-expanded": isOpen,
+                  children: [
+                    /* @__PURE__ */ jsx8("span", { className: `astrum-select__value ${!selectedOption && placeholder ? "astrum-select__value--placeholder" : ""}`, children: displayValue }),
+                    /* @__PURE__ */ jsx8("span", { className: `astrum-select__chevron ${isOpen ? "astrum-select__chevron--open" : ""}`, children: /* @__PURE__ */ jsx8(ChevronDownIcon, {}) })
+                  ]
+                }
+              )
+            ] }),
+            error != null && /* @__PURE__ */ jsx8("div", { className: "astrum-select__footer", children: /* @__PURE__ */ jsx8("span", { id: `${selectId}-error`, className: "astrum-select__error", role: "alert", children: error }) })
+          ]
+        }
+      ),
+      isOpen && /* @__PURE__ */ jsx8("div", { ref: dropdownRef, className: "astrum-select__dropdown", role: "listbox", children: options.map((option) => /* @__PURE__ */ jsx8(
+        "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" : ""}`,
+          onClick: () => !option.disabled && handleOptionClick(option.value),
+          disabled: option.disabled,
+          children: option.label
+        },
+        option.value
+      )) })
+    ] });
+  }
+);
+Select.displayName = "Select";
+
+// src/Chips/Chips.tsx
+import * as React9 from "react";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var CloseIcon = () => /* @__PURE__ */ jsx9("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx9(
+  "path",
+  {
+    d: "M3 3l6 6M9 3l-6 6",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round"
+  }
+) });
+var Chips = React9.forwardRef(
+  ({
+    children,
+    size = "s",
+    onRemove,
+    className = "",
+    onClick,
+    ...rest
+  }, ref) => {
+    const handleRemove = React9.useCallback(
+      (e) => {
+        e.stopPropagation();
+        onRemove?.();
+      },
+      [onRemove]
+    );
+    const handleClick = React9.useCallback(
+      (e) => {
+        if (onRemove && e.target === e.currentTarget) {
+          return;
+        }
+        onClick?.(e);
+      },
+      [onClick, onRemove]
+    );
+    return /* @__PURE__ */ jsxs8(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: `astrum-chips ${size === "s" ? "astrum-chips--s" : "astrum-chips--m"} ${className}`.trim(),
+        onClick: handleClick,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx9("span", { className: "astrum-chips__text", children }),
+          /* @__PURE__ */ jsx9(
+            "button",
+            {
+              type: "button",
+              className: "astrum-chips__remove",
+              onClick: handleRemove,
+              "aria-label": "\u0423\u0434\u0430\u043B\u0438\u0442\u044C",
+              children: /* @__PURE__ */ jsx9(CloseIcon, {})
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+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" })
+] });
+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,
+    multiple = false,
+    disabled = false,
+    size = "large",
+    label,
+    description,
+    buttonText = "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0444\u0430\u0439\u043B\u044B",
+    onChange,
+    className = ""
+  }, ref) => {
+    const inputRef = React10.useRef(null);
+    const [isDragging, setIsDragging] = React10.useState(false);
+    const [files, setFiles] = React10.useState(null);
+    const setRef = React10.useCallback(
+      (el) => {
+        inputRef.current = el;
+        if (typeof ref === "function") ref(el);
+        else if (ref) ref.current = el;
+      },
+      [ref]
+    );
+    const handleDragEnter = React10.useCallback((e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!disabled) setIsDragging(true);
+    }, [disabled]);
+    const handleDragLeave = React10.useCallback((e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(false);
+    }, []);
+    const handleDragOver = React10.useCallback((e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    }, []);
+    const handleDrop = React10.useCallback(
+      (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+        if (disabled) return;
+        const droppedFiles = e.dataTransfer.files;
+        if (droppedFiles.length > 0) {
+          setFiles(droppedFiles);
+          onChange?.(droppedFiles);
+        }
+      },
+      [disabled, onChange]
+    );
+    const handleFileChange = React10.useCallback(
+      (e) => {
+        const selectedFiles = e.target.files;
+        if (selectedFiles && selectedFiles.length > 0) {
+          setFiles(selectedFiles);
+          onChange?.(selectedFiles);
+        }
+      },
+      [onChange]
+    );
+    const handleButtonClick = React10.useCallback(() => {
+      if (!disabled && inputRef.current) {
+        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");
+    return /* @__PURE__ */ jsxs9(
+      "div",
+      {
+        className: `astrum-file-upload ${size === "compact" ? "astrum-file-upload--compact" : "astrum-file-upload--large"} ${isDragging ? "astrum-file-upload--dragging" : ""} ${disabled ? "astrum-file-upload--disabled" : ""} ${className}`.trim(),
+        onDragEnter: handleDragEnter,
+        onDragLeave: handleDragLeave,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        children: [
+          /* @__PURE__ */ jsx10(
+            "input",
+            {
+              ref: setRef,
+              type: "file",
+              accept,
+              multiple,
+              disabled,
+              onChange: handleFileChange,
+              className: "astrum-file-upload__input",
+              "aria-label": defaultLabel
+            }
+          ),
+          size === "large" ? /* @__PURE__ */ jsxs9(Fragment4, { 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 }),
+            /* @__PURE__ */ jsx10(Button, { variant: "primary", size: "m", onClick: handleButtonClick, disabled, children: buttonText })
+          ] }) : /* @__PURE__ */ jsx10("div", { className: "astrum-file-upload__compact-content", children: /* @__PURE__ */ jsxs9("span", { className: "astrum-file-upload__compact-text", children: [
+            /* @__PURE__ */ jsx10(
+              "button",
+              {
+                type: "button",
+                className: "astrum-file-upload__compact-link",
+                onClick: handleButtonClick,
+                disabled,
+                children: "\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"
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+FileUpload.displayName = "FileUpload";
+var FileItem = React10.forwardRef(
+  ({ name, size, icon, onRemove, className = "" }, ref) => {
+    const formatSize = React10.useCallback((sizeValue) => {
+      if (!sizeValue) return "";
+      if (typeof sizeValue === "string") return sizeValue;
+      if (sizeValue < 1024) return `${sizeValue} B`;
+      if (sizeValue < 1024 * 1024) return `${(sizeValue / 1024).toFixed(0)} KB`;
+      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__ */ 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(
+        "button",
+        {
+          type: "button",
+          className: "astrum-file-item__remove",
+          onClick: onRemove,
+          "aria-label": "\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0444\u0430\u0439\u043B",
+          children: /* @__PURE__ */ jsx10(CloseIcon2, {})
+        }
+      )
+    ] });
+  }
+);
+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";
+function cn(...args) {
+  return args.flatMap(
+    (x) => typeof x === "object" && x !== null ? Object.entries(x).filter(([, v]) => v).map(([k]) => k) : x
+  ).filter(Boolean).join(" ");
+}
+var UserIcon = () => /* @__PURE__ */ jsx11("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx11("path", { d: "M16 4C13.6266 4 11.3066 4.70379 9.33316 6.02236C7.35977 7.34094 5.8217 9.21508 4.91345 11.4078C4.0052 13.6005 3.76756 16.0133 4.23058 18.3411C4.6936 20.6689 5.83649 22.807 7.51472 24.4853C9.19295 26.1635 11.3311 27.3064 13.6589 27.7694C15.9867 28.2324 18.3995 27.9948 20.5922 27.0865C22.7849 26.1783 24.6591 24.6402 25.9776 22.6668C27.2962 20.6934 28 18.3734 28 16C27.9988 12.8178 26.7342 9.76618 24.484 7.51599C22.2338 5.2658 19.1822 4.00115 16 4ZM16 8.8C16.5807 8.8 17.1483 8.97219 17.6312 9.2948C18.114 9.61742 18.4903 10.076 18.7125 10.6124C18.9347 11.1489 18.9929 11.7393 18.8796 12.3088C18.7663 12.8783 18.4867 13.4015 18.0761 13.8121C17.6655 14.2227 17.1423 14.5023 16.5728 14.6156C16.0033 14.7289 15.4129 14.6707 14.8764 14.4485C14.34 14.2263 13.8814 13.85 13.5588 13.3672C13.2362 12.8843 13.064 12.3167 13.064 11.736C13.0645 10.9575 13.374 10.211 13.9245 9.66049C14.475 9.11 15.2215 8.80051 16 8.8ZM21.224 21.2C21.2242 21.7291 21.0147 22.2368 20.6413 22.6117C20.2679 22.9866 19.7611 23.1981 19.232 23.2H12.768C12.2389 23.1981 11.7321 22.9866 11.3587 22.6117C10.9853 22.2368 10.7758 21.7291 10.776 21.2V19.864C10.7768 18.8182 11.1925 17.8155 11.932 17.076C12.6715 16.3365 13.6742 15.9208 14.72 15.92H17.28C18.3258 15.9208 19.3285 16.3365 20.068 17.076C20.8075 17.8155 21.2232 18.8182 21.224 19.864V21.2Z", fill: "#ABABAB" }) });
+var EditIcon = () => /* @__PURE__ */ jsxs10("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__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 Avatar = React11.forwardRef(
+  ({
+    src,
+    alt = "Avatar",
+    size = 56,
+    onUpload,
+    onEdit,
+    onRemove,
+    className
+  }, ref) => {
+    const [isHovered, setIsHovered] = React11.useState(false);
+    const fileInputRef = React11.useRef(null);
+    const handleFileChange = React11.useCallback(
+      (e) => {
+        const file = e.target.files?.[0];
+        if (file && onUpload) {
+          onUpload(file);
+        }
+        if (fileInputRef.current) {
+          fileInputRef.current.value = "";
+        }
+      },
+      [onUpload]
+    );
+    const handleClick = React11.useCallback(() => {
+      if (src) {
+        if (onEdit) {
+          onEdit();
+        } else if (fileInputRef.current) {
+          fileInputRef.current.click();
+        }
+      } else {
+        if (fileInputRef.current) {
+          fileInputRef.current.click();
+        }
+      }
+    }, [src, onEdit]);
+    const handleRemove = React11.useCallback(
+      (e) => {
+        e.stopPropagation();
+        if (onRemove) {
+          onRemove();
+        }
+      },
+      [onRemove]
+    );
+    const hasImage = Boolean(src);
+    return /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        ref,
+        className: cn(
+          "astrum-avatar",
+          {
+            "astrum-avatar--has-image": hasImage,
+            "astrum-avatar--hovered": isHovered
+          },
+          className
+        ),
+        style: { width: size, height: size },
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        onClick: handleClick,
+        children: [
+          onUpload && /* @__PURE__ */ jsx11(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              accept: "image/*",
+              onChange: handleFileChange,
+              className: "astrum-avatar__input"
+            }
+          ),
+          hasImage ? /* @__PURE__ */ jsxs10(Fragment5, { 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 }),
+              (onEdit || onUpload) && /* @__PURE__ */ jsx11("div", { className: "astrum-avatar__edit-icon", "aria-hidden": true, children: /* @__PURE__ */ jsx11(EditIcon, {}) })
+            ] }),
+            onRemove && /* @__PURE__ */ jsx11(
+              "button",
+              {
+                type: "button",
+                className: "astrum-avatar__remove-button",
+                onClick: handleRemove,
+                "aria-label": "\u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0430\u0432\u0430\u0442\u0430\u0440",
+                children: /* @__PURE__ */ jsx11(CrossIcon, {})
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs10("div", { className: "astrum-avatar__body", children: [
+            /* @__PURE__ */ jsx11("div", { className: "astrum-avatar__placeholder", "aria-hidden": true, children: /* @__PURE__ */ jsx11("span", { className: "astrum-avatar__user-icon", children: /* @__PURE__ */ jsx11(UserIcon, {}) }) }),
+            /* @__PURE__ */ jsx11("div", { className: "astrum-avatar__overlay", "aria-hidden": true }),
+            /* @__PURE__ */ jsx11("div", { className: "astrum-avatar__add-icon", "aria-hidden": true, children: /* @__PURE__ */ jsx11(EditIcon, {}) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+export {
+  Avatar,
+  Button,
+  Checkbox,
+  Chips,
+  ColorPicker,
+  FileItem,
+  FileUpload,
+  Input,
+  InputCode,
+  Radio,
+  RadioGroup,
+  Select,
+  Toggler
+};
+//# sourceMappingURL=index.mjs.map