@alepha/ui 0.18.3 → 0.19.1

package/dist/demo/{core-DFgB3yU4.js → core-B4LVHzPn.js}

@@ -1,9 +1,9 @@
-import { $atom, $context, $inject, $module, Alepha, AlephaError, TypeBoxError, t } from "alepha";
-import { AlephaReactForm, FormValidationError, useFieldValue, useForm, useFormState } from "alepha/react/form";
+import { $atom, $inject, $module, Alepha, AlephaError, TypeBoxError, t } from "alepha";
+import { AlephaReactForm, FormModel, FormValidationError, useFieldValue, useForm, useFormState } from "alepha/react/form";
 import { $head, AlephaReactHead, BrowserHeadProvider } from "alepha/react/head";
 import { AlephaReactI18n, useI18n } from "alepha/react/i18n";
 import { $cookie } from "alepha/server/cookies";
-import { ActionIcon, Anchor, AppShell, Autocomplete, Badge, Burger, Button, Card, Checkbox, ColorInput, ColorSchemeScript, ColorSwatch, Container, Divider, Drawer, Fieldset, FileInput, Flex, Grid, Image, Input, Kbd, Loader, MantineProvider, Menu, MultiSelect, NumberInput, Pagination, Paper, PasswordInput, Popover, ScrollArea, SegmentedControl, Select, SimpleGrid, Slider, Switch, Table, TagsInput, Text, TextInput, Textarea, Tooltip, Tree, UnstyledButton, getTreeExpandedState, useMantineColorScheme, useMantineTheme, useTree } from "@mantine/core";
+import { ActionIcon, Anchor, AppShell, Autocomplete, Badge, Burger, Button, Card, Checkbox, Collapse, ColorInput, ColorSchemeScript, ColorSwatch, Container, Divider, Drawer, Fieldset, FileInput, Flex, Grid, Image, Input, Kbd, Loader, MantineProvider, Menu, MultiSelect, NumberInput, Pagination, Paper, PasswordInput, Popover, ScrollArea, SegmentedControl, Select, SimpleGrid, Slider, Switch, Table, TagsInput, Text, TextInput, Textarea, Title, Tooltip, Tree, UnstyledButton, getTreeExpandedState, useMantineColorScheme, useMantineTheme, useTree } from "@mantine/core";
 import { ModalsProvider, modals } from "@mantine/modals";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Children, Fragment as Fragment$1, createElement, forwardRef, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -18,7 +18,6 @@ import { useOs } from "@mantine/hooks";
 import { DateInput, DateTimePicker, TimeInput } from "@mantine/dates";
 import { parseQueryString } from "alepha/orm";
 import { DateTimeProvider } from "alepha/datetime";
