@maxal_studio/kratosjs-react 1.0.0

package/dist/components/GlobalSearch.js

@@ -0,0 +1,181 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { Search, X, CornerDownLeft } from 'lucide-react';
+import { Icon } from './utils/Icon';
+import { cn } from '../utils/classNames';
+import { authenticatedFetch } from '../api/authenticatedFetch';
+import { useResourceModal } from '../contexts/ResourceModalContext';
+import { Spinner } from './ui';
+import { translate } from '../i18n/activeLocale';
+function KeyboardHint({ children }) {
+    return (_jsx("kbd", { className: "inline-flex min-w-[20px] items-center justify-center rounded border border-border bg-muted px-1.5 py-0.5 font-sans text-[10px] font-medium text-fg-muted", children: children }));
+}
+export function GlobalSearch({ apiBaseUrl, onResultClick }) {
+    const { openModal } = useResourceModal();
+    const [paletteOpen, setPaletteOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const [debouncedQuery, setDebouncedQuery] = useState('');
+    const [results, setResults] = useState({});
+    const [loading, setLoading] = useState(false);
+    const [selectedIndex, setSelectedIndex] = useState(-1);
+    const inputRef = useRef(null);
+    const closePalette = useCallback(() => {
+        setPaletteOpen(false);
+        setQuery('');
+        setDebouncedQuery('');
+        setResults({});
+        setSelectedIndex(-1);
+        setLoading(false);
+    }, []);
+    const openPalette = useCallback(() => {
+        setPaletteOpen(true);
+    }, []);
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setDebouncedQuery(query);
+        }, 300);
+        return () => clearTimeout(timer);
+    }, [query]);
+    useEffect(() => {
+        if (!paletteOpen)
+            return;
+        const frame = requestAnimationFrame(() => {
+            inputRef.current?.focus();
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [paletteOpen]);
+    useEffect(() => {
+        if (!debouncedQuery.trim()) {
+            setResults({});
+            setLoading(false);
+            setSelectedIndex(-1);
+            return;
+        }
+        const fetchResults = async () => {
+            setLoading(true);
+            try {
+                const response = await authenticatedFetch(`${apiBaseUrl}/global-search`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ query: debouncedQuery }),
+                }, apiBaseUrl);
+                if (!response.ok) {
+                    throw new Error('Failed to fetch search results');
+                }
+                const data = await response.json();
+                setResults(data);
+                setSelectedIndex(-1);
+            }
+            catch (error) {
+                console.error('Error fetching search results:', error);
+                setResults({});
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchResults();
+    }, [debouncedQuery, apiBaseUrl]);
+    useEffect(() => {
+        const handleShortcut = (event) => {
+            if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
+                event.preventDefault();
+                if (paletteOpen) {
+                    closePalette();
+                }
+                else {
+                    openPalette();
+                }
+            }
+        };
+        document.addEventListener('keydown', handleShortcut);
+        return () => document.removeEventListener('keydown', handleShortcut);
+    }, [paletteOpen, closePalette, openPalette]);
+    useEffect(() => {
+        if (!paletteOpen)
+            return;
+        const handleEscape = (event) => {
+            if (event.key === 'Escape') {
+                closePalette();
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+        return () => document.removeEventListener('keydown', handleEscape);
+    }, [paletteOpen, closePalette]);
+    const flattenedResults = useMemo(() => {
+        const items = [];
+        for (const [resourceSlug, resourceData] of Object.entries(results)) {
+            for (const result of resourceData.results) {
+                items.push({ resourceSlug, result, resourceData });
+            }
+        }
+        return items;
+    }, [results]);
+    const handleResultClick = useCallback((resourceSlug, recordId) => {
+        openModal(resourceSlug, 'view', recordId);
+        closePalette();
+        onResultClick?.(resourceSlug, recordId);
+    }, [openModal, closePalette, onResultClick]);
+    const handleKeyDown = (event) => {
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            if (flattenedResults.length === 0)
+                return;
+            setSelectedIndex(prev => (prev < flattenedResults.length - 1 ? prev + 1 : 0));
+            return;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            if (flattenedResults.length === 0)
+                return;
+            setSelectedIndex(prev => (prev > 0 ? prev - 1 : flattenedResults.length - 1));
+            return;
+        }
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            if (selectedIndex >= 0 && flattenedResults[selectedIndex]) {
+                const { resourceSlug, result } = flattenedResults[selectedIndex];
+                handleResultClick(resourceSlug, result._id);
+            }
+        }
+    };
+    const hasQuery = debouncedQuery.trim().length > 0;
+    const hasResults = flattenedResults.length > 0;
+    const palette = paletteOpen
+        ? createPortal(_jsxs("div", { className: "fixed inset-0 z-[100] flex items-start justify-center px-4 pt-[12vh] sm:pt-[15vh]", children: [_jsx("button", { type: "button", className: "absolute inset-0 bg-black/45 backdrop-blur-md", onClick: closePalette, "aria-label": translate('core:search.close') }), _jsxs("div", { role: "dialog", "aria-modal": "true", "aria-label": translate('core:search.records'), className: "relative w-full max-w-2xl overflow-hidden rounded-2xl border border-border/80 bg-surface/95 shadow-soft-lg backdrop-blur-xl", children: [_jsxs("div", { className: "flex items-center gap-3 border-b border-border px-4", children: [_jsx(Search, { className: "h-5 w-5 shrink-0 text-fg-muted" }), _jsx("input", { ref: inputRef, type: "text", value: query, onChange: event => setQuery(event.target.value), onKeyDown: handleKeyDown, placeholder: translate('core:common.search'), autoComplete: "off", spellCheck: false, className: "h-14 min-w-0 flex-1 bg-transparent text-base text-fg placeholder:text-fg-muted focus:outline-none" }), loading && _jsx(Spinner, { size: "sm", className: "shrink-0 text-accent" }), query && !loading && (_jsx("button", { type: "button", onClick: () => {
+                                        setQuery('');
+                                        setDebouncedQuery('');
+                                        setResults({});
+                                        setSelectedIndex(-1);
+                                        inputRef.current?.focus();
+                                    }, className: "rounded-md p-1 text-fg-muted transition-colors hover:bg-hover hover:text-fg", "aria-label": translate('core:search.clear'), children: _jsx(X, { className: "h-4 w-4" }) }))] }), _jsxs("div", { className: "max-h-[min(420px,52vh)] overflow-y-auto", children: [!hasQuery && (_jsxs("div", { className: "px-4 py-8 text-center", children: [_jsx("p", { className: "text-sm text-fg-secondary", children: translate('core:search.subtitle') }), _jsx("p", { className: "mt-1 text-xs text-fg-muted", children: translate('core:search.start_typing') })] })), hasQuery && loading && (_jsxs("div", { className: "flex items-center justify-center gap-2 px-4 py-10 text-sm text-fg-secondary", children: [_jsx(Spinner, { size: "sm", className: "text-accent" }), "Searching\u2026"] })), hasQuery && !loading && !hasResults && (_jsxs("div", { className: "px-4 py-10 text-center text-sm text-fg-secondary", children: ["No results for \u201C", debouncedQuery, "\u201D"] })), hasQuery && !loading && hasResults && (_jsx("div", { className: "py-2", children: Object.entries(results).map(([resourceSlug, resourceData]) => {
+                                        let itemIndex = 0;
+                                        for (const [slug, data] of Object.entries(results)) {
+                                            if (slug === resourceSlug)
+                                                break;
+                                            itemIndex += data.results.length;
+                                        }
+                                        return (_jsxs("div", { className: "mb-1 last:mb-0", children: [_jsxs("div", { className: "flex items-center gap-2 px-4 py-1.5", children: [resourceData.icon && (_jsx(Icon, { name: resourceData.icon, className: "h-3.5 w-3.5 text-fg-muted" })), _jsx("span", { className: "text-[11px] font-medium uppercase tracking-wide text-fg-muted", children: resourceData.pluralLabel })] }), _jsx("ul", { className: "px-2", children: resourceData.results.map((result, resultIndex) => {
+                                                        const globalIndex = itemIndex + resultIndex;
+                                                        const isSelected = selectedIndex === globalIndex;
+                                                        return (_jsx("li", { children: _jsxs("button", { type: "button", onMouseEnter: () => setSelectedIndex(globalIndex), onClick: () => handleResultClick(resourceSlug, result._id), className: cn('flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-left transition-colors', isSelected
+                                                                    ? 'bg-accent text-accent-fg'
+                                                                    : 'text-fg hover:bg-hover'), children: [result.featuredImage ? (_jsx("div", { className: cn('h-9 w-9 shrink-0 overflow-hidden rounded-lg', isSelected
+                                                                            ? 'ring-1 ring-white/20'
+                                                                            : 'bg-muted'), children: _jsx("img", { src: result.featuredImage.url, alt: "", className: "h-full w-full object-cover", onError: event => {
+                                                                                event.target.style.display = 'none';
+                                                                            } }) })) : (_jsx("div", { className: cn('flex h-9 w-9 shrink-0 items-center justify-center rounded-lg', isSelected
+                                                                            ? 'bg-white/15 text-accent-fg'
+                                                                            : 'bg-muted text-fg-muted'), children: resourceData.icon ? (_jsx(Icon, { name: resourceData.icon, className: "h-4 w-4" })) : (_jsx(Search, { className: "h-4 w-4" })) })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: cn('truncate text-sm font-medium', isSelected
+                                                                                    ? 'text-accent-fg'
+                                                                                    : 'text-fg'), dangerouslySetInnerHTML: {
+                                                                                    __html: result.title,
+                                                                                } }), _jsx("p", { className: cn('truncate text-xs', isSelected
+                                                                                    ? 'text-accent-fg/80'
+                                                                                    : 'text-fg-muted'), children: resourceData.label })] }), isSelected && (_jsx(CornerDownLeft, { className: "h-4 w-4 shrink-0 opacity-80" }))] }) }, result._id));
+                                                    }) })] }, resourceSlug));
+                                    }) }))] }), _jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1 border-t border-border px-4 py-2.5 text-[11px] text-fg-muted", children: [_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(KeyboardHint, { children: "\u2191\u2193" }), translate('core:search.nav_navigate')] }), _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(KeyboardHint, { children: "\u21B5" }), translate('core:search.nav_open')] }), _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx(KeyboardHint, { children: "esc" }), translate('core:search.nav_close')] })] })] })] }), document.body)
+        : null;
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: openPalette, "aria-label": translate('core:search.records'), className: cn('inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border bg-input/60 transition-colors sm:hidden', 'hover:border-border-strong hover:bg-hover', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'), children: _jsx(Search, { className: "h-4 w-4 text-fg-muted" }) }), _jsxs("button", { type: "button", onClick: openPalette, className: cn('hidden h-9 w-full min-w-0 items-center gap-2 rounded-lg border border-border bg-input/60 px-3 text-left text-sm transition-colors sm:flex', 'hover:border-border-strong hover:bg-hover', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'), children: [_jsx(Search, { className: "h-4 w-4 shrink-0 text-fg-muted" }), _jsx("span", { className: "min-w-0 flex-1 truncate text-fg-muted", children: translate('core:common.search') }), _jsx("kbd", { className: "ml-auto shrink-0 rounded border border-border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-fg-muted", children: "\u2318K" })] }), palette] }));
+}

