@maxal_studio/kratosjs-react 1.0.0

package/dist/components/AdminPanel.js

@@ -0,0 +1,194 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { AlertTriangle, Loader2 } from 'lucide-react';
+import { useResourceModal } from '../contexts/ResourceModalContext';
+import { PanelMetadataProvider } from '../contexts/PanelMetadataContext';
+import { PanelProviders } from '../contexts/PanelProviders';
+import { Header } from './layout/Header';
+import { Sidebar } from './layout/Sidebar';
+import { ResourceListPage } from '../pages/ResourceListPage';
+import { PageRenderer } from './pages/PageRenderer';
+import { ResourceModalRenderer } from './ResourceModalRenderer';
+import { ErrorBoundary } from './errors/ErrorBoundary';
+import { Slot } from '../slots/Slot';
+import { PillButton } from './ui/PillButton';
+import { authenticatedFetch } from '../api/authenticatedFetch';
+import { useTranslation } from '../i18n/useTranslation';
+import { useLocale } from '../i18n/useLocale';
+function AdminPanelContent({ apiBaseUrl, panelId }) {
+    const { t } = useTranslation();
+    const { locale } = useLocale();
+    const [darkMode, setDarkMode] = useState(() => {
+        const stored = localStorage.getItem('darkMode');
+        if (stored !== null) {
+            return stored === 'true';
+        }
+        return window.matchMedia('(prefers-color-scheme: dark)').matches;
+    });
+    const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
+    const [panelMetadata, setPanelMetadata] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    // Apply dark mode to document
+    useEffect(() => {
+        if (darkMode) {
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('darkMode', 'true');
+        }
+        else {
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('darkMode', 'false');
+        }
+    }, [darkMode]);
+    // Merge badge maps into panel metadata (resources and pages)
+    const mergeBadgesIntoMeta = (meta, badges) => ({
+        ...meta,
+        resources: (meta.resources || []).map(r => {
+            const b = badges.resources?.[r.slug];
+            return { ...r, badge: b?.value ?? null, badgeColor: b?.color };
+        }),
+        pages: (meta.pages || []).map(p => {
+            const b = badges.pages?.[p.slug];
+            return { ...p, badge: b?.value ?? null, badgeColor: b?.color };
+        }),
+    });
+    // Fetch panel metadata and badges in parallel, then merge
+    useEffect(() => {
+        const metaUrl = panelId ? `${apiBaseUrl}/meta?panelId=${panelId}` : `${apiBaseUrl}/meta`;
+        const badgesUrl = panelId ? `${apiBaseUrl}/meta/badges?panelId=${panelId}` : `${apiBaseUrl}/meta/badges`;
+        const fetchMetadata = async () => {
+            try {
+                const [metaRes, badgesRes] = await Promise.all([
+                    authenticatedFetch(metaUrl, { headers: { 'Content-Type': 'application/json' } }, apiBaseUrl),
+                    authenticatedFetch(badgesUrl, { headers: { 'Content-Type': 'application/json' } }, apiBaseUrl),
+                ]);
+                if (!metaRes.ok) {
+                    if (metaRes.status === 401)
+                        throw new Error('Unauthorized - Please login again');
+                    throw new Error(t('core:error.connect'));
+                }
+                const meta = await metaRes.json();
+                const badges = badgesRes.ok ? await badgesRes.json() : { resources: {}, pages: {} };
+                setPanelMetadata(mergeBadgesIntoMeta(meta, badges));
+            }
+            catch (err) {
+                setError(err instanceof Error ? err.message : t('core:error.connect'));
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchMetadata();
+        // `locale` is a dependency so switching language re-fetches /meta (labels,
+        // nav groups) in the new locale; the locale header is sent automatically.
+    }, [apiBaseUrl, panelId, locale]);
+    // Subscribe to badge refresh events and refetch badges
+    useEffect(() => {
+        const refreshBadges = async () => {
+            const badgesUrl = panelId ? `${apiBaseUrl}/meta/badges?panelId=${panelId}` : `${apiBaseUrl}/meta/badges`;
+            try {
+                const res = await authenticatedFetch(badgesUrl, { headers: { 'Content-Type': 'application/json' } }, apiBaseUrl);
+                if (!res.ok)
+                    return;
+                const badges = await res.json();
+                setPanelMetadata(prev => (prev ? mergeBadgesIntoMeta(prev, badges) : prev));
+            }
+            catch {
+                // ignore
+            }
+        };
+        const handler = () => refreshBadges();
+        window.addEventListener('kratosjs-refresh-badges', handler);
+        return () => window.removeEventListener('kratosjs-refresh-badges', handler);
+    }, [apiBaseUrl, panelId]);
+    if (loading) {
+        return (_jsx("div", { className: "min-h-screen bg-base flex items-center justify-center", children: _jsxs("div", { className: "text-center", children: [_jsx(Loader2, { className: "w-12 h-12 text-accent animate-spin mx-auto" }), _jsx("p", { className: "mt-4 text-fg-secondary", children: t('core:panel.loading') })] }) }));
+    }
+    if (error) {
+        return (_jsx("div", { className: "min-h-screen bg-base flex items-center justify-center", children: _jsxs("div", { className: "text-center p-8 bg-surface border border-border rounded-xl max-w-md", children: [_jsx(AlertTriangle, { className: "w-16 h-16 text-red-500 mx-auto mb-4" }), _jsx("h2", { className: "text-xl font-semibold text-fg mb-2", children: t('core:panel.connection_error') }), _jsx("p", { className: "text-fg-secondary mb-4", children: error }), _jsx(PillButton, { variant: "primary", onClick: () => window.location.reload(), children: t('core:common.retry') })] }) }));
+    }
+    if (!panelMetadata) {
+        return (_jsx("div", { className: "min-h-screen bg-base flex items-center justify-center", children: _jsx("div", { className: "text-center p-8 bg-surface border border-border rounded-lg max-w-md", children: _jsx("p", { className: "text-fg-secondary", children: t('core:panel.empty') }) }) }));
+    }
+    // Determine default route: first page if available, otherwise first resource
+    const defaultRoute = panelMetadata.pages.length > 0
+        ? `/page/${panelMetadata.pages[0].slug}`
+        : panelMetadata.resources.length > 0
+            ? `/${panelMetadata.resources[0].slug}`
+            : '/';
+    return (_jsx(PanelMetadataProvider, { resources: panelMetadata.resources, pages: panelMetadata.pages, children: _jsxs("div", { className: "flex min-h-screen bg-base transition-colors", children: [_jsx(Sidebar, { panelTitle: panelMetadata.title, panelIcon: panelMetadata.icon, panelFavicon: panelMetadata.favicon, resources: panelMetadata.resources, pages: panelMetadata.pages, mobileOpen: mobileSidebarOpen, onMobileClose: () => setMobileSidebarOpen(false) }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx(Header, { panelId: panelMetadata.id, darkMode: darkMode, onDarkModeToggle: () => setDarkMode(!darkMode), onMobileMenuToggle: () => setMobileSidebarOpen(!mobileSidebarOpen), apiBaseUrl: apiBaseUrl, globalSearchAvailable: panelMetadata.globalSearchAvailable }), _jsx("main", { className: "flex-1 overflow-hidden", children: _jsx("div", { className: "h-full w-full overflow-auto p-4 sm:p-6", children: _jsx(ErrorBoundary, { label: "this page", children: _jsxs(Routes, { children: [_jsx(Route, { path: "/", element: _jsx(Navigate, { to: defaultRoute, replace: true }) }), panelMetadata.pages.map(page => (_jsx(Route, { path: `/page/${page.slug}`, element: _jsx(PageRenderer, { pageSlug: page.slug, apiBaseUrl: apiBaseUrl }) }, page.slug))), panelMetadata.resources.map(resource => (_jsx(Route, { path: `/${resource.slug}/*`, element: _jsx(ResourceListPage, { apiBaseUrl: apiBaseUrl, resourceSlug: resource.slug, resourceName: resource.label, pluralLabel: resource.pluralLabel }) }, resource.slug))), _jsx(Route, { path: "*", element: _jsx(Navigate, { to: defaultRoute, replace: true }) })] }) }) }) }), _jsx(Slot, { name: "panel.footer", as: "footer", className: "shrink-0 border-t border-border px-4 py-3 sm:px-6" })] }), _jsx(ModalStackRenderer, { apiBaseUrl: apiBaseUrl })] }) }));
+}
+/**
+ * Renders all modals in the modal stack
+ */
+function ModalStackRenderer({ apiBaseUrl }) {
+    const { modalStack, closeModal, closeAllModals } = useResourceModal();
+    // Refs so handlers always read the latest values without being recreated.
+    // ResourceModalRenderer is memoized and ignores onClose/onCloseAll prop updates.
+    const modalStackRef = useRef(modalStack);
+    modalStackRef.current = modalStack;
+    // When back is pressed on modal M, replaceState to the now-visible state:
+    //   - Parent exists → /${parent.resource}/${parent.recordId}
+    //   - M was the last modal → /${M.resource}  (the list)
+    // We use replaceState (not navigate) so React Router's internal location is never
+    // mutated — no modal refresh/flash.  Re-opening still works because navigate() from
+    // a row-click always produces a new location.key, which ResourceListPage watches.
+    //
+    // IMPORTANT: only update the URL if it currently belongs to one of the open modal
+    // resources.  If the user opened a modal via a cross-resource deeplink the URL bar
+    // still shows the origin page (e.g. /withdrawals) — we must not overwrite that.
+    const handleCloseModal = useCallback(() => {
+        const stack = modalStackRef.current;
+        if (stack.length === 0)
+            return;
+        const closing = stack[stack.length - 1];
+        closeModal();
+        if (stack.length === 1) {
+            // Last modal closing — restore to where the user came from.
+            // originUrl is set when the modal was opened via a cross-resource deeplink
+            // (pushState updated the address bar; originUrl holds the prior URL).
+            // Without originUrl, only update if the address bar is on this resource.
+            if (closing.originUrl) {
+                window.history.replaceState(null, '', closing.originUrl);
+            }
+            else {
+                const firstSegment = window.location.pathname.split('/').filter(Boolean)[0] ?? '';
+                if (firstSegment === closing.resource) {
+                    window.history.replaceState(null, '', `/${closing.resource}`);
+                }
+            }
+        }
+        else {
+            // Parent modal is still visible — show the parent's own URL.
+            // NOTE: we use the parent's resource/id, NOT parent.originUrl.
+            // originUrl means "where to go when *the parent itself* closes",
+            // not the URL to display while the parent is still open.
+            const parent = stack[stack.length - 2];
+            window.history.replaceState(null, '', `/${parent.resource}/${parent.recordId || ''}`);
+        }
+    }, [closeModal]);
+    // Close All: jump straight to the origin (before any modal was opened).
+    const handleCloseAll = useCallback(() => {
+        const stack = modalStackRef.current;
+        if (stack.length === 0)
+            return;
+        const root = stack[0];
+        closeAllModals();
+        if (root.originUrl) {
+            // Root was opened via deeplink — restore the page the user came from.
+            window.history.replaceState(null, '', root.originUrl);
+        }
+        else {
+            // URL-based root — only reset to the list if the address bar is on it.
+            const firstSegment = window.location.pathname.split('/').filter(Boolean)[0] ?? '';
+            if (firstSegment === root.resource) {
+                window.history.replaceState(null, '', `/${root.resource}`);
+            }
+        }
+    }, [closeAllModals]);
+    return (_jsx(_Fragment, { children: modalStack.map(modal => (_jsx(ResourceModalRenderer, { modal: modal, apiBaseUrl: apiBaseUrl, onClose: handleCloseModal, onCloseAll: handleCloseAll }, `${modal.resource}-${modal.recordId || 'create'}-${modal.mode}-${modal.depth}`))) }));
+}
+export function AdminPanel({ apiBaseUrl, panelId, customFields, customColumns, customWidgets, customBlocks, customAuthChallenges, customSlots, i18nConfig, }) {
+    return (_jsx(BrowserRouter, { children: _jsx(PanelProviders, { apiBaseUrl: apiBaseUrl, customFields: customFields, customColumns: customColumns, customWidgets: customWidgets, customBlocks: customBlocks, customAuthChallenges: customAuthChallenges, customSlots: customSlots, i18nConfig: i18nConfig, children: _jsx(AdminPanelContent, { apiBaseUrl: apiBaseUrl, panelId: panelId }) }) }));
+}

