formhell 1.0.1 → 1.0.3

package/README.md

@@ -1,4 +1,4 @@
-# formhell
+# formhell <img src="favicon.svg" alt="FormHell icon" width="32" height="32" />
 
 Finally escape form hell with FormHell
 
@@ -40,6 +40,7 @@ Here's a quick comparison for using FormHell instead of some other headache libr
 | Widget overrides by pointer and type | Yes | Usually type-only or custom plumbing |
 | Defaults strategy control | Yes (`all` / `required-only`) | Often limited and super broken |
 | Validation feedback on every change | Yes | Usually yes |
+| Optional MUI or custom theming | Yes | Usually yes |
 
 If your form requirements include deep JSON Schema support and your timeline includes "this quarter," this matrix is the point.
 
@@ -64,6 +65,63 @@ import { SchemaForm, SchemaBuilder, SchemaBuilderHelper } from "formhell";
 import "formhell/styles.css";
 ```
 
+## Theming
+
+FormHell does not depend on Material UI or any other styling framework. Importing `formhell/styles.css` gives the components a complete default theme, so the library works without a provider or theme package.
+
+The components are also designed to participate in a host application's theme. Their styles use CSS custom properties with fallbacks, which means an application can override the FormHell variables at any scope that contains a `SchemaForm`, `SchemaBuilder`, or `SchemaBuilderHelper`:
+
+```css
+.checkout-form {
+  --raf-color-border: #6b7280;
+  --raf-color-border-focus: #0f766e;
+  --raf-color-label: #102a43;
+  --raf-color-muted: #52657a;
+  --raf-color-surface: #ffffff;
+  --raf-color-surface-alt: #f3f6fb;
+  --raf-color-danger: #b42318;
+}
+```
+
+### Optional Material UI integration
+
+When a Material UI theme is present, FormHell automatically consumes MUI's generated CSS variables. Create the theme with `cssVariables: true` and place the FormHell components inside the `ThemeProvider`:
+
+```tsx
+import { CssBaseline, ThemeProvider, createTheme } from "@mui/material";
+import { SchemaForm } from "formhell";
+import "formhell/styles.css";
+
+const theme = createTheme({
+  cssVariables: true,
+  palette: {
+    primary: { main: "#1976d2" },
+    secondary: { main: "#526d82" },
+    error: { main: "#b42318" },
+    background: { default: "#f3f6fb", paper: "#ffffff" },
+    text: { primary: "#172b4d", secondary: "#52657a" }
+  }
+});
+
+<ThemeProvider theme={theme}>
+  <CssBaseline />
+  <SchemaForm schema={schema} />
+</ThemeProvider>;
+```
+
+FormHell maps the available MUI variables to its component roles:
+
+- `background.paper` controls form inputs, builder controls, modals, and helper surfaces.
+- `background.default` controls nested objects, builder sections, typeahead menus, and previews.
+- `text.primary` controls labels, headings, input text, and body content.
+- `text.secondary` controls optional labels, summaries, muted copy, and empty states.
+- `divider` controls borders.
+- `primary.main` controls primary actions, focus rings, selected type buttons, and links.
+- `secondary.main` controls secondary actions such as Add Type, info buttons, and tooltip Close buttons.
+- `error.main` controls danger actions, validation errors, and error states.
+
+MUI is intentionally not listed as a FormHell dependency. Applications that use another theme system can provide the same CSS custom properties, and applications without a theme continue using FormHell's built-in fallbacks.
+
 ## Exported Components At A Glance
 
 - `SchemaForm`: Render data-entry forms from JSON Schema.

package/dist/index.js

@@ -35,7 +35,7 @@ __export(index_exports, {
   SchemaForm: () => SchemaForm
 });
 module.exports = __toCommonJS(index_exports);
-var import_styles = require("./styles-UY6N5SPU.css");
+var import_styles = require("./styles-MTB5P5LP.css");
 
 // src/components/SchemaForm.tsx
 var import_react3 = require("react");
@@ -2262,7 +2262,7 @@ function ObjectSchemaEditor({
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "raf-button-row", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "button",
       {
-        className: "raf-button raf-button-primary",
+        className: "raf-button raf-button-primary raf-builder-add-property",
         type: "button",
         onClick: () => {
           const next = cloneSchema(schema);
@@ -2597,7 +2597,7 @@ function ArraySchemaEditor({ schema, onChange }) {
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "raf-button-row", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "button",
         {
-          className: "raf-button raf-button-primary",
+          className: "raf-button raf-button-secondary",
           type: "button",
           onClick: () => {
             const next = cloneSchema(schema);
@@ -2859,7 +2859,7 @@ function CombinationEditor({
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "raf-button-row", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       "button",
       {
-        className: "raf-button raf-button-primary",
+        className: "raf-button raf-button-secondary",
         type: "button",
         onClick: () => {
           const next = cloneSchema(schema);
@@ -2887,7 +2887,7 @@ function ConditionalSchemaEditor({
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "raf-button-row", children: !entry ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       "button",
       {
-        className: "raf-button raf-button-primary",
+        className: "raf-button raf-button-secondary",
         type: "button",
         onClick: () => {
           const next = cloneSchema(schema);
@@ -2945,7 +2945,7 @@ function SingleSchemaEditor({
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "raf-button-row", children: !entry ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       "button",
       {
-        className: "raf-button raf-button-primary",
+        className: "raf-button raf-button-secondary",
         type: "button",
         onClick: () => {
           const next = cloneSchema(schema);
@@ -3143,7 +3143,7 @@ function FieldLabel({
       /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
         "button",
         {
-          className: "raf-info-button",
+          className: "raf-info-button raf-button-secondary",
           type: "button",
           "aria-label": `Info about ${label}`,
           onClick: (event) => {