@nestledjs/data-browser 1.0.15 → 1.0.16

package/README.md

@@ -4,14 +4,12 @@ Universal admin data browser for Nestled framework projects with full CRUD opera
 
 ## Features
 
-- 🔍 **Auto-generated CRUD Interface** - Automatically generates admin UI for all Prisma models
-- 📊 **Advanced Data Table** - Sorting, filtering, pagination, column selection
-- 🔎 **Smart Search** - Multi-field text search with debouncing
-- 📝 **Dynamic Forms** - Auto-generated create/edit forms from model schema
-- 🎨 **Dark Mode Support** - Full dark mode theming
-- 💾 **Persistent Preferences** - Saves column visibility, sort order, and search preferences per model
-- 🔐 **Type-Safe** - Full TypeScript support with GraphQL code generation
-- 📱 **Responsive** - Mobile-friendly with fullscreen mode
+- Auto-generated admin CRUD interface from Nestled model metadata
+- Sorting, filtering, pagination, column selection, and search
+- Dynamic create/edit forms based on generated model metadata
+- Persistent per-model table preferences
+- TypeScript-first API around a generated GraphQL SDK
+- Responsive admin workflow suitable for operational tools
 
 ## Installation
 
@@ -32,6 +30,7 @@ This package requires a Nestled framework project with:
 - **@nestledjs/forms** for form generation
 - **Prisma** for database models
 - **Generated GraphQL SDK** with admin CRUD operations
+- **A form theme** compatible with `@nestledjs/forms`
 
 ### Peer Dependencies
 
@@ -48,14 +47,10 @@ This package requires a Nestled framework project with:
 
 Your Nestled project must also export:
 
-1. **Web UI Components** from `@your-project/web-ui`:
-   - `WebUiDataTable`
-   - `WebUiErrorBoundary`
-
-2. **Form Theme** from `@your-project/shared/styles`:
+1. **Form Theme** from `@your-project/shared/styles`:
    - `formTheme`
 
-3. **GraphQL SDK** from `@your-project/shared/sdk`:
+2. **GraphQL SDK** from `@your-project/shared/sdk`:
    - `DATABASE_MODELS` (auto-generated model metadata)
    - GraphQL documents with `__Admin*Document` naming
 
@@ -67,23 +62,14 @@ Your Nestled project must also export:
 pnpm add @nestledjs/data-browser
 ```
 
-### Step 2: Update Import Paths
-
-Since this package imports from your project's namespaced packages, find and replace in the source:
-
-```
-@nestled-template → @your-project-name
-```
-
-This affects 3 files in `libs/admin-data/src/lib/pages/`.
-
-### Step 3: Create Route Wrapper
+### Step 2: Create Route Wrapper
 
 Create `apps/web/app/routes/admin/data/_layout.tsx`:
 
 ```typescript
 import * as Sdk from '@your-project/shared/sdk'
 import { DATABASE_MODELS } from '@your-project/shared/sdk'
