@micromerce/formbuilder-react 1.0.982 → 1.0.983

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import "./styles/theme.module.scss";
 import FormBuilder from "./components/FormBuilder/";
 import Select from "./components/controls/Select/";
 import MultiSelect from "./components/controls/MultiSelect/";
@@ -15,5 +16,8 @@ import TrafficLightCardSelect from "./components/controls/TrafficLightCardSelect
 import { useValueGenerator } from "./hooks/useValueGenerator/useValueGenerator";
 import { queryControl } from "./components/QueryControl/data/defaultControls";
 import { FormBuilderConfig } from "./types";
-export { FormBuilder, FormBuilderConfig, queryControl, Select, MultiSelect, Checkbox, ControlWrapper, FormFooter, Input, InputFreeSolo, FormList, FormGroup, MrnInput, PasswordInput, Textarea, TrafficLightCardSelect, useValueGenerator, };
+import { FormBuilderThemeProvider, FORM_BUILDER_TOKENS, toCssVars } from "./theme";
+import type { FormBuilderTheme, FormBuilderThemeKey, FormBuilderThemePreset } from "./theme";
+export type { FormBuilderTheme, FormBuilderThemeKey, FormBuilderThemePreset };
+export { FormBuilderThemeProvider, FORM_BUILDER_TOKENS, toCssVars, FormBuilder, FormBuilderConfig, queryControl, Select, MultiSelect, Checkbox, ControlWrapper, FormFooter, Input, InputFreeSolo, FormList, FormGroup, MrnInput, PasswordInput, Textarea, TrafficLightCardSelect, useValueGenerator, };
 export default FormBuilder;

package/dist/theme/FormBuilderThemeProvider.d.ts

@@ -0,0 +1,17 @@
+import React, { HTMLAttributes, ReactNode } from "react";
+import { FormBuilderTheme, FormBuilderThemePreset } from "./tokens";
+export interface FormBuilderThemeProviderProps extends HTMLAttributes<HTMLDivElement> {
+    /** A ready-made token set: "design" is the webclient design system (DESIGN.md). */
+    preset?: FormBuilderThemePreset;
+    /** Single token values; they win over the preset. */
+    theme?: FormBuilderTheme;
+    children?: ReactNode;
+}
+/**
+ * Themes every formbuilder component inside it. The tokens are CSS custom properties, so they
+ * cascade without a React context: providers can be nested and the inner one wins, and content
+ * MUI renders into a portal (tooltips, menus) inherits them only when the provider is an
+ * ancestor of the portal target (theme <body> for those, e.g. with toCssVars).
+ */
+declare const FormBuilderThemeProvider: ({ preset, theme, className, style, children, ...rest }: FormBuilderThemeProviderProps) => React.JSX.Element;
+export default FormBuilderThemeProvider;

package/dist/theme/index.d.ts

@@ -0,0 +1,4 @@
+export { default as FormBuilderThemeProvider } from "./FormBuilderThemeProvider";
+export type { FormBuilderThemeProviderProps } from "./FormBuilderThemeProvider";
+export { FORM_BUILDER_TOKENS, PRESET_CLASS_NAMES, toCssVars } from "./tokens";
+export type { FormBuilderTheme, FormBuilderThemeKey, FormBuilderThemePreset } from "./tokens";

package/dist/theme/tokens.d.ts

@@ -0,0 +1,72 @@
+/**
+ * The styling API of the formbuilder as a typed object.
+ *
+ * Every key maps to one CSS custom property (`--fb-*`, see styles/theme.module.scss). The
+ * components read those properties with their former value as fallback, so a key that is not
+ * set changes nothing. Values are any CSS value; numbers for lengths are taken as px.
+ */
+export declare const FORM_BUILDER_TOKENS: {
+    readonly accent: "--fb-color-accent";
+    readonly accentHover: "--fb-color-accent-hover";
+    readonly accentDark: "--fb-color-accent-dark";
+    readonly accentLight: "--fb-color-accent-light";
+    readonly primary: "--fb-color-primary";
+    readonly primaryDark: "--fb-color-primary-dark";
+    readonly primaryLight: "--fb-color-primary-light";
+    readonly primaryHover: "--fb-color-primary-hover";
+    readonly textPrimary: "--fb-color-text-primary";
+    readonly textSecondary: "--fb-color-text-secondary";
+    readonly label: "--fb-color-label";
+    readonly value: "--fb-color-value";
+    readonly fieldText: "--fb-color-field-text";
+    readonly fieldFontWeight: "--fb-field-font-weight";
+    readonly placeholder: "--fb-color-text-placeholder";
+    readonly helper: "--fb-color-helper";
+    readonly icon: "--fb-color-icon";
+    readonly iconMuted: "--fb-color-icon-muted";
+    readonly tooltipBackground: "--fb-color-tooltip-bg";
+    readonly border: "--fb-color-border";
+    readonly borderHover: "--fb-color-border-hover";
+    readonly borderFocus: "--fb-color-border-focus";
+    readonly borderLight: "--fb-color-border-light";
+    readonly checkboxOff: "--fb-color-checkbox-off";
+    readonly background: "--fb-color-bg";
+    readonly backgroundHover: "--fb-color-bg-hover";
+    readonly backgroundReadonly: "--fb-color-bg-readonly";
+    readonly backgroundMuted: "--fb-color-bg-muted";
+    readonly backgroundSubtle: "--fb-color-bg-subtle";
+    readonly error: "--fb-color-error";
+    readonly errorText: "--fb-color-error-text";
+    readonly errorBackground: "--fb-color-error-bg";
+    readonly alertText: "--fb-color-alert-text";
+    readonly alertBackground: "--fb-color-alert-bg";
+    readonly danger: "--fb-color-danger";
+    readonly success: "--fb-color-success";
+    readonly successBackground: "--fb-color-success-bg";
+    readonly fontFamily: "--fb-font-family";
+    readonly fontSize: "--fb-font-size";
+    readonly errorFontSize: "--fb-error-font-size";
+    readonly errorIcon: "--fb-error-icon";
+    readonly helperFontSize: "--fb-helper-font-size";
+    readonly radius: "--fb-radius";
+    readonly inputHeight: "--fb-input-height";
+    readonly inputPadding: "--fb-input-padding";
+    readonly labelWidth: "--fb-label-width";
+    readonly labelGap: "--fb-label-gap";
+    readonly buttonHeight: "--fb-button-height";
+    readonly buttonPadding: "--fb-button-padding";
+    readonly buttonRadius: "--fb-button-radius";
+    readonly buttonTextTransform: "--fb-button-text-transform";
+    readonly focusRing: "--fb-focus-ring";
+};
+export type FormBuilderThemeKey = keyof typeof FORM_BUILDER_TOKENS;
+/** A partial set of token values; every key is optional. */
+export type FormBuilderTheme = Partial<Record<FormBuilderThemeKey, string | number>>;
+/** Ready-made sets of token values, applied as a class (see styles/theme.module.scss). */
+export type FormBuilderThemePreset = "design";
+export declare const PRESET_CLASS_NAMES: Record<FormBuilderThemePreset, string>;
+/**
+ * The CSS custom properties for a theme, ready for a `style` prop, e.g. when the host applies
+ * the theme to an element of its own instead of using FormBuilderThemeProvider.
+ */
+export declare const toCssVars: (theme?: FormBuilderTheme) => Record<string, string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micromerce/formbuilder-react",
-  "version": "1.0.982",
+  "version": "1.0.983",
   "description": "creates a form based on configuration",
   "main": "dist/formbuilder.js",
   "types": "dist/index.d.ts",