-
 //#region ../../src/core/atoms/alephaSidebarAtom.ts
 const alephaSidebarAtom = $atom({
 	name: "alepha.ui.sidebar",
@@ -35,7 +34,6 @@ const alephaSidebarAtom = $atom({
 		collapsedWidth: 72
 	}
 });
-
 //#endregion
 //#region ../../src/core/atoms/alephaThemeAtom.ts
 const alephaThemeAtom = $atom({
@@ -43,7 +41,6 @@ const alephaThemeAtom = $atom({
 	schema: t.object({ index: t.integer() }),
 	default: { index: 0 }
 });
-
 //#endregion
 //#region ../../src/core/atoms/alephaThemeOverridesAtom.ts
 const alephaThemeOverridesAtom = $atom({
@@ -57,14 +54,12 @@ const alephaThemeOverridesAtom = $atom({
 	}),
 	default: {}
 });
-
 //#endregion
 //#region ../../src/core/atoms/themes/default.ts
 const defaultTheme = {
 	name: "Default",
 	description: "Default Alepha Theme"
 };
-
 //#endregion
 //#region ../../src/core/atoms/themes/editorial.ts
 /**
@@ -219,7 +214,6 @@ const editorialTheme = {
 		})
 	}
 };
-
 //#endregion
 //#region ../../src/core/atoms/themes/midnight.ts
 const midnightTheme = {
@@ -334,7 +328,6 @@ const midnightTheme = {
 		]
 	}
 };
-
 //#endregion
 //#region ../../src/core/atoms/themes/monochrome.ts
 /**
@@ -502,7 +495,6 @@ const monochromeTheme = {
 		})
 	}
 };
-
 //#endregion
 //#region ../../src/core/atoms/themes/rosePine.ts
 /**
@@ -674,7 +666,6 @@ const rosePineTheme = {
 		Badge: Badge.extend({ defaultProps: { fw: 500 } })
 	}
 };
-
 //#endregion
 //#region ../../src/core/atoms/themes/softBrutalism.ts
 /**
@@ -861,7 +852,6 @@ const softBrutalismTheme = {
 		})
 	}
 };
-
 //#endregion
 //#region ../../src/core/atoms/themes/terminal.ts
 /**
@@ -1017,7 +1007,6 @@ const terminalTheme = {
 		})
 	}
 };
-
 //#endregion
 //#region ../../src/core/atoms/alephaThemeListAtom.ts
 const alephaThemeListAtom = $atom({
@@ -1033,7 +1022,6 @@ const alephaThemeListAtom = $atom({
 		monochromeTheme
 	]
 });
-
 //#endregion
 //#region ../../src/core/providers/ThemeProvider.ts
 var ThemeProvider = class ThemeProvider {
@@ -1131,7 +1119,6 @@ var ThemeProvider = class ThemeProvider {
 		}
 	}
 };
-
 //#endregion
 //#region ../../src/core/components/dialogs/AlertDialog.tsx
 const AlertDialog = ({ options, onClose }) => /* @__PURE__ */ jsxs(Fragment, { children: [options?.message && /* @__PURE__ */ jsx(Text, {
@@ -1144,7 +1131,6 @@ const AlertDialog = ({ options, onClose }) => /* @__PURE__ */ jsxs(Fragment, { c
 		children: options?.okLabel || "OK"
 	})
 })] });
-
 //#endregion
 //#region ../../src/core/components/dialogs/ConfirmDialog.tsx
 const ConfirmDialog = ({ options, onConfirm }) => /* @__PURE__ */ jsxs(Fragment, { children: [options?.message && /* @__PURE__ */ jsx(Text, {
@@ -1162,7 +1148,6 @@ const ConfirmDialog = ({ options, onConfirm }) => /* @__PURE__ */ jsxs(Fragment,
 		children: options?.confirmLabel || "Confirm"
 	})]
 })] });
-
 //#endregion
 //#region ../../src/core/components/dialogs/PromptDialog.tsx
 const PromptDialog = ({ options, onSubmit }) => {
@@ -1194,6 +1179,7 @@ const PromptDialog = ({ options, onSubmit }) => {
 		}),
 		/* @__PURE__ */ jsxs(Flex, {
 			justify: "flex-end",
+			gap: "xs",
 			children: [/* @__PURE__ */ jsx(Button, {
 				variant: "subtle",
 				onClick: () => onSubmit(null),
@@ -1206,7 +1192,6 @@ const PromptDialog = ({ options, onSubmit }) => {
 		})
 	] });
 };
-
 //#endregion
 //#region ../../src/core/services/DialogService.tsx
 var DialogService = class {
@@ -1268,8 +1253,8 @@ var DialogService = class {
 				content: /* @__PURE__ */ jsx(ConfirmDialog, {
 					options,
 					onConfirm: (confirmed) => {
-						this.close(modalId);
 						done(confirmed);
+						this.close(modalId);
 					}
 				})
 			});
@@ -1295,8 +1280,8 @@ var DialogService = class {
 				content: /* @__PURE__ */ jsx(PromptDialog, {
 					options,
 					onSubmit: (value) => {
-						this.close(modalId);
 						done(value);
+						this.close(modalId);
 					}
 				})
 			});
@@ -1320,7 +1305,6 @@ var DialogService = class {
 		else modals.closeAll();
 	}
 };
-
 //#endregion
 //#region ../../src/core/services/ToastService.tsx
 var ToastService = class {
@@ -1379,7 +1363,6 @@ var ToastService = class {
 		});
 	}
 };
