@alepha/ui 0.17.2 → 0.18.1

package/src/core/{components/form → form/components}/TypeForm.browser.spec.tsx

@@ -132,21 +132,17 @@ describe("TypeForm", () => {
     });
   });
 
-  describe("Boolean/Switch", () => {
-    it("should render switch for boolean type and submit true", async ({
+  describe("Boolean/Select", () => {
+    it("should render select for boolean type by default", async ({
       expect,
     }) => {
-      const calls: Array<any> = [];
-
       const Form = () => {
         const form = useForm({
           id: "bool-test",
           schema: t.object({
             subscribe: t.boolean(),
           }),
-          handler: (values) => {
-            calls.push(values);
-          },
+          handler: () => {},
         });
 
         return <TypeForm form={form} />;
@@ -154,67 +150,36 @@ describe("TypeForm", () => {
 
       await renderWithAlepha(<Form />);
 
-      // Find the switch input
-      const switchInput = screen.getByRole("switch");
-      expect(switchInput).toBeDefined();
-
-      // Click to toggle on
-      fireEvent.click(switchInput);
-      fireEvent.submit(screen.getByText("Submit"));
-
-      await waitFor(() => expect(calls.length).toBe(1));
-      expect(calls[0]).toEqual({ subscribe: true });
+      // Boolean renders as Select with Yes/No options by default
+      const selectInput = screen.getByTestId("bool-test-subscribe");
+      expect(selectInput).toBeDefined();
+      expect(selectInput.getAttribute("aria-haspopup")).toBe("listbox");
     });
 
-    it("should render switch unchecked by default", async ({ expect }) => {
+    it("should render switch only when explicitly requested", async ({
+      expect,
+    }) => {
       const Form = () => {
         const form = useForm({
-          id: "bool-false-test",
+          id: "bool-switch-test",
           schema: t.object({
             subscribe: t.boolean(),
           }),
           handler: () => {},
         });
 
-        return <TypeForm form={form} />;
-      };
-
-      await renderWithAlepha(<Form />);
-
-      const switchInput = screen.getByRole("switch");
-      // Should not be checked by default (no default value)
-      expect((switchInput as HTMLInputElement).checked).toBe(false);
-    });
-
-    it("should handle default true value for boolean", async ({ expect }) => {
-      const calls: Array<any> = [];
-
-      const Form = () => {
-        const form = useForm({
-          id: "bool-default-test",
-          schema: t.object({
-            enabled: t.boolean({ default: true }),
-          }),
-          handler: (values) => {
-            calls.push(values);
-          },
-        });
-
-        return <TypeForm form={form} />;
+        return (
+          <TypeForm
+            form={form}
+            fieldControlProps={{ subscribe: { switch: true } }}
+          />
+        );
       };
 
       await renderWithAlepha(<Form />);
 
       const switchInput = screen.getByRole("switch");
-      // Should be checked by default
-      expect((switchInput as HTMLInputElement).checked).toBe(true);
-
-      // Toggle off
-      fireEvent.click(switchInput);
-      fireEvent.submit(screen.getByText("Submit"));
-
-      await waitFor(() => expect(calls.length).toBe(1));
-      expect(calls[0]).toEqual({ enabled: false });
+      expect(switchInput).toBeDefined();
     });
   });
 
@@ -455,9 +420,10 @@ describe("TypeForm", () => {
       const ageInput = screen.getByTestId("combined-test-age");
       expect(ageInput).toBeDefined();
 
-      // Boolean switch
-      const activeSwitch = screen.getByRole("switch");
-      expect(activeSwitch).toBeDefined();
+      // Boolean select (rendered as Select by default, not Switch)
+      const activeSelect = screen.getByTestId("combined-test-active");
+      expect(activeSelect).toBeDefined();
+      expect(activeSelect.getAttribute("aria-haspopup")).toBe("listbox");
 
       // Enum select (Mantine uses textbox with aria-haspopup)
       const roleSelect = screen.getByRole("textbox", { name: "Role" });
@@ -468,9 +434,6 @@ describe("TypeForm", () => {
       expect((nameInput as HTMLInputElement).value).toBe("Alice");
 
       fireEvent.change(ageInput, { target: { value: "30" } });
-
-      fireEvent.click(activeSwitch);
-      expect((activeSwitch as HTMLInputElement).checked).toBe(true);
     });
   });
 
@@ -481,7 +444,6 @@ describe("TypeForm", () => {
           id: "reset-test",
           schema: t.object({
             name: t.text({ default: "default name" }),
-            active: t.boolean({ default: false }),
           }),
           handler: () => {},
         });
@@ -495,16 +457,12 @@ describe("TypeForm", () => {
       const nameInput = screen.getByTestId("reset-test-name");
       fireEvent.change(nameInput, { target: { value: "changed" } });
 
-      const switchInput = screen.getByRole("switch");
-      fireEvent.click(switchInput);
-
       // Click reset
       fireEvent.click(screen.getByText("Reset"));
 
       // Values should be reset
       await waitFor(() => {
         expect((nameInput as HTMLInputElement).value).toBe("default name");
-        expect((switchInput as HTMLInputElement).checked).toBe(false);
       });
     });
   });

package/src/core/{components/form → form/components}/TypeForm.tsx

@@ -1,10 +1,8 @@
+import { ActionButton, type ActionSubmitButtonProps } from "@alepha/ui";
 import { Card, Flex, type FlexProps, Grid } from "@mantine/core";
 import type { TObject } from "alepha";
 import type { FormModel } from "alepha/react/form";
 import type { ReactNode } from "react";
-import ActionButton, {
-  type ActionSubmitButtonProps,
-} from "../buttons/ActionButton.tsx";
 import Control, { type ControlProps } from "./Control.tsx";
 
 export interface TypeFormProps<T extends TObject> {

package/src/core/form/factories/dialogForm.tsx

@@ -0,0 +1,31 @@
+import type { BaseDialogOptions } from "@alepha/ui";
+import type { TObject } from "alepha";
+import type { FormModel } from "alepha/react/form";
+import TypeForm, { type TypeFormProps } from "../components/TypeForm.tsx";
+
+export interface DialogFormOptions<T extends TObject>
+  extends BaseDialogOptions {
+  typeFormProps?: Partial<Omit<TypeFormProps<T>, "form">>;
+}
+
+/**
+ * Creates dialog options for a form dialog.
+ *
+ * @param form - The form model to render.
+ * @param options - Additional dialog and TypeForm options.
+ */
+export const dialogForm = <T extends TObject>(
+  form: FormModel<T>,
+  options?: DialogFormOptions<T>,
+): BaseDialogOptions => ({
+  size: "lg",
+  title: options?.title || "Form",
+  ...options,
+  content: (
+    <TypeForm
+      form={form}
+      skipSubmitButton={false}
+      {...options?.typeFormProps}
+    />
+  ),
+});

package/src/core/form/index.ts

@@ -0,0 +1,23 @@
+import type { ControlProps } from "./components/Control.tsx";
+
+// ---------------------------------------------------------------------------------------------------------------------
+
+export type { ControlProps } from "./components/Control.tsx";
+export { default as Control } from "./components/Control.tsx";
+export { default as ControlArray } from "./components/ControlArray.tsx";
+export { default as ControlDate } from "./components/ControlDate.tsx";
+export { default as ControlNumber } from "./components/ControlNumber.tsx";
+export { default as ControlObject } from "./components/ControlObject.tsx";
+export { default as ControlQueryBuilder } from "./components/ControlQueryBuilder.tsx";
+export { default as ControlSelect } from "./components/ControlSelect.tsx";
+export type { TypeFormProps } from "./components/TypeForm.tsx";
+export { default as TypeForm } from "./components/TypeForm.tsx";
+export { type DialogFormOptions, dialogForm } from "./factories/dialogForm.tsx";
+
+// ---------------------------------------------------------------------------------------------------------------------
+
+declare module "typebox" {
+  interface TSchemaOptions {
+    $control?: Omit<ControlProps, "input">;
+  }
+}

package/src/core/{utils → form/utils}/parseInput.ts

@@ -1,3 +1,4 @@
+import { getDefaultIcon, prettyName, ui } from "@alepha/ui";
 import { type TObject, TypeBoxError } from "alepha";
 import type { BaseInputField } from "alepha/react/form";
 import {
@@ -6,10 +7,7 @@ import {
   type ReactElement,
   type ReactNode,
 } from "react";
-import type { ControlProps } from "../components/form/Control.tsx";
-import { ui } from "../constants/ui.ts";
-import { getDefaultIcon } from "./icons.tsx";
-import { prettyName } from "./string.ts";
+import type { ControlProps } from "../components/Control.tsx";
 
 export const parseInput = (
   props: GenericControlProps,

package/src/core/index.ts

@@ -1,15 +1,10 @@
-import { $context, $module, type Static } from "alepha";
+import { $module, type Static } from "alepha";
 import { AlephaReactForm } from "alepha/react/form";
 import { AlephaReactHead } from "alepha/react/head";
 import { AlephaReactI18n } from "alepha/react/i18n";
 import type { ComponentType, ReactNode } from "react";
 import { alephaSidebarAtom } from "./atoms/alephaSidebarAtom.ts";
 import { alephaThemeAtom } from "./atoms/alephaThemeAtom.ts";
-import {
-  type AlephaThemeListAtom,
-  alephaThemeListAtom,
-} from "./atoms/alephaThemeListAtom.ts";
-import type { ControlProps } from "./components/form/Control.tsx";
 import { ThemeProvider } from "./providers/ThemeProvider.ts";
 import { DialogService } from "./services/DialogService.tsx";
 import { ToastService } from "./services/ToastService.tsx";
@@ -17,12 +12,13 @@ import { UiRouter } from "./UiRouter.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
-export { Flex, Text } from "@mantine/core";
 export * from "./atoms/alephaSidebarAtom.ts";
 export * from "./atoms/alephaThemeAtom.ts";
 export * from "./atoms/alephaThemeListAtom.ts";
 export * from "./atoms/themes/default.ts";
 export * from "./atoms/themes/midnight.ts";
+export type { AlephaMantineProviderProps } from "./components/AlephaMantineProvider.tsx";
+export { default as AlephaMantineProvider } from "./components/AlephaMantineProvider.tsx";
 export type {
   ActionClickButtonProps,
   ActionCommonProps,
@@ -38,41 +34,57 @@ export type { ClipboardButtonProps } from "./components/buttons/ClipboardButton.
 export { default as ClipboardButton } from "./components/buttons/ClipboardButton.tsx";
 export { default as DarkModeButton } from "./components/buttons/DarkModeButton.tsx";
 export { default as LanguageButton } from "./components/buttons/LanguageButton.tsx";
+export type { OmnibarButtonProps } from "./components/buttons/OmnibarButton.tsx";
 export { default as OmnibarButton } from "./components/buttons/OmnibarButton.tsx";
 export { default as ThemeButton } from "./components/buttons/ThemeButton.tsx";
-export { default as ToggleSidebarButton } from "./components/buttons/ToggleSidebarButton.tsx";
+export { default as SidebarCollapseButton } from "./components/buttons/ToggleSidebarButton.tsx";
+export type {
+  DetailDrawerProps,
+  DetailDrawerStatus,
+  DetailDrawerTab,
+} from "./components/data/DetailDrawer.tsx";
+export { default as DetailDrawer } from "./components/data/DetailDrawer.tsx";
+export type {
+  DetailListItem,
+  DetailListProps,
+} from "./components/data/DetailList.tsx";
+export { default as DetailList } from "./components/data/DetailList.tsx";
+export type {
+  StatCardItem,
+  StatCardsProps,
+} from "./components/data/StatCards.tsx";
+export { default as StatCards } from "./components/data/StatCards.tsx";
 export { default as AlertDialog } from "./components/dialogs/AlertDialog.tsx";
 export { default as ConfirmDialog } from "./components/dialogs/ConfirmDialog.tsx";
 export { default as PromptDialog } from "./components/dialogs/PromptDialog.tsx";
-export { default as Control } from "./components/form/Control.tsx";
-export { default as ControlArray } from "./components/form/ControlArray.tsx";
-export { default as ControlDate } from "./components/form/ControlDate.tsx";
-export { default as ControlNumber } from "./components/form/ControlNumber.tsx";
-export { default as ControlObject } from "./components/form/ControlObject.tsx";
-export { default as ControlQueryBuilder } from "./components/form/ControlQueryBuilder.tsx";
-export { default as ControlSelect } from "./components/form/ControlSelect.tsx";
-export { default as TypeForm } from "./components/form/TypeForm.tsx";
-export { default as AlephaMantineProvider } from "./components/layout/AlephaMantineProvider.tsx";
+export type { FlexProps } from "./components/Flex.tsx";
+export { default as Flex } from "./components/Flex.tsx";
+export { default as Heading } from "./components/Heading.tsx";
 export type {
+  AppBarBack,
   AppBarBurger,
   AppBarDark,
   AppBarDivider,
   AppBarElement,
   AppBarItem,
   AppBarLang,
+  AppBarLogo,
   AppBarProps,
   AppBarSearch,
   AppBarSpacer,
 } from "./components/layout/AppBar.tsx";
 export { default as AppBar } from "./components/layout/AppBar.tsx";
 export type { BreadcrumbProps } from "./components/layout/Breadcrumb.tsx";
-export { default as Breadcrumb } from "./components/layout/Breadcrumb.tsx";
+export { default as Breadcrumbs } from "./components/layout/Breadcrumb.tsx";
+export type { ContainerProps } from "./components/layout/Container.tsx";
+export { default as Container } from "./components/layout/Container.tsx";
 export {
   type DashboardShellProps,
   type DashboardShellProps as AdminShellProps,
   default as DashboardShell,
   default as AdminShell,
 } from "./components/layout/DashboardShell.tsx";
+export type { OmnibarProps } from "./components/layout/Omnibar.tsx";
 export { default as Omnibar } from "./components/layout/Omnibar.tsx";
 export type {
   SidebarAbstractItem,
@@ -89,21 +101,20 @@ export type {
   SidebarTheme,
 } from "./components/layout/Sidebar.tsx";
 export { Sidebar } from "./components/layout/Sidebar.tsx";
-export { default as DataTable } from "./components/table/DataTable.tsx";
-export type {
-  CheckboxAction,
-  CheckboxActionContext,
-  ColumnVisibility,
-  DataTableColumn,
-  DataTableColumnContext,
-  DataTableProps,
-  DataTableSubmitContext,
-  FilterVisibility,
-  MaybePage,
-} from "./components/table/types.ts";
+export type { TextProps } from "./components/Text.tsx";
+export { default as Text } from "./components/Text.tsx";
 export * from "./constants/ui.ts";
+// Form
+export * from "./form/index.ts";
+export * from "./helpers/isComponentType.ts";
+export * from "./helpers/renderIcon.tsx";
 export { useDialog } from "./hooks/useDialog.ts";
+export { useTheme } from "./hooks/useTheme.ts";
 export { useToast } from "./hooks/useToast.ts";
+export * from "./interfaces/AlephaIntent.ts";
+// JSON
+export * from "./json/index.ts";
+export * from "./primitives/$ui.ts";
 export * from "./providers/ThemeProvider.ts";
 export type {
   AlertDialogOptions,
@@ -116,6 +127,8 @@ export type {
 } from "./services/DialogService.tsx";
 export { DialogService } from "./services/DialogService.tsx";
 export { ToastService } from "./services/ToastService.tsx";
+// Table
+export * from "./table/index.ts";
 export * from "./UiRouter.ts";
 export * from "./utils/extractSchemaFields.ts";
 export * from "./utils/icons.tsx";
@@ -123,12 +136,6 @@ export * from "./utils/string.ts";
 
 // ---------------------------------------------------------------------------------------------------------------------
 
-declare module "typebox" {
-  interface TSchemaOptions {
-    $control?: Omit<ControlProps, "input">;
-  }
-}
-
 declare module "alepha" {
   interface State {
     [alephaSidebarAtom.key]?: Static<typeof alephaSidebarAtom.schema>;
@@ -163,10 +170,6 @@ declare module "alepha/react/router" {
 // ---------------------------------------------------------------------------------------------------------------------
 
 /**
- * | Stability | Since | Runtime |
- * |-----------|-------|---------|
- * | 2 - beta | 0.12.0 | node, bun, workerd, browser|
- *
  * Core UI components based on Mantine UI v8.
  *
  * **Features:**
@@ -197,14 +200,3 @@ export const AlephaUI = $module({
     alepha.with(ToastService);
   },
 });
-
-/**
- * Convenience function to configure and inject the UiRouter.
- */
-export const $ui = (options: { themes?: AlephaThemeListAtom } = {}) => {
-  const { alepha } = $context();
-  if (options.themes) {
-    alepha.store.set(alephaThemeListAtom, options.themes);
-  }
-  return alepha.inject(UiRouter); // Inject as singleton ?
-};

package/src/core/interfaces/AlephaIntent.ts

@@ -0,0 +1,6 @@
+export type AlephaIntent =
+  | "primary"
+  | "info"
+  | "success"
+  | "warning"
+  | "danger";

package/src/core/interfaces/AlephaTheme.ts

@@ -3,6 +3,5 @@ import type { MantineThemeOverride } from "@mantine/core";
 export type AlephaTheme = MantineThemeOverride & {
   name: string;
   description: string;
-  // --
   defaultColorScheme?: "light" | "dark"; // or "system"
 };

package/src/core/json/factories/dialogJson.tsx

@@ -0,0 +1,24 @@
+import type { BaseDialogOptions } from "@alepha/ui";
+import { ui } from "@alepha/ui";
+import { Flex } from "@mantine/core";
+import { JsonViewer } from "../components/JsonViewer.tsx";
+
+/**
+ * Creates dialog options for a JSON viewer dialog.
+ *
+ * @param data - The JSON data to display.
+ * @param options - Additional dialog options.
+ */
+export const dialogJson = (
+  data?: any,
+  options?: BaseDialogOptions,
+): BaseDialogOptions => ({
+  size: "lg",
+  title: options?.title || "Json Viewer",
+  ...options,
+  content: (
+    <Flex bdrs={"md"} w={"100%"} flex={1} p={"sm"} bg={ui.colors.surface}>
+      <JsonViewer size={"xs"} data={data} />
+    </Flex>
+  ),
+});

package/src/core/json/index.ts

@@ -0,0 +1,2 @@
+export { JsonViewer } from "./components/JsonViewer.tsx";
+export { dialogJson } from "./factories/dialogJson.tsx";

package/src/core/primitives/$ui.ts

@@ -0,0 +1,17 @@
+import { $context } from "alepha";
+import {
+  type AlephaThemeListAtom,
+  alephaThemeListAtom,
+} from "../atoms/alephaThemeListAtom.ts";
+import { UiRouter } from "../UiRouter.ts";
+
+/**
+ * Convenience function to configure and inject the UiRouter.
+ */
+export const $ui = (options: { themes?: AlephaThemeListAtom } = {}) => {
+  const { alepha } = $context();
+  if (options.themes) {
+    alepha.store.set(alephaThemeListAtom, options.themes);
+  }
+  return alepha.inject(UiRouter); // Inject as singleton ?
+};

package/src/core/services/DialogService.tsx

@@ -1,11 +1,9 @@
-import { Flex, type ModalProps } from "@mantine/core";
+import type { ModalProps } from "@mantine/core";
 import { modals } from "@mantine/modals";
 import type { ReactNode } from "react";
-import ErrorViewer from "../components/data/ErrorViewer.tsx";
 import AlertDialog from "../components/dialogs/AlertDialog.tsx";
 import ConfirmDialog from "../components/dialogs/ConfirmDialog.tsx";
 import PromptDialog from "../components/dialogs/PromptDialog.tsx";
-import { ui } from "../constants/ui.ts";
 
 // Base interfaces
 export interface BaseDialogOptions extends Partial<ModalProps> {
@@ -158,49 +156,4 @@ export class DialogService {
       modals.closeAll();
     }
   }
-
-  /**
-   * Show an error viewer dialog
-   */
-  public error(
-    error: Error | unknown,
-    options?: BaseDialogOptions & { showStack?: boolean },
-  ): void {
-    this.open({
-      size: "lg",
-      title: options?.title || "Error",
-      ...options,
-      content: (
-        <Flex bdrs={"md"} w={"100%"} flex={1} p={"sm"} bg={ui.colors.surface}>
-          <ErrorViewer
-            size={"xs"}
-            error={error}
-            showStack={options?.showStack ?? true}
-          />
-        </Flex>
-      ),
-    });
-  }
-
-  /**
-   * Show a form dialog for structured input
-   */
-  public form(options?: BaseDialogOptions): Promise<any> {
-    // Implementation to be added
-    return Promise.resolve(null);
-  }
-
-  /**
-   * Show a loading/progress dialog with optional progress percentage
-   */
-  public loading(options?: BaseDialogOptions & { progress?: number }): void {
-    // Implementation to be added
-  }
-
-  /**
-   * Show an image viewer/gallery dialog
-   */
-  public image(src: string | string[], options?: BaseDialogOptions): void {
-    // Implementation to be added
-  }
 }

package/src/core/styles.css

@@ -5,6 +5,7 @@
 @import "@mantine/notifications/styles.css";
 @import "@mantine/charts/styles.css";
 @import "./components/buttons/DarkModeButton.css";
+@import "./json/components/JsonViewer.css";
 
 :root {
   --alepha-background-light: var(--mantine-color-gray-1);
@@ -102,18 +103,10 @@
   transition: width 0.2s ease-in-out;
 }
 
-.alepha-sidebar-navbar[data-resizing="true"] {
-  transition: none;
-}
-
 .alepha-sidebar-main {
   transition: padding-left 0.2s ease-in-out;
 }
 
-.alepha-sidebar-main[data-resizing="true"] {
-  transition: none;
-}
-
 /* ------------------------------------------------------------------------------------------------------------------ */
 /* Modal Customizations */
 

package/src/core/{components/table → table/components}/ColumnPicker.tsx

@@ -1,14 +1,13 @@
+import { ActionButton, ui } from "@alepha/ui";
 import { Checkbox, Flex, Popover, ScrollArea, Text } from "@mantine/core";
 import { IconColumns } from "@tabler/icons-react";
 import type { TObject } from "alepha";
 import { useState } from "react";
-import { ui } from "../../constants/ui.ts";
-import ActionButton from "../buttons/ActionButton.tsx";
 import {
   type ColumnVisibility,
   type DataTableColumn,
   DEFAULT_MAX_VISIBLE_COLUMNS,
-} from "./types.ts";
+} from "../interfaces/types.ts";
 
 export interface ColumnPickerProps<T extends object, Filters extends TObject> {
   columns: { [key: string]: DataTableColumn<T, Filters> };

package/src/core/{components/table → table/components}/DataTable.tsx

@@ -1,3 +1,4 @@
+import { ActionButton, ui } from "@alepha/ui";
 import {
   Checkbox,
   Drawer,
@@ -18,21 +19,19 @@ import { DateTimeProvider } from "alepha/datetime";
 import { useInject } from "alepha/react";
 import { type FormModel, useForm } from "alepha/react/form";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { ui } from "../../constants/ui.ts";
-import ActionButton from "../buttons/ActionButton.tsx";
-import DataTableFilters, {
-  type DataTableFiltersProps,
-} from "./DataTableFilters.tsx";
-import DataTablePagination from "./DataTablePagination.tsx";
-import DataTableToolbar from "./DataTableToolbar.tsx";
 import type {
   ColumnVisibility,
   DataTableColumnContext,
   DataTableProps,
   FilterVisibility,
   MaybePage,
-} from "./types.ts";
-import { DEFAULT_MAX_VISIBLE_COLUMNS } from "./types.ts";
+} from "../interfaces/types.ts";
+import { DEFAULT_MAX_VISIBLE_COLUMNS } from "../interfaces/types.ts";
+import DataTableFilters, {
+  type DataTableFiltersProps,
+} from "./DataTableFilters.tsx";
+import DataTablePagination from "./DataTablePagination.tsx";
+import DataTableToolbar from "./DataTableToolbar.tsx";
 import { useTableSelection } from "./useTableSelection.ts";
 
 type SortDirection = "asc" | "desc" | null;

package/src/core/{components/table → table/components}/DataTableFilters.tsx

@@ -1,10 +1,13 @@
+import { ui } from "@alepha/ui";
 import { Flex } from "@mantine/core";
 import { type TObject, t } from "alepha";
 import type { FormModel } from "alepha/react/form";
 import { useMemo } from "react";
-import { ui } from "../../constants/ui.ts";
-import TypeForm, { type TypeFormProps } from "../form/TypeForm.tsx";
-import type { FilterVisibility } from "./types.ts";
+import {
+  default as TypeForm,
+  type TypeFormProps,
+} from "../../form/components/TypeForm.tsx";
+import type { FilterVisibility } from "../interfaces/types.ts";
 
 export interface DataTableFiltersProps {
   schema: TObject;