jsonforms-nuxt-ui-renderers 0.1.7 → 0.2.1

package/dist/index.js

@@ -34,199 +34,204 @@ function trimmedOrUndefined(input) {
   const v = input?.trim();
   return v ? v : void 0;
 }
+function controlDescription(control) {
+  const d = control.description?.trim();
+  if (d) return d;
+  const sd = control.schema?.description;
+  return typeof sd === "string" && sd.trim() ? sd.trim() : void 0;
+}
 
 // src/renderers/complex/NuxtUiArrayListRenderer.ts
-var NuxtUiArrayListRenderer = defineComponent({
-  name: "NuxtUiArrayListRenderer",
-  components: { DispatchRenderer },
-  props: rendererProps(),
-  setup(props) {
-    const { control, addItem, removeItems, moveUp, moveDown } = useJsonFormsArrayControl(
-      props
-    );
-    const errorMessage = computed2(() => trimmedOrUndefined(control.value.errors));
-    const items = computed2(
-      () => Array.isArray(control.value.data) ? control.value.data : []
-    );
-    const arraySchema = computed2(() => {
-      try {
-        return Resolve.schema(
-          props.schema,
+function createNuxtUiArrayListRenderer(theme) {
+  return defineComponent({
+    name: "NuxtUiArrayListRenderer",
+    components: { DispatchRenderer },
+    props: rendererProps(),
+    setup(props) {
+      const { control, addItem, removeItems, moveUp, moveDown } = useJsonFormsArrayControl(
+        props
+      );
+      const errorMessage = computed2(() => trimmedOrUndefined(control.value.errors));
+      const items = computed2(
+        () => Array.isArray(control.value.data) ? control.value.data : []
+      );
+      const arraySchema = computed2(() => {
+        try {
+          return Resolve.schema(
+            props.schema,
+            control.value.uischema.scope,
+            control.value.rootSchema
+          );
+        } catch {
+          return void 0;
+        }
+      });
+      const maxItemsReached = computed2(() => {
+        const max = arraySchema.value?.maxItems;
+        return typeof max === "number" ? items.value.length >= max : false;
+      });
+      const minItemsReached = computed2(() => {
+        const min = arraySchema.value?.minItems;
+        return typeof min === "number" ? items.value.length <= min : false;
+      });
+      const childUiSchema = computed2(
+        () => findUISchema(
+          control.value.uischemas,
+          control.value.schema,
           control.value.uischema.scope,
+          control.value.path,
+          void 0,
+          control.value.uischema,
           control.value.rootSchema
+        )
+      );
+      function childLabelForIndex(index) {
+        const childLabelProp = getChildLabelPropFromUiSchemaOptions(control.value.uischema.options) ?? getFirstPrimitiveProp(control.value.schema);
+        if (!childLabelProp) return `${index}`;
+        const labelValue = Resolve.data(
+          control.value.data,
+          composePaths(`${index}`, childLabelProp)
         );
-      } catch {
-        return void 0;
+        if (labelValue === void 0 || labelValue === null || Number.isNaN(labelValue)) {
+          return "";
+        }
+        return String(labelValue);
       }
-    });
-    const maxItemsReached = computed2(() => {
-      const max = arraySchema.value?.maxItems;
-      return typeof max === "number" ? items.value.length >= max : false;
-    });
-    const minItemsReached = computed2(() => {
-      const min = arraySchema.value?.minItems;
-      return typeof min === "number" ? items.value.length <= min : false;
-    });
-    const childUiSchema = computed2(
-      () => findUISchema(
-        control.value.uischemas,
-        control.value.schema,
-        control.value.uischema.scope,
-        control.value.path,
-        void 0,
-        control.value.uischema,
-        control.value.rootSchema
-      )
-    );
-    function childLabelForIndex(index) {
-      const childLabelProp = getChildLabelPropFromUiSchemaOptions(control.value.uischema.options) ?? getFirstPrimitiveProp(control.value.schema);
-      if (!childLabelProp) return `${index}`;
-      const labelValue = Resolve.data(
-        control.value.data,
-        composePaths(`${index}`, childLabelProp)
-      );
-      if (labelValue === void 0 || labelValue === null || Number.isNaN(labelValue)) {
-        return "";
+      function getChildLabelPropFromUiSchemaOptions(options) {
+        if (!options || typeof options !== "object") return void 0;
+        const value = options.childLabelProp;
+        return typeof value === "string" ? value : void 0;
       }
-      return String(labelValue);
-    }
-    function getChildLabelPropFromUiSchemaOptions(options) {
-      if (!options || typeof options !== "object") return void 0;
-      const value = options.childLabelProp;
-      return typeof value === "string" ? value : void 0;
-    }
-    function addButtonClick() {
-      addItem(
-        control.value.path,
-        createDefaultValue(control.value.schema, control.value.rootSchema)
-      )();
-    }
-    return () => {
-      if (!control.value.visible) return null;
-      const UFormField = resolveComponent("UFormField");
-      const UButton = resolveComponent("UButton");
-      return h(
-        "div",
-        {},
-        h(
-          UFormField,
-          {
-            label: control.value.label,
-            description: control.value.description,
-            required: control.value.required,
-            error: errorMessage.value
-          },
-          {
-            default: () => h("div", { class: "flex flex-col gap-3" }, [
-              h("div", { class: "flex items-center justify-between gap-3" }, [
-                h(
-                  "div",
-                  { class: "text-xs text-gray-500" },
-                  `${items.value.length} items`
-                ),
-                h(
-                  UButton,
-                  {
-                    type: "button",
-                    size: "xs",
-                    variant: "soft",
-                    color: "neutral",
-                    disabled: !control.value.enabled || maxItemsReached.value,
-                    onClick: addButtonClick
-                  },
-                  { default: () => "Add" }
-                )
-              ]),
-              items.value.length === 0 ? h(
-                "div",
-                { class: "text-sm text-gray-500" },
-                "No items."
-              ) : null,
-              ...items.value.map(
-                (_item, index) => h(
-                  "div",
-                  { key: `${control.value.path}-${index}`, class: "rounded border p-3" },
-                  [
-                    h(
-                      "div",
-                      { class: "mb-3 flex items-start justify-between gap-3" },
-                      [
-                        h("div", { class: "min-w-0" }, [
-                          h(
-                            "div",
-                            {
-                              class: "text-xs font-semibold text-gray-700 dark:text-gray-200"
-                            },
-                            [
-                              `Item ${index + 1}`,
-                              childLabelForIndex(index) ? h(
-                                "span",
-                                {
-                                  class: "font-normal text-gray-500"
-                                },
-                                ` \u2014 ${childLabelForIndex(index)}`
-                              ) : null
-                            ]
-                          )
-                        ]),
-                        h("div", { class: "flex flex-none items-center gap-1" }, [
-                          h(
-                            UButton,
-                            {
-                              type: "button",
-                              size: "xs",
-                              variant: "ghost",
-                              color: "neutral",
-                              disabled: !control.value.enabled || index === 0,
-                              onClick: () => moveUp?.(control.value.path, index)()
-                            },
-                            { default: () => "Up" }
-                          ),
-                          h(
-                            UButton,
-                            {
-                              type: "button",
-                              size: "xs",
-                              variant: "ghost",
-                              color: "neutral",
-                              disabled: !control.value.enabled || index >= items.value.length - 1,
-                              onClick: () => moveDown?.(control.value.path, index)()
-                            },
-                            { default: () => "Down" }
-                          ),
-                          h(
-                            UButton,
-                            {
-                              type: "button",
-                              size: "xs",
-                              variant: "ghost",
-                              color: "error",
-                              disabled: !control.value.enabled || minItemsReached.value,
-                              onClick: () => removeItems?.(control.value.path, [index])()
-                            },
-                            { default: () => "Remove" }
-                          )
-                        ])
-                      ]
-                    ),
-                    h(DispatchRenderer, {
-                      schema: control.value.schema,
-                      uischema: childUiSchema.value,
-                      path: composePaths(control.value.path, `${index}`),
-                      enabled: control.value.enabled,
-                      renderers: control.value.renderers,
-                      cells: control.value.cells
-                    })
-                  ]
+      function addButtonClick() {
+        addItem(
+          control.value.path,
+          createDefaultValue(control.value.schema, control.value.rootSchema)
+        )();
+      }
+      return () => {
+        if (!control.value.visible) return null;
+        const UFormField = resolveComponent("UFormField");
+        const UButton = resolveComponent("UButton");
+        return h(
+          "div",
+          {},
+          h(
+            UFormField,
+            {
+              label: control.value.label,
+              description: control.value.description,
+              required: control.value.required,
+              error: errorMessage.value
+            },
+            {
+              default: () => h("div", { class: theme.layoutVertical }, [
+                h("div", { class: theme.flexBetween }, [
+                  h(
+                    "div",
+                    { class: theme.textMutedXs },
+                    `${items.value.length} items`
+                  ),
+                  h(
+                    UButton,
+                    {
+                      type: "button",
+                      size: "xs",
+                      variant: "soft",
+                      color: "neutral",
+                      disabled: !control.value.enabled || maxItemsReached.value,
+                      onClick: addButtonClick
+                    },
+                    { default: () => "Add" }
+                  )
+                ]),
+                items.value.length === 0 ? h("div", { class: theme.textMuted }, "No items.") : null,
+                ...items.value.map(
+                  (_item, index) => h(
+                    "div",
+                    {
+                      key: `${control.value.path}-${index}`,
+                      class: theme.panel
+                    },
+                    [
+                      h(
+                        "div",
+                        { class: theme.arrayItemToolbar },
+                        [
+                          h("div", { class: "jf-min-w-0" }, [
+                            h(
+                              "div",
+                              { class: theme.textItemTitle },
+                              [
+                                `Item ${index + 1}`,
+                                childLabelForIndex(index) ? h(
+                                  "span",
+                                  { class: theme.textItemSuffix },
+                                  ` \u2014 ${childLabelForIndex(index)}`
+                                ) : null
+                              ]
+                            )
+                          ]),
+                          h("div", { class: theme.flexActions }, [
+                            h(
+                              UButton,
+                              {
+                                type: "button",
+                                size: "xs",
+                                variant: "ghost",
+                                color: "neutral",
+                                disabled: !control.value.enabled || index === 0,
+                                onClick: () => moveUp?.(control.value.path, index)()
+                              },
+                              { default: () => "Up" }
+                            ),
+                            h(
+                              UButton,
+                              {
+                                type: "button",
+                                size: "xs",
+                                variant: "ghost",
+                                color: "neutral",
+                                disabled: !control.value.enabled || index >= items.value.length - 1,
+                                onClick: () => moveDown?.(control.value.path, index)()
+                              },
+                              { default: () => "Down" }
+                            ),
+                            h(
+                              UButton,
+                              {
+                                type: "button",
+                                size: "xs",
+                                variant: "ghost",
+                                color: "error",
+                                disabled: !control.value.enabled || minItemsReached.value,
+                                onClick: () => removeItems?.(control.value.path, [
+                                  index
+                                ])()
+                              },
+                              { default: () => "Remove" }
+                            )
+                          ])
+                        ]
+                      ),
+                      h(DispatchRenderer, {
+                        schema: control.value.schema,
+                        uischema: childUiSchema.value,
+                        path: composePaths(control.value.path, `${index}`),
+                        enabled: control.value.enabled,
+                        renderers: control.value.renderers,
+                        cells: control.value.cells
+                      })
+                    ]
+                  )
                 )
-              )
-            ])
-          }
-        )
-      );
-    };
-  }
-});
+              ])
+            }
+          )
+        );
+      };
+    }
+  });
+}
 
 // src/renderers/complex/NuxtUiObjectRenderer.ts
 import { Generate, findUISchema as findUISchema2 } from "@jsonforms/core";
@@ -288,52 +293,54 @@ var NuxtUiObjectRenderer = defineComponent2({
 // src/renderers/controls/NuxtUiBooleanControl.ts
 import { rendererProps as rendererProps3, useJsonFormsControl } from "@jsonforms/vue";
 import { computed as computed4, defineComponent as defineComponent3, h as h3, resolveComponent as resolveComponent2 } from "vue";
-var NuxtUiBooleanControl = defineComponent3({
-  name: "NuxtUiBooleanControl",
-  props: rendererProps3(),
-  setup(props) {
-    const { control, handleChange } = useJsonFormsControl(
-      props
-    );
-    const errorMessage = computed4(() => trimmedOrUndefined(control.value.errors));
-    const modelValue = computed4({
-      get: () => Boolean(control.value.data),
-      set: (v) => handleChange(control.value.path, v)
-    });
-    return () => {
-      if (!control.value.visible) return null;
-      const UFormField = resolveComponent2("UFormField");
-      const USwitch = resolveComponent2("USwitch");
-      return h3(
-        "div",
-        {},
-        h3(
-          UFormField,
-          {
-            label: control.value.label,
-            description: control.value.description,
-            required: control.value.required,
-            error: errorMessage.value
-          },
-          {
-            default: () => h3(
-              "div",
-              { class: "flex items-center justify-between gap-3" },
-              h3(USwitch, {
-                modelValue: modelValue.value,
-                disabled: !control.value.enabled,
-                "aria-invalid": Boolean(errorMessage.value),
-                "onUpdate:modelValue": (v) => {
-                  modelValue.value = v;
-                }
-              })
-            )
-          }
-        )
+function createNuxtUiBooleanControl(theme) {
+  return defineComponent3({
+    name: "NuxtUiBooleanControl",
+    props: rendererProps3(),
+    setup(props) {
+      const { control, handleChange } = useJsonFormsControl(
+        props
       );
-    };
-  }
-});
+      const errorMessage = computed4(() => trimmedOrUndefined(control.value.errors));
+      const modelValue = computed4({
+        get: () => Boolean(control.value.data),
+        set: (v) => handleChange(control.value.path, v)
+      });
+      return () => {
+        if (!control.value.visible) return null;
+        const UFormField = resolveComponent2("UFormField");
+        const USwitch = resolveComponent2("USwitch");
+        return h3(
+          "div",
+          {},
+          h3(
+            UFormField,
+            {
+              label: control.value.label,
+              description: controlDescription(control.value),
+              required: control.value.required,
+              error: errorMessage.value
+            },
+            {
+              default: () => h3(
+                "div",
+                { class: theme.flexBetween },
+                h3(USwitch, {
+                  modelValue: modelValue.value,
+                  disabled: !control.value.enabled,
+                  "aria-invalid": Boolean(errorMessage.value),
+                  "onUpdate:modelValue": (v) => {
+                    modelValue.value = v;
+                  }
+                })
+              )
+            }
+          )
+        );
+      };
+    }
+  });
+}
 
 // src/renderers/controls/NuxtUiEnumControl.ts
 import { rendererProps as rendererProps4, useJsonFormsControl as useJsonFormsControl2 } from "@jsonforms/vue";
@@ -381,7 +388,7 @@ var NuxtUiEnumControl = defineComponent4({
           UFormField,
           {
             label: control.value.label,
-            description: control.value.description,
+            description: controlDescription(control.value),
             required: control.value.required,
             error: errorMessage.value
           },
@@ -441,7 +448,7 @@ var NuxtUiIntegerControl = defineComponent5({
           UFormField,
           {
             label: control.value.label,
-            description: control.value.description,
+            description: controlDescription(control.value),
             required: control.value.required,
             error: errorMessage.value
           },
@@ -517,7 +524,7 @@ var NuxtUiMultiEnumControl = defineComponent6({
           UFormField,
           {
             label: control.value.label,
-            description: control.value.description,
+            description: controlDescription(control.value),
             required: control.value.required,
             error: errorMessage.value
           },
@@ -578,7 +585,7 @@ var NuxtUiNumberControl = defineComponent7({
           UFormField,
           {
             label: control.value.label,
-            description: control.value.description,
+            description: controlDescription(control.value),
             required: control.value.required,
             error: errorMessage.value
           },
@@ -624,7 +631,7 @@ var NuxtUiPasswordControl = defineComponent8({
           UFormField,
           {
             label: control.value.label,
-            description: control.value.description,
+            description: controlDescription(control.value),
             required: control.value.required,
             error: errorMessage.value
           },
@@ -691,7 +698,7 @@ var NuxtUiStringControl = defineComponent9({
           UFormField,
           {
             label: control.value.label,
-            description: control.value.description,
+            description: controlDescription(control.value),
             required: control.value.required,
             error: errorMessage.value
           },
@@ -733,7 +740,7 @@ var NuxtUiTextareaControl = defineComponent10({
           UFormField,
           {
             label: control.value.label,
-            description: control.value.description,
+            description: controlDescription(control.value),
             required: control.value.required,
             error: errorMessage.value
           },
@@ -757,116 +764,172 @@ var NuxtUiTextareaControl = defineComponent10({
 // src/renderers/layouts/NuxtUiCategorizationRenderer.ts
 import { DispatchRenderer as DispatchRenderer3, rendererProps as rendererProps11, useJsonFormsCategorization } from "@jsonforms/vue";
 import { defineComponent as defineComponent11, h as h11 } from "vue";
-var NuxtUiCategorizationRenderer = defineComponent11({
-  name: "NuxtUiCategorizationRenderer",
-  components: { DispatchRenderer: DispatchRenderer3 },
-  props: rendererProps11(),
-  setup(props) {
-    const { layout, categories } = useJsonFormsCategorization(
-      props
-    );
-    return () => {
-      if (!layout.value.visible) return null;
-      return h11(
-        "div",
-        { class: "flex flex-col gap-6" },
-        categories.map((categoryRef, catIndex) => {
-          const category = categoryRef.value;
-          const elements = category.uischema.elements ?? [];
-          return h11(
-            "div",
-            { key: `${layout.value.path}-cat-${catIndex}`, class: "flex flex-col gap-3" },
-            [
-              category.label ? h11("div", { class: "text-sm font-semibold" }, category.label) : null,
-              h11(
-                "div",
-                { class: "flex flex-col gap-3" },
-                elements.map(
-                  (element, index) => h11(
-                    "div",
-                    { key: `${category.path}-${index}` },
-                    h11(DispatchRenderer3, {
-                      schema: category.schema,
-                      uischema: element,
-                      path: category.path,
-                      enabled: category.enabled,
-                      renderers: category.renderers,
-                      cells: category.cells
-                    })
+function createNuxtUiCategorizationRenderer(theme) {
+  return defineComponent11({
+    name: "NuxtUiCategorizationRenderer",
+    components: { DispatchRenderer: DispatchRenderer3 },
+    props: rendererProps11(),
+    setup(props) {
+      const { layout, categories } = useJsonFormsCategorization(
+        props
+      );
+      return () => {
+        if (!layout.value.visible) return null;
+        return h11(
+          "div",
+          { class: theme.layoutVerticalWide },
+          categories.map((categoryRef, catIndex) => {
+            const category = categoryRef.value;
+            const elements = category.uischema.elements ?? [];
+            return h11(
+              "div",
+              {
+                key: `${layout.value.path}-cat-${catIndex}`,
+                class: theme.layoutVertical
+              },
+              [
+                category.label ? h11("div", { class: theme.labelSection }, category.label) : null,
+                h11(
+                  "div",
+                  { class: theme.layoutVertical },
+                  elements.map(
+                    (element, index) => h11(
+                      "div",
+                      { key: `${category.path}-${index}` },
+                      h11(DispatchRenderer3, {
+                        schema: category.schema,
+                        uischema: element,
+                        path: category.path,
+                        enabled: category.enabled,
+                        renderers: category.renderers,
+                        cells: category.cells
+                      })
+                    )
                   )
                 )
-              )
-            ]
-          );
-        })
-      );
-    };
-  }
-});
+              ]
+            );
+          })
+        );
+      };
+    }
+  });
+}
 
 // src/renderers/layouts/NuxtUiCategoryRenderer.ts
 import { DispatchRenderer as DispatchRenderer4, rendererProps as rendererProps12, useJsonFormsLayout } from "@jsonforms/vue";
 import { defineComponent as defineComponent12, h as h12 } from "vue";
-var NuxtUiCategoryRenderer = defineComponent12({
-  name: "NuxtUiCategoryRenderer",
-  components: { DispatchRenderer: DispatchRenderer4 },
-  props: rendererProps12(),
-  setup(props) {
-    const { layout } = useJsonFormsLayout(
-      props
-    );
-    return () => {
-      if (!layout.value.visible) return null;
-      const elements = layout.value.uischema.elements ?? [];
-      return h12("div", { class: "flex flex-col gap-3" }, [
-        layout.value.label ? h12("div", { class: "text-sm font-semibold" }, layout.value.label) : null,
-        h12(
-          "div",
-          { class: "flex flex-col gap-3" },
-          elements.map(
-            (element, index) => h12(
-              "div",
-              { key: `${layout.value.path}-${index}` },
-              h12(DispatchRenderer4, {
-                schema: layout.value.schema,
-                uischema: element,
-                path: layout.value.path,
-                enabled: layout.value.enabled,
-                renderers: layout.value.renderers,
-                cells: layout.value.cells
-              })
+function createNuxtUiCategoryRenderer(theme) {
+  return defineComponent12({
+    name: "NuxtUiCategoryRenderer",
+    components: { DispatchRenderer: DispatchRenderer4 },
+    props: rendererProps12(),
+    setup(props) {
+      const { layout } = useJsonFormsLayout(
+        props
+      );
+      return () => {
+        if (!layout.value.visible) return null;
+        const elements = layout.value.uischema.elements ?? [];
+        return h12("div", { class: theme.layoutVertical }, [
+          layout.value.label ? h12("div", { class: theme.labelSection }, layout.value.label) : null,
+          h12(
+            "div",
+            { class: theme.layoutVertical },
+            elements.map(
+              (element, index) => h12(
+                "div",
+                { key: `${layout.value.path}-${index}` },
+                h12(DispatchRenderer4, {
+                  schema: layout.value.schema,
+                  uischema: element,
+                  path: layout.value.path,
+                  enabled: layout.value.enabled,
+                  renderers: layout.value.renderers,
+                  cells: layout.value.cells
+                })
+              )
             )
           )
-        )
-      ]);
-    };
-  }
-});
+        ]);
+      };
+    }
+  });
+}
 
 // src/renderers/layouts/NuxtUiGroupRenderer.ts
 import { DispatchRenderer as DispatchRenderer5, rendererProps as rendererProps13, useJsonFormsLayout as useJsonFormsLayout2 } from "@jsonforms/vue";
 import { defineComponent as defineComponent13, h as h13 } from "vue";
-var NuxtUiGroupRenderer = defineComponent13({
-  name: "NuxtUiGroupRenderer",
-  components: { DispatchRenderer: DispatchRenderer5 },
-  props: rendererProps13(),
-  setup(props) {
-    const { layout } = useJsonFormsLayout2(
-      props
-    );
-    return () => {
-      if (!layout.value.visible) return null;
-      const elements = layout.value.uischema.elements ?? [];
-      return h13("div", { class: "rounded border p-3" }, [
-        layout.value.label ? h13("div", { class: "mb-3 text-sm font-semibold" }, layout.value.label) : null,
-        h13(
+function createNuxtUiGroupRenderer(theme) {
+  return defineComponent13({
+    name: "NuxtUiGroupRenderer",
+    components: { DispatchRenderer: DispatchRenderer5 },
+    props: rendererProps13(),
+    setup(props) {
+      const { layout } = useJsonFormsLayout2(
+        props
+      );
+      return () => {
+        if (!layout.value.visible) return null;
+        const elements = layout.value.uischema.elements ?? [];
+        const isNested = layout.value.path?.includes(".") ?? false;
+        const containerClass = isNested ? theme.groupNested : theme.panel;
+        return h13(
           "div",
-          { class: "flex flex-col gap-3" },
+          { class: containerClass },
+          [
+            layout.value.label ? h13("div", { class: theme.labelSectionSpaced }, layout.value.label) : null,
+            h13(
+              "div",
+              { class: theme.layoutVertical },
+              elements.map(
+                (element, index) => h13(
+                  "div",
+                  { key: `${layout.value.path}-${index}` },
+                  h13(DispatchRenderer5, {
+                    schema: layout.value.schema,
+                    uischema: element,
+                    path: layout.value.path,
+                    enabled: layout.value.enabled,
+                    renderers: layout.value.renderers,
+                    cells: layout.value.cells
+                  })
+                )
+              )
+            )
+          ]
+        );
+      };
+    }
+  });
+}
+
+// src/renderers/layouts/NuxtUiHorizontalLayoutRenderer.ts
+import { DispatchRenderer as DispatchRenderer6, rendererProps as rendererProps14, useJsonFormsLayout as useJsonFormsLayout3 } from "@jsonforms/vue";
+import { defineComponent as defineComponent14, h as h14 } from "vue";
+function createNuxtUiHorizontalLayoutRenderer(theme) {
+  return defineComponent14({
+    name: "NuxtUiHorizontalLayoutRenderer",
+    components: { DispatchRenderer: DispatchRenderer6 },
+    props: rendererProps14(),
+    setup(props) {
+      const { layout } = useJsonFormsLayout3(
+        props
+      );
+      return () => {
+        if (!layout.value.visible) return null;
+        const elements = layout.value.uischema.elements ?? [];
+        return h14(
+          "div",
+          { class: theme.layoutHorizontal },
           elements.map(
-            (element, index) => h13(
+            (element, index) => h14(
               "div",
-              { key: `${layout.value.path}-${index}` },
-              h13(DispatchRenderer5, {
+              {
+                key: `${layout.value.path}-${index}`,
+                class: theme.layoutHorizontalItem
+              },
+              h14(DispatchRenderer6, {
                 schema: layout.value.schema,
                 uischema: element,
                 path: layout.value.path,
@@ -876,104 +939,92 @@ var NuxtUiGroupRenderer = defineComponent13({
               })
             )
           )
-        )
-      ]);
-    };
-  }
-});
-
-// src/renderers/layouts/NuxtUiHorizontalLayoutRenderer.ts
-import { DispatchRenderer as DispatchRenderer6, rendererProps as rendererProps14, useJsonFormsLayout as useJsonFormsLayout3 } from "@jsonforms/vue";
-import { defineComponent as defineComponent14, h as h14 } from "vue";
-var NuxtUiHorizontalLayoutRenderer = defineComponent14({
-  name: "NuxtUiHorizontalLayoutRenderer",
-  components: { DispatchRenderer: DispatchRenderer6 },
-  props: rendererProps14(),
-  setup(props) {
-    const { layout } = useJsonFormsLayout3(
-      props
-    );
-    return () => {
-      if (!layout.value.visible) return null;
-      const elements = layout.value.uischema.elements ?? [];
-      return h14(
-        "div",
-        { class: "flex flex-col gap-3 md:flex-row md:flex-wrap" },
-        elements.map(
-          (element, index) => h14(
-            "div",
-            { key: `${layout.value.path}-${index}`, class: "min-w-0 flex-1" },
-            h14(DispatchRenderer6, {
-              schema: layout.value.schema,
-              uischema: element,
-              path: layout.value.path,
-              enabled: layout.value.enabled,
-              renderers: layout.value.renderers,
-              cells: layout.value.cells
-            })
-          )
-        )
-      );
-    };
-  }
-});
+        );
+      };
+    }
+  });
+}
 
 // src/renderers/layouts/NuxtUiLabelRenderer.ts
 import { rendererProps as rendererProps15, useJsonFormsLabel } from "@jsonforms/vue";
 import { defineComponent as defineComponent15, h as h15 } from "vue";
-var NuxtUiLabelRenderer = defineComponent15({
-  name: "NuxtUiLabelRenderer",
-  props: rendererProps15(),
-  setup(props) {
-    const { label } = useJsonFormsLabel(
-      props
-    );
-    return () => {
-      if (!label.value.visible) return null;
-      return h15(
-        "div",
-        { class: "text-sm text-gray-600 dark:text-gray-300" },
-        label.value.text
+function createNuxtUiLabelRenderer(theme) {
+  return defineComponent15({
+    name: "NuxtUiLabelRenderer",
+    props: rendererProps15(),
+    setup(props) {
+      const { label } = useJsonFormsLabel(
+        props
       );
-    };
-  }
-});
+      return () => {
+        if (!label.value.visible) return null;
+        return h15("div", { class: theme.textLabel }, label.value.text);
+      };
+    }
+  });
+}
 
 // src/renderers/layouts/NuxtUiVerticalLayoutRenderer.ts
 import { DispatchRenderer as DispatchRenderer7, rendererProps as rendererProps16, useJsonFormsLayout as useJsonFormsLayout4 } from "@jsonforms/vue";
 import { defineComponent as defineComponent16, h as h16 } from "vue";
-var NuxtUiVerticalLayoutRenderer = defineComponent16({
-  name: "NuxtUiVerticalLayoutRenderer",
-  components: { DispatchRenderer: DispatchRenderer7 },
-  props: rendererProps16(),
-  setup(props) {
-    const { layout } = useJsonFormsLayout4(
-      props
-    );
-    return () => {
-      if (!layout.value.visible) return null;
-      const elements = layout.value.uischema.elements ?? [];
-      return h16(
-        "div",
-        { class: "flex flex-col gap-3" },
-        elements.map(
-          (element, index) => h16(
-            "div",
-            { key: `${layout.value.path}-${index}` },
-            h16(DispatchRenderer7, {
-              schema: layout.value.schema,
-              uischema: element,
-              path: layout.value.path,
-              enabled: layout.value.enabled,
-              renderers: layout.value.renderers,
-              cells: layout.value.cells
-            })
-          )
-        )
+function createNuxtUiVerticalLayoutRenderer(theme) {
+  return defineComponent16({
+    name: "NuxtUiVerticalLayoutRenderer",
+    components: { DispatchRenderer: DispatchRenderer7 },
+    props: rendererProps16(),
+    setup(props) {
+      const { layout } = useJsonFormsLayout4(
+        props
       );
-    };
-  }
-});
+      return () => {
+        if (!layout.value.visible) return null;
+        const elements = layout.value.uischema.elements ?? [];
+        return h16(
+          "div",
+          { class: theme.layoutVertical },
+          elements.map(
+            (element, index) => h16(
+              "div",
+              { key: `${layout.value.path}-${index}` },
+              h16(DispatchRenderer7, {
+                schema: layout.value.schema,
+                uischema: element,
+                path: layout.value.path,
+                enabled: layout.value.enabled,
+                renderers: layout.value.renderers,
+                cells: layout.value.cells
+              })
+            )
+          )
+        );
+      };
+    }
+  });
+}
+
+// src/renderers/theme.ts
+var defaultTheme = {
+  panel: "jf-panel",
+  groupNested: "jf-group",
+  layoutVertical: "jf-layout-vertical",
+  layoutVerticalWide: "jf-layout-vertical-wide",
+  layoutHorizontal: "jf-layout-horizontal",
+  layoutHorizontalItem: "jf-layout-horizontal-item",
+  arrayItemToolbar: "jf-array-item-toolbar",
+  labelSection: "jf-label-section",
+  labelSectionSpaced: "jf-label-section-spaced",
+  textMuted: "jf-text-muted",
+  textMutedXs: "jf-text-muted-xs",
+  textItemTitle: "jf-text-item-title",
+  textItemSuffix: "jf-text-item-suffix",
+  textLabel: "jf-text-label",
+  flexBetween: "jf-flex-between",
+  flexBetweenStart: "jf-flex-between-start",
+  flexActions: "jf-flex-actions"
+};
+function mergeTheme(overrides) {
+  return overrides ? { ...defaultTheme, ...overrides } : { ...defaultTheme };
+}
 
 // src/nuxtUiRenderers.ts
 var RANK = 10;
@@ -1021,84 +1072,92 @@ var isOneOfEnumControl = (uischema, schema, context) => {
   }
   return true;
 };
-var nuxtUiRenderers = [
-  // Layouts
-  {
-    tester: rankWith(RANK, uiTypeIs("VerticalLayout")),
-    renderer: markRaw(NuxtUiVerticalLayoutRenderer)
-  },
-  {
-    tester: rankWith(RANK, uiTypeIs("HorizontalLayout")),
-    renderer: markRaw(NuxtUiHorizontalLayoutRenderer)
-  },
-  {
-    tester: rankWith(RANK, uiTypeIs("Group")),
-    renderer: markRaw(NuxtUiGroupRenderer)
-  },
-  {
-    tester: rankWith(RANK, uiTypeIs("Categorization")),
-    renderer: markRaw(NuxtUiCategorizationRenderer)
-  },
-  {
-    tester: rankWith(RANK, uiTypeIs("Category")),
-    renderer: markRaw(NuxtUiCategoryRenderer)
-  },
-  {
-    tester: rankWith(RANK, uiTypeIs("Label")),
-    renderer: markRaw(NuxtUiLabelRenderer)
-  },
-  // Complex schemas
-  {
-    tester: rankWith(RANK, schemaTypeIs("array")),
-    renderer: markRaw(NuxtUiArrayListRenderer)
-  },
-  {
-    tester: rankWith(RANK, isObjectControl),
-    renderer: markRaw(NuxtUiObjectRenderer)
-  },
-  // Primitive controls
-  {
-    tester: rankWith(RANK, isMultiLineControl),
-    renderer: markRaw(NuxtUiTextareaControl)
-  },
-  {
-    tester: rankWith(RANK, isNumberControl),
-    renderer: markRaw(NuxtUiNumberControl)
-  },
-  {
-    tester: rankWith(RANK, isIntegerControl),
-    renderer: markRaw(NuxtUiIntegerControl)
-  },
-  {
-    tester: rankWith(RANK, isBooleanControl),
-    renderer: markRaw(NuxtUiBooleanControl)
-  },
-  {
-    // Multi-enum must outrank generic array renderer and string renderer.
-    tester: rankWith(ENUM_RANK, isMultiEnumControl),
-    renderer: markRaw(NuxtUiMultiEnumControl)
-  },
-  {
-    // oneOf with const+title (display labels) - same as enum for rendering.
-    tester: rankWith(ENUM_RANK, isOneOfEnumControl),
-    renderer: markRaw(NuxtUiEnumControl)
-  },
-  {
-    // Enum must outrank the generic string control, otherwise enums can render
-    // as freeform text inputs.
-    tester: rankWith(ENUM_RANK, isEnumControl),
-    renderer: markRaw(NuxtUiEnumControl)
-  },
-  {
-    tester: rankWith(PASSWORD_RANK, and(isStringControl, formatIs("password"))),
-    renderer: markRaw(NuxtUiPasswordControl)
-  },
-  {
-    tester: rankWith(RANK, isStringControl),
-    renderer: markRaw(NuxtUiStringControl)
-  }
-];
+function createNuxtUiRenderers(options) {
+  const theme = mergeTheme(options?.theme);
+  return [
+    // Layouts
+    {
+      tester: rankWith(RANK, uiTypeIs("VerticalLayout")),
+      renderer: markRaw(createNuxtUiVerticalLayoutRenderer(theme))
+    },
+    {
+      tester: rankWith(RANK, uiTypeIs("HorizontalLayout")),
+      renderer: markRaw(createNuxtUiHorizontalLayoutRenderer(theme))
+    },
+    {
+      tester: rankWith(RANK, uiTypeIs("Group")),
+      renderer: markRaw(createNuxtUiGroupRenderer(theme))
+    },
+    {
+      tester: rankWith(RANK, uiTypeIs("Categorization")),
+      renderer: markRaw(createNuxtUiCategorizationRenderer(theme))
+    },
+    {
+      tester: rankWith(RANK, uiTypeIs("Category")),
+      renderer: markRaw(createNuxtUiCategoryRenderer(theme))
+    },
+    {
+      tester: rankWith(RANK, uiTypeIs("Label")),
+      renderer: markRaw(createNuxtUiLabelRenderer(theme))
+    },
+    // Complex schemas
+    {
+      tester: rankWith(RANK, schemaTypeIs("array")),
+      renderer: markRaw(createNuxtUiArrayListRenderer(theme))
+    },
+    {
+      tester: rankWith(RANK, isObjectControl),
+      renderer: markRaw(NuxtUiObjectRenderer)
+    },
+    // Primitive controls
+    {
+      tester: rankWith(RANK, isMultiLineControl),
+      renderer: markRaw(NuxtUiTextareaControl)
+    },
+    {
+      tester: rankWith(RANK, isNumberControl),
+      renderer: markRaw(NuxtUiNumberControl)
+    },
+    {
+      tester: rankWith(RANK, isIntegerControl),
+      renderer: markRaw(NuxtUiIntegerControl)
+    },
+    {
+      tester: rankWith(RANK, isBooleanControl),
+      renderer: markRaw(createNuxtUiBooleanControl(theme))
+    },
+    {
+      // Multi-enum must outrank generic array renderer and string renderer.
+      tester: rankWith(ENUM_RANK, isMultiEnumControl),
+      renderer: markRaw(NuxtUiMultiEnumControl)
+    },
+    {
+      // oneOf with const+title (display labels) - same as enum for rendering.
+      tester: rankWith(ENUM_RANK, isOneOfEnumControl),
+      renderer: markRaw(NuxtUiEnumControl)
+    },
+    {
+      // Enum must outrank the generic string control, otherwise enums render
+      // as freeform text inputs.
+      tester: rankWith(ENUM_RANK, isEnumControl),
+      renderer: markRaw(NuxtUiEnumControl)
+    },
+    {
+      tester: rankWith(PASSWORD_RANK, and(isStringControl, formatIs("password"))),
+      renderer: markRaw(NuxtUiPasswordControl)
+    },
+    {
+      tester: rankWith(RANK, isStringControl),
+      renderer: markRaw(NuxtUiStringControl)
+    }
+  ];
+}
+var nuxtUiRenderers = createNuxtUiRenderers();
 export {
+  controlDescription,
+  createNuxtUiRenderers,
+  defaultTheme,
+  mergeTheme,
   nuxtUiRenderers
 };
 //# sourceMappingURL=index.js.map