@airoom/nextmin-react 0.1.0

package/dist/components/NoAccess.d.ts

@@ -0,0 +1,3 @@
+export declare function NoAccess({ message }: {
+    message?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/NoAccess.js

@@ -0,0 +1,5 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function NoAccess({ message }) {
+    return (_jsxs("div", { className: "p-6 rounded-lg border bg-red-50 text-red-700", children: [_jsx("div", { className: "font-semibold", children: "Access denied" }), _jsx("div", { className: "text-sm mt-1", children: message ?? 'You are not permitted to view this resource.' })] }));
+}

package/dist/components/PasswordInput.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+export declare const EyeSlashFilledIcon: React.FC<React.SVGProps<SVGSVGElement>>;
+export declare const EyeFilledIcon: React.FC<React.SVGProps<SVGSVGElement>>;
+export type PasswordInputProps = {
+    id?: string;
+    name?: string;
+    label?: string;
+    value: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+    required?: boolean;
+    description?: string;
+    className?: string;
+    classNames?: {
+        inputWrapper?: string;
+    };
+    autoComplete?: string;
+};
+export declare const PasswordInput: React.FC<PasswordInputProps>;

package/dist/components/PasswordInput.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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', }) => {
+    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" })) }) }));
+};

package/dist/components/PhoneInput.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export interface PhoneInputProps {
+    id: string;
+    name: string;
+    label: string;
+    /** Mask string using digit slots. Accepts x/X/9/#/_ as slots.
+     *  Examples: "xxx-xxxx-xxxx", "(xx) xxxx-xxxx", "+xx-xxxx-xxxxxx"
+     */
+    mask: string;
+    /** Raw digits only (no mask). Accepts string | number | null; will be coerced. */
+    value?: string | null;
+    /** Returns raw digits only (no mask). */
+    onChange: (rawDigits: string) => void;
+    disabled?: boolean;
+    required?: boolean;
+    /** Shown under the field. If omitted, we show: `Format: +XXX-XXXX-XXXXXX` */
+    description?: string;
+    className?: string;
+    classNames?: {
+        inputWrapper?: string;
+    };
+}
+export declare const PhoneInput: React.FC<PhoneInputProps>;

package/dist/components/PhoneInput.js

@@ -0,0 +1,147 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useRef } from 'react';
+import { Input } from '@heroui/react';
+const SLOT = 'x';
+const SLOT_PATTERN = /[Xx9#_]/g; // accept these as "digit slot" placeholders
+const normalizeMaskSlots = (m) => m.replace(SLOT_PATTERN, SLOT);
+// handle string | number | null | undefined safely
+const onlyDigits = (s) => String(s ?? '').replace(/\D/g, '');
+const clamp = (n, min, max) => Math.max(min, Math.min(max, n));
+/** Indices in the mask where a digit goes (SLOT) */
+const getSlotIndices = (mask) => {
+    const idxs = [];
+    for (let i = 0; i < mask.length; i++)
+        if (mask[i] === SLOT)
+            idxs.push(i);
+    return idxs;
+};
+const toRegexFromMask = (mask) => {
+    // e.g. "xxx-xxxx-xxxx" -> ^\d{3}-\d{4}-\d{4}$
+    let out = '';
+    for (let i = 0; i < mask.length;) {
+        if (mask[i] === SLOT) {
+            let n = 1;
+            while (i + n < mask.length && mask[i + n] === SLOT)
+                n++;
+            out += `\\d{${n}}`;
+            i += n;
+        }
+        else {
+            out += mask[i].replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+            i += 1;
+        }
+    }
+    return `^${out}$`;
+};
+const formatDisplay = (rawDigits, normMask) => {
+    const slots = getSlotIndices(normMask);
+    const digits = onlyDigits(rawDigits).slice(0, slots.length);
+    if (digits.length === 0)
+        return '';
+    const out = normMask.split('');
+    for (let i = 0; i < digits.length; i++)
+        out[slots[i]] = digits[i];
+    // cut any trailing static chars after the last filled slot
+    const last = slots[Math.max(0, digits.length - 1)];
+    return out.slice(0, last + 1).join('');
+};
+const caretPosForDigitCount = (normMask, digitCount) => {
+    const slots = getSlotIndices(normMask);
+    if (slots.length === 0)
+        return 0;
+    const k = clamp(digitCount, 0, slots.length);
+    if (k === 0)
+        return slots[0]; // first slot (skip prefix like + or ()
+    return clamp(slots[k - 1] + 1, 0, normMask.length);
+};
+const digitsBeforeCaret = (maskedValue, caret) => onlyDigits(maskedValue.slice(0, clamp(caret, 0, maskedValue.length))).length;
+export const PhoneInput = ({ id, name, label, mask, value, onChange, disabled, required, description, className, classNames, }) => {
+    const inputRef = useRef(null);
+    // Normalize the mask to use lowercase 'x' as slots for internal logic
+    const { normMask, maxDigits, placeholder, pattern } = useMemo(() => {
+        const nm = normalizeMaskSlots(String(mask || ''));
+        const slots = getSlotIndices(nm);
+        return {
+            normMask: nm,
+            maxDigits: slots.length,
+            // Always show placeholder with uppercase X for UX consistency
+            placeholder: nm.replace(/x/g, 'X'),
+            pattern: toRegexFromMask(nm),
+        };
+    }, [mask]);
+    const raw = onlyDigits(value).slice(0, maxDigits);
+    const masked = formatDisplay(raw, normMask);
+    const setCaret = (pos) => {
+        const el = inputRef.current;
+        if (!el)
+            return;
+        requestAnimationFrame(() => {
+            try {
+                el.setSelectionRange(pos, pos);
+            }
+            catch { }
+        });
+    };
+    const handleChange = (e) => {
+        const inputVal = e.currentTarget.value;
+        const caret = e.currentTarget.selectionStart ?? inputVal.length;
+        const nextRaw = onlyDigits(inputVal).slice(0, maxDigits);
+        const digitsBefore = digitsBeforeCaret(inputVal, caret);
+        const nextMasked = formatDisplay(nextRaw, normMask);
+        const nextCaret = caretPosForDigitCount(normMask, digitsBefore);
+        onChange(nextRaw);
+        setCaret(clamp(nextCaret, 0, nextMasked.length));
+    };
+    const handleKeyDown = (e) => {
+        const el = e.currentTarget;
+        const selStart = el.selectionStart ?? 0;
+        const selEnd = el.selectionEnd ?? selStart;
+        if (selStart !== selEnd)
+            return;
+        if (e.key === 'Backspace') {
+            if (selStart <= 0)
+                return;
+            const leftChar = el.value[selStart - 1];
+            if (leftChar && /\D/.test(leftChar)) {
+                e.preventDefault();
+                const currRaw = onlyDigits(el.value);
+                const countBefore = digitsBeforeCaret(el.value, selStart - 1);
+                const idxToRemove = countBefore - 1;
+                if (idxToRemove >= 0) {
+                    const nextRaw = currRaw.slice(0, idxToRemove) + currRaw.slice(idxToRemove + 1);
+                    onChange(nextRaw.slice(0, maxDigits));
+                    const nextCaret = caretPosForDigitCount(normMask, countBefore - 1);
+                    setCaret(nextCaret);
+                }
+            }
+            return;
+        }
+        if (e.key === 'Delete') {
+            const rightChar = el.value[selStart];
+            if (rightChar && /\D/.test(rightChar)) {
+                e.preventDefault();
+                const currRaw = onlyDigits(el.value);
+                const countBefore = digitsBeforeCaret(el.value, selStart);
+                const idxToRemove = countBefore;
+                if (idxToRemove < currRaw.length) {
+                    const nextRaw = currRaw.slice(0, idxToRemove) + currRaw.slice(idxToRemove + 1);
+                    onChange(nextRaw.slice(0, maxDigits));
+                    const nextCaret = caretPosForDigitCount(normMask, countBefore);
+                    setCaret(nextCaret);
+                }
+            }
+        }
+    };
+    const handlePaste = (e) => {
+        const text = e.clipboardData.getData('text') ?? '';
+        const pastedDigits = onlyDigits(text);
+        if (!pastedDigits)
+            return;
+        e.preventDefault();
+        onChange(pastedDigits.slice(0, maxDigits));
+        const nextCaret = caretPosForDigitCount(normMask, Math.min(pastedDigits.length, maxDigits));
+        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, maxLength: normMask.length, placeholder: placeholder }));
+};

