@layers-app/shared 0.4.9 → 0.4.10

package/dist/components/FormViewer/hooks/useFormGlobalTheme.js

@@ -1,133 +1,21 @@
-import { useMemo as r } from "react";
-import { generateColors as a } from "@mantine/colors-generator";
-import { createTheme as u, DEFAULT_THEME as d, Flex as l, ActionIcon as m, ThemeIcon as f, Card as c, InputError as p, Progress as x, Select as z, NumberInput as b, Textarea as P, TextInput as h, Button as R, Text as T, Title as g } from "@mantine/core";
-import { DateInput as y } from "@mantine/dates";
-import { scopeCustomCss as F } from "../helpers/cssScoping.js";
-import { useFormViewerStore as I } from "../store/formStore.js";
+import { useMemo as e } from "react";
+import { scopeCustomCss as c } from "../helpers/cssScoping.js";
+import { formTokensToCss as u, buildFormTokens as p } from "../helpers/formTokens.js";
+import { useFormViewerStore as f } from "../store/formStore.js";
 import { themeReselect as S } from "../store/selectors.js";
-const B = ({ innerId: t }) => {
-  const { useStore: s } = I(), e = s(S), i = r(() => {
-    const n = a(e?.primaryColor || ""), o = "custom";
-    return u({
-      ...d,
-      fontFamily: `"${e.font?.fontFamily || "Roboto"}", sans-serif`,
-      // fontWeight: theme.font?.fontWeight,
-      headings: {
-        fontWeight: String(e.font?.fontWeight) || "700",
-        fontFamily: `"${e.font?.fontFamily || "Roboto"}", sans-serif`
-      },
-      primaryColor: "custom",
-      autoContrast: !0,
-      colors: {
-        custom: n
-      },
-      defaultRadius: e.borderRadius,
-      components: {
-        Title: g.extend({
-          defaultProps: {
-            style: {
-              fontFamily: e.title?.fontFamily,
-              fontWeight: e.title?.fontWeight
-            }
-          }
-        }),
-        Text: T.extend({
-          defaultProps: {
-            style: {
-              fontFamily: e.font?.fontFamily,
-              fontWeight: e.font?.fontWeight
-            }
-          }
-        }),
-        Button: R.extend({
-          defaultProps: {
-            color: o,
-            size: e.size,
-            fw: e.font?.fontWeight,
-            radius: e.borderRadius
-          }
-        }),
-        TextInput: h.extend({
-          defaultProps: {
-            radius: e.borderRadius,
-            color: o,
-            size: e.size
-          }
-        }),
-        DateInput: y.extend({
-          defaultProps: {
-            radius: e.borderRadius,
-            color: o,
-            size: e.size
-          }
-        }),
-        Textarea: P.extend({
-          defaultProps: {
-            radius: e.borderRadius,
-            color: o,
-            size: e.size
-          }
-        }),
-        NumberInput: b.extend({
-          defaultProps: {
-            radius: e.borderRadius,
-            color: o,
-            size: e.size
-          }
-        }),
-        Select: z.extend({
-          defaultProps: {
-            radius: e.borderRadius,
-            color: o,
-            size: e.size
-          }
-        }),
-        Progress: x.extend({
-          defaultProps: {
-            radius: e.borderRadius,
-            color: o,
-            size: e.size
-          }
-        }),
-        InputError: p.extend({
-          defaultProps: {
-            color: o,
-            size: e.size
-          }
-        }),
-        Card: c.extend({
-          defaultProps: {
-            radius: e.borderRadius
-          }
-        }),
-        ThemeIcon: f.extend({
-          defaultProps: {
-            radius: e.borderRadius,
-            color: o,
-            size: e.size
-          }
-        }),
-        ActionIcon: m.extend({
-          defaultProps: {
-            radius: e.borderRadius,
-            color: o,
-            size: e.size
-          }
-        }),
-        Flex: l.extend({
-          defaultProps: {
-            align: "center",
-            gap: 8
-          }
-        })
-      }
-    });
-  }, [e]);
+const F = ({ innerId: o }) => {
+  const { useStore: m } = f(), s = m(S), r = e(
+    () => u(p(s), `#forms-provider-${o}`),
+    [s, o]
+  ), t = e(
+    () => c(s.customCSS || "", `#forms-provider-${o}`),
+    [s.customCSS, o]
+  );
   return {
-    customStyles: r(() => F(e.customCSS || "", `#forms-provider-${t}`), [e.customCSS, t]),
-    mantineTheme: i
+    themeVarsCss: r,
+    customStyles: t
   };
 };
 export {
-  B as useFormGlobalTheme
+  F as useFormGlobalTheme
 };

package/dist/components/FormViewer/index.d.ts

@@ -1,4 +1,5 @@
 export * from './FormViewer';
+export * from './components/FormThemeScope';
 export * from './types/form';
 export * from './types/schemes';
 export * from './store/formStore';

package/dist/components/FormViewer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormViewer/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormViewer/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}