@layers-app/shared 0.4.8 → 0.4.10

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

@@ -1,31 +1,71 @@
-import { jsx as a } from "react/jsx-runtime";
-import { DateInput as s } from "@mantine/dates";
-import { ProjectIcon as d } from "../../../ProjectIcon/ProjectIcon.js";
-import { controlsDataMap as f } from "../../helpers/controls.js";
-import { useSteps as D } from "../../hooks/useCreateFormContext.js";
-import { useInterpolateText as u } from "../../hooks/useInterpolateText.js";
-import { useFormViewerStore as x } from "../../store/formStore.js";
-const y = ({ control: e }) => {
-  const { form: n } = D(), { id: t, minDate: o, maxDate: r, placeholder: p } = e, { useStore: m } = x(), i = m((l) => l.editing), c = u(p, i);
-  return /* @__PURE__ */ a(
-    s,
-    {
-      w: "100%",
-      "data-control-id": t,
-      leftSection: e.icon ? /* @__PURE__ */ a(d, { icon: e.icon }) : f[e.controlType].icon,
-      clearable: !0,
-      minDate: o ? new Date(o) : void 0,
-      maxDate: r ? new Date(r) : void 0,
-      placeholder: c,
-      readOnly: i,
-      popoverProps: {
-        withinPortal: !1,
-        floatingStrategy: "fixed"
-      },
-      ...n.getInputProps(t)
-    }
-  );
+import { jsxs as u, jsx as r } from "react/jsx-runtime";
+import { useState as C, useRef as S, useEffect as w } from "react";
+import { DatePicker as x } from "@mantine/dates";
+import { IconX as I } from "@tabler/icons-react";
+import { combineClasses as L, STATIC_CLASSES as T } from "../../helpers/staticClasses.js";
+import { useSteps as b } from "../../hooks/useCreateFormContext.js";
+import { useInterpolateText as E } from "../../hooks/useInterpolateText.js";
+import { useFormViewerStore as P } from "../../store/formStore.js";
+import t from "./fieldStyles.module.css.js";
+const R = (n) => {
+  if (!n) return "";
+  const o = /* @__PURE__ */ new Date(`${n}T00:00:00`);
+  return Number.isNaN(o.getTime()) ? n : o.toLocaleDateString();
+}, M = ({ control: n }) => {
+  const { form: o } = b(), { id: d, minDate: p, maxDate: f, placeholder: g } = n, { useStore: v } = P(), a = v((e) => e.editing), D = E(g, a), [i, c] = C(!1), m = S(null), l = o.getInputProps(d), s = typeof l.value == "string" ? l.value : null, h = o.errors[d];
+  return w(() => {
+    if (!i) return;
+    const e = (N) => {
+      m.current && !m.current.contains(N.target) && c(!1);
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, [i]), /* @__PURE__ */ u("div", { className: t.field, "data-control-id": d, children: [
+    /* @__PURE__ */ u("div", { className: t.ddWrap, ref: m, children: [
+      /* @__PURE__ */ u(
+        "div",
+        {
+          className: t.ddControl,
+          "data-open": i,
+          "data-editing": a,
+          onClick: () => !a && c((e) => !e),
+          children: [
+            /* @__PURE__ */ r("div", { className: t.ddLeft, children: /* @__PURE__ */ r("span", { className: t.ddValue, "data-placeholder": !s, children: s ? R(s) : D }) }),
+            s && !a ? /* @__PURE__ */ r(
+              "button",
+              {
+                type: "button",
+                className: t.ddClear,
+                "aria-label": "clear",
+                onClick: (e) => {
+                  e.stopPropagation(), l.onChange(null);
+                },
+                children: /* @__PURE__ */ r(I, { size: 16 })
+              }
+            ) : null
+          ]
+        }
+      ),
+      i && !a && /* @__PURE__ */ r("div", { className: t.dateMenu, children: /* @__PURE__ */ r(
+        x,
+        {
+          value: s,
+          onChange: (e) => {
+            l.onChange(e), c(!1);
+          },
+          minDate: p ? new Date(p) : void 0,
+          maxDate: f ? new Date(f) : void 0
+        }
+      ) })
+    ] }),
+    h ? /* @__PURE__ */ r(
+      "div",
+      {
+        className: L(t.error, T.VALIDATION_ERROR),
+        children: h
+      }
+    ) : null
+  ] });
 };
 export {
-  y as DateField
+  M as DateField
 };

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

@@ -0,0 +1,6 @@
+import { DividerControl } from '../../types/form';
+/** Разделитель: линия (сплошная / пунктир / точки) либо пустой отступ. */
+export declare const DividerField: ({ control }: {
+    control: DividerControl;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DividerField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DividerField.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/DividerField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAkBlD,0EAA0E;AAC1E,eAAO,MAAM,YAAY,GAAI,aAAa;IAAE,OAAO,EAAE,cAAc,CAAA;CAAE,4CAcpE,CAAC"}

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

@@ -0,0 +1,25 @@
+import { jsx as s } from "react/jsx-runtime";
+import { combineClasses as i, STATIC_CLASSES as d } from "../../helpers/staticClasses.js";
+const n = {
+  s: 8,
+  m: 16,
+  l: 32
+}, t = {
+  line: "solid",
+  dashed: "dashed",
+  dots: "dotted",
+  space: "none"
+}, c = ({ control: e }) => {
+  const o = e.lineStyle ?? "line", r = {
+    width: "100%",
+    margin: `${n[e.space ?? "m"]}px 0`,
+    border: "none",
+    borderTopStyle: t[o],
+    borderTopWidth: o === "space" ? 0 : `${e.thickness ?? 1}px`,
+    borderTopColor: e.color || "var(--form-divider-color)"
+  };
+  return /* @__PURE__ */ s("hr", { className: i(d.BLOCK), style: r });
+};
+export {
+  c as DividerField
+};

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

@@ -1,7 +1,7 @@
 import { jsx as e, Fragment as g } from "react/jsx-runtime";
-import { Fragment as d } from "react";
-import { useSensors as u, useSensor as S, PointerSensor as h, DndContext as p, closestCenter as y } from "@dnd-kit/core";
-import { restrictToParentElement as b } from "@dnd-kit/modifiers";
+import { Fragment as l } from "react";
+import { useSensors as u, useSensor as S, PointerSensor as h, DndContext as y, closestCenter as b } from "@dnd-kit/core";
+import { restrictToParentElement as p } from "@dnd-kit/modifiers";
 import { SortableContext as C, rectSortingStrategy as x, useSortable as v } from "@dnd-kit/sortable";
 import { CSS as D } from "@dnd-kit/utilities";
 import { alignRelation as c } from "../../../helpers/themeUtils.js";
@@ -12,11 +12,11 @@ const j = ({ id: r, children: a }) => {
     attributes: m,
     listeners: i,
     setNodeRef: n,
-    transform: l,
+    transform: d,
     transition: o,
     isDragging: s
   } = v({ id: r }), t = {
-    transform: D.Translate.toString(l),
+    transform: D.Translate.toString(d),
     transition: o,
     opacity: s ? 0.5 : 1,
     zIndex: s ? 1e3 : "auto"
@@ -29,7 +29,7 @@ const j = ({ id: r, children: a }) => {
   isGrid: i,
   align: n
 }) => {
-  const { useStore: l } = F(), o = l((t) => t.isMobile), s = u(
+  const { useStore: d } = F(), o = d((t) => t.isMobile), s = u(
     S(h, {
       activationConstraint: {
         distance: 10
@@ -37,12 +37,12 @@ const j = ({ id: r, children: a }) => {
     })
   );
   return /* @__PURE__ */ e(g, { children: m ? /* @__PURE__ */ e(
-    p,
+    y,
     {
       sensors: s,
-      collisionDetection: y,
+      collisionDetection: b,
       onDragEnd: a,
-      modifiers: [b],
+      modifiers: [p],
       children: /* @__PURE__ */ e(
         "div",
         {
@@ -57,7 +57,7 @@ const j = ({ id: r, children: a }) => {
             {
               items: r?.map((t) => t.id).filter(Boolean) || [],
               strategy: x,
-              children: r?.map((t) => t.id === "other" ? /* @__PURE__ */ e(d, { children: t.element }, t.id) : /* @__PURE__ */ e(j, { id: t.id, children: t.element }, t.id))
+              children: r?.map((t) => t.id === "other" || t.id === "add" ? /* @__PURE__ */ e(l, { children: t.element }, t.id) : /* @__PURE__ */ e(j, { id: t.id, children: t.element }, t.id))
             }
           )
         }
@@ -72,7 +72,7 @@ const j = ({ id: r, children: a }) => {
       style: {
         justifyContent: c[n || "start"]
       },
-      children: r?.map((t) => /* @__PURE__ */ e(d, { children: t.element }, t.id))
+      children: r?.map((t) => /* @__PURE__ */ e(l, { children: t.element }, t.id))
     }
   ) });
 };

package/dist/components/FormViewer/components/fields/DragOptions/DragOptions.module.css.js

@@ -1,4 +1,4 @@
-const s = "_dragOptions_8pbru_1", t = {
+const s = "_dragOptions_zrk4g_1", t = {
   dragOptions: s
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FormViewer/components/fields/DropdownField/DropdownField.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAM3E,eAAO,MAAM,aAAa,GAAI,2BAI3B;IACD,OAAO,EAAE,eAAe,CAAC;IACzB,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,4CAqIA,CAAC"}
+{"version":3,"file":"DropdownField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/FormViewer/components/fields/DropdownField/DropdownField.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAO3E,eAAO,MAAM,aAAa,GAAI,2BAI3B;IACD,OAAO,EAAE,eAAe,CAAC;IACzB,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,4CAgKA,CAAC"}

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

@@ -1,117 +1,133 @@
-import { jsxs as m, jsx as n } from "react/jsx-runtime";
-import { useMemo as g } from "react";
-import { useTranslation as I } from "react-i18next";
-import { Flex as S, Box as u, Select as v, Stack as O } from "@mantine/core";
-import { IconTrash as h } from "@tabler/icons-react";
-import { ProjectIcon as j } from "../../../../ProjectIcon/ProjectIcon.js";
-import { controlsDataMap as T } from "../../../helpers/controls.js";
-import { getRandomId as k } from "../../../helpers/steps.js";
-import { useSteps as z } from "../../../hooks/useCreateFormContext.js";
-import { useInterpolate as F, useInterpolateText as P } from "../../../hooks/useInterpolateText.js";
-import { useFormViewerStore as R } from "../../../store/formStore.js";
-import { AddOptionButton as B } from "../AddOptionButton.js";
-import { EditableContent as D } from "../EditableContent/EditableContent.js";
-import M from "./DropdownField.module.css.js";
-const Y = ({
-  control: l,
-  step: a,
-  theme: r
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { useState as O, useRef as R, useMemo as T, useEffect as x } from "react";
+import { useTranslation as y } from "react-i18next";
+import { IconSelector as z, IconChevronDown as A, IconCheck as D, IconTrash as F } from "@tabler/icons-react";
+import { combineClasses as L, STATIC_CLASSES as V } from "../../../helpers/staticClasses.js";
+import { getRandomId as P } from "../../../helpers/steps.js";
+import { useSteps as j } from "../../../hooks/useCreateFormContext.js";
+import { useInterpolate as B, useInterpolateText as M } from "../../../hooks/useInterpolateText.js";
+import { useFormViewerStore as _ } from "../../../store/formStore.js";
+import { AddOptionButton as K } from "../AddOptionButton.js";
+import { EditableContent as W } from "../EditableContent/EditableContent.js";
+import { useFieldTokens as q } from "../fieldTheme.js";
+import o from "../fieldStyles.module.css.js";
+const re = ({
+  control: b,
+  step: c,
+  theme: k
 }) => {
-  const { t: f } = I("forms"), { api: d, useStore: C } = R(), { form: b } = z(), { id: e, options: t, placeholder: w } = l, i = C((o) => o.editing), c = F(), y = P(w, i), x = g(() => t?.map((o) => ({
-    id: o.id || "",
-    element: /* @__PURE__ */ m(
-      S,
-      {
-        w: "100%",
-        justify: "space-between",
-        style: { color: r?.primaryColor },
-        children: [
-          /* @__PURE__ */ n(
-            D,
-            {
-              value: i ? o.label : c(o.label),
-              placeholder: "Option",
-              onChange: (p) => {
-                i && d.updateControl(a.id, e, {
-                  options: t.map(
-                    (s) => s.id === o.id ? { ...s, label: p } : s
-                  )
-                });
-              }
-            }
-          ),
-          /* @__PURE__ */ n(
-            h,
-            {
-              color: "red",
-              size: 16,
-              opacity: 0.6,
-              cursor: "pointer",
-              onClick: i ? () => {
-                d.updateControl(a.id, e, {
-                  options: t.filter((p) => p.id !== o.id)
-                });
-              } : void 0
+  const { t: S } = y("forms"), { api: m, useStore: E } = _(), { form: I } = j(), { id: d, options: i, placeholder: w } = b, r = E((e) => e.editing), N = B(), g = M(w, r), { markIconSize: p } = q(k), [l, a] = O(!1), u = R(null), f = I.getInputProps(d), h = f.value, v = T(
+    () => i?.find((e) => e.id === h),
+    [i, h]
+  );
+  return x(() => {
+    if (!l) return;
+    const e = (n) => {
+      u.current && !u.current.contains(n.target) && a(!1);
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, [l]), /* @__PURE__ */ s("div", { className: o.field, "data-control-id": d, children: [
+    /* @__PURE__ */ s("div", { className: o.ddWrap, ref: u, children: [
+      /* @__PURE__ */ s(
+        "div",
+        {
+          className: o.ddControl,
+          "data-select": "true",
+          "data-open": l && !r,
+          "data-editing": r,
+          role: "button",
+          tabIndex: r ? -1 : 0,
+          onClick: () => {
+            r || a((e) => !e);
+          },
+          onKeyDown: (e) => {
+            r || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), a((n) => !n));
+          },
+          children: [
+            /* @__PURE__ */ t("span", { className: o.ddValue, "data-placeholder": !v, children: v ? N(v.label) : g }),
+            /* @__PURE__ */ t("span", { className: o.ddChevron, children: r ? /* @__PURE__ */ t(z, { size: p + 4, stroke: 1.9 }) : /* @__PURE__ */ t(A, { size: p + 4, stroke: 1.9 }) })
+          ]
+        }
+      ),
+      l && !r && i?.length ? /* @__PURE__ */ t("div", { className: o.ddMenu, children: i.map((e) => {
+        const n = h === e.id;
+        return /* @__PURE__ */ s(
+          "div",
+          {
+            className: o.ddItem,
+            "data-active": n,
+            onClick: () => {
+              I.setFieldValue(d, e.id), a(!1);
+            },
+            children: [
+              /* @__PURE__ */ t("span", { children: N(e.label) }),
+              n ? /* @__PURE__ */ t("span", { className: o.ddCheck, children: /* @__PURE__ */ t(D, { size: p + 1, stroke: 2.4 }) }) : null
+            ]
+          },
+          e.id
+        );
+      }) }) : null
+    ] }),
+    r && /* @__PURE__ */ s("div", { className: o.ddEditList, children: [
+      i?.map((e) => /* @__PURE__ */ s("div", { className: o.optEditRow, children: [
+        /* @__PURE__ */ t("div", { className: o.optEditField, children: /* @__PURE__ */ t(
+          W,
+          {
+            value: e.label,
+            placeholder: "Option",
+            onChange: (n) => {
+              m.updateControl(c.id, d, {
+                options: i.map(
+                  (C) => C.id === e.id ? { ...C, label: n } : C
+                )
+              });
             }
-          )
-        ]
-      },
-      o.id
-    )
-  })), [t, r?.primaryColor, i, d, a.id, e, c]);
-  return /* @__PURE__ */ m(u, { w: "100%", children: [
-    /* @__PURE__ */ n(
-      v,
+          }
+        ) }),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            className: o.trashBtn,
+            onClick: () => {
+              m.updateControl(c.id, d, {
+                options: i.filter((n) => n.id !== e.id)
+              });
+            },
+            children: /* @__PURE__ */ t(F, { size: "1em" })
+          }
+        )
+      ] }, e.id)),
+      /* @__PURE__ */ t(
+        K,
+        {
+          theme: k,
+          onClick: () => {
+            m.updateControl(c.id, d, {
+              options: [
+                ...i || [],
+                {
+                  id: P(),
+                  label: S("newOption")
+                }
+              ]
+            });
+          }
+        }
+      )
+    ] }),
+    f.error && /* @__PURE__ */ t(
+      "div",
       {
-        size: r?.size,
-        radius: r?.borderRadius,
-        color: r?.primaryColor,
-        "data-control-id": e,
-        w: "100%",
-        leftSection: l.icon ? /* @__PURE__ */ n(j, { icon: l.icon }) : T[l.controlType].icon,
-        dropdownOpened: i ? !1 : void 0,
-        data: t?.map((o) => ({
-          label: o.label,
-          value: o.id
-        })),
-        placeholder: y,
-        ...b.getInputProps(e)
-      }
-    ),
-    i && /* @__PURE__ */ m(
-      O,
-      {
-        mt: 8,
-        gap: 8,
-        w: "100%",
-        "data-radius": r?.borderRadius,
-        style: {
-          "--dropdown-border-color": r?.primaryColor
-        },
-        className: M.optionsContainer,
-        children: [
-          x?.map((o) => o.element),
-          /* @__PURE__ */ n(u, { mx: -8, children: /* @__PURE__ */ n(
-            B,
-            {
-              onClick: () => {
-                d.updateControl(a.id, e, {
-                  options: [
-                    ...t || [],
-                    {
-                      id: k(),
-                      label: f("newOption")
-                    }
-                  ]
-                });
-              }
-            }
-          ) })
-        ]
+        className: L(
+          o.error,
+          V.VALIDATION_ERROR
+        ),
+        children: f.error
       }
     )
   ] });
 };
 export {
-  Y as DropdownField
+  re as DropdownField
 };

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"EmailField.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/EmailField.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,eAAO,MAAM,UAAU,GAAI,aAAa;IAAE,OAAO,EAAE,YAAY,CAAA;CAAE,4CA2BhE,CAAC"}
+{"version":3,"file":"EmailField.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/EmailField.tsx"],"names":[],"mappings":"AAIA,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,4CA2BA,CAAC"}

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

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

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

@@ -0,0 +1,28 @@
+import { ChangeEventHandler, FocusEventHandler, ReactNode } from 'react';
+import { ThemeData } from '../../types/form';
+export type FieldInputProps = {
+    controlId: string;
+    theme?: ThemeData;
+    icon?: ReactNode;
+    className?: string;
+    placeholder?: string;
+    type?: string;
+    readOnly?: boolean;
+    dataAutofocus?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    /** Числовые границы (для type="number") */
+    min?: number;
+    max?: number;
+    value?: string;
+    error?: ReactNode;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+};
+/**
+ * Кастомный однострочный инпут формы (без Mantine).
+ * Адаптируется к основному цвету, размеру и скруглению через `useFieldTokens`.
+ */
+export declare const FieldInput: ({ controlId, icon, className, placeholder, type, readOnly, dataAutofocus, minLength, maxLength, min, max, value, error, onChange, onFocus, onBlur, }: FieldInputProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FieldInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/FieldInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzE,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAI7C,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAChD,OAAO,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAC9C,MAAM,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;CAC9C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,sJAiBxB,eAAe,4CAoCjB,CAAC"}

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

@@ -0,0 +1,63 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { combineClasses as n, STATIC_CLASSES as C } from "../../helpers/staticClasses.js";
+import a from "./fieldStyles.module.css.js";
+const T = ({
+  controlId: o,
+  icon: s,
+  className: r,
+  placeholder: i,
+  type: c = "text",
+  readOnly: d,
+  dataAutofocus: m,
+  minLength: u,
+  maxLength: p,
+  min: N,
+  max: f,
+  value: I,
+  error: l,
+  onChange: h,
+  onFocus: x,
+  onBlur: A
+}) => /* @__PURE__ */ t("div", { className: a.field, "data-control-id": o, children: [
+  /* @__PURE__ */ t(
+    "label",
+    {
+      className: n(a.inputWrap, r),
+      "data-error": !!l,
+      children: [
+        s ? /* @__PURE__ */ e("span", { className: a.inputIcon, children: s }) : null,
+        /* @__PURE__ */ e(
+          "input",
+          {
+            className: a.inputControl,
+            type: c,
+            placeholder: i,
+            readOnly: d,
+            minLength: u,
+            maxLength: p,
+            min: N,
+            max: f,
+            value: I ?? "",
+            onChange: h,
+            onFocus: x,
+            onBlur: A,
+            ...m ? { "data-autofocus": !0 } : {}
+          }
+        )
+      ]
+    }
+  ),
+  l ? /* @__PURE__ */ e(
+    "div",
+    {
+      className: n(
+        a.error,
+        C.VALIDATION_ERROR
+      ),
+      children: l
+    }
+  ) : null
+] });
+export {
+  T as FieldInput
+};

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

@@ -0,0 +1,12 @@
+import { HeadingControl, StepData, ThemeData } from '../../types/form';
+/**
+ * Заголовок-контрол. В отличие от старого заголовка слайда — это обычный
+ * элемент: можно перемещать, удалять, дублировать. Текст хранится на самом
+ * контроле (`control.title`), стиль (размер/выравнивание/цвет) — индивидуальный.
+ */
+export declare const HeadingField: ({ control, step, theme, }: {
+    control: HeadingControl;
+    step: StepData;
+    theme?: ThemeData;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=HeadingField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeadingField.d.ts","sourceRoot":"","sources":["../../../../../src/components/FormViewer/components/fields/HeadingField.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAQvE;;;;GAIG;AACH,eAAO,MAAM,YAAY,GAAI,2BAI1B;IACD,OAAO,EAAE,cAAc,CAAC;IACxB,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,4CAkEA,CAAC"}