-
 //#endregion
 //#region ../../src/core/UiRouter.ts
 /**
@@ -1394,7 +1377,6 @@ var UiRouter = class {
 		component: AlephaMantineProvider
 	});
 };
-
 //#endregion
 //#region ../../src/core/hooks/useTheme.ts
 /**
@@ -1429,7 +1411,6 @@ const useTheme = () => {
 		}
 	];
 };
-
 //#endregion
 //#region ../../src/core/hooks/useToast.ts
 /**
@@ -1445,7 +1426,6 @@ const useTheme = () => {
 const useToast = () => {
 	return useInject(ToastService);
 };
-
 //#endregion
 //#region ../../src/core/components/layout/Omnibar.tsx
 const Omnibar = (props) => {
@@ -1477,7 +1457,6 @@ const Omnibar = (props) => {
 		nothingFound
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/AlephaMantineProvider.tsx
 const AlephaMantineProvider = (props) => {
@@ -1519,7 +1498,6 @@ const AlephaMantineProvider = (props) => {
 		]
 	})] });
 };
-
 //#endregion
 //#region ../../src/core/constants/ui.ts
 const ui = {
@@ -1538,14 +1516,12 @@ const ui = {
 		xl: 32
 	} }
 };
-
 //#endregion
 //#region ../../src/core/helpers/isComponentType.ts
 function isComponentType(param) {
 	if (isValidElement(param)) return false;
 	return typeof param === "function" || typeof param === "object" && param !== null && "$$typeof" in param;
 }
-
 //#endregion
 //#region ../../src/core/components/buttons/ActionButton.tsx
 const ActionButton = (_props) => {
@@ -1826,7 +1802,6 @@ const ActionMenuItem = (props) => {
 		children: item.label
 	}, index);
 };
-
 //#endregion
 //#region ../../src/core/components/buttons/BurgerButton.tsx
 const BurgerButton = (props) => {
@@ -1842,7 +1817,6 @@ const BurgerButton = (props) => {
 		...props
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/buttons/DarkModeButton.tsx
 /**
@@ -1874,7 +1848,6 @@ const DarkModeButton = (props) => {
 		...props
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/buttons/LanguageButton.tsx
 const LanguageButton = (props) => {
@@ -1890,7 +1863,6 @@ const LanguageButton = (props) => {
 		...props
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/buttons/OmnibarButton.tsx
 const OmnibarButton = (props) => {
@@ -1935,7 +1907,6 @@ const OmnibarButton = (props) => {
 		})
 	});
 };
-
 //#endregion
 //#region ../../src/core/hooks/useDialog.ts
 /**
@@ -1952,7 +1923,6 @@ const OmnibarButton = (props) => {
 const useDialog = () => {
 	return useInject(DialogService);
 };
-
 //#endregion
 //#region ../../src/core/components/buttons/ThemeExpertModal.tsx
 const MANTINE_COLORS = [
@@ -2161,7 +2131,6 @@ const ThemeExpertModal = () => {
 		]
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/buttons/ThemeButton.tsx
 const ThemeButton = (props) => {
@@ -2190,7 +2159,6 @@ const ThemeButton = (props) => {
 		...actionProps
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/buttons/ToggleSidebarButton.tsx
 const ToggleSidebarButton = (props) => {
@@ -2212,11 +2180,10 @@ const ToggleSidebarButton = (props) => {
 		...props
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/Flex.tsx
 const Flex$1 = forwardRef((props, ref) => {
-	const { fill, center, centerX, centerY, col, ground, surface, elevated, rounded, bordered, borderedTop, borderedBottom, shadowed, overflow, ...rest } = props;
+	const { fill, center, centerX, centerY, col, ground, surface, elevated, rounded, bordered, borderedTop, borderedBottom, shadowed, overflow, form, ...rest } = props;
 	if (fill) rest.flex ??= 1;
 	if (col) rest.direction ??= "column";
 	if (center) {
@@ -2240,19 +2207,22 @@ const Flex$1 = forwardRef((props, ref) => {
 	};
 	if (shadowed) rest.className = `${rest.className ?? ""} shadow-${shadowed === true ? "md" : shadowed}`.trim();
 	if (overflow) rest.className = `${rest.className ?? ""} overflow-auto`.trim();
+	if (form) {
+		let formProps = typeof form === "object" ? form : {};
+		if (formProps instanceof FormModel) formProps = formProps.props;
+		return /* @__PURE__ */ jsx(Flex, {
+			ref,
+			component: "form",
+			...formProps,
+			...rest
+		});
+	}
 	return /* @__PURE__ */ jsx(Flex, {
 		ref,
 		...rest
 	});
 });
 Flex$1.displayName = "Flex";
