@layers-app/shared 0.4.8 → 0.4.10

package/dist/components/FormViewer/helpers/controls.js

@@ -1,79 +1,114 @@
 import { jsx as o } from "react/jsx-runtime";
-import { IconStar as e, IconClick as c, IconSquareCheck as i, IconCornerDownLeft as n, IconUpload as r, IconKeyframeAlignHorizontal as l, IconNumber as a, IconSelector as s, IconCards as m, IconLayoutGrid as t, IconVersions as z, IconCircleDashedCheck as d, IconMapPin as I, IconCalendarMonth as p, IconMail as g, IconPhone as u, IconTextPlus as h, IconFileText as C } from "@tabler/icons-react";
-const f = {
+import { Upload01Icon as i, RadioButtonIcon as n, ArrowDown01Icon as r, CallIcon as l, Calendar03Icon as t, Mail01Icon as a, Location01Icon as m, TextNumberSignIcon as s, KeyframeAlignHorizontalIcon as g, StarIcon as I, TextAlignJustifyLeftIcon as d, DivideSignIcon as z, TextIcon as p, Image01Icon as u, HeadingIcon as f } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as e } from "@hugeicons/react";
+import { IconSquareCheck as C, IconCornerDownLeft as h, IconNumbers as T } from "@tabler/icons-react";
+import { CheckRectangleIcon as x, CircleOffIcon as y, ImagesIcon as b, ShortTextIcon as v } from "./customControlIcons.js";
+const A = {
+  // ── Контент ──
+  heading: {
+    icon: /* @__PURE__ */ o(e, { icon: f, size: "1em" }),
+    color: "gray"
+  },
+  image: {
+    icon: /* @__PURE__ */ o(e, { icon: u, size: "1em" }),
+    color: "gray"
+  },
+  paragraph: {
+    icon: /* @__PURE__ */ o(e, { icon: p, size: "1em" }),
+    color: "gray"
+  },
+  divider: {
+    icon: /* @__PURE__ */ o(e, { icon: z, size: "1em" }),
+    color: "gray"
+  },
+  // ── Текст ──
   text: {
-    icon: /* @__PURE__ */ o(C, { size: "1em" }),
-    color: "indigo"
+    icon: /* @__PURE__ */ o(v, {}),
+    color: "orange"
   },
   longText: {
-    icon: /* @__PURE__ */ o(h, { size: "1em" }),
-    color: "indigo"
+    icon: /* @__PURE__ */ o(e, { icon: d, size: "1em" }),
+    color: "orange"
   },
-  phone: {
-    icon: /* @__PURE__ */ o(u, { size: "1em" }),
+  // ── Оценка ──
+  rating: {
+    icon: /* @__PURE__ */ o(e, { icon: I, size: "1em" }),
     color: "blue"
   },
-  email: {
-    icon: /* @__PURE__ */ o(g, { size: "1em" }),
+  slider: {
+    icon: /* @__PURE__ */ o(e, { icon: g, size: "1em" }),
     color: "blue"
   },
-  date: {
-    icon: /* @__PURE__ */ o(p, { size: "1em" }),
-    color: "cyan"
+  scale: {
+    icon: /* @__PURE__ */ o(e, { icon: s, size: "1em" }),
+    color: "blue"
   },
+  // ── Контакты ──
   location: {
-    icon: /* @__PURE__ */ o(I, { size: "1em" }),
-    color: "red"
+    icon: /* @__PURE__ */ o(e, { icon: m, size: "1em" }),
+    color: "violet"
   },
-  yesNo: {
-    icon: /* @__PURE__ */ o(d, { size: "1em" }),
-    color: "grape"
+  email: {
+    icon: /* @__PURE__ */ o(e, { icon: a, size: "1em" }),
+    color: "violet"
   },
-  choice: {
-    icon: /* @__PURE__ */ o(z, { size: "1em" }),
-    color: "grape"
+  date: {
+    icon: /* @__PURE__ */ o(e, { icon: t, size: "1em" }),
+    color: "violet"
   },
-  pictureChoice: {
-    icon: /* @__PURE__ */ o(t, { size: "1em" }),
-    color: "grape"
+  phone: {
+    icon: /* @__PURE__ */ o(e, { icon: l, size: "1em" }),
+    color: "violet"
   },
-  multipleChoice: {
-    icon: /* @__PURE__ */ o(m, { size: "1em" }),
-    color: "grape"
+  // ── Выбор ──
+  pictureChoice: {
+    icon: /* @__PURE__ */ o(b, {}),
+    color: "green"
   },
   dropdown: {
-    icon: /* @__PURE__ */ o(s, { size: "1em" }),
-    color: "grape"
+    icon: /* @__PURE__ */ o(e, { icon: r, size: "1em" }),
+    color: "green"
   },
-  number: {
-    icon: /* @__PURE__ */ o(a, { size: "1em" }),
-    color: "orange"
+  yesNo: {
+    icon: /* @__PURE__ */ o(y, {}),
+    color: "green"
   },
-  slider: {
-    icon: /* @__PURE__ */ o(l, { size: "1em" }),
-    color: "orange"
+  choice: {
+    icon: /* @__PURE__ */ o(e, { icon: n, size: "1em" }),
+    color: "green"
+  },
+  multipleChoice: {
+    icon: /* @__PURE__ */ o(x, {}),
+    color: "green"
   },
+  // ── Прочее ──
   upload: {
-    icon: /* @__PURE__ */ o(r, { size: "1em" }),
+    icon: /* @__PURE__ */ o(e, { icon: i, size: "1em" }),
     color: "red"
   },
+  // ── Нет в макете модалки ──
+  // Числовой инпут: добавить его больше нельзя (в группе «Оценка» вместо него
+  // шкала), но в старых формах он встречается и должен рисоваться.
+  number: {
+    icon: /* @__PURE__ */ o(T, { size: "1em" }),
+    color: "blue"
+  },
   start: {
-    icon: /* @__PURE__ */ o(n, { size: "1em" }),
+    icon: /* @__PURE__ */ o(h, { size: "1em" }),
     color: "red"
   },
   confirm: {
-    icon: /* @__PURE__ */ o(i, { size: "1em" }),
-    color: "red"
-  },
-  button: {
-    icon: /* @__PURE__ */ o(c, { size: "1em" }),
-    color: "red"
-  },
-  rating: {
-    icon: /* @__PURE__ */ o(e, { size: "1em" }),
+    icon: /* @__PURE__ */ o(C, { size: "1em" }),
     color: "red"
   }
-};
+}, N = [
+  "heading",
+  "paragraph",
+  "image",
+  "divider"
+], H = (c) => N.includes(c);
 export {
-  f as controlsDataMap
+  N as CONTENT_CONTROL_TYPES,
+  A as controlsDataMap,
+  H as isContentControlType
 };

package/dist/components/FormViewer/helpers/customControlIcons.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Иконки элементов формы, которых нет в @hugeicons — нарисованы в макете
+ * отдельно. Размер задаётся снаружи через font-size (width/height в `em`),
+ * цвет — через `color`, как у остальных иконок.
+ *
+ * Обёртка `clipPath` из экспорта Figma убрана намеренно: она совпадала с
+ * viewBox и ничего не отсекала, зато плодила одинаковые id при нескольких
+ * инстансах на странице.
+ */
+type Props = {
+    size?: string | number;
+};
+/** Короткий текст: две строки разной длины. */
+export declare const ShortTextIcon: ({ size }?: Props) => import("react/jsx-runtime").JSX.Element;
+/** Выбор картинки: две наложенные рамки изображений. */
+export declare const ImagesIcon: ({ size }?: Props) => import("react/jsx-runtime").JSX.Element;
+/** Да/Нет: перечёркнутый круг. */
+export declare const CircleOffIcon: ({ size }?: Props) => import("react/jsx-runtime").JSX.Element;
+/** Чекбокс: скруглённый квадрат с галочкой. */
+export declare const CheckRectangleIcon: ({ size }?: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=customControlIcons.d.ts.map

package/dist/components/FormViewer/helpers/customControlIcons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"customControlIcons.d.ts","sourceRoot":"","sources":["../../../../src/components/FormViewer/helpers/customControlIcons.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,KAAK,KAAK,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAAC;AAWxC,+CAA+C;AAC/C,eAAO,MAAM,aAAa,GAAI,WAAU,KAAU,4CAKjD,CAAC;AAEF,wDAAwD;AACxD,eAAO,MAAM,UAAU,GAAI,WAAU,KAAU,4CAO9C,CAAC;AAEF,kCAAkC;AAClC,eAAO,MAAM,aAAa,GAAI,WAAU,KAAU,4CAKjD,CAAC;AAEF,+CAA+C;AAC/C,eAAO,MAAM,kBAAkB,GAAI,WAAU,KAAU,4CAItD,CAAC"}

package/dist/components/FormViewer/helpers/customControlIcons.js

@@ -0,0 +1,26 @@
+import { jsx as t, jsxs as o } from "react/jsx-runtime";
+const h = (C) => ({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: C ?? "1em",
+  height: C ?? "1em",
+  viewBox: "0 0 16 16",
+  fill: "currentColor",
+  style: { flexShrink: 0 }
+}), e = ({ size: C } = {}) => /* @__PURE__ */ o("svg", { ...h(C), children: [
+  /* @__PURE__ */ t("path", { d: "M7.33333 5.5C7.60948 5.5 7.83333 5.72386 7.83333 6C7.83333 6.27614 7.60948 6.5 7.33333 6.5H2C1.72386 6.5 1.5 6.27614 1.5 6C1.5 5.72386 1.72386 5.5 2 5.5H7.33333Z" }),
+  /* @__PURE__ */ t("path", { d: "M14 9.5C14.2761 9.5 14.5 9.72386 14.5 10C14.5 10.2761 14.2761 10.5 14 10.5H2C1.72386 10.5 1.5 10.2761 1.5 10C1.5 9.72386 1.72386 9.5 2 9.5H14Z" })
+] }), n = ({ size: C } = {}) => /* @__PURE__ */ o("svg", { ...h(C), children: [
+  /* @__PURE__ */ t("path", { d: "M8.16998 6.38058C8.64174 6.34623 9.06621 6.48023 9.51112 6.70936C9.94406 6.93233 10.4431 7.27139 11.06 7.68918L11.9473 8.28944C12.1759 8.44428 12.2356 8.75547 12.0808 8.9841C11.9259 9.21274 11.6148 9.27241 11.3861 9.11756L10.4994 8.5173C9.86222 8.08576 9.42058 7.78712 9.05344 7.59803C8.69844 7.41521 8.46317 7.36197 8.24289 7.37798C8.02259 7.39402 7.79751 7.48094 7.47271 7.71326C7.13687 7.95352 6.74309 8.31254 6.17519 8.83175L3.00396 11.7308C2.80019 11.9171 2.48392 11.9033 2.29758 11.6996C2.11127 11.4958 2.12575 11.1796 2.32948 10.9932L5.50006 8.09347C6.04986 7.5908 6.49466 7.18343 6.89068 6.90011C7.29769 6.60895 7.69825 6.41497 8.16998 6.38058Z" }),
+  /* @__PURE__ */ t("path", { d: "M4.83341 4.16663C5.2016 4.16663 5.50008 4.4651 5.50008 4.83329C5.50008 5.20148 5.2016 5.49996 4.83341 5.49996C4.46523 5.49996 4.16675 5.20148 4.16675 4.83329C4.16675 4.4651 4.46523 4.16663 4.83341 4.16663Z" }),
+  /* @__PURE__ */ t("path", { d: "M14.1667 9.29944C14.1667 8.02024 14.1657 7.11092 14.073 6.42118C13.9822 5.74599 13.8119 5.35619 13.5274 5.07157C13.2104 4.75453 12.7627 4.57885 11.9343 4.49736L12.032 3.50256C12.9481 3.59267 13.6751 3.80514 14.2345 4.36454C14.7357 4.86587 14.9582 5.50166 15.0639 6.28772C15.1677 7.05958 15.1667 8.04847 15.1667 9.29944C15.1667 10.5503 15.1676 11.5387 15.0639 12.3105C14.9582 13.0968 14.7359 13.7329 14.2345 14.2343C13.7331 14.7358 13.0969 14.958 12.3106 15.0638C11.5388 15.1675 10.5504 15.1666 9.29956 15.1666C8.0486 15.1666 7.05971 15.1675 6.28784 15.0638C5.50178 14.9581 4.86599 14.7356 4.36466 14.2343C3.80526 13.675 3.5928 12.948 3.50269 12.0319L4.49748 11.9342C4.57897 12.7625 4.75465 13.2103 5.0717 13.5273C5.35631 13.8118 5.74611 13.9821 6.42131 14.0729C7.11104 14.1656 8.02036 14.1666 9.29956 14.1666C10.5785 14.1666 11.4875 14.1656 12.1772 14.0729C12.8525 13.9821 13.2428 13.8119 13.5274 13.5273C13.8121 13.2427 13.9822 12.8524 14.073 12.177C14.1657 11.4874 14.1667 10.5784 14.1667 9.29944Z" }),
+  /* @__PURE__ */ t("path", { d: "M11.4999 6.66671C11.4999 5.39553 11.4989 4.49243 11.4068 3.80733C11.3166 3.13662 11.1473 2.75028 10.8652 2.46814C10.583 2.18601 10.1967 2.01665 9.52596 1.92647C8.84085 1.83437 7.93774 1.83337 6.66659 1.83337C5.39541 1.83337 4.49231 1.83437 3.80721 1.92647C3.13649 2.01665 2.75016 2.186 2.46802 2.46814C2.18588 2.75028 2.01653 3.13661 1.92635 3.80733C1.83425 4.49243 1.83325 5.39553 1.83325 6.66671C1.83325 7.93787 1.83425 8.84098 1.92635 9.52608C2.01653 10.1968 2.18589 10.5832 2.46802 10.8653C2.75016 11.1474 3.13649 11.3168 3.80721 11.4069C4.49231 11.499 5.39541 11.5 6.66659 11.5C7.93775 11.5 8.84085 11.499 9.52596 11.4069C10.1967 11.3168 10.583 11.1474 10.8652 10.8653C11.1473 10.5832 11.3166 10.1968 11.4068 9.52608C11.4989 8.84098 11.4999 7.93787 11.4999 6.66671ZM12.4999 6.66671C12.4999 7.90964 12.5009 8.89231 12.3977 9.65955C12.2926 10.4411 12.0711 11.0735 11.5722 11.5723C11.0733 12.0712 10.441 12.2927 9.65942 12.3978C8.89219 12.501 7.90952 12.5 6.66659 12.5C5.42364 12.5 4.44098 12.501 3.67375 12.3978C2.89221 12.2927 2.25986 12.0712 1.76099 11.5723C1.2621 11.0735 1.04056 10.4411 0.935466 9.65955C0.832315 8.89231 0.833252 7.90964 0.833252 6.66671C0.833252 5.42376 0.832315 4.4411 0.935466 3.67387C1.04056 2.89233 1.26212 2.25998 1.76099 1.76111C2.25986 1.26224 2.89221 1.04068 3.67375 0.935588C4.44098 0.832437 5.42364 0.833374 6.66659 0.833374C7.90952 0.833374 8.89219 0.832437 9.65942 0.935588C10.441 1.04068 11.0733 1.26223 11.5722 1.76111C12.0711 2.25998 12.2926 2.89234 12.3977 3.67387C12.5009 4.4411 12.4999 5.42376 12.4999 6.66671Z" })
+] }), s = ({ size: C } = {}) => /* @__PURE__ */ o("svg", { ...h(C), children: [
+  /* @__PURE__ */ t("path", { d: "M0.833252 7.99998C0.833252 6.0211 1.63585 4.22864 2.93221 2.93227C3.12742 2.73706 3.44397 2.73715 3.63924 2.93227C3.8345 3.12753 3.8345 3.44404 3.63924 3.6393C2.52275 4.7558 1.83325 6.29697 1.83325 7.99998C1.83325 11.4057 4.59416 14.1666 7.99992 14.1666C9.70291 14.1666 11.2441 13.4771 12.3606 12.3607C12.5559 12.1654 12.8724 12.1654 13.0676 12.3607C13.2628 12.5559 13.2628 12.8725 13.0676 13.0677C11.7712 14.364 9.97879 15.1666 7.99992 15.1666C4.04187 15.1666 0.833252 11.958 0.833252 7.99998ZM14.1666 7.99998C14.1666 4.59422 11.4056 1.83331 7.99992 1.83331C7.09416 1.83331 6.23496 2.02845 5.46151 2.37823C5.20996 2.4918 4.91379 2.37974 4.80005 2.12823C4.68647 1.87669 4.79853 1.58052 5.05005 1.46678C5.95033 1.05969 6.94939 0.833313 7.99992 0.833313C11.9579 0.833313 15.1666 4.04194 15.1666 7.99998C15.1666 9.05048 14.9403 10.0496 14.5331 10.9498C14.4193 11.2014 14.1226 11.3137 13.871 11.1998C13.6195 11.086 13.5079 10.7893 13.6217 10.5377C13.9714 9.76441 14.1666 8.90567 14.1666 7.99998Z" }),
+  /* @__PURE__ */ t("path", { d: "M0.979699 0.979821C1.17496 0.784558 1.49147 0.784558 1.68673 0.979821L15.0201 14.3132C15.2153 14.5084 15.2153 14.8249 15.0201 15.0202C14.8248 15.2154 14.5083 15.2154 14.313 15.0202L0.979699 1.68685C0.784436 1.49159 0.784436 1.17508 0.979699 0.979821Z" })
+] }), r = ({ size: C } = {}) => /* @__PURE__ */ t("svg", { ...h(C), children: /* @__PURE__ */ t("path", { d: "M14.1666 3.99998C14.1666 2.80336 13.1965 1.83331 11.9999 1.83331H3.99992C2.8033 1.83331 1.83325 2.80336 1.83325 3.99998V12C1.83325 13.1966 2.8033 14.1666 3.99992 14.1666H11.9999C13.1965 14.1666 14.1666 13.1966 14.1666 12V3.99998ZM10.2721 5.69269C10.4416 5.47495 10.756 5.43598 10.9739 5.60545C11.1916 5.77503 11.2306 6.08939 11.0611 6.30727L8.38989 9.74152C7.97412 10.2761 7.19214 10.3455 6.68872 9.89256L4.99862 8.37172C4.7934 8.18699 4.77679 7.87059 4.96151 7.66534C5.14624 7.46012 5.46264 7.44352 5.66789 7.62823L7.35734 9.14907C7.42926 9.21379 7.54143 9.20396 7.60083 9.12758L10.2721 5.69269ZM15.1666 12C15.1666 13.7489 13.7488 15.1666 11.9999 15.1666H3.99992C2.25102 15.1666 0.833252 13.7489 0.833252 12V3.99998C0.833252 2.25108 2.25102 0.833313 3.99992 0.833313H11.9999C13.7488 0.833313 15.1666 2.25108 15.1666 3.99998V12Z" }) });
+export {
+  r as CheckRectangleIcon,
+  s as CircleOffIcon,
+  n as ImagesIcon,
+  e as ShortTextIcon
+};

package/dist/components/FormViewer/helpers/formTokens.d.ts

@@ -0,0 +1,59 @@
+import { FormSize, ThemeData } from '../types/form';
+/**
+ * Единый источник дизайн-токенов формы.
+ *
+ * Все визуальные величины (цвета, размеры, скругления, обводки, отступы,
+ * тени, анимация) собраны здесь в namespace `--form-*` и инжектятся отдельным
+ * `<style>` на корень формы `#forms-provider-{id}` ДО пользовательского CSS.
+ * Благодаря этому кастомный CSS может переопределить любой токен, просто
+ * переобъявив переменную на том же селекторе — без `!important` и без завязки
+ * на Mantine-провайдер.
+ *
+ * Производные токены (soft/softer/focus-ring) ссылаются на базовый `--form-accent`
+ * через `var()`, поэтому переопределение основного цвета каскадирует на них.
+ *
+ * Семантические цвета временно резолвятся как `var(--mantine-color-*, <fallback>)`:
+ * пока Mantine-провайдер ещё жив — берётся его значение (light/dark); после его
+ * удаления сработает литеральный fallback.
+ */
+type SizeTokens = {
+    /** Высота однострочных контролов */
+    controlHeight: number;
+    /** Базовый размер шрифта внутри контрола */
+    fontSize: number;
+    /** Горизонтальные отступы внутри контрола */
+    paddingX: number;
+    /** Вертикальные отступы строки-опции (choice / multiple) */
+    rowPaddingY: number;
+    /** Зазор между элементами внутри контрола */
+    gap: number;
+    /** Размер метки выбора (радио / чекбокс) */
+    markSize: number;
+    /** Размер иконки галочки внутри метки */
+    markIconSize: number;
+    /** Высота редактируемого инпута опции в режиме редактора */
+    editFieldHeight: number;
+};
+export declare const SIZE_TOKENS: Record<FormSize, SizeTokens>;
+/** Радиус скругления контролов (px) для каждого значения `borderRadius` */
+export declare const RADIUS_TOKENS: Record<FormSize, number>;
+/** Размер заголовка слайда (px) для каждого значения размера формы */
+export declare const TITLE_SIZE_TOKENS: Record<FormSize, number>;
+export type FormScale = {
+    sizeKey: FormSize;
+    radiusKey: FormSize;
+    size: SizeTokens;
+    radius: number;
+};
+/** Резолвит размер/скругление формы в конкретные числовые токены. */
+export declare const resolveFormScale: (theme?: ThemeData) => FormScale;
+export type FormTokens = Record<string, string>;
+/**
+ * Собирает полный набор `--form-*` токенов из темы формы.
+ * Значения — строки, готовые к вставке в CSS.
+ */
+export declare const buildFormTokens: (theme?: ThemeData) => FormTokens;
+/** Сериализует набор токенов в CSS-правило, привязанное к селектору корня. */
+export declare const formTokensToCss: (tokens: FormTokens, selector: string) => string;
+export {};
+//# sourceMappingURL=formTokens.d.ts.map

package/dist/components/FormViewer/helpers/formTokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formTokens.d.ts","sourceRoot":"","sources":["../../../../src/components/FormViewer/helpers/formTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAEpD;;;;;;;;;;;;;;;;GAgBG;AAEH,KAAK,UAAU,GAAG;IAChB,oCAAoC;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,4CAA4C;IAC5C,QAAQ,EAAE,MAAM,CAAC;IACjB,6CAA6C;IAC7C,QAAQ,EAAE,MAAM,CAAC;IACjB,4DAA4D;IAC5D,WAAW,EAAE,MAAM,CAAC;IACpB,6CAA6C;IAC7C,GAAG,EAAE,MAAM,CAAC;IACZ,4CAA4C;IAC5C,QAAQ,EAAE,MAAM,CAAC;IACjB,yCAAyC;IACzC,YAAY,EAAE,MAAM,CAAC;IACrB,4DAA4D;IAC5D,eAAe,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,QAAQ,EAAE,UAAU,CA+BpD,CAAC;AAEF,2EAA2E;AAC3E,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAIlD,CAAC;AAEF,sEAAsE;AACtE,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAItD,CAAC;AAKF,MAAM,MAAM,SAAS,GAAG;IACtB,OAAO,EAAE,QAAQ,CAAC;IAClB,SAAS,EAAE,QAAQ,CAAC;IACpB,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,qEAAqE;AACrE,eAAO,MAAM,gBAAgB,GAAI,QAAQ,SAAS,KAAG,SAYpD,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEhD;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,QAAQ,SAAS,KAAG,UA8PnD,CAAC;AAEF,8EAA8E;AAC9E,eAAO,MAAM,eAAe,GAC1B,QAAQ,UAAU,EAClB,UAAU,MAAM,KACf,MAMF,CAAC"}

package/dist/components/FormViewer/helpers/formTokens.js

@@ -0,0 +1,270 @@
+const b = {
+  sm: {
+    controlHeight: 44,
+    fontSize: 14,
+    paddingX: 14,
+    rowPaddingY: 12,
+    gap: 10,
+    markSize: 18,
+    markIconSize: 12,
+    editFieldHeight: 36
+  },
+  md: {
+    controlHeight: 52,
+    fontSize: 15,
+    paddingX: 15,
+    rowPaddingY: 14,
+    gap: 12,
+    markSize: 20,
+    markIconSize: 14,
+    editFieldHeight: 40
+  },
+  lg: {
+    controlHeight: 60,
+    fontSize: 16,
+    paddingX: 17,
+    rowPaddingY: 16,
+    gap: 13,
+    markSize: 22,
+    markIconSize: 15,
+    editFieldHeight: 46
+  }
+}, u = {
+  sm: 8,
+  md: 12,
+  lg: 18
+}, v = {
+  sm: 24,
+  md: 32,
+  lg: 38
+}, e = (r) => r === "sm" || r === "md" || r === "lg", x = (r) => {
+  const t = e(r?.size) ? r.size : "md", o = e(r?.borderRadius) ? r.borderRadius : "md";
+  return {
+    sizeKey: t,
+    radiusKey: o,
+    size: b[t],
+    radius: u[o]
+  };
+}, y = (r) => {
+  const { sizeKey: t, size: o, radius: a } = x(r), n = r?.primaryColor || "#228BE6", f = r?.font?.fontFamily ? `"${r.font.fontFamily}", sans-serif` : "inherit", m = String(r?.font?.fontWeight ?? 400), i = r?.font?.color || "var(--mantine-color-text, #1a1b1e)", c = r?.input?.fontFamily ? `"${r.input.fontFamily}", sans-serif` : "inherit", d = r?.container?.color || "transparent", s = `0 0 ${r?.container?.shadowSize || 0}px ${r?.container?.shadowColor || "transparent"}`, l = `${r?.container?.blur ?? 0}px`, p = r?.input?.borderColor || "var(--mantine-color-gray-4, #ced4da)", g = r?.input?.backgroundColor || "var(--form-surface)";
+  return { ...{
+    /* ------------------------------- Акцент ------------------------------- */
+    "--form-accent": n,
+    "--form-accent-soft": "color-mix(in srgb, var(--form-accent) 10%, transparent)",
+    "--form-accent-softer": "color-mix(in srgb, var(--form-accent) 6%, transparent)",
+    "--form-accent-contrast": "#fff",
+    "--form-focus-ring": "0 0 0 3px color-mix(in srgb, var(--form-accent) 18%, transparent)",
+    /* -------------------------- Семантические цвета ----------------------- */
+    "--form-color-text": i,
+    "--form-color-muted": "var(--mantine-color-dimmed, #868e96)",
+    "--form-color-placeholder": "var(--mantine-color-placeholder, #adb5bd)",
+    "--form-color-error": "var(--mantine-color-red-6, #fa5252)",
+    "--form-surface": "var(--mantine-color-body, #ffffff)",
+    "--form-surface-muted": "var(--mantine-color-gray-1, #f1f3f5)",
+    /** Цвет текста внутри инпутов (по умолчанию — как основной текст). */
+    "--form-input-text": "var(--form-color-text)",
+    /** Шрифт контролов ввода (инпуты/опции/шкала). */
+    "--form-input-font-family": c,
+    /* ------------------------------ Обводки ------------------------------- */
+    "--form-border-color": p,
+    "--form-border-color-hover": "var(--mantine-color-gray-5, #adb5bd)",
+    "--form-border-color-strong": "var(--mantine-color-gray-3, #dee2e6)",
+    "--form-border-width": "1.5px",
+    "--form-border-width-strong": "2px",
+    "--form-border-width-thin": "1px",
+    /* ------------------------------ Поверхности --------------------------- */
+    "--form-input-bg": g,
+    /** Фон и обводка выпадающего списка (по умолчанию — как у инпута). */
+    "--form-dropdown-bg": "var(--form-input-bg)",
+    "--form-dropdown-border": "var(--form-border-color)",
+    "--form-container-bg": d,
+    /* ------------------------------- Радиусы ------------------------------ */
+    "--form-radius": `${a}px`,
+    "--form-radius-textarea": "var(--form-radius)",
+    "--form-radius-container": "var(--form-radius)",
+    "--form-radius-mark": "6px",
+    "--form-radius-pill": "50%",
+    /* -------------------- Шкала размеров контролов ------------------------ */
+    "--form-control-height": `${o.controlHeight}px`,
+    /* Высоты по типам элементов (по умолчанию — общая высота контрола). */
+    "--form-input-height": "var(--form-control-height)",
+    "--form-option-height": "var(--form-control-height)",
+    "--form-scale-height": "var(--form-control-height)",
+    "--form-button-height": "var(--form-control-height)",
+    "--form-control-font-size": `${o.fontSize}px`,
+    "--form-control-pad-x": `${o.paddingX}px`,
+    "--form-control-row-pad-y": `${o.rowPaddingY}px`,
+    "--form-control-gap": `${o.gap}px`,
+    "--form-mark-size": `${o.markSize}px`,
+    "--form-mark-icon-size": `${o.markIconSize}px`,
+    "--form-edit-field-height": `${o.editFieldHeight}px`,
+    /* ----------------------------- Типографика ---------------------------- */
+    "--form-font-family": f,
+    "--form-font-weight": m,
+    "--form-title-font-size": `${v[t]}px`,
+    /** Регистр заголовков слайдов и лейблов контролов (например uppercase). */
+    "--form-title-transform": "none",
+    "--form-error-font-size": "13px",
+    /* -------------------------------- Тени -------------------------------- */
+    "--form-shadow-menu": "0 16px 40px -12px rgb(0 0 0 / 26%)",
+    "--form-shadow-sm": "0 1px 4px rgb(0 0 0 / 18%)",
+    "--form-container-shadow": s,
+    /* ------------------------------ Анимация ------------------------------ */
+    "--form-transition": "0.12s ease",
+    "--form-transition-fast": "0.1s ease",
+    "--form-slide-duration": "0.25s",
+    /* ------------------------------- Кнопки ------------------------------- */
+    "--form-button-gap": "8px",
+    "--form-button-pad-x": "22px",
+    /** Типографика кнопок (по умолчанию — как у формы/контрола). */
+    "--form-button-font-family": "inherit",
+    "--form-button-font-size": "var(--form-control-font-size)",
+    "--form-button-font-weight": "var(--form-font-weight)",
+    /** Регистр текста кнопок (например uppercase) — общий для всех кнопок. */
+    "--form-button-transform": "none",
+    /** Фон/текст основной (filled) кнопки — по умолчанию акцент, но тема может
+     * задать другой цвет CTA, отличный от цвета выделений/фокуса. */
+    "--form-button-filled-bg": "var(--form-accent)",
+    "--form-button-filled-text": "var(--form-accent-contrast)",
+    /** Фон, текст и обводка вторичной (например «Назад») кнопки. */
+    "--form-button-secondary-bg": "var(--form-input-bg)",
+    "--form-button-secondary-bg-hover": "var(--form-surface-muted)",
+    "--form-button-secondary-text": "var(--form-color-text)",
+    "--form-button-secondary-border": "var(--form-border-color)",
+    /** Размер и насыщенность шрифта вторичной кнопки (по умолчанию — как у основной). */
+    "--form-button-secondary-font-size": "var(--form-button-font-size)",
+    "--form-button-secondary-font-weight": "var(--form-button-font-weight)",
+    /** Регистр текста вторичной кнопки (по умолчанию — как у всех кнопок). */
+    "--form-button-secondary-transform": "var(--form-button-transform)",
+    /** Стартовая кнопка: фон / текст / обводка / размер шрифта (по умолчанию — как основная). */
+    "--form-start-bg": "var(--form-accent)",
+    "--form-start-text": "var(--form-accent-contrast)",
+    "--form-start-border": "transparent",
+    "--form-start-font-size": "var(--form-button-font-size)",
+    /* ------------------------------ Copyright ----------------------------- */
+    "--form-copyright-color": "var(--form-color-muted)",
+    "--form-copyright-bg": "var(--form-surface)",
+    "--form-copyright-radius": "var(--form-radius)",
+    "--form-copyright-height": "auto",
+    "--form-copyright-pad-y": "6px",
+    "--form-copyright-pad-x": "12px",
+    "--form-copyright-border-width": "0px",
+    "--form-copyright-border-color": "transparent",
+    /* ------------------------- Контейнер / раскладка ----------------------
+       Стандартная раскладка формы (общая для всех тем, чтобы не дублировать в
+       каждой): макс. ширина 590, паддинги 32, зазор между элементами 32,
+       между элементом и его лейблом 10. */
+    "--form-container-max-width": "590px",
+    "--form-container-pad-x": "32px",
+    "--form-container-pad-y": "32px",
+    "--form-container-pad-mobile": "16px",
+    "--form-container-gap": "32px",
+    /** Зазор между элементом и его лейблом. */
+    "--form-label-gap": "10px",
+    "--form-content-pad-y": "48px",
+    "--form-container-blur": l,
+    /* -------------------------------- Медиа ------------------------------- */
+    "--form-media-padding": "16px",
+    "--form-media-radius": "var(--form-radius)",
+    /** Обводка картинки слайда (по умолчанию — нет). */
+    "--form-media-border-width": "0px",
+    "--form-media-border-color": "transparent",
+    /* ------------------------ Компонент-специфичные ----------------------- */
+    "--form-slider-track-h": "6px",
+    "--form-slider-radius": "var(--form-radius)",
+    "--form-slider-track-color": "var(--mantine-color-gray-2, #e9ecef)",
+    "--form-progress-height": "6px",
+    "--form-progress-track": "var(--form-surface-muted)",
+    "--form-picture-image-h": "130px",
+    "--form-picture-add-h": "172px",
+    "--form-picture-badge-size": "23px",
+    "--form-picture-radius": "var(--form-radius)",
+    /**
+     * Подпись карточки picture-choice: цвет / выравнивание / шрифт / регистр
+     * (по умолчанию — как основной текст, слева, без изменений). Тема может
+     * задать им свой стиль (напр. акцентный шрифт, uppercase, по центру).
+     */
+    "--form-picture-label-color": "var(--form-color-text)",
+    "--form-picture-label-align": "start",
+    "--form-picture-label-font-family": "inherit",
+    "--form-picture-label-transform": "none",
+    /** Бейдж выбора (кружок-галочка): фон / обводка (по умолчанию — акцент). */
+    "--form-badge-bg": "var(--form-accent)",
+    "--form-badge-border": "transparent",
+    /* Опции выбора (choice / multiple choice): фон, обводка, активное состояние. */
+    "--form-option-bg": "var(--form-input-bg)",
+    "--form-option-border-color": "var(--form-border-color)",
+    "--form-option-border-width": "var(--form-border-width)",
+    "--form-option-active-bg": "var(--form-accent-soft)",
+    "--form-option-active-border-color": "var(--form-accent)",
+    /** Цвет текста опции выбора: обычный и активный. */
+    "--form-option-text": "var(--form-color-text)",
+    "--form-option-active-text": "var(--form-option-text)",
+    /* Метка выбора (radio/checkbox): радиус (по умолчанию — общее скругление
+       формы, чтобы чекбокс совпадал с остальными элементами), фон и обводка. */
+    "--form-mark-radius": "var(--form-radius)",
+    "--form-mark-bg": "transparent",
+    "--form-mark-border-color": "var(--form-border-color)",
+    /* Метка в выбранном состоянии: фон и обводка (по умолчанию — акцент). */
+    "--form-mark-active-bg": "var(--form-accent)",
+    "--form-mark-active-border-color": "var(--form-accent)",
+    /* Цвет точки радио и галочки чекбокса (по умолчанию — акцент / его контраст). */
+    "--form-mark-dot-color": "var(--form-accent)",
+    "--form-mark-check-color": "var(--form-accent-contrast)",
+    /* Контрол «Шкала» (Scale): фон и обводка кнопок. */
+    "--form-scale-bg": "var(--form-input-bg)",
+    "--form-scale-border-color": "var(--form-border-color)",
+    "--form-scale-border-width": "var(--form-border-width)",
+    /** Текст шкалы и активное состояние кнопки шкалы. */
+    "--form-scale-text": "var(--form-color-text)",
+    "--form-scale-active-bg": "var(--form-accent)",
+    "--form-scale-active-border-color": "var(--form-accent)",
+    "--form-scale-active-text": "var(--form-accent-contrast)",
+    "--form-paragraph-color": "var(--form-color-text)",
+    "--form-paragraph-font-size": "16px",
+    "--form-paragraph-line-height": "1.5",
+    "--form-divider-color": "var(--mantine-color-gray-3, #dee2e6)",
+    "--form-rating-size": "2rem",
+    "--form-rating-color": "var(--form-accent)",
+    /** Обводка пустой звезды: толщина (по умолчанию — как у формы) и скругление
+     * вершин (round/miter). Тема может задать острые вершины (miter). */
+    "--form-rating-stroke": "var(--form-border-width)",
+    "--form-rating-linejoin": "round",
+    /** Цвет текста кнопок «Да/Нет» и иконки шеврона дропдауна — по умолчанию акцент. */
+    "--form-yesno-text": "var(--form-accent)",
+    "--form-chevron-color": "var(--form-accent)",
+    /**
+     * Цвет пустой (незаполненной) звезды рейтинга. Выводится из цвета текста
+     * (приглушённая версия), а НЕ из --form-border-color: тёмные темы часто
+     * делают обводку прозрачной/едва заметной → звёзды пропадали (баг повторялся
+     * в elegant/coffee/pixel). От цвета текста звёзды видны на любом фоне.
+     */
+    "--form-rating-empty-color": "color-mix(in srgb, var(--form-color-text) 30%, transparent)",
+    "--form-menu-max-h": "260px",
+    "--form-menu-offset": "6px",
+    /**
+     * Фон и цвет текста выпадающего меню (список опций). Фон по умолчанию —
+     * светлая поверхность, поэтому текст по умолчанию ТЁМНЫЙ фиксированный, а НЕ
+     * --form-color-text: у тёмных тем текст светлый → на светлом меню пропадал
+     * (баг повторялся в coffee/pixel). Тема с тёмным меню задаёт --form-menu-bg
+     * И --form-menu-text явно (напр. elegant/pixel).
+     */
+    "--form-menu-bg": "var(--form-surface)",
+    "--form-menu-text": "#242424",
+    "--form-disabled-opacity": "0.55"
+  }, ...r?.tokens ?? {} };
+}, z = (r, t) => {
+  const o = Object.entries(r).map(([a, n]) => `  ${a}: ${n};`).join(`
+`);
+  return `${t} {
+${o}
+}`;
+};
+export {
+  u as RADIUS_TOKENS,
+  b as SIZE_TOKENS,
+  v as TITLE_SIZE_TOKENS,
+  y as buildFormTokens,
+  z as formTokensToCss,
+  x as resolveFormScale
+};