@maxal_studio/kratosjs-react 1.0.0

package/dist/components/TabsField.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { FieldProps } from '../types';
+import { SerializedComponent } from '@maxal_studio/kratosjs';
+export declare function TabsField({ schema: tabNodes, defaultTab, columns, mode, disabled, value, _recordData, description, operation, ...props }: FieldProps & {
+    /** Tab child components (each a serialized `tab` node with label/icon/schema). */
+    schema?: SerializedComponent[];
+    defaultTab?: number;
+    _recordData?: any;
+    operation?: 'create' | 'edit' | 'view';
+}): React.JSX.Element;

package/dist/components/TabsField.js

@@ -0,0 +1,214 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo, useRef } from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
+import { getFieldError } from '../utils/fieldErrors';
+import { FieldRenderer } from '../FieldRenderer';
+import { Icon } from './utils/Icon';
+import { getFieldLayoutClasses } from './utils/layoutHelpers';
+import { cn } from '../utils/classNames';
+import { evaluateCondition } from '../runtime/conditions';
+import { getChildComponents, isArrayScope, someComponent } from '../runtime/formTraversal';
+import { translate } from '../i18n/activeLocale';
+const isEmptyValue = (value) => value === undefined || value === null || value === '';
+/**
+ * Recursively check if a component or its nested components have validation errors.
+ * Generic over the children contract — works for any container, including plugins.
+ */
+function hasComponentErrors(component, errors) {
+    return someComponent(component, node => {
+        if (!node.name)
+            return false;
+        const fieldError = getFieldError(errors, node.name);
+        if (!fieldError)
+            return false;
+        // Array-scope containers (repeaters): the array itself or any item may have errors.
+        if (isArrayScope(node)) {
+            if (Array.isArray(fieldError)) {
+                return fieldError.some(itemErrors => itemErrors && Object.keys(itemErrors).length > 0);
+            }
+            return Object.keys(fieldError).length > 0;
+        }
+        // Ignore pure "required" errors here; required-emptiness is handled separately
+        // (based on current values) so a filled field doesn't keep its tab marked.
+        return fieldError.type !== 'required';
+    });
+}
+/**
+ * Check if a tab has any validation errors in its schema
+ */
+function hasTabErrors(tabSchema, errors) {
+    return tabSchema.some(component => hasComponentErrors(component, errors));
+}
+/**
+ * Check if a component is required
+ */
+/**
+ * Check if a component is required, evaluating conditional required logic
+ */
+function isComponentRequired(component, formValues, operation) {
+    // Check direct required property
+    const requiredProp = component.required;
+    // If required is a boolean
+    if (typeof requiredProp === 'boolean') {
+        return requiredProp;
+    }
+    // If required is a function (serialized), evaluate it
+    if (typeof requiredProp === 'string') {
+        return evaluateCondition(requiredProp, formValues, operation);
+    }
+    // Check validation rules for 'required' on the serialized validation object
+    const validation = component.validation;
+    if (validation && Array.isArray(validation.rules)) {
+        // Check for simple 'required' string rule
+        if (validation.rules.some(rule => rule === 'required')) {
+            return true;
+        }
+        // Check for conditional required rule objects
+        for (const rule of validation.rules) {
+            if (typeof rule === 'object' && rule.rule === 'required') {
+                // If there's a condition function, evaluate it
+                const condition = rule.condition;
+                if (typeof condition === 'string') {
+                    return evaluateCondition(condition, formValues, operation);
+                }
+                return true;
+            }
+        }
+    }
+    return false;
+}
+/**
+ * Recursively check if a component (or its descendants) is required and empty.
+ * Generic over the children contract.
+ */
+function hasRequiredEmptyField(component, formValues, operation) {
+    return someComponent(component, node => {
+        if (!node.name)
+            return false;
+        // Array-scope containers (repeaters): check required-empty fields within each item.
+        if (isArrayScope(node)) {
+            const items = formValues[node.name];
+            if (!Array.isArray(items))
+                return false;
+            const template = getChildComponents(node);
+            return items.some(item => template.some(field => field.name &&
+                isComponentRequired(field, item, operation) &&
+                isEmptyValue(item[field.name])));
+        }
+        if (isComponentRequired(node, formValues, operation)) {
+            return isEmptyValue(formValues[node.name]);
+        }
+        return false;
+    });
+}
+/**
+ * Check if a tab has any required empty fields
+ */
+function hasRequiredEmptyFieldsInTab(tabSchema, formValues, operation) {
+    return tabSchema.some(component => hasRequiredEmptyField(component, formValues, operation));
+}
+export function TabsField({ schema: tabNodes, defaultTab = 0, columns, mode, disabled, value, _recordData, description, operation, ...props }) {
+    const [activeTab, setActiveTab] = useState(defaultTab);
+    const isViewMode = mode === 'view';
+    // Inherit API configuration from parent so nested fields (e.g. FileUpload) work inside tabs
+    const apiBaseUrl = props.apiBaseUrl;
+    const resource = props.resource;
+    // Get form context for validation errors and values (only in edit mode)
+    const formContext = mode === 'edit' ? useFormContext() : null;
+    const errors = formContext?.formState?.errors || {};
+    const submitCount = formContext?.formState?.submitCount ?? 0;
+    // Validation indicators (red dots) only appear after a submit attempt, so they
+    // never nag while the user is still filling the form.
+    const hasSubmitted = submitCount > 0;
+    // Use useWatch to get reactive form values
+    const formValues = mode === 'edit' && formContext ? useWatch({ control: formContext.control }) || {} : {};
+    // Normalize the serialized `tab` child nodes into render-friendly tab descriptors.
+    const tabs = useMemo(() => (Array.isArray(tabNodes) ? tabNodes : []).map((node) => ({
+        label: node.label,
+        icon: node.icon,
+        schema: getChildComponents(node),
+    })), [tabNodes]);
+    // Find tabs with errors
+    const tabsWithErrors = useMemo(() => {
+        if (!tabs || isViewMode)
+            return new Set();
+        const errorTabs = new Set();
+        tabs.forEach((tab, index) => {
+            if (hasTabErrors(tab.schema || [], errors)) {
+                errorTabs.add(index);
+            }
+        });
+        return errorTabs;
+    }, [tabs, errors, isViewMode]);
+    // Find tabs with required empty fields
+    const tabsWithRequiredEmpty = useMemo(() => {
+        if (!tabs || isViewMode)
+            return new Set();
+        const requiredTabs = new Set();
+        tabs.forEach((tab, index) => {
+            if (hasRequiredEmptyFieldsInTab(tab.schema || [], formValues, operation)) {
+                requiredTabs.add(index);
+            }
+        });
+        return requiredTabs;
+    }, [tabs, formValues, isViewMode, operation]);
+    // Auto-open the first tab with validation errors — exactly ONCE per submit attempt.
+    // Keying on submitCount (not activeTab/errors) means the jump happens when the user
+    // submits and never again, so manual navigation afterwards is never hijacked.
+    const lastHandledSubmit = useRef(0);
+    useEffect(() => {
+        if (isViewMode || submitCount === 0 || submitCount === lastHandledSubmit.current)
+            return;
+        lastHandledSubmit.current = submitCount;
+        const firstErrorTab = tabs.findIndex((_tab, index) => tabsWithErrors.has(index));
+        if (firstErrorTab !== -1) {
+            setActiveTab(firstErrorTab);
+        }
+    }, [submitCount, tabs, tabsWithErrors, isViewMode]);
+    // In view mode, use _recordData if provided, otherwise use value
+    const recordData = mode === 'view' && _recordData ? _recordData : value || {};
+    // Layout classes for tab field stacks
+    const fieldLayoutClasses = getFieldLayoutClasses(columns);
+    if (!tabs || tabs.length === 0) {
+        return null;
+    }
+    // In view mode, show tabs (read-only but can switch tabs)
+    if (isViewMode) {
+        return (_jsxs("div", { className: "mb-6", children: [description && _jsx("p", { className: "mb-4 text-sm text-gray-600 dark:text-gray-400", children: description }), _jsx("div", { className: "flex border-b border-gray-200 dark:border-gray-700 mb-4 overflow-x-auto", children: tabs.map((tab, index) => (_jsx("button", { type: "button", onClick: () => setActiveTab(index), className: cn('px-4 py-2 font-medium text-sm whitespace-nowrap', 'border-b-2 -mb-px', 'focus:none', activeTab === index
+                            ? 'border-accent text-accent'
+                            : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'), "aria-selected": activeTab === index, role: "tab", children: _jsxs("span", { className: "inline-flex items-center gap-2", children: [tab.icon && _jsx(Icon, { name: tab.icon, className: "w-4 h-4" }), tab.label] }) }, index))) }), _jsx("div", { children: tabs[activeTab] && (_jsx("div", { className: fieldLayoutClasses, children: tabs[activeTab].schema?.map((field, fieldIndex) => {
+                            // Determine if this nested field/layout needs full record data context
+                            const needsRecordData = Boolean(field.needsRecordData) ||
+                                Boolean(field.schema && Array.isArray(field.schema));
+                            const nestedField = {
+                                ...field,
+                                disabled: disabled || field.disabled,
+                                mode: mode || field.mode,
+                                ...(needsRecordData && recordData ? { _recordData: recordData } : {}),
+                            };
+                            // For simple leaf fields with a name, pass their direct value in view mode
+                            const nestedValue = mode === 'view' && field.name && !needsRecordData
+                                ? recordData[field.name]
+                                : undefined;
+                            return (_jsx(FieldRenderer, { field: nestedField, mode: mode, value: nestedValue, apiBaseUrl: apiBaseUrl, resource: resource, operation: operation }, fieldIndex));
+                        }) })) })] }));
+    }
+    // Edit mode: render tabs with navigation
+    // Render all tabs but hide inactive ones so React Hook Form can validate them
+    return (_jsxs("div", { className: "my-6", children: [description && _jsx("p", { className: "mb-4 text-sm text-gray-600 dark:text-gray-400", children: description }), _jsx("div", { className: "flex border-b border-gray-200 dark:border-gray-700 mb-4 overflow-x-auto", children: tabs.map((tab, index) => {
+                    // Only flag tabs after a submit attempt, so the indicator reflects a real
+                    // failed validation rather than nagging while the user is still filling in.
+                    const showIndicator = hasSubmitted && (tabsWithErrors.has(index) || tabsWithRequiredEmpty.has(index));
+                    return (_jsx("button", { type: "button", onClick: () => setActiveTab(index), disabled: disabled, className: cn('px-4 py-2 font-medium text-sm transition-colors whitespace-nowrap relative', 'border-b-2 -mb-px', 'focus:none', disabled && 'opacity-60 cursor-not-allowed', activeTab === index
+                            ? 'border-accent text-accent '
+                            : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200', showIndicator && activeTab !== index && 'text-red-600 dark:text-red-400'), "aria-selected": activeTab === index, role: "tab", children: _jsxs("span", { className: "inline-flex items-center gap-2", children: [tab.icon && _jsx(Icon, { name: tab.icon, className: "w-4 h-4" }), tab.label, showIndicator && (_jsx("span", { className: "ml-1 w-2 h-2 rounded-full bg-red-500 dark:bg-red-400", "aria-label": translate('core:a11y.tab_errors') }))] }) }, index));
+                }) }), tabs.map((tab, tabIndex) => (_jsx("div", { role: "tabpanel", "aria-labelledby": `tab-${tabIndex}`, className: activeTab === tabIndex ? '' : 'hidden', children: _jsx("div", { className: fieldLayoutClasses, children: tab.schema?.map((field, fieldIndex) => {
+                        // Propagate disabled state and mode to nested fields
+                        const nestedField = {
+                            ...field,
+                            disabled: disabled || field.disabled,
+                            mode: mode || field.mode,
+                        };
+                        return (_jsx(FieldRenderer, { field: nestedField, mode: mode, apiBaseUrl: apiBaseUrl, resource: resource, operation: operation }, fieldIndex));
+                    }) }) }, tabIndex)))] }));
+}

package/dist/components/TagsInputField.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { FieldProps } from '../types';
+/**
+ * TagsInput field component
+ * Renders a tags input for managing arrays of simple values
+ */
+export declare function TagsInputField(props: FieldProps): React.JSX.Element;

package/dist/components/TagsInputField.js

@@ -0,0 +1,172 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { useFormContext, Controller } from 'react-hook-form';
+import { useValidation } from '../hooks/useValidation';
+import { HintDisplay } from './utils/HintDisplay';
+import { ViewFieldWrapper } from './utils/ViewFieldWrapper';
+import { cn } from '../utils/classNames';
+import { X, GripVertical, List } from 'lucide-react';
+import { translate } from '../i18n/activeLocale';
+/** View mode: trigger + popup when showInPopup is true */
+function TagsViewPopup({ tags, renderHtml }) {
+    const [open, setOpen] = useState(false);
+    const count = tags.length;
+    const label = count === 1 ? '1 tag' : `${count} tags`;
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", onClick: () => setOpen(true), className: cn('inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium', 'bg-accent-soft text-fg', 'hover:opacity-90 transition-opacity'), children: [_jsx(List, { className: "w-4 h-4 shrink-0" }), label] }), open && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-base opacity-80", "aria-hidden": true, onClick: () => setOpen(false) }), _jsxs("div", { role: "dialog", "aria-modal": "true", "aria-label": translate('core:tags.label'), className: cn('fixed left-1/2 top-1/2 z-50 w-[min(90vw,28rem)] max-h-[70vh] -translate-x-1/2 -translate-y-1/2', 'bg-surface rounded-xl shadow-xl border border-border', 'flex flex-col overflow-hidden'), children: [_jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border shrink-0", children: [_jsx("span", { className: "text-sm font-medium text-fg", children: label }), _jsx("button", { type: "button", onClick: () => setOpen(false), className: "p-1 rounded-lg text-fg-secondary hover:bg-hover transition-colors", "aria-label": translate('core:modal.close'), children: _jsx(X, { className: "w-5 h-5" }) })] }), _jsx("div", { className: "p-4 overflow-y-auto flex flex-wrap gap-2", children: tags.map((tag, index) => (_jsx("span", { className: "inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-accent-soft text-fg", children: renderHtml ? (_jsx("span", { className: "kratosjshtml-content", dangerouslySetInnerHTML: { __html: String(tag) } })) : (String(tag)) }, index))) })] })] }))] }));
+}
+/**
+ * TagsInput field component
+ * Renders a tags input for managing arrays of simple values
+ */
+export function TagsInputField(props) {
+    const { name, label, helperText, hint, hintIcon, hintColor, placeholder, disabled = false, mode, value, separator = ',', suggestions = [], minItems, maxItems, addable = true, deletable = true, reorderable = true, showInPopup = false, } = props;
+    // Determine if field should be treated as required (for minItems fallback)
+    let isRequired = props.required === true;
+    const validationRules = props.validation?.rules;
+    if (validationRules && Array.isArray(validationRules)) {
+        if (validationRules.some(rule => rule === 'required' || (typeof rule === 'object' && rule.rule === 'required'))) {
+            isRequired = true;
+        }
+    }
+    // Effective minItems: honor explicit minItems, otherwise infer from required
+    const effectiveMinItems = minItems !== undefined ? minItems : isRequired ? 1 : undefined;
+    const [inputValue, setInputValue] = useState('');
+    const [showSuggestions, setShowSuggestions] = useState(false);
+    const [draggedIndex, setDraggedIndex] = useState(null);
+    const [dragOverIndex, setDragOverIndex] = useState(null);
+    // View mode: render as comma-separated list or badges (or popup when showInPopup)
+    if (mode === 'view') {
+        const tags = Array.isArray(value) ? value : [];
+        if (tags.length === 0) {
+            return _jsx(ViewFieldWrapper, { label: label, children: "-" });
+        }
+        const renderHtml = props.renderHtml === true;
+        if (showInPopup) {
+            return (_jsx(ViewFieldWrapper, { label: label, children: _jsx(TagsViewPopup, { tags: tags, renderHtml: renderHtml }) }));
+        }
+        return (_jsx(ViewFieldWrapper, { label: label, children: _jsx("div", { className: "flex flex-wrap gap-2", children: tags.map((tag, index) => (_jsx("span", { className: "inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-accent-soft text-accent", children: renderHtml ? (_jsx("span", { className: "kratosjshtml-content", dangerouslySetInnerHTML: { __html: String(tag) } })) : (String(tag)) }, index))) }) }));
+    }
+    const { control } = useFormContext();
+    const validation = useValidation(props.validation?.rules || [], props.operation, props.name);
+    // Additional validation for minItems/maxItems
+    const tagsValidation = React.useMemo(() => {
+        const rules = { ...validation };
+        if (effectiveMinItems && effectiveMinItems > 0) {
+            rules.validate = {
+                ...(rules.validate || {}),
+                minItems: (value) => {
+                    const length = Array.isArray(value) ? value.length : 0;
+                    return length >= effectiveMinItems || `At least ${effectiveMinItems} item(s) are required`;
+                },
+            };
+        }
+        if (maxItems && maxItems > 0) {
+            rules.validate = {
+                ...(rules.validate || {}),
+                maxItems: (value) => {
+                    const length = Array.isArray(value) ? value.length : 0;
+                    return length <= maxItems || `Maximum ${maxItems} item(s) allowed`;
+                },
+            };
+        }
+        return rules;
+    }, [validation, effectiveMinItems, maxItems]);
+    return (_jsx(Controller, { name: name, control: control, rules: tagsValidation, render: ({ field: { value: fieldValue, onChange }, fieldState: { error } }) => {
+            const tags = Array.isArray(fieldValue) ? fieldValue : [];
+            const hasError = !!error;
+            const addTag = (tag) => {
+                const trimmedTag = tag.trim();
+                if (!trimmedTag)
+                    return;
+                if (tags.includes(trimmedTag))
+                    return;
+                if (maxItems && tags.length >= maxItems)
+                    return;
+                onChange([...tags, trimmedTag]);
+                setInputValue('');
+            };
+            const removeTag = (index) => {
+                if (!deletable || disabled)
+                    return;
+                if (effectiveMinItems && tags.length <= effectiveMinItems)
+                    return;
+                const newTags = tags.filter((_, i) => i !== index);
+                onChange(newTags);
+            };
+            const handleDragStart = (e, index) => {
+                if (!reorderable || disabled)
+                    return;
+                setDraggedIndex(index);
+                e.dataTransfer.effectAllowed = 'move';
+            };
+            const handleDragOver = (e, index) => {
+                if (!reorderable || disabled || draggedIndex === null)
+                    return;
+                e.preventDefault();
+                e.dataTransfer.dropEffect = 'move';
+                setDragOverIndex(index);
+            };
+            const handleDragLeave = () => {
+                setDragOverIndex(null);
+            };
+            const handleDrop = (e, dropIndex) => {
+                if (!reorderable || disabled || draggedIndex === null)
+                    return;
+                e.preventDefault();
+                if (draggedIndex === dropIndex) {
+                    setDraggedIndex(null);
+                    setDragOverIndex(null);
+                    return;
+                }
+                const newTags = [...tags];
+                const [movedTag] = newTags.splice(draggedIndex, 1);
+                newTags.splice(dropIndex, 0, movedTag);
+                onChange(newTags);
+                setDraggedIndex(null);
+                setDragOverIndex(null);
+            };
+            const handleDragEnd = () => {
+                setDraggedIndex(null);
+                setDragOverIndex(null);
+            };
+            const handleKeyDown = (e) => {
+                if (e.key === 'Enter' || e.key === separator) {
+                    e.preventDefault();
+                    addTag(inputValue);
+                }
+                else if (e.key === 'Backspace' && !inputValue && tags.length > 0) {
+                    // Remove last tag when backspace on empty input
+                    removeTag(tags.length - 1);
+                }
+            };
+            const handleBlur = () => {
+                // Add remaining input as tag on blur
+                if (inputValue.trim()) {
+                    addTag(inputValue);
+                }
+                setShowSuggestions(false);
+            };
+            const filteredSuggestions = suggestions.filter(s => s.toLowerCase().includes(inputValue.toLowerCase()) && !tags.includes(s));
+            const canAdd = addable && !disabled && (maxItems === undefined || tags.length < maxItems);
+            return (_jsxs("div", { className: "mb-4", children: [label && (_jsxs("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: [label, validation.required && _jsx("span", { className: "text-red-500 dark:text-red-400 ml-1", children: "*" })] })), _jsxs("div", { className: cn('w-full min-h-[42px] px-3 py-2 border rounded-lg shadow-sm', 'k-input', 'focus-within:outline-none focus-within:ring-2 focus-within:ring-ring ', 'transition duration-150 ease-in-out', hasError &&
+                            'border-red-500 dark:border-red-400 focus-within:ring-red-500 dark:focus-within:ring-red-400', disabled && 'opacity-60 cursor-not-allowed'), children: [_jsxs("div", { className: "flex flex-wrap gap-2 items-center", children: [tags.map((tag, index) => (_jsxs("span", { draggable: reorderable && !disabled, onDragStart: e => handleDragStart(e, index), onDragOver: e => handleDragOver(e, index), onDragLeave: handleDragLeave, onDrop: e => handleDrop(e, index), onDragEnd: handleDragEnd, className: cn('inline-flex items-center gap-1 px-2 py-1 rounded-md text-sm font-medium bg-accent-soft text-accent', 'transition-all duration-150', reorderable && !disabled && 'cursor-move hover:bg-accent/20', draggedIndex === index && 'opacity-50', dragOverIndex === index &&
+                                            draggedIndex !== index &&
+                                            'scale-105 ring-2 ring-ring'), children: [reorderable && !disabled && _jsx(GripVertical, { className: "w-3 h-3 opacity-40" }), String(tag), deletable &&
+                                                !disabled &&
+                                                (!effectiveMinItems || tags.length > effectiveMinItems) && (_jsx("button", { type: "button", onClick: () => removeTag(index), className: "ml-1 hover:bg-accent/20 rounded-full p-0.5 transition-colors", "aria-label": `Remove ${tag}`, children: _jsx(X, { className: "w-3 h-3" }) }))] }, index))), canAdd && (_jsx("input", { type: "text", value: inputValue, onChange: e => {
+                                            setInputValue(e.target.value);
+                                            if (suggestions.length > 0) {
+                                                setShowSuggestions(true);
+                                            }
+                                        }, onKeyDown: handleKeyDown, onBlur: handleBlur, onFocus: () => {
+                                            if (suggestions.length > 0) {
+                                                setShowSuggestions(true);
+                                            }
+                                        }, placeholder: tags.length === 0
+                                            ? placeholder || `Enter values separated by ${separator}`
+                                            : '', disabled: disabled, className: "flex-1 min-w-[120px] outline-none bg-transparent" }))] }), showSuggestions && filteredSuggestions.length > 0 && (_jsx("div", { className: "relative", children: _jsx("div", { className: "absolute z-10 mt-2 w-full bg-white dark:bg-gray-800 border border-border rounded-lg shadow-lg max-h-48 overflow-y-auto", children: filteredSuggestions.map((suggestion, index) => (_jsx("button", { type: "button", onMouseDown: e => e.preventDefault(), onClick: () => {
+                                            addTag(suggestion);
+                                            setShowSuggestions(false);
+                                        }, className: "w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-sm transition-colors", children: suggestion }, index))) }) }))] }), hasError && (_jsx("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error?.message })), helperText && _jsx("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: helperText }), !hasError && _jsx(HintDisplay, { hint: hint, hintIcon: hintIcon, hintColor: hintColor }), (effectiveMinItems !== undefined || maxItems !== undefined) && (_jsxs("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: [effectiveMinItems !== undefined && `Minimum: ${effectiveMinItems}`, effectiveMinItems !== undefined && maxItems !== undefined && ' • ', maxItems !== undefined && `Maximum: ${maxItems}`] }))] }));
+        } }));
+}

package/dist/components/TextInputField.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { FieldProps } from '../types';
+/**
+ * TextInput field component
+ * Renders text, email, password, number, tel, and url inputs
+ */
+export declare function TextInputField(props: FieldProps): React.JSX.Element;

package/dist/components/TextInputField.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFormContext } from 'react-hook-form';
+import { getFieldError } from '../utils/fieldErrors';
+import { useValidation } from '../hooks/useValidation';
+import { cn } from '../utils/classNames';
+import { HintDisplay } from './utils/HintDisplay';
+import { ViewFieldWrapper } from './utils/ViewFieldWrapper';
+import { formatNumber } from '../utils/formatValue';
+/**
+ * TextInput field component
+ * Renders text, email, password, number, tel, and url inputs
+ */
+export function TextInputField(props) {
+    // View mode: render formatted display
+    if (props.mode === 'view') {
+        const value = props.value;
+        let displayValue = value;
+        // Format numbers if inputType is numeric
+        if (props.inputType === 'number' && value !== null && value !== undefined) {
+            displayValue = formatNumber(value);
+        }
+        else if (value === null || value === undefined) {
+            displayValue = '-';
+        }
+        else if (props.renderHtml && (typeof value === 'string' || typeof value === 'number')) {
+            displayValue = _jsx("div", { className: "kratosjshtml-content", dangerouslySetInnerHTML: { __html: String(value) } });
+        }
+        else {
+            // If is object, convert it into a ul list
+            if (typeof value === 'object') {
+                displayValue = (_jsx("div", { className: "space-y-2", children: Object.entries(value).map(([key, value]) => (_jsxs("div", { children: [_jsx("b", { children: key }), " : ", typeof value === 'object' ? JSON.stringify(value) : String(value)] }, key))) }));
+            }
+            else {
+                displayValue = String(value);
+            }
+        }
+        return _jsx(ViewFieldWrapper, { label: props.label, children: displayValue });
+    }
+    const { register, formState: { errors }, } = useFormContext();
+    const validation = useValidation(props.validation?.rules || [], props.operation, props.name);
+    const error = getFieldError(errors, props.name);
+    const hasError = !!error;
+    return (_jsxs("div", { className: "mb-4", children: [props.label && (_jsxs("label", { htmlFor: props.name, className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: [props.label, validation.required && _jsx("span", { className: "text-red-500 dark:text-red-400 ml-1", children: "*" })] })), _jsx("input", { id: props.name, type: props.inputType || 'text', ...register(props.name, validation), placeholder: props.placeholder, disabled: props.disabled, readOnly: props.readOnly, className: cn('w-full px-3 py-2 border rounded-lg shadow-sm', 'k-input', 'focus:outline-none focus:ring-2 focus:ring-ring', 'transition duration-150 ease-in-out', hasError && 'border-red-500 dark:border-red-400 focus:ring-red-500 dark:focus:ring-red-400', props.disabled && 'opacity-60 cursor-not-allowed', props.readOnly && 'bg-muted') }), hasError && _jsx("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error?.message }), props.helperText && _jsx("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: props.helperText }), !hasError && _jsx(HintDisplay, { hint: props.hint, hintIcon: props.hintIcon, hintColor: props.hintColor })] }));
+}

package/dist/components/TextareaField.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { FieldProps } from '../types';
+/**
+ * Textarea field component
+ * Renders multi-line text input with character count
+ */
+export declare function TextareaField(props: FieldProps): React.JSX.Element;

package/dist/components/TextareaField.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFormContext, useWatch } from 'react-hook-form';
+import { getFieldError } from '../utils/fieldErrors';
+import { useValidation } from '../hooks/useValidation';
+import { cn } from '../utils/classNames';
+import { HintDisplay } from './utils/HintDisplay';
+import { ViewFieldWrapper } from './utils/ViewFieldWrapper';
+import { formatTextarea } from '../utils/formatValue';
+/**
+ * Textarea field component
+ * Renders multi-line text input with character count
+ */
+export function TextareaField(props) {
+    // View mode: render formatted display
+    if (props.mode === 'view') {
+        const value = props.value;
+        const displayValue = props.renderHtml && value != null && (typeof value === 'string' || typeof value === 'number') ? (_jsx("div", { className: "kratosjshtml-content", dangerouslySetInnerHTML: { __html: String(value) } })) : (formatTextarea(value));
+        return _jsx(ViewFieldWrapper, { label: props.label, children: displayValue });
+    }
+    const { register, control, formState: { errors }, } = useFormContext();
+    const validation = useValidation(props.validation?.rules || [], props.operation, props.name);
+    const error = getFieldError(errors, props.name);
+    const hasError = !!error;
+    // Watch the field value for character count
+    const value = useWatch({ control, name: props.name, defaultValue: '' });
+    const currentLength = value?.length || 0;
+    const maxLength = props.maxLength;
+    return (_jsxs("div", { className: "mb-4", children: [props.label && (_jsxs("label", { htmlFor: props.name, className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: [props.label, validation.required && _jsx("span", { className: "text-red-500 dark:text-red-400 ml-1", children: "*" })] })), _jsx("textarea", { id: props.name, ...register(props.name, validation), placeholder: props.placeholder, disabled: props.disabled, readOnly: props.readOnly, rows: props.rows || 4, cols: props.cols, className: cn('w-full px-3 py-2 border rounded-lg shadow-sm', 'k-input', 'focus:outline-none focus:ring-2 focus:ring-ring', 'transition duration-150 ease-in-out', 'resize-y', hasError && 'border-red-500 dark:border-red-400 focus:ring-red-500 dark:focus:ring-red-400', props.disabled && 'opacity-60 cursor-not-allowed', props.readOnly && 'bg-muted') }), maxLength && (_jsxs("div", { className: "mt-1 flex justify-between items-center", children: [_jsxs("div", { className: "flex-1", children: [hasError && (_jsx("p", { className: "text-sm text-red-600 dark:text-red-400", children: error?.message })), props.helperText && !hasError && (_jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: props.helperText })), !hasError && (_jsx(HintDisplay, { hint: props.hint, hintIcon: props.hintIcon, hintColor: props.hintColor }))] }), _jsxs("p", { className: cn('text-xs ml-2', currentLength > maxLength
+                            ? 'text-red-600 dark:text-red-400 font-medium'
+                            : 'text-gray-500 dark:text-gray-400'), children: [currentLength, " / ", maxLength] })] })), !maxLength && hasError && (_jsx("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error?.message })), !maxLength && props.helperText && (_jsx("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: props.helperText })), !maxLength && !hasError && (_jsx(HintDisplay, { hint: props.hint, hintIcon: props.hintIcon, hintColor: props.hintColor }))] }));
+}

package/dist/components/ToggleField.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { FieldProps } from '../types';
+/**
+ * Toggle field component
+ * Renders a toggle switch with custom colors
+ */
+export declare function ToggleField(props: FieldProps): React.JSX.Element;

package/dist/components/ToggleField.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFormContext, useWatch } from 'react-hook-form';
+import { getFieldError } from '../utils/fieldErrors';
+import { useValidation } from '../hooks/useValidation';
+import { cn } from '../utils/classNames';
+import { Icon } from './utils/Icon';
+import { HintDisplay } from './utils/HintDisplay';
+import { ViewFieldWrapper } from './utils/ViewFieldWrapper';
+import { formatBoolean } from '../utils/formatValue';
+/**
+ * Toggle field component
+ * Renders a toggle switch with custom colors
+ */
+export function ToggleField(props) {
+    // View mode: render formatted display
+    if (props.mode === 'view') {
+        const value = props.value;
+        const displayValue = formatBoolean(value);
+        const isChecked = Boolean(value);
+        const onColor = 'text-green-600';
+        const offColor = 'text-red-600';
+        return (_jsx(ViewFieldWrapper, { label: props.label, children: _jsx("div", { className: "flex items-center gap-3", children: _jsx("span", { className: cn(isChecked ? onColor : offColor), children: displayValue }) }) }));
+    }
+    const { register, control, formState: { errors }, } = useFormContext();
+    const validation = useValidation(props.validation?.rules || [], props.operation, props.name);
+    const error = getFieldError(errors, props.name);
+    const hasError = !!error;
+    // Watch the toggle state
+    const isChecked = useWatch({ control, name: props.name, defaultValue: props.default || false });
+    // Map color names to Tailwind classes
+    const getColorClass = (color) => {
+        const colorMap = {
+            success: 'bg-green-600 dark:bg-green-500',
+            danger: 'bg-red-600 dark:bg-red-500',
+            warning: 'bg-yellow-600 dark:bg-yellow-500',
+            info: 'bg-accent',
+            primary: 'bg-accent',
+        };
+        return colorMap[color || ''] || 'bg-accent';
+    };
+    // Map semantic color names to Tailwind classes; pass through full class strings as-is
+    const resolveTrackColor = (color, fallback) => {
+        if (!color)
+            return fallback.split(/\s+/);
+        if (/\b(bg|text)-/.test(color))
+            return color.split(/\s+/);
+        return getColorClass(color).split(/\s+/);
+    };
+    const onColor = resolveTrackColor(props.onColor, 'bg-accent');
+    const offColor = resolveTrackColor(props.offColor, 'bg-gray-200 dark:bg-gray-700');
+    return (_jsxs("div", { className: "mb-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "flex-1", children: props.label && (_jsxs("label", { htmlFor: props.name, className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: [props.label, validation.required && _jsx("span", { className: "text-red-500 dark:text-red-400 ml-1", children: "*" })] })) }), _jsx("button", { type: "button", role: "switch", "aria-checked": isChecked, disabled: props.disabled, onClick: () => {
+                            const checkbox = document.getElementById(props.name);
+                            if (checkbox) {
+                                checkbox.click();
+                            }
+                        }, className: cn('relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent', 'transition-colors duration-200 ease-in-out', 'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 dark:focus:ring-offset-gray-900', ...(isChecked ? onColor : offColor), props.disabled && 'opacity-60 cursor-not-allowed'), children: _jsxs("span", { className: cn('pointer-events-none inline-flex items-center justify-center h-5 w-5 transform rounded-full bg-white dark:bg-gray-200 shadow ring-0', 'transition duration-200 ease-in-out', isChecked ? 'translate-x-5' : 'translate-x-0'), children: [props.onIcon && isChecked && _jsx(Icon, { name: props.onIcon, size: 12, className: "text-green-600" }), props.offIcon && !isChecked && (_jsx(Icon, { name: props.offIcon, size: 12, className: "text-gray-400" }))] }) }), _jsx("input", { id: props.name, type: "checkbox", ...register(props.name, validation), className: "sr-only" })] }), hasError && _jsx("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error?.message }), props.helperText && _jsx("p", { className: "mt-1 text-sm text-gray-500 dark:text-gray-400", children: props.helperText }), !hasError && _jsx(HintDisplay, { hint: props.hint, hintIcon: props.hintIcon, hintColor: props.hintColor })] }));
+}

package/dist/components/ViewModal.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { SerializedForm } from '@maxal_studio/kratosjs';
+import { SerializedRelation } from '../types';
+export type { SerializedRelation };
+interface ViewModalProps {
+    /** Whether the modal is open */
+    isOpen: boolean;
+    /** Function to close the modal */
+    onClose: () => void;
+    /** Resource slug (e.g., 'users', 'posts') */
+    resourceSlug: string;
+    /** Display name for the resource */
+    resourceName: string;
+    /** ID of the record to view */
+    recordId: string;
+    /** API base URL */
+    apiBaseUrl?: string;
+    /** Form schema for displaying fields */
+    formSchema: SerializedForm;
+    /** Stacking depth */
+    depth?: number;
+    /** Close all modals */
+    onCloseAll?: () => void;
+}
+export declare function ViewModal({ isOpen, onClose, resourceSlug, resourceName, recordId, apiBaseUrl, formSchema, depth, onCloseAll, }: ViewModalProps): React.JSX.Element;