@dmitryvim/form-builder 0.1.42 → 0.2.1

package/dist/types/components/container.d.ts

@@ -0,0 +1,15 @@
+import type { ContainerElement, RenderContext, ComponentContext, ValidationResult, Element } from "../types/index.js";
+export declare function setRenderElement(fn: (element: any, ctx: RenderContext) => HTMLElement): void;
+export declare function renderSingleContainerElement(element: ContainerElement, ctx: RenderContext, wrapper: HTMLElement, pathKey: string): void;
+export declare function renderMultipleContainerElement(element: ContainerElement, ctx: RenderContext, wrapper: HTMLElement, _pathKey: string): void;
+export declare function setValidateElement(fn: (element: Element, ctx: {
+    path: string;
+}, customScopeRoot?: HTMLElement | null) => any): void;
+/**
+ * Validate container field and return extracted value with errors
+ */
+export declare function validateContainerElement(element: Element, key: string, context: ComponentContext): ValidationResult;
+/**
+ * Update container field value in DOM without re-render
+ */
+export declare function updateContainerField(element: Element, fieldPath: string, value: any, context: ComponentContext): void;

package/dist/types/components/file.d.ts

@@ -0,0 +1,26 @@
+import type { FileElement, FilesElement, RenderContext, ComponentContext, ValidationResult, Element } from "../types/index.js";
+import type { State } from "../types/state.js";
+interface FileDeps {
+    picker: HTMLInputElement;
+    fileUploadHandler: () => void;
+    dragHandler: (files: FileList) => void;
+}
+export declare function renderFilePreview(container: HTMLElement, resourceId: string, state: State, options?: {
+    fileName?: string;
+    isReadonly?: boolean;
+    deps?: FileDeps | null;
+}): Promise<void>;
+export declare function renderFilePreviewReadonly(resourceId: string, state: State, fileName?: string): Promise<HTMLElement>;
+export declare function renderResourcePills(container: HTMLElement, rids: string[] | null, state: State, onRemove: ((rid: string) => void) | null): void;
+export declare function renderFileElement(element: FileElement, ctx: RenderContext, wrapper: HTMLElement, pathKey: string): void;
+export declare function renderFilesElement(element: FilesElement, ctx: RenderContext, wrapper: HTMLElement, pathKey: string): void;
+export declare function renderMultipleFileElement(element: FileElement, ctx: RenderContext, wrapper: HTMLElement, pathKey: string): void;
+/**
+ * Validate file field and return extracted value with errors
+ */
+export declare function validateFileElement(element: Element, key: string, context: ComponentContext): ValidationResult;
+/**
+ * Update file field value in DOM without re-render
+ */
+export declare function updateFileField(element: Element, fieldPath: string, value: any, context: ComponentContext): void;
+export {};

package/dist/types/components/group.d.ts

@@ -0,0 +1,24 @@
+import type { GroupElement, RenderContext, ComponentContext, ValidationResult, Element } from "../types/index.js";
+export declare function setRenderElement(_fn: (element: any, ctx: RenderContext) => HTMLElement): void;
+/**
+ * Renders a group element by translating it to a ContainerElement
+ * and delegating to container rendering functions.
+ *
+ * This maintains backward compatibility with the legacy group type
+ * while eliminating code duplication.
+ *
+ * @deprecated Use type: "container" with multiple: true instead of type: "group" with repeat: {min, max}
+ */
+export declare function renderGroupElement(element: GroupElement, ctx: RenderContext, wrapper: HTMLElement, pathKey: string): void;
+export { renderGroupElement as renderRepeatableGroup };
+export { renderGroupElement as renderSingleGroup };
+/**
+ * Validate group field by delegating to container validation
+ * @deprecated Use validateContainerElement with type: "container" instead
+ */
+export declare function validateGroupElement(element: Element, key: string, context: ComponentContext): ValidationResult;
+/**
+ * Update group field by delegating to container update
+ * @deprecated Use updateContainerField with type: "container" instead
+ */
+export declare function updateGroupField(element: Element, fieldPath: string, value: any, context: ComponentContext): void;

package/dist/types/components/index.d.ts

