@layers-app/shared 0.4.9 → 0.4.10

package/dist/components/FormViewer/components/fields/MultipleChoice/MultipleChoiceField.js

@@ -1,152 +1,165 @@
-import { jsx as a, jsxs as _ } from "react/jsx-runtime";
-import { useMemo as C, createElement as k } from "react";
-import { useTranslation as y } from "react-i18next";
-import { arrayMove as B } from "@dnd-kit/sortable";
-import { Stack as F, Text as N, Box as V, TextInput as j, InputError as z } from "@mantine/core";
-import { STATIC_CLASSES as b } from "../../../helpers/staticClasses.js";
-import { getRandomId as P } from "../../../helpers/steps.js";
-import { useSteps as U } from "../../../hooks/useCreateFormContext.js";
-import { useInterpolate as H } from "../../../hooks/useInterpolateText.js";
-import { useFormViewerStore as K } from "../../../store/formStore.js";
-import { AddOptionButton as q } from "../AddOptionButton.js";
-import { DragOptions as G } from "../DragOptions/DragOptions.js";
+import { jsx as u, jsxs as F } from "react/jsx-runtime";
+import { useMemo as h, createElement as _ } from "react";
+import { useTranslation as N } from "react-i18next";
+import { arrayMove as V } from "@dnd-kit/sortable";
+import { combineClasses as b, STATIC_CLASSES as x } from "../../../helpers/staticClasses.js";
+import { getRandomId as j } from "../../../helpers/steps.js";
+import { useSteps as k } from "../../../hooks/useCreateFormContext.js";
+import { useInterpolate as B } from "../../../hooks/useInterpolateText.js";
+import { useFormViewerStore as P } from "../../../store/formStore.js";
+import { AddOptionButton as U } from "../AddOptionButton.js";
+import { DragOptions as H } from "../DragOptions/DragOptions.js";
+import { FieldInput as K } from "../FieldInput.js";
 import { MultipleChoiceCard as S } from "./MultipleChoiceCard.js";
