@sjsf/skeleton-theme 2.0.0-next.0 → 2.0.0-next.10

package/README.md

@@ -2,13 +2,13 @@
 
 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/)
+- [Documentation](https://x0k.github.io/svelte-jsonschema-form/v2/themes/skeleton/)
+- [Playground](https://x0k.github.io/svelte-jsonschema-form/playground2/)
 
 ## Installation
 
 ```shell
-npm install @sjsf/form @sjsf/skeleton-theme
+npm install @sjsf/form@next @sjsf/skeleton-theme@next
 ```
 
 ## Usage

package/dist/components/button.svelte

@@ -1,19 +1,34 @@
 <script lang="ts">
-	import { defineDisabled, getFormContext, type ComponentProps } from '@sjsf/form';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import {
+		composeProps,
+		disabledProp,
+		getFormContext,
+		uiOptionNestedProps,
+		uiOptionProps,
+		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}>
+<button
+	class="btn preset-filled"
+	{...composeProps(
+		ctx,
+		config,
+		{
+			type: 'button',
+			disabled,
+			onclick
+		} satisfies HTMLButtonAttributes,
+		uiOptionProps('button'),
+		uiOptionNestedProps('buttons', (b) => b[type]),
+		disabledProp
+	)}
+>
 	{@render children()}
 </button>

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

@@ -1,3 +1,4 @@
+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;

package/dist/components/description.svelte

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

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

@@ -1,3 +1,4 @@
+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;

package/dist/components/errors-list.svelte

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

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

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

package/dist/components/exports.d.ts

@@ -3,6 +3,7 @@ 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 label } from "./label.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

@@ -3,6 +3,7 @@ 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 label } from "./label.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

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

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

@@ -1,3 +1,4 @@
+import '@sjsf/basic-theme/components/form.svelte';
 declare const Form: import("svelte").Component<{
     config: import("@sjsf/form").Config;
     ref?: HTMLFormElement | undefined;

package/dist/components/help.svelte

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

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

@@ -1,3 +1,4 @@
+import '@sjsf/basic-theme/components/help.svelte';
 declare const Help: import("svelte").Component<import("@sjsf/form/fields/components").ComponentCommonProps & {
     help: string;
 }, {}, "">;

package/dist/components/label.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { getFormContext, labelAttributes, type ComponentProps } from '@sjsf/form';
+	import '@sjsf/basic-theme/components/label.svelte';
+
+	const { title, config }: ComponentProps['label'] = $props();
+
+	const ctx = getFormContext();
+</script>
+
+<label class="label-text" {...labelAttributes(ctx, config, 'labelAttributes', { })}>
+	{title}
+	{#if config.required}
+		<span>*</span>
+	{/if}
+</label>

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

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

package/dist/components/layout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import type { ComponentProps } from '@sjsf/form';
+	import { getFormContext, layoutAttributes, type ComponentProps } from '@sjsf/form';
+	import '@sjsf/basic-theme/components/layout.svelte';
 
 	const { type, children, config }: ComponentProps['layout'] = $props();
 
@@ -22,10 +23,7 @@
 			type === 'object-properties'
 	);
 
-	const attributes = $derived({
-		...config.uiOptions?.layout,
-		...config.uiOptions?.layouts?.[type]
-	});
+	const ctx = getFormContext();
 </script>
 
 <div
@@ -35,8 +33,7 @@
 	class:items-start={isItemOrControls}
 	class:grow={isGrowable}
 	class:flex-col={isColumn || isField}
-	data-layout={type}
-	{...attributes}
+	{...layoutAttributes(ctx, config, 'layout', 'layouts', type, {})}
 >
 	{@render children()}
 </div>

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

@@ -1,3 +1,4 @@
+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;

package/dist/components/submit-button.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
-	import { defineDisabled, getFormContext, type ComponentProps } from '@sjsf/form';
+	import { buttonAttributes, 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 ?? {}));
+	const attributes = $derived(buttonAttributes(ctx, config, 'submitButton', 'submit', {}));
 </script>
 