@@ -0,0 +1,11 @@
+import type { Element, RenderContext } from "../types/index.js";
+import { renderTextElement, renderMultipleTextElement } from "./text.js";
+import { renderTextareaElement, renderMultipleTextareaElement } from "./textarea.js";
+import { renderNumberElement, renderMultipleNumberElement } from "./number.js";
+import { renderSelectElement, renderMultipleSelectElement } from "./select.js";
+import { renderFileElement, renderFilesElement, renderMultipleFileElement } from "./file.js";
+import { renderSingleContainerElement, renderMultipleContainerElement, setValidateElement as setContainerValidateElement } from "./container.js";
+import { renderGroupElement } from "./group.js";
+export declare function renderElement(element: Element, ctx: RenderContext): HTMLElement;
+export { setContainerValidateElement };
+export { renderTextElement, renderMultipleTextElement, renderTextareaElement, renderMultipleTextareaElement, renderNumberElement, renderMultipleNumberElement, renderSelectElement, renderMultipleSelectElement, renderFileElement, renderFilesElement, renderMultipleFileElement, renderSingleContainerElement, renderMultipleContainerElement, renderGroupElement, };

package/dist/types/components/number.d.ts

@@ -0,0 +1,11 @@
+import type { NumberElement, RenderContext, ComponentContext, ValidationResult } from "../types/index.js";
+export declare function renderNumberElement(element: NumberElement, ctx: RenderContext, wrapper: HTMLElement, pathKey: string): void;
+export declare function renderMultipleNumberElement(element: NumberElement, ctx: RenderContext, wrapper: HTMLElement, pathKey: string): void;
+/**
+ * Validate number input field and return extracted value with errors
+ */
+export declare function validateNumberElement(element: NumberElement, key: string, context: ComponentContext): ValidationResult;
+/**
+ * Update number field value in DOM without re-render
+ */
+export declare function updateNumberField(element: NumberElement, fieldPath: string, value: any, context: ComponentContext): void;

package/dist/types/components/registry.d.ts

@@ -0,0 +1,15 @@
+import type { Element, ComponentContext, ValidationResult, ComponentOperations } from "../types/index.js";
+/**
+ * Get component operations for a given element type
+ */
+export declare function getComponentOperations(elementType: string): ComponentOperations | null;
+/**
+ * Validate element using component-specific validator
+ * Falls back to legacy implementation if component not yet migrated
+ */
+export declare function validateElementWithComponent(element: Element, key: string, context: ComponentContext): ValidationResult | null;
+/**
+ * Update element using component-specific updater
+ * Falls back to legacy implementation if component not yet migrated
+ */
+export declare function updateElementWithComponent(element: Element, fieldPath: string, value: any, context: ComponentContext): boolean;

package/dist/types/components/select.d.ts

@@ -0,0 +1,11 @@
+import type { SelectElement, RenderContext, ComponentContext, ValidationResult, Element } from "../types/index.js";
+export declare function renderSelectElement(element: SelectElement, ctx: RenderContext, wrapper: HTMLElement, pathKey: string): void;
+export declare function renderMultipleSelectElement(element: SelectElement, ctx: RenderContext, wrapper: HTMLElement, pathKey: string): void;
+/**
+ * Validate select field and return extracted value with errors
+ */
+export declare function validateSelectElement(element: Element, key: string, context: ComponentContext): ValidationResult;
+/**
+ * Update select field value in DOM without re-render
+ */
+export declare function updateSelectField(element: Element, fieldPath: string, value: any, context: ComponentContext): void;

package/dist/types/components/text.d.ts

@@ -0,0 +1,11 @@
+import type { TextElement, RenderContext, ComponentContext, ValidationResult } from "../types/index.js";
+export declare function renderTextElement(element: TextElement, ctx: RenderContext, wrapper: HTMLElement, pathKey: string): void;
+export declare function renderMultipleTextElement(element: TextElement, ctx: RenderContext, wrapper: HTMLElement, pathKey: string): void;
+/**
+ * Validate text input field and return extracted value with errors
+ */
+export declare function validateTextElement(element: TextElement, key: string, context: ComponentContext): ValidationResult;
+/**
+ * Update text field value in DOM without re-render
+ */
+export declare function updateTextField(element: TextElement, fieldPath: string, value: any, context: ComponentContext): void;

package/dist/types/components/textarea.d.ts

@@ -0,0 +1,11 @@
+import type { TextareaElement, RenderContext, ComponentContext, ValidationResult } from "../types/index.js";
+export declare function renderTextareaElement(element: TextareaElement, ctx: RenderContext, wrapper: HTMLElement, pathKey: string): void;
+export declare function renderMultipleTextareaElement(element: TextareaElement, ctx: RenderContext, wrapper: HTMLElement, pathKey: string): void;
+/**
+ * Validate textarea element - delegates to text validator since they share validation logic
+ */
+export declare function validateTextareaElement(element: TextareaElement, key: string, context: ComponentContext): ValidationResult;
+/**
+ * Update textarea field - delegates to text updater since they share update logic
+ */
+export declare function updateTextareaField(element: TextareaElement, fieldPath: string, value: any, context: ComponentContext): void;

