@neo-ui-kit/react 1.2.3 → 1.3.1

package/dist/chunks/{chunk-RHMNSDIW.js → chunk-TQWTM23C.js}

@@ -1,6 +1,7 @@
 import {
+  themes,
   usePauseOffscreen
-} from "./chunk-YKCUOZ7V.js";
+} from "./chunk-WOUWYJ6U.js";
 import {
   assignRef,
   clamp,
@@ -908,10 +909,167 @@ var FilePicker = (p) => {
   ] });
 };
 
-// src/components/controls/Slider/Slider.tsx
+// src/components/controls/Tab/Tab.tsx
 import { forwardRef as forwardRef3 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var Slider = /* @__PURE__ */ forwardRef3(function Slider2(p, ref) {
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var Tab = /* @__PURE__ */ forwardRef3(function Tab2({
+  selected = false,
+  panelId,
+  icon,
+  endIcon,
+  label,
+  children,
+  tabIndex,
+  variant: _variant,
+  loading: _loading,
+  round: _round,
+  size: _size,
+  tone: _tone,
+  material: _material,
+  ...p
+}, ref) {
+  return /* @__PURE__ */ jsxs7(
+    "button",
+    {
+      ...p,
+      ...mark("Tab", { ...p, size: _size }),
+      ref,
+      type: "button",
+      role: "tab",
+      "aria-selected": selected,
+      "aria-controls": panelId,
+      tabIndex: tabIndex ?? (selected ? 0 : -1),
+      children: [
+        icon && /* @__PURE__ */ jsx10(Icon, { name: icon }),
+        /* @__PURE__ */ jsx10("span", { className: "ad-tab-label", children: children ?? label }),
+        endIcon && /* @__PURE__ */ jsx10(Icon, { name: endIcon })
+      ]
+    }
+  );
+});
+
+// src/components/controls/Tabs/Tabs.tsx
+import { useLayoutEffect as useLayoutEffect3, useRef as useRef6, useState as useState3 } from "react";
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+function Tabs(p) {
+  const tr = useTr();
+  const items = p.items ?? [
+    { value: "appearance", label: tr("\u0412\u043D\u0435\u0448\u043D\u0438\u0439 \u0432\u0438\u0434"), icon: "palette" },
+    { value: "audio", label: tr("\u0410\u0443\u0434\u0438\u043E"), icon: "audio" },
+    { value: "advanced", label: tr("\u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u043E"), icon: "wrench" }
+  ];
+  const [value, setValue] = useControllable(
+    p.value,
+    p.defaultValue ?? items.find((item) => !item.disabled)?.value ?? "",
+    p.onValueChange
+  );
+  const buttons = useRef6([]);
+  const selected = items.findIndex((item) => item.value === value && !item.disabled);
+  const firstEnabled = items.findIndex((item) => !item.disabled);
+  const fallback = items[firstEnabled]?.value;
+  useLayoutEffect3(() => {
+    if (p.value === void 0 && selected < 0 && fallback !== void 0) setValue(fallback);
+  }, [p.value, selected, fallback, setValue]);
+  const [place2, setPlace] = useState3();
+  const [moving, setMoving] = useState3(false);
+  const first = useRef6(true);
+  useLayoutEffect3(() => {
+    const tab = buttons.current[selected];
+    if (!tab) return setPlace(void 0);
+    const update = () => setPlace({
+      "--ad-tabs-x": `${tab.offsetLeft}px`,
+      "--ad-tabs-w": `${tab.offsetWidth}px`
+    });
+    update();
+    const observer = createResizeObserver(update);
+    observer.observe(tab);
+    if (tab.parentElement) observer.observe(tab.parentElement);
+    let timer = 0;
+    if (!first.current) {
+      setMoving(true);
+      timer = window.setTimeout(() => setMoving(false), 420);
+    }
+    first.current = false;
+    return () => {
+      observer.disconnect();
+      clearTimeout(timer);
+    };
+  }, [selected, items.length]);
+  return /* @__PURE__ */ jsxs8(
+    "nav",
+    {
+      ...mark("Tabs", p),
+      role: "tablist",
+      "aria-label": p.label ?? tr("\u0420\u0430\u0437\u0434\u0435\u043B\u044B"),
+      "data-moving": moving || void 0,
+      onPointerDown: (e) => {
+        const tab = e.target.closest(".ad-tab");
+        if (tab && !tab.matches(":disabled")) ripple(tab, e.clientX, e.clientY);
+      },
+      onKeyDown: (e) => {
+        if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key)) return;
+        const available = items.map((item, index) => ({ item, index })).filter((x) => !x.item.disabled);
+        if (!available.length) return;
+        e.preventDefault();
+        const current = available.findIndex(
+          (x) => buttons.current[x.index] === document.activeElement
+        );
+        const next = e.key === "Home" ? 0 : e.key === "End" ? available.length - 1 : (current + (e.key === "ArrowRight" ? 1 : -1) + available.length) % available.length;
+        setValue(available[next].item.value);
+        buttons.current[available[next].index]?.focus();
+      },
+      children: [
+        place2 && /* @__PURE__ */ jsxs8(Fragment3, { children: [
+          /* @__PURE__ */ jsx11("span", { className: "ad-tabs-trail", style: place2, "aria-hidden": true }),
+          /* @__PURE__ */ jsxs8("span", { className: "ad-tabs-indicator", style: place2, "aria-hidden": true, children: [
+            /* @__PURE__ */ jsx11("span", { className: "ad-tabs-halo" }),
+            /* @__PURE__ */ jsx11("span", { className: "ad-tabs-blade", children: /* @__PURE__ */ jsx11("span", { className: "ad-tabs-blade-edge" }) })
+          ] }),
+          /* @__PURE__ */ jsx11("span", { className: "ad-tabs-rail", style: place2, "aria-hidden": true })
+        ] }),
+        items.map((item, index) => /* @__PURE__ */ jsx11(
+          Tab,
+          {
+            id: item.id,
+            ref: (n) => {
+              buttons.current[index] = n;
+            },
+            icon: item.icon,
+            panelId: item.panelId,
+            disabled: item.disabled,
+            size: p.size,
+            selected: item.value === value,
+            tabIndex: index === (selected < 0 ? firstEnabled : selected) ? 0 : -1,
+            onClick: () => setValue(item.value),
+            children: item.label
+          },
+          item.value
+        ))
+      ]
+    }
+  );
+}
+
+// src/components/controls/SegmentedControl/SegmentedControl.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var SegmentedControl = (p) => {
+  const tr = useTr();
+  return /* @__PURE__ */ jsx12("div", { ...mark("SegmentedControl", p), children: /* @__PURE__ */ jsx12(
+    Tabs,
+    {
+      ...p,
+      items: p.items ?? [
+        { value: "list", label: tr("\u0421\u043F\u0438\u0441\u043E\u043A"), icon: "list" },
+        { value: "grid", label: tr("\u041F\u043B\u0438\u0442\u043A\u0430"), icon: "grid" }
+      ]
+    }
+  ) });
+};
+
+// src/components/controls/Slider/Slider.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var Slider = /* @__PURE__ */ forwardRef4(function Slider2(p, ref) {
   const tr = useTr();
   const min = p.min ?? 0, max = Math.max(min, p.max ?? 100);
   const [value, setValue] = useControllable(
@@ -921,7 +1079,7 @@ var Slider = /* @__PURE__ */ forwardRef3(function Slider2(p, ref) {
   );
   const current = clamp(value, min, max), percent = max === min ? 0 : (current - min) / (max - min) * 100;
   const ids = useFieldIds(p.label, void 0, p.id, p);
-  return /* @__PURE__ */ jsx10(FieldFrame, { ids, className: "ad-slider-field", label: p.label, children: /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx13(FieldFrame, { ids, className: "ad-slider-field", label: p.label, children: /* @__PURE__ */ jsx13(
     "input",
     {
       ...mark("Slider", p),
@@ -942,8 +1100,8 @@ var Slider = /* @__PURE__ */ forwardRef3(function Slider2(p, ref) {
 });
 
 // src/components/controls/Switch/Switch.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
-var Switch = (p) => /* @__PURE__ */ jsx11(BooleanControl, { kind: "Switch", ...p });
+import { jsx as jsx14 } from "react/jsx-runtime";
+var Switch = (p) => /* @__PURE__ */ jsx14(BooleanControl, { kind: "Switch", ...p });
 
 // src/core/responsive.ts
 var BREAKPOINTS = ["base", "sm", "md", "lg", "xl"];
@@ -965,7 +1123,7 @@ function responsiveVars(name, value, format = String, fallback) {
 }
 
 // src/components/layout/Grid/Grid.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var distribution = {
   between: "space-between",
   around: "space-around",
@@ -1019,7 +1177,7 @@ function Grid({
     ...place("grid-row-start", rowStart, String),
     ...place("grid-row-end", rowSpan, (v) => `span ${v}`)
   } : {};
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx15(
     Component,
     {
       ...props,
@@ -1040,8 +1198,8 @@ function Grid({
 }
 
 // src/components/controls/IconButton/IconButton.tsx
-import { forwardRef as forwardRef4 } from "react";
-var IconButton = /* @__PURE__ */ forwardRef4(function IconButton2(p, ref) {
+import { forwardRef as forwardRef5 } from "react";
+var IconButton = /* @__PURE__ */ forwardRef5(function IconButton2(p, ref) {
   return buttonView(
     {
       ...p,
@@ -1057,7 +1215,7 @@ var IconButton = /* @__PURE__ */ forwardRef4(function IconButton2(p, ref) {
 });
 
 // src/components/controls/TextArea/TextArea.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var TextArea = ({
   value,
   defaultValue = "",
@@ -1084,7 +1242,7 @@ var TextArea = ({
   );
   const ids = useFieldIds(label, description || error, textarea.id, textarea);
   const floating = labelPlacement === "floating" && !!label;
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx16(
     FieldFrame,
     {
       ids,
@@ -1094,7 +1252,7 @@ var TextArea = ({
       required: textarea.required,
       description,
       error,
-      children: /* @__PURE__ */ jsx13(
+      children: /* @__PURE__ */ jsx16(
         InputBase,
         {
           size,
@@ -1108,7 +1266,7 @@ var TextArea = ({
           error: !!error,
           startAdornment,
           endAdornment,
-          children: /* @__PURE__ */ jsx13(
+          children: /* @__PURE__ */ jsx16(
             "textarea",
             {
               ...ids.aria,
@@ -1126,7 +1284,7 @@ var TextArea = ({
 };
 
 // src/components/controls/TextField/TextField.tsx
-import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 var TextField = ({
   label,
   description,
@@ -1156,7 +1314,7 @@ var TextField = ({
   );
   const ids = useFieldIds(label, description || error, input.id, input);
   const floating = labelPlacement === "floating" && !!label;
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx17(
     FieldFrame,
     {
       ids,
@@ -1166,7 +1324,7 @@ var TextField = ({
       required: input.required,
       description,
       error,
-      children: /* @__PURE__ */ jsx14(
+      children: /* @__PURE__ */ jsx17(
         InputBase,
         {
           size,
@@ -1178,8 +1336,8 @@ var TextField = ({
           readOnly: input.readOnly,
           error: !!error,
           startAdornment,
-          endAdornment: /* @__PURE__ */ jsxs7(Fragment3, { children: [
-            clearable && current && /* @__PURE__ */ jsx14(
+          endAdornment: /* @__PURE__ */ jsxs9(Fragment4, { children: [
+            clearable && current && /* @__PURE__ */ jsx17(
               IconButton,
               {
                 size: "xs",
@@ -1192,7 +1350,7 @@ var TextField = ({
             ),
             endAdornment
           ] }),
-          children: /* @__PURE__ */ jsx14(
+          children: /* @__PURE__ */ jsx17(
             "input",
             {
               ...ids.aria,
@@ -1211,18 +1369,18 @@ var TextField = ({
 };
 
 // src/components/controls/Chip/Chip.tsx
-import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 function Chip({ label, icon, avatar, onRemove, removeLabel, onClick, selected, disabled, ...p }) {
   const tr = useTr();
   const removeText = removeLabel ?? tr("\u0423\u0431\u0440\u0430\u0442\u044C");
-  const content = /* @__PURE__ */ jsxs8(Fragment4, { children: [
-    avatar && /* @__PURE__ */ jsx15(Avatar, { size: "xs", name: avatar.name, src: avatar.src }),
-    icon && /* @__PURE__ */ jsx15(Icon, { name: icon }),
-    /* @__PURE__ */ jsx15("span", { className: "ad-chip-label", children: label })
+  const content = /* @__PURE__ */ jsxs10(Fragment5, { children: [
+    avatar && /* @__PURE__ */ jsx18(Avatar, { size: "xs", name: avatar.name, src: avatar.src }),
+    icon && /* @__PURE__ */ jsx18(Icon, { name: icon }),
+    /* @__PURE__ */ jsx18("span", { className: "ad-chip-label", children: label })
   ] });
-  return /* @__PURE__ */ jsxs8("span", { ...mark("Chip", p), "data-selected": selected || void 0, "data-disabled": disabled || void 0, children: [
-    onClick ? /* @__PURE__ */ jsx15("button", { type: "button", className: "ad-chip-body", "aria-pressed": selected, disabled, onClick, children: content }) : /* @__PURE__ */ jsx15("span", { className: "ad-chip-body", children: content }),
-    onRemove && /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs10("span", { ...mark("Chip", p), "data-selected": selected || void 0, "data-disabled": disabled || void 0, children: [
+    onClick ? /* @__PURE__ */ jsx18("button", { type: "button", className: "ad-chip-body", "aria-pressed": selected, disabled, onClick, children: content }) : /* @__PURE__ */ jsx18("span", { className: "ad-chip-body", children: content }),
+    onRemove && /* @__PURE__ */ jsx18(
       "button",
       {
         type: "button",
@@ -1233,18 +1391,18 @@ function Chip({ label, icon, avatar, onRemove, removeLabel, onClick, selected, d
           event.stopPropagation();
           onRemove();
         },
-        children: /* @__PURE__ */ jsx15(Icon, { name: "close" })
+        children: /* @__PURE__ */ jsx18(Icon, { name: "close" })
       }
     )
   ] });
 }
 
 // src/components/controls/TagInput/TagInput.tsx
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 
 // src/components/controls/ChipField.tsx
-import { useRef as useRef6 } from "react";
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { useRef as useRef7 } from "react";
+import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 function ChipField({
   className,
   label,
@@ -1267,10 +1425,10 @@ function ChipField({
   inputProps
 }) {
   const ids = useFieldIds(label, description || error, inputProps?.id, inputProps);
-  const input = useRef6(null);
+  const input = useRef7(null);
   const floating = labelPlacement === "floating" && !!label;
   const hasChips = Array.isArray(chips) ? chips.length > 0 : !!chips;
-  return /* @__PURE__ */ jsx16(FieldFrame, { ids, className: `ad-chip-field ${className}`, label: floating ? void 0 : label, required, description, error, children: /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx19(FieldFrame, { ids, className: `ad-chip-field ${className}`, label: floating ? void 0 : label, required, description, error, children: /* @__PURE__ */ jsx19(
     InputBase,
     {
       ref: boxRef,
@@ -1284,9 +1442,9 @@ function ChipField({
       multiline: true,
       startAdornment,
       onClick: () => input.current?.focus(),
-      children: /* @__PURE__ */ jsxs9("span", { className: "ad-chip-field-items", children: [
+      children: /* @__PURE__ */ jsxs11("span", { className: "ad-chip-field-items", children: [
         chips,
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx19(
           "input",
           {
             ...inputProps,
@@ -1310,7 +1468,7 @@ function ChipField({
 }
 
 // src/components/controls/TagInput/TagInput.tsx
-import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
 function TagInput({
   value: controlled,
   defaultValue = [],
@@ -1324,8 +1482,8 @@ function TagInput({
 }) {
   const tr = useTr();
   const [tags, setTags] = useControllable(controlled, defaultValue, onValueChange);
-  const [query, setQuery] = useState3("");
-  const [refusal, setRefusal] = useState3();
+  const [query, setQuery] = useState4("");
+  const [refusal, setRefusal] = useState4();
   const full = max !== void 0 && tags.length >= max;
   const add = (raw) => {
     if (p.disabled || full) return;
@@ -1343,8 +1501,8 @@ function TagInput({
     setQuery("");
   };
   const offered = query ? suggestions.filter((s) => s.toLowerCase().includes(query.toLowerCase()) && !tags.includes(s)).slice(0, 6) : [];
-  return /* @__PURE__ */ jsxs10("div", { ...mark("TagInput", p), children: [
-    /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsxs12("div", { ...mark("TagInput", p), children: [
+    /* @__PURE__ */ jsx20(
       ChipField,
       {
         className: "",
@@ -1356,7 +1514,7 @@ function TagInput({
         size: p.size,
         variant: p.variant,
         labelPlacement: p.labelPlacement,
-        startAdornment: icon ? /* @__PURE__ */ jsx17(Icon, { name: icon }) : void 0,
+        startAdornment: icon ? /* @__PURE__ */ jsx20(Icon, { name: icon }) : void 0,
         placeholder: full ? void 0 : placeholder ?? tr("\u0414\u043E\u0431\u0430\u0432\u044C\u0442\u0435 \u0442\u0435\u0433 \u0438 \u043D\u0430\u0436\u043C\u0438\u0442\u0435 Enter"),
         query,
         onQueryChange: (next) => {
@@ -1386,16 +1544,16 @@ function TagInput({
             setTags(tags.slice(0, -1));
           }
         },
-        chips: tags.map((tag) => /* @__PURE__ */ jsx17(Chip, { label: tag, disabled: p.disabled, onRemove: () => setTags(tags.filter((t) => t !== tag)) }, tag))
+        chips: tags.map((tag) => /* @__PURE__ */ jsx20(Chip, { label: tag, disabled: p.disabled, onRemove: () => setTags(tags.filter((t) => t !== tag)) }, tag))
       }
     ),
-    !p.disabled && !full && offered.length > 0 && /* @__PURE__ */ jsx17("div", { className: "ad-tag-input-suggestions", role: "listbox", "aria-label": tr("\u041F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0438"), children: offered.map((tag) => /* @__PURE__ */ jsx17(Chip, { label: tag, icon: "plus", onClick: () => add(tag) }, tag)) })
+    !p.disabled && !full && offered.length > 0 && /* @__PURE__ */ jsx20("div", { className: "ad-tag-input-suggestions", role: "listbox", "aria-label": tr("\u041F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0438"), children: offered.map((tag) => /* @__PURE__ */ jsx20(Chip, { label: tag, icon: "plus", onClick: () => add(tag) }, tag)) })
   ] });
 }
 
 // src/components/controls/PeoplePicker/PeoplePicker.tsx
-import { useEffect as useEffect4, useId as useId3, useRef as useRef7, useState as useState4 } from "react";
-import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { useEffect as useEffect4, useId as useId3, useRef as useRef8, useState as useState5 } from "react";
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
 var searchDelay = 220;
 function PeoplePicker({
   people = [],
@@ -1410,15 +1568,15 @@ function PeoplePicker({
 }) {
   const tr = useTr();
   const [chosen, setChosen] = useControllable(controlled, defaultValue, onValueChange);
-  const [query, setQuery] = useState4("");
-  const [open, setOpen] = useState4(false);
-  const [active, setActive] = useState4(0);
-  const [found, setFound] = useState4(null);
-  const [loading, setLoading] = useState4(false);
-  const [searchError, setSearchError] = useState4();
-  const box = useRef7(null);
+  const [query, setQuery] = useState5("");
+  const [open, setOpen] = useState5(false);
+  const [active, setActive] = useState5(0);
+  const [found, setFound] = useState5(null);
+  const [loading, setLoading] = useState5(false);
+  const [searchError, setSearchError] = useState5();
+  const box = useRef8(null);
   const listId = `${useId3()}-people`;
-  const search = useRef7(onSearch);
+  const search = useRef8(onSearch);
   search.current = onSearch;
   const remote = !!onSearch;
   const needle = query.trim().toLowerCase();
@@ -1471,8 +1629,8 @@ function PeoplePicker({
     setActive(0);
     if (single || limit !== void 0 && chosen.length + 1 >= limit) setOpen(false);
   };
-  return /* @__PURE__ */ jsxs11("div", { ...mark("PeoplePicker", p), children: [
-    /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsxs13("div", { ...mark("PeoplePicker", p), children: [
+    /* @__PURE__ */ jsx21(
       ChipField,
       {
         className: "",
@@ -1485,7 +1643,7 @@ function PeoplePicker({
         size: p.size,
         variant: p.variant,
         labelPlacement: p.labelPlacement,
-        startAdornment: /* @__PURE__ */ jsx18(Icon, { name: "users" }),
+        startAdornment: /* @__PURE__ */ jsx21(Icon, { name: "users" }),
         placeholder: full ? void 0 : placeholder ?? tr("\u041D\u0430\u0447\u043D\u0438\u0442\u0435 \u0432\u0432\u043E\u0434\u0438\u0442\u044C \u0438\u043C\u044F"),
         query,
         onQueryChange: (next) => {
@@ -1521,7 +1679,7 @@ function PeoplePicker({
             setChosen(chosen.slice(0, -1));
           }
         },
-        chips: chosen.map((person) => /* @__PURE__ */ jsx18(
+        chips: chosen.map((person) => /* @__PURE__ */ jsx21(
           Chip,
           {
             label: person.name,
@@ -1533,7 +1691,7 @@ function PeoplePicker({
         ))
       }
     ),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx21(
       Popover,
       {
         id: listId,
@@ -1546,14 +1704,14 @@ function PeoplePicker({
         autoFocus: false,
         className: "ad-option-popover",
         label: tr("\u041B\u044E\u0434\u0438"),
-        children: /* @__PURE__ */ jsxs11("div", { className: "ad-option-list", children: [
-          loading && /* @__PURE__ */ jsxs11("div", { className: "ad-option-empty", children: [
-            /* @__PURE__ */ jsx18("span", { className: "ad-spinner", "aria-hidden": true }),
+        children: /* @__PURE__ */ jsxs13("div", { className: "ad-option-list", children: [
+          loading && /* @__PURE__ */ jsxs13("div", { className: "ad-option-empty", children: [
+            /* @__PURE__ */ jsx21("span", { className: "ad-spinner", "aria-hidden": true }),
             " ",
             tr("\u0418\u0449\u0435\u043C\u2026")
           ] }),
-          !loading && (searchError || options.length === 0) && /* @__PURE__ */ jsx18("div", { className: "ad-option-empty", children: searchError ?? (onSearch && !needle ? tr("\u041D\u0430\u0447\u043D\u0438\u0442\u0435 \u0432\u0432\u043E\u0434\u0438\u0442\u044C \u0438\u043C\u044F") : tr("\u041D\u0438\u043A\u043E\u0433\u043E \u043D\u0435 \u043D\u0430\u0448\u043B\u0438")) }),
-          !loading && !searchError && options.map((person, index) => /* @__PURE__ */ jsxs11(
+          !loading && (searchError || options.length === 0) && /* @__PURE__ */ jsx21("div", { className: "ad-option-empty", children: searchError ?? (onSearch && !needle ? tr("\u041D\u0430\u0447\u043D\u0438\u0442\u0435 \u0432\u0432\u043E\u0434\u0438\u0442\u044C \u0438\u043C\u044F") : tr("\u041D\u0438\u043A\u043E\u0433\u043E \u043D\u0435 \u043D\u0430\u0448\u043B\u0438")) }),
+          !loading && !searchError && options.map((person, index) => /* @__PURE__ */ jsxs13(
             "button",
             {
               id: `${listId}-option-${index}`,
@@ -1567,10 +1725,10 @@ function PeoplePicker({
               onPointerDown: (event) => event.preventDefault(),
               onClick: () => pick(person),
               children: [
-                /* @__PURE__ */ jsx18(Avatar, { size: "sm", name: person.name, src: person.src, presence: person.presence }),
-                /* @__PURE__ */ jsxs11("span", { className: "ad-option-text", children: [
-                  /* @__PURE__ */ jsx18("span", { className: "ad-option-label", children: person.name }),
-                  person.description && /* @__PURE__ */ jsx18("span", { className: "ad-option-description", children: person.description })
+                /* @__PURE__ */ jsx21(Avatar, { size: "sm", name: person.name, src: person.src, presence: person.presence }),
+                /* @__PURE__ */ jsxs13("span", { className: "ad-option-text", children: [
+                  /* @__PURE__ */ jsx21("span", { className: "ad-option-label", children: person.name }),
+                  person.description && /* @__PURE__ */ jsx21("span", { className: "ad-option-description", children: person.description })
                 ] })
               ]
             },
@@ -1583,8 +1741,8 @@ function PeoplePicker({
 }
 
 // src/components/controls/DatePicker/DatePicker.tsx
-import { useEffect as useEffect5, useMemo as useMemo3, useRef as useRef8, useState as useState5 } from "react";
-import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useEffect as useEffect5, useMemo as useMemo3, useRef as useRef9, useState as useState6 } from "react";
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
 var iso = (date) => `${String(date.getFullYear()).padStart(4, "0")}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
 var calendarDate = (year, month, day) => {
   const date = /* @__PURE__ */ new Date(0);
@@ -1607,13 +1765,13 @@ function DatePicker({ value: controlled, defaultValue = "", onValueChange, min,
   const locale = requestedLocale ?? intlLocale(inheritedLocale);
   const [value, setValue] = useControllable(controlled, defaultValue, onValueChange);
   const selected = parse(value);
-  const [open, setOpen] = useState5(false);
+  const [open, setOpen] = useState6(false);
   useEffect5(() => {
     if (p.disabled) setOpen(false);
   }, [p.disabled]);
-  const [text, setText] = useState5(null);
-  const [month, setMonth] = useState5(() => selected ?? /* @__PURE__ */ new Date());
-  const box = useRef8(null);
+  const [text, setText] = useState6(null);
+  const [month, setMonth] = useState6(() => selected ?? /* @__PURE__ */ new Date());
+  const box = useRef9(null);
   const ids = useFieldIds(p.label, p.description || p.error, void 0, p);
   const format = useMemo3(() => new Intl.DateTimeFormat(locale, { day: "2-digit", month: "2-digit", year: "numeric" }), [locale]);
   const weekdays = useMemo3(
@@ -1634,8 +1792,8 @@ function DatePicker({ value: controlled, defaultValue = "", onValueChange, min,
     setOpen(false);
   };
   const shift = (months) => setMonth(new Date(month.getFullYear(), month.getMonth() + months, 1));
-  return /* @__PURE__ */ jsxs12("div", { ...mark("DatePicker", p), children: [
-    /* @__PURE__ */ jsx19(FieldFrame, { ids, className: "", label: p.label, required: p.required, description: p.description, error: p.error, children: /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsxs14("div", { ...mark("DatePicker", p), children: [
+    /* @__PURE__ */ jsx22(FieldFrame, { ids, className: "", label: p.label, required: p.required, description: p.description, error: p.error, children: /* @__PURE__ */ jsx22(
       InputBase,
       {
         ref: box,
@@ -1643,7 +1801,7 @@ function DatePicker({ value: controlled, defaultValue = "", onValueChange, min,
         disabled: p.disabled,
         error: !!p.error,
         filled: !!selected,
-        endAdornment: /* @__PURE__ */ jsx19(
+        endAdornment: /* @__PURE__ */ jsx22(
           IconButton,
           {
             size: "xs",
@@ -1657,7 +1815,7 @@ function DatePicker({ value: controlled, defaultValue = "", onValueChange, min,
             }
           }
         ),
-        children: /* @__PURE__ */ jsx19(
+        children: /* @__PURE__ */ jsx22(
           "input",
           {
             ...ids.aria,
@@ -1684,17 +1842,17 @@ function DatePicker({ value: controlled, defaultValue = "", onValueChange, min,
         )
       }
     ) }),
-    /* @__PURE__ */ jsx19(Popover, { open: open && !p.disabled, onOpenChange: setOpen, anchorRef: box, align: "start", label: tr("\u041A\u0430\u043B\u0435\u043D\u0434\u0430\u0440\u044C"), className: "ad-date-popover", children: /* @__PURE__ */ jsxs12("div", { className: "ad-calendar", children: [
-      /* @__PURE__ */ jsxs12("div", { className: "ad-calendar-head", children: [
-        /* @__PURE__ */ jsx19(IconButton, { size: "xs", variant: "ghost", icon: "prev", label: tr("\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u043C\u0435\u0441\u044F\u0446"), onClick: () => shift(-1) }),
-        /* @__PURE__ */ jsx19("strong", { children: monthLabel }),
-        /* @__PURE__ */ jsx19(IconButton, { size: "xs", variant: "ghost", icon: "prev", className: "ad-calendar-next", label: tr("\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u043C\u0435\u0441\u044F\u0446"), onClick: () => shift(1) })
+    /* @__PURE__ */ jsx22(Popover, { open: open && !p.disabled, onOpenChange: setOpen, anchorRef: box, align: "start", label: tr("\u041A\u0430\u043B\u0435\u043D\u0434\u0430\u0440\u044C"), className: "ad-date-popover", children: /* @__PURE__ */ jsxs14("div", { className: "ad-calendar", children: [
+      /* @__PURE__ */ jsxs14("div", { className: "ad-calendar-head", children: [
+        /* @__PURE__ */ jsx22(IconButton, { size: "xs", variant: "ghost", icon: "prev", label: tr("\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u043C\u0435\u0441\u044F\u0446"), onClick: () => shift(-1) }),
+        /* @__PURE__ */ jsx22("strong", { children: monthLabel }),
+        /* @__PURE__ */ jsx22(IconButton, { size: "xs", variant: "ghost", icon: "prev", className: "ad-calendar-next", label: tr("\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u043C\u0435\u0441\u044F\u0446"), onClick: () => shift(1) })
       ] }),
-      /* @__PURE__ */ jsxs12("div", { className: "ad-calendar-grid", role: "group", "aria-label": monthLabel, children: [
-        weekdays.map((day) => /* @__PURE__ */ jsx19("span", { className: "ad-calendar-weekday", children: day }, day)),
+      /* @__PURE__ */ jsxs14("div", { className: "ad-calendar-grid", role: "group", "aria-label": monthLabel, children: [
+        weekdays.map((day) => /* @__PURE__ */ jsx22("span", { className: "ad-calendar-weekday", children: day }, day)),
         days.map((date) => {
           const day = iso(date);
-          return /* @__PURE__ */ jsx19(
+          return /* @__PURE__ */ jsx22(
             "button",
             {
               type: "button",
@@ -1711,9 +1869,9 @@ function DatePicker({ value: controlled, defaultValue = "", onValueChange, min,
           );
         })
       ] }),
-      /* @__PURE__ */ jsxs12("div", { className: "ad-calendar-foot", children: [
-        /* @__PURE__ */ jsx19(Button, { size: "xs", variant: "ghost", icon: "clock", disabled: !allowed(today), onClick: () => choose(/* @__PURE__ */ new Date()), children: tr("\u0421\u0435\u0433\u043E\u0434\u043D\u044F") }),
-        selected && /* @__PURE__ */ jsx19(Button, { size: "xs", variant: "ghost", icon: "close", onClick: () => {
+      /* @__PURE__ */ jsxs14("div", { className: "ad-calendar-foot", children: [
+        /* @__PURE__ */ jsx22(Button, { size: "xs", variant: "ghost", icon: "clock", disabled: !allowed(today), onClick: () => choose(/* @__PURE__ */ new Date()), children: tr("\u0421\u0435\u0433\u043E\u0434\u043D\u044F") }),
+        selected && /* @__PURE__ */ jsx22(Button, { size: "xs", variant: "ghost", icon: "close", onClick: () => {
           setValue("");
           setOpen(false);
         }, children: tr("\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C") })
@@ -1723,8 +1881,8 @@ function DatePicker({ value: controlled, defaultValue = "", onValueChange, min,
 }
 
 // src/components/controls/Autocomplete/Autocomplete.tsx
-import { useEffect as useEffect6, useMemo as useMemo4, useRef as useRef9, useState as useState6 } from "react";
-import { Fragment as Fragment5, jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { useEffect as useEffect6, useMemo as useMemo4, useRef as useRef10, useState as useState7 } from "react";
+import { Fragment as Fragment6, jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
 var defaultOptions = ["WASAPI Shared", "WASAPI Exclusive", "ASIO"];
 var Autocomplete = ({
   options = defaultOptions,
@@ -1755,10 +1913,10 @@ var Autocomplete = ({
     defaultValue,
     onValueChange
   );
-  const [open, setOpen] = useState6(false);
-  const [active, setActive] = useState6(0);
-  const inputNode = useRef9(null);
-  const box = useRef9(null);
+  const [open, setOpen] = useState7(false);
+  const [active, setActive] = useState7(0);
+  const inputNode = useRef10(null);
+  const box = useRef10(null);
   const ids = useFieldIds(label, description || error, input.id, input);
   const locked = !!(input.disabled || input.readOnly);
   useEffect6(() => {
@@ -1781,7 +1939,7 @@ var Autocomplete = ({
     inputNode.current?.focus();
   };
   const floating = labelPlacement === "floating" && !!label;
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs15(
     FieldFrame,
     {
       ids,
@@ -1792,7 +1950,7 @@ var Autocomplete = ({
       description,
       error,
       children: [
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx23(
           InputBase,
           {
             ref: box,
@@ -1805,8 +1963,8 @@ var Autocomplete = ({
             readOnly: input.readOnly,
             error: !!error,
             startAdornment,
-            endAdornment: /* @__PURE__ */ jsxs13(Fragment5, { children: [
-              clearable && current && /* @__PURE__ */ jsx20(
+            endAdornment: /* @__PURE__ */ jsxs15(Fragment6, { children: [
+              clearable && current && /* @__PURE__ */ jsx23(
                 IconButton,
                 {
                   size: "xs",
@@ -1821,7 +1979,7 @@ var Autocomplete = ({
                 }
               ),
               endAdornment,
-              /* @__PURE__ */ jsx20(
+              /* @__PURE__ */ jsx23(
                 IconButton,
                 {
                   size: "xs",
@@ -1837,7 +1995,7 @@ var Autocomplete = ({
                 }
               )
             ] }),
-            children: /* @__PURE__ */ jsx20(
+            children: /* @__PURE__ */ jsx23(
               "input",
               {
                 ...ids.aria,
@@ -1887,7 +2045,7 @@ var Autocomplete = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx23(
           Popover,
           {
             id: listId,
@@ -1900,7 +2058,7 @@ var Autocomplete = ({
             matchAnchorWidth: true,
             className: "ad-option-popover ad-autocomplete-popover",
             label: typeof label === "string" ? label : tr("\u041F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0438"),
-            children: /* @__PURE__ */ jsx20(
+            children: /* @__PURE__ */ jsx23(
               OptionList,
               {
                 id: listId,
@@ -1919,11 +2077,11 @@ var Autocomplete = ({
 };
 
 // src/components/controls/Checkbox/Checkbox.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
-var Checkbox = (p) => /* @__PURE__ */ jsx21(BooleanControl, { kind: "Checkbox", ...p });
+import { jsx as jsx24 } from "react/jsx-runtime";
+var Checkbox = (p) => /* @__PURE__ */ jsx24(BooleanControl, { kind: "Checkbox", ...p });
 
 // src/components/controls/NumberField/NumberField.tsx
-import { Fragment as Fragment6, jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
 var NumberField = ({
   value,
   defaultValue = 0,
@@ -1953,7 +2111,7 @@ var NumberField = ({
       high
     )
   );
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx25(
     TextField,
     {
       ...p,
@@ -1965,10 +2123,10 @@ var NumberField = ({
       step,
       value: String(current),
       onValueChange: (v) => setCurrent(v === "" ? "" : Number(v)),
-      endAdornment: /* @__PURE__ */ jsxs14(Fragment6, { children: [
+      endAdornment: /* @__PURE__ */ jsxs16(Fragment7, { children: [
         endAdornment,
-        controls && /* @__PURE__ */ jsxs14(Fragment6, { children: [
-          /* @__PURE__ */ jsx22(
+        controls && /* @__PURE__ */ jsxs16(Fragment7, { children: [
+          /* @__PURE__ */ jsx25(
             IconButton,
             {
               size: "xs",
@@ -1979,7 +2137,7 @@ var NumberField = ({
               onClick: () => nudge(-1)
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx25(
             IconButton,
             {
               size: "xs",
@@ -1997,11 +2155,11 @@ var NumberField = ({
 };
 
 // src/components/controls/Select/Select.tsx
-import { forwardRef as forwardRef5, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef10, useState as useState7 } from "react";
-import { Fragment as Fragment7, jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+import { forwardRef as forwardRef6, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef11, useState as useState8 } from "react";
+import { Fragment as Fragment8, jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 var defaultKey = (value) => typeof value === "object" && value !== null ? JSON.stringify(value) : String(value);
 var textOf = (option) => option.text ?? (typeof option.label === "string" || typeof option.label === "number" ? String(option.label) : "");
-var Select = /* @__PURE__ */ forwardRef5(function Select2(p, ref) {
+var Select = /* @__PURE__ */ forwardRef6(function Select2(p, ref) {
   const tr = useTr();
   const floating = p.labelPlacement === "floating" && !!p.label;
   const keyOf = p.getKey ?? defaultKey;
@@ -2016,17 +2174,17 @@ var Select = /* @__PURE__ */ forwardRef5(function Select2(p, ref) {
     p.defaultValue ?? (p.placeholder ? void 0 : options.find((option) => !option.disabled)?.value),
     p.onValueChange
   );
-  const [open, setOpen] = useState7(false);
-  const [query, setQuery] = useState7("");
-  const [invalid, setInvalid] = useState7(false);
+  const [open, setOpen] = useState8(false);
+  const [query, setQuery] = useState8("");
+  const [invalid, setInvalid] = useState8(false);
   useEffect7(() => {
     if (p.disabled) {
       setOpen(false);
       setQuery("");
     }
   }, [p.disabled]);
-  const anchor = useRef10(null);
-  const box = useRef10(null);
+  const anchor = useRef11(null);
+  const box = useRef11(null);
   const keyedOptions = useMemo5(() => options.map((option) => ({ option, key: keyOf(option.value) })), [options, keyOf]);
   const selectedKey = value === void 0 ? void 0 : keyOf(value);
   const selected = keyedOptions.find(({ key }) => key === selectedKey)?.option;
@@ -2065,12 +2223,12 @@ var Select = /* @__PURE__ */ forwardRef5(function Select2(p, ref) {
     setQuery("");
     anchor.current?.focus();
   };
-  const shownValue = selected ? p.renderValue?.(selected) ?? /* @__PURE__ */ jsxs15(Fragment7, { children: [
-    selected.avatar && /* @__PURE__ */ jsx23(Avatar, { size: "xs", name: selected.avatar.name, src: selected.avatar.src }),
-    selected.icon && /* @__PURE__ */ jsx23(Icon, { name: selected.icon }),
-    /* @__PURE__ */ jsx23("span", { className: "ad-select-value-text", children: selected.label })
+  const shownValue = selected ? p.renderValue?.(selected) ?? /* @__PURE__ */ jsxs17(Fragment8, { children: [
+    selected.avatar && /* @__PURE__ */ jsx26(Avatar, { size: "xs", name: selected.avatar.name, src: selected.avatar.src }),
+    selected.icon && /* @__PURE__ */ jsx26(Icon, { name: selected.icon }),
+    /* @__PURE__ */ jsx26("span", { className: "ad-select-value-text", children: selected.label })
   ] }) : p.placeholder ?? tr("\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435");
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs17(
     FieldFrame,
     {
       ids,
@@ -2081,7 +2239,7 @@ var Select = /* @__PURE__ */ forwardRef5(function Select2(p, ref) {
       description: p.description,
       error,
       children: [
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx26(
           InputBase,
           {
             ref: box,
@@ -2092,12 +2250,12 @@ var Select = /* @__PURE__ */ forwardRef5(function Select2(p, ref) {
             filled: !!selected,
             disabled: p.disabled,
             error: !!error,
-            startAdornment: p.startAdornment ?? (p.icon ? /* @__PURE__ */ jsx23(Icon, { name: p.icon }) : void 0),
-            endAdornment: /* @__PURE__ */ jsxs15(Fragment7, { children: [
+            startAdornment: p.startAdornment ?? (p.icon ? /* @__PURE__ */ jsx26(Icon, { name: p.icon }) : void 0),
+            endAdornment: /* @__PURE__ */ jsxs17(Fragment8, { children: [
               p.endAdornment,
-              /* @__PURE__ */ jsx23(Icon, { name: "chevron", className: "ad-select-chevron" })
+              /* @__PURE__ */ jsx26(Icon, { name: "chevron", className: "ad-select-chevron" })
             ] }),
-            children: /* @__PURE__ */ jsx23(
+            children: /* @__PURE__ */ jsx26(
               "button",
               {
                 ...mark("Select", { ...p, style: void 0 }),
@@ -2117,13 +2275,13 @@ var Select = /* @__PURE__ */ forwardRef5(function Select2(p, ref) {
                 "aria-invalid": !!error || void 0,
                 "data-placeholder": !selected || void 0,
                 onClick: () => setOpen((v) => !v),
-                children: /* @__PURE__ */ jsx23("span", { className: "ad-select-value", id: ids.value, children: shownValue })
+                children: /* @__PURE__ */ jsx26("span", { className: "ad-select-value", id: ids.value, children: shownValue })
               }
             )
           }
         ),
-        p.name && /* @__PURE__ */ jsx23("input", { type: "hidden", name: p.name, disabled: p.disabled, value: selected ? selected.text ?? selectedKey ?? "" : "" }),
-        p.required && /* @__PURE__ */ jsxs15(
+        p.name && /* @__PURE__ */ jsx26("input", { type: "hidden", name: p.name, disabled: p.disabled, value: selected ? selected.text ?? selectedKey ?? "" : "" }),
+        p.required && /* @__PURE__ */ jsxs17(
           "select",
           {
             hidden: true,
@@ -2139,12 +2297,12 @@ var Select = /* @__PURE__ */ forwardRef5(function Select2(p, ref) {
               anchor.current?.focus();
             },
             children: [
-              /* @__PURE__ */ jsx23("option", { value: "" }),
-              keyedOptions.map(({ option, key }) => /* @__PURE__ */ jsx23("option", { value: key, disabled: option.disabled, children: textOf(option) }, key))
+              /* @__PURE__ */ jsx26("option", { value: "" }),
+              keyedOptions.map(({ option, key }) => /* @__PURE__ */ jsx26("option", { value: key, disabled: option.disabled, children: textOf(option) }, key))
             ]
           }
         ),
-        /* @__PURE__ */ jsxs15(
+        /* @__PURE__ */ jsxs17(
           Popover,
           {
             open: open && !p.disabled,
@@ -2163,9 +2321,9 @@ var Select = /* @__PURE__ */ forwardRef5(function Select2(p, ref) {
             label: typeof p.label === "string" ? p.label : tr("\u0412\u0430\u0440\u0438\u0430\u043D\u0442\u044B"),
             autoFocus: !p.searchable,
             children: [
-              p.searchable && /* @__PURE__ */ jsxs15("label", { className: "ad-option-search", children: [
-                /* @__PURE__ */ jsx23(Icon, { name: "search" }),
-                /* @__PURE__ */ jsx23(
+              p.searchable && /* @__PURE__ */ jsxs17("label", { className: "ad-option-search", children: [
+                /* @__PURE__ */ jsx26(Icon, { name: "search" }),
+                /* @__PURE__ */ jsx26(
                   "input",
                   {
                     autoFocus: true,
@@ -2186,7 +2344,7 @@ var Select = /* @__PURE__ */ forwardRef5(function Select2(p, ref) {
                   }
                 )
               ] }),
-              rows.length ? /* @__PURE__ */ jsx23(OptionList, { options: rows, selected: selectedKey, onChoose: choose }) : /* @__PURE__ */ jsx23("div", { className: "ad-option-empty", children: tr("\u041D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E") })
+              rows.length ? /* @__PURE__ */ jsx26(OptionList, { options: rows, selected: selectedKey, onChoose: choose }) : /* @__PURE__ */ jsx26("div", { className: "ad-option-empty", children: tr("\u041D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E") })
             ]
           }
         )
@@ -2195,13 +2353,137 @@ var Select = /* @__PURE__ */ forwardRef5(function Select2(p, ref) {
   );
 });
 
+// src/components/effects/ImageShine/ImageShine.tsx
+import { useRef as useRef12 } from "react";
+import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
+function ImageShine({ src, glow = true, label, style, ...p }) {
+  const pauseRef = useRef12(null);
+  usePauseOffscreen(pauseRef);
+  return /* @__PURE__ */ jsxs18(
+    "span",
+    {
+      ...mark("ImageShine", p),
+      ref: pauseRef,
+      style: { ...style, "--ad-shine-src": `url("${src}")` },
+      "data-glow": glow || void 0,
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      children: [
+        glow && /* @__PURE__ */ jsx27("img", { className: "ad-image-shine-glow", src, alt: "", draggable: false }),
+        /* @__PURE__ */ jsx27("img", { className: "ad-image-shine-picture", src, alt: "", draggable: false }),
+        /* @__PURE__ */ jsx27("span", { className: "ad-image-shine-sweep", children: /* @__PURE__ */ jsx27("i", {}) })
+      ]
+    }
+  );
+}
+
+// src/components/controls/ThemePicker/ThemePicker.tsx
+import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
+var builtIn = {
+  ruby: "Ruby",
+  light: "Light",
+  green: "Green",
+  violet: "Violet"
+};
+function ThemePicker(p) {
+  const tr = useTr();
+  const first = p.options?.[0]?.value ?? "ruby";
+  const [value, setValue] = useControllable(p.value, p.defaultValue ?? first, p.onValueChange);
+  const options = p.options ?? Object.keys(builtIn).map((key) => ({
+    value: key,
+    label: builtIn[key],
+    color: themes[key][0]
+  }));
+  const active = Math.max(0, options.findIndex((option) => option.value === value));
+  return /* @__PURE__ */ jsx28(
+    "div",
+    {
+      ...mark("ThemePicker", p),
+      "data-gallery": p.options ? "" : void 0,
+      role: "radiogroup",
+      "aria-label": p.label ?? tr("\u0422\u0435\u043C\u0430"),
+      onKeyDown: (event) => {
+        const buttons = [...event.currentTarget.querySelectorAll('[role="radio"]:not(:disabled)')];
+        const index = buttons.indexOf(document.activeElement);
+        const moves = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1, Home: -index, End: buttons.length - index - 1 };
+        const move = moves[event.key];
+        if (move === void 0 || !buttons.length) return;
+        event.preventDefault();
+        const next = buttons[(index + move + buttons.length) % buttons.length];
+        next.focus();
+        next.click();
+      },
+      children: options.map((option, index) => {
+        const chosen = option.value === value;
+        const radio = { role: "radio", "aria-checked": chosen, tabIndex: index === active ? 0 : -1, disabled: p.disabled, onClick: () => setValue(option.value) };
+        if (!p.options) return /* @__PURE__ */ jsxs19(Button, { size: p.size ?? "sm", ...radio, children: [
+          /* @__PURE__ */ jsx28("span", { className: "ad-theme-swatch", style: { background: option.color } }),
+          option.label
+        ] }, option.value);
+        return /* @__PURE__ */ jsxs19(
+          "button",
+          {
+            type: "button",
+            className: "ad-theme-card",
+            "aria-label": option.label,
+            ...radio,
+            style: { "--ad-theme-card": option.color },
+            children: [
+              option.background && /* @__PURE__ */ jsx28("img", { className: "ad-theme-card-background", src: option.background, alt: "", loading: "lazy", draggable: false }),
+              /* @__PURE__ */ jsx28("span", { className: "ad-theme-card-preview", children: /* @__PURE__ */ jsx28("span", { className: "ad-theme-card-image", children: option.image && (chosen ? /* @__PURE__ */ jsx28(ImageShine, { src: option.image, glow: false }) : /* @__PURE__ */ jsx28("img", { src: option.image, alt: "", loading: "lazy", draggable: false })) }) }),
+              /* @__PURE__ */ jsxs19("span", { className: "ad-theme-card-caption", children: [
+                /* @__PURE__ */ jsx28("strong", { children: option.label }),
+                option.description && /* @__PURE__ */ jsx28("span", { "aria-hidden": "true", children: option.description })
+              ] }),
+              chosen && /* @__PURE__ */ jsx28("span", { className: "ad-theme-card-check", "aria-hidden": "true", children: /* @__PURE__ */ jsx28(Icon, { name: "check" }) })
+            ]
+          },
+          option.value
+        );
+      })
+    }
+  );
+}
+
+// src/components/controls/ToggleButton/ToggleButton.tsx
+import { forwardRef as forwardRef7 } from "react";
+var ToggleButton = /* @__PURE__ */ forwardRef7(function ToggleButton2({
+  checked,
+  defaultChecked = false,
+  onValueChange,
+  onClick,
+  ...p
+}, ref) {
+  const [value, setValue] = useControllable(
+    checked,
+    defaultChecked,
+    onValueChange
+  );
+  return buttonView(
+    {
+      ...p,
+      ref,
+      "aria-label": p["aria-label"] ?? (!p.children ? p.label : void 0),
+      "aria-pressed": value,
+      children: p.children ?? (p.icon ? null : p.label),
+      label: void 0,
+      onClick: (e) => {
+        onClick?.(e);
+        if (!e.defaultPrevented) setValue(!value);
+      }
+    },
+    "ToggleButton"
+  );
+});
+
 // src/components/media/RotaryKnob/RotaryKnob.tsx
 import {
   useEffect as useEffect8,
-  useLayoutEffect as useLayoutEffect3,
+  useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo6,
-  useRef as useRef11,
-  useState as useState8
+  useRef as useRef13,
+  useState as useState9
 } from "react";
 
 // src/core/noise.ts
@@ -2277,20 +2559,20 @@ function paintCanvas(key, width, height, painting) {
 }
 
 // src/components/media/RotaryKnob/RotaryKnob.tsx
-import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
 var RotaryKnob = (p) => {
   const tr = useTr();
-  const rootRef = useRef11(null);
-  const baseRef = useRef11(null);
-  const feedbackRef = useRef11(null);
-  const rotorRef = useRef11(null);
-  const controlRef = useRef11(null);
-  const readoutRef = useRef11(null);
-  const controllerRef = useRef11(null);
-  const onChangeRef = useRef11(p.onValueChange);
-  const onCommitRef = useRef11(p.onValueCommit);
-  const disabledRef = useRef11(!!p.disabled);
-  const readOnlyRef = useRef11(!!p.readOnly);
+  const rootRef = useRef13(null);
+  const baseRef = useRef13(null);
+  const feedbackRef = useRef13(null);
+  const rotorRef = useRef13(null);
+  const controlRef = useRef13(null);
+  const readoutRef = useRef13(null);
+  const controllerRef = useRef13(null);
+  const onChangeRef = useRef13(p.onValueChange);
+  const onCommitRef = useRef13(p.onValueCommit);
+  const disabledRef = useRef13(!!p.disabled);
+  const readOnlyRef = useRef13(!!p.readOnly);
   const numberFormat = useMemo6(
     () => new Intl.NumberFormat("ru-RU", { maximumFractionDigits: 1 }),
     []
@@ -2299,14 +2581,14 @@ var RotaryKnob = (p) => {
   const span = (p.max ?? 100) - min || 1;
   const toPosition = (value) => clamp((value - min) / span * 100);
   const toValue = (position) => Math.round((min + position / 100 * span) * 1e6) / 1e6;
-  const controlledPosition = useRef11(void 0);
+  const controlledPosition = useRef13(void 0);
   controlledPosition.current = p.value === void 0 ? void 0 : toPosition(p.value);
   const displayScale = p.displayScale ?? 1;
   const format = (value) => `${numberFormat.format(value * displayScale)}${p.suffix ?? "%"}`;
-  const scale = useRef11({ toValue, format });
+  const scale = useRef13({ toValue, format });
   scale.current = { toValue, format };
-  const stepRef = useRef11(1);
-  const fineStepRef = useRef11(0.1);
+  const stepRef = useRef13(1);
+  const fineStepRef = useRef13(0.1);
   onChangeRef.current = p.onValueChange;
   onCommitRef.current = p.onValueCommit;
   disabledRef.current = !!p.disabled;
@@ -2314,11 +2596,11 @@ var RotaryKnob = (p) => {
   stepRef.current = Math.max(1e-3, (p.step ?? span / 100) / span * 100);
   fineStepRef.current = Math.max(1e-3, (p.fineStep ?? span / 1e3) / span * 100);
   const initial = toPosition(p.value ?? p.defaultValue ?? min + span * 0.67);
-  const initialRef = useRef11(initial);
-  const resetRef = useRef11(void 0);
+  const initialRef = useRef13(initial);
+  const resetRef = useRef13(void 0);
   resetRef.current = p.resetValue === void 0 ? void 0 : toPosition(p.resetValue);
   const diameter = p.diameter ?? { xs: 84, sm: 124, md: 220, lg: 320 }[normalizeSize(p.size) ?? "md"];
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     const root = rootRef.current;
     const canvas = baseRef.current;
     const rotor = rotorRef.current;
@@ -2991,8 +3273,8 @@ var RotaryKnob = (p) => {
     if (p.value !== void 0)
       controllerRef.current?.setValue(toPosition(p.value), false);
   }, [p.value, min, span]);
-  const [draft, setDraft] = useState8(null);
-  const cancelled = useRef11(false);
+  const [draft, setDraft] = useState9(null);
+  const cancelled = useRef13(false);
   const editable = !p.disabled && !p.readOnly;
   const applyDraft = () => {
     if (cancelled.current) return;
@@ -3006,7 +3288,7 @@ var RotaryKnob = (p) => {
     if (changed) controller.commit();
   };
   const rootProps = mark("RotaryKnob", p, void 0, "knob");
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs20(
     "div",
     {
       ...rootProps,
@@ -3022,7 +3304,7 @@ var RotaryKnob = (p) => {
         "--rotation": "0deg"
       },
       children: [
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx29(
           "canvas",
           {
             className: "knob__surface knob__base",
@@ -3030,7 +3312,7 @@ var RotaryKnob = (p) => {
             ref: baseRef
           }
         ),
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx29(
           "canvas",
           {
             className: "knob__surface knob__feedback",
@@ -3038,9 +3320,9 @@ var RotaryKnob = (p) => {
             ref: feedbackRef
           }
         ),
-        /* @__PURE__ */ jsx24("span", { className: "knob__surface knob__rotor-frame", "aria-hidden": "true", children: /* @__PURE__ */ jsx24("canvas", { className: "knob__rotor", ref: rotorRef }) }),
-        /* @__PURE__ */ jsx24("span", { className: "knob__sheen", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx29("span", { className: "knob__surface knob__rotor-frame", "aria-hidden": "true", children: /* @__PURE__ */ jsx29("canvas", { className: "knob__rotor", ref: rotorRef }) }),
+        /* @__PURE__ */ jsx29("span", { className: "knob__sheen", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx29(
           "div",
           {
             ref: controlRef,
@@ -3055,10 +3337,10 @@ var RotaryKnob = (p) => {
             "aria-valuenow": toValue(initial),
             "aria-valuetext": format(toValue(initial)),
             "aria-orientation": p.readOnly ? void 0 : "vertical",
-            children: /* @__PURE__ */ jsx24("div", { className: "knob__indicator", "aria-hidden": "true", children: /* @__PURE__ */ jsx24("div", { className: "knob__slot" }) })
+            children: /* @__PURE__ */ jsx29("div", { className: "knob__indicator", "aria-hidden": "true", children: /* @__PURE__ */ jsx29("div", { className: "knob__slot" }) })
           }
         ),
-        p.showValue !== false && /* @__PURE__ */ jsx24(
+        p.showValue !== false && /* @__PURE__ */ jsx29(
           "div",
           {
             ref: readoutRef,
@@ -3076,7 +3358,7 @@ var RotaryKnob = (p) => {
             children: format(toValue(initial))
           }
         ),
-        draft !== null && /* @__PURE__ */ jsx24(
+        draft !== null && /* @__PURE__ */ jsx29(
           "input",
           {
             className: "knob__input",
@@ -3096,8 +3378,8 @@ var RotaryKnob = (p) => {
             }
           }
         ),
-        p.showLabel && p.label && /* @__PURE__ */ jsx24("span", { className: "knob__label", "aria-hidden": "true", children: p.label }),
-        /* @__PURE__ */ jsx24("span", { className: "ad-sr-only", children: "\u0417\u0430\u0436\u043C\u0438\u0442\u0435 \u0440\u0443\u0447\u043A\u0443 \u0431\u043B\u0438\u0436\u0435 \u043A \u043A\u0440\u0430\u044E \u0438 \u0432\u0435\u0434\u0438\u0442\u0435 \u043C\u044B\u0448\u044C\u044E \u043F\u043E \u043A\u0440\u0443\u0433\u0443. \u0417\u0430 \u0446\u0435\u043D\u0442\u0440 \u043C\u043E\u0436\u043D\u043E \u0442\u044F\u043D\u0443\u0442\u044C \u0432\u0432\u0435\u0440\u0445 \u0438\u043B\u0438 \u0432\u043D\u0438\u0437. \u041D\u0430\u0436\u0430\u0442\u0438\u0435 \u043D\u0430 \u0432\u043D\u0435\u0448\u043D\u044E\u044E \u0448\u043A\u0430\u043B\u0443 \u0443\u0441\u0442\u0430\u043D\u0430\u0432\u043B\u0438\u0432\u0430\u0435\u0442 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435. \u041A\u043E\u043B\u0435\u0441\u043E \u043C\u044B\u0448\u0438 \u0438 \u0441\u0442\u0440\u0435\u043B\u043A\u0438 \u043C\u0435\u043D\u044F\u044E\u0442 \u0433\u0440\u043E\u043C\u043A\u043E\u0441\u0442\u044C. Shift \u2014 \u0442\u043E\u0447\u043D\u0430\u044F \u0440\u0435\u0433\u0443\u043B\u0438\u0440\u043E\u0432\u043A\u0430. \u0414\u0432\u043E\u0439\u043D\u043E\u0439 \u0449\u0435\u043B\u0447\u043E\u043A \u2014 \u0438\u0441\u0445\u043E\u0434\u043D\u043E\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435." })
+        p.showLabel && p.label && /* @__PURE__ */ jsx29("span", { className: "knob__label", "aria-hidden": "true", children: p.label }),
+        /* @__PURE__ */ jsx29("span", { className: "ad-sr-only", children: "\u0417\u0430\u0436\u043C\u0438\u0442\u0435 \u0440\u0443\u0447\u043A\u0443 \u0431\u043B\u0438\u0436\u0435 \u043A \u043A\u0440\u0430\u044E \u0438 \u0432\u0435\u0434\u0438\u0442\u0435 \u043C\u044B\u0448\u044C\u044E \u043F\u043E \u043A\u0440\u0443\u0433\u0443. \u0417\u0430 \u0446\u0435\u043D\u0442\u0440 \u043C\u043E\u0436\u043D\u043E \u0442\u044F\u043D\u0443\u0442\u044C \u0432\u0432\u0435\u0440\u0445 \u0438\u043B\u0438 \u0432\u043D\u0438\u0437. \u041D\u0430\u0436\u0430\u0442\u0438\u0435 \u043D\u0430 \u0432\u043D\u0435\u0448\u043D\u044E\u044E \u0448\u043A\u0430\u043B\u0443 \u0443\u0441\u0442\u0430\u043D\u0430\u0432\u043B\u0438\u0432\u0430\u0435\u0442 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435. \u041A\u043E\u043B\u0435\u0441\u043E \u043C\u044B\u0448\u0438 \u0438 \u0441\u0442\u0440\u0435\u043B\u043A\u0438 \u043C\u0435\u043D\u044F\u044E\u0442 \u0433\u0440\u043E\u043C\u043A\u043E\u0441\u0442\u044C. Shift \u2014 \u0442\u043E\u0447\u043D\u0430\u044F \u0440\u0435\u0433\u0443\u043B\u0438\u0440\u043E\u0432\u043A\u0430. \u0414\u0432\u043E\u0439\u043D\u043E\u0439 \u0449\u0435\u043B\u0447\u043E\u043A \u2014 \u0438\u0441\u0445\u043E\u0434\u043D\u043E\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435." })
       ]
     }
   );
@@ -3109,10 +3391,10 @@ import {
   useContext,
   useEffect as useEffect9,
   useMemo as useMemo7,
-  useRef as useRef12,
-  useState as useState9
+  useRef as useRef14,
+  useState as useState10
 } from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var getPath = (value, path) => path.split(".").reduce((current, key) => current == null ? void 0 : Reflect.get(Object(current), key), value);
 var setPath = (value, path, next) => {
   const keys = path.split(".");
@@ -3129,8 +3411,8 @@ var setPath = (value, path, next) => {
   return root;
 };
 function useForm(options) {
-  const [values, setValues] = useState9(options.initialValues), [errors, setErrors] = useState9({}), [touched, setTouchedState] = useState9({}), [submitting, setSubmitting] = useState9(false), latest = useRef12(values), touchedRef = useRef12(touched), validationId = useRef12(0), submittingRef = useRef12(false), settings = useRef12(options), initialKey = useMemo7(() => JSON.stringify(options.initialValues), [options.initialValues]);
-  const previousInitialKey = useRef12(initialKey);
+  const [values, setValues] = useState10(options.initialValues), [errors, setErrors] = useState10({}), [touched, setTouchedState] = useState10({}), [submitting, setSubmitting] = useState10(false), latest = useRef14(values), touchedRef = useRef14(touched), validationId = useRef14(0), submittingRef = useRef14(false), settings = useRef14(options), initialKey = useMemo7(() => JSON.stringify(options.initialValues), [options.initialValues]);
+  const previousInitialKey = useRef14(initialKey);
   settings.current = options;
   useEffect9(() => {
     if (previousInitialKey.current === initialKey) return;
@@ -3225,7 +3507,7 @@ function Form({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsx25(Context.Provider, { value: form, children: /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx30(Context.Provider, { value: form, children: /* @__PURE__ */ jsx30(
     "form",
     {
       className,
@@ -3245,7 +3527,7 @@ function useFormContext() {
 
 // src/components/forms/FormFields/FormFields.tsx
 import { memo } from "react";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var defaultFieldRegistry = {
   text: TextField,
   number: NumberField,
@@ -3260,7 +3542,11 @@ var defaultFieldRegistry = {
   people: PeoplePicker,
   slider: Slider,
   rotary: RotaryKnob,
-  tags: TagInput
+  tags: TagInput,
+  theme: ThemePicker,
+  toggle: ToggleButton,
+  segmented: SegmentedControl,
+  tabs: Tabs
 };
 var bindings = {
   checked: (field) => ({ checked: Boolean(field.value), onValueChange: field.onValueChange }),
@@ -3284,6 +3570,7 @@ var bindings = {
 var bindingKind = {
   checkbox: "checked",
   switch: "checked",
+  toggle: "checked",
   file: "file",
   rotary: "rotary"
 };
@@ -3294,7 +3581,7 @@ function FormFields({
   gap = 3
 }) {
   const form = useFormContext();
-  return /* @__PURE__ */ jsx26(Grid, { columns, gap, align: "center", className: "ad-form-fields", children: fields.filter((field) => field.showWhen?.(form.values) ?? true).map((field) => /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx31(Grid, { columns, gap, align: "center", className: "ad-form-fields", children: fields.filter((field) => field.showWhen?.(form.values) ?? true).map((field) => /* @__PURE__ */ jsx31(
     StableSlot,
     {
       field,
@@ -3309,11 +3596,13 @@ function Slot({
   form,
   registry
 }) {
+  if (field.kind === "custom") return /* @__PURE__ */ jsx31(Grid, { span: field.span ?? "full", className: "ad-form-field", "data-custom": "", children: field.render(form.field(field.name), form) });
   const kind = field.kind ?? "text", Component = registry[kind] ?? registry.text, props = bindings[bindingKind[kind] ?? "value"](form.field(field.name), kind);
-  return /* @__PURE__ */ jsx26(Grid, { span: field.span ?? "full", className: "ad-form-field", children: /* @__PURE__ */ jsx26(Component, { label: field.label, ...field.props, ...props }) });
+  return /* @__PURE__ */ jsx31(Grid, { span: field.span ?? "full", className: "ad-form-field", children: /* @__PURE__ */ jsx31(Component, { label: field.label, ...field.props, ...props }) });
 }
 var StableSlot = /* @__PURE__ */ memo(Slot, (previous, next) => {
   if (previous.field !== next.field || previous.registry !== next.registry) return false;
+  if (next.field.kind === "custom") return previous.form === next.form;
   const before = previous.form.field(previous.field.name);
   const after = next.form.field(next.field.name);
   return Object.is(before.value, after.value) && before.error === after.error && before.touched === after.touched;
@@ -3338,6 +3627,9 @@ export {
   BooleanControl,
   Button,
   FilePicker,
+  Tab,
+  Tabs,
+  SegmentedControl,
   Slider,
   Switch,
   spacing,
@@ -3354,6 +3646,9 @@ export {
   Checkbox,
   NumberField,
   Select,
+  ImageShine,
+  ThemePicker,
+  ToggleButton,
   clamp01,
   seeded,
   noise,