-
-//#endregion
-//#region ../../src/core/components/Heading.tsx
-const Heading = (props) => {
-	return /* @__PURE__ */ jsx("h1", { children: "Heading" });
-};
-
 //#endregion
 //#region ../../src/core/components/layout/AppBar.tsx
 const AppBar = (props) => {
@@ -2367,7 +2337,6 @@ const AppBar = (props) => {
 	});
 	return content;
 };
-
 //#endregion
 //#region ../../src/core/components/layout/Breadcrumb.tsx
 /**
@@ -2377,7 +2346,7 @@ const AppBar = (props) => {
 * Pages should define a `label` in their `$page()` options for best results.
 * Falls back to the page name converted to Title Case.
 */
-const Breadcrumb = (props) => {
+const Breadcrumbs = (props) => {
 	const { home = "Home", separator, size = "sm", ...groupProps } = props;
 	const state = useRouterState();
 	const router = useRouter();
@@ -2422,7 +2391,6 @@ const Breadcrumb = (props) => {
 		}, crumb.href))
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/layout/Container.tsx
 const Container$1 = forwardRef((props, ref) => {
@@ -2432,7 +2400,6 @@ const Container$1 = forwardRef((props, ref) => {
 	});
 });
 Container$1.displayName = "Container";
-
 //#endregion
 //#region ../../src/core/helpers/renderIcon.tsx
 const renderIcon = (icon, size) => {
@@ -2441,7 +2408,6 @@ const renderIcon = (icon, size) => {
 	if (isComponentType(icon)) return /* @__PURE__ */ jsx(icon, { size: size ?? ui.sizes.icon.md });
 	return icon;
 };
-
 //#endregion
 //#region ../../src/core/components/Text.tsx
 const INTENT_COLORS = {
@@ -2470,7 +2436,6 @@ const Text$1 = forwardRef((props, ref) => {
 	});
 });
 Text$1.displayName = "Text";
-
 //#endregion
 //#region ../../src/core/components/layout/SidebarCollapsedItem.tsx
 const SidebarCollapsedItem = (props) => {
@@ -2520,7 +2485,6 @@ const SidebarCollapsedItem = (props) => {
 		})
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/layout/SidebarItem.tsx
 const SidebarItem = (props) => {
@@ -2597,7 +2561,6 @@ const SidebarItem = (props) => {
 		})]
 	});
 };
-
 //#endregion
 //#region ../../src/core/components/layout/Sidebar.tsx
 const Sidebar = (props) => {
@@ -2721,7 +2684,6 @@ const Sidebar = (props) => {
 	})] });
 	return renderSidebar(false);
 };
-
 //#endregion
 //#region ../../src/core/components/layout/DashboardShell.tsx
 const DashboardShell = (props) => {
@@ -2821,7 +2783,112 @@ const DashboardShell = (props) => {
 		]
 	});
 };
