@rokkit/forms 1.0.0-next.122

package/dist/src/forms-old/input/types.d.ts

@@ -0,0 +1,7 @@
+export namespace types {
+    export let string: import("svelte/legacy").LegacyComponentType;
+    export let integer: import("svelte/legacy").LegacyComponentType;
+    export { CheckBox as boolean };
+    export let phone: import("svelte/legacy").LegacyComponentType;
+}
+import CheckBox from '../CheckBox.svelte';

package/dist/src/forms-old/lib/form.d.ts

@@ -0,0 +1,95 @@
+export namespace messages {
+    let required: string;
+    let email: string;
+    let url: string;
+    let color: string;
+    let number: string;
+    let min: string;
+    let max: string;
+    let pattern: string;
+    let exclusiveMin: string;
+    let exclusiveMax: string;
+    let minLength: string;
+    let maxLength: string;
+    let minItems: string;
+    let maxItems: string;
+    let uniqueItems: string;
+    let contains: string;
+    let exclude: string;
+    let integer: string;
+}
+export namespace dataTypes {
+    export namespace integer_1 {
+        let editor: string;
+        namespace props {
+            let type: string;
+            let step: number;
+        }
+        let availableProps: string[];
+    }
+    export { integer_1 as integer };
+    export namespace number_1 {
+        let editor_1: string;
+        export { editor_1 as editor };
+        export namespace props_1 {
+            let type_1: string;
+            export { type_1 as type };
+            let step_1: number;
+            export { step_1 as step };
+        }
+        export { props_1 as props };
+        let availableProps_1: string[];
+        export { availableProps_1 as availableProps };
+    }
+    export { number_1 as number };
+    export namespace range {
+        let editor_2: string;
+        export { editor_2 as editor };
+        export namespace props_2 {
+            let type_2: string;
+            export { type_2 as type };
+        }
+        export { props_2 as props };
+    }
+    export let string: {
+        default: string;
+        text: string;
+        password: string;
+        email: string;
+        url: string;
+        tel: string;
+        date: string;
+        'datetime-local': string;
+        time: string;
+        week: string;
+        month: string;
+        file: string;
+        hidden: string;
+        color: string;
+        colorpicker: string;
+    };
+    export namespace _enum {
+        let _default: string;
+        export { _default as default };
+        export let select: string;
+        export let radio: string;
+    }
+    export { _enum as enum };
+    export namespace boolean {
+        let _default_1: string;
+        export { _default_1 as default };
+        export let checkbox: string;
+        let _switch: string;
+        export { _switch as switch };
+        let radio_1: string;
+        export { radio_1 as radio };
+    }
+    export namespace array {
+        let _default_2: string;
+        export { _default_2 as default };
+    }
+    export namespace object {
+        let _default_3: string;
+        export { _default_3 as default };
+    }
+}

package/dist/src/forms-old/lib/index.d.ts

@@ -0,0 +1 @@
+export { messages, dataTypes } from "./form";

package/dist/src/index.d.ts

@@ -0,0 +1,5 @@
+export { FormBuilder } from "./lib/builder.svelte.js";
+export { default as FormRenderer } from "./FormRenderer.svelte";
+export { default as Input } from "./Input.svelte";
+export { default as InputField } from "./InputField.svelte";
+export * from "./input";

package/dist/src/input/index.d.ts

@@ -0,0 +1,18 @@
+export { default as InputCheckbox } from "./InputCheckbox.svelte";
+export { default as InputColor } from "./InputColor.svelte";
+export { default as InputDate } from "./InputDate.svelte";
+export { default as InputDateTime } from "./InputDateTime.svelte";
+export { default as InputEmail } from "./InputEmail.svelte";
+export { default as InputFile } from "./InputFile.svelte";
+export { default as InputMonth } from "./InputMonth.svelte";
+export { default as InputNumber } from "./InputNumber.svelte";
+export { default as InputPassword } from "./InputPassword.svelte";
+export { default as InputRadio } from "./InputRadio.svelte";
+export { default as InputRange } from "./InputRange.svelte";
+export { default as InputSelect } from "./InputSelect.svelte";
+export { default as InputTel } from "./InputTel.svelte";
+export { default as InputText } from "./InputText.svelte";
+export { default as InputTextArea } from "./InputTextArea.svelte";
+export { default as InputTime } from "./InputTime.svelte";
+export { default as InputUrl } from "./InputUrl.svelte";
+export { default as InputWeek } from "./InputWeek.svelte";

package/dist/src/lib/builder.svelte.d.ts