package/dist/components/Checkbox.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface CheckboxProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    id?: string;
+    className?: string;
+    disabled?: boolean;
+}
+export declare function Checkbox({ checked, onChange, id, className, disabled }: CheckboxProps): React.JSX.Element;
+export {};

package/dist/components/Checkbox.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../utils/classNames';
+export function Checkbox({ checked, onChange, id, className, disabled }) {
+    const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
+    return (_jsxs("label", { htmlFor: checkboxId, className: cn('flex items-center cursor-pointer select-none', disabled && 'cursor-not-allowed opacity-50', className), children: [_jsx("input", { id: checkboxId, type: "checkbox", checked: checked, onChange: e => onChange(e.target.checked), disabled: disabled, className: "sr-only" }), _jsx("div", { className: cn('w-4 h-4 rounded border transition-colors flex items-center justify-center', checked
+                    ? 'bg-accent border-accent'
+                    : cn('border-gray-300 dark:border-gray-600', 'bg-gray-200 dark:bg-gray-700', 'hover:bg-gray-300 dark:hover:bg-gray-600'), 'focus-within:ring-2 focus-within:ring-ring/50 focus-within:border-accent ', disabled && 'hover:bg-gray-200 dark:hover:bg-gray-700 cursor-not-allowed'), children: checked && (_jsx("svg", { className: "w-3 h-3 text-white", fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2.5", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { d: "M5 13l4 4L19 7" }) })) })] }));
+}

package/dist/components/CheckboxField.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { FieldProps } from '../types';
+/**
+ * Checkbox field component
+ * Renders a single checkbox input
+ */
+export declare function CheckboxField(props: FieldProps): React.JSX.Element;

package/dist/components/CheckboxField.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 { formatBoolean } from '../utils/formatValue';
+import { Icon } from './utils/Icon';
+/**
+ * Checkbox field component
+ * Renders a single checkbox input
+ */
+export function CheckboxField(props) {
+    // View mode: render formatted display
+    if (props.mode === 'view') {
+        const value = props.value;
+        const displayValue = formatBoolean(value);
+        return (_jsx(ViewFieldWrapper, { label: props.label, children: _jsxs("div", { className: "flex items-center gap-2", children: [value ? (_jsx(Icon, { name: "Check", size: 16, className: "text-green-600" })) : (_jsx(Icon, { name: "X", size: 16, className: "text-gray-400" })), _jsx("span", { 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: [_jsxs("div", { className: "flex items-start", children: [_jsx("div", { className: "flex items-center h-5", children: _jsx("input", { id: props.name, type: "checkbox", ...register(props.name, validation), disabled: props.disabled, className: cn('w-4 h-4 border rounded', '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') }) }), props.label && (_jsxs("div", { className: "ml-3", children: [_jsxs("label", { htmlFor: props.name, className: "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: "*" })] }), props.helperText && (_jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400 mt-0.5", children: props.helperText }))] }))] }), hasError && _jsx("p", { className: "mt-1 ml-7 text-sm text-red-600 dark:text-red-400", children: error?.message }), !hasError && (_jsx("div", { className: "ml-7", children: _jsx(HintDisplay, { hint: props.hint, hintIcon: props.hintIcon, hintColor: props.hintColor }) }))] }));
+}

package/dist/components/ColorPickerField.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { FieldProps } from '../types';
+/**
+ * ColorPicker field component
+ * Renders a color input with preview
+ */
+export declare function ColorPickerField(props: FieldProps): React.JSX.Element;

package/dist/components/ColorPickerField.js

@@ -0,0 +1,26 @@
+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 { translate } from '../i18n/activeLocale';
+/**
+ * ColorPicker field component
+ * Renders a color input with preview
+ */
+export function ColorPickerField(props) {
+    // View mode: render formatted display
+    if (props.mode === 'view') {
+        const value = props.value || '#000000';
+        return (_jsx(ViewFieldWrapper, { label: props.label, children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "w-8 h-8 rounded border border-border", style: { backgroundColor: value } }), _jsx("span", { className: "text-fg font-mono", children: value })] }) }));
+    }
+    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 color value for preview
+    const colorValue = useWatch({ control, name: props.name, defaultValue: props.default || '#000000' });
+    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: "*" })] })), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("input", { id: props.name, type: "color", ...register(props.name, validation), disabled: props.disabled, className: cn('h-10 w-20 border rounded-lg cursor-pointer', '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', props.disabled && 'opacity-60 cursor-not-allowed') }), _jsx("div", { className: "flex-1", children: _jsx("input", { type: "text", value: colorValue, readOnly: true, className: cn('w-full px-3 py-2 border rounded-lg shadow-sm', 'bg-muted text-fg border-border text-sm font-mono') }) }), _jsx("div", { className: "h-10 w-10 rounded-lg border-2 border-border shadow-sm", style: { backgroundColor: colorValue }, title: translate('core:a11y.color_preview') })] }), 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/DateTimePickerField.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { FieldProps } from '../types';
+/**
+ * DateTimePicker field component
+ * Renders a date/datetime input
+ */
+export declare function DateTimePickerField(props: FieldProps): React.JSX.Element;

package/dist/components/DateTimePickerField.js

@@ -0,0 +1,64 @@
+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 { formatDate as formatDateValue } from '../utils/formatValue';
+/**
+ * DateTimePicker field component
+ * Renders a date/datetime input
+ */
+export function DateTimePickerField(props) {
+    // View mode: render formatted display
+    if (props.mode === 'view') {
+        const value = props.value;
+        const displayValue = formatDateValue(value, props.displayFormat || props.format);
+        return _jsx(ViewFieldWrapper, { label: props.label, children: displayValue });
+    }
+    const { register, formState: { errors }, control, } = useFormContext();
+    const validation = useValidation(props.validation?.rules || [], props.operation, props.name);
+    const error = getFieldError(errors, props.name);
+    const hasError = !!error;
+    // Watch the current value to format it for the input
+    const currentValue = useWatch({
+        control,
+        name: props.name,
+        defaultValue: undefined,
+    });
+    // Determine input type based on format
+    const getInputType = () => {
+        const format = props.format?.toLowerCase() || '';
+        // Time only (HH:mm, HH:mm:ss, h:m, etc.)
+        if (format.includes('hh:mm') || format.includes('h:m')) {
+            // Check if it's ONLY time (no date components)
+            const hasDateComponent = format.includes('yyyy') || format.includes('dd') || format.includes('mm/') || format.includes('dd/');
+            if (!hasDateComponent) {
+                return 'time';
+            }
+            // Has both date and time
+            return 'datetime-local';
+        }
+        // Default to date
+        return 'date';
+    };
+    // Format min/max dates/times for HTML input
+    const formatDate = (date) => {
+        if (!date)
+            return undefined;
+        const d = new Date(date);
+        const inputType = getInputType();
+        if (inputType === 'time') {
+            // Format as HH:mm for time input
+            return d.toTimeString().slice(0, 5);
+        }
+        else if (inputType === 'datetime-local') {
+            // Format as YYYY-MM-DDTHH:mm for datetime-local input
+            return d.toISOString().slice(0, 16);
+        }
+        // Format as YYYY-MM-DD for date input
+        return d.toISOString().split('T')[0];
+    };
+    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: getInputType(), ...register(props.name, validation), value: currentValue ? formatDate(currentValue) : '', disabled: props.disabled, min: formatDate(props.minDate), max: formatDate(props.maxDate), 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') }), 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/FileUploadField.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { FieldProps } from '../types';
+export declare function FileUploadField({ name, label, helperText, hint, hintIcon, hintColor, acceptedFileTypes, maxSize, minSize, multiple, maxFiles, disabled, required, visibility, directory, bucket, apiBaseUrl, resource, mode, value, validation, operation, }: FieldProps & {
+    visibility?: 'public' | 'private';
+    directory?: string;
+    bucket?: string;
+    apiBaseUrl?: string;
+    resource?: string;
+}): React.JSX.Element;