-<button class="btn preset-filled preset-filled-primary-500 w-full" type="submit" {...attributes}>
+<button class="btn preset-filled preset-filled-primary-500 w-full" {...attributes}>
 	{@render children()}
 </button>

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

@@ -1,3 +1,4 @@
+import '@sjsf/basic-theme/components/submit-button.svelte';
 declare const SubmitButton: import("svelte").Component<{
     config: import("@sjsf/form").Config;
     children: import("svelte").Snippet;

package/dist/components/title.svelte

@@ -1,16 +1,15 @@
 <script lang="ts">
-	import type { ComponentProps } from '@sjsf/form';
+	import { getFormContext, titleAttributes, type ComponentProps } from '@sjsf/form';
+	import '@sjsf/basic-theme/components/title.svelte';
 
-	const { title, type, forId, required, config }: ComponentProps['title'] = $props();
+	const { title, type, config }: ComponentProps['title'] = $props();
+
+	const ctx = getFormContext();
 </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}
+<div
+	class={type === 'field' ? 'label-text' : 'font-bold text-xl'}
+	{...titleAttributes(ctx, config, 'titleAttributes', {})}
+>
+	{title}
+</div>

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

@@ -1,8 +1,7 @@
+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

@@ -1,72 +1,7 @@
-import type { ExtendableComponentDefinitionsWithoutFields } from '@sjsf/form/fields/resolver';
+import type { ComponentDefinitions } from '@sjsf/form';
 import * as templates from '@sjsf/form/templates/exports';
-export declare const definitions: {
-    textWidget: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<string>, {}, "value">;
-    numberWidget: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<number>, {}, "value">;
-    selectWidget: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<import("@sjsf/form").SchemaValue> & import("@sjsf/form/fields/widgets").Options, {}, "value">;
-    checkboxWidget: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<boolean>, {}, "value">;
-    checkboxesWidget: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<import("@sjsf/form/core").SchemaArrayValue> & import("@sjsf/form/fields/widgets").Options, {}, "value">;
-    fileWidget: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<FileList> & {
-        multiple: boolean;
-        loading: boolean;
-        processing: boolean;
-    }, {}, "value">;
-    form: import("svelte").Component<{
-        config: import("@sjsf/form").Config;
-        ref?: HTMLFormElement | undefined;
-        children: import("svelte").Snippet;
-        attributes?: import("svelte/elements").HTMLFormAttributes | undefined;
-    }, {}, "ref">;
-    submitButton: import("svelte").Component<{
-        config: import("@sjsf/form").Config;
-        children: import("svelte").Snippet;
-    }, {}, "">;
-    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;
-    }, {}, "">;
-    layout: import("svelte").Component<import("@sjsf/form/fields/components").ComponentCommonProps & {
-        type: import("@sjsf/form/fields/components").LayoutType;
-        children: import("svelte").Snippet;
-    }, {}, "">;
-    title: import("svelte").Component<import("@sjsf/form/fields/components").ComponentCommonProps & {
-        type: templates.ParentTemplateType;
-        title: string;
-        forId: string;
-        required: boolean;
-    }, {}, "">;
-    description: import("svelte").Component<import("@sjsf/form/fields/components").ComponentCommonProps & {
-        type: templates.ParentTemplateType;
-        description: string;
-    }, {}, "">;
-    help: import("svelte").Component<import("@sjsf/form/fields/components").ComponentCommonProps & {
-        help: string;
-    }, {}, "">;
-    errorsList: import("svelte").Component<import("@sjsf/form/fields/components").ComponentCommonProps & {
-        forId: string;
-    }, {}, "">;
-    fieldTemplate: import("svelte").Component<import("@sjsf/form/fields/templates").TemplateCommonProps<import("@sjsf/form").SchemaValue> & {
-        showTitle: boolean;
-    }, {}, "">;
-    objectTemplate: import("svelte").Component<import("@sjsf/form/fields/templates").TemplateCommonProps<import("@sjsf/form/core").SchemaObjectValue> & {
-        addButton?: import("svelte").Snippet;
-    }, {}, "">;
-    objectPropertyTemplate: import("svelte").Component<import("@sjsf/form/fields/templates").TemplateCommonProps<import("@sjsf/form").SchemaValue> & {
-        property: string;
-        keyInput?: import("svelte").Snippet;
-        removeButton?: import("svelte").Snippet;
-    }, {}, "">;
-    arrayTemplate: import("svelte").Component<import("@sjsf/form/fields/templates").TemplateCommonProps<import("@sjsf/form/core").SchemaArrayValue> & {
-        addButton?: import("svelte").Snippet;
-    }, {}, "">;
-    arrayItemTemplate: import("svelte").Component<import("@sjsf/form/fields/templates").TemplateCommonProps<import("@sjsf/form").SchemaValue> & {
-        index: number;
-        buttons?: import("svelte").Snippet;
-    }, {}, "">;
-    multiFieldTemplate: import("svelte").Component<import("@sjsf/form/fields/templates").TemplateCommonProps<import("@sjsf/form").SchemaValue> & {
-        optionSelector: import("svelte").Snippet;
-    }, {}, "">;
-};
-export declare const extendable: ExtendableComponentDefinitionsWithoutFields;
+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

