@axzydev/axzy_ui_system 1.3.1 → 1.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -2
- package/dist/index.cjs +957 -554
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.d.cts +191 -9
- package/dist/index.d.ts +191 -9
- package/dist/index.js +908 -505
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/App.tsx +150 -154
- package/src/components/molecules/table/table.doc.mdx +64 -21
- package/src/components/molecules/table/table.props.ts +81 -2
- package/src/components/molecules/table/table.stories.tsx +155 -0
- package/src/components/molecules/table/table.tsx +178 -36
- package/src/components/organisms/data-table/ITDataTable.doc.mdx +37 -3
- package/src/components/organisms/data-table/ITDataTable.stories.tsx +43 -0
- package/src/components/organisms/data-table/dataTable.props.ts +64 -0
- package/src/components/organisms/data-table/dataTable.tsx +241 -82
- package/src/components/organisms/sidebar/sidebar.doc.mdx +5 -0
- package/src/components/organisms/sidebar/sidebar.props.ts +5 -0
- package/src/components/organisms/sidebar/sidebar.stories.tsx +1 -1
- package/src/components/organisms/sidebar/sidebar.tsx +27 -7
- package/src/components/organisms/topbar/topbar.doc.mdx +3 -0
- package/src/components/organisms/topbar/topbar.props.ts +16 -0
- package/src/components/organisms/topbar/topbar.tsx +133 -98
- package/src/components/templates/layout/layout.doc.mdx +2 -0
- package/src/components/templates/layout/layout.tsx +7 -1
- package/src/components/templates/page/page.doc.mdx +8 -2
- package/src/components/templates/page/page.props.ts +11 -1
- package/src/components/templates/page/page.tsx +11 -1
- package/src/components/theme-provider/themePresets.ts +6 -0
- package/src/components/theme-provider/themeProvider.doc.mdx +1 -0
- package/src/components/theme-provider/themeProvider.props.ts +2 -0
- package/src/components/theme-provider/themeProvider.tsx +13 -2
- package/src/dev.css +58 -1
- package/src/hooks/useElementSize.ts +46 -0
- package/src/hooks/useVirtualRows.ts +123 -0
- package/src/index.ts +2 -0
- package/src/sandbox/LandingShowcase.tsx +654 -0
- package/src/sandbox/NotFoundShowcase.tsx +70 -0
- package/src/sandbox/TopbarSearch.tsx +85 -0
- package/src/sandbox/navigation.ts +148 -0
- package/src/sandbox/useHashRoute.ts +149 -0
- package/src/showcases/DataShowcases.tsx +321 -24
- package/src/showcases/PageShowcases.tsx +31 -0
- package/src/showcases/StructureShowcases.tsx +42 -4
- package/src/theme/theme.types.ts +2 -0
- package/src/types/table.types.ts +48 -0
- package/src/utils/styles.ts +12 -5
- package/src/utils/table.utils.ts +31 -0
package/dist/index.d.cts
CHANGED
|
@@ -20,6 +20,11 @@ declare function useDebouncedSearch({ initialValue, debounceMs, onSearch, }: Use
|
|
|
20
20
|
|
|
21
21
|
type TableVariants = "default" | "striped" | "bordered";
|
|
22
22
|
type TableSize = "sm" | "md" | "lg";
|
|
23
|
+
/**
|
|
24
|
+
* Cell padding / row-height preset for tables. Independent of `TableSize`
|
|
25
|
+
* (which only controls font-size, and shifts the row height via the line box).
|
|
26
|
+
*/
|
|
27
|
+
type TableDensity = "compact" | "normal" | "comfortable";
|
|
23
28
|
|
|
24
29
|
/** Definition of a single searchable, sortable, editable table column. */
|
|
25
30
|
interface SearchColumn<T = any> {
|
|
@@ -1160,6 +1165,22 @@ interface Column<T = any> {
|
|
|
1160
1165
|
/** Shows an error state in the filter UI when the catalog failed to load. @default false */
|
|
1161
1166
|
error?: boolean;
|
|
1162
1167
|
};
|
|
1168
|
+
/**
|
|
1169
|
+
* Fixed column width. A `number` is treated as pixels (`width: 120` → `120px`);
|
|
1170
|
+
* a `string` is passed through as any CSS length (`"20%"`, `"12rem"`).
|
|
1171
|
+
* A `<colgroup>` is only rendered when at least one column defines a width.
|
|
1172
|
+
*/
|
|
1173
|
+
width?: number | string;
|
|
1174
|
+
/** Minimum column width in pixels, applied to the header and body cells via inline style. */
|
|
1175
|
+
minWidth?: number;
|
|
1176
|
+
/** Horizontal alignment of this column's header and body cells. @default "left" */
|
|
1177
|
+
align?: "left" | "center" | "right";
|
|
1178
|
+
/**
|
|
1179
|
+
* Truncates overflowing cell content with an ellipsis and exposes the raw
|
|
1180
|
+
* string/number value through the native `title` attribute.
|
|
1181
|
+
* @default false
|
|
1182
|
+
*/
|
|
1183
|
+
truncate?: boolean;
|
|
1163
1184
|
}
|
|
1164
1185
|
interface ITTableProps<T> {
|
|
1165
1186
|
/** Column definitions: key, label, type, sortable behavior, filters, and custom rendering. */
|
|
@@ -1168,7 +1189,7 @@ interface ITTableProps<T> {
|
|
|
1168
1189
|
containerClassName?: string;
|
|
1169
1190
|
/** The data array to render in the table body. */
|
|
1170
1191
|
data: T[];
|
|
1171
|
-
/** Visual variant: "default", "striped", "bordered"
|
|
1192
|
+
/** Visual variant: "default", "striped", "bordered". */
|
|
1172
1193
|
variant?: TableVariants;
|
|
1173
1194
|
/** Additional CSS classes for the root table wrapper. */
|
|
1174
1195
|
className?: string;
|
|
@@ -1188,6 +1209,66 @@ interface ITTableProps<T> {
|
|
|
1188
1209
|
showVerticalBorder?: boolean;
|
|
1189
1210
|
/** Custom class for vertical borders (overrides the default subtle gray). */
|
|
1190
1211
|
verticalBorderClassname?: string;
|
|
1212
|
+
/**
|
|
1213
|
+
* Callback fired when a row (table view) or card (cards view) is activated,
|
|
1214
|
+
* receiving the row item and the originating event. The event is a
|
|
1215
|
+
* `MouseEvent` for pointer interaction and a `KeyboardEvent` for Enter/Space
|
|
1216
|
+
* activation. Not fired when the interaction starts inside an interactive
|
|
1217
|
+
* child (button, link, input, or any `[data-row-click-ignore]` element).
|
|
1218
|
+
*/
|
|
1219
|
+
onRowClick?: (row: T, event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
|
|
1220
|
+
/**
|
|
1221
|
+
* Table layout algorithm. `"fixed"` respects column `width` values and drops
|
|
1222
|
+
* the `min-w-max` / `min-w-[150px]` floors so content no longer forces
|
|
1223
|
+
* horizontal scrolling; `"auto"` keeps the content-driven layout.
|
|
1224
|
+
* @default "auto"
|
|
1225
|
+
*/
|
|
1226
|
+
layout?: "auto" | "fixed";
|
|
1227
|
+
/**
|
|
1228
|
+
* Cell padding and row-height preset. Independent of `size`, which only
|
|
1229
|
+
* controls font-size: `"compact"` | `"normal"` | `"comfortable"`.
|
|
1230
|
+
* @default "normal"
|
|
1231
|
+
*/
|
|
1232
|
+
density?: TableDensity;
|
|
1233
|
+
/**
|
|
1234
|
+
* Container width (in px) below which the table automatically falls back to
|
|
1235
|
+
* the cards view. `0` disables the fallback.
|
|
1236
|
+
* @default 0
|
|
1237
|
+
*/
|
|
1238
|
+
autoCardBreakpoint?: number;
|
|
1239
|
+
/**
|
|
1240
|
+
* Enables row virtualization for the table view: only the visible window of
|
|
1241
|
+
* rows is rendered, with spacer rows preserving the full scroll height.
|
|
1242
|
+
* The cards view is never virtualized.
|
|
1243
|
+
* @default false
|
|
1244
|
+
*/
|
|
1245
|
+
virtualized?: boolean;
|
|
1246
|
+
/**
|
|
1247
|
+
* Max height (px) of the virtualized table's scroll container.
|
|
1248
|
+
* Only used when `virtualized` is true.
|
|
1249
|
+
* @default 400
|
|
1250
|
+
*/
|
|
1251
|
+
virtualizedMaxHeight?: number;
|
|
1252
|
+
/**
|
|
1253
|
+
* Assumed uniform row height (px) used by the virtualizer. Defaults to
|
|
1254
|
+
* `getRowHeight(size, density)`, which is size-aware: the `size="md"`
|
|
1255
|
+
* baseline is 33 / 45 / 53 (compact / normal / comfortable) and `size`
|
|
1256
|
+
* shifts it by the font-size line box (sm 16px / md 20px / lg 28px).
|
|
1257
|
+
* Only used when `virtualized` is true.
|
|
1258
|
+
*/
|
|
1259
|
+
rowHeight?: number;
|
|
1260
|
+
/**
|
|
1261
|
+
* Number of extra rows rendered above and below the viewport to avoid blank
|
|
1262
|
+
* gaps while scrolling. Only used when `virtualized` is true.
|
|
1263
|
+
* @default 5
|
|
1264
|
+
*/
|
|
1265
|
+
overscan?: number;
|
|
1266
|
+
/**
|
|
1267
|
+
* Makes the header cells sticky while the virtualized body scrolls. Only
|
|
1268
|
+
* effective when `virtualized` is true.
|
|
1269
|
+
* @default false
|
|
1270
|
+
*/
|
|
1271
|
+
stickyHeader?: boolean;
|
|
1191
1272
|
}
|
|
1192
1273
|
|
|
1193
1274
|
/** Parameters passed to `fetchData` every time pagination, filters, or sorting change. */
|
|
@@ -1270,6 +1351,66 @@ interface ITDataTableProps<T extends Record<string, unknown>> {
|
|
|
1270
1351
|
showVerticalBorder?: boolean;
|
|
1271
1352
|
/** Custom class for vertical borders (overrides the default subtle gray). */
|
|
1272
1353
|
verticalBorderClassname?: string;
|
|
1354
|
+
/**
|
|
1355
|
+
* Callback fired when a row (table view) or card (cards view) is activated,
|
|
1356
|
+
* receiving the row item and the originating event. The event is a
|
|
1357
|
+
* `MouseEvent` for pointer interaction and a `KeyboardEvent` for Enter/Space
|
|
1358
|
+
* activation. Not fired when the interaction starts inside an interactive
|
|
1359
|
+
* child (button, link, input, or any `[data-row-click-ignore]` element).
|
|
1360
|
+
*/
|
|
1361
|
+
onRowClick?: (row: T, event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
|
|
1362
|
+
/**
|
|
1363
|
+
* Table layout algorithm. `"fixed"` respects column `width` values and drops
|
|
1364
|
+
* the `min-w-max` / `min-w-[150px]` floors so content no longer forces
|
|
1365
|
+
* horizontal scrolling; `"auto"` keeps the content-driven layout.
|
|
1366
|
+
* @default "auto"
|
|
1367
|
+
*/
|
|
1368
|
+
layout?: "auto" | "fixed";
|
|
1369
|
+
/**
|
|
1370
|
+
* Cell padding and row-height preset. Independent of `size`, which only
|
|
1371
|
+
* controls font-size: `"compact"` | `"normal"` | `"comfortable"`.
|
|
1372
|
+
* @default "normal"
|
|
1373
|
+
*/
|
|
1374
|
+
density?: TableDensity;
|
|
1375
|
+
/**
|
|
1376
|
+
* Container width (in px) below which the table automatically falls back to
|
|
1377
|
+
* the cards view. `0` disables the fallback.
|
|
1378
|
+
* @default 0
|
|
1379
|
+
*/
|
|
1380
|
+
autoCardBreakpoint?: number;
|
|
1381
|
+
/**
|
|
1382
|
+
* Enables row virtualization for the table view: only the visible window of
|
|
1383
|
+
* rows is rendered, with spacer rows preserving the full scroll height.
|
|
1384
|
+
* The cards view is never virtualized.
|
|
1385
|
+
* @default false
|
|
1386
|
+
*/
|
|
1387
|
+
virtualized?: boolean;
|
|
1388
|
+
/**
|
|
1389
|
+
* Max height (px) of the virtualized table's scroll container.
|
|
1390
|
+
* Only used when `virtualized` is true.
|
|
1391
|
+
* @default 400
|
|
1392
|
+
*/
|
|
1393
|
+
virtualizedMaxHeight?: number;
|
|
1394
|
+
/**
|
|
1395
|
+
* Assumed uniform row height (px) used by the virtualizer. Defaults to
|
|
1396
|
+
* `getRowHeight(size, density)`, which is size-aware: the `size="md"`
|
|
1397
|
+
* baseline is 33 / 45 / 53 (compact / normal / comfortable) and `size`
|
|
1398
|
+
* shifts it by the font-size line box (sm 16px / md 20px / lg 28px).
|
|
1399
|
+
* Only used when `virtualized` is true.
|
|
1400
|
+
*/
|
|
1401
|
+
rowHeight?: number;
|
|
1402
|
+
/**
|
|
1403
|
+
* Number of extra rows rendered above and below the viewport to avoid blank
|
|
1404
|
+
* gaps while scrolling. Only used when `virtualized` is true.
|
|
1405
|
+
* @default 5
|
|
1406
|
+
*/
|
|
1407
|
+
overscan?: number;
|
|
1408
|
+
/**
|
|
1409
|
+
* Makes the header cells sticky while the virtualized body scrolls. Only
|
|
1410
|
+
* effective when `virtualized` is true.
|
|
1411
|
+
* @default false
|
|
1412
|
+
*/
|
|
1413
|
+
stickyHeader?: boolean;
|
|
1273
1414
|
}
|
|
1274
1415
|
|
|
1275
1416
|
/**
|
|
@@ -1293,7 +1434,7 @@ interface ITDataTableProps<T extends Record<string, unknown>> {
|
|
|
1293
1434
|
* />
|
|
1294
1435
|
* ```
|
|
1295
1436
|
*/
|
|
1296
|
-
declare function ITDataTable<T extends Record<string, unknown>>({ columns, fetchData, debounceMs, externalFilters, loadingIndicator, fetchOnMount, reloadTrigger, containerClassName, className, variant, size, itemsPerPageOptions, defaultItemsPerPage, title, renderCard, defaultView, showVerticalBorder, verticalBorderClassname, }: ITDataTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
1437
|
+
declare function ITDataTable<T extends Record<string, unknown>>({ columns, fetchData, debounceMs, externalFilters, loadingIndicator, fetchOnMount, reloadTrigger, containerClassName, className, variant, size, itemsPerPageOptions, defaultItemsPerPage, title, renderCard, defaultView, showVerticalBorder, verticalBorderClassname, onRowClick, layout, density, autoCardBreakpoint, virtualized, virtualizedMaxHeight, rowHeight, overscan, stickyHeader, }: ITDataTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
1297
1438
|
|
|
1298
1439
|
interface ITDatePickerProps {
|
|
1299
1440
|
/** Unique name attribute for the underlying input element. */
|
|
@@ -2243,8 +2384,18 @@ interface ITPageProps {
|
|
|
2243
2384
|
children: ReactNode;
|
|
2244
2385
|
/** Maximum width of the page content. Options: "2xl", "3xl", "4xl", "5xl", "6xl", "7xl". Default: "7xl". */
|
|
2245
2386
|
maxWidth?: "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl";
|
|
2246
|
-
/** Whether to remove default padding from the page wrapper. */
|
|
2387
|
+
/** Whether to remove default padding from the page wrapper. Overrides `horizontalPadding`. */
|
|
2247
2388
|
noPadding?: boolean;
|
|
2389
|
+
/**
|
|
2390
|
+
* Tailwind classes for the page wrapper's horizontal padding. Pass `"px-0"`
|
|
2391
|
+
* for edge-to-edge content, or a responsive scale like `"px-2 sm:px-4"`.
|
|
2392
|
+
*
|
|
2393
|
+
* Must be written as a literal: Tailwind scans source files, so a value
|
|
2394
|
+
* assembled at runtime will not be generated into the stylesheet.
|
|
2395
|
+
*
|
|
2396
|
+
* @default "px-4 sm:px-6 lg:px-8"
|
|
2397
|
+
*/
|
|
2398
|
+
horizontalPadding?: string;
|
|
2248
2399
|
}
|
|
2249
2400
|
|
|
2250
2401
|
/**
|
|
@@ -2264,6 +2415,14 @@ interface ITPageProps {
|
|
|
2264
2415
|
* <ITCard>Dashboard content</ITCard>
|
|
2265
2416
|
* </ITPage>
|
|
2266
2417
|
* ```
|
|
2418
|
+
*
|
|
2419
|
+
* @example
|
|
2420
|
+
* ```tsx
|
|
2421
|
+
* // Edge-to-edge content: no horizontal gutter, vertical padding kept.
|
|
2422
|
+
* <ITPage title="Reportes" horizontalPadding="px-0">
|
|
2423
|
+
* <ITTable data={rows} columns={columns} />
|
|
2424
|
+
* </ITPage>
|
|
2425
|
+
* ```
|
|
2267
2426
|
*/
|
|
2268
2427
|
declare function ITPage(props: ITPageProps): react_jsx_runtime.JSX.Element;
|
|
2269
2428
|
|
|
@@ -2730,11 +2889,17 @@ interface ITSidebarProps {
|
|
|
2730
2889
|
subitemConnector?: 'dot' | '|' | 'none';
|
|
2731
2890
|
/** Additional CSS classes on the sidebar `<aside>`. */
|
|
2732
2891
|
className?: string;
|
|
2892
|
+
/**
|
|
2893
|
+
* Optional content rendered above the navigation list (e.g. a wordmark).
|
|
2894
|
+
* Hidden while the sidebar is collapsed, so it only shows on hover.
|
|
2895
|
+
*/
|
|
2896
|
+
header?: React.ReactNode;
|
|
2733
2897
|
}
|
|
2734
2898
|
|
|
2735
2899
|
/**
|
|
2736
2900
|
* Vertical navigation sidebar with submenu expand/collapse, hover tooltips in collapsed mode,
|
|
2737
|
-
* and glassmorphism styling.
|
|
2901
|
+
* and glassmorphism styling. The collapsed rail expands automatically on pointer hover — there
|
|
2902
|
+
* is no toggle button; the hover is the only way to expand and collapse it.
|
|
2738
2903
|
*
|
|
2739
2904
|
* @example
|
|
2740
2905
|
* ```tsx
|
|
@@ -2749,12 +2914,11 @@ interface ITSidebarProps {
|
|
|
2749
2914
|
* ],
|
|
2750
2915
|
* },
|
|
2751
2916
|
* ]}
|
|
2752
|
-
* isCollapsed
|
|
2753
|
-
* onToggleCollapse={() => setCollapsed(!collapsed)}
|
|
2917
|
+
* isCollapsed
|
|
2754
2918
|
* />
|
|
2755
2919
|
* ```
|
|
2756
2920
|
*/
|
|
2757
|
-
declare function ITSidebar({ navigationItems, isCollapsed, className, visibleOnMobile, onItemClick, onSubItemClick, subitemConnector, }: ITSidebarProps): react_jsx_runtime.JSX.Element;
|
|
2921
|
+
declare function ITSidebar({ navigationItems, isCollapsed, className, visibleOnMobile, onItemClick, onSubItemClick, subitemConnector, header, }: ITSidebarProps): react_jsx_runtime.JSX.Element;
|
|
2758
2922
|
|
|
2759
2923
|
/** Skeleton shape variant: "text" (line) | "circular" (avatar/icon) | "rectangular" (card/image). */
|
|
2760
2924
|
type SkeletonVariant = "text" | "circular" | "rectangular";
|
|
@@ -2969,7 +3133,7 @@ declare function ITStatCard({ label, value, trend, trendDirection, icon, color,
|
|
|
2969
3133
|
* size="sm"
|
|
2970
3134
|
* />
|
|
2971
3135
|
*/
|
|
2972
|
-
declare function ITTable<T extends Record<string, unknown>>({ columns, data, containerClassName, variant, size, itemsPerPageOptions, defaultItemsPerPage, title, renderCard, defaultView, showVerticalBorder, verticalBorderClassname, }: ITTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
3136
|
+
declare function ITTable<T extends Record<string, unknown>>({ columns, data, containerClassName, variant, size, itemsPerPageOptions, defaultItemsPerPage, title, renderCard, defaultView, showVerticalBorder, verticalBorderClassname, onRowClick, layout, density, autoCardBreakpoint, virtualized, virtualizedMaxHeight, rowHeight, overscan, stickyHeader, }: ITTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
2973
3137
|
|
|
2974
3138
|
interface ITTextProps extends HTMLAttributes<HTMLElement> {
|
|
2975
3139
|
/** The content rendered inside the element. */
|
|
@@ -3339,6 +3503,20 @@ interface ITTopBarProps {
|
|
|
3339
3503
|
logo?: any;
|
|
3340
3504
|
/** Text displayed next to the logo. */
|
|
3341
3505
|
logoText?: string;
|
|
3506
|
+
/**
|
|
3507
|
+
* Content rendered in the centered region between the left (logo / nav) and
|
|
3508
|
+
* right (user menu) areas — e.g. a global search box. The region is rendered
|
|
3509
|
+
* only when this prop is provided, and only from the `lg` breakpoint up;
|
|
3510
|
+
* below `lg` the row stays logo + user menu so nothing is squeezed.
|
|
3511
|
+
*/
|
|
3512
|
+
centerContent?: ReactNode;
|
|
3513
|
+
/**
|
|
3514
|
+
* Actions rendered in the right area, immediately before the user menu —
|
|
3515
|
+
* e.g. a notification bell, a help link, a theme switcher. The component
|
|
3516
|
+
* decides the placement, so the caller only supplies the controls. The area
|
|
3517
|
+
* is rendered only when this prop or `userMenu` is provided.
|
|
3518
|
+
*/
|
|
3519
|
+
children?: ReactNode;
|
|
3342
3520
|
/** User dropdown configuration including name, email, avatar, and menu items. */
|
|
3343
3521
|
userMenu?: {
|
|
3344
3522
|
/** Display name shown in the trigger button and dropdown header. */
|
|
@@ -3530,6 +3708,8 @@ interface ITThemePalette$1 {
|
|
|
3530
3708
|
rowBg: string;
|
|
3531
3709
|
/** Text color of table body rows. @default "#1e293b" */
|
|
3532
3710
|
rowText: string;
|
|
3711
|
+
/** Background color applied to a table body row while the pointer is over it (hex). @default "#f1f5f9" */
|
|
3712
|
+
rowHover: string;
|
|
3533
3713
|
};
|
|
3534
3714
|
}
|
|
3535
3715
|
interface ITThemeProviderProps {
|
|
@@ -3598,6 +3778,8 @@ interface ITThemePalette {
|
|
|
3598
3778
|
rowBg: string;
|
|
3599
3779
|
/** Text color of table body rows. @default "#1e293b" */
|
|
3600
3780
|
rowText: string;
|
|
3781
|
+
/** Background color applied to a table body row while the pointer is over it (hex). @default "#f1f5f9" */
|
|
3782
|
+
rowHover: string;
|
|
3601
3783
|
};
|
|
3602
3784
|
}
|
|
3603
3785
|
type SemanticThemeColors = {
|
|
@@ -3794,4 +3976,4 @@ declare const resolveCssColor: (colorStr: string, palette?: ITThemePalette$1, is
|
|
|
3794
3976
|
*/
|
|
3795
3977
|
declare const getContrastTextColor: (bgColor: string, palette?: ITThemePalette$1, isDarkMode?: boolean) => "text-white" | "text-slate-800";
|
|
3796
3978
|
|
|
3797
|
-
export { type Column, type FieldConfig, type FieldConfigV2, FileTypeEnum, ITAccordion, type ITAccordionItem, type ITAccordionProps, ITAlert, type ITAlertProps, ITAvatar, type ITAvatarProps, ITBadget, type ITBadgetProps, type ITBreadcrumbItem, ITBreadcrumbs, type ITBreadcrumbsProps, ITButton, type ITButtonProps, ITCalendar, type ITCalendarProps, ITCard, type ITCardProps, ITCheckbox, type ITCheckboxProps, ITChip, ITChipInput, type ITChipInputProps, type ITChipProps, ITConfirmDialog, type ITConfirmDialogProps, ITDataTable, type ITDataTableFetchParams, type ITDataTableProps, type ITDataTableResponse, ITDatePicker, type ITDatePickerProps, ITDialog, type ITDialogProps, ITDivider, type ITDividerProps, ITDrawer, type ITDrawerProps, ITDropdownMenu, type ITDropdownMenuItem, type ITDropdownMenuProps, ITDropfile, ITEmptyState, type ITEmptyStateProps, ITField, type ITFieldProps, ITFlex, type ITFlexProps, ITFormBuilder, type ITFormBuilderProps, ITFormHeader, type ITFormHeaderProps, ITGrid, type ITGridProps, ITImage, type ITImageProps, ITInput, type ITInputProps, ITLayout, type ITLayoutProps, ITLoader, type LoaderProps as ITLoaderProps, ITMaskedInput, type ITMaskedInputProps, ITMultiSelect, type ITMultiSelectOption, type ITMultiSelectProps, ITNavbar, type ITNavbarProps, type ITNavigationItem, type ITNavigationSubItem, ITPage, ITPageHeader, type ITPageHeaderProps, type ITPageProps, ITPagination, type ITPaginationProps, ITPopover, type ITPopoverProps, ITProgress, type ITProgressProps, ITRadioGroup, type ITRadioGroupProps, type ITRadioOption, ITSearchSelect, type ITSearchSelectProps, ITSearchTable, type ITSearchTableProps, ITSegmentedControl, type ITSegmentedControlProps, ITSelect, type ITSelectProps, ITSidebar, type ITSidebarProps, ITSkeleton, type ITSkeletonProps, ITSlideToggle, type ITSlideToggleProps, ITSlider, type ITSliderProps, ITStack, type ITStackProps, ITStatCard, type ITStatCardProps, ITStepper, type ITStepperProps, type ITTabItem, ITTable, type ITTableProps, ITTabs, type ITTabsProps, ITText, type ITTextProps, ITTextarea, type ITTextareaProps, type ITThemeConfig, type ITThemePalette$1 as ITThemePalette, ITThemeProvider, type ITThemeProviderProps, ITTimePicker, type ITTimePickerProps, ITToast, type ITToastProps, ITTripleFilter, type ITTripleFilterOption, type ITTripleFilterProps, ITWysiwyg, type ITWysiwygProps, UploadStatus, type UseTableStateOptions, type UseTableStateResult, createValidationSchema, getContrastTextColor, isLightColor, resolveCssColor, useClickOutside, useDebouncedSearch, useEditableRow, useFloatingPanel, useITTheme, useITThemeSafe, useTableState };
|
|
3979
|
+
export { type Column, type FieldConfig, type FieldConfigV2, FileTypeEnum, ITAccordion, type ITAccordionItem, type ITAccordionProps, ITAlert, type ITAlertProps, ITAvatar, type ITAvatarProps, ITBadget, type ITBadgetProps, type ITBreadcrumbItem, ITBreadcrumbs, type ITBreadcrumbsProps, ITButton, type ITButtonProps, ITCalendar, type ITCalendarProps, ITCard, type ITCardProps, ITCheckbox, type ITCheckboxProps, ITChip, ITChipInput, type ITChipInputProps, type ITChipProps, ITConfirmDialog, type ITConfirmDialogProps, ITDataTable, type ITDataTableFetchParams, type ITDataTableProps, type ITDataTableResponse, ITDatePicker, type ITDatePickerProps, ITDialog, type ITDialogProps, ITDivider, type ITDividerProps, ITDrawer, type ITDrawerProps, ITDropdownMenu, type ITDropdownMenuItem, type ITDropdownMenuProps, ITDropfile, ITEmptyState, type ITEmptyStateProps, ITField, type ITFieldProps, ITFlex, type ITFlexProps, ITFormBuilder, type ITFormBuilderProps, ITFormHeader, type ITFormHeaderProps, ITGrid, type ITGridProps, ITImage, type ITImageProps, ITInput, type ITInputProps, ITLayout, type ITLayoutProps, ITLoader, type LoaderProps as ITLoaderProps, ITMaskedInput, type ITMaskedInputProps, ITMultiSelect, type ITMultiSelectOption, type ITMultiSelectProps, ITNavbar, type ITNavbarProps, type ITNavigationItem, type ITNavigationSubItem, ITPage, ITPageHeader, type ITPageHeaderProps, type ITPageProps, ITPagination, type ITPaginationProps, ITPopover, type ITPopoverProps, ITProgress, type ITProgressProps, ITRadioGroup, type ITRadioGroupProps, type ITRadioOption, ITSearchSelect, type ITSearchSelectProps, ITSearchTable, type ITSearchTableProps, ITSegmentedControl, type ITSegmentedControlProps, ITSelect, type ITSelectProps, ITSidebar, type ITSidebarProps, ITSkeleton, type ITSkeletonProps, ITSlideToggle, type ITSlideToggleProps, ITSlider, type ITSliderProps, ITStack, type ITStackProps, ITStatCard, type ITStatCardProps, ITStepper, type ITStepperProps, type ITTabItem, ITTable, type ITTableProps, ITTabs, type ITTabsProps, ITText, type ITTextProps, ITTextarea, type ITTextareaProps, type ITThemeConfig, type ITThemePalette$1 as ITThemePalette, ITThemeProvider, type ITThemeProviderProps, ITTimePicker, type ITTimePickerProps, ITToast, type ITToastProps, ITTripleFilter, type ITTripleFilterOption, type ITTripleFilterProps, ITWysiwyg, type ITWysiwygProps, type TableDensity, UploadStatus, type UseTableStateOptions, type UseTableStateResult, createValidationSchema, getContrastTextColor, isLightColor, resolveCssColor, useClickOutside, useDebouncedSearch, useEditableRow, useFloatingPanel, useITTheme, useITThemeSafe, useTableState };
|
package/dist/index.d.ts
CHANGED
|
@@ -20,6 +20,11 @@ declare function useDebouncedSearch({ initialValue, debounceMs, onSearch, }: Use
|
|
|
20
20
|
|
|
21
21
|
type TableVariants = "default" | "striped" | "bordered";
|
|
22
22
|
type TableSize = "sm" | "md" | "lg";
|
|
23
|
+
/**
|
|
24
|
+
* Cell padding / row-height preset for tables. Independent of `TableSize`
|
|
25
|
+
* (which only controls font-size, and shifts the row height via the line box).
|
|
26
|
+
*/
|
|
27
|
+
type TableDensity = "compact" | "normal" | "comfortable";
|
|
23
28
|
|
|
24
29
|
/** Definition of a single searchable, sortable, editable table column. */
|
|
25
30
|
interface SearchColumn<T = any> {
|
|
@@ -1160,6 +1165,22 @@ interface Column<T = any> {
|
|
|
1160
1165
|
/** Shows an error state in the filter UI when the catalog failed to load. @default false */
|
|
1161
1166
|
error?: boolean;
|
|
1162
1167
|
};
|
|
1168
|
+
/**
|
|
1169
|
+
* Fixed column width. A `number` is treated as pixels (`width: 120` → `120px`);
|
|
1170
|
+
* a `string` is passed through as any CSS length (`"20%"`, `"12rem"`).
|
|
1171
|
+
* A `<colgroup>` is only rendered when at least one column defines a width.
|
|
1172
|
+
*/
|
|
1173
|
+
width?: number | string;
|
|
1174
|
+
/** Minimum column width in pixels, applied to the header and body cells via inline style. */
|
|
1175
|
+
minWidth?: number;
|
|
1176
|
+
/** Horizontal alignment of this column's header and body cells. @default "left" */
|
|
1177
|
+
align?: "left" | "center" | "right";
|
|
1178
|
+
/**
|
|
1179
|
+
* Truncates overflowing cell content with an ellipsis and exposes the raw
|
|
1180
|
+
* string/number value through the native `title` attribute.
|
|
1181
|
+
* @default false
|
|
1182
|
+
*/
|
|
1183
|
+
truncate?: boolean;
|
|
1163
1184
|
}
|
|
1164
1185
|
interface ITTableProps<T> {
|
|
1165
1186
|
/** Column definitions: key, label, type, sortable behavior, filters, and custom rendering. */
|
|
@@ -1168,7 +1189,7 @@ interface ITTableProps<T> {
|
|
|
1168
1189
|
containerClassName?: string;
|
|
1169
1190
|
/** The data array to render in the table body. */
|
|
1170
1191
|
data: T[];
|
|
1171
|
-
/** Visual variant: "default", "striped", "bordered"
|
|
1192
|
+
/** Visual variant: "default", "striped", "bordered". */
|
|
1172
1193
|
variant?: TableVariants;
|
|
1173
1194
|
/** Additional CSS classes for the root table wrapper. */
|
|
1174
1195
|
className?: string;
|
|
@@ -1188,6 +1209,66 @@ interface ITTableProps<T> {
|
|
|
1188
1209
|
showVerticalBorder?: boolean;
|
|
1189
1210
|
/** Custom class for vertical borders (overrides the default subtle gray). */
|
|
1190
1211
|
verticalBorderClassname?: string;
|
|
1212
|
+
/**
|
|
1213
|
+
* Callback fired when a row (table view) or card (cards view) is activated,
|
|
1214
|
+
* receiving the row item and the originating event. The event is a
|
|
1215
|
+
* `MouseEvent` for pointer interaction and a `KeyboardEvent` for Enter/Space
|
|
1216
|
+
* activation. Not fired when the interaction starts inside an interactive
|
|
1217
|
+
* child (button, link, input, or any `[data-row-click-ignore]` element).
|
|
1218
|
+
*/
|
|
1219
|
+
onRowClick?: (row: T, event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
|
|
1220
|
+
/**
|
|
1221
|
+
* Table layout algorithm. `"fixed"` respects column `width` values and drops
|
|
1222
|
+
* the `min-w-max` / `min-w-[150px]` floors so content no longer forces
|
|
1223
|
+
* horizontal scrolling; `"auto"` keeps the content-driven layout.
|
|
1224
|
+
* @default "auto"
|
|
1225
|
+
*/
|
|
1226
|
+
layout?: "auto" | "fixed";
|
|
1227
|
+
/**
|
|
1228
|
+
* Cell padding and row-height preset. Independent of `size`, which only
|
|
1229
|
+
* controls font-size: `"compact"` | `"normal"` | `"comfortable"`.
|
|
1230
|
+
* @default "normal"
|
|
1231
|
+
*/
|
|
1232
|
+
density?: TableDensity;
|
|
1233
|
+
/**
|
|
1234
|
+
* Container width (in px) below which the table automatically falls back to
|
|
1235
|
+
* the cards view. `0` disables the fallback.
|
|
1236
|
+
* @default 0
|
|
1237
|
+
*/
|
|
1238
|
+
autoCardBreakpoint?: number;
|
|
1239
|
+
/**
|
|
1240
|
+
* Enables row virtualization for the table view: only the visible window of
|
|
1241
|
+
* rows is rendered, with spacer rows preserving the full scroll height.
|
|
1242
|
+
* The cards view is never virtualized.
|
|
1243
|
+
* @default false
|
|
1244
|
+
*/
|
|
1245
|
+
virtualized?: boolean;
|
|
1246
|
+
/**
|
|
1247
|
+
* Max height (px) of the virtualized table's scroll container.
|
|
1248
|
+
* Only used when `virtualized` is true.
|
|
1249
|
+
* @default 400
|
|
1250
|
+
*/
|
|
1251
|
+
virtualizedMaxHeight?: number;
|
|
1252
|
+
/**
|
|
1253
|
+
* Assumed uniform row height (px) used by the virtualizer. Defaults to
|
|
1254
|
+
* `getRowHeight(size, density)`, which is size-aware: the `size="md"`
|
|
1255
|
+
* baseline is 33 / 45 / 53 (compact / normal / comfortable) and `size`
|
|
1256
|
+
* shifts it by the font-size line box (sm 16px / md 20px / lg 28px).
|
|
1257
|
+
* Only used when `virtualized` is true.
|
|
1258
|
+
*/
|
|
1259
|
+
rowHeight?: number;
|
|
1260
|
+
/**
|
|
1261
|
+
* Number of extra rows rendered above and below the viewport to avoid blank
|
|
1262
|
+
* gaps while scrolling. Only used when `virtualized` is true.
|
|
1263
|
+
* @default 5
|
|
1264
|
+
*/
|
|
1265
|
+
overscan?: number;
|
|
1266
|
+
/**
|
|
1267
|
+
* Makes the header cells sticky while the virtualized body scrolls. Only
|
|
1268
|
+
* effective when `virtualized` is true.
|
|
1269
|
+
* @default false
|
|
1270
|
+
*/
|
|
1271
|
+
stickyHeader?: boolean;
|
|
1191
1272
|
}
|
|
1192
1273
|
|
|
1193
1274
|
/** Parameters passed to `fetchData` every time pagination, filters, or sorting change. */
|
|
@@ -1270,6 +1351,66 @@ interface ITDataTableProps<T extends Record<string, unknown>> {
|
|
|
1270
1351
|
showVerticalBorder?: boolean;
|
|
1271
1352
|
/** Custom class for vertical borders (overrides the default subtle gray). */
|
|
1272
1353
|
verticalBorderClassname?: string;
|
|
1354
|
+
/**
|
|
1355
|
+
* Callback fired when a row (table view) or card (cards view) is activated,
|
|
1356
|
+
* receiving the row item and the originating event. The event is a
|
|
1357
|
+
* `MouseEvent` for pointer interaction and a `KeyboardEvent` for Enter/Space
|
|
1358
|
+
* activation. Not fired when the interaction starts inside an interactive
|
|
1359
|
+
* child (button, link, input, or any `[data-row-click-ignore]` element).
|
|
1360
|
+
*/
|
|
1361
|
+
onRowClick?: (row: T, event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
|
|
1362
|
+
/**
|
|
1363
|
+
* Table layout algorithm. `"fixed"` respects column `width` values and drops
|
|
1364
|
+
* the `min-w-max` / `min-w-[150px]` floors so content no longer forces
|
|
1365
|
+
* horizontal scrolling; `"auto"` keeps the content-driven layout.
|
|
1366
|
+
* @default "auto"
|
|
1367
|
+
*/
|
|
1368
|
+
layout?: "auto" | "fixed";
|
|
1369
|
+
/**
|
|
1370
|
+
* Cell padding and row-height preset. Independent of `size`, which only
|
|
1371
|
+
* controls font-size: `"compact"` | `"normal"` | `"comfortable"`.
|
|
1372
|
+
* @default "normal"
|
|
1373
|
+
*/
|
|
1374
|
+
density?: TableDensity;
|
|
1375
|
+
/**
|
|
1376
|
+
* Container width (in px) below which the table automatically falls back to
|
|
1377
|
+
* the cards view. `0` disables the fallback.
|
|
1378
|
+
* @default 0
|
|
1379
|
+
*/
|
|
1380
|
+
autoCardBreakpoint?: number;
|
|
1381
|
+
/**
|
|
1382
|
+
* Enables row virtualization for the table view: only the visible window of
|
|
1383
|
+
* rows is rendered, with spacer rows preserving the full scroll height.
|
|
1384
|
+
* The cards view is never virtualized.
|
|
1385
|
+
* @default false
|
|
1386
|
+
*/
|
|
1387
|
+
virtualized?: boolean;
|
|
1388
|
+
/**
|
|
1389
|
+
* Max height (px) of the virtualized table's scroll container.
|
|
1390
|
+
* Only used when `virtualized` is true.
|
|
1391
|
+
* @default 400
|
|
1392
|
+
*/
|
|
1393
|
+
virtualizedMaxHeight?: number;
|
|
1394
|
+
/**
|
|
1395
|
+
* Assumed uniform row height (px) used by the virtualizer. Defaults to
|
|
1396
|
+
* `getRowHeight(size, density)`, which is size-aware: the `size="md"`
|
|
1397
|
+
* baseline is 33 / 45 / 53 (compact / normal / comfortable) and `size`
|
|
1398
|
+
* shifts it by the font-size line box (sm 16px / md 20px / lg 28px).
|
|
1399
|
+
* Only used when `virtualized` is true.
|
|
1400
|
+
*/
|
|
1401
|
+
rowHeight?: number;
|
|
1402
|
+
/**
|
|
1403
|
+
* Number of extra rows rendered above and below the viewport to avoid blank
|
|
1404
|
+
* gaps while scrolling. Only used when `virtualized` is true.
|
|
1405
|
+
* @default 5
|
|
1406
|
+
*/
|
|
1407
|
+
overscan?: number;
|
|
1408
|
+
/**
|
|
1409
|
+
* Makes the header cells sticky while the virtualized body scrolls. Only
|
|
1410
|
+
* effective when `virtualized` is true.
|
|
1411
|
+
* @default false
|
|
1412
|
+
*/
|
|
1413
|
+
stickyHeader?: boolean;
|
|
1273
1414
|
}
|
|
1274
1415
|
|
|
1275
1416
|
/**
|
|
@@ -1293,7 +1434,7 @@ interface ITDataTableProps<T extends Record<string, unknown>> {
|
|
|
1293
1434
|
* />
|
|
1294
1435
|
* ```
|
|
1295
1436
|
*/
|
|
1296
|
-
declare function ITDataTable<T extends Record<string, unknown>>({ columns, fetchData, debounceMs, externalFilters, loadingIndicator, fetchOnMount, reloadTrigger, containerClassName, className, variant, size, itemsPerPageOptions, defaultItemsPerPage, title, renderCard, defaultView, showVerticalBorder, verticalBorderClassname, }: ITDataTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
1437
|
+
declare function ITDataTable<T extends Record<string, unknown>>({ columns, fetchData, debounceMs, externalFilters, loadingIndicator, fetchOnMount, reloadTrigger, containerClassName, className, variant, size, itemsPerPageOptions, defaultItemsPerPage, title, renderCard, defaultView, showVerticalBorder, verticalBorderClassname, onRowClick, layout, density, autoCardBreakpoint, virtualized, virtualizedMaxHeight, rowHeight, overscan, stickyHeader, }: ITDataTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
1297
1438
|
|
|
1298
1439
|
interface ITDatePickerProps {
|
|
1299
1440
|
/** Unique name attribute for the underlying input element. */
|
|
@@ -2243,8 +2384,18 @@ interface ITPageProps {
|
|
|
2243
2384
|
children: ReactNode;
|
|
2244
2385
|
/** Maximum width of the page content. Options: "2xl", "3xl", "4xl", "5xl", "6xl", "7xl". Default: "7xl". */
|
|
2245
2386
|
maxWidth?: "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl";
|
|
2246
|
-
/** Whether to remove default padding from the page wrapper. */
|
|
2387
|
+
/** Whether to remove default padding from the page wrapper. Overrides `horizontalPadding`. */
|
|
2247
2388
|
noPadding?: boolean;
|
|
2389
|
+
/**
|
|
2390
|
+
* Tailwind classes for the page wrapper's horizontal padding. Pass `"px-0"`
|
|
2391
|
+
* for edge-to-edge content, or a responsive scale like `"px-2 sm:px-4"`.
|
|
2392
|
+
*
|
|
2393
|
+
* Must be written as a literal: Tailwind scans source files, so a value
|
|
2394
|
+
* assembled at runtime will not be generated into the stylesheet.
|
|
2395
|
+
*
|
|
2396
|
+
* @default "px-4 sm:px-6 lg:px-8"
|
|
2397
|
+
*/
|
|
2398
|
+
horizontalPadding?: string;
|
|
2248
2399
|
}
|
|
2249
2400
|
|
|
2250
2401
|
/**
|
|
@@ -2264,6 +2415,14 @@ interface ITPageProps {
|
|
|
2264
2415
|
* <ITCard>Dashboard content</ITCard>
|
|
2265
2416
|
* </ITPage>
|
|
2266
2417
|
* ```
|
|
2418
|
+
*
|
|
2419
|
+
* @example
|
|
2420
|
+
* ```tsx
|
|
2421
|
+
* // Edge-to-edge content: no horizontal gutter, vertical padding kept.
|
|
2422
|
+
* <ITPage title="Reportes" horizontalPadding="px-0">
|
|
2423
|
+
* <ITTable data={rows} columns={columns} />
|
|
2424
|
+
* </ITPage>
|
|
2425
|
+
* ```
|
|
2267
2426
|
*/
|
|
2268
2427
|
declare function ITPage(props: ITPageProps): react_jsx_runtime.JSX.Element;
|
|
2269
2428
|
|
|
@@ -2730,11 +2889,17 @@ interface ITSidebarProps {
|
|
|
2730
2889
|
subitemConnector?: 'dot' | '|' | 'none';
|
|
2731
2890
|
/** Additional CSS classes on the sidebar `<aside>`. */
|
|
2732
2891
|
className?: string;
|
|
2892
|
+
/**
|
|
2893
|
+
* Optional content rendered above the navigation list (e.g. a wordmark).
|
|
2894
|
+
* Hidden while the sidebar is collapsed, so it only shows on hover.
|
|
2895
|
+
*/
|
|
2896
|
+
header?: React.ReactNode;
|
|
2733
2897
|
}
|
|
2734
2898
|
|
|
2735
2899
|
/**
|
|
2736
2900
|
* Vertical navigation sidebar with submenu expand/collapse, hover tooltips in collapsed mode,
|
|
2737
|
-
* and glassmorphism styling.
|
|
2901
|
+
* and glassmorphism styling. The collapsed rail expands automatically on pointer hover — there
|
|
2902
|
+
* is no toggle button; the hover is the only way to expand and collapse it.
|
|
2738
2903
|
*
|
|
2739
2904
|
* @example
|
|
2740
2905
|
* ```tsx
|
|
@@ -2749,12 +2914,11 @@ interface ITSidebarProps {
|
|
|
2749
2914
|
* ],
|
|
2750
2915
|
* },
|
|
2751
2916
|
* ]}
|
|
2752
|
-
* isCollapsed
|
|
2753
|
-
* onToggleCollapse={() => setCollapsed(!collapsed)}
|
|
2917
|
+
* isCollapsed
|
|
2754
2918
|
* />
|
|
2755
2919
|
* ```
|
|
2756
2920
|
*/
|
|
2757
|
-
declare function ITSidebar({ navigationItems, isCollapsed, className, visibleOnMobile, onItemClick, onSubItemClick, subitemConnector, }: ITSidebarProps): react_jsx_runtime.JSX.Element;
|
|
2921
|
+
declare function ITSidebar({ navigationItems, isCollapsed, className, visibleOnMobile, onItemClick, onSubItemClick, subitemConnector, header, }: ITSidebarProps): react_jsx_runtime.JSX.Element;
|
|
2758
2922
|
|
|
2759
2923
|
/** Skeleton shape variant: "text" (line) | "circular" (avatar/icon) | "rectangular" (card/image). */
|
|
2760
2924
|
type SkeletonVariant = "text" | "circular" | "rectangular";
|
|
@@ -2969,7 +3133,7 @@ declare function ITStatCard({ label, value, trend, trendDirection, icon, color,
|
|
|
2969
3133
|
* size="sm"
|
|
2970
3134
|
* />
|
|
2971
3135
|
*/
|
|
2972
|
-
declare function ITTable<T extends Record<string, unknown>>({ columns, data, containerClassName, variant, size, itemsPerPageOptions, defaultItemsPerPage, title, renderCard, defaultView, showVerticalBorder, verticalBorderClassname, }: ITTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
3136
|
+
declare function ITTable<T extends Record<string, unknown>>({ columns, data, containerClassName, variant, size, itemsPerPageOptions, defaultItemsPerPage, title, renderCard, defaultView, showVerticalBorder, verticalBorderClassname, onRowClick, layout, density, autoCardBreakpoint, virtualized, virtualizedMaxHeight, rowHeight, overscan, stickyHeader, }: ITTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
2973
3137
|
|
|
2974
3138
|
interface ITTextProps extends HTMLAttributes<HTMLElement> {
|
|
2975
3139
|
/** The content rendered inside the element. */
|
|
@@ -3339,6 +3503,20 @@ interface ITTopBarProps {
|
|
|
3339
3503
|
logo?: any;
|
|
3340
3504
|
/** Text displayed next to the logo. */
|
|
3341
3505
|
logoText?: string;
|
|
3506
|
+
/**
|
|
3507
|
+
* Content rendered in the centered region between the left (logo / nav) and
|
|
3508
|
+
* right (user menu) areas — e.g. a global search box. The region is rendered
|
|
3509
|
+
* only when this prop is provided, and only from the `lg` breakpoint up;
|
|
3510
|
+
* below `lg` the row stays logo + user menu so nothing is squeezed.
|
|
3511
|
+
*/
|
|
3512
|
+
centerContent?: ReactNode;
|
|
3513
|
+
/**
|
|
3514
|
+
* Actions rendered in the right area, immediately before the user menu —
|
|
3515
|
+
* e.g. a notification bell, a help link, a theme switcher. The component
|
|
3516
|
+
* decides the placement, so the caller only supplies the controls. The area
|
|
3517
|
+
* is rendered only when this prop or `userMenu` is provided.
|
|
3518
|
+
*/
|
|
3519
|
+
children?: ReactNode;
|
|
3342
3520
|
/** User dropdown configuration including name, email, avatar, and menu items. */
|
|
3343
3521
|
userMenu?: {
|
|
3344
3522
|
/** Display name shown in the trigger button and dropdown header. */
|
|
@@ -3530,6 +3708,8 @@ interface ITThemePalette$1 {
|
|
|
3530
3708
|
rowBg: string;
|
|
3531
3709
|
/** Text color of table body rows. @default "#1e293b" */
|
|
3532
3710
|
rowText: string;
|
|
3711
|
+
/** Background color applied to a table body row while the pointer is over it (hex). @default "#f1f5f9" */
|
|
3712
|
+
rowHover: string;
|
|
3533
3713
|
};
|
|
3534
3714
|
}
|
|
3535
3715
|
interface ITThemeProviderProps {
|
|
@@ -3598,6 +3778,8 @@ interface ITThemePalette {
|
|
|
3598
3778
|
rowBg: string;
|
|
3599
3779
|
/** Text color of table body rows. @default "#1e293b" */
|
|
3600
3780
|
rowText: string;
|
|
3781
|
+
/** Background color applied to a table body row while the pointer is over it (hex). @default "#f1f5f9" */
|
|
3782
|
+
rowHover: string;
|
|
3601
3783
|
};
|
|
3602
3784
|
}
|
|
3603
3785
|
type SemanticThemeColors = {
|
|
@@ -3794,4 +3976,4 @@ declare const resolveCssColor: (colorStr: string, palette?: ITThemePalette$1, is
|
|
|
3794
3976
|
*/
|
|
3795
3977
|
declare const getContrastTextColor: (bgColor: string, palette?: ITThemePalette$1, isDarkMode?: boolean) => "text-white" | "text-slate-800";
|
|
3796
3978
|
|
|
3797
|
-
export { type Column, type FieldConfig, type FieldConfigV2, FileTypeEnum, ITAccordion, type ITAccordionItem, type ITAccordionProps, ITAlert, type ITAlertProps, ITAvatar, type ITAvatarProps, ITBadget, type ITBadgetProps, type ITBreadcrumbItem, ITBreadcrumbs, type ITBreadcrumbsProps, ITButton, type ITButtonProps, ITCalendar, type ITCalendarProps, ITCard, type ITCardProps, ITCheckbox, type ITCheckboxProps, ITChip, ITChipInput, type ITChipInputProps, type ITChipProps, ITConfirmDialog, type ITConfirmDialogProps, ITDataTable, type ITDataTableFetchParams, type ITDataTableProps, type ITDataTableResponse, ITDatePicker, type ITDatePickerProps, ITDialog, type ITDialogProps, ITDivider, type ITDividerProps, ITDrawer, type ITDrawerProps, ITDropdownMenu, type ITDropdownMenuItem, type ITDropdownMenuProps, ITDropfile, ITEmptyState, type ITEmptyStateProps, ITField, type ITFieldProps, ITFlex, type ITFlexProps, ITFormBuilder, type ITFormBuilderProps, ITFormHeader, type ITFormHeaderProps, ITGrid, type ITGridProps, ITImage, type ITImageProps, ITInput, type ITInputProps, ITLayout, type ITLayoutProps, ITLoader, type LoaderProps as ITLoaderProps, ITMaskedInput, type ITMaskedInputProps, ITMultiSelect, type ITMultiSelectOption, type ITMultiSelectProps, ITNavbar, type ITNavbarProps, type ITNavigationItem, type ITNavigationSubItem, ITPage, ITPageHeader, type ITPageHeaderProps, type ITPageProps, ITPagination, type ITPaginationProps, ITPopover, type ITPopoverProps, ITProgress, type ITProgressProps, ITRadioGroup, type ITRadioGroupProps, type ITRadioOption, ITSearchSelect, type ITSearchSelectProps, ITSearchTable, type ITSearchTableProps, ITSegmentedControl, type ITSegmentedControlProps, ITSelect, type ITSelectProps, ITSidebar, type ITSidebarProps, ITSkeleton, type ITSkeletonProps, ITSlideToggle, type ITSlideToggleProps, ITSlider, type ITSliderProps, ITStack, type ITStackProps, ITStatCard, type ITStatCardProps, ITStepper, type ITStepperProps, type ITTabItem, ITTable, type ITTableProps, ITTabs, type ITTabsProps, ITText, type ITTextProps, ITTextarea, type ITTextareaProps, type ITThemeConfig, type ITThemePalette$1 as ITThemePalette, ITThemeProvider, type ITThemeProviderProps, ITTimePicker, type ITTimePickerProps, ITToast, type ITToastProps, ITTripleFilter, type ITTripleFilterOption, type ITTripleFilterProps, ITWysiwyg, type ITWysiwygProps, UploadStatus, type UseTableStateOptions, type UseTableStateResult, createValidationSchema, getContrastTextColor, isLightColor, resolveCssColor, useClickOutside, useDebouncedSearch, useEditableRow, useFloatingPanel, useITTheme, useITThemeSafe, useTableState };
|
|
3979
|
+
export { type Column, type FieldConfig, type FieldConfigV2, FileTypeEnum, ITAccordion, type ITAccordionItem, type ITAccordionProps, ITAlert, type ITAlertProps, ITAvatar, type ITAvatarProps, ITBadget, type ITBadgetProps, type ITBreadcrumbItem, ITBreadcrumbs, type ITBreadcrumbsProps, ITButton, type ITButtonProps, ITCalendar, type ITCalendarProps, ITCard, type ITCardProps, ITCheckbox, type ITCheckboxProps, ITChip, ITChipInput, type ITChipInputProps, type ITChipProps, ITConfirmDialog, type ITConfirmDialogProps, ITDataTable, type ITDataTableFetchParams, type ITDataTableProps, type ITDataTableResponse, ITDatePicker, type ITDatePickerProps, ITDialog, type ITDialogProps, ITDivider, type ITDividerProps, ITDrawer, type ITDrawerProps, ITDropdownMenu, type ITDropdownMenuItem, type ITDropdownMenuProps, ITDropfile, ITEmptyState, type ITEmptyStateProps, ITField, type ITFieldProps, ITFlex, type ITFlexProps, ITFormBuilder, type ITFormBuilderProps, ITFormHeader, type ITFormHeaderProps, ITGrid, type ITGridProps, ITImage, type ITImageProps, ITInput, type ITInputProps, ITLayout, type ITLayoutProps, ITLoader, type LoaderProps as ITLoaderProps, ITMaskedInput, type ITMaskedInputProps, ITMultiSelect, type ITMultiSelectOption, type ITMultiSelectProps, ITNavbar, type ITNavbarProps, type ITNavigationItem, type ITNavigationSubItem, ITPage, ITPageHeader, type ITPageHeaderProps, type ITPageProps, ITPagination, type ITPaginationProps, ITPopover, type ITPopoverProps, ITProgress, type ITProgressProps, ITRadioGroup, type ITRadioGroupProps, type ITRadioOption, ITSearchSelect, type ITSearchSelectProps, ITSearchTable, type ITSearchTableProps, ITSegmentedControl, type ITSegmentedControlProps, ITSelect, type ITSelectProps, ITSidebar, type ITSidebarProps, ITSkeleton, type ITSkeletonProps, ITSlideToggle, type ITSlideToggleProps, ITSlider, type ITSliderProps, ITStack, type ITStackProps, ITStatCard, type ITStatCardProps, ITStepper, type ITStepperProps, type ITTabItem, ITTable, type ITTableProps, ITTabs, type ITTabsProps, ITText, type ITTextProps, ITTextarea, type ITTextareaProps, type ITThemeConfig, type ITThemePalette$1 as ITThemePalette, ITThemeProvider, type ITThemeProviderProps, ITTimePicker, type ITTimePickerProps, ITToast, type ITToastProps, ITTripleFilter, type ITTripleFilterOption, type ITTripleFilterProps, ITWysiwyg, type ITWysiwygProps, type TableDensity, UploadStatus, type UseTableStateOptions, type UseTableStateResult, createValidationSchema, getContrastTextColor, isLightColor, resolveCssColor, useClickOutside, useDebouncedSearch, useEditableRow, useFloatingPanel, useITTheme, useITThemeSafe, useTableState };
|