package/dist/components/RefMultiSelect.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type RefMultiSelectProps = {
+    name: string;
+    label: string;
+    refModel: string;
+    showKey?: string;
+    value: string[];
+    onChange: (ids: string[]) => void;
+    description?: string;
+    disabled?: boolean;
+    required?: boolean;
+    pageSize?: number;
+};
+export declare const RefMultiSelect: React.FC<RefMultiSelectProps>;

package/dist/components/RefMultiSelect.js

@@ -0,0 +1,76 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Button, Input, Listbox, ListboxItem, Popover, PopoverContent, PopoverTrigger, Spinner, } from '@heroui/react';
+import { api } from '../lib/api';
+export const RefMultiSelect = ({ name, label, refModel, showKey = 'name', value, onChange, description, disabled, required, pageSize = 20, }) => {
+    const [open, setOpen] = React.useState(false);
+    const [query, setQuery] = React.useState('');
+    const [loading, setLoading] = React.useState(false);
+    const [options, setOptions] = React.useState([]);
+    const modelSlug = React.useMemo(() => String(refModel).trim().toLowerCase(), [refModel]);
+    const selectedKeys = React.useMemo(() => new Set((value ?? []).map((v) => v)), [value]);
+    const selectionCount = selectedKeys.size;
+    const summaryText = selectionCount
+        ? `You have ${selectionCount} selected`
+        : `Select ${refModel}`;
+    const labelOf = React.useCallback((opt) => String((showKey && opt?.[showKey]) ??
+        opt?.name ??
+        opt?.title ??
+        opt?.key ??
+        opt?.id ??
+        opt?._id ??
+        ''), [showKey]);
+    const viewItems = React.useMemo(() => options.map((opt) => {
+        const text = labelOf(opt);
+        const key = String(opt.id ?? opt._id ?? text);
+        return { key, text };
+    }), [options, labelOf]);
+    const loadOptions = React.useCallback(async (q) => {
+        setLoading(true);
+        try {
+            // One list call for the current search page
+            const params = q
+                ? { q, searchKey: showKey || 'name' }
+                : {};
+            const res = await api.list?.(modelSlug, 0, pageSize, params);
+            const payload = res?.data ?? res;
+            const list = payload?.items ??
+                payload?.docs ??
+                payload?.results ??
+                payload?.list ??
+                (Array.isArray(payload) ? payload : []);
+            const normalized = (list || []).map((it) => ({
+                id: (typeof it?.id === 'string' && it.id) ||
+                    (typeof it?._id === 'string' && it._id) ||
+                    String(it?.id ?? ''),
+                ...it,
+            }));
+            setOptions(normalized);
+        }
+        catch {
+            setOptions([]);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [modelSlug, showKey]);
+    // Load when menu opens
+    React.useEffect(() => {
+        if (open)
+            void loadOptions(query);
+    }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
+    // Debounced search
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const t = setTimeout(() => void loadOptions(query), 250);
+        return () => clearTimeout(t);
+    }, [open, query, loadOptions]);
+    return (_jsxs("div", { className: "w-full", children: [_jsxs("label", { className: "mb-1 block text-sm font-medium", children: [label, " ", required ? _jsx("span", { className: "text-danger", children: "*" }) : null] }), _jsxs(Popover, { placement: "bottom-start", offset: 6, isOpen: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { children: _jsxs(Button, { variant: "bordered", className: "w-full justify-between", isDisabled: disabled, "aria-label": label, name: name, children: [_jsx("span", { className: "truncate", children: summaryText }), _jsx("span", { className: "text-xs text-default-500", children: selectionCount ? `${selectionCount} selected` : '' })] }) }), _jsx(PopoverContent, { className: "w-auto p-2", children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Input, { size: "sm", variant: "bordered", "aria-label": `Search ${refModel}`, placeholder: `Search ${refModel}…`, fullWidth: true, value: query, onChange: (e) => setQuery(e.target.value) }), _jsx("div", { className: "max-h-72 overflow-auto w-full", children: _jsx(Listbox, { "aria-label": `${label} options`, selectionMode: "multiple", selectedKeys: selectedKeys, onSelectionChange: (keys) => {
+                                            if (keys === 'all')
+                                                return;
+                                            const ids = Array.from(keys).map(String);
+                                            onChange(ids);
+                                        }, items: viewItems, children: (item) => (_jsx(ListboxItem, { textValue: item.text, children: item.text }, item.key)) }) }), loading && (_jsx("div", { className: "grid place-items-center py-2", children: _jsx(Spinner, { size: "sm" }) }))] }) })] }), description ? (_jsx("p", { className: "mt-1 text-xs text-default-500", children: description })) : null] }));
+};