-
+//#endregion
+//#region ../../src/core/components/SectionHeader.tsx
+const TITLE_ORDER = {
+	sm: 5,
+	md: 4,
+	lg: 3
+};
+const ICON_SIZE = {
+	sm: ui.sizes.icon.xs,
+	md: ui.sizes.icon.sm,
+	lg: ui.sizes.icon.md
+};
+const SectionHeader = (props) => {
+	const { icon, title, tag, subtitle, actions, size = "md", extra } = props;
+	const iconSize = ICON_SIZE[size];
+	const titleOrder = TITLE_ORDER[size];
+	return /* @__PURE__ */ jsxs(Flex$1, {
+		col: true,
+		gap: 2,
+		children: [/* @__PURE__ */ jsxs(Flex$1, {
+			centerY: true,
+			gap: "xs",
+			children: [
+				icon && /* @__PURE__ */ jsx(Flex$1, {
+					centerY: true,
+					style: { flexShrink: 0 },
+					children: renderIcon(icon, iconSize)
+				}),
+				/* @__PURE__ */ jsx(Title, {
+					order: titleOrder,
+					lh: 1.2,
+					children: title
+				}),
+				tag,
+				/* @__PURE__ */ jsx(Flex$1, { fill: true }),
+				actions && actions.length > 0 && /* @__PURE__ */ jsx(Flex$1, {
+					gap: "xs",
+					centerY: true,
+					style: { flexShrink: 0 },
+					children: actions.map((actionProps, index) => /* @__PURE__ */ jsx(ActionButton, {
+						size: "xs",
+						variant: "default",
+						...actionProps
+					}, index))
+				}),
+				extra
+			]
+		}), subtitle && /* @__PURE__ */ jsx(Text$1, {
+			muted: true,
+			small: true,
+			children: subtitle
+		})]
+	});
+};
+//#endregion
+//#region ../../src/core/components/Section.tsx
+const Section = (props) => {
+	const { children, collapsible, defaultCollapsed = false, title, icon, tag, subtitle, actions, p = "md", ...rest } = props;
+	const [collapsed, setCollapsed] = useState(collapsible ? defaultCollapsed : false);
+	const hasHeader = !!title;
+	const headerActions = [...actions ?? []];
+	const chevronExtra = collapsible ? /* @__PURE__ */ jsx(Flex$1, {
+		centerY: true,
+		style: {
+			cursor: "pointer",
+			flexShrink: 0
+		},
+		onClick: () => setCollapsed((v) => !v),
+		children: collapsed ? /* @__PURE__ */ jsx(IconChevronRight, { size: ui.sizes.icon.sm }) : /* @__PURE__ */ jsx(IconChevronDown, { size: ui.sizes.icon.sm })
+	}) : void 0;
+	return /* @__PURE__ */ jsxs(Flex$1, {
+		col: true,
+		surface: true,
+		rounded: true,
+		bordered: true,
+		...rest,
+		children: [hasHeader && /* @__PURE__ */ jsx(Flex$1, {
+			p: "sm",
+			px: "md",
+			style: { cursor: collapsible ? "pointer" : void 0 },
+			onClick: collapsible ? () => setCollapsed((v) => !v) : void 0,
+			children: /* @__PURE__ */ jsx(SectionHeader, {
+				icon,
+				title,
+				tag,
+				subtitle,
+				actions: headerActions,
+				size: "sm",
+				extra: chevronExtra
+			})
+		}), collapsible ? /* @__PURE__ */ jsx(Collapse, {
+			in: !collapsed,
+			children: /* @__PURE__ */ jsx(Flex$1, {
+				col: true,
+				p,
+				...hasHeader ? { borderedTop: true } : {},
+				children
+			})
+		}) : /* @__PURE__ */ jsx(Flex$1, {
+			col: true,
+			p,
+			...hasHeader ? { borderedTop: true } : {},
+			children
+		})]
+	});
+};
 //#endregion
 //#region ../../src/core/form/utils/parseInput.ts
 const parseInput = (props, form) => {
@@ -2862,7 +2929,6 @@ const parseInput = (props, form) => {
 		inputProps
 	};
 };
