@umodeapporg/ui 0.0.0-canary.ca10e69

package/dist/components/UI/CustomBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomBadge.js","sources":["../../../src/components/UI/CustomBadge.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { mergeClasses } from '@/helpers/mergeClasses';\n\nexport type TCustomBadgeTone = 'brand' | 'danger' | 'success' | 'warning' | 'info';\n\nconst TONE_CLASS: Record<TCustomBadgeTone, string> = {\n  brand: 'bg-brand text-brand-fg',\n  danger: 'bg-danger text-danger-fg',\n  success: 'bg-success text-success-fg',\n  warning: 'bg-warning text-warning-fg',\n  info: 'bg-info text-info-fg',\n};\n\ninterface ICustomBadgeProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'content'> {\n  content?: string | number;\n  children?: React.ReactNode;\n  tone?: TCustomBadgeTone;\n  invisible?: boolean;\n  className?: string;\n  containerClassName?: string;\n}\n\n/**\n * Forwards its ref and spreads the DOM props onto the wrapper, so it can sit directly under a\n * `ControlledTooltip` (which clones its child and injects a ref plus pointer handlers).\n */\nconst CustomBadge = forwardRef<HTMLDivElement, ICustomBadgeProps>(\n  ({ content, children, tone = 'brand', invisible, className, containerClassName, ...rest }, ref) => {\n    return (\n      <div {...rest} ref={ref} className={mergeClasses('relative inline-flex', containerClassName)}>\n        {children}\n        <span\n          className={mergeClasses(\n            'pointer-events-none absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-xxs font-bold leading-none',\n            TONE_CLASS[tone],\n            invisible && 'hidden',\n            className,\n          )}\n        >\n          {content}\n        </span>\n      </div>\n    );\n  },\n);\n\nCustomBadge.displayName = 'CustomBadge';\n\nexport default CustomBadge;\n"],"names":[],"mappings":";;;AAMA,MAAM,aAA+C;AAAA,EACnD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AACR;AAeA,MAAM,cAAc;AAAA,EAClB,CAAC,EAAE,SAAS,UAAU,OAAO,SAAS,WAAW,WAAW,oBAAoB,GAAG,KAAA,GAAQ,QAAQ;AACjG,WACE,qBAAC,SAAK,GAAG,MAAM,KAAU,WAAW,aAAa,wBAAwB,kBAAkB,GACxF,UAAA;AAAA,MAAA;AAAA,MACD;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,WAAW,IAAI;AAAA,YACf,aAAa;AAAA,YACb;AAAA,UAAA;AAAA,UAGD,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;"}

package/dist/components/UI/CustomCard.d.ts

@@ -0,0 +1,13 @@
+interface ICustomCardProps {
+    className?: string;
+    onClickHook?: () => void;
+    customRef?: React.Ref<HTMLDivElement>;
+    itsClickable?: boolean;
+    role?: React.AriaRole;
+    tabIndex?: number;
+    ariaHasPopup?: React.AriaAttributes['aria-haspopup'];
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    children: React.ReactNode;
+}
+declare const CustomCard: React.FC<ICustomCardProps>;
+export default CustomCard;

package/dist/components/UI/CustomCard.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+const CustomCard = ({
+  children,
+  className,
+  onClickHook,
+  itsClickable = false,
+  customRef,
+  role,
+  tabIndex,
+  ariaHasPopup,
+  onKeyDown
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: customRef,
+      role,
+      tabIndex,
+      "aria-haspopup": ariaHasPopup,
+      className: classNames("rounded-lg border border-border", className, {
+        /* The interaction contract for a card: it lifts, its edge picks up the brand and
+           it presses in on click. Previously this transitioned `transform` while never
+           transforming anything, so the hover was instant and the 280ms was dead weight. */
+        ["interactive cursor-pointer shadow-elevation1 hover:-translate-y-px hover:border-brand-border hover:shadow-elevation2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-ring-offset"]: itsClickable
+      }),
+      onClick: onClickHook,
+      onKeyDown,
+      children
+    }
+  );
+};
+export {
+  CustomCard as default
+};
+//# sourceMappingURL=CustomCard.js.map