+import { formTheme } from '@your-project/shared/styles'
 import { AdminDataProvider, AdminDataLayout } from '@nestledjs/data-browser'
 
 export default function DataLayoutRoute() {
@@ -91,6 +77,7 @@ export default function DataLayoutRoute() {
     <AdminDataProvider
       sdk={Sdk}
       databaseModels={DATABASE_MODELS}
+      formTheme={formTheme}
       basePath="/admin/data"
     >
       <AdminDataLayout />
@@ -99,17 +86,19 @@ export default function DataLayoutRoute() {
 }
 ```
 
-### Step 4: Create Page Routes
+### Step 3: Create Page Routes
 
 Create these minimal route files:
 
 **`apps/web/app/routes/admin/data/index.tsx`**:
+
 ```typescript
 import { AdminDataIndexPage } from '@nestledjs/data-browser'
 export default AdminDataIndexPage
 ```
 
 **`apps/web/app/routes/admin/data/$dataTypePlural.tsx`**:
+
 ```typescript
 import { AdminDataListPage, AdminDataErrorBoundary } from '@nestledjs/data-browser'
 
@@ -123,6 +112,7 @@ export function ErrorBoundary({ error }: Readonly<{ error: Error }>) {
 ```
 
 **`apps/web/app/routes/admin/data/$dataType.create.tsx`**:
+
 ```typescript
 import { AdminDataCreatePage, AdminDataCreateErrorBoundary } from '@nestledjs/data-browser'
 
@@ -136,6 +126,7 @@ export function ErrorBoundary({ error }: Readonly<{ error: Error }>) {
 ```
 
 **`apps/web/app/routes/admin/data/$dataType.$id.tsx`**:
+
 ```typescript
 import { AdminDataEditPage, AdminDataEditErrorBoundary } from '@nestledjs/data-browser'
 
@@ -148,7 +139,7 @@ export function ErrorBoundary({ error }: Readonly<{ error: Error }>) {
 }
 ```
 
-### Step 5: Register Routes
+### Step 4: Register Routes
 
 In `apps/web/app/routes.tsx`:
 
@@ -167,9 +158,20 @@ export default [
 ] satisfies RouteConfig
 ```
 
-### Step 6: Access the Data Browser
+### Step 5: Access the Data Browser
+
+Navigate to `/admin/data` in your application.
+
+## Security Model
 
-Navigate to `/admin/data` in your application!
+The data browser assumes the backing GraphQL admin CRUD operations are protected
+by the API. In a standard Nestled project, generated CRUD is admin-only by
+default. User-facing workflows should use separate custom resolvers instead of
+relaxing generated admin CRUD.
+
+Do not expose security-sensitive internal models, such as password hash history
+or token material, through generic admin browsing unless you have a deliberate
+operational need and appropriate masking.
 
 ## Usage
 
@@ -188,6 +190,7 @@ Shows all available database models with a searchable list.
 ### Create (`/admin/data/user/create`)
 
 Auto-generated form based on your Prisma model schema with:
+
 - Type-aware inputs (text, number, date, enum, relation dropdowns)
 - Validation based on model requirements
 - Real-time error handling
@@ -204,9 +207,10 @@ The context provider that makes SDK and models available to all components.
 
 ```typescript
 <AdminDataProvider
-  sdk={Sdk}                    // Your GraphQL SDK namespace
-  databaseModels={DATABASE_MODELS}  // Array of model metadata
-  basePath="/admin/data"       // Optional: Custom route prefix
+  sdk={Sdk}
+  databaseModels={DATABASE_MODELS}
+  formTheme={formTheme}
+  basePath="/admin/data"
 >
   {children}
 </AdminDataProvider>
@@ -270,6 +274,7 @@ The data browser uses Tailwind CSS classes. Customize via your project's Tailwin
 ### "Missing GraphQL documents for model X"
 
 **Solution**: Run GraphQL code generation:
+
 ```bash
 pnpm sdk
 ```
@@ -278,15 +283,14 @@ pnpm sdk
 
 **Solution**: Ensure all data browser components are children of `<AdminDataProvider>` in `_layout.tsx`.
 
-### Import errors for WebUiDataTable or formTheme
+### Import errors for formTheme
 
-**Solution**: Ensure your project exports these from:
-- `@your-project/web-ui`
-- `@your-project/shared/styles`
+**Solution**: Ensure your project exports a form theme from `@your-project/shared/styles`.
 
 ### DATABASE_MODELS is undefined
 
 **Solution**: Run the model generator:
+
 ```bash
 pnpm generate:models
 ```
@@ -298,15 +302,15 @@ This creates the `DATABASE_MODELS` export from your Prisma schema.
 ### Build
 
 ```bash
-nx build admin-data
+pnpm nx build data-browser
 ```
 
-Output: `dist/libs/admin-data/`
+Output: `dist/libs/data-browser/`
 
 ### Publish
 
 ```bash
-nx publish admin-data
+pnpm nx publish data-browser
 ```
 
 ## License

package/index.js

@@ -19,7 +19,7 @@ import { AdminEmptyState, AdminErrorState, AdminLoadingState } from "./lib/compo
 import { AdminStatusDisplay, AdminUserStatus } from "./lib/components/shared/AdminStatusDisplay.js";
 import { RelationFieldWrapper } from "./lib/components/RelationFieldWrapper.js";
 import { ExportButton } from "./lib/components/ExportButton.js";
-import { buildFormFields, cleanFormInput, getAdminDocuments, getMutationName } from "./lib/utils/graphql-utils.js";
+import { buildFormFields, cleanFormInput, getAdminDocuments, getMutationName, sanitizeInput, toKebabCase, toReadableText } from "./lib/utils/graphql-utils.js";
 import { AdminLocalStorage, SecureAdminLocalStorage } from "./lib/utils/secure-storage.js";
 import { formatFieldName, getItemDisplayName, getSmartSearchFields, kebabCase, normalizeModelNameForDocument, spacedWords } from "./lib/utils/string-utils.js";
 import { getPluralName } from "./lib/utils/get-plural-names.js";
@@ -63,7 +63,10 @@ export {
   initialState,
   kebabCase,
   normalizeModelNameForDocument,
+  sanitizeInput,
   spacedWords,
+  toKebabCase,
+  toReadableText,
   useAdminDataContext,
   useAdminList,
   useClickOutside,

package/lib/components/ExportButton.d.ts

@@ -1,14 +1,14 @@
 interface ExportButtonProps {
-    query: any;
-    dataPath: string;
+    readonly query: any;
+    readonly dataPath: string;
     /** Current query variables (includes filters, search, sort) */
-    variables: {
+    readonly variables: {
         input: Record<string, unknown>;
     };
-    visibleColumns: string[];
-    fieldNames: string[];
-    modelName: string;
-    hasActiveFilters: boolean;
+    readonly visibleColumns: string[];
+    readonly fieldNames: string[];
+    readonly modelName: string;
+    readonly hasActiveFilters: boolean;
 }
 export declare function ExportButton({ query, dataPath, variables, visibleColumns, fieldNames, modelName, hasActiveFilters, }: ExportButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/ExportButton.js

@@ -3,27 +3,55 @@ import { useState, useRef, useCallback } from "react";
 import { useLazyQuery } from "@apollo/client/react";
 import { formatFieldName } from "../utils/string-utils.js";
 const MAX_EXPORT_ROWS = 5e4;
+function stringifyCsvScalar(value) {
+  if (value === null || value === void 0) return "";
+  switch (typeof value) {
+    case "string":
+      return value;
+    case "number":
+    case "boolean":
+    case "bigint":
+      return `${value}`;
+    case "symbol":
+      return value.description ?? "";
+    case "function":
+      return value.name || "[function]";
+    case "object":
+      return JSON.stringify(value);
+    default:
+      return "";
+  }
+}
 function escapeCsvValue(val) {
   if (val === null || val === void 0) return "";
   let str;
   if (typeof val === "object") {
     const obj = val;
-    str = obj.id ? String(obj.id) : JSON.stringify(val);
+    const id = obj.id;
+    str = typeof id === "string" || typeof id === "number" ? `${id}` : JSON.stringify(val);
   } else {
-    str = String(val);
+    str = stringifyCsvScalar(val);
   }
   if (str.includes(",") || str.includes('"') || str.includes("\n") || str.includes("\r")) {
-    return `"${str.replace(/"/g, '""')}"`;
+    return `"${str.replaceAll('"', '""')}"`;
   }
   return str;
 }
 function generateCsv(items, columns) {
   const header = columns.map((c) => escapeCsvValue(formatFieldName(c))).join(",");
-  const rows = items.map(
-    (item) => columns.map((col) => escapeCsvValue(item[col])).join(",")
-  );
+  const rows = items.map((item) => columns.map((col) => escapeCsvValue(item[col])).join(","));
   return [header, ...rows].join("\r\n");
 }