@@ -0,0 +1,140 @@
+/**
+ * @typedef {Object} FormElement
+ * @property {string} scope - JSON Pointer path (e.g., '#/email', '#/user/name')
+ * @property {string} type - Input type (text, number, range, checkbox, select, etc.)
+ * @property {any} value - Current value from data
+ * @property {boolean} override - Whether to use custom child snippet (from layout)
+ * @property {Object} props - Merged properties from schema + layout + validation
+ * @property {string} [props.label] - Display label (from layout)
+ * @property {string} [props.description] - Help text (from layout)
+ * @property {string} [props.placeholder] - Placeholder text (from layout)
+ * @property {boolean} [props.required] - Required flag (from schema)
+ * @property {number} [props.min] - Minimum value (from schema)
+ * @property {number} [props.max] - Maximum value (from schema)
+ * @property {Object} [props.message] - Validation message object
+ * @property {string} [props.message.state] - Message state: 'error', 'warning', 'info', 'success'
+ * @property {string} [props.message.text] - Message text content
+ */
+/**
+ * FormBuilder class for dynamically generating forms from data structures
+ */
+export class FormBuilder {
+    /**
+     * Create a new FormBuilder instance
+     * @param {Object} [data={}] - Initial data object
+     * @param {Object|null} [schema=null] - Optional schema override
+     * @param {Object|null} [layout=null] - Optional layout override
+     */
+    constructor(data?: Object, schema?: Object | null, layout?: Object | null);
+    /** @type {FormElement[]} */
+    elements: FormElement[];
+    combined: any;
+    /**
+     * Set the data
+     * @param {Object} value - New data object
+     */
+    set data(value: Object);
+    /**
+     * Get the current data
+     * @returns {Object} Current data object
+     */
+    get data(): Object;
+    /**
+     * Set the schema
+     * @param {Object} value - New schema object
+     */
+    set schema(value: Object);
+    /**
+     * Get the current schema
+     * @returns {Object} Current schema object
+     */
+    get schema(): Object;
+    /**
+     * Set the layout
+     * @param {Object} value - New layout object
+     */
+    set layout(value: Object);
+    /**
+     * Get the current layout
+     * @returns {Object} Current layout object
+     */
+    get layout(): Object;
+    /**
+     * Set validation messages for fields
+     * @param {Object} value - Validation object with field paths as keys
+     */
+    set validation(value: Object);
+    /**
+     * Get the current validation state
+     * @returns {Object} Current validation object
+     */
+    get validation(): Object;
+    /**
+     * Update a specific field value
+     * @param {string} path - Field path (e.g., 'count', 'settings/distance')
+     * @param {any} value - New value
+     */
+    updateField(path: string, value: any): void;
+    /**
+     * Get a field value by path
+     * @param {string} path - Field path
+     * @returns {any} Field value
+     */
+    getValue(path: string): any;
+    /**
+     * Set validation message for a specific field
+     * @param {string} fieldPath - Field path (without '#/' prefix)
+     * @param {Object|null} message - Validation message object or null to clear
+     * @param {string} message.state - Message state: 'error', 'warning', 'info', 'success'
+     * @param {string} message.text - Message text content
+     */
+    setFieldValidation(fieldPath: string, message: Object | null): void;
+    /**
+     * Clear all validation messages
+     */
+    clearValidation(): void;
+    /**
+     * Reset form to initial state
+     */
+    reset(): void;
+    #private;
+}
+export type FormElement = {
+    /**
+     * - JSON Pointer path (e.g., '#/email', '#/user/name')
+     */
+    scope: string;
+    /**
+     * - Input type (text, number, range, checkbox, select, etc.)
+     */
+    type: string;
+    /**
+     * - Current value from data
+     */
+    value: any;
+    /**
+     * - Whether to use custom child snippet (from layout)
+     */
+    override: boolean;
+    /**
+     * - Merged properties from schema + layout + validation
+     */
+    props: {
+        label?: string | undefined;
+        description?: string | undefined;
+        placeholder?: string | undefined;
+        required?: boolean | undefined;
+        min?: number | undefined;
+        max?: number | undefined;
+        message?: {
+            /**
+             * - Message state: 'error', 'warning', 'info', 'success'
+             */
+            state?: string | undefined;
+            /**
+             * - Message text content
+             */
+            text?: string | undefined;
+        } | undefined;
+    };
+};

