@zelelo/iskra-ui 0.1.1 → 0.2.0

package/dist/index.cjs

@@ -28,14 +28,17 @@ __export(index_exports, {
   Badge: () => Badge,
   Button: () => Button,
   Checkbox: () => Checkbox,
+  Divider: () => Divider,
   Input: () => Input,
   Modal: () => Modal,
+  ProgressBar: () => ProgressBar,
   Radio: () => Radio,
   RadioGroup: () => RadioGroup,
   Skeleton: () => Skeleton,
   Spinner: () => Spinner,
   Switch: () => Switch,
   Tabs: () => Tabs,
+  Textarea: () => Textarea,
   Toast: () => Toast,
   ToastProvider: () => ToastProvider,
   Tooltip: () => Tooltip,
@@ -434,29 +437,123 @@ var Checkbox = (0, import_react8.forwardRef)(
 );
 Checkbox.displayName = "Checkbox";
 
-// src/components/Input/Input.tsx
+// src/components/Divider/Divider.tsx
 var import_react9 = require("react");
 
+// src/components/Divider/Divider.module.css
+var Divider_default = {
+  divider: "Divider_divider",
+  horizontal: "Divider_horizontal",
+  vertical: "Divider_vertical",
+  withLabel: "Divider_withLabel",
+  label: "Divider_label",
+  start: "Divider_start",
+  end: "Divider_end"
+};
+
+// src/components/Divider/Divider.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Divider = ({
+  orientation = "horizontal",
+  decorative = false,
+  thickness,
+  labelPosition = "center",
+  className,
+  style,
+  children,
+  ...props
+}) => {
+  const hasLabel = Boolean(children) && orientation === "horizontal";
+  const classes = cx(
+    Divider_default.divider,
+    Divider_default[orientation],
+    hasLabel && Divider_default.withLabel,
+    hasLabel && Divider_default[labelPosition],
+    className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "div",
+    {
+      className: classes,
+      style: { ...style, "--divider-thickness": toCss(thickness) },
+      role: hasLabel ? void 0 : decorative ? "none" : "separator",
+      "aria-orientation": !decorative && orientation === "vertical" ? "vertical" : void 0,
+      ...props,
+      children: hasLabel && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: Divider_default.label, children })
+    }
+  );
+};
+Divider.displayName = "Divider";
+
+// src/components/Input/Input.tsx
+var import_react11 = require("react");
+
+// src/components/FormField/FormField.tsx
+var import_react10 = require("react");
+
+// src/components/FormField/FormField.module.css
+var FormField_default = {
+  sm: "FormField_sm",
+  md: "FormField_md",
+  lg: "FormField_lg",
+  root: "FormField_root",
+  label: "FormField_label",
+  required: "FormField_required",
+  box: "FormField_box",
+  disabled: "FormField_disabled",
+  invalid: "FormField_invalid",
+  message: "FormField_message",
+  error: "FormField_error"
+};
+
+// src/components/FormField/FormField.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var FormField = ({
+  id,
+  label,
+  hint,
+  error,
+  required,
+  disabled,
+  size = "md",
+  className,
+  "aria-describedby": ariaDescribedBy,
+  children
+}) => {
+  const autoId = (0, import_react10.useId)();
+  const controlId = id ?? autoId;
+  const hasError = Boolean(error);
+  const message = hasError ? error : hint;
+  const messageId = message ? `${controlId}-message` : void 0;
+  const describedBy = [ariaDescribedBy, messageId].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cx(FormField_default.root, FormField_default[size], className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { htmlFor: controlId, className: FormField_default.label, children: [
+      label,
+      required && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: FormField_default.required, "aria-hidden": "true", children: " *" })
+    ] }),
+    children({
+      controlProps: {
+        id: controlId,
+        "aria-describedby": describedBy,
+        "aria-invalid": hasError || void 0
+      },
+      boxClassName: cx(FormField_default.box, hasError && FormField_default.invalid, disabled && FormField_default.disabled)
+    }),
+    message && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { id: messageId, className: cx(FormField_default.message, hasError && FormField_default.error), children: message })
+  ] });
+};
+FormField.displayName = "FormField";
+
 // src/components/Input/Input.module.css
 var Input_default = {
-  sm: "Input_sm",
-  md: "Input_md",
-  lg: "Input_lg",
-  root: "Input_root",
-  label: "Input_label",
-  required: "Input_required",
-  field: "Input_field",
-  disabled: "Input_disabled",
-  invalid: "Input_invalid",
+  box: "Input_box",
   input: "Input_input",
-  icon: "Input_icon",
-  message: "Input_message",
-  error: "Input_error"
+  icon: "Input_icon"
 };
 
 // src/components/Input/Input.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var Input = (0, import_react9.forwardRef)(
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Input = (0, import_react11.forwardRef)(
   ({
     size = "md",
     label,
@@ -470,44 +567,40 @@ var Input = (0, import_react9.forwardRef)(
     disabled,
     "aria-describedby": ariaDescribedBy,
     ...props
-  }, ref) => {
-    const autoId = (0, import_react9.useId)();
-    const inputId = id ?? autoId;
-    const hasError = Boolean(error);
-    const message = hasError ? error : hint;
-    const messageId = message ? `${inputId}-message` : void 0;
-    const describeBy = [ariaDescribedBy, messageId].filter(Boolean).join(" ") || void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cx(Input_default.root, Input_default[size], className), children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { htmlFor: inputId, className: Input_default.label, children: [
-        label,
-        " ",
-        required && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: Input_default.required, "aria-hidden": "true", children: " *" })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cx(Input_default.field, hasError && Input_default.invalid, disabled && Input_default.disabled), children: [
-        startIcon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: Input_default.icon, children: startIcon }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    FormField,
+    {
+      id,
+      size,
+      label,
+      hint,
+      error,
+      required,
+      disabled,
+      className,
+      "aria-describedby": ariaDescribedBy,
+      children: ({ controlProps, boxClassName }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cx(boxClassName, Input_default.box), children: [
+        startIcon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: Input_default.icon, children: startIcon }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "input",
           {
             ref,
-            id: inputId,
+            ...controlProps,
             required,
             disabled,
-            "aria-invalid": hasError || void 0,
-            "aria-describedby": describeBy,
             className: Input_default.input,
             ...props
           }
         ),
-        endIcon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: Input_default.icon, children: endIcon })
-      ] }),
-      message && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { id: messageId, className: cx(Input_default.message, hasError && Input_default.error), children: message })
-    ] });
-  }
+        endIcon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: Input_default.icon, children: endIcon })
+      ] })
+    }
+  )
 );
 Input.displayName = "Input";
 
 // src/components/Modal/Modal.tsx