package/dist/components/UI/CustomCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomCard.js","sources":["../../../src/components/UI/CustomCard.tsx"],"sourcesContent":["import classNames from 'classnames';\n\ninterface ICustomCardProps {\n  className?: string;\n  onClickHook?: () => void;\n  customRef?: React.Ref<HTMLDivElement>;\n  itsClickable?: boolean;\n  role?: React.AriaRole;\n  tabIndex?: number;\n  ariaHasPopup?: React.AriaAttributes['aria-haspopup'];\n  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;\n  children: React.ReactNode;\n}\n\nconst CustomCard: React.FC<ICustomCardProps> = ({\n  children,\n  className,\n  onClickHook,\n  itsClickable = false,\n  customRef,\n  role,\n  tabIndex,\n  ariaHasPopup,\n  onKeyDown,\n}) => {\n  return (\n    <div\n      ref={customRef}\n      role={role}\n      tabIndex={tabIndex}\n      aria-haspopup={ariaHasPopup}\n      className={classNames('rounded-lg border border-border', className, {\n        /* The interaction contract for a card: it lifts, its edge picks up the brand and\n           it presses in on click. Previously this transitioned `transform` while never\n           transforming anything, so the hover was instant and the 280ms was dead weight. */\n        ['interactive cursor-pointer shadow-elevation1 hover:-translate-y-px hover:border-brand-border hover:shadow-elevation2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-ring-offset']:\n          itsClickable,\n      })}\n      onClick={onClickHook}\n      onKeyDown={onKeyDown}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default CustomCard;\n"],"names":[],"mappings":";;AAcA,MAAM,aAAyC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,iBAAe;AAAA,MACf,WAAW,WAAW,mCAAmC,WAAW;AAAA;AAAA;AAAA;AAAA,QAIlE,CAAC,gQAAgQ,GAC/P;AAAA,MAAA,CACH;AAAA,MACD,SAAS;AAAA,MACT;AAAA,MAEC;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/UI/CustomChart.d.ts

@@ -0,0 +1,21 @@
+import { ApexOptions } from 'apexcharts';
+import * as React from 'react';
+interface ICustomChartProps {
+    id?: string;
+    className?: string;
+    stacked?: boolean;
+    stackType?: ApexChart['stackType'];
+    chartHeight: number;
+    type: ApexChart['type'];
+    series: ApexAxisChartSeries | ApexNonAxisChartSeries | undefined;
+    loadingChart?: boolean;
+    chartOptions?: ApexOptions;
+}
+/**
+ * Legacy fixed palette. Kept only for callers that pass their own `chartOptions.colors`
+ * and still import this; new charts inherit the themed series palette automatically.
+ * @deprecated read the series palette from `useThemeChartTokens()` instead.
+ */
+export declare const defaultChartColors: string[];
+declare const CustomChart: React.FC<ICustomChartProps>;
+export default CustomChart;

package/dist/components/UI/CustomChart.js

@@ -0,0 +1,108 @@
+import { jsx } from "react/jsx-runtime";
+import Chart from "react-apexcharts";
+import { useThemeChartTokens } from "../../helpers/themeTokens.js";
+import SkeletonLoading from "./SkeletonLoading.js";
+const languageOptions = {
+  chart: {
+    locales: [
+      {
+        name: "pt-BR",
+        options: {
+          months: [
+            "Janeiro",
+            "Fevereiro",
+            "Março",
+            "Abril",
+            "Maio",
+            "Junho",
+            "Julho",
+            "Agosto",
+            "Setembro",
+            "Outubro",
+            "Novembro",
+            "Dezembro"
+          ],
+          shortMonths: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
+          days: ["Domingo", "Segunda-feira", "Terça-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sábado"],
+          shortDays: ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"],
+          toolbar: {
+            exportToSVG: "Baixar SVG",
+            exportToPNG: "Baixar PNG",
+            menu: "Menu",
+            selection: "Seleção",
+            selectionZoom: "Zoom de Seleção",
+            zoomIn: "Aproximar",
+            zoomOut: "Afastar",
+            pan: "Navegação",
+            reset: "Redefinir Zoom"
+          }
+        }
+      }
+    ]
+  }
+};
+const defaultChartColors = [
+  "#6A29A5",
+  "#E66300",
+  "#FAC710",
+  "#8B4513",
+  "#FF69B4",
+  "#8A2BE2",
+  "#4682B4",
+  "#32CD32",
+  "#FF4500",
+  "#FFD700"
+];
+const CustomChart = ({
+  id,
+  className,
+  stacked = false,
+  stackType = "normal",
+  type,
+  chartHeight,
+  series,
+  loadingChart,
+  chartOptions
+}) => {
+  const tokens = useThemeChartTokens();
+  const options = {
+    ...chartOptions,
+    chart: {
+      locales: [languageOptions.chart.locales[0]],
+      defaultLocale: "pt-BR",
+      type,
+      height: chartHeight,
+      stacked,
+      stackType,
+      background: "transparent",
+      foreColor: tokens.foregroundMuted,
+      zoom: {
+        enabled: false
+      },
+      toolbar: {
+        show: false
+      },
+      ...chartOptions?.chart
+    },
+    theme: { mode: tokens.mode, ...chartOptions?.theme },
+    grid: {
+      borderColor: tokens.grid,
+      ...chartOptions?.grid
+    },
+    tooltip: {
+      theme: tokens.mode,
+      ...chartOptions?.tooltip
+    },
+    legend: {
+      labels: { colors: tokens.foregroundMuted },
+      ...chartOptions?.legend
+    },
+    colors: chartOptions?.colors ?? tokens.series
+  };
+  return loadingChart ? /* @__PURE__ */ jsx(SkeletonLoading, { style: { height: chartHeight }, className: "!rounded-lg", icon: "insert_chart" }) : /* @__PURE__ */ jsx(Chart, { className, id, options, series, type, height: chartHeight });
+};
+export {
+  CustomChart as default,
+  defaultChartColors
+};
+//# sourceMappingURL=CustomChart.js.map

package/dist/components/UI/CustomChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomChart.js","sources":["../../../src/components/UI/CustomChart.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ApexOptions } from 'apexcharts';\nimport Chart from 'react-apexcharts';\n\nimport { useThemeChartTokens } from '@/helpers/themeTokens';\n\nimport SkeletonLoading from './SkeletonLoading';\n\ninterface ICustomChartProps {\n  id?: string;\n  className?: string;\n  stacked?: boolean;\n  stackType?: ApexChart['stackType'];\n  chartHeight: number;\n  type: ApexChart['type'];\n  series: ApexAxisChartSeries | ApexNonAxisChartSeries | undefined;\n  loadingChart?: boolean;\n  chartOptions?: ApexOptions;\n}\n\n/* eslint-disable i18n-check/no-portuguese-strings */\n// ApexCharts locale configuration: values are required string constants for the chart library.\nconst languageOptions = {\n  chart: {\n    locales: [\n      {\n        name: 'pt-BR',\n        options: {\n          months: [\n            'Janeiro',\n            'Fevereiro',\n            'Março',\n            'Abril',\n            'Maio',\n            'Junho',\n            'Julho',\n            'Agosto',\n            'Setembro',\n            'Outubro',\n            'Novembro',\n            'Dezembro',\n          ],\n          shortMonths: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],\n          days: ['Domingo', 'Segunda-feira', 'Terça-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'Sábado'],\n          shortDays: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'],\n          toolbar: {\n            exportToSVG: 'Baixar SVG',\n            exportToPNG: 'Baixar PNG',\n            menu: 'Menu',\n            selection: 'Seleção',\n            selectionZoom: 'Zoom de Seleção',\n            zoomIn: 'Aproximar',\n            zoomOut: 'Afastar',\n            pan: 'Navegação',\n            reset: 'Redefinir Zoom',\n          },\n        },\n      },\n    ],\n    defaultLocale: 'pt-BR',\n  },\n};\n/* eslint-enable i18n-check/no-portuguese-strings */\n\n/**\n * Legacy fixed palette. Kept only for callers that pass their own `chartOptions.colors`\n * and still import this; new charts inherit the themed series palette automatically.\n * @deprecated read the series palette from `useThemeChartTokens()` instead.\n */\nexport const defaultChartColors = [\n  '#6A29A5',\n  '#E66300',\n  '#FAC710',\n  '#8B4513',\n  '#FF69B4',\n  '#8A2BE2',\n  '#4682B4',\n  '#32CD32',\n  '#FF4500',\n  '#FFD700',\n];\n\nconst CustomChart: React.FC<ICustomChartProps> = ({\n  id,\n  className,\n  stacked = false,\n  stackType = 'normal',\n  type,\n  chartHeight,\n  series,\n  loadingChart,\n  chartOptions,\n}) => {\n  const tokens = useThemeChartTokens();\n\n  const options: ApexOptions = {\n    ...chartOptions,\n    chart: {\n      locales: [languageOptions.chart.locales[0]],\n      defaultLocale: 'pt-BR',\n      type: type,\n      height: chartHeight,\n      stacked,\n      stackType,\n      background: 'transparent',\n      foreColor: tokens.foregroundMuted,\n      zoom: {\n        enabled: false,\n      },\n      toolbar: {\n        show: false,\n      },\n      ...chartOptions?.chart,\n    },\n    theme: { mode: tokens.mode, ...chartOptions?.theme },\n    grid: {\n      borderColor: tokens.grid,\n      ...chartOptions?.grid,\n    },\n    tooltip: {\n      theme: tokens.mode,\n      ...chartOptions?.tooltip,\n    },\n    legend: {\n      labels: { colors: tokens.foregroundMuted },\n      ...chartOptions?.legend,\n    },\n    colors: chartOptions?.colors ?? tokens.series,\n  };\n\n  return loadingChart ? (\n    <SkeletonLoading style={{ height: chartHeight }} className=\"!rounded-lg\" icon=\"insert_chart\" />\n  ) : (\n    <Chart className={className} id={id} options={options} series={series} type={type} height={chartHeight} />\n  );\n};\n\nexport default CustomChart;\n"],"names":[],"mappings":";;;;AAsBA,MAAM,kBAAkB;AAAA,EACtB,OAAO;AAAA,IACL,SAAS;AAAA,MACP;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,UACP,QAAQ;AAAA,YACN;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAEF,aAAa,CAAC,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,KAAK;AAAA,UAChG,MAAM,CAAC,WAAW,iBAAiB,eAAe,gBAAgB,gBAAgB,eAAe,QAAQ;AAAA,UACzG,WAAW,CAAC,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,KAAK;AAAA,UAC3D,SAAS;AAAA,YACP,aAAa;AAAA,YACb,aAAa;AAAA,YACb,MAAM;AAAA,YACN,WAAW;AAAA,YACX,eAAe;AAAA,YACf,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,KAAK;AAAA,YACL,OAAO;AAAA,UAAA;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,EAGJ;AACF;AAQO,MAAM,qBAAqB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,cAA2C,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,SAAS,oBAAA;AAEf,QAAM,UAAuB;AAAA,IAC3B,GAAG;AAAA,IACH,OAAO;AAAA,MACL,SAAS,CAAC,gBAAgB,MAAM,QAAQ,CAAC,CAAC;AAAA,MAC1C,eAAe;AAAA,MACf;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,WAAW,OAAO;AAAA,MAClB,MAAM;AAAA,QACJ,SAAS;AAAA,MAAA;AAAA,MAEX,SAAS;AAAA,QACP,MAAM;AAAA,MAAA;AAAA,MAER,GAAG,cAAc;AAAA,IAAA;AAAA,IAEnB,OAAO,EAAE,MAAM,OAAO,MAAM,GAAG,cAAc,MAAA;AAAA,IAC7C,MAAM;AAAA,MACJ,aAAa,OAAO;AAAA,MACpB,GAAG,cAAc;AAAA,IAAA;AAAA,IAEnB,SAAS;AAAA,MACP,OAAO,OAAO;AAAA,MACd,GAAG,cAAc;AAAA,IAAA;AAAA,IAEnB,QAAQ;AAAA,MACN,QAAQ,EAAE,QAAQ,OAAO,gBAAA;AAAA,MACzB,GAAG,cAAc;AAAA,IAAA;AAAA,IAEnB,QAAQ,cAAc,UAAU,OAAO;AAAA,EAAA;AAGzC,SAAO,mCACJ,iBAAA,EAAgB,OAAO,EAAE,QAAQ,YAAA,GAAe,WAAU,eAAc,MAAK,eAAA,CAAe,wBAE5F,OAAA,EAAM,WAAsB,IAAQ,SAAkB,QAAgB,MAAY,QAAQ,YAAA,CAAa;AAE5G;"}

package/dist/components/UI/DataTable/DataTable.d.ts

@@ -0,0 +1,108 @@
+import { JSX, ReactNode } from 'react';
+import { IDataTableConfig, IDataTableRow, IDataTableSortState, TDataTableFilterValues, TDataTableViewMode } from './types';
+import { IDataTableClientPaginationState, IDataTablePagination } from './useDataTableInstance';
+interface IDataTableProps<T extends IDataTableRow, C extends IDataTableRow = IDataTableRow> {
+    config: IDataTableConfig<T, C>;
+    rows: Array<T>;
+    loading?: boolean;
+    error?: boolean;
+    /** Cause behind `error`, so the empty state can name a denial instead of a system failure. */
+    errorCause?: unknown;
+    onRetry?: () => void;
+    emptyMessage?: string;
+    searchLabel?: string;
+    onSearch?: (value: string) => void;
+    initialSearch?: string;
+    onSearchTermChange?: (value: string) => void;
+    searchDisabled?: boolean;
+    searchDebounceTime?: number;
+    searchMinLength?: number;
+    /** Renders the search input in the toolbar's start (left) group instead of the end. */
+    searchAtStart?: boolean;
+    sort?: IDataTableSortState | null;
+    onSortChange?: (sort: IDataTableSortState | null) => void;
+    pagination?: IDataTablePagination;
+    /** Client mode: seeds page/pageSize (1-based page), e.g. from the URL. */
+    initialClientPagination?: IDataTableClientPaginationState;
+    /** Client mode: reports page/pageSize changes and keeps the page across in-place row updates. */
+    onClientPaginationChange?: (pagination: IDataTableClientPaginationState) => void;
+    toolbarSlot?: JSX.Element;
+    /**
+     * Extra controls rendered in the footer's left group, right after the table's
+     * own buttons (columns, edit mode, bulk edit). For an action that belongs to
+     * the list itself rather than to the page header, so it sits beside the
+     * controls it relates to instead of competing with the page actions. The
+     * footer row renders for this slot alone when the table has no other control.
+     */
+    footerActionsSlot?: ReactNode;
+    /**
+     * Applied filter values. Passing them (together with `config.filters`) makes
+     * the table render the always-visible active-filter chips above the toolbar,
+     * so the user never has to hover the button to see what is filtering.
+     */
+    filterValues?: TDataTableFilterValues;
+    onFilterValuesChange?: (values: TDataTableFilterValues) => void;
+    /** Rendered at the start (left) of the toolbar, before tabs and view toggle. */
+    toolbarStartSlot?: JSX.Element;
+    /**
+     * Full-width band rendered as the first row of the list body, spanning every
+     * column (below the header, above the data rows). Opt-in: omit for a normal
+     * table. When set, the empty state is skipped so the band stays visible even
+     * with zero data rows (e.g. an inline "create the first record" editor).
+     */
+    bodyTopRow?: ReactNode;
+    /** Client mode: reports the filtered (post-search) row count on every change. */
+    onFilteredCountChange?: (count: number) => void;
+    /**
+     * Controlled view mode. When provided, the host owns the state (e.g. to persist
+     * it) and must update it via `onViewModeChange`; omit for internal state.
+     */
+    viewMode?: TDataTableViewMode;
+    /**
+     * Fired on every view-toggle click, including re-selecting the active mode
+     * (hosts use it e.g. to reopen the grouping dialog).
+     */
+    onViewModeChange?: (mode: TDataTableViewMode) => void;
+    /**
+     * Where the "Columns" toggle renders: `header` (default, inside the table
+     * header), `toolbar` (next to the view toggle) or `footer` (bottom-left,
+     * on the same row as the pagination).
+     */
+    columnTogglePlacement?: 'header' | 'toolbar' | 'footer';
+    /**
+     * Enables infinite scroll in the Cards view: the table observes a bottom
+     * sentinel and calls `loadMore` while `hasMore`. Pass `source.cardsInfinite`
+     * from `useDataTableSource`. The Lista view keeps its pagination bar.
+     */
+    cardsInfiniteScroll?: {
+        hasMore: boolean;
+        loadingMore: boolean;
+        loadMore: () => void;
+    };
+    /**
+     * Hides the built-in segmented view toggle. Use when the host renders its own
+     * Cards/Lista switcher (e.g. a page-level `ControlledTabs`) and drives `viewMode`
+     * itself. Other consumers keep the default toggle.
+     */
+    hideViewToggle?: boolean;
+    /**
+     * Layout mode. `page` (default): the table owns a bounded, vertically-scrolling
+     * region (`flex-1 min-h-0`) for full-page lists. `fit`: the table sizes to its
+     * content and scrolls only horizontally — for embedding inside a dialog / card /
+     * editor grid where the host container owns vertical scroll. In `fit` mode the
+     * empty state is compact (no full illustration) so surrounding controls such as
+     * the add-row button stay visible.
+     */
+    layout?: 'page' | 'fit';
+    /** Reduces cell vertical padding for more visible rows per viewport. */
+    dense?: boolean;
+    /** Roomier cell padding and type scale, for tables that need to read bigger. */
+    spacious?: boolean;
+    /**
+     * Per-cell persistence state (`statuses` from `useDataTableCommitQueue`), painted
+     * on the cells so the user sees what is saving and what failed.
+     */
+    commitStatuses?: ReadonlyMap<string, string>;
+}
+declare const DataTable: <T extends IDataTableRow, C extends IDataTableRow = IDataTableRow>({ config: configProp, rows, loading, error, errorCause, onRetry, emptyMessage, searchLabel, onSearch, initialSearch, onSearchTermChange, searchDisabled, searchDebounceTime, searchMinLength, searchAtStart, sort, onSortChange, pagination, initialClientPagination, onClientPaginationChange, toolbarSlot, footerActionsSlot, filterValues, onFilterValuesChange, toolbarStartSlot, bodyTopRow, onFilteredCountChange, viewMode: controlledViewMode, onViewModeChange, columnTogglePlacement, cardsInfiniteScroll, hideViewToggle, layout, dense: denseProp, spacious, commitStatuses, }: IDataTableProps<T, C>) => JSX.Element;
+export default DataTable;