@sjsf/skeleton-theme 1.9.2 → 2.0.0-next.1

package/README.md

@@ -1,6 +1,6 @@
 # @sjsf/skeleton-theme
 
-The [skeleton](https://github.com/skeletonlabs/skeleton) based theme for [svelte-jsonschema-form](https://github.com/x0k/svelte-jsonschema-form).
+The [skeleton](https://github.com/skeletonlabs/skeleton) v3 (tailwind v3) based theme for [svelte-jsonschema-form](https://github.com/x0k/svelte-jsonschema-form).
 
 - [Documentation](https://x0k.github.io/svelte-jsonschema-form/themes/skeleton/)
 - [Playground](https://x0k.github.io/svelte-jsonschema-form/playground/)
@@ -66,11 +66,12 @@ Bundled themes:
 
 ```svelte
 <script lang="ts">
-  import { createForm3 } from '@sjsf/form';
+  import { createForm } from '@sjsf/form';
   import { theme } from '@sjsf/skeleton-theme';
 
-  const form = createForm3({
-    ...theme,
+  const form = createForm({
+    theme,
+    ...
   })
 </script>
 ```

package/dist/components/button.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { defineDisabled, getFormContext, type ComponentProps } from '@sjsf/form';
+	import '@sjsf/basic-theme/components/button.svelte';
+
+	const { children, onclick, config, disabled, type }: ComponentProps['button'] = $props();
+
+	const ctx = getFormContext();
+
+	const attributes = $derived(
+		defineDisabled(ctx, {
+			disabled,
+			...config.uiOptions?.button,
+			...config.uiOptions?.buttons?.[type]
+		})
+	);
+</script>
+
+<button class="btn preset-filled" type="button" {onclick} {...attributes}>
+	{@render children()}
+</button>

package/dist/components/button.svelte.d.ts

@@ -0,0 +1,9 @@
+import '@sjsf/basic-theme/components/button.svelte';
+declare const Button: import("svelte").Component<import("@sjsf/form/fields/components").ComponentCommonProps & {
+    type: import("@sjsf/form/fields/components").ButtonType;
+    disabled: boolean;
+    children: import("svelte").Snippet;
+    onclick: () => void;
+}, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/description.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { ComponentProps } from '@sjsf/form';
+	import '@sjsf/basic-theme/components/description.svelte';
+
+	const { description, config }: ComponentProps['description'] = $props();
+</script>
+
+<div class="opacity-60" {...config.uiOptions?.descriptionAttributes}>{description}</div>

package/dist/components/description.svelte.d.ts

@@ -0,0 +1,7 @@
+import '@sjsf/basic-theme/components/description.svelte';
+declare const Description: import("svelte").Component<import("@sjsf/form/fields/components").ComponentCommonProps & {
+    type: import("@sjsf/form/templates/components").ParentTemplateType;
+    description: string;
+}, {}, "">;
+type Description = ReturnType<typeof Description>;
+export default Description;

package/dist/components/errors-list.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-  import type { ComponentProps } from "@sjsf/form";
+	import type { ComponentProps } from '@sjsf/form';
+	import '@sjsf/basic-theme/components/errors-list.svelte';
 
-  const { errors, forId }: ComponentProps<"errorsList"> = $props();
+	const { errors, forId, config }: ComponentProps['errorsList'] = $props();
 </script>
 
-<ui class="text-error-500" data-errors-for={forId}>
-  {#each errors as err}
-    <li>{err.message}</li>
-  {/each}
+<ui class="text-error-500" data-errors-for={forId} {...config.uiOptions?.errorsList}>
+	{#each errors as err}
+		<li>{err.message}</li>
+	{/each}
 </ui>

package/dist/components/errors-list.svelte.d.ts

@@ -1,3 +1,6 @@
-import type { ComponentProps } from "@sjsf/form";
-declare const ErrorsList: import("svelte").Component<ComponentProps<"errorsList">, {}, "">;
+import '@sjsf/basic-theme/components/errors-list.svelte';
+declare const ErrorsList: import("svelte").Component<import("@sjsf/form/fields/components").ComponentCommonProps & {
+    forId: string;
+}, {}, "">;
+type ErrorsList = ReturnType<typeof ErrorsList>;
 export default ErrorsList;

package/dist/components/exports.d.ts

@@ -0,0 +1,8 @@
+export { default as form } from './form.svelte';
+export { default as submitButton } from './submit-button.svelte';
+export { default as button } from './button.svelte';
+export { default as layout } from './layout.svelte';
+export { default as title } from './title.svelte';
+export { default as description } from './description.svelte';
+export { default as help } from './help.svelte';
+export { default as errorsList } from './errors-list.svelte';

package/dist/components/exports.js

@@ -0,0 +1,8 @@
+export { default as form } from './form.svelte';
+export { default as submitButton } from './submit-button.svelte';
+export { default as button } from './button.svelte';
+export { default as layout } from './layout.svelte';
+export { default as title } from './title.svelte';
+export { default as description } from './description.svelte';
+export { default as help } from './help.svelte';
+export { default as errorsList } from './errors-list.svelte';

package/dist/components/form.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { enhance, getFormContext, type ComponentProps } from '@sjsf/form';
+	import '@sjsf/basic-theme/components/form.svelte';
+
+	let { config, children, ref = $bindable(), attributes }: ComponentProps['form'] = $props();
+
+	const ctx = getFormContext();
+</script>
+
+<form
+	bind:this={ref}
+	use:enhance={ctx}
+	class="flex flex-col gap-4"
+	{...config.uiOptions?.form}
+	{...attributes}
+>
+	{@render children?.()}
+</form>

package/dist/components/form.svelte.d.ts

@@ -0,0 +1,9 @@
+import '@sjsf/basic-theme/components/form.svelte';
+declare const Form: import("svelte").Component<{
+    config: import("@sjsf/form").Config;
+    ref?: HTMLFormElement | undefined;
+    children: import("svelte").Snippet;
+    attributes?: import("svelte/elements").HTMLFormAttributes | undefined;
+}, {}, "ref">;
+type Form = ReturnType<typeof Form>;
+export default Form;

package/dist/components/help.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { ComponentProps } from '@sjsf/form';
+	import '@sjsf/basic-theme/components/help.svelte';
+
+	const { help, config }: ComponentProps['help'] = $props();
+</script>
+
+<div class="opacity-60" {...config.uiOptions?.helpAttributes}>{help}</div>

package/dist/components/help.svelte.d.ts

@@ -0,0 +1,6 @@
+import '@sjsf/basic-theme/components/help.svelte';
+declare const Help: import("svelte").Component<import("@sjsf/form/fields/components").ComponentCommonProps & {
+    help: string;
+}, {}, "">;
+type Help = ReturnType<typeof Help>;
+export default Help;

package/dist/components/{layout-component.svelte → layout.svelte}

@@ -1,12 +1,15 @@
 <script lang="ts">
 	import type { ComponentProps } from '@sjsf/form';
+	import '@sjsf/basic-theme/components/layout.svelte';
 
-	const { type, children, attributes }: ComponentProps<'layout'> = $props();
+	const { type, children, config }: ComponentProps['layout'] = $props();
 
-	const isItem = $derived(
-		type === 'array-item' || type === 'object-property' || type === 'field-content'
+	const isItemOrControls = $derived(
+		type === 'array-item' ||
+			type === 'object-property' ||
+			type === 'field-content' ||
+			type === 'array-item-controls'
 	);
-	const isControls = $derived(type === 'array-item-controls');
 	const isGrowable = $derived(
 		type === 'array-item-content' ||
 			type === 'object-property-key-input' ||
@@ -17,18 +20,20 @@
 		type === 'array-field' ||
 			type === 'object-field' ||
 			type === 'array-items' ||
-			type === 'object-properties' ||
-			type === 'root-field'
+			type === 'object-properties'
 	);
+
+	const attributes = $derived({
+		...config.uiOptions?.layout,
+		...config.uiOptions?.layouts?.[type]
+	});
 </script>
 
 <div
-	class:flex={isItem || isControls || isField || isColumn}
-	class:gap-2={isItem || isField}
+	class:flex={isItemOrControls || isField || isColumn}
+	class:gap-2={isItemOrControls || isField}
 	class:gap-4={isColumn}
-	class:items-start={isItem || isControls}
-	class:btn-group={isControls}
-	class:preset-outlined-surface-200-800={isControls}
+	class:items-start={isItemOrControls}
 	class:grow={isGrowable}
 	class:flex-col={isColumn || isField}
 	data-layout={type}

package/dist/components/layout.svelte.d.ts

@@ -0,0 +1,7 @@
+import '@sjsf/basic-theme/components/layout.svelte';
+declare const Layout: import("svelte").Component<import("@sjsf/form/fields/components").ComponentCommonProps & {
+    type: import("@sjsf/form/fields/components").LayoutType;
+    children: import("svelte").Snippet;
+}, {}, "">;
+type Layout = ReturnType<typeof Layout>;
+export default Layout;

package/dist/components/submit-button.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { defineDisabled, getFormContext, type ComponentProps } from '@sjsf/form';
+	import '@sjsf/basic-theme/components/submit-button.svelte';
+
+	const { children, config }: ComponentProps['submitButton'] = $props();
+
+	const ctx = getFormContext();
+
+	const attributes = $derived(defineDisabled(ctx, config.uiOptions?.submitButton ?? {}));
+</script>
+
+<button class="btn preset-filled preset-filled-primary-500 w-full" type="submit" {...attributes}>
+	{@render children()}
+</button>

package/dist/components/submit-button.svelte.d.ts

@@ -0,0 +1,7 @@
+import '@sjsf/basic-theme/components/submit-button.svelte';
+declare const SubmitButton: import("svelte").Component<{
+    config: import("@sjsf/form").Config;
+    children: import("svelte").Snippet;
+}, {}, "">;
+type SubmitButton = ReturnType<typeof SubmitButton>;
+export default SubmitButton;

package/dist/components/title.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { ComponentProps } from '@sjsf/form';
+	import '@sjsf/basic-theme/components/title.svelte';
+
+	const { title, type, forId, required, config }: ComponentProps['title'] = $props();
+</script>
+
+{#if type === 'field'}
+	<label class="label-text" for={forId} {...config.uiOptions?.labelAttributes}>
+		{title}
+		{#if required}
+			<span>*</span>
+		{/if}
+	</label>
+{:else}
+	<div class="font-bold text-2xl" {...config.uiOptions?.titleAttributes}>{title}</div>
+{/if}

package/dist/components/title.svelte.d.ts

@@ -0,0 +1,9 @@
+import '@sjsf/basic-theme/components/title.svelte';
+declare const Title: import("svelte").Component<import("@sjsf/form/fields/components").ComponentCommonProps & {
+    type: import("@sjsf/form/templates/components").ParentTemplateType;
+    title: string;
+    forId: string;
+    required: boolean;
+}, {}, "">;
+type Title = ReturnType<typeof Title>;
+export default Title;

package/dist/definitions.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentDefinitions } from '@sjsf/form';
+import * as templates from '@sjsf/form/templates/exports';
+import * as components from './components/exports';
+import * as widgets from './widgets/exports';
+export interface ExtraWidgets {
+}
+export declare const definitions: typeof templates & typeof components & typeof widgets & Pick<ComponentDefinitions, keyof ExtraWidgets>;

package/dist/definitions.js

@@ -0,0 +1,8 @@
+import * as templates from '@sjsf/form/templates/exports';
+import * as components from './components/exports';
+import * as widgets from './widgets/exports';
+export const definitions = {
+    ...templates,
+    ...components,
+    ...widgets
+};

package/dist/extra-widgets/checkboxes-include.d.ts

@@ -0,0 +1,6 @@
+import './checkboxes.svelte';
+declare module '../definitions.js' {
+    interface ExtraWidgets {
+        checkboxesWidget: {};
+    }
+}

package/dist/extra-widgets/checkboxes-include.js

@@ -0,0 +1,4 @@
+import { definitions } from '../definitions.js';
+import Checkboxes from './checkboxes.svelte';
+import './checkboxes.svelte';
+definitions.checkboxesWidget = Checkboxes;

package/dist/extra-widgets/checkboxes.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { getFormContext, inputAttributes, type ComponentProps } from '@sjsf/form';
+	import { multipleOptions, indexMapper } from '@sjsf/form/options.svelte';
+	import '@sjsf/basic-theme/extra-widgets/checkboxes.svelte';
+
+	let {
+		handlers,
+		value = $bindable(),
+		options,
+		config
+	}: ComponentProps['checkboxesWidget'] = $props();
+
+	const mapped = multipleOptions({
+		mapper: () => indexMapper(options),
+		value: () => value,
+		update: (v) => (value = v)
+	});
+
+	const ctx = getFormContext();
+
+	const attributes = $derived(inputAttributes(ctx, config, handlers, config.uiOptions?.checkboxes));
+</script>
+
+{#each options as option, index (option.id)}
+	<label class="flex items-center space-x-2 cursor-pointer">
+		<input
+			type="checkbox"
+			class="checkbox"
+			bind:group={mapped.value}
+			value={index}
+			{...attributes}
+			id={option.id}
+			disabled={option.disabled || attributes.disabled}
+		/>
+		<p>{option.label}</p>
+	</label>
+{/each}

package/dist/extra-widgets/checkboxes.svelte.d.ts

@@ -0,0 +1,4 @@
+import '@sjsf/basic-theme/extra-widgets/checkboxes.svelte';
+declare const Checkboxes: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<import("@sjsf/form/core").SchemaArrayValue> & import("@sjsf/form/fields/widgets").Options, {}, "value">;
+type Checkboxes = ReturnType<typeof Checkboxes>;
+export default Checkboxes;

package/dist/extra-widgets/date-picker-include.d.ts

@@ -0,0 +1,6 @@
+import './date-picker.svelte';
+declare module '../definitions.js' {
+    interface ExtraWidgets {
+        datePickerWidget: {};
+    }
+}

package/dist/extra-widgets/date-picker-include.js

@@ -0,0 +1,4 @@
+import { definitions } from '../definitions';
+import DatePicker from './date-picker.svelte';
+import './date-picker.svelte';
+definitions.datePickerWidget = DatePicker;

package/dist/extra-widgets/date-picker.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { getFormContext, inputAttributes, type ComponentProps } from '@sjsf/form';
+	import '@sjsf/basic-theme/extra-widgets/date-picker.svelte';
+
+	let { value = $bindable(), config, handlers }: ComponentProps['datePickerWidget'] = $props();
+
+	const ctx = getFormContext();
+
+	const attributes = $derived(inputAttributes(ctx, config, handlers, config.uiOptions?.datePicker));
+</script>
+
+<input type="date" bind:value class="input" {...attributes} />

package/dist/extra-widgets/date-picker.svelte.d.ts

@@ -0,0 +1,4 @@
+import '@sjsf/basic-theme/extra-widgets/date-picker.svelte';
+declare const DatePicker: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<string>, {}, "value">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/extra-widgets/file-include.d.ts

@@ -0,0 +1,6 @@
+import './file.svelte';
+declare module '../definitions.js' {
+    interface ExtraWidgets {
+        fileWidget: {};
+    }
+}

package/dist/extra-widgets/file-include.js

@@ -0,0 +1,4 @@
+import { definitions } from '../definitions.js';
+import File from './file.svelte';
+import './file.svelte';
+definitions.fileWidget = File;

package/dist/extra-widgets/file.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { getFormContext, inputAttributes, type ComponentProps } from '@sjsf/form';
+	import '@sjsf/basic-theme/extra-widgets/file.svelte';
+
+	let {
+		config,
+		handlers,
+		multiple,
+		loading,
+		processing,
+		value = $bindable()
+	}: ComponentProps['fileWidget'] = $props();
+
+	const ctx = getFormContext();
+
+	const attributes = $derived(inputAttributes(ctx, config, handlers, config.uiOptions?.file));
+</script>
+
+<input
+	type="file"
+	bind:files={value}
+	{multiple}
+	class="input"
+	data-loading={loading}
+	data-processing={processing}
+	{...attributes}
+/>

package/dist/extra-widgets/file.svelte.d.ts

@@ -0,0 +1,8 @@
+import '@sjsf/basic-theme/extra-widgets/file.svelte';
+declare const File: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<FileList> & {
+    multiple: boolean;
+    loading: boolean;
+    processing: boolean;
+}, {}, "value">;
+type File = ReturnType<typeof File>;
+export default File;

package/dist/extra-widgets/multi-select-include.d.ts

@@ -0,0 +1,6 @@
+import './multi-select.svelte';
+declare module '../definitions.js' {
+    interface ExtraWidgets {
+        multiSelectWidget: {};
+    }
+}

package/dist/extra-widgets/multi-select-include.js

@@ -0,0 +1,4 @@
+import { definitions } from '../definitions.js';
+import MultiSelect from './multi-select.svelte';
+import './multi-select.svelte';
+definitions.multiSelectWidget = MultiSelect;

package/dist/extra-widgets/multi-select.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { getFormContext, selectAttributes, type ComponentProps } from '@sjsf/form';
+	import { indexMapper, multipleOptions } from '@sjsf/form/options.svelte';
+	import '@sjsf/basic-theme/extra-widgets/multi-select.svelte';
+
+	let {
+		value = $bindable(),
+		options,
+		config,
+		handlers
+	}: ComponentProps['multiSelectWidget'] = $props();
+
+	const ctx = getFormContext();
+
+	const attributes = $derived(
+		selectAttributes(ctx, config, handlers, config.uiOptions?.multiSelect)
+	);
+
+	const mapped = $derived(
+		multipleOptions({
+			mapper: () => indexMapper(options),
+			value: () => value,
+			update: (v) => (value = v)
+		})
+	);
+</script>
+
+<select multiple bind:value={mapped.value} class="select" {...attributes}>
+	{#each options as option, index (option.id)}
+		<option value={index} disabled={option.disabled}>
+			{option.label}
+		</option>
+	{/each}
+</select>

package/dist/extra-widgets/multi-select.svelte.d.ts

@@ -0,0 +1,4 @@
+import '@sjsf/basic-theme/extra-widgets/multi-select.svelte';
+declare const MultiSelect: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<import("@sjsf/form/core").SchemaArrayValue> & import("@sjsf/form/fields/widgets").Options, {}, "value">;
+type MultiSelect = ReturnType<typeof MultiSelect>;
+export default MultiSelect;

package/dist/extra-widgets/radio-include.d.ts

@@ -0,0 +1,6 @@
+import './radio.svelte';
+declare module '../definitions.js' {
+    interface ExtraWidgets {
+        radioWidget: {};
+    }
+}

package/dist/extra-widgets/radio-include.js

@@ -0,0 +1,4 @@
+import { definitions } from '../definitions.js';
+import Radio from './radio.svelte';
+import './radio.svelte';
+definitions.radioWidget = Radio;

package/dist/{widgets/radio-widget.svelte → extra-widgets/radio.svelte}

@@ -1,23 +1,29 @@
 <script lang="ts">
-	import { type WidgetProps, indexMapper, singleOption } from '@sjsf/form';
+	import { getFormContext, inputAttributes, type ComponentProps } from '@sjsf/form';
+	import { indexMapper, singleOption } from '@sjsf/form/options.svelte';
+	import '@sjsf/basic-theme/extra-widgets/radio.svelte';
 
-	let { attributes, value = $bindable(), options }: WidgetProps<'radio'> = $props();
+	let { config, handlers, value = $bindable(), options }: ComponentProps['radioWidget'] = $props();
 
 	const mapped = singleOption({
 		mapper: () => indexMapper(options),
 		value: () => value,
 		update: (v) => (value = v)
 	});
+
+	const ctx = getFormContext();
+
+	const attributes = $derived(inputAttributes(ctx, config, handlers, config.uiOptions?.radio));
 </script>
 
 {#each options as option, index (option.id)}
 	<label class="flex items-center space-x-2 cursor-pointer">
 		<input
-			type="radio"
 			class="radio"
 			bind:group={mapped.value}
 			value={index}
 			{...attributes}
+			type="radio"
 			id={option.id}
 			disabled={option.disabled || attributes.disabled}
 		/>

package/dist/extra-widgets/radio.svelte.d.ts

@@ -0,0 +1,4 @@
+import '@sjsf/basic-theme/extra-widgets/radio.svelte';
+declare const Radio: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<import("@sjsf/form").SchemaValue> & import("@sjsf/form/fields/widgets").Options, {}, "value">;
+type Radio = ReturnType<typeof Radio>;
+export default Radio;

package/dist/extra-widgets/range-include.d.ts

@@ -0,0 +1,6 @@
+import './range.svelte';
+declare module '../definitions.js' {
+    interface ExtraWidgets {
+        rangeWidget: {};
+    }
+}

package/dist/extra-widgets/range-include.js

@@ -0,0 +1,4 @@
+import { definitions } from '../definitions';
+import Range from './range.svelte';
+import './range.svelte';
+definitions.rangeWidget = Range;

package/dist/extra-widgets/range.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { getFormContext, inputAttributes, type ComponentProps } from '@sjsf/form';
+	import '@sjsf/basic-theme/extra-widgets/range.svelte';
+
+	let { value = $bindable(), config, handlers }: ComponentProps['rangeWidget'] = $props();
+
+	const ctx = getFormContext();
+
+	const attributes = $derived(inputAttributes(ctx, config, handlers, config.uiOptions?.range));
+</script>
+
+<input type="range" bind:value class="range grow w-0" {...attributes} />

package/dist/extra-widgets/range.svelte.d.ts

@@ -0,0 +1,4 @@
+import '@sjsf/basic-theme/extra-widgets/range.svelte';
+declare const Range: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<number>, {}, "value">;
+type Range = ReturnType<typeof Range>;
+export default Range;

package/dist/extra-widgets/textarea-include.d.ts

@@ -0,0 +1,6 @@
+import './textarea.svelte';
+declare module '../definitions.js' {
+    interface ExtraWidgets {
+        textareaWidget: {};
+    }
+}

package/dist/extra-widgets/textarea-include.js

@@ -0,0 +1,4 @@
+import { definitions } from '../definitions.js';
+import Textarea from './textarea.svelte';
+import './textarea.svelte';
+definitions.textareaWidget = Textarea;

package/dist/extra-widgets/textarea.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { getFormContext, textareaAttributes, type ComponentProps } from '@sjsf/form';
+	import '@sjsf/basic-theme/extra-widgets/textarea.svelte';
+
+	let { value = $bindable(), config, handlers }: ComponentProps['textareaWidget'] = $props();
+
+	const ctx = getFormContext();
+
+	const attributes = $derived(
+		textareaAttributes(ctx, config, handlers, config.uiOptions?.textarea)
+	);
+</script>
+
+<textarea bind:value class="textarea" {...attributes}></textarea>

package/dist/extra-widgets/textarea.svelte.d.ts

@@ -0,0 +1,4 @@
+import '@sjsf/basic-theme/extra-widgets/textarea.svelte';
+declare const Textarea: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<string>, {}, "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/index.d.ts

@@ -1,4 +1 @@
-export declare const theme: {
-    components: import("@sjsf/form").Components;
-    widgets: import("@sjsf/form").Widgets;
-};
+export declare const theme: import("@sjsf/form/lib/resolver").Resolver<import("@sjsf/form/lib/resolver").Chain<Record<"stringField" | "numberField" | "integerField" | "booleanField" | "objectField" | "arrayField" | "tupleField" | "nullField" | "oneOfField" | "anyOfField" | "arrayItemField" | "objectPropertyField", any>, Record<"form" | "button" | "submitButton" | "fieldTemplate" | "objectTemplate" | "objectPropertyTemplate" | "arrayTemplate" | "arrayItemTemplate" | "multiFieldTemplate" | "layout" | "textWidget" | "numberWidget" | "selectWidget" | "checkboxWidget" | "title" | "description" | "help" | "errorsList" | keyof import("./definitions").ExtraWidgets, any>>, import("@sjsf/form/lib/resolver").Chain<typeof import("@sjsf/form/fields/exports") & Pick<import("@sjsf/form").ComponentDefinitions, never>, typeof import("@sjsf/form/templates/exports") & typeof import("./components/exports.js") & typeof import("./widgets/exports.js") & Pick<import("@sjsf/form").ComponentDefinitions, keyof import("./definitions").ExtraWidgets>>>;