-var import_react10 = require("react");
+var import_react12 = require("react");
 
 // src/components/Modal/Modal.module.css
 var Modal_default = {
@@ -526,7 +619,7 @@ var Modal_default = {
 };
 
 // src/components/Modal/Modal.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var Modal = ({
   open,
   onClose,
@@ -536,9 +629,9 @@ var Modal = ({
   width,
   children
 }) => {
-  const ref = (0, import_react10.useRef)(null);
-  const titleId = (0, import_react10.useId)();
-  (0, import_react10.useEffect)(() => {
+  const ref = (0, import_react12.useRef)(null);
+  const titleId = (0, import_react12.useId)();
+  (0, import_react12.useEffect)(() => {
     if (open) {
       ref.current?.showModal();
     } else {
@@ -549,7 +642,7 @@ var Modal = ({
   return (
     // Escape у <dialog> уже закрывает модалку с клавиатуры
     // oxlint-disable-next-line jsx-a11y/click-events-have-key-events jsx-a11y/no-noninteractive-element-interactions
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "dialog",
       {
         ref,
@@ -558,13 +651,13 @@ var Modal = ({
         "aria-labelledby": title ? titleId : void 0,
         onClose,
         onClick: (e) => e.target === e.currentTarget && close(),
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: Modal_default.content, children: [
-          title && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("header", { className: Modal_default.header, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h2", { id: titleId, className: Modal_default.title, children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("button", { type: "button", className: Modal_default.close, "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", onClick: close, children: "\xD7" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: Modal_default.content, children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("header", { className: Modal_default.header, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h2", { id: titleId, className: Modal_default.title, children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", className: Modal_default.close, "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", onClick: close, children: "\xD7" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: Modal_default.body, children }),
-          footer && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("footer", { className: Modal_default.footer, children: footer })
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: Modal_default.body, children }),
+          footer && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("footer", { className: Modal_default.footer, children: footer })
         ] })
       }
     )
@@ -572,12 +665,62 @@ var Modal = ({
 };
 Modal.displayName = "Modal";
 
+// src/components/ProgressBar/ProgressBar.module.css
+var ProgressBar_default = {
+  progress: "ProgressBar_progress",
+  sm: "ProgressBar_sm",
+  md: "ProgressBar_md",
+  lg: "ProgressBar_lg",
+  success: "ProgressBar_success",
+  danger: "ProgressBar_danger",
+  fill: "ProgressBar_fill",
+  indeterminate: "ProgressBar_indeterminate"
+};
+
+// src/components/ProgressBar/ProgressBar.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var ProgressBar = ({
+  value,
+  max = 100,
+  size = "md",
+  variant = "accent",
+  className,
+  style,
+  ...props
+}) => {
+  const isIndenterminate = value === void 0;
+  const safeMax = max > 0 ? max : 100;
+  const clamped = isIndenterminate ? 0 : Math.min(Math.max(value, 0), safeMax);
+  const percent = clamped / safeMax * 100;
+  const classes = cx(
+    ProgressBar_default.progress,
+    ProgressBar_default[size],
+    ProgressBar_default[variant],
+    isIndenterminate && ProgressBar_default.indeterminate,
+    className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "div",
+    {
+      className: classes,
+      style: { ...style, "--progress-offset": `${percent - 100}%` },
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": safeMax,
+      "aria-valuenow": isIndenterminate ? void 0 : clamped,
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: ProgressBar_default.fill })
+    }
+  );
+};
+ProgressBar.displayName = "ProgressBar";
+
 // src/components/Radio/Radio.tsx
-var import_react12 = require("react");
+var import_react14 = require("react");
 
 // src/components/RadioGroup/RadioGroupProvider/context.ts
-var import_react11 = require("react");
-var RadioGroupContext = (0, import_react11.createContext)(null);
+var import_react13 = require("react");
+var RadioGroupContext = (0, import_react13.createContext)(null);
 
 // src/components/Radio/Radio.module.css
 var Radio_default = {
@@ -594,8 +737,8 @@ var Radio_default = {
 };
 
 // src/components/Radio/Radio.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var Radio = (0, import_react12.forwardRef)(
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Radio = (0, import_react14.forwardRef)(
   ({
     size = "md",
     label,
@@ -611,8 +754,8 @@ var Radio = (0, import_react12.forwardRef)(
     "aria-describedby": ariaDescribedBy,
     ...props
   }, ref) => {
-    const group = (0, import_react12.useContext)(RadioGroupContext);
-    const autoId = (0, import_react12.useId)();
+    const group = (0, import_react14.useContext)(RadioGroupContext);
+    const autoId = (0, import_react14.useId)();
     const radioId = id ?? autoId;
     const hasError = Boolean(error);
     const messageId = hasError ? `${radioId}-message` : void 0;
@@ -625,7 +768,7 @@ var Radio = (0, import_react12.forwardRef)(
       onChange?.(event);
       group?.onChange(event.target.value);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       "div",
       {
         className: cx(
@@ -636,8 +779,8 @@ var Radio = (0, import_react12.forwardRef)(
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: Radio_default.label, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("label", { className: Radio_default.label, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               "input",
               {
                 ref,
@@ -655,9 +798,9 @@ var Radio = (0, import_react12.forwardRef)(
               }
             ),
             label,
-            required && !group && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: Radio_default.required, "aria-hidden": "true", children: " *" })
+            required && !group && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: Radio_default.required, "aria-hidden": "true", children: " *" })
           ] }),
-          hasError && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { id: messageId, className: Radio_default.error, children: error })
+          hasError && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { id: messageId, className: Radio_default.error, children: error })
         ]
       }
     );
@@ -666,11 +809,11 @@ var Radio = (0, import_react12.forwardRef)(
 Radio.displayName = "Radio";
 
 // src/components/RadioGroup/RadioGroup.tsx
-var import_react14 = require("react");
+var import_react16 = require("react");
 
 // src/components/RadioGroup/RadioGroupProvider/RadioGroupProvider.tsx
-var import_react13 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var RadioGroupProvider = ({
   name,
   value: controlledValue,
@@ -680,10 +823,10 @@ var RadioGroupProvider = ({
   required,
   children
 }) => {
-  const [uncontrolledValue, setUncontrolledValue] = (0, import_react13.useState)(defaultValue);
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react15.useState)(defaultValue);
   const isControlled = controlledValue !== void 0;
   const currentValue = isControlled ? controlledValue : uncontrolledValue;
-  const autoId = (0, import_react13.useId)();
+  const autoId = (0, import_react15.useId)();
   const finalName = name ?? `radiogroup-${autoId}`;
   const handleChange = (newValue) => {
     if (!isControlled) {
@@ -691,7 +834,7 @@ var RadioGroupProvider = ({
     }
     onChange?.(newValue);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     RadioGroupContext.Provider,
     {
       value: {
@@ -717,7 +860,7 @@ var RadioGroup_default = {
 };
 
 // src/components/RadioGroup/RadioGroup.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var RadioGroup = ({
   value,
   defaultValue,
@@ -731,10 +874,10 @@ var RadioGroup = ({
   children,
   ...props
 }) => {
-  const labelId = (0, import_react14.useId)();
-  const messageId = (0, import_react14.useId)();
+  const labelId = (0, import_react16.useId)();
+  const messageId = (0, import_react16.useId)();
   const hasError = Boolean(error);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     RadioGroupProvider,
     {
       name,
@@ -743,7 +886,7 @@ var RadioGroup = ({
       onChange,
       disabled,
       required,
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
         "div",
         {
           className: cx(RadioGroup_default.root, disabled && RadioGroup_default.disabled, className),
@@ -754,12 +897,12 @@ var RadioGroup = ({
           "aria-required": required || void 0,
           ...props,
           children: [
-            label && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { id: labelId, className: RadioGroup_default.groupLabel, children: [
+            label && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { id: labelId, className: RadioGroup_default.groupLabel, children: [
               label,
-              required && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: RadioGroup_default.required, "aria-hidden": "true", children: " *" })
+              required && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: RadioGroup_default.required, "aria-hidden": "true", children: " *" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: RadioGroup_default.options, children }),
-            hasError && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { id: messageId, className: RadioGroup_default.error, children: error })
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: RadioGroup_default.options, children }),
+            hasError && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { id: messageId, className: RadioGroup_default.error, children: error })
           ]
         }
       )
@@ -782,7 +925,7 @@ var Skeleton_default = {
 };
 
 // src/components/Skeleton/Skeleton.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var Skeleton = ({
   variant = "text",
   width,
@@ -806,14 +949,14 @@ var Skeleton = ({
     borderRadius: toCss(radius)
   };
   if (variant === "text" && lines > 1) {
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "span",
       {
         className: cx(Skeleton_default.lines, className),
         style: { width: sizeStyle.width, ...style },
         "aria-hidden": "true",
         ...props,
-        children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "span",
           {
             className: baseClasses,
@@ -824,14 +967,14 @@ var Skeleton = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "span",
     {
       className: cx(baseClasses, children != null && Skeleton_default.withChildren, className),
       style: { ...sizeStyle, ...style },
       "aria-hidden": "true",
       ...props,
-      children: children != null && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: Skeleton_default.hidden, children })
+      children: children != null && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: Skeleton_default.hidden, children })
     }
   );
 };
@@ -861,7 +1004,7 @@ var Spinner_default = {
 };
 
 // src/components/Spinner/Spinner.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var Spinner = ({
   variant = "circle",
   size = "md",
@@ -872,7 +1015,7 @@ var Spinner = ({
   ...props
 }) => {
   const { items } = SPINNER_VARIANTS[variant];
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "span",
     {
       role: "status",
@@ -880,14 +1023,14 @@ var Spinner = ({
       className: cx(Spinner_default.spinner, Spinner_default[variant], Spinner_default[size], className),
       style: { ...style, ...color && { color } },
       ...props,
-      children: Array.from({ length: items }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: Spinner_default.item, style: { "--i": i } }, i))
+      children: Array.from({ length: items }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: Spinner_default.item, style: { "--i": i } }, i))
     }
   );
 };
 Spinner.displayName = "Spinner";
 
 // src/components/Switch/Switch.tsx
-var import_react15 = require("react");
+var import_react17 = require("react");
 
 // src/components/Switch/Switch.module.css
 var Switch_default = {
@@ -902,10 +1045,10 @@ var Switch_default = {
 };
 
 // src/components/Switch/Switch.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var Switch = (0, import_react15.forwardRef)(
-  ({ size = "md", label, className, disabled, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("label", { className: cx(Switch_default.root, Switch_default[size], disabled && Switch_default.disabled, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var Switch = (0, import_react17.forwardRef)(
+  ({ size = "md", label, className, disabled, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { className: cx(Switch_default.root, Switch_default[size], disabled && Switch_default.disabled, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "input",
       {
         ref,
@@ -917,13 +1060,13 @@ var Switch = (0, import_react15.forwardRef)(
         ...props
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: Switch_default.track, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: Switch_default.thumb }) }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: Switch_default.label, children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: Switch_default.track, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: Switch_default.thumb }) }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: Switch_default.label, children: label })
   ] })
 );
 
 // src/components/Tabs/Tabs.tsx
-var import_react16 = require("react");
+var import_react18 = require("react");
 
 // src/components/Tabs/Tabs.module.css
 var Tabs_default = {
@@ -934,14 +1077,14 @@ var Tabs_default = {
 };
 
 // src/components/Tabs/Tabs.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var Tabs = ({ items, defaultValue, onChange, className }) => {
-  const [active, setActive] = (0, import_react16.useState)(() => {
+  const [active, setActive] = (0, import_react18.useState)(() => {
     const isSelectable = items.some((item) => item.value === defaultValue && !item.disabled);
     return isSelectable ? defaultValue : items.find((item) => !item.disabled)?.value;
   });
-  const id = (0, import_react16.useId)();
-  const tabRefs = (0, import_react16.useRef)([]);
+  const id = (0, import_react18.useId)();
+  const tabRefs = (0, import_react18.useRef)([]);
   const activeIndex = items.findIndex((item) => item.value === active);
   const select = (value) => {
     if (value === active) return;
@@ -972,10 +1115,10 @@ var Tabs = ({ items, defaultValue, onChange, className }) => {
     tabRefs.current[next]?.focus();
     select(items[next].value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: cx(Tabs_default.tabs, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { role: "tablist", className: Tabs_default.list, children: items.map((item, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cx(Tabs_default.tabs, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { role: "tablist", className: Tabs_default.list, children: items.map((item, index) => {
       const selected = index === activeIndex;
-      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         "button",
         {
           ref: (el) => {
@@ -996,7 +1139,7 @@ var Tabs = ({ items, defaultValue, onChange, className }) => {
         item.value
       );
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "div",
       {
         role: "tabpanel",
@@ -1011,8 +1154,62 @@ var Tabs = ({ items, defaultValue, onChange, className }) => {
 };
 Tabs.displayName = "Tabs";
 
+// src/components/Textarea/Textarea.tsx
+var import_react19 = require("react");
+
+// src/components/Textarea/Textarea.module.css
+var Textarea_default = {
+  textarea: "Textarea_textarea",
+  resizeNone: "Textarea_resizeNone"
+};
+
+// src/components/Textarea/Textarea.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var Textarea = (0, import_react19.forwardRef)(
+  ({
+    size = "md",
+    label,
+    hint,
+    error,
+    resize = "vertical",
+    rows = 3,
+    className,
+    id,
+    required,
+    disabled,
+    "aria-describedby": ariaDescribedBy,
+    ...props
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    FormField,
+    {
+      id,
+      size,
+      label,
+      hint,
+      error,
+      required,
+      disabled,
+      className,
+      "aria-describedby": ariaDescribedBy,
+      children: ({ controlProps, boxClassName }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        "textarea",
+        {
+          ref,
+          ...controlProps,
+          rows,
+          required,
+          disabled,
+          className: cx(boxClassName, Textarea_default.textarea, resize === "none" && Textarea_default.resizeNone),
+          ...props
+        }
+      )
+    }
+  )
+);
+Textarea.displayName = "Textarea";
+
 // src/components/Toast/Toast.tsx
-var import_react17 = require("react");
+var import_react20 = require("react");
 
 // src/components/Toast/Toast.module.css
 var Toast_default = {
@@ -1029,7 +1226,7 @@ var Toast_default = {
 };
 
 // src/components/Toast/Toast.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var Toast = ({
   variant = "info",
   title,
@@ -1042,25 +1239,25 @@ var Toast = ({
   onMouseLeave,
   ...props
 }) => {
-  const [visible, setVisible] = (0, import_react17.useState)(true);
-  const timerRef = (0, import_react17.useRef)();
-  const remainingRef = (0, import_react17.useRef)(duration);
-  const startedAtRef = (0, import_react17.useRef)(0);
-  const onCloseRef = (0, import_react17.useRef)(onClose);
-  (0, import_react17.useEffect)(() => {
+  const [visible, setVisible] = (0, import_react20.useState)(true);
+  const timerRef = (0, import_react20.useRef)();
+  const remainingRef = (0, import_react20.useRef)(duration);
+  const startedAtRef = (0, import_react20.useRef)(0);
+  const onCloseRef = (0, import_react20.useRef)(onClose);
+  (0, import_react20.useEffect)(() => {
     onCloseRef.current = onClose;
   }, [onClose]);
-  const handleClose = (0, import_react17.useCallback)(() => {
+  const handleClose = (0, import_react20.useCallback)(() => {
     setVisible(false);
     onCloseRef.current?.();
   }, []);
-  const clearTimer = (0, import_react17.useCallback)(() => {
+  const clearTimer = (0, import_react20.useCallback)(() => {
     if (timerRef.current) {
       clearTimeout(timerRef.current);
       timerRef.current = void 0;
     }
   }, []);
-  const startTimer = (0, import_react17.useCallback)(
+  const startTimer = (0, import_react20.useCallback)(
     (ms) => {
       if (ms <= 0) return;
       startedAtRef.current = Date.now();
@@ -1068,7 +1265,7 @@ var Toast = ({
     },
     [handleClose]
   );
-  (0, import_react17.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     startTimer(remainingRef.current);
     return clearTimer;
   }, [startTimer, clearTimer]);
@@ -1085,7 +1282,7 @@ var Toast = ({
     return null;
   }
   const classes = cx(Toast_default.toast, Toast_default[variant], className);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "div",
     {
       className: classes,
@@ -1093,11 +1290,11 @@ var Toast = ({
       onMouseLeave: handleMouseLeave,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: Toast_default.content, role: "status", "aria-live": "polite", children: [
-          title && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: Toast_default.title, children: title }),
-          children && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: Toast_default.description, children })
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: Toast_default.content, role: "status", "aria-live": "polite", children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: Toast_default.title, children: title }),
+          children && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: Toast_default.description, children })
         ] }),
-        closable && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        closable && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "button",
           {
             type: "button",
@@ -1114,7 +1311,7 @@ var Toast = ({
 Toast.displayName = "Toast";
 
 // src/components/Toast/ToastProvider/ToastProvider.tsx
-var import_react18 = require("react");
+var import_react21 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/components/Toast/ToastProvider/ToastContainer.module.css
@@ -1129,39 +1326,39 @@ var ToastContainer_default = {
 };
 
 // src/components/Toast/ToastProvider/ToastProvider.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var idCounter = 0;
 var nextId = () => `toast-${Date.now()}-${idCounter++}`;
-var ToastContext = (0, import_react18.createContext)(null);
+var ToastContext = (0, import_react21.createContext)(null);
 var ToastProvider = ({
   children,
   position = "top-right"
 }) => {
-  const [toasts, setToasts] = (0, import_react18.useState)([]);
-  const close = (0, import_react18.useCallback)((id) => {
+  const [toasts, setToasts] = (0, import_react21.useState)([]);
+  const close = (0, import_react21.useCallback)((id) => {
     setToasts((prev) => prev.filter((toast) => toast.id !== id));
   }, []);
-  const show = (0, import_react18.useCallback)((options) => {
+  const show = (0, import_react21.useCallback)((options) => {
     const id = nextId();
     setToasts((prev) => [...prev, { id, ...options }]);
     return id;
   }, []);
-  const value = (0, import_react18.useMemo)(() => {
+  const value = (0, import_react21.useMemo)(() => {
     return { show, close };
   }, [show, close]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(ToastContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(ToastContext.Provider, { value, children: [
     children,
     typeof document !== "undefined" && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cx(ToastContainer_default.container, ToastContainer_default[position]), children: toasts.map(({ id, description, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Toast, { ...rest, onClose: () => close(id), children: description }, id)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cx(ToastContainer_default.container, ToastContainer_default[position]), children: toasts.map(({ id, description, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Toast, { ...rest, onClose: () => close(id), children: description }, id)) }),
       document.body
     )
   ] });
 };
 
 // src/components/Toast/ToastProvider/hook/useToast.ts
-var import_react19 = require("react");
+var import_react22 = require("react");
 var useToast = () => {
-  const ctx = (0, import_react19.useContext)(ToastContext);
+  const ctx = (0, import_react22.useContext)(ToastContext);
   if (!ctx) {
     throw new Error("useToast \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D \u0432\u043D\u0435 ToastProvider");
   }
@@ -1177,8 +1374,8 @@ var useToast = () => {
 };
 
 // src/components/Tooltip/Tooltip.tsx
-var import_react20 = require("react");
-var import_react21 = require("@floating-ui/react");
+var import_react23 = require("react");
+var import_react24 = require("@floating-ui/react");
 
 // src/components/Tooltip/Tooltip.module.css
 var Tooltip_default = {
@@ -1188,7 +1385,7 @@ var Tooltip_default = {
 };
 
 // src/components/Tooltip/Tooltip.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var Tooltip = ({
   content,
   children,
@@ -1197,35 +1394,35 @@ var Tooltip = ({
   className,
   ...props
 }) => {
-  const [open, setOpen] = (0, import_react20.useState)(false);
+  const [open, setOpen] = (0, import_react23.useState)(false);
   const {
     refs,
     floatingStyles,
     context,
     placement: finalPlacement
-  } = (0, import_react21.useFloating)({
+  } = (0, import_react24.useFloating)({
     open,
     onOpenChange: setOpen,
     placement,
-    whileElementsMounted: import_react21.autoUpdate,
-    middleware: [(0, import_react21.offset)(8), (0, import_react21.flip)(), (0, import_react21.shift)({ padding: 8 })]
+    whileElementsMounted: import_react24.autoUpdate,
+    middleware: [(0, import_react24.offset)(8), (0, import_react24.flip)(), (0, import_react24.shift)({ padding: 8 })]
   });
-  const hover = (0, import_react21.useHover)(context, { delay: { open: delay, close: 0 } });
-  const focus = (0, import_react21.useFocus)(context);
-  const role = (0, import_react21.useRole)(context, { role: "tooltip" });
-  const { getReferenceProps, getFloatingProps } = (0, import_react21.useInteractions)([hover, focus, role]);
-  const childRef = (0, import_react20.isValidElement)(children) ? children.props?.ref ?? children.ref : null;
-  const mergedRef = (0, import_react21.useMergeRefs)([refs.setReference, childRef]);
-  const child = (0, import_react20.isValidElement)(children) ? (0, import_react20.cloneElement)(
+  const hover = (0, import_react24.useHover)(context, { delay: { open: delay, close: 0 } });
+  const focus = (0, import_react24.useFocus)(context);
+  const role = (0, import_react24.useRole)(context, { role: "tooltip" });
+  const { getReferenceProps, getFloatingProps } = (0, import_react24.useInteractions)([hover, focus, role]);
+  const childRef = (0, import_react23.isValidElement)(children) ? children.props?.ref ?? children.ref : null;
+  const mergedRef = (0, import_react24.useMergeRefs)([refs.setReference, childRef]);
+  const child = (0, import_react23.isValidElement)(children) ? (0, import_react23.cloneElement)(
     children,
     getReferenceProps({
       ...children.props,
       ref: mergedRef
     })
-  ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { ref: refs.setReference, ...getReferenceProps(), children });
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+  ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { ref: refs.setReference, ...getReferenceProps(), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
     child,
-    open && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    open && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
       "div",
       {
         ref: refs.setFloating,
@@ -1235,7 +1432,7 @@ var Tooltip = ({
         ...getFloatingProps(props),
         children: [
           content,
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: Tooltip_default.arrow })
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: Tooltip_default.arrow })
         ]
       }
     )
@@ -1251,14 +1448,17 @@ var Tooltip = ({
   Badge,
   Button,
   Checkbox,
+  Divider,
   Input,
   Modal,
+  ProgressBar,
   Radio,
   RadioGroup,
   Skeleton,
   Spinner,
   Switch,
   Tabs,
+  Textarea,
   Toast,
   ToastProvider,
   Tooltip,