package/dist/types/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Form Builder - Instance-Based API
+ *
+ * Zero-dependency JSON Schema form builder library with multi-instance support
+ */
+import { FormBuilderInstance } from "./instance/FormBuilderInstance.js";
+import { validateSchema } from "./utils/validation.js";
+export type { SelectOption, ElementAction, BaseElement, TextElement, TextareaElement, NumberElement, SelectElement, FileElement, FilesElement, ContainerElement, GroupElement, Element, Schema, ExternalAction, FormData, RenderContext, Translations, Locale, Config, ResourceMetadata, State, } from "./types/index.js";
+export type { Theme } from "./styles/theme.js";
+export { defaultTheme, exampleThemes } from "./styles/theme.js";
+/**
+ * Factory function for creating new form instances
+ *
+ * @param config Optional configuration for the instance
+ * @returns FormBuilderInstance
+ *
+ * @example
+ * const form = createFormBuilder({
+ *   uploadFile: async (file) => {
+ *     // Upload logic
+ *     return "resource-id-123";
+ *   },
+ *   downloadFile: (resourceId, fileName) => {
+ *     // Download logic
+ *   }
+ * });
+ *
+ * form.renderForm(containerElement, schema, prefillData);
+ */
+export declare function createFormBuilder(config?: Partial<import("./types/index.js").Config>): FormBuilderInstance;
+export { FormBuilderInstance };
+export { validateSchema };
+export default FormBuilderInstance;

package/dist/types/instance/FormBuilderInstance.d.ts

@@ -0,0 +1,134 @@
+import type { Schema, ExternalAction, FormData as FormDataResult, Config, State } from "../types/index.js";
+/**
+ * FormBuilderInstance - Encapsulates all form state and operations
+ * Allows multiple independent forms on the same page without state collisions
+ */
+export declare class FormBuilderInstance {
+    private state;
+    private instanceId;
+    constructor(config?: Partial<Config>);
+    /**
+     * Get instance ID (useful for debugging and resource prefixing)
+     */
+    getInstanceId(): string;
+    /**
+     * Get current state (for advanced use cases)
+     */
+    getState(): State;
+    /**
+     * Set the form root element
+     */
+    setFormRoot(element: HTMLElement): void;
+    /**
+     * Configure the form builder
+     */
+    configure(config: Partial<Config>): void;
+    /**
+     * Set file upload handler
+     */
+    setUploadHandler(uploadFn: ((file: File) => Promise<string>) | null): void;
+    /**
+     * Set file download handler
+     */
+    setDownloadHandler(downloadFn: ((resourceId: string, fileName: string) => void) | null): void;
+    /**
+     * Set thumbnail generation handler
+     */
+    setThumbnailHandler(thumbnailFn: ((resourceId: string) => Promise<string | null>) | null): void;
+    /**
+     * Set action handler
+     */
+    setActionHandler(actionFn: ((value: string, key: string, relatedField: string | null) => void) | null): void;
+    /**
+     * Set mode (edit or readonly)
+     */
+    setMode(mode: "edit" | "readonly"): void;
+    /**
+     * Set locale
+     */
+    setLocale(locale: "en" | "ru"): void;
+    /**
+     * Trigger onChange callbacks with debouncing
+     * @param fieldPath - Optional field path for field-specific change events
+     * @param fieldValue - Optional field value for field-specific change events
+     */
+    triggerOnChange(fieldPath?: string, fieldValue?: any): void;
+    /**
+     * Register an external action that will be displayed as a button
+     * External actions can be form-level (no related_field) or field-level (with related_field)
+     * @param action - External action definition
+     */
+    registerAction(action: ExternalAction): void;
+    /**
+     * Find the DOM element corresponding to a field path (instance-scoped)
+     */
+    private findFormElementByFieldPath;
+    /**
+     * Find schema element by field path
+     */
+    private findSchemaElement;
+    /**
+     * Resolve action label from schema or external action
+     */
+    private resolveActionLabel;
+    /**
+     * Render form-level action buttons at the bottom of the form
+     */
+    private renderFormLevelActions;
+    /**
+     * Render external action buttons for fields
+     */
+    renderExternalActions(): void;
+    /**
+     * Render form from schema
+     */
+    renderForm(root: HTMLElement, schema: Schema, prefill?: Record<string, any>, actions?: ExternalAction[]): void;
+    /**
+     * Validate form and extract data
+     * This is a complete copy of the validateForm logic from form-builder.ts
+     * but uses instance state instead of global state
+     */
+    validateForm(skipValidation?: boolean): FormDataResult;
+    /**
+     * Get form data
+     */
+    getFormData(): FormDataResult;
+    /**
+     * Submit form with validation
+     */
+    submitForm(): FormDataResult;
+    /**
+     * Save draft without validation
+     */
+    saveDraft(): FormDataResult;
+    /**
+     * Clear the form - reset all field values to empty while preserving form structure
+     * This is done by re-rendering the form with empty data
+     */
+    clearForm(): void;
+    /**
+     * Build prefill data for hidden fields only
+     * Hidden fields should retain their values when clearing
+     */
+    private buildHiddenFieldsData;
+    /**
+     * Set form data - update multiple fields without full re-render
+     * @param data - Object with field paths and their values
+     */
+    setFormData(data: Record<string, any>): void;
+    /**
+     * Update a single field by path without full re-render
+     * @param fieldPath - Field path (e.g., "email", "address.city", "items[0].name")
+     * @param value - New value for the field
+     */
+    updateField(fieldPath: string, value: any): void;
+    /**
+     * Update field value in DOM based on field type
+     * Delegates to component-specific updaters via registry
+     */
+    private updateFieldValue;
+    /**
+     * Destroy instance and clean up resources
+     */
+    destroy(): void;
+}