+function findItemsInData(data, dataPath) {
+  const direct = data?.[dataPath];
+  if (direct?.length) return direct;
+  for (const value of Object.values(data ?? {})) {
+    if (Array.isArray(value) && value.length > 0 && value[0]?.id) {
+      return value;
+    }
+  }
+  return [];
+}
 function downloadCsv(csv, filename) {
   const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
   const url = URL.createObjectURL(blob);
@@ -32,9 +60,19 @@ function downloadCsv(csv, filename) {
   link.download = filename;
   document.body.appendChild(link);
   link.click();
-  document.body.removeChild(link);
+  link.remove();
   URL.revokeObjectURL(url);
 }
+function buildExportInput(mode, variables) {
+  if (mode === "all")
+    return { take: MAX_EXPORT_ROWS, skip: 0, orderBy: "id", orderDirection: "desc" };
+  return { ...variables.input, take: MAX_EXPORT_ROWS, skip: 0 };
+}
+function buildExportFilename(modelName, mode, hasActiveFilters) {
+  const timestamp = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+  const suffix = mode === "filtered" && hasActiveFilters ? "-filtered" : "";
+  return `${modelName}${suffix}-${timestamp}.csv`;
+}
 function ExportButton({
   query,
   dataPath,
@@ -55,25 +93,20 @@ function ExportButton({
     async (mode) => {
       setExporting(mode);
       setError(null);
-      const columns = mode === "all" ? fieldNames : visibleColumns.length > 0 ? visibleColumns : fieldNames;
-      const input = mode === "all" ? { take: MAX_EXPORT_ROWS, skip: 0, orderBy: "id", orderDirection: "desc" } : { ...variables.input, take: MAX_EXPORT_ROWS, skip: 0 };
+      let columns;
+      if (mode === "all") {
+        columns = fieldNames;
+      } else {
+        columns = visibleColumns.length > 0 ? visibleColumns : fieldNames;
+      }
+      const input = buildExportInput(mode, variables);
       try {
         const { data, error: queryError } = await runQuery({ variables: { input } });
         if (queryError) throw queryError;
         const anyData = data;
-        let items = anyData?.[dataPath] ?? [];
-        if (!items.length) {
-          for (const value of Object.values(anyData ?? {})) {
-            if (Array.isArray(value) && value.length > 0 && value[0]?.id) {
-              items = value;
-              break;
-            }
-          }
-        }
+        const items = findItemsInData(anyData, dataPath);
         const csv = generateCsv(items, columns);
-        const timestamp = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
-        const suffix = mode === "filtered" && hasActiveFilters ? "-filtered" : "";
-        downloadCsv(csv, `${modelName}${suffix}-${timestamp}.csv`);
+        downloadCsv(csv, buildExportFilename(modelName, mode, hasActiveFilters));
         setOpen(false);
       } catch (err) {
         setError(err instanceof Error ? err.message : "Export failed");
@@ -83,29 +116,42 @@ function ExportButton({
     },
     [runQuery, variables, fieldNames, visibleColumns, dataPath, modelName, hasActiveFilters]
   );
-  const activeFilterCount = Object.keys(variables.input.filters ?? {}).length;
+  const activeFilterCount = Object.keys(
+    variables.input.filters ?? {}
+  ).length;
   const hasSearch = Boolean(variables.input.search);
   return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
+        type: "button",
         onClick: () => {
           setOpen(!open);
           setError(null);
         },
         className: "inline-flex items-center px-3 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-web",
         children: [
-          /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" }) }),
+          /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+            }
+          ) }),
           "Export"
         ]
       }
     ),
     open && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        "div",
+        "button",
         {
-          className: "fixed inset-0 z-40",
-          onClick: () => setOpen(false)
+          type: "button",
+          className: "fixed inset-0 z-40 cursor-default bg-transparent border-0 p-0",
+          onClick: () => setOpen(false),
+          "aria-label": "Close export menu"
         }
       ),
       /* @__PURE__ */ jsx(
@@ -127,10 +173,35 @@ function ExportButton({
                     onClick: () => doExport("all"),
                     className: "w-full inline-flex justify-center items-center px-3 py-1.5 border border-gray-300 dark:border-gray-600 text-xs font-medium rounded text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed",
                     children: exporting === "all" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsxs("svg", { className: "animate-spin -ml-1 mr-2 h-3 w-3 text-gray-500", fill: "none", viewBox: "0 0 24 24", children: [
-                        /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-                        /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
-                      ] }),
+                      /* @__PURE__ */ jsxs(
+                        "svg",
+                        {
+                          className: "animate-spin -ml-1 mr-2 h-3 w-3 text-gray-500",
+                          fill: "none",
+                          viewBox: "0 0 24 24",
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "circle",
+                              {
+                                className: "opacity-25",
+                                cx: "12",
+                                cy: "12",
+                                r: "10",
+                                stroke: "currentColor",
+                                strokeWidth: "4"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "path",
+                              {
+                                className: "opacity-75",
+                                fill: "currentColor",
+                                d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                              }
+                            )
+                          ]
+                        }
+                      ),
                       "Exporting..."
                     ] }) : `Download (${fieldNames.length} columns)`
                   }