-
 //#endregion
 //#region ../../src/core/form/components/ControlArray.tsx
 /**
@@ -3152,7 +3218,6 @@ const ControlArray = (props) => {
 		})
 	});
 };
-
 //#endregion
 //#region ../../src/core/form/components/ControlDate.tsx
 /**
@@ -3205,7 +3270,6 @@ const ControlDate = (props) => {
 	}
 	return null;
 };
-
 //#endregion
 //#region ../../src/core/form/components/ControlNumber.tsx
 /**
@@ -3250,7 +3314,6 @@ const ControlNumber = (props) => {
 		}
 	});
 };
-
 //#endregion
 //#region ../../src/core/form/components/ControlObject.tsx
 /**
@@ -3327,7 +3390,6 @@ const ControlObject = (props) => {
 		})
 	});
 };
-
 //#endregion
 //#region ../../src/core/form/components/ControlQueryBuilderHelp.tsx
 const ControlQueryBuilderHelp = (props) => {
@@ -3495,7 +3557,6 @@ const ControlQueryBuilderHelp = (props) => {
 		]
 	});
 };
-
 //#endregion
 //#region ../../src/core/form/components/ControlQueryBuilder.tsx
 /**
@@ -3583,7 +3644,6 @@ const ControlQueryBuilder = (props) => {
 		})]
 	});
 };
-
 //#endregion
 //#region ../../src/core/form/components/ControlSelect.tsx
 /**
@@ -3802,7 +3862,6 @@ const useAsyncLoader = (loader, threshold, debounceMs, defaultValue) => {
 		])
 	};
 };
-
 //#endregion
 //#region ../../src/core/form/components/Control.tsx
 /**
@@ -4019,7 +4078,6 @@ const Control = (_props) => {
 		...textInputProps
 	});
 };
-
 //#endregion
 //#region ../../src/core/form/components/TypeForm.tsx
 /**
@@ -4151,7 +4209,6 @@ const TypeForm = (props) => {
 		children: content
 	});
 };
-
 //#endregion
 //#region ../../src/core/json/components/JsonViewerCopyButton.tsx
 const JsonViewerCopyButton = (props) => {
@@ -4171,7 +4228,6 @@ const JsonViewerCopyButton = (props) => {
 		children: copied ? /* @__PURE__ */ jsx(IconCheck, { size: props.iconSize }) : /* @__PURE__ */ jsx(IconCopy, { size: props.iconSize })
 	});
 };
-
 //#endregion
 //#region ../../src/core/json/components/JsonViewerShared.ts
 const SIZE_CONFIG = {
@@ -4222,7 +4278,6 @@ const getValueType = (val) => {
 	if (Array.isArray(val)) return "array";
 	return typeof val;
 };
-
 //#endregion
 //#region ../../src/core/json/components/JsonViewerRowNode.tsx
 const JsonViewerRowNode = (props) => {
@@ -4299,7 +4354,6 @@ const JsonViewerRowNode = (props) => {
 		]
 	});
 };
-
 //#endregion
 //#region ../../src/core/json/components/JsonViewer.tsx
 const JsonViewer = (props) => {
@@ -4463,11 +4517,6 @@ const getExpandedIds = (nodes, targetDepth, currentDepth = 0) => {
 	}
 	return ids;
 };
-
-//#endregion
-//#region ../../src/core/table/interfaces/types.ts
-const DEFAULT_MAX_VISIBLE_COLUMNS = 8;
-
 //#endregion
 //#region ../../src/core/table/components/DataTableFilters.tsx
 const DataTableFilters = (props) => {
@@ -4505,7 +4554,6 @@ const DataTableFilters = (props) => {
 		})
 	});
 };
-
 //#endregion
 //#region ../../src/core/table/components/DataTablePagination.tsx
 const DataTablePagination = ({ page, size, totalPages, totalElements, isFirst, isLast, offset, numberOfElements, onPageChange, onSizeChange }) => {
@@ -4568,7 +4616,6 @@ const DataTablePagination = ({ page, size, totalPages, totalElements, isFirst, i
 		})]
 	});
 };
-
 //#endregion
 //#region ../../src/core/table/components/ColumnPicker.tsx
 const ColumnPicker = ({ columns, visibility, onVisibilityChange }) => {
@@ -4584,7 +4631,7 @@ const ColumnPicker = ({ columns, visibility, onVisibilityChange }) => {
 		let count = 0;
 		onVisibilityChange(columnEntries.reduce((acc, [key, col]) => {
 			if (col.defaultHidden) acc[key] = false;
-			else if (count < DEFAULT_MAX_VISIBLE_COLUMNS) {
+			else if (count < 8) {
 				acc[key] = true;
 				count++;
 			} else acc[key] = false;
@@ -4669,7 +4716,6 @@ const ColumnPicker = ({ columns, visibility, onVisibilityChange }) => {
 		})]
 	});
 };
-
 //#endregion
 //#region ../../src/core/table/components/FilterPicker.tsx
 const getFieldLabel = (schema, key) => {
@@ -4770,7 +4816,6 @@ const FilterPicker = ({ schema, visibility, onVisibilityChange }) => {
 		})]
 	});
 };
