@airoom/nextmin-react 2.0.2 → 2.0.3

package/README.md

@@ -63,12 +63,14 @@ Wrap only the admin area with the provider and render the AdminApp. Mark these f
 // app/admin/layout.tsx
 'use client'
 import { NextMinProvider } from '@airoom/nextmin-react';
+import theme from '../../nextmin-theme';
 
 export default function AdminLayout({ children }: { children: React.ReactNode }) {
   return (
     <NextMinProvider 
       apiUrl={process.env.NEXT_PUBLIC_NEXTMIN_API_URL} 
       apiKey={process.env.NEXT_PUBLIC_NEXTMIN_API_KEY}
+      theme={theme}
     >
       {children}
     </NextMinProvider>
@@ -128,6 +130,61 @@ export default Admin;
 
 Wrap with `<NextMinProvider>` at a top level where appropriate (e.g., `_app.tsx`) and ensure it runs on the client.
 
+## Dynamic Theme System
+
+NextMin supports a dynamic runtime styling and layout configuration system. You can place a configuration file named `nextmin-theme.ts` or `nextmin-theme.js` in the root of your host project (where `package.json` is located). 
+
+The package will automatically detect and load the configuration at startup/SSR (Server-Side Rendering) and sync it with the client with zero build-time configuration or hydration mismatches.
+
+### Configuration Example (`nextmin-theme.ts` or `nextmin-theme.js`)
+
+Create a file in your project root:
+
+```ts
+import type { ThemeConfig } from '@airoom/nextmin-react';
+
+export default {
+  // Main background color of the admin layout.
+  // Can be a Tailwind class (e.g. 'bg-slate-50', 'bg-[#123456]') or direct color (e.g. '#f3f4f6', 'rgba(0,0,0,0.05)')
+  mainAdminBgColor: '#e0f2fe',
+
+  // Sidebar container background color
+  sidebarColor: '#0f172a',
+
+  // Active menu link item background color
+  activeMenuBgColor: '#38bdf8',
+
+  // Top Nav container background color (if custom navbar is implemented)
+  topNavBgColor: '#ffffff',
+
+  // Brand header height (top nav equivalent height in sidebar)
+  // Can be a Tailwind class (e.g. 'h-16') or raw number/length (e.g. 70, '70px')
+  topNavHeight: '70px',
+
+  // Global form input controls height
+  // Can be a Tailwind class (e.g. 'h-10') or raw number/length (e.g. 48, '48px')
+  inputHeight: '48px',
+
+  // Global button/input/select control border radius
+  // Can be a Tailwind class (e.g. 'rounded-lg') or raw number/length (e.g. 12, '12px')
+  inputRadius: '12px',
+
+  // Sidebar column width
+  // Can be a Tailwind class (e.g. 'w-64') or raw number/length (e.g. 280, '280px')
+  sidebarWidth: '280px',
+
+  // Sidebar layout alignment position: 'left' or 'right'
+  sidebarPosition: 'right',
+
+  // HeroUI primary button and highlight colors (converts hex color to HSL automatically)
+  primaryColor: '#001f43',
+} as ThemeConfig;
+```
+
+> [!TIP]
+> All sizes and dimensions defined as direct CSS units (like `px`, `rem`, etc.) will automatically have `max-height: 100%` and `max-width: 100%` constraints applied to ensure they conform to their respective parent container boundaries.
+
+
 ## Default admin credentials (after setup)
 
 After completing the backend setup, sign in with the default super user and change the password immediately:

package/dist/components/AddressAutocomplete.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export type LatLng = {
     lat: number;
     lng: number;
@@ -17,5 +18,7 @@ export type AddressAutocompleteGoogleProps = {
     countryCodes?: string[];
     limit?: number;
     apiKey?: string;
+    isInvalid?: boolean;
+    errorMessage?: React.ReactNode;
 };
-export default function AddressAutocompleteGoogle({ name, label, description, value, onChange, disabled, required, className, classNames, countryCodes, limit, apiKey, }: AddressAutocompleteGoogleProps): import("react/jsx-runtime").JSX.Element;
+export default function AddressAutocompleteGoogle({ name, label, description, value, onChange, disabled, required, className, classNames, countryCodes, limit, apiKey, isInvalid, errorMessage, }: AddressAutocompleteGoogleProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/AddressAutocomplete.js

@@ -12,7 +12,7 @@ function deriveStableKey(s) {
     const label = s?.placePrediction?.text?.toString?.();
     return pid ? String(pid) : label ? String(label) : null;
 }
-export default function AddressAutocompleteGoogle({ name, label, description, value, onChange, disabled, required, className, classNames, countryCodes, limit = 8, apiKey, }) {
+export default function AddressAutocompleteGoogle({ name, label, description, value, onChange, disabled, required, className, classNames, countryCodes, limit = 8, apiKey, isInvalid, errorMessage, }) {
     // ---------------- Hooks (ALL before any return) ----------------
     const [q, setQ] = useState(value ?? '');
     useEffect(() => {
@@ -151,7 +151,7 @@ export default function AddressAutocompleteGoogle({ name, label, description, va
         return String(sel);
     }
     // ------- Render: keep subtree shape stable; disable when not ready -------
-    return (_jsx("div", { className: className, children: _jsx(Autocomplete, { "aria-label": label ?? name, label: label, labelPlacement: "outside", placeholder: "Type address", name: name, isRequired: required, description: description, variant: "bordered", classNames: classNames, isDisabled: disabled || !ready, items: ready ? items : [], inputValue: q, isClearable: true, onClear: () => {
+    return (_jsx("div", { className: className, children: _jsx(Autocomplete, { isInvalid: isInvalid, errorMessage: errorMessage, "aria-label": label ?? name, label: label, labelPlacement: "outside", placeholder: "Type address", name: name, isRequired: required, description: description, variant: "bordered", classNames: classNames, isDisabled: disabled || !ready, items: ready ? items : [], inputValue: q, isClearable: true, onClear: () => {
                 manualClearRef.current = true;
                 setQ('');
                 setItems([]);

package/dist/components/AdminApp.js

@@ -13,6 +13,9 @@ import { api } from '../lib/api';
 import { AuthClient } from '../lib/AuthClient';
 import { RealtimeClient } from '../lib/RealtimeClient';
 import { systemLoading, systemLoaded, systemFailed, } from '../state/nextMinSlice';
+import clsx from 'clsx';
+import { isTailwindClass, resolveHeightValue, resolveRadiusValue, resolveSidebarWidth, hexToHslComponents, } from '../providers/themeResolver';
+import { useNextMin } from '../providers/NextMinProvider';
 export function AdminApp() {
     const dispatch = useDispatch();
     const router = useRouter();
@@ -89,6 +92,86 @@ export function AdminApp() {
             router.replace('/admin/dashboard');
         }
     }, [hydrated, haveToken, onAuthRoute, router]);
+    const { theme } = useNextMin();
+    const themeStyles = useMemo(() => {
+        if (!theme)
+            return {};
+        const styles = {};
+        if (theme.sidebarWidth) {
+            const width = resolveSidebarWidth(theme.sidebarWidth);
+            if (width && !isTailwindClass(theme.sidebarWidth)) {
+                styles['--nm-sidebar-width'] = width;
+            }
+        }
+        if (theme.topNavHeight) {
+            const height = resolveHeightValue(theme.topNavHeight);
+            if (height && !isTailwindClass(theme.topNavHeight)) {
+                styles['--nm-top-nav-height'] = height;
+            }
+        }
+        if (theme.inputHeight) {
+            const height = resolveHeightValue(theme.inputHeight);
+            if (height && !isTailwindClass(theme.inputHeight)) {
+                styles['--nm-input-height'] = height;
+            }
+        }
+        if (theme.inputRadius) {
+            const radius = resolveRadiusValue(theme.inputRadius);
+            if (radius && !isTailwindClass(theme.inputRadius)) {
+                styles['--nm-input-radius'] = radius;
+            }
+        }
+        if (theme.mainAdminBgColor && !isTailwindClass(theme.mainAdminBgColor)) {
+            styles['--nm-admin-bg'] = theme.mainAdminBgColor;
+        }
+        if (theme.sidebarColor && !isTailwindClass(theme.sidebarColor)) {
+            styles['--nm-sidebar-bg'] = theme.sidebarColor;
+        }
+        if (theme.activeMenuBgColor && !isTailwindClass(theme.activeMenuBgColor)) {
+            styles['--nm-active-menu-bg'] = theme.activeMenuBgColor;
+        }
+        if (theme.activeMenuTextColor && !isTailwindClass(theme.activeMenuTextColor)) {
+            styles['--nm-active-menu-text'] = theme.activeMenuTextColor;
+        }
+        if (theme.menuTextColor && !isTailwindClass(theme.menuTextColor)) {
+            styles['--nm-menu-text'] = theme.menuTextColor;
+        }
+        if (theme.menuHoverBgColor && !isTailwindClass(theme.menuHoverBgColor)) {
+            styles['--nm-menu-hover-bg'] = theme.menuHoverBgColor;
+        }
+        if (theme.menuHoverTextColor && !isTailwindClass(theme.menuHoverTextColor)) {
+            styles['--nm-menu-hover-text'] = theme.menuHoverTextColor;
+        }
+        if (theme.sidebarTextColor && !isTailwindClass(theme.sidebarTextColor)) {
+            styles['--nm-sidebar-text'] = theme.sidebarTextColor;
+        }
+        if (theme.sidebarBorderColor && !isTailwindClass(theme.sidebarBorderColor)) {
+            styles['--nm-sidebar-border'] = theme.sidebarBorderColor;
+        }
+        if (theme.topNavBgColor && !isTailwindClass(theme.topNavBgColor)) {
+            styles['--nm-top-nav-bg'] = theme.topNavBgColor;
+        }
+        if (theme.primaryColor && !isTailwindClass(theme.primaryColor)) {
+            const hslVal = hexToHslComponents(theme.primaryColor);
+            if (hslVal) {
+                styles['--heroui-primary'] = hslVal;
+                styles['--heroui-primary-500'] = hslVal;
+                styles['--heroui-primary-400'] = hslVal;
+                styles['--heroui-primary-600'] = hslVal;
+                const parts = hslVal.split(' ');
+                if (parts.length === 3) {
+                    const lVal = parseInt(parts[2]);
+                    const fgHsl = lVal > 60 ? '0 0% 0%' : '0 0% 100%';
+                    styles['--heroui-primary-foreground'] = fgHsl;
+                }
+            }
+        }
+        return styles;
+    }, [theme]);
+    const mainAdminBgClass = theme?.mainAdminBgColor && isTailwindClass(theme.mainAdminBgColor)
+        ? theme.mainAdminBgColor
+        : '';
+    const sidebarPosition = theme?.sidebarPosition || 'left';
     // 1) While hydrating: full screen loader
     if (!hydrated) {
         return _jsx(SectionLoader, { label: "Please wait..." });
@@ -107,5 +190,7 @@ export function AdminApp() {
         return _jsx(SectionLoader, { label: "Loading dashboard\u2026" });
     }
     // 4) Authed → Admin chrome + pages
-    return (_jsxs(_Fragment, { children: [_jsx(AdminRouteNormalizer, {}), _jsxs("div", { className: "grid grid-cols-[240px_1fr] h-[100dvh]", children: [_jsx(Sidebar, {}), _jsx("div", { className: "p-4 overflow-auto relative", children: _jsx(NextMinRouter, {}) })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(AdminRouteNormalizer, {}), _jsxs("div", { className: clsx("nextmin-theme-provider flex h-[100dvh] w-full", sidebarPosition === 'right' ? "flex-row-reverse" : "flex-row"), style: themeStyles, children: [_jsx(Sidebar, {}), _jsx("div", { className: clsx("flex-1 p-4 overflow-auto relative", mainAdminBgClass), style: {
+                            backgroundColor: theme?.mainAdminBgColor && !isTailwindClass(theme.mainAdminBgColor) ? 'var(--nm-admin-bg)' : undefined
+                        }, children: _jsx(NextMinRouter, {}) })] })] }));
 }

package/dist/components/FileUploader.d.ts

@@ -27,6 +27,9 @@ export type FileUploaderProps = {
     disabled?: boolean;
     required?: boolean;
     className?: string;
+    isImage?: boolean;
+    isInvalid?: boolean;
+    errorMessage?: string;
 };
 export declare const FileUploader: React.FC<FileUploaderProps>;
 export {};

package/dist/components/FileUploader.js

@@ -69,16 +69,50 @@ const normalizeAccept = (input) => {
     });
 };
 const shallowEqArr = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);
-// Treat only valid URLs/data/blobs as safe preview refs
+// Accept any URL/blob/data reference as a valid file ref
 function isSafeFileRef(s) {
     const str = (s ?? '').trim();
     if (!str)
         return false;
-    if (/^(https?:\/\/|data:image\/|blob:)/i.test(str))
+    if (/^(https?:\/\/|data:|blob:)/i.test(str))
         return true;
-    const noQuery = str.replace(/[?#].*$/, '');
-    return /\.(png|jpe?g|gif|webp|svg|bmp|ico|tiff?|avif)$/i.test(noQuery);
+    return /\.\w{2,6}$/i.test(str.replace(/[?#].*$/, ''));
 }
+// Check if a URL or mime type is an image
+function isImageRef(url, type, isImageMode) {
+    if (isImageMode)
+        return true;
+    if (type && type.startsWith('image/'))
+        return true;
+    const noQuery = (url ?? '').replace(/[?#].*$/, '');
+    return /\.(png|jpe?g|gif|webp|svg|bmp|ico|tiff?|avif)$/i.test(noQuery) ||
+        /^data:image\//i.test(url);
+}
+// Friendly label for file type
+function fileTypeLabel(url, type) {
+    if (type) {
+        if (type === 'application/pdf')
+            return 'PDF';
+        if (type.startsWith('image/'))
+            return type.split('/')[1].toUpperCase();
+        if (type.startsWith('video/'))
+            return 'VIDEO';
+        if (type.startsWith('audio/'))
+            return 'AUDIO';
+        if (type.includes('word'))
+            return 'DOCX';
+        if (type.includes('excel') || type.includes('spreadsheet'))
+            return 'XLSX';
+        if (type.includes('powerpoint') || type.includes('presentation'))
+            return 'PPTX';
+        if (type.includes('zip'))
+            return 'ZIP';
+    }
+    const ext = (url ?? '').replace(/[?#].*$/, '').split('.').pop()?.toUpperCase() || 'FILE';
+    return ext.length > 5 ? 'FILE' : ext;
+}
+// Document icon SVG (used for non-image files)
+const DocIcon = ({ label }) => (_jsxs("div", { className: "w-full h-full flex flex-col items-center justify-center gap-2 p-2", children: [_jsxs("svg", { fill: "none", viewBox: "0 0 48 48", className: "w-10 h-10 text-primary", "aria-hidden": true, children: [_jsx("rect", { x: "8", y: "4", width: "26", height: "36", rx: "3", fill: "currentColor", fillOpacity: "0.12", stroke: "currentColor", strokeWidth: "2" }), _jsx("path", { d: "M22 4v10h12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M14 20h20M14 26h16M14 32h12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] }), _jsx("span", { className: "text-xs font-bold text-primary uppercase tracking-wider", children: label })] }));
 // Normalize incoming controlled value into an array of strings for comparison
 function normalizeToArray(v) {
     if (Array.isArray(v))
@@ -87,7 +121,7 @@ function normalizeToArray(v) {
         return [v];
     return [];
 }
-export const FileUploader = ({ name, label, endpoint = DEFAULT_ENDPOINT, getAuthHeaders = defaultAuthHeaders, accept, multiple = false, maxFilesCount, maxSizeBytes = DEFAULT_MAX, value, onChange, mapResult = (it) => it.url, description, disabled, required, className, }) => {
+export const FileUploader = ({ name, label, endpoint = DEFAULT_ENDPOINT, getAuthHeaders = defaultAuthHeaders, accept, multiple = false, maxFilesCount, maxSizeBytes = DEFAULT_MAX, value, onChange, mapResult = (it) => it.url, description, disabled, required, className, isImage, isInvalid: isInvalidProp, errorMessage, }) => {
     const containerRef = useRef(null);
     const pickerRef = useRef(null);
     // **NO readOnly/disabled** -> participates in native validation
@@ -149,6 +183,13 @@ export const FileUploader = ({ name, label, endpoint = DEFAULT_ENDPOINT, getAuth
     const showPlusPlaceholder = !disabled && remainingCapacity > 0 && !uploadingOrIdle;
     const acceptTokens = useMemo(() => normalizeAccept(accept), [accept]);
     const acceptAttr = useMemo(() => acceptTokens?.join(',') || undefined, [acceptTokens]);
+    const isImageMode = useMemo(() => {
+        if (isImage)
+            return true;
+        if (!acceptTokens)
+            return false;
+        return acceptTokens.some((t) => t.startsWith('image/'));
+    }, [isImage, acceptTokens]);
     const oversize = (f) => f.size > (maxSizeBytes || DEFAULT_MAX);
     const typeAllowed = (f) => {
         if (!acceptTokens || !acceptTokens.length)
@@ -282,28 +323,38 @@ export const FileUploader = ({ name, label, endpoint = DEFAULT_ENDPOINT, getAuth
                 : 'Upload limit reached.');
             return;
         }
-        const f = files[0];
-        if (oversize(f)) {
-            setTouched(true);
-            setError(`File too large. Max ${((maxSizeBytes || DEFAULT_MAX) / MB).toFixed(1)} MB`);
-            return;
+        const filesToProcess = multiple ? files.slice(0, remainingCapacity) : [files[0]];
+        const stagedItems = [];
+        let hasError = false;
+        let errMessage = '';
+        for (const f of filesToProcess) {
+            if (oversize(f)) {
+                errMessage = `File too large. Max ${((maxSizeBytes || DEFAULT_MAX) / MB).toFixed(1)} MB`;
+                hasError = true;
+                continue;
+            }
+            if (!typeAllowed(f)) {
+                errMessage = `File type not allowed${acceptAttr ? ` (${acceptAttr})` : ''}`;
+                hasError = true;
+                continue;
+            }
+            stagedItems.push({
+                id: uid(),
+                file: f,
+                name: f.name,
+                size: f.size,
+                type: f.type,
+                progress: 0,
+                status: 'idle',
+                previewUrl: URL.createObjectURL(f),
+            });
         }
-        if (!typeAllowed(f)) {
+        if (hasError && stagedItems.length === 0) {
             setTouched(true);
-            setError(`File type not allowed${acceptAttr ? ` (${acceptAttr})` : ''}`);
+            setError(errMessage);
             return;
         }
-        const staged = {
-            id: uid(),
-            file: f,
-            name: f.name,
-            size: f.size,
-            type: f.type,
-            progress: 0,
-            status: 'idle',
-            previewUrl: URL.createObjectURL(f),
-        };
-        setError(null);
+        setError(hasError ? errMessage : null);
         if (!multiple) {
             setItems((prev) => {
                 prev.forEach((p) => p.xhr?.abort());
@@ -311,11 +362,11 @@ export const FileUploader = ({ name, label, endpoint = DEFAULT_ENDPOINT, getAuth
                     if (p.previewUrl?.startsWith('blob:'))
                         URL.revokeObjectURL(p.previewUrl);
                 });
-                return [staged];
+                return stagedItems.slice(0, 1);
             });
         }
         else {
-            setItems((prev) => [...prev, staged]);
+            setItems((prev) => [...prev, ...stagedItems]);
         }
     };
     // Upload one
@@ -332,6 +383,10 @@ export const FileUploader = ({ name, label, endpoint = DEFAULT_ENDPOINT, getAuth
             const form = new FormData();
             // @ts-ignore backend expects 'file'
             form.append('file', item.file);
+            const originalName = item.file?.name || item.name || '';
+            if (originalName) {
+                form.append('originalName', originalName);
+            }
             xhr.upload.onprogress = (ev) => {
                 if (!ev.lengthComputable)
                     return;
@@ -437,7 +492,8 @@ export const FileUploader = ({ name, label, endpoint = DEFAULT_ENDPOINT, getAuth
         const files = Array.from(e.dataTransfer.files ?? []);
         stageAndQueue(files);
     };
-    const isInvalid = !!error;
+    const isInvalid = isInvalidProp || !!error;
+    const displayError = errorMessage || error;
     return (_jsxs("div", { ref: containerRef, className: className, role: "group", "aria-labelledby": label ? `${name}-label` : undefined, "aria-invalid": isInvalid || undefined, "aria-describedby": isInvalid ? `${name}-error` : undefined, "data-invalid": isInvalid ? '' : undefined, children: [label ? (_jsxs("label", { id: `${name}-label`, className: `block text-sm mb-1 ${isInvalid ? 'text-danger' : 'text-small'}`, htmlFor: `uploader-${name}`, children: [label, " ", required ? _jsx("span", { className: "text-danger", children: "*" }) : null] })) : null, _jsx("input", { ref: validatorRef, type: "text", name: `${name}__value`, value: doneItems
                     .map((d) => d.uploaded?.url || '')
                     .filter(Boolean)
@@ -450,10 +506,10 @@ export const FileUploader = ({ name, label, endpoint = DEFAULT_ENDPOINT, getAuth
                     setTouched(true);
                     setError('Please wait for uploads to finish.');
                 } }), _jsx("input", { ref: pickerRef, type: "file", accept: acceptTokens?.join(','), multiple: multiple, onChange: onInputChange, hidden: true, disabled: disabled, name: name, id: `uploader-${name}` }), _jsxs("div", { className: "grid gap-3 grid-cols-3", onDragOver: (e) => e.preventDefault(), onDrop: onDrop, children: [items.map((it) => (_jsxs("div", { className: 'relative aspect-square rounded-xl overflow-hidden border bg-default-50 ' +
-                            (isInvalid ? 'border-danger text-danger' : 'border-default-200'), children: [it.previewUrl ? (_jsx("img", { src: it.previewUrl, alt: it.name, className: "w-full h-full object-cover" })) : (_jsx("div", { className: "w-full h-full flex items-center justify-center text-xs text-default-600", children: it.name })), it.status === 'uploading' ? (_jsx("div", { className: "absolute inset-0 bg-black/30 flex items=end p-2", children: _jsx(Progress, { "aria-label": "upload", size: "sm", value: it.progress, className: "w-full" }) })) : null, it.status === 'deleting' ? (_jsx("div", { className: "absolute inset-0 bg-black/30 flex items-center justify-center text-white text-xs", children: "Deleting\u2026" })) : null, it.status === 'error' ? (_jsx("div", { className: "absolute bottom-0 left-0 right-0 bg-danger text-white text-xs px-2 py-1", children: it.error || 'Upload failed' })) : null, _jsx("div", { className: "absolute top-1 right-1 flex gap-1", children: it.status === 'uploading' ? (_jsx(Tooltip, { content: "Cancel", children: _jsx("button", { type: "button", onClick: () => itemsRef.current.find((x) => x.id === it.id)?.xhr?.abort(), className: "bg-white/80 hover:bg-white text-xs px-2 py-1 rounded", "aria-label": "Cancel upload", children: "\u2715" }) })) : it.status === 'error' ? (_jsx(Tooltip, { content: "Retry", children: _jsx("button", { type: "button", onClick: () => uploadOne(it.id), className: "bg-white/80 hover:bg-white text-xs px-2 py-1 rounded", "aria-label": "Retry upload", children: "Retry" }) })) : (_jsx(Tooltip, { content: "Delete", children: _jsx(Button, { variant: "ghost", color: "danger", isIconOnly: true, size: "sm", onPress: () => requestDelete(it.id), isDisabled: it.status === 'deleting', "aria-label": "Delete file", children: _jsx(TrashIcon, {}) }) })) })] }, it.id))), showPlusPlaceholder ? (_jsx("button", { type: "button", onClick: () => pickerRef.current?.click(), disabled: disabled, className: 'aspect-square rounded-xl border-2 border-dashed transition-colors flex items-center justify-center ' +
+                            (isInvalid ? 'border-danger text-danger' : 'border-default-200'), children: [it.previewUrl && isImageRef(it.previewUrl, it.type, isImageMode) ? (_jsx("img", { src: it.previewUrl, alt: it.name, className: "w-full h-full object-cover" })) : it.previewUrl || it.name ? (_jsx(DocIcon, { label: fileTypeLabel(it.previewUrl ?? it.name, it.type) })) : (_jsx("div", { className: "w-full h-full flex items-center justify-center text-xs text-default-600", children: it.name })), it.status === 'uploading' ? (_jsx("div", { className: "absolute inset-0 bg-black/30 flex items=end p-2", children: _jsx(Progress, { "aria-label": "upload", size: "sm", value: it.progress, className: "w-full" }) })) : null, it.status === 'deleting' ? (_jsx("div", { className: "absolute inset-0 bg-black/30 flex items-center justify-center text-white text-xs", children: "Deleting\u2026" })) : null, it.status === 'error' ? (_jsx("div", { className: "absolute bottom-0 left-0 right-0 bg-danger text-white text-xs px-2 py-1", children: it.error || 'Upload failed' })) : null, _jsx("div", { className: "absolute top-1 right-1 flex gap-1", children: it.status === 'uploading' ? (_jsx(Tooltip, { content: "Cancel", children: _jsx("button", { type: "button", onClick: () => itemsRef.current.find((x) => x.id === it.id)?.xhr?.abort(), className: "bg-white/80 hover:bg-white text-xs px-2 py-1 rounded", "aria-label": "Cancel upload", children: "\u2715" }) })) : it.status === 'error' ? (_jsx(Tooltip, { content: "Retry", children: _jsx("button", { type: "button", onClick: () => uploadOne(it.id), className: "bg-white/80 hover:bg-white text-xs px-2 py-1 rounded", "aria-label": "Retry upload", children: "Retry" }) })) : (_jsx(Tooltip, { content: "Delete", children: _jsx(Button, { variant: "ghost", color: "danger", isIconOnly: true, size: "sm", onPress: () => requestDelete(it.id), isDisabled: it.status === 'deleting', "aria-label": "Delete file", children: _jsx(TrashIcon, {}) }) })) })] }, it.id))), showPlusPlaceholder ? (_jsx("button", { type: "button", onClick: () => pickerRef.current?.click(), disabled: disabled, className: 'aspect-square rounded-xl border-2 border-dashed transition-colors flex items-center justify-center ' +
                             (isInvalid
                                 ? 'border-danger hover:border-danger text-danger'
-                                : 'border-default-300 hover:border-primary hover:bg-primary-50'), "aria-label": "Upload file", children: _jsx(PlusTile, { invalid: isInvalid }) })) : null] }), _jsx("div", { className: "mt-2 text-xs", "aria-live": "polite", children: error ? (_jsx("span", { id: `${name}-error`, className: "text-danger", children: error })) : (_jsx("span", { className: "text-default-500", children: description ??
+                                : 'border-default-300 hover:border-primary hover:bg-primary-50'), "aria-label": "Upload file", children: _jsx(PlusTile, { invalid: isInvalid }) })) : null] }), _jsx("div", { className: "mt-2 text-xs", "aria-live": "polite", children: displayError ? (_jsx("span", { id: `${name}-error`, className: "text-danger", children: displayError })) : (_jsx("span", { className: "text-default-500", children: description ??
                         `Max ${((maxSizeBytes || DEFAULT_MAX) / MB).toFixed(1)}MB` +
                             (acceptAttr ? ` • ${acceptAttr}` : '') +
                             (multiple && Number.isFinite(limitCount)

package/dist/components/PasswordInput.d.ts

@@ -15,5 +15,7 @@ export type PasswordInputProps = {
         inputWrapper?: string;
     };
     autoComplete?: string;
+    isInvalid?: boolean;
+    errorMessage?: React.ReactNode;
 };
 export declare const PasswordInput: React.FC<PasswordInputProps>;

package/dist/components/PasswordInput.js

@@ -4,8 +4,8 @@ import * as React from 'react';
 import { Input } from '@heroui/react';
 export const EyeSlashFilledIcon = (props) => (_jsxs("svg", { "aria-hidden": "true", fill: "none", focusable: "false", height: "1em", role: "presentation", viewBox: "0 0 24 24", width: "1em", ...props, children: [_jsx("path", { d: "M21.2714 9.17834C20.9814 8.71834 20.6714 8.28834 20.3514 7.88834C19.9814 7.41834 19.2814 7.37834 18.8614 7.79834L15.8614 10.7983C16.0814 11.4583 16.1214 12.2183 15.9214 13.0083C15.5714 14.4183 14.4314 15.5583 13.0214 15.9083C12.2314 16.1083 11.4714 16.0683 10.8114 15.8483C10.8114 15.8483 9.38141 17.2783 8.35141 18.3083C7.85141 18.8083 8.01141 19.6883 8.68141 19.9483C9.75141 20.3583 10.8614 20.5683 12.0014 20.5683C13.7814 20.5683 15.5114 20.0483 17.0914 19.0783C18.7014 18.0783 20.1514 16.6083 21.3214 14.7383C22.2714 13.2283 22.2214 10.6883 21.2714 9.17834Z", fill: "currentColor" }), _jsx("path", { d: "M14.0206 9.98062L9.98062 14.0206C9.47062 13.5006 9.14062 12.7806 9.14062 12.0006C9.14062 10.4306 10.4206 9.14062 12.0006 9.14062C12.7806 9.14062 13.5006 9.47062 14.0206 9.98062Z", fill: "currentColor" }), _jsx("path", { d: "M18.25 5.74969L14.86 9.13969C14.13 8.39969 13.12 7.95969 12 7.95969C9.76 7.95969 7.96 9.76969 7.96 11.9997C7.96 13.1197 8.41 14.1297 9.14 14.8597L5.76 18.2497H5.75C4.64 17.3497 3.62 16.1997 2.75 14.8397C1.75 13.2697 1.75 10.7197 2.75 9.14969C3.91 7.32969 5.33 5.89969 6.91 4.91969C8.49 3.95969 10.22 3.42969 12 3.42969C14.23 3.42969 16.39 4.24969 18.25 5.74969Z", fill: "currentColor" }), _jsx("path", { d: "M14.8581 11.9981C14.8581 13.5681 13.5781 14.8581 11.9981 14.8581C11.9381 14.8581 11.8881 14.8581 11.8281 14.8381L14.8381 11.8281C14.8581 11.8881 14.8581 11.9381 14.8581 11.9981Z", fill: "currentColor" }), _jsx("path", { d: "M21.7689 2.22891C21.4689 1.92891 20.9789 1.92891 20.6789 2.22891L2.22891 20.6889C1.92891 20.9889 1.92891 21.4789 2.22891 21.7789C2.37891 21.9189 2.56891 21.9989 2.76891 21.9989C2.96891 21.9989 3.15891 21.9189 3.30891 21.7689L21.7689 3.30891C22.0789 3.00891 22.0789 2.52891 21.7689 2.22891Z", fill: "currentColor" })] }));
 export const EyeFilledIcon = (props) => (_jsxs("svg", { "aria-hidden": "true", fill: "none", focusable: "false", height: "1em", role: "presentation", viewBox: "0 0 24 24", width: "1em", ...props, children: [_jsx("path", { d: "M21.25 9.14969C18.94 5.51969 15.56 3.42969 12 3.42969C10.22 3.42969 8.49 3.94969 6.91 4.91969C5.33 5.89969 3.91 7.32969 2.75 9.14969C1.75 10.7197 1.75 13.2697 2.75 14.8397C5.06 18.4797 8.44 20.5597 12 20.5597C13.78 20.5597 15.51 20.0397 17.09 19.0697C18.67 18.0897 20.09 16.6597 21.25 14.8397C22.25 13.2797 22.25 10.7197 21.25 9.14969ZM12 16.0397C9.76 16.0397 7.96 14.2297 7.96 11.9997C7.96 9.76969 9.76 7.95969 12 7.95969C14.24 7.95969 16.04 9.76969 16.04 11.9997C16.04 14.2297 14.24 16.0397 12 16.0397Z", fill: "currentColor" }), _jsx("path", { d: "M11.9984 9.14062C10.4284 9.14062 9.14844 10.4206 9.14844 12.0006C9.14844 13.5706 10.4284 14.8506 11.9984 14.8506C13.5684 14.8506 14.8584 13.5706 14.8584 12.0006C14.8584 10.4306 13.5684 9.14062 11.9984 9.14062Z", fill: "currentColor" })] }));
-export const PasswordInput = ({ id, name = 'password', label = 'Password', value, onChange, disabled, required, description, className, classNames, autoComplete = 'new-password', }) => {
+export const PasswordInput = ({ id, name = 'password', label = 'Password', value, onChange, disabled, required, description, className, classNames, autoComplete = 'new-password', isInvalid, errorMessage, }) => {
     const [isVisible, setIsVisible] = React.useState(false);
     const toggleVisibility = () => setIsVisible((v) => !v);
-    return (_jsx(Input, { id: id, name: name, label: label, labelPlacement: "outside-top", type: isVisible ? 'text' : 'password', value: value, onChange: (e) => onChange(e.target.value), isDisabled: disabled, isRequired: required, description: description, variant: "bordered", className: className, classNames: classNames, autoComplete: autoComplete, endContent: _jsx("button", { type: "button", "aria-label": isVisible ? 'Hide password' : 'Show password', className: "focus:outline-solid outline-transparent", onClick: toggleVisibility, children: isVisible ? (_jsx(EyeSlashFilledIcon, { className: "text-2xl text-default-400 pointer-events-none" })) : (_jsx(EyeFilledIcon, { className: "text-2xl text-default-400 pointer-events-none" })) }) }));
+    return (_jsx(Input, { id: id, name: name, label: label, labelPlacement: "outside-top", type: isVisible ? 'text' : 'password', value: value, onChange: (e) => onChange(e.target.value), isDisabled: disabled, isRequired: required, description: description, variant: "bordered", className: className, classNames: classNames, autoComplete: autoComplete, isInvalid: isInvalid, errorMessage: errorMessage, endContent: _jsx("button", { type: "button", "aria-label": isVisible ? 'Hide password' : 'Show password', className: "focus:outline-solid outline-transparent", onClick: toggleVisibility, children: isVisible ? (_jsx(EyeSlashFilledIcon, { className: "text-2xl text-default-400 pointer-events-none" })) : (_jsx(EyeFilledIcon, { className: "text-2xl text-default-400 pointer-events-none" })) }) }));
 };

package/dist/components/PhoneInput.d.ts

@@ -22,5 +22,7 @@ export interface PhoneInputProps {
     minLength?: number;
     maxLength?: number;
     regex?: string;
+    isInvalid?: boolean;
+    errorMessage?: React.ReactNode;
 }
 export declare const PhoneInput: React.FC<PhoneInputProps>;

package/dist/components/PhoneInput.js

@@ -59,7 +59,7 @@ const caretPosForDigitCount = (normMask, digitCount) => {
     return clamp(slots[k - 1] + 1, 0, normMask.length);
 };
 const digitsBeforeCaret = (maskedValue, caret, regex) => onlyDigits(maskedValue.slice(0, clamp(caret, 0, maskedValue.length)), regex).length;
-export const PhoneInput = ({ id, name, label, mask, value, onChange, disabled, required, description, className, classNames, minLength, maxLength, regex, }) => {
+export const PhoneInput = ({ id, name, label, mask, value, onChange, disabled, required, description, className, classNames, minLength, maxLength, regex, isInvalid, errorMessage, }) => {
     const inputRef = useRef(null);
     // Normalize the mask to use lowercase 'x' as slots for internal logic
     const { normMask, maxDigits, placeholder, pattern } = useMemo(() => {
@@ -147,5 +147,5 @@ export const PhoneInput = ({ id, name, label, mask, value, onChange, disabled, r
         const nextCaret = caretPosForDigitCount(normMask, Math.min(pastedDigits.length, finalMax));
         setCaret(nextCaret);
     };
-    return (_jsx(Input, { ref: inputRef, variant: "bordered", classNames: classNames, id: id, name: name, label: label, labelPlacement: "outside-top", value: masked, onChange: handleChange, onKeyDown: handleKeyDown, onPaste: handlePaste, isDisabled: disabled, description: description ?? `Format: ${mask}`, className: className ?? 'w-full', isRequired: required, inputMode: "tel", pattern: pattern, minLength: minLength, maxLength: normMask.length, placeholder: placeholder }));
+    return (_jsx(Input, { ref: inputRef, variant: "bordered", classNames: classNames, id: id, name: name, label: label, labelPlacement: "outside-top", value: masked, onChange: handleChange, onKeyDown: handleKeyDown, onPaste: handlePaste, isDisabled: disabled, description: description ?? `Format: ${mask}`, className: className ?? 'w-full', isRequired: required, inputMode: "tel", pattern: pattern, minLength: minLength, maxLength: normMask.length, placeholder: placeholder, isInvalid: isInvalid, errorMessage: errorMessage }));
 };

package/dist/components/QRCodeModal.d.ts

@@ -0,0 +1,10 @@
+import { CustomAction } from '../lib/types';
+interface QRCodeModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    item: any;
+    action?: CustomAction;
+    modelName?: string;
+}
+export declare function QRCodeModal({ isOpen, onClose, item: initialItem, action, modelName, }: QRCodeModalProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/QRCodeModal.js

@@ -0,0 +1,153 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState, useMemo } from 'react';
+import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, Input, Chip, Spinner, Tooltip, } from '@heroui/react';
+import { QrCode, Download, Copy, Check, ExternalLink, Stethoscope, } from 'lucide-react';
+import QRCode from 'qrcode';
+import { api } from '../lib/api';
+export function QRCodeModal({ isOpen, onClose, item: initialItem, action, modelName = 'doctors', }) {
+    const [item, setItem] = useState(initialItem);
+    const [svgString, setSvgString] = useState('');
+    const [generating, setGenerating] = useState(false);
+    const [copiedUrl, setCopiedUrl] = useState(false);
+    useEffect(() => {
+        setItem(initialItem);
+    }, [initialItem]);
+    // If item is missing slug or other fields, fetch full doc
+    useEffect(() => {
+        if (!isOpen || !initialItem)
+            return;
+        const id = initialItem.id || initialItem._id;
+        if (id && initialItem.slug === undefined && modelName) {
+            api.get(modelName, String(id)).then((res) => {
+                if (res?.data) {
+                    setItem(res.data);
+                }
+            }).catch((e) => {
+                console.error('Failed to load full doc for QR modal:', e);
+            });
+        }
+    }, [isOpen, initialItem, modelName]);
+    // Compute target URL dynamically using url or href template
+    const targetUrl = useMemo(() => {
+        if (!item)
+            return '';
+        const template = action?.url ||
+            action?.urlTemplate ||
+            (action?.href && action.href.startsWith('http') ? action.href : '') ||
+            'https://doctors24.bd/doctor/{slug}';
+        let resolved = template;
+        // Replace all {fieldName} placeholders dynamically with item[fieldName]
+        resolved = resolved.replace(/\{([a-zA-Z0-9_]+)\}/g, (match, fieldName) => {
+            if (item[fieldName] !== undefined && item[fieldName] !== null && item[fieldName] !== '') {
+                return String(item[fieldName]);
+            }
+            if (fieldName === 'slug') {
+                return item.slug || item.id || item._id || '';
+            }
+            if (fieldName === 'id') {
+                return String(item.id || item._id || '');
+            }
+            return match;
+        });
+        return resolved;
+    }, [item, action]);
+    // Generate SVG QR code when modal opens or targetUrl changes
+    useEffect(() => {
+        if (!isOpen || !targetUrl) {
+            setSvgString('');
+            return;
+        }
+        let cancelled = false;
+        async function generate() {
+            try {
+                setGenerating(true);
+                const svg = await QRCode.toString(targetUrl, {
+                    type: 'svg',
+                    margin: 2,
+                    width: 280,
+                    color: {
+                        dark: '#0f172a',
+                        light: '#ffffff',
+                    },
+                });
+                if (!cancelled) {
+                    setSvgString(svg);
+                }
+            }
+            catch (err) {
+                console.error('Failed to generate QR Code:', err);
+            }
+            finally {
+                if (!cancelled)
+                    setGenerating(false);
+            }
+        }
+        generate();
+        return () => {
+            cancelled = true;
+        };
+    }, [isOpen, targetUrl]);
+    // Download SVG
+    const handleDownloadSvg = () => {
+        if (!svgString || !item)
+            return;
+        const fileSlug = item.slug || item.id || 'qr';
+        const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = `${fileSlug}-qr.svg`;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+    };
+    // Download PNG
+    const handleDownloadPng = async () => {
+        if (!targetUrl || !item)
+            return;
+        const fileSlug = item.slug || item.id || 'qr';
+        try {
+            const pngDataUrl = await QRCode.toDataURL(targetUrl, {
+                width: 1024,
+                margin: 2,
+                color: {
+                    dark: '#0f172a',
+                    light: '#ffffff',
+                },
+            });
+            const link = document.createElement('a');
+            link.href = pngDataUrl;
+            link.download = `${fileSlug}-qr.png`;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+        catch (err) {
+            console.error('Failed to download PNG:', err);
+        }
+    };
+    // Copy Link
+    const handleCopyUrl = async () => {
+        if (!targetUrl)
+            return;
+        try {
+            await navigator.clipboard.writeText(targetUrl);
+            setCopiedUrl(true);
+            setTimeout(() => setCopiedUrl(false), 2000);
+        }
+        catch (err) {
+            console.error('Failed to copy URL:', err);
+        }
+    };
+    const doctorName = item?.fullName || item?.name || 'Doctor Profile';
+    const specialityText = typeof item?.speciality === 'object'
+        ? item?.speciality?.name
+        : item?.speciality || '';
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, size: "md", backdrop: "blur", placement: "center", classNames: {
+            base: 'bg-background dark:bg-content1 border border-default-200 shadow-xl rounded-2xl',
+            header: 'border-b border-default-100 pb-3',
+            footer: 'border-t border-default-100 pt-3',
+        }, children: _jsx(ModalContent, { children: () => (_jsxs(_Fragment, { children: [_jsx(ModalHeader, { className: "flex flex-col gap-1", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "p-2 rounded-lg bg-primary/10 text-primary", children: _jsx(QrCode, { size: 20 }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-bold leading-tight text-foreground", children: doctorName }), specialityText && (_jsxs("p", { className: "text-xs text-default-500 flex items-center gap-1 mt-0.5", children: [_jsx(Stethoscope, { size: 12, className: "text-primary" }), specialityText] }))] })] }) }), _jsxs(ModalBody, { className: "py-4 flex flex-col items-center gap-4", children: [_jsx("div", { className: "w-full max-w-[240px] aspect-square rounded-xl bg-white p-3 shadow-sm border border-default-200 flex items-center justify-center relative overflow-hidden", children: generating ? (_jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx(Spinner, { size: "sm", color: "primary" }), _jsx("span", { className: "text-xs text-default-500", children: "Generating SVG..." })] })) : svgString ? (_jsx("div", { className: "w-full h-full flex items-center justify-center [&>svg]:w-full [&>svg]:h-full [&>svg]:max-w-full [&>svg]:max-h-full", dangerouslySetInnerHTML: { __html: svgString } })) : (_jsxs("div", { className: "text-center text-default-400 p-2", children: [_jsx(QrCode, { size: 36, className: "mx-auto mb-1 opacity-30" }), _jsx("p", { className: "text-xs", children: "No QR Code available" })] })) }), _jsxs("div", { className: "w-full space-y-1", children: [_jsxs("div", { className: "flex items-center justify-between text-xs text-default-500", children: [_jsx("span", { children: "Profile Link" }), item?.slug && (_jsxs(Chip, { size: "sm", variant: "flat", color: "primary", className: "h-5 text-[10px]", children: ["/", item.slug] }))] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Input, { isReadOnly: true, size: "sm", value: targetUrl, variant: "flat", className: "font-mono text-xs" }), _jsx(Tooltip, { content: copiedUrl ? 'Copied!' : 'Copy URL', children: _jsx(Button, { isIconOnly: true, size: "sm", variant: "flat", color: copiedUrl ? 'success' : 'default', onPress: handleCopyUrl, children: copiedUrl ? _jsx(Check, { size: 15 }) : _jsx(Copy, { size: 15 }) }) }), _jsx(Tooltip, { content: "Open Link", children: _jsx(Button, { as: "a", href: targetUrl, target: "_blank", rel: "noopener noreferrer", isIconOnly: true, size: "sm", variant: "flat", children: _jsx(ExternalLink, { size: 15 }) }) })] })] })] }), _jsxs(ModalFooter, { className: "flex items-center justify-between gap-2", children: [_jsx(Button, { variant: "flat", color: "default", onPress: onClose, size: "sm", children: "Close" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "flat", color: "default", size: "sm", startContent: _jsx(Download, { size: 14 }), onPress: handleDownloadPng, children: "PNG" }), _jsx(Button, { color: "primary", size: "sm", className: "font-medium", startContent: _jsx(Download, { size: 14 }), onPress: handleDownloadSvg, children: "Download SVG" })] })] })] })) }) }));
+}