@@ -142,12 +213,13 @@ function ExportButton({
                 /* @__PURE__ */ jsxs("ul", { className: "text-xs text-gray-500 dark:text-gray-400 mb-2 space-y-0.5", children: [
                   /* @__PURE__ */ jsxs("li", { children: [
                     visibleColumns.length > 0 ? visibleColumns.length : fieldNames.length,
-                    " columns selected"
+                    " ",
+                    "columns selected"
                   ] }),
                   activeFilterCount > 0 && /* @__PURE__ */ jsxs("li", { children: [
                     activeFilterCount,
                     " filter",
-                    activeFilterCount !== 1 ? "s" : "",
+                    activeFilterCount === 1 ? "" : "s",
                     " active"
                   ] }),
                   hasSearch && /* @__PURE__ */ jsxs("li", { children: [
@@ -163,10 +235,35 @@ function ExportButton({
                     onClick: () => doExport("filtered"),
                     className: "w-full inline-flex justify-center items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded text-white bg-green-600 hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed",
                     children: exporting === "filtered" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsxs("svg", { className: "animate-spin -ml-1 mr-2 h-3 w-3 text-white", fill: "none", viewBox: "0 0 24 24", children: [
-                        /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-                        /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
-                      ] }),
+                      /* @__PURE__ */ jsxs(
+                        "svg",
+                        {
+                          className: "animate-spin -ml-1 mr-2 h-3 w-3 text-white",
+                          fill: "none",
+                          viewBox: "0 0 24 24",
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "circle",
+                              {
+                                className: "opacity-25",
+                                cx: "12",
+                                cy: "12",
+                                r: "10",
+                                stroke: "currentColor",
+                                strokeWidth: "4"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "path",
+                              {
+                                className: "opacity-75",
+                                fill: "currentColor",
+                                d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                              }
+                            )
+                          ]
+                        }
+                      ),
                       "Exporting..."
                     ] }) : "Download"
                   }

package/lib/components/RelationFieldWrapper.d.ts

@@ -6,5 +6,5 @@ interface RelationFieldWrapperProps {
     readonly fieldName?: string;
     readonly basePath?: string;
 }
-export declare function RelationFieldWrapper({ children, relationType, initialValue, fieldName, basePath }: RelationFieldWrapperProps): import("react/jsx-runtime").JSX.Element;
+export declare function RelationFieldWrapper({ children, relationType, initialValue, fieldName, basePath, }: RelationFieldWrapperProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/RelationFieldWrapper.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { Link } from "react-router";
 import { useState, useEffect } from "react";
 const toKebabCase = (str) => {
-  return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+  return str.replaceAll(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 };
 function RelationFieldWrapper({
   children,

package/lib/components/filters/DateRangeFilter.d.ts

@@ -3,5 +3,5 @@ interface DateRangeFilterProps {
     currentValue: any;
     onChange: (value: any) => void;
 }
-export declare function DateRangeFilter({ fieldName, currentValue, onChange }: Readonly<DateRangeFilterProps>): import("react/jsx-runtime").JSX.Element;
+export declare function DateRangeFilter({ fieldName, currentValue, onChange, }: Readonly<DateRangeFilterProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/filters/EnumFilter.d.ts

@@ -4,5 +4,5 @@ interface EnumFilterProps {
     onChange: (value: string | undefined) => void;
     enumValues: string[];
 }
-export declare function EnumFilter({ fieldName, currentValue, onChange, enumValues }: Readonly<EnumFilterProps>): import("react/jsx-runtime").JSX.Element;
+export declare function EnumFilter({ fieldName, currentValue, onChange, enumValues, }: Readonly<EnumFilterProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/filters/NumberRangeFilter.d.ts

@@ -4,5 +4,5 @@ interface NumberRangeFilterProps {
     currentValue: any;
     onChange: (value: any) => void;
 }
-export declare function NumberRangeFilter({ fieldName, fieldType, currentValue, onChange }: Readonly<NumberRangeFilterProps>): import("react/jsx-runtime").JSX.Element;
+export declare function NumberRangeFilter({ fieldName, fieldType, currentValue, onChange, }: Readonly<NumberRangeFilterProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/filters/RelationComponents.d.ts

@@ -1,26 +1,26 @@
-export declare function RelationDropdownButton({ currentItem, relatedModelName, isOpen, onClick }: Readonly<{
+export declare function RelationDropdownButton({ currentItem, relatedModelName, isOpen, onClick, }: Readonly<{
     currentItem: any;
     relatedModelName: string;
     isOpen: boolean;
     onClick: () => void;
 }>): import("react/jsx-runtime").JSX.Element;
-export declare function RelationSearchInput({ searchTerm, onSearchChange, relatedModelName }: Readonly<{
+export declare function RelationSearchInput({ searchTerm, onSearchChange, relatedModelName, }: Readonly<{
     searchTerm: string;
     onSearchChange: (value: string) => void;
     relatedModelName: string;
 }>): import("react/jsx-runtime").JSX.Element;
-export declare function RelationItem({ item, onSelect }: Readonly<{
+export declare function RelationItem({ item, onSelect, }: Readonly<{
     item: any;
     onSelect: (item: any) => void;
 }>): import("react/jsx-runtime").JSX.Element;
-export declare function RelationItemList({ items, loading, error, onSelect, onClear }: Readonly<{
+export declare function RelationItemList({ items, loading, error, onSelect, onClear, }: Readonly<{
     items: any[];
     loading: boolean;
     error?: any;
     onSelect: (item: any) => void;
     onClear: () => void;
 }>): import("react/jsx-runtime").JSX.Element;
-export declare function RelationDropdownContent({ searchTerm, onSearchChange, relatedModelName, items, loading, error, onSelect, onClear }: Readonly<{
+export declare function RelationDropdownContent({ searchTerm, onSearchChange, relatedModelName, items, loading, error, onSelect, onClear, }: Readonly<{
     searchTerm: string;
     onSearchChange: (value: string) => void;
     relatedModelName: string;

package/lib/components/filters/RelationComponents.js

@@ -78,27 +78,54 @@ function RelationItemList({
     ),
     error && /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 text-sm text-red-600", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-        /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+        /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+          }
+        ) }),
         "Failed to load options"
       ] }),
       /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500 mt-1", children: error.networkError ? "Network error" : "Please try again" })
     ] }),
     !error && loading && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-gray-500", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ jsxs("svg", { className: "animate-spin -ml-1 mr-2 h-4 w-4 text-gray-500", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
-        /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-        /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
-      ] }),
+      /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          className: "animate-spin -ml-1 mr-2 h-4 w-4 text-gray-500",
+          xmlns: "http://www.w3.org/2000/svg",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          children: [
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                className: "opacity-25",
+                cx: "12",
+                cy: "12",
+                r: "10",
+                stroke: "currentColor",
+                strokeWidth: "4"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                className: "opacity-75",
+                fill: "currentColor",
+                d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              }
+            )
+          ]
+        }
+      ),
       "Loading..."
     ] }) }),
     !error && !loading && items.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-gray-500", children: "No items found" }),
-    !error && !loading && items.length > 0 && items.map((item) => /* @__PURE__ */ jsx(
-      RelationItem,
-      {
-        item,
-        onSelect
-      },
-      item.id
-    ))
+    !error && !loading && items.length > 0 && items.map((item) => /* @__PURE__ */ jsx(RelationItem, { item, onSelect }, item.id))
   ] });
 }
 function RelationDropdownContent({