@@ -6,4 +6,3 @@ export const definitions = {
     ...components,
     ...widgets
 };
-export const extendable = definitions;

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/{widgets → extra-widgets}/checkboxes.svelte

@@ -1,6 +1,7 @@
 <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,
@@ -18,14 +19,13 @@
 	const ctx = getFormContext();
 
 	const attributes = $derived(
-		inputAttributes(ctx, config, handlers, config.uiOptions?.checkboxes)
+		inputAttributes(ctx, config, 'checkboxes', handlers, { type: 'checkbox' })
 	);
 </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}

package/dist/{widgets → extra-widgets}/checkboxes.svelte.d.ts

@@ -1,3 +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

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

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

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

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

@@ -5,8 +5,10 @@
 	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} />
+<input
+	bind:value
+	class="input"
+	{...inputAttributes(ctx, config, 'datePicker', handlers, { type: 'date' })}
+/>

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/{widgets → extra-widgets}/file.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { getFormContext, inputAttributes, type ComponentProps } from '@sjsf/form';
+	import '@sjsf/basic-theme/extra-widgets/file.svelte';
 
 	let {
 		config,
@@ -11,18 +12,15 @@
 	}: 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}
+	{...inputAttributes(ctx, config, 'file', handlers, {
+		multiple,
+		'data-loading': loading,
+		'data-processing': processing
+	})}
 />

package/dist/{widgets → extra-widgets}/file.svelte.d.ts

@@ -1,3 +1,4 @@
+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;

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

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

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

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

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

@@ -12,10 +12,6 @@
 
 	const ctx = getFormContext();
 
-	const attributes = $derived(
-		selectAttributes(ctx, config, handlers, config.uiOptions?.multiSelect)
-	);
-
 	const mapped = $derived(
 		multipleOptions({
 			mapper: () => indexMapper(options),
@@ -25,7 +21,12 @@
 	);
 </script>
 
-<select multiple bind:value={mapped.value} class="select" {...attributes}>
+<select
+	multiple
+	bind:value={mapped.value}
+	class="select"
+	{...selectAttributes(ctx, config, 'select', handlers, {})}
+>
 	{#each options as option, index (option.id)}
 		<option value={index} disabled={option.disabled}>
 			{option.label}

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

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

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

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

package/dist/extra-widgets/radio.svelte

@@ -13,7 +13,7 @@
 
 	const ctx = getFormContext();
 
-	const attributes = $derived(inputAttributes(ctx, config, handlers, config.uiOptions?.radio));
+	const attributes = $derived(inputAttributes(ctx, config, 'radio', handlers, {}));
 </script>
 
 {#each options as option, index (option.id)}

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

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

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

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

package/dist/extra-widgets/range.svelte

@@ -5,8 +5,10 @@
 	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} />
+<input
+	bind:value={() => value ?? 0, (v) => (value = v)}
+	class="range grow w-0"
+	{...inputAttributes(ctx, config, 'range', handlers, { type: 'range' })}
+/>