package/dist/src/lib/deprecated/nested.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Flattens an object into a flat object
+ *
+ * @param {Object} input - The object to flatten
+ * @param {String} scope - The scope of the object
+ */
+export function flattenObject(input: Object, scope?: string): any;
+/**
+ * Flattens an object into an array of key-value pairs
+ *
+ * @param {Object} input - The object to flatten
+ * @param {String} scope - The scope of the object
+ */
+export function flattenAttributes(input: Object, scope?: string): {
+    key: string;
+    value: any;
+    type: string;
+    scope: string;
+}[];
+/**
+ * Derives a nested schema from an object
+ *
+ * @param {Object} input - The object to derive the schema from
+ * @param {String} scope - The scope of the object
+ * @returns {Object} The derived schema
+ */
+export function deriveNestedSchema(input: Object, scope?: string): Object;
+/**
+ * Flattens an element into a flat object
+ *
+ * @param {Object} element - The element to flatten
+ */
+export function flattenElement(element: Object): any;
+/**
+ * Generates an index array referencing the input data
+ *
+ * @param {Object} data - The flat object to index
+ * @param {String} key - The key to use as index
+ */
+export function generateIndex(data: Object, key?: string): any;
+/**
+ * Generates a tree table from the input data
+ *
+ * @param {Object} data - The data to generate the tree table from
+ * @param {String} key - The key to use as index
+ * @param {Boolean} ellipsis - Whether to truncate the value
+ */
+export function generateTreeTable(data: Object, key?: string, ellipsis?: boolean): any;

package/dist/src/lib/deprecated/nested.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/deprecated/validator.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Get a validator function that takes a regex expression and returns a validation function
+ *
+ * @param {string|RegExp} pattern
+ * @returns {import('./types').ValidationFunction}
+ */
+export function getPatternValidator(pattern: string | RegExp): any;
+/**
+ * Get a validator function that takes a min and max value and returns a validation function
+ *
+ * @param {number} min
+ * @param {number} max
+ * @returns {import('./types').ValidationFunction}
+ */
+export function getRangeValidator(min: number, max: number): any;
+/**
+ * Get a validator function that takes a type and returns a validation function
+ *
+ * @param {string} type
+ * @returns {import('./types').ValidationFunction}
+ * @throws {Error} - If the type is invalid
+ */
+export function getTypeValidator(type: string): any;
+/**
+ * Create a custom Svelte store with validation rules.
+ * @param {*} value - The initial value for the store.
+ * @param {Array<import('./types').ValidationRule>} rules - An array of validation rules.
+ * @returns {import('svelte').Writable<import('./types').ValidationResult>} - The custom Svelte store.
+ */
+export function verifiable(input: any, rules: Array<any>): import("svelte").Writable<any>;

package/dist/src/lib/deprecated/validator.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/fields.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Find an attribute in a schema by path
+ * @param {string} scope
+ * @param {import('../types').DataSchema} schema
+ * @returns {import('../types').LayoutSchema}
+ * @throws {Error} Invalid path
+ */
+export function findAttributeByPath(scope: string, schema: import("../types").DataSchema): import("../types").LayoutSchema;
+/**
+ * Get combined schema and layout
+ * @param {*} data
+ * @param {import('../types').DataSchema} schema
+ * @param {import('../types').LayoutSchema} layout
+ * @returns {import('../types').LayoutSchema}
+ */
+export function getSchemaWithLayout(schema: import("../types").DataSchema, layout: import("../types").LayoutSchema): import("../types").LayoutSchema;

package/dist/src/lib/fields.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/index.d.ts

@@ -0,0 +1,7 @@
+export { FormBuilder } from "./builder.svelte.js";
+export { default as FormRenderer } from "./FormRenderer.svelte";
+export { default as Input } from "./Input.svelte";
+export * from "./schema.js";
+export * from "./layout.js";
+export * from "./fields.js";
+export { validateField, validateAll, createMessage, patterns } from "./validation.js";

package/dist/src/lib/layout.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Derives a layout from a given value.
+ * @param {any} value
+ * @param {string} scope
+ * @returns {import('../types').DataLayout}
+ */
+export function deriveLayoutFromValue(value: any, scope?: string): import("../types").DataLayout;

package/dist/src/lib/schema.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Derives a schema from a given value.
+ *
+ * @param {any} data
+ * @returns {import('../types').DataSchema}
+ */
+export function deriveSchemaFromValue(data: any): import("../types").DataSchema;

package/dist/src/lib/validation.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Create validation messages for informational purposes
+ * @param {string} fieldPath - Field path
+ * @param {string} state - Message state ('info', 'warning', 'success')
+ * @param {string} text - Message text
+ * @returns {Object} Field path to message mapping
+ */
+export function createMessage(fieldPath: string, state: string, text: string): Object;
+/**
+ * Validate a single field value against its schema
+ * @param {any} value - Field value to validate
+ * @param {Object} fieldSchema - Field schema definition
+ * @param {string} [fieldLabel] - Field label for error messages
+ * @returns {ValidationMessage|null} Validation message or null if valid
+ */
+export function validateField(value: any, fieldSchema: Object, fieldLabel?: string): ValidationMessage | null;
+/**
+ * Validate all fields in a data object
+ * @param {Object} data - Data object to validate
+ * @param {Object} schema - Schema object with properties
+ * @param {Object} layout - Layout object with element definitions
+ * @returns {Object} Validation results keyed by field path
+ */
+export function validateAll(data: Object, schema: Object, layout: Object): Object;
+export namespace patterns {
+    let email: RegExp;
+    let phone: RegExp;
+    let url: RegExp;
+    let zipCode: RegExp;
+    let creditCard: RegExp;
+}
+export type ValidationMessage = {
+    /**
+     * - Message state: 'error', 'warning', 'info', 'success'
+     */
+    state: string;
+    /**
+     * - Message text content
+     */
+    text: string;
+};