package/dist/types/instance/state.d.ts

@@ -0,0 +1,13 @@
+import type { State, Config } from "../types/index.js";
+/**
+ * Default configuration for new instances
+ */
+export declare const defaultConfig: Config;
+/**
+ * Create a new isolated state object for a FormBuilderInstance
+ */
+export declare function createInstanceState(config?: Partial<Config>): State;
+/**
+ * Generate unique instance ID for resource prefixing
+ */
+export declare function generateInstanceId(): string;

package/dist/types/styles/theme.d.ts

@@ -0,0 +1,63 @@
+export interface Theme {
+    primaryColor: string;
+    primaryHoverColor: string;
+    errorColor: string;
+    errorHoverColor: string;
+    successColor: string;
+    borderColor: string;
+    borderHoverColor: string;
+    borderFocusColor: string;
+    backgroundColor: string;
+    backgroundHoverColor: string;
+    backgroundReadonlyColor: string;
+    textColor: string;
+    textSecondaryColor: string;
+    textPlaceholderColor: string;
+    textDisabledColor: string;
+    buttonBgColor: string;
+    buttonTextColor: string;
+    buttonBorderColor: string;
+    buttonHoverBgColor: string;
+    buttonHoverBorderColor: string;
+    actionBgColor: string;
+    actionTextColor: string;
+    actionBorderColor: string;
+    actionHoverBgColor: string;
+    actionHoverBorderColor: string;
+    fileUploadBgColor: string;
+    fileUploadBorderColor: string;
+    fileUploadTextColor: string;
+    fileUploadHoverBorderColor: string;
+    inputPaddingX: string;
+    inputPaddingY: string;
+    borderRadius: string;
+    borderWidth: string;
+    fontSize: string;
+    fontSizeSmall: string;
+    fontSizeExtraSmall: string;
+    fontFamily: string;
+    fontWeightNormal: string;
+    fontWeightMedium: string;
+    focusRingWidth: string;
+    focusRingColor: string;
+    focusRingOpacity: string;
+    transitionDuration: string;
+}
+export declare const defaultTheme: Theme;
+/**
+ * Generate CSS custom properties from theme object
+ * Prefixes all variables with --fb- to avoid conflicts
+ */
+export declare function generateCSSVariables(theme: Partial<Theme>): string;
+/**
+ * Inject theme CSS variables into a container element or create a style tag
+ */
+export declare function injectThemeVariables(container: HTMLElement, theme: Partial<Theme>): void;
+/**
+ * Example theme configurations for documentation
+ */
+export declare const exampleThemes: {
+    default: Theme;
+    dark: Theme;
+    klein: Theme;
+};

package/dist/types/types/component-operations.d.ts