-
 //#endregion
 //#region ../../src/core/table/components/DataTableToolbar.tsx
 const escapeCsvField = (value) => {
@@ -4897,7 +4942,6 @@ const DataTableToolbar = ({ columns, filters, columnVisibility, filterVisibility
 		]
 	});
 };
-
 //#endregion
 //#region ../../src/core/table/components/useTableSelection.ts
 const useTableSelection = (items, getItemKey, enabled) => {
@@ -4960,7 +5004,6 @@ const useTableSelection = (items, getItemKey, enabled) => {
 		isSelected: useCallback((item) => selectedKeys.has(getItemKey(item)), [selectedKeys, getItemKey])
 	};
 };
-
 //#endregion
 //#region ../../src/core/table/components/DataTable.tsx
 /**
@@ -4994,7 +5037,8 @@ const toAriaSort = (dir) => {
 };
 const FIT_STYLE = {
 	width: 1,
-	whiteSpace: "nowrap"
+	whiteSpace: "nowrap",
+	minWidth: "fit-content"
 };
 const DataTable = (props) => {
 	const [items, setItems] = useState(typeof props.items === "function" ? { content: [] } : props.items);
@@ -5013,7 +5057,7 @@ const DataTable = (props) => {
 		let visibleCount = 0;
 		return entries.reduce((acc, [key, col]) => {
 			if (col.defaultHidden) acc[key] = false;
-			else if (visibleCount < DEFAULT_MAX_VISIBLE_COLUMNS) {
+			else if (visibleCount < 8) {
 				acc[key] = true;
 				visibleCount++;
 			} else acc[key] = false;
@@ -5366,8 +5410,7 @@ const DataTable = (props) => {
 							style: {
 								position: "sticky",
 								top: 0,
-								zIndex: 1,
-								backgroundColor: "var(--alepha-elevated)"
+								zIndex: 1
 							},
 							children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
 								panelConfig && /* @__PURE__ */ jsx(Table.Th, { style: { width: 36 } }),
@@ -5429,7 +5472,6 @@ const DataTable = (props) => {
 		})]
 	});
 };
-
 //#endregion
 //#region ../../src/core/utils/extractSchemaFields.ts
 /**
@@ -5518,7 +5560,6 @@ const OPERATOR_INFO = {
 		example: "status=[active,pending]"
 	}
 };
-
 //#endregion
 //#region ../../src/core/utils/icons.tsx
 /**
@@ -5560,7 +5601,6 @@ const getDefaultIcon = (params) => {
 	}
 	return /* @__PURE__ */ jsx(IconAt, { size: iconSize });
 };
-
 //#endregion
 //#region ../../src/core/utils/string.ts
 /**
@@ -5598,7 +5638,6 @@ const prettyName = (name) => {
 	const segments = name.split("/").filter((s) => s && !/^\d+$/.test(s));
 	return toTitleCase(segments[segments.length - 1] || name.replaceAll("/", ""));
 };
-
 //#endregion
 //#region ../../src/core/index.ts
 /**
@@ -5637,7 +5676,7 @@ const AlephaUI = $module({
 		alepha.with(ToastService);
 	}
 });
-
 //#endregion
-export { AlephaMantineProvider as _, TypeForm as a, Sidebar as c, Heading as d, Flex$1 as f, ui as g, ActionButton as h, JsonViewer as i, Text$1 as l, useDialog as m, capitalize as n, Control as o, ToggleSidebarButton as p, DataTable as r, DashboardShell as s, AlephaUI as t, Breadcrumb as u, useToast as v };
-//# sourceMappingURL=core-DFgB3yU4.js.map
+export { ui as _, TypeForm as a, SectionHeader as c, Text$1 as d, Breadcrumbs as f, ActionButton as g, useDialog as h, JsonViewer as i, DashboardShell as l, ToggleSidebarButton as m, capitalize as n, Control as o, Flex$1 as p, DataTable as r, Section as s, AlephaUI as t, Sidebar as u, AlephaMantineProvider as v, useToast as y };
+
+//# sourceMappingURL=core-B4LVHzPn.js.map