package/dist/components/GroupField.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { FieldProps } from '../types';
+export declare function GroupField({ label, description, hint, hintIcon, hintColor, icon, schema, columns, disabled, mode, value, _recordData, operation, apiBaseUrl, resource, }: FieldProps & {
+    _recordData?: any;
+    apiBaseUrl?: string;
+    resource?: string;
+}): React.JSX.Element;

package/dist/components/GroupField.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { FieldRenderer } from '../FieldRenderer';
+import { HintDisplay } from './utils/HintDisplay';
+import { Icon } from './utils/Icon';
+import { getGridClasses } from './utils/layoutHelpers';
+import { cn } from '../utils/classNames';
+export function GroupField({ label, description, hint, hintIcon, hintColor, icon, schema, columns, disabled, mode, value, _recordData, operation, apiBaseUrl, resource, }) {
+    const groupId = useId();
+    const recordData = mode === 'view' && _recordData ? _recordData : value || {};
+    const gridClasses = getGridClasses(columns);
+    const hasHeader = Boolean(label || description || hint || icon);
+    return (_jsxs("div", { role: "group", "aria-labelledby": label ? groupId : undefined, className: "w-full rounded-xl border border-border bg-surface", children: [hasHeader && (_jsx("div", { className: "rounded-t-xl border-b border-border/60 bg-muted/25 px-4 py-3", children: _jsxs("div", { className: "flex items-start gap-3", children: [icon && (_jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-raised text-fg-secondary shadow-soft-sm", children: _jsx(Icon, { name: icon, className: "h-4 w-4" }) })), _jsxs("div", { className: "min-w-0 flex-1", children: [label && (_jsx("p", { id: groupId, className: "text-sm font-semibold leading-snug text-fg", children: label })), description && (_jsx("p", { className: cn('text-sm leading-relaxed text-fg-secondary', label && 'mt-1'), children: description })), _jsx(HintDisplay, { hint: hint, hintIcon: hintIcon, hintColor: hintColor })] })] }) })), _jsx("div", { className: cn('p-4', gridClasses, 'gap-y-4'), children: schema &&
+                    schema.map((field, index) => {
+                        const nestedField = {
+                            ...field,
+                            disabled: disabled || field.disabled,
+                            mode: mode || field.mode,
+                        };
+                        const nestedValue = mode === 'view' && field.name ? recordData[field.name] : undefined;
+                        return (_jsx(FieldRenderer, { field: nestedField, mode: mode, value: nestedValue, operation: operation, apiBaseUrl: apiBaseUrl, resource: resource }, index));
+                    }) })] }));
+}

package/dist/components/HiddenField.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { FieldProps } from '../types';
+export declare function HiddenField({ name, default: defaultValue, mode }: FieldProps): React.JSX.Element;

package/dist/components/HiddenField.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFormContext } from 'react-hook-form';
+export function HiddenField({ name, default: defaultValue, mode }) {
+    // Hidden fields should not be displayed in view mode
+    if (mode === 'view') {
+        return null;
+    }
+    const { register } = useFormContext();
+    return _jsx("input", { type: "hidden", ...register(name), defaultValue: defaultValue });
+}

package/dist/components/ModalBreadcrumb.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * Stack breadcrumb for nested modals — pill items matching sidebar/table tabs.
+ */
+export declare function ModalBreadcrumb(): React.JSX.Element;

package/dist/components/ModalBreadcrumb.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { ChevronRight, Loader2 } from 'lucide-react';
+import { useResourceModal } from '../contexts/ResourceModalContext';
+import { cn } from '../utils/classNames';
+import { pillTabClass } from './ui/PillButton';
+import { translate } from '../i18n/activeLocale';
+function getModalKey(modal) {
+    return `${modal.resource}-${modal.mode}-${modal.recordId || 'new'}`;
+}
+/**
+ * Stack breadcrumb for nested modals — pill items matching sidebar/table tabs.
+ */
+export function ModalBreadcrumb() {
+    const { modalStack, modalTitles, closeModal } = useResourceModal();
+    if (modalStack.length <= 1) {
+        return null;
+    }
+    const handleBreadcrumbClick = (targetIndex) => {
+        const modalsToClose = modalStack.length - 1 - targetIndex;
+        for (let i = 0; i < modalsToClose; i++) {
+            closeModal();
+        }
+        const target = modalStack[targetIndex];
+        window.history.replaceState(null, '', `/${target.resource}/${target.recordId || ''}`);
+    };
+    return (_jsx("div", { className: "shrink-0 border-b border-border/60 bg-base/30 px-4 py-2.5", children: _jsx("nav", { className: "flex items-center gap-1 overflow-x-auto overscroll-x-contain", style: { WebkitOverflowScrolling: 'touch' }, "aria-label": translate('core:modal.stack'), children: modalStack.map((modal, index) => {
+                const modalKey = getModalKey(modal);
+                const title = modal.mode === 'action' && modal.actionLabel ? modal.actionLabel : modalTitles[modalKey];
+                const isLast = index === modalStack.length - 1;
+                return (_jsxs(React.Fragment, { children: [_jsx("button", { type: "button", onClick: () => !isLast && handleBreadcrumbClick(index), disabled: isLast, className: cn(pillTabClass(isLast), isLast ? 'cursor-default' : 'cursor-pointer', !title && 'italic'), title: title || modal.resource, "aria-current": isLast ? 'page' : undefined, children: !title ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }), _jsx("span", { children: translate('core:common.loading_ellipsis') })] })) : (_jsx("span", { className: "max-w-[180px] truncate", children: title })) }), !isLast && _jsx(ChevronRight, { className: "h-3.5 w-3.5 shrink-0 text-fg-muted", "aria-hidden": true })] }, modalKey));
+            }) }) }));
+}