package/dist/src/types.d.ts

@@ -0,0 +1,5 @@
+export namespace types {
+    let string: import("svelte/legacy").LegacyComponentType;
+    let integer: import("svelte/legacy").LegacyComponentType;
+    let phone: import("svelte/legacy").LegacyComponentType;
+}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@rokkit/forms",
+  "version": "1.0.0-next.122",
+  "module": "src/index.js",
+  "author": "Jerry Thomas <me@jerrythomas.name>",
+  "license": "MIT",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prepublishOnly": "tsc --project tsconfig.build.json",
+    "clean": "rm -rf dist",
+    "build": "bun clean && bun prepublishOnly"
+  },
+  "files": [
+    "src/**/*.js",
+    "src/**/*.svelte",
+    "dist/**/*.d.ts"
+  ],
+  "exports": {
+    "./src": "./src",
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./src/index.js",
+      "svelte": "./src/index.js"
+    }
+  },
+  "dependencies": {
+    "@rokkit/core": "latest",
+    "@rokkit/states": "latest",
+    "@rokkit/ui": "latest",
+    "@rokkit/bits-ui": "latest",
+    "ramda": "^0.30.1",
+    "valibot": "^1.1.0"
+  }
+}

package/src/DataEditor.svelte

@@ -0,0 +1,30 @@
+<script>
+	import { setContext } from 'svelte'
+	import { types } from './input/types'
+	import Wrapper from './wrappers/Wrapper.svelte'
+	import Item from './Item.svelte'
+	import Tabs from './Tabs.svelte'
+	import FieldLayout from './FieldLayout.svelte'
+	import { noop } from '@rokkit/core'
+
+	const registry = $state({})
+	setContext('registry', registry)
+
+	import { deriveSchemaFromValue, deriveLayoutFromValue, getSchemaWithLayout } from './lib'
+
+	let { value, schema = null, layout = null, using = {}, onchange = noop } = $props()
+
+	registry.editors = { ...types, ...using?.editors }
+	registry.components = { default: Item, ...using?.components }
+	registry.wrappers = { default: Wrapper, ...using?.wrappers }
+	registry.navigators = { default: Tabs, ...using?.navigators }
+
+	let schemaWithLayout = $derived.by(() => {
+		return getSchemaWithLayout(
+			schema ?? deriveSchemaFromValue(value),
+			layout ?? deriveLayoutFromValue(value)
+		)
+	})
+</script>
+
+<FieldLayout schema={schemaWithLayout} bind:value {onchange} />

package/src/FieldLayout.svelte

@@ -0,0 +1,48 @@
+<script>
+	import { getContext } from 'svelte'
+	import { omit } from 'ramda'
+	import InputField from './input/InputField.svelte'
+	import FieldLayout from './FieldLayout.svelte'
+
+	// const dispatch = createEventDispatcher()
+	const registry = getContext('registry')
+
+	export let value = {}
+	export let schema = {}
+	export let path = []
+
+	function handle() {
+		dispatch('change', value)
+	}
+
+	let Wrapper = registry.wrappers[schema.wrapper] ?? registry.wrappers.default
+	let wrapperProps = omit(['wrapper', 'elements', 'key'], schema)
+</script>
+
+{#if !Array.isArray(schema.elements)}
+	<error> Invalid schema. Expected schema to include an 'elements' array. </error>
+{:else}
+	<Wrapper {...wrapperProps}>
+		{#each schema.elements as item, index (index)}
+			{@const elementPath = item.key ? [...path, item.key] : path}
+			{@const props = { ...item.props, path: elementPath }}
+			{@const nested = Array.isArray(item.elements) && item.elements.length > 0}
+			{@const Component = item.component
+				? (registry.components[item.component] ?? registry.components.default)
+				: null}
+
+			{#if nested}
+				{#if item.key}
+					<FieldLayout {...props} schema={item} bind:value={value[item.key]} on:change={handle} />
+				{:else}
+					<FieldLayout {...props} schema={item} bind:value on:change={handle} />
+				{/if}
+			{:else if Component}
+				<Component {...item.props} value={item.key ? value[item.key] : null} />
+			{:else}
+				{@const name = elementPath.join('.')}
+				<InputField {name} bind:value={value[item.key]} {...item.props} on:change={handle} />
+			{/if}
+		{/each}
+	</Wrapper>
+{/if}