-const lo = ({
-  control: E,
-  step: s,
-  theme: u
+import E from "../fieldStyles.module.css.js";
+const no = ({
+  control: M,
+  step: a,
+  theme: s
 }) => {
-  const { t: l } = y("forms"), { form: g } = U(), { id: t, options: e, minOptions: d, maxOptions: i, showInput: h, otherOption: I } = E, { api: c, useStore: T } = K(), O = g.errors[t], n = g.values[t], m = T((o) => o.editing), x = C(() => {
-    if (i && n?.length === i)
+  const { t: l } = N("forms"), { form: C } = k(), { id: e, options: t, minOptions: d, maxOptions: n, otherOption: g } = M, { api: m, useStore: y } = P(), I = C.errors[e], i = C.values[e], c = y((o) => o.editing), O = h(() => {
+    if (n && i?.length === n)
       return "";
-    if (n?.length && d && n?.length < d)
+    if (i?.length && d && i?.length < d)
       return l("multipleChoice.selectMore", {
-        count: d - n?.length
+        count: d - i?.length
       });
-    if (n?.length && i && n?.length < i)
+    if (i?.length && n && i?.length < n)
       return l("multipleChoice.youCanSelectMore", {
-        count: i - n?.length
+        count: n - i?.length
       });
-    if (d && i)
+    if (d && n)
       return l("multipleChoice.selectFromTo", {
         min: d,
-        max: i
+        max: n
       });
-    if (n && d && n?.length < d)
+    if (i && d && i?.length < d)
       return l("multipleChoice.selectAtLeast", { count: d });
-  }, [i, d, l, n]), M = (o) => {
+  }, [n, d, l, i]), A = (o) => {
     const { active: r, over: p } = o;
-    if (r.id !== p?.id && e) {
-      const L = e.findIndex((f) => f.id === r.id), R = e.findIndex((f) => f.id === p?.id), D = B(e, L, R);
-      c.updateControl(s.id, t, {
+    if (r.id !== p?.id && t) {
+      const R = t.findIndex((f) => f.id === r.id), w = t.findIndex((f) => f.id === p?.id), D = V(t, R, w);
+      m.updateControl(a.id, e, {
         options: D
       });
     }
-  }, v = H(), w = C(() => [
-    ...(e || []).map((o) => ({
+  }, v = B(), L = h(() => [
+    ...(t || []).map((o) => ({
       id: o.id || "",
-      element: /* @__PURE__ */ k(
+      element: /* @__PURE__ */ _(
         S,
         {
           ...o,
-          theme: u,
-          label: m ? o.label : v(o.label),
+          theme: s,
+          label: c ? o.label : v(o.label),
           key: o.id,
-          maxOptions: i,
-          showInput: h,
-          onUpdate: m ? (r) => {
-            c.updateControl(s.id, t, {
-              options: e.map(
+          maxOptions: n,
+          onUpdate: c ? (r) => {
+            m.updateControl(a.id, e, {
+              options: t.map(
                 (p) => p.id === o.id ? { ...p, ...r } : p
               )
             });
           } : void 0,
-          onRemove: m ? () => {
-            c.updateControl(s.id, t, {
-              options: e.filter((r) => r.id !== o.id)
+          onRemove: c ? () => {
+            m.updateControl(a.id, e, {
+              options: t.filter((r) => r.id !== o.id)
             });
           } : void 0,
-          controlId: t
+          controlId: e
         }
       )
     })),
-    ...I ? [
+    ...g ? [
       {
         id: "other",
-        element: /* @__PURE__ */ a(
+        element: /* @__PURE__ */ u(
           S,
           {
             label: l("otherOption"),
-            controlId: t,
-            showInput: h,
-            theme: u,
+            controlId: e,
+            theme: s,
             id: "other"
           }
         )
       }
     ] : []
   ], [
-    c,
     m,
-    t,
-    v,
-    i,
+    c,
     e,
-    I,
-    h,
-    s.id,
+    v,
+    n,
+    t,
+    g,
+    a.id,
     l,
-    u
-  ]), A = C(() => e?.find((o) => o.id === "other")?.label, [e]);
-  return /* @__PURE__ */ _(
-    F,
+    s
+  ]), T = h(() => t?.find((o) => o.id === "other")?.label, [t]);
+  return /* @__PURE__ */ F(
+    "div",
     {
-      gap: 16,
-      "data-control-id": t,
-      className: b.BLOCK_MULTIPLE_CHOICE,
+      className: b(
+        E.field,
+        x.BLOCK_MULTIPLE_CHOICE
+      ),
+      "data-control-id": e,
+      style: { gap: 16 },
       children: [
-        x && /* @__PURE__ */ a(N, { c: "dimmed", children: x }),
-        /* @__PURE__ */ a(V, { w: "fit-content", children: /* @__PURE__ */ a(
-          G,
+        O && /* @__PURE__ */ u("div", { style: { color: "var(--mantine-color-dimmed)" }, children: O }),
+        /* @__PURE__ */ u(
+          H,
           {
-            editable: m,
-            options: w,
-            onDragEnd: M
+            editable: c,
+            options: L,
+            onDragEnd: A,
+            align: s?.align
           }
-        ) }),
-        n?.includes("other") && /* @__PURE__ */ a(
-          j,
+        ),
+        i?.includes("other") && /* @__PURE__ */ u(
+          K,
           {
-            size: u?.size,
-            value: A,
+            controlId: `${e}-other`,
+            theme: s,
+            value: T ?? "",
             placeholder: l("otherOptionPlaceholder"),
             onChange: (o) => {
-              c.updateControl(s.id, t, {
-                options: e.map(
+              m.updateControl(a.id, e, {
+                options: t.map(
                   (r) => r.id === "other" ? { ...r, label: o.target.value } : r
                 )
               });
             }
           }
         ),
-        m && /* @__PURE__ */ a(
-          q,
+        c && /* @__PURE__ */ u(
+          U,
           {
+            theme: s,
             onClick: () => {
-              c.updateControl(s.id, t, {
+              m.updateControl(a.id, e, {
                 options: [
-                  ...e || [],
-                  { id: P(), label: l("newOption") }
+                  ...t || [],
+                  { id: j(), label: l("newOption") }
                 ]
               });
             }
           }
         ),
-        O && /* @__PURE__ */ a(z, { className: b.VALIDATION_ERROR, children: O })
+        I && /* @__PURE__ */ u(
+          "div",
+          {
+            className: b(
+              E.error,
+              x.VALIDATION_ERROR
+            ),
+            children: I
+          }
+        )
       ]
     }
   );
 };
 export {
-  lo as MultipleChoiceField
+  no as MultipleChoiceField
 };

package/dist/components/FormViewer/components/fields/NumberField.d.ts

@@ -1,5 +1,6 @@
-import { NumberControl } from '../../types/form';
-export declare const NumberField: ({ control }: {
+import { NumberControl, ThemeData } from '../../types/form';
+export declare const NumberField: ({ control, theme, }: {
     control: NumberControl;
+    theme?: ThemeData;
 }) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=NumberField.d.ts.map

package/dist/components/FormViewer/components/fields/NumberField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/NumberField.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,eAAO,MAAM,WAAW,GAAI,aAAa;IAAE,OAAO,EAAE,aAAa,CAAA;CAAE,4CA4BlE,CAAC"}
+{"version":3,"file":"NumberField.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/NumberField.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAG5D,eAAO,MAAM,WAAW,GAAI,qBAGzB;IACD,OAAO,EAAE,aAAa,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,4CAyDA,CAAC"}

package/dist/components/FormViewer/components/fields/NumberField.js

@@ -1,28 +1,50 @@
-import { jsx as t } from "react/jsx-runtime";
-import { NumberInput as f } from "@mantine/core";
-import { ProjectIcon as l } from "../../../ProjectIcon/ProjectIcon.js";
-import { controlsDataMap as d } from "../../helpers/controls.js";
-import { STATIC_CLASSES as u } from "../../helpers/staticClasses.js";
-import { DEFAULT_MAX as S, DEFAULT_MIN as I } from "../../helpers/steps.js";
-import { useSteps as T } from "../../hooks/useCreateFormContext.js";
-import { useInterpolateText as N } from "../../hooks/useInterpolateText.js";
-import { useFormViewerStore as x } from "../../store/formStore.js";
-const h = ({ control: o }) => {
-  const { form: e } = T(), { useStore: m } = x(), i = m((a) => a.editing), { id: r, min: n, max: p, placeholder: c } = o, s = N(c, i);
-  return /* @__PURE__ */ t(
-    f,
+import { jsx as b } from "react/jsx-runtime";
+import { useState as g, useEffect as x } from "react";
+import { STATIC_CLASSES as I } from "../../helpers/staticClasses.js";
+import { DEFAULT_MAX as T, DEFAULT_MIN as h } from "../../helpers/steps.js";
+import { useSteps as y } from "../../hooks/useCreateFormContext.js";
+import { useInterpolateText as A } from "../../hooks/useInterpolateText.js";
+import { useFormViewerStore as C } from "../../store/formStore.js";
+import { FieldInput as E } from "./FieldInput.js";
+const w = ({
+  control: l,
+  theme: p
+}) => {
+  const { form: r } = y(), { useStore: c } = C(), s = c((n) => n.editing), { id: t, min: f, max: d, placeholder: N } = l, S = A(N, s), u = r.getInputProps(t), e = r.values[t], [m, i] = g(
+    () => typeof e == "number" ? String(e) : ""
+  );
+  x(() => {
+    const n = typeof e == "number" ? e : "", o = m === "" ? "" : Number(m);
+    n !== o && i(typeof e == "number" ? String(e) : "");
+  }, [e]);
+  const F = (n) => {
+    const o = n.target.value;
+    if (i(o), o === "") {
+      r.setFieldValue(t, "");
+      return;
+    }
+    const a = Number(o);
+    r.setFieldValue(t, Number.isNaN(a) ? o : a);
+  };
+  return /* @__PURE__ */ b(
+    E,
     {
-      w: "100%",
-      "data-control-id": r,
-      className: u.BLOCK_INPUT_NUMBER,
-      leftSection: o.icon ? /* @__PURE__ */ t(l, { icon: o.icon }) : d[o.controlType].icon,
-      min: n || I,
-      max: p || S,
-      placeholder: s,
-      ...e.getInputProps(r)
+      controlId: t,
+      theme: p,
+      type: "number",
+      className: I.BLOCK_INPUT_NUMBER,
+      readOnly: s,
+      placeholder: S,
+      min: f || h,
+      max: d || T,
+      value: m,
+      error: r.errors[t],
+      onChange: F,
+      onFocus: u.onFocus,
+      onBlur: u.onBlur
     }
   );
 };
 export {
-  h as NumberField
+  w as NumberField
 };

package/dist/components/FormViewer/components/fields/ParagraphField.d.ts

@@ -0,0 +1,7 @@
+import { ParagraphControl, StepData } from '../../types/form';
+/** Текстовый контрол (абзац / заметка / подпись) — оформительский элемент. */
+export declare const ParagraphField: ({ control, step, }: {
+    control: ParagraphControl;
+    step: StepData;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ParagraphField.d.ts.map

package/dist/components/FormViewer/components/fields/ParagraphField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParagraphField.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/ParagraphField.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAS9D,8EAA8E;AAC9E,eAAO,MAAM,cAAc,GAAI,oBAG5B;IACD,OAAO,EAAE,gBAAgB,CAAC;IAC1B,IAAI,EAAE,QAAQ,CAAC;CAChB,4CA+DA,CAAC"}

package/dist/components/FormViewer/components/fields/ParagraphField.js

@@ -0,0 +1,55 @@
+import { jsx as t } from "react/jsx-runtime";
+import { useMemo as h } from "react";
+import { useTranslation as g } from "react-i18next";
+import { combineClasses as d, STATIC_CLASSES as S } from "../../helpers/staticClasses.js";
+import { useInterpolateText as v } from "../../hooks/useInterpolateText.js";
+import { useFormViewerStore as c } from "../../store/formStore.js";
+import { EditableContent as u } from "./EditableContent/EditableContent.js";
+const C = {
+  paragraph: 16,
+  note: 16,
+  caption: 14
+}, y = ({
+  control: e,
+  step: o
+}) => {
+  const { t: p } = g("forms"), { useStore: s, api: l } = c(), a = s((i) => i.editing), r = e.variant ? `${C[e.variant]}px` : "var(--form-paragraph-font-size)", m = h(() => ({
+    // Без явного выравнивания — следуем общему выравниванию формы (--align).
+    textAlign: e.align ?? "var(--align, start)",
+    color: e.color || "var(--form-paragraph-color)",
+    fontSize: e.fontSize ? `${e.fontSize}px` : r,
+    lineHeight: "var(--form-paragraph-line-height, 1.5)",
+    fontStyle: e.variant === "note" ? "italic" : void 0,
+    opacity: e.variant === "caption" ? 0.75 : void 0,
+    margin: 0,
+    width: "100%",
+    whiteSpace: "pre-wrap"
+  }), [
+    e.align,
+    e.color,
+    e.fontSize,
+    e.variant,
+    r
+  ]), f = v(e.title, a), n = a ? /* @__PURE__ */ t(
+    u,
+    {
+      allowNewLines: !0,
+      value: e.title,
+      placeholder: p("paragraphPlaceholder"),
+      onChange: (i) => l.updateControl(o.id, e.id, { title: i })
+    }
+  ) : f;
+  return /* @__PURE__ */ t("p", { className: d(S.BLOCK), style: m, children: !a && e.link ? /* @__PURE__ */ t(
+    "a",
+    {
+      href: e.link,
+      target: "_blank",
+      rel: "noreferrer",
+      style: { color: "inherit" },
+      children: n
+    }
+  ) : n });
+};
+export {
+  y as ParagraphField
+};

package/dist/components/FormViewer/components/fields/PhoneField.d.ts

@@ -1,5 +1,6 @@
-import { PhoneControl } from '../../types/form';
-export declare const PhoneField: ({ control }: {
+import { PhoneControl, ThemeData } from '../../types/form';
+export declare const PhoneField: ({ control, theme, }: {
     control: PhoneControl;
+    theme?: ThemeData;
 }) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PhoneField.d.ts.map

package/dist/components/FormViewer/components/fields/PhoneField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneField.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/PhoneField.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,eAAO,MAAM,UAAU,GAAI,aAAa;IAAE,OAAO,EAAE,YAAY,CAAA;CAAE,4CA0BhE,CAAC"}
+{"version":3,"file":"PhoneField.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/PhoneField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAG3D,eAAO,MAAM,UAAU,GAAI,qBAGxB;IACD,OAAO,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,4CA0BA,CAAC"}

package/dist/components/FormViewer/components/fields/PhoneField.js

@@ -1,24 +1,29 @@
-import { jsx as e } from "react/jsx-runtime";
-import { TextInput as s } from "@mantine/core";
-import { ProjectIcon as a } from "../../../ProjectIcon/ProjectIcon.js";
-import { controlsDataMap as d } from "../../helpers/controls.js";
-import { useSteps as l } from "../../hooks/useCreateFormContext.js";
-import { useInterpolateText as f } from "../../hooks/useInterpolateText.js";
-import { useFormViewerStore as u } from "../../store/formStore.js";
-const j = ({ control: o }) => {
-  const { form: r } = l(), { id: t, placeholder: i } = o, { useStore: n } = u(), p = n((m) => m.editing), c = f(i, p);
-  return /* @__PURE__ */ e(
-    s,
+import { jsx as c } from "react/jsx-runtime";
+import { useSteps as m } from "../../hooks/useCreateFormContext.js";
+import { useInterpolateText as d } from "../../hooks/useInterpolateText.js";
+import { useFormViewerStore as a } from "../../store/formStore.js";
+import { FieldInput as f } from "./FieldInput.js";
+const x = ({
+  control: t,
+  theme: n
+}) => {
+  const { form: l } = m(), { id: e, placeholder: p } = t, { useStore: s } = a(), r = s((u) => u.editing), i = d(p, r), o = l.getInputProps(e);
+  return /* @__PURE__ */ c(
+    f,
     {
-      "data-control-id": t,
-      w: "100%",
-      variant: "default",
-      leftSection: o.icon ? /* @__PURE__ */ e(a, { icon: o.icon }) : d[o.controlType].icon,
-      placeholder: c,
-      ...r.getInputProps(t)
+      controlId: e,
+      theme: n,
+      type: "tel",
+      readOnly: r,
+      placeholder: i,
+      value: o.value ?? "",
+      error: o.error,
+      onChange: o.onChange,
+      onFocus: o.onFocus,
+      onBlur: o.onBlur
     }
   );
 };
 export {
-  j as PhoneField
+  x as PhoneField
 };

package/dist/components/FormViewer/components/fields/ProgressLine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressLine.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/ProgressLine.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,YAAY,sDAsBxB,CAAC"}
+{"version":3,"file":"ProgressLine.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/ProgressLine.tsx"],"names":[],"mappings":"AAqBA,eAAO,MAAM,YAAY,sDAwBxB,CAAC"}

package/dist/components/FormViewer/components/fields/ProgressLine.js

@@ -1,30 +1,38 @@
 import { jsx as s } from "react/jsx-runtime";
-import { Progress as n } from "@mantine/core";
 import { useActiveStep as i } from "../../hooks/useActiveStep.js";
-import { useFormViewerStore as p } from "../../store/formStore.js";
-import { stepsReselect as c } from "../../store/selectors.js";
-function u(e, t) {
-  return e / t * 100;
+import { useFormViewerStore as c } from "../../store/formStore.js";
+import { stepsReselect as a } from "../../store/selectors.js";
+function d(e, r) {
+  return e / r * 100;
 }
-const S = () => {
-  const e = i(), { useStore: t } = p(), r = t(c);
-  return e?.isEnd ? null : /* @__PURE__ */ s(
-    n,
+const p = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  zIndex: 100,
+  width: "100%",
+  height: "var(--form-progress-height)",
+  background: "var(--form-progress-track)",
+  overflow: "hidden"
+}, m = () => {
+  const e = i(), { useStore: r } = c(), t = r(a);
+  if (e?.isEnd) return null;
+  const o = d(
+    t.currentSteps.findIndex((n) => n.id === e?.id) + 1,
+    t.currentSteps.length
+  );
+  return /* @__PURE__ */ s("div", { style: p, role: "progressbar", "aria-valuenow": Math.round(o), children: /* @__PURE__ */ s(
+    "div",
     {
-      radius: 0,
-      value: u(
-        r.currentSteps.findIndex((o) => o.id === e?.id) + 1,
-        r.currentSteps.length
-      ),
-      pos: "absolute",
-      top: 0,
-      w: "100%",
       style: {
-        zIndex: 100
+        height: "100%",
+        width: `${o}%`,
+        background: "var(--form-accent)",
+        transition: "width 0.2s ease"
       }
     }
-  );
+  ) });
 };
 export {
-  S as ProgressLine
+  m as ProgressLine
 };

package/dist/components/FormViewer/components/fields/RatingField.d.ts

@@ -1,5 +1,5 @@
 import { RatingControl, ThemeData } from '../../types/form';
-export declare const RatingField: ({ control, theme, }: {
+export declare const RatingField: ({ control, }: {
     control: RatingControl;
     theme?: ThemeData;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FormViewer/components/fields/RatingField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RatingField.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/RatingField.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE5D,eAAO,MAAM,WAAW,GAAI,qBAGzB;IACD,OAAO,EAAE,aAAa,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,4CA6BA,CAAC"}
+{"version":3,"file":"RatingField.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/RatingField.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAI5D,eAAO,MAAM,WAAW,GAAI,cAEzB;IACD,OAAO,EAAE,aAAa,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,4CAoBA,CAAC"}

package/dist/components/FormViewer/components/fields/RatingField.js

@@ -1,31 +1,24 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { Box as l, Rating as d, InputError as u } from "@mantine/core";
-import { clamp as a } from "lodash-es";
-import { useSteps as f } from "../../hooks/useCreateFormContext.js";
-import { useFormViewerStore as x } from "../../store/formStore.js";
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { clamp as u } from "lodash-es";
+import { useSteps as a } from "../../hooks/useCreateFormContext.js";
+import { useFormViewerStore as c } from "../../store/formStore.js";
+import { FormInputError as l } from "../ui/FormInputError.js";
+import { FormRating as f } from "../ui/FormRating.js";
 const S = ({
-  control: i,
-  theme: t
+  control: n
 }) => {
-  const { form: o } = f(), { id: r, count: s } = i, { useStore: n } = x(), m = n((p) => p.editing);
-  return /* @__PURE__ */ c(l, { flex: 1, w: "100%", pb: 12, "data-control-id": r, children: [
+  const { form: r } = a(), { id: o, count: i } = n, { useStore: m } = c(), s = m((p) => p.editing), t = r.getInputProps(o);
+  return /* @__PURE__ */ d("div", { style: { flex: 1, width: "100%", paddingBottom: 12 }, "data-control-id": o, children: [
     /* @__PURE__ */ e(
-      d,
+      f,
       {
-        styles: {
-          root: {
-            width: "100%",
-            justifyContent: "space-between"
-          }
-        },
-        color: t?.primaryColor,
-        size: "xl",
-        count: a(s || 5, 1, 10),
-        readOnly: m,
-        ...o.getInputProps(r)
+        value: typeof t.value == "number" ? t.value : 0,
+        onChange: t.onChange,
+        count: u(i || 5, 1, 10),
+        readOnly: s
       }
     ),
-    o.errors[r] && /* @__PURE__ */ e(u, { size: t?.size, mt: 4, children: o.errors[r] })
+    r.errors[o] && /* @__PURE__ */ e(l, { children: r.errors[o] })
   ] });
 };
 export {

package/dist/components/FormViewer/components/fields/ScaleField.d.ts

@@ -0,0 +1,7 @@
+import { ScaleControl, ThemeData } from '../../types/form';
+/** Числовая шкала (NPS): ряд пронумерованных кнопок, одиночный выбор. */
+export declare const ScaleField: ({ control, }: {
+    control: ScaleControl;
+    theme?: ThemeData;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ScaleField.d.ts.map

package/dist/components/FormViewer/components/fields/ScaleField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScaleField.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/ScaleField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAS3D,yEAAyE;AACzE,eAAO,MAAM,UAAU,GAAI,cAExB;IACD,OAAO,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,4CAqDA,CAAC"}