@@ -0,0 +1,45 @@
+import type { Element } from "./schema.js";
+import type { State } from "./state.js";
+import type { FormBuilderInstance } from "../instance/FormBuilderInstance.js";
+/**
+ * Context passed to component validation and update functions
+ */
+export interface ComponentContext {
+    /** DOM element scope for queries (usually formRoot or container) */
+    scopeRoot: HTMLElement;
+    /** Form state */
+    state: State;
+    /** Form builder instance reference */
+    instance: FormBuilderInstance;
+    /** Path prefix for nested fields */
+    path: string;
+    /** Skip validation checks (for draft mode) */
+    skipValidation?: boolean;
+}
+/**
+ * Validation result from a component validator
+ */
+export interface ValidationResult {
+    /** Extracted data value */
+    value: any;
+    /** Validation errors encountered */
+    errors: string[];
+}
+/**
+ * Component validator function type
+ * Extracts data from DOM and validates it based on schema element rules
+ */
+export type ComponentValidator = (element: Element, key: string, context: ComponentContext) => ValidationResult;
+/**
+ * Component updater function type
+ * Updates DOM with new value without full re-render
+ */
+export type ComponentUpdater = (element: Element, fieldPath: string, value: any, context: ComponentContext) => void;
+/**
+ * Component operations registry
+ * Maps element type to validator and updater functions
+ */
+export interface ComponentOperations {
+    validate: ComponentValidator;
+    update: ComponentUpdater;
+}

package/dist/types/types/config.d.ts

@@ -0,0 +1,47 @@
+import type { Theme } from "../styles/theme.js";
+export interface Translations {
+    addElement: string;
+    removeElement: string;
+    uploadText: string;
+    dragDropText: string;
+    dragDropTextSingle: string;
+    clickDragText: string;
+    noFileSelected: string;
+    noFilesSelected: string;
+    downloadButton: string;
+}
+export type Locale = "en" | "ru";
+export interface Config {
+    uploadFile: ((file: File) => Promise<string>) | null;
+    downloadFile: ((resourceId: string, fileName: string) => void) | null;
+    getThumbnail: ((resourceId: string) => Promise<string | null>) | null;
+    getDownloadUrl: ((resourceId: string) => string | null) | null;
+    actionHandler: ((value: string, key: string, relatedField: string | null) => void) | null;
+    onChange: ((data: {
+        valid: boolean;
+        errors: string[];
+        data: Record<string, any>;
+    }) => void) | null;
+    onFieldChange: ((fieldPath: string, value: any, formData: {
+        valid: boolean;
+        errors: string[];
+        data: Record<string, any>;
+    }) => void) | null;
+    onThumbnailError: ((error: Error, resourceId: string) => void) | null;
+    onUploadError: ((error: Error, file: File) => void) | null;
+    onDownloadError: ((error: Error, resourceId: string, fileName: string) => void) | null;
+    debounceMs: number;
+    enableFilePreview: boolean;
+    maxPreviewSize: string;
+    readonly: boolean;
+    locale: Locale;
+    translations: Record<Locale, Translations>;
+    theme: Partial<Theme>;
+}
+export interface ResourceMetadata {
+    name: string;
+    type: string;
+    size: number;
+    uploadedAt: Date;
+    file?: File;
+}

package/dist/types/types/index.d.ts

@@ -0,0 +1,4 @@
+export type { SelectOption, ElementAction, BaseElement, TextElement, TextareaElement, NumberElement, SelectElement, FileElement, FilesElement, ContainerElement, GroupElement, Element, Schema, ExternalAction, FormData, RenderContext, } from "./schema.js";
+export type { Translations, Locale, Config, ResourceMetadata, } from "./config.js";
+export type { State } from "./state.js";
+export type { ComponentContext, ValidationResult, ComponentValidator, ComponentUpdater, ComponentOperations, } from "./component-operations.js";

package/dist/types/types/schema.d.ts