package/dist/components/ModalDrawer.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+export interface ModalDrawerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string | ReactNode;
+    children: ReactNode;
+    depth?: number;
+    onCloseAll?: () => void;
+    width?: string;
+    onCopyUrl?: () => void;
+    urlCopied?: boolean;
+    /** Optional pinned footer (e.g. form buttons) */
+    footer?: ReactNode;
+}
+export declare function ModalDrawer({ isOpen, onClose, title, children, depth, onCloseAll, onCopyUrl, urlCopied, footer, }: ModalDrawerProps): React.JSX.Element;

package/dist/components/ModalDrawer.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { X, ArrowLeft, Copy, Check } from 'lucide-react';
+import { cn } from '../utils/classNames';
+import { ModalBreadcrumb } from './ModalBreadcrumb';
+import { PillIconButton } from './ui/PillButton';
+import { translate } from '../i18n/activeLocale';
+import { Slot } from '../slots/Slot';
+export function ModalDrawer({ isOpen, onClose, title, children, depth = 0, onCloseAll, onCopyUrl, urlCopied, footer, }) {
+    useEffect(() => {
+        const handleEscape = (e) => {
+            if (e.key === 'Escape') {
+                onClose();
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('keydown', handleEscape);
+            document.body.style.overflow = 'hidden';
+        }
+        return () => {
+            document.removeEventListener('keydown', handleEscape);
+            document.body.style.overflow = 'unset';
+        };
+    }, [isOpen, onClose]);
+    if (!isOpen)
+        return null;
+    const zIndex = 50 + depth;
+    const renderTitle = () => {
+        if (typeof title === 'string') {
+            if (/<[^>]+>/.test(title)) {
+                return _jsx("span", { dangerouslySetInnerHTML: { __html: title } });
+            }
+            return title;
+        }
+        return title;
+    };
+    return (_jsxs("div", { className: "fixed inset-0", style: { zIndex }, children: [_jsx("div", { className: cn('absolute inset-0 transition-opacity', depth === 0 && 'bg-black/40 backdrop-blur-[2px]'), onClick: onCloseAll ?? onClose, "aria-hidden": true }), _jsxs("div", { className: cn('fixed top-0 flex h-full w-full flex-col border-border bg-surface transition-transform duration-300 ease-out md:w-1/2 md:max-w-2xl md:border-l', 'shadow-soft-lg'), style: {
+                    right: depth === 0 ? '0px' : `${depth * 16}px`,
+                }, onClick: e => e.stopPropagation(), role: "dialog", "aria-modal": "true", children: [_jsxs("div", { className: "flex h-14 shrink-0 items-center justify-between gap-3 border-b border-border/60 bg-base/80 px-4 backdrop-blur-sm", children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [_jsx(PillIconButton, { variant: "ghost", onClick: onClose, "aria-label": translate('core:modal.close'), title: translate('core:modal.close'), children: _jsx(ArrowLeft, { className: "h-4 w-4" }) }), _jsx("h2", { className: "truncate text-base font-semibold text-fg", children: renderTitle() })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [_jsx(Slot, { name: "modal.headerActions", as: "div", className: "flex items-center gap-1 empty:hidden" }), onCopyUrl && (_jsx(PillIconButton, { variant: "ghost", active: urlCopied, onClick: onCopyUrl, "aria-label": translate('core:common.copy_url'), title: translate('core:common.copy_url'), className: urlCopied ? 'text-success' : undefined, children: urlCopied ? _jsx(Check, { className: "h-4 w-4" }) : _jsx(Copy, { className: "h-4 w-4" }) })), depth > 0 && onCloseAll && (_jsx(PillIconButton, { variant: "danger", onClick: onCloseAll, "aria-label": translate('core:modal.close_all'), title: translate('core:modal.close_all'), children: _jsx(X, { className: "h-4 w-4" }) }))] })] }), _jsx(ModalBreadcrumb, {}), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto overflow-x-hidden bg-surface p-4 sm:p-6", children: children }), _jsxs("div", { className: "shrink-0 border-t border-border/60 bg-base/50 px-4 py-3 empty:hidden sm:px-6 sm:py-4", children: [footer, _jsx(Slot, { name: "modal.footer", as: "div", className: "mt-2 first:mt-0 empty:hidden" })] })] })] }));
+}

package/dist/components/RadioField.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { FieldProps } from '../types';
+/**
+ * Radio field component
+ * Renders a radio button group
+ */
+export declare function RadioField(props: FieldProps): React.JSX.Element;

package/dist/components/RadioField.js

@@ -0,0 +1,26 @@
+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 { formatSelectLabel } from '../utils/formatValue';
+/**
+ * Radio field component
+ * Renders a radio button group
+ */
+export function RadioField(props) {
+    // View mode: render formatted display
+    if (props.mode === 'view') {
+        const value = props.value;
+        const displayValue = formatSelectLabel(value, props.options);
+        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", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2", children: [props.label, validation.required && _jsx("span", { className: "text-red-500 dark:text-red-400 ml-1", children: "*" })] })), _jsx("div", { className: "space-y-2", children: props.options &&
+                    Object.entries(props.options).map(([value, label]) => (_jsxs("div", { className: "flex items-center", children: [_jsx("input", { id: `${props.name}-${value}`, type: "radio", ...register(props.name, validation), value: value, disabled: props.disabled, className: cn('w-4 h-4 border', 'text-accent dark:text-accent', 'k-input', 'focus:ring-2 focus:ring-ring', 'transition duration-150 ease-in-out', hasError && 'border-red-500 dark:border-red-400', props.disabled && 'opacity-60 cursor-not-allowed') }), _jsx("label", { htmlFor: `${props.name}-${value}`, className: cn('ml-3 text-sm text-gray-700 dark:text-gray-300', props.disabled && 'opacity-60 cursor-not-allowed'), children: label })] }, value))) }), 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/RepeaterField.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { FieldProps } from '../types';
+export declare function RepeaterField(props: FieldProps): React.JSX.Element;

package/dist/components/RepeaterField.js

@@ -0,0 +1,191 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { useFormContext, useFieldArray, useWatch } from 'react-hook-form';
+import { getFieldError } from '../utils/fieldErrors';
+import { FieldRenderer } from '../FieldRenderer';
+import { HintDisplay } from './utils/HintDisplay';
+import { ViewFieldWrapper } from './utils/ViewFieldWrapper';
+import { PillButton } from './ui/PillButton';
+import { translate } from '../i18n/activeLocale';
+export function RepeaterField(props) {
+    const { name, label, helperText, hint, hintIcon, hintColor, schema = [], defaultItems = 0, minItems, maxItems, addable = true, deletable = true, reorderable = true, itemLabel, disabled = false, collapsible = false, mode, value, operation, } = props;
+    // Threaded down so nested fields (e.g. relation selects, file uploads) can reach the API.
+    const apiBaseUrl = props.apiBaseUrl;
+    const resource = props.resource;
+    // Determine if repeater 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;
+    // View mode: render formatted display
+    if (mode === 'view') {
+        const items = Array.isArray(value) ? value : [];
+        if (items.length === 0) {
+            return _jsx(ViewFieldWrapper, { label: label, children: "-" });
+        }
+        return (_jsx(ViewFieldWrapper, { label: label, children: _jsx("div", { className: "space-y-4", children: items.map((item, index) => (_jsxs("div", { className: "border border-border rounded-lg p-4 bg-surface", children: [itemLabel && (_jsxs("div", { className: "font-medium text-fg-secondary mb-3", children: [itemLabel, " ", index + 1] })), _jsx("div", { className: "space-y-3", children: schema.map((field, fieldIndex) => {
+                                const fieldValue = field.name ? item[field.name] : undefined;
+                                return (_jsx(FieldRenderer, { field: { ...field, mode: 'view' }, mode: "view", value: fieldValue, operation: operation ?? 'view', apiBaseUrl: apiBaseUrl, resource: resource }, fieldIndex));
+                            }) })] }, index))) }) }));
+    }
+    const formContext = useFormContext();
+    const { control, register } = formContext;
+    const errors = formContext.formState?.errors || {};
+    const { fields, append, remove, move } = useFieldArray({
+        control,
+        name,
+    });
+    // Track active tab (for non-collapsible mode)
+    const [activeTab, setActiveTab] = useState(0);
+    // Track collapsed state for each item (for collapsible mode)
+    const [collapsedItems, setCollapsedItems] = useState(new Set());
+    // Default items are handled by FormRenderer's extractDefaultValues.
+    // We do not auto-add placeholders for minItems here, to avoid off-by-one
+    // issues and keep the UI strictly in sync with the actual form state.
+    // Ensure active tab is valid
+    React.useEffect(() => {
+        if (activeTab >= fields.length && fields.length > 0) {
+            setActiveTab(fields.length - 1);
+        }
+    }, [fields.length, activeTab]);
+    const canAdd = addable && !disabled && (maxItems === undefined || fields.length < maxItems);
+    const canDelete = (index) => deletable && !disabled && (effectiveMinItems === undefined || fields.length > effectiveMinItems);
+    const canMoveUp = (index) => reorderable && !disabled && index > 0;
+    const canMoveDown = (index) => reorderable && !disabled && index < fields.length - 1;
+    const handleDelete = (index) => {
+        if (canDelete(index)) {
+            remove(index);
+            // Switch to previous tab if deleting active tab
+            if (activeTab >= index && activeTab > 0) {
+                setActiveTab(activeTab - 1);
+            }
+        }
+    };
+    const handleMoveUp = (index) => {
+        if (canMoveUp(index)) {
+            move(index, index - 1);
+            // Update active tab if moving the active item
+            if (activeTab === index) {
+                setActiveTab(index - 1);
+            }
+            else if (activeTab === index - 1) {
+                setActiveTab(index);
+            }
+        }
+    };
+    const handleMoveDown = (index) => {
+        if (canMoveDown(index)) {
+            move(index, index + 1);
+            // Update active tab if moving the active item
+            if (activeTab === index) {
+                setActiveTab(index + 1);
+            }
+            else if (activeTab === index + 1) {
+                setActiveTab(index);
+            }
+        }
+    };
+    const handleAdd = () => {
+        if (canAdd) {
+            append({});
+            if (!collapsible) {
+                setActiveTab(fields.length); // Switch to the newly added tab
+            }
+        }
+    };
+    const toggleCollapse = (index) => {
+        setCollapsedItems(prev => {
+            const newSet = new Set(prev);
+            if (newSet.has(index)) {
+                newSet.delete(index);
+            }
+            else {
+                newSet.add(index);
+            }
+            return newSet;
+        });
+    };
+    // Watch all repeater items for dynamic labels
+    const watchedItems = useWatch({
+        control,
+        name: name,
+        defaultValue: [],
+    });
+    // Helper function to get dynamic label for an item
+    const getItemLabel = (index) => {
+        // Default label format
+        const baseLabel = itemLabel || translate('core:common.item');
+        // Check if itemLabel has a field name specified (e.g., "Product: {name}")
+        if (typeof itemLabel === 'string' && itemLabel.includes('{') && itemLabel.includes('}')) {
+            const match = itemLabel.match(/\{([^}]+)\}/);
+            if (match) {
+                const fieldName = match[1];
+                const template = itemLabel;
+                // Get the field value from watched items
+                const item = watchedItems?.[index];
+                const fieldValue = item?.[fieldName];
+                // Replace {fieldName} with actual value
+                if (fieldValue) {
+                    return template.replace(/\{[^}]+\}/, fieldValue);
+                }
+                // If no value, show placeholder
+                return template.replace(/\{[^}]+\}/, `#${index + 1}`);
+            }
+        }
+        // Fallback to numbered format
+        return `${baseLabel} ${index + 1}`;
+    };
+    // Validation for repeater as a whole (min items / required)
+    const repeaterValidation = React.useMemo(() => {
+        const rules = {};
+        if (effectiveMinItems && effectiveMinItems > 0) {
+            rules.validate = {
+                minItems: (value) => {
+                    const length = Array.isArray(value) ? value.length : 0;
+                    return length >= effectiveMinItems || `At least ${effectiveMinItems} item(s) are required`;
+                },
+            };
+        }
+        return rules;
+    }, [effectiveMinItems]);
+    const repeaterError = getFieldError(errors, name);
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx("input", { type: "hidden", ...register(name, repeaterValidation) }), label && (_jsxs("div", { className: "mb-4", children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", children: label }), helperText && _jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: helperText }), _jsx(HintDisplay, { hint: hint, hintIcon: hintIcon, hintColor: hintColor })] })), fields.length === 0 ? (
+            /* Empty State */
+            _jsxs("div", { className: "text-center py-12 text-fg-secondary text-sm border-2 border-dashed border-border rounded-lg bg-muted", children: [_jsx("svg", { className: "w-12 h-12 mx-auto mb-3 text-gray-400 dark:text-gray-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }), _jsx("p", { className: "mb-4", children: translate('core:repeater.empty') })] })) : collapsible ? (
+            /* Collapsible/Accordion Mode */
+            _jsx("div", { className: "space-y-3", children: fields.map((field, index) => {
+                    const displayLabel = getItemLabel(index);
+                    const isCollapsed = collapsedItems.has(index);
+                    return (_jsxs("div", { className: "border border-border rounded-lg bg-surface shadow-sm overflow-hidden", children: [_jsxs("div", { className: "flex items-center bg-muted border-b border-border", children: [_jsxs("button", { type: "button", onClick: () => toggleCollapse(index), className: "flex items-center flex-1 px-4 py-3 text-sm font-medium text-fg hover:bg-hover transition-colors text-left", children: [_jsx("svg", { className: `w-5 h-5 mr-2 transition-transform ${isCollapsed ? '' : 'rotate-90'}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }), _jsx("span", { children: displayLabel })] }), _jsxs("div", { className: "flex items-center gap-1 px-2 py-2 border-l border-border", children: [reorderable && (_jsx("button", { type: "button", onClick: () => handleMoveUp(index), disabled: !canMoveUp(index), className: "p-2 text-fg-secondary hover:text-fg hover:bg-hover rounded disabled:opacity-30 disabled:cursor-not-allowed transition-colors", "aria-label": translate('core:common.move_up'), title: translate('core:common.move_up'), children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" }) }) })), reorderable && (_jsx("button", { type: "button", onClick: () => handleMoveDown(index), disabled: !canMoveDown(index), className: "p-2 text-fg-secondary hover:text-fg hover:bg-hover rounded disabled:opacity-30 disabled:cursor-not-allowed transition-colors", "aria-label": translate('core:common.move_down'), title: translate('core:common.move_down'), children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) })), _jsx("button", { type: "button", onClick: () => handleDelete(index), disabled: !canDelete(index), className: "p-2 text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-red-900/30 rounded disabled:opacity-30 disabled:cursor-not-allowed transition-colors", "aria-label": translate('core:common.delete'), title: translate('core:common.delete'), children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }) })] })] }), !isCollapsed && (_jsx("div", { className: "p-6", children: _jsx("div", { className: "space-y-4", children: schema.map((fieldSchema) => {
+                                        const nestedField = {
+                                            ...fieldSchema,
+                                            name: `${name}.${index}.${fieldSchema.name}`,
+                                        };
+                                        return (_jsx(FieldRenderer, { field: nestedField, operation: operation, apiBaseUrl: apiBaseUrl, resource: resource }, fieldSchema.name));
+                                    }) }) }))] }, field.id));
+                }) })) : (
+            /* Tab Mode (Original) */
+            _jsxs("div", { className: "border border-border rounded-lg bg-surface shadow-sm overflow-hidden", children: [_jsxs("div", { className: "flex items-center bg-muted border-b border-border overflow-x-auto", children: [_jsx("div", { className: "flex flex-1 min-w-0", children: fields.map((field, index) => {
+                                    const displayLabel = getItemLabel(index);
+                                    const isActive = activeTab === index;
+                                    return (_jsxs("button", { type: "button", onClick: () => setActiveTab(index), className: `
+											flex items-center px-4 py-3 text-sm font-medium border-r border-border whitespace-nowrap transition-colors
+											${isActive
+                                            ? 'bg-surface text-accent border-b-2 border-b-accent -mb-px'
+                                            : 'text-fg-secondary hover:text-fg hover:bg-hover'}
+										`, children: [_jsx("span", { className: "mr-2", children: displayLabel }), isActive && (_jsx("span", { className: "w-2 h-2 bg-accent rounded-full", "aria-label": translate('core:repeater.active_tab') }))] }, field.id));
+                                }) }), _jsxs("div", { className: "flex items-center gap-1 px-2 py-2 border-l border-border bg-muted", children: [reorderable && (_jsx("button", { type: "button", onClick: () => handleMoveUp(activeTab), disabled: !canMoveUp(activeTab), className: "p-2 text-fg-secondary hover:text-fg hover:bg-hover rounded disabled:opacity-30 disabled:cursor-not-allowed focus:outline-none transition-colors", "aria-label": translate('core:common.move_left'), title: translate('core:common.move_left'), children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) })), reorderable && (_jsx("button", { type: "button", onClick: () => handleMoveDown(activeTab), disabled: !canMoveDown(activeTab), className: "p-2 text-fg-secondary hover:text-fg hover:bg-hover rounded disabled:opacity-30 disabled:cursor-not-allowed focus:outline-none transition-colors", "aria-label": translate('core:common.move_right'), title: translate('core:common.move_right'), children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }) })), _jsx("button", { type: "button", onClick: () => handleDelete(activeTab), disabled: !canDelete(activeTab), className: "p-2 text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-red-900/30 rounded disabled:opacity-30 disabled:cursor-not-allowed focus:outline-none transition-colors", "aria-label": translate('core:common.delete'), title: translate('core:common.delete'), children: _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) }) })] })] }), _jsx("div", { className: "p-6", children: fields.map((field, index) => (_jsx("div", { className: activeTab === index ? 'block' : 'hidden', children: _jsx("div", { className: "space-y-4", children: schema.map((fieldSchema) => {
+                                    // Create a namespaced field for the nested schema
+                                    const nestedField = {
+                                        ...fieldSchema,
+                                        name: `${name}.${index}.${fieldSchema.name}`,
+                                        disabled: disabled || fieldSchema.disabled, // Propagate disabled state
+                                    };
+                                    return (_jsx(FieldRenderer, { field: nestedField, operation: operation, apiBaseUrl: apiBaseUrl, resource: resource }, fieldSchema.name));
+                                }) }) }, field.id))) })] })), _jsx(PillButton, { type: "button", onClick: handleAdd, disabled: !canAdd, className: "w-full border-accent/30 bg-accent-soft text-accent hover:bg-accent-soft", children: _jsxs("span", { className: "flex items-center justify-center", children: [_jsx("svg", { className: "w-5 h-5 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" }) }), translate('core:common.add'), maxItems !== undefined && ` (${fields.length}/${maxItems})`] }) }), (minItems !== undefined || maxItems !== undefined) && (_jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400 text-center", children: [minItems !== undefined && `Minimum: ${minItems}`, minItems !== undefined && maxItems !== undefined && ' • ', maxItems !== undefined && `Maximum: ${maxItems}`] }))] }));
+}

package/dist/components/ResourceModalRenderer.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ModalState } from '../contexts/ResourceModalContext';
+interface ResourceModalRendererProps {
+    modal: ModalState;
+    apiBaseUrl: string;
+    onClose: () => void;
+    onCloseAll: () => void;
+}
+export declare const ResourceModalRenderer: React.MemoExoticComponent<({ modal, apiBaseUrl, onClose, onCloseAll }: ResourceModalRendererProps) => React.JSX.Element>;
+export {};