package/dist/components/RefSingleSelect.d.ts

@@ -0,0 +1,17 @@
+export type RefSingleSelectProps = {
+    name: string;
+    label: string;
+    refModel: string;
+    showKey?: string;
+    description?: string;
+    value?: string | null;
+    onChange: (id: string | null) => void;
+    disabled?: boolean;
+    required?: boolean;
+    className?: string;
+    classNames?: {
+        trigger?: string;
+    };
+    pageSize?: number;
+};
+export declare function RefSingleSelect({ name, label, refModel, showKey, description, value, onChange, disabled, required, className, classNames, pageSize, }: RefSingleSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/RefSingleSelect.js

@@ -0,0 +1,52 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { Select, SelectItem } from '@heroui/react';
+import { api } from '../lib/api';
+export function RefSingleSelect({ name, label, refModel, showKey = 'name', description, value, onChange, disabled, required, className, classNames, pageSize, }) {
+    const [loading, setLoading] = React.useState(false);
+    const [items, setItems] = React.useState([]);
+    const [error, setError] = React.useState(null);
+    const refModelLC = React.useMemo(() => refModel.toLowerCase(), [refModel]);
+    const load = React.useCallback(async () => {
+        try {
+            setLoading(true);
+            setError(null);
+            // small page size is enough for pickers; adjust if needed
+            const res = await api.list(refModelLC, 0, pageSize, {});
+            setItems(Array.isArray(res.data) ? res.data : []);
+        }
+        catch (e) {
+            setError(e?.message || 'Failed to load options');
+            setItems([]);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [refModelLC]);
+    React.useEffect(() => {
+        load(); // eager-load on mount
+    }, [load]);
+    const getId = (r) => (typeof r.id === 'string' && r.id) ||
+        (typeof r._id === 'string' && r._id) ||
+        '';
+    const getLabel = (r) => {
+        const v = r?.[showKey];
+        return v == null ? getId(r) : String(v);
+    };
+    return (_jsx("div", { className: "w-full", children: _jsx(Select, { name: name, label: label, placeholder: label, labelPlacement: "outside", className: className, classNames: classNames, variant: "bordered", selectionMode: "single", isDisabled: disabled || loading, isLoading: loading, isRequired: required, description: error || description, items: items, selectedKeys: value ? new Set([String(value)]) : new Set(), onSelectionChange: (keys) => {
+                if (keys === 'all')
+                    return;
+                const v = Array.from(keys)[0];
+                onChange(v ?? null);
+            }, 
+            // Re-fetch on open to ensure newest data (e.g., newly created roles)
+            onOpenChange: (open) => {
+                if (open)
+                    void load();
+            }, disallowEmptySelection: false, "aria-label": label, children: (opt) => {
+                const key = getId(opt);
+                const text = getLabel(opt);
+                return (_jsx(SelectItem, { textValue: text, children: text }, key));
+            } }) }));
+}

package/dist/components/SchemaForm.d.ts

@@ -0,0 +1,13 @@
+import { SchemaDef } from '../lib/types';
+type SchemaFormProps = {
+    model: string;
+    schemaOverride?: SchemaDef;
+    initialValues?: Record<string, any>;
+    submitLabel?: string;
+    busy?: boolean;
+    showReset?: boolean;
+    onSubmit: (values: Record<string, any>) => void | Promise<void>;
+};
+/** --------------------------------------------------------------------------------------- **/
+export declare function SchemaForm({ model, schemaOverride, initialValues, submitLabel, busy, showReset, onSubmit, }: SchemaFormProps): import("react/jsx-runtime").JSX.Element;
+export {};