@@ -0,0 +1,115 @@
+export interface SelectOption {
+    value: string;
+    label: string;
+}
+export interface ElementAction {
+    key: string;
+    label: string;
+}
+export interface BaseElement {
+    type: string;
+    key: string;
+    label?: string;
+    description?: string;
+    hint?: string;
+    required?: boolean;
+    hidden?: boolean;
+    default?: any;
+    actions?: ElementAction[];
+}
+export interface TextElement extends BaseElement {
+    type: "text";
+    pattern?: string;
+    minLength?: number;
+    maxLength?: number;
+    placeholder?: string;
+    multiple?: boolean;
+    minCount?: number;
+    maxCount?: number;
+}
+export interface TextareaElement extends BaseElement {
+    type: "textarea";
+    rows?: number;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: string;
+    placeholder?: string;
+    multiple?: boolean;
+    minCount?: number;
+    maxCount?: number;
+}
+export interface NumberElement extends BaseElement {
+    type: "number";
+    min?: number;
+    max?: number;
+    decimals?: number;
+    step?: number;
+    placeholder?: string;
+    multiple?: boolean;
+    minCount?: number;
+    maxCount?: number;
+}
+export interface SelectElement extends BaseElement {
+    type: "select";
+    options: SelectOption[];
+    placeholder?: string;
+    multiple?: boolean;
+    minCount?: number;
+    maxCount?: number;
+}
+export interface FileElement extends BaseElement {
+    type: "file";
+    accept?: string | {
+        extensions: string[];
+    };
+    maxSize?: number;
+    multiple?: boolean;
+    minCount?: number;
+    maxCount?: number;
+}
+export interface FilesElement extends BaseElement {
+    type: "files";
+    accept?: string | {
+        extensions: string[];
+    };
+    maxSize?: number;
+    minCount?: number;
+    maxCount?: number;
+}
+export interface ContainerElement extends BaseElement {
+    type: "container";
+    elements: Element[];
+    multiple?: boolean;
+    minCount?: number;
+    maxCount?: number;
+}
+export interface GroupElement extends BaseElement {
+    type: "group";
+    elements: Element[];
+    repeat?: {
+        min?: number;
+        max?: number;
+    };
+}
+export type Element = TextElement | TextareaElement | NumberElement | SelectElement | FileElement | FilesElement | ContainerElement | GroupElement;
+export interface Schema {
+    version: string;
+    elements: Element[];
+}
+export interface ExternalAction {
+    key: string;
+    value: string;
+    related_field: string;
+    label?: string;
+}
+export interface FormData {
+    valid: boolean;
+    errors: string[];
+    data: Record<string, any>;
+}
+export interface RenderContext {
+    path: string;
+    prefill: Record<string, any>;
+    state: import("./state.js").State;
+    instance?: any;
+}

package/dist/types/types/state.d.ts

@@ -0,0 +1,11 @@
+import type { Schema, ExternalAction } from "./schema.js";
+import type { Config, ResourceMetadata } from "./config.js";
+export interface State {
+    schema: Schema | null;
+    formRoot: HTMLElement | null;
+    resourceIndex: Map<string, ResourceMetadata>;
+    externalActions: ExternalAction[] | null;
+    version: string;
+    config: Config;
+    debounceTimer: number | null;
+}

package/dist/types/utils/helpers.d.ts

@@ -0,0 +1,4 @@
+export declare function isPlainObject(obj: any): obj is Record<string, any>;
+export declare function pathJoin(base: string, key: string): string;
+export declare function pretty(obj: any): string;
+export declare function clear(node: HTMLElement): void;

package/dist/types/utils/styles.d.ts

@@ -0,0 +1,21 @@
+import type { State } from "../types/index.js";
+/**
+ * Apply themed input styles to an HTMLInputElement, HTMLTextAreaElement, or HTMLSelectElement
+ */
+export declare function applyInputStyles(element: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, state: State, className?: string): void;
+/**
+ * Apply themed hint/description styles to a paragraph element
+ */
+export declare function applyHintStyles(element: HTMLParagraphElement): void;
+/**
+ * Create a styled add button with theme support
+ */
+export declare function createAddButton(text: string, onClick: () => void): HTMLButtonElement;
+/**
+ * Create a styled remove button with theme support
+ */
+export declare function createRemoveButton(text: string, onClick: () => void): HTMLButtonElement;
+/**
+ * Apply themed action button styles (for external actions in readonly mode)
+ */
+export declare function applyActionButtonStyles(button: HTMLButtonElement, isFormLevel?: boolean): void;

package/dist/types/utils/translation.d.ts

@@ -0,0 +1,8 @@
+import type { State } from "../types/state.js";
+/**
+ * Get translated string for a key
+ * @param key Translation key
+ * @param state Form state containing locale and translations
+ * @returns Translated string or key if not found
+ */
+export declare function t(key: string, state: State): string;

package/dist/types/utils/validation.d.ts

@@ -0,0 +1,2 @@
+export declare function makeFieldHint(element: any): string;
+export declare function validateSchema(schema: any): string[];