@ifto/mantine-kit 0.0.0-stage → 0.1.0

package/dist/component/template/Layout/Layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.js","names":["classes"],"sources":["../../../../src/component/template/Layout/Layout.tsx"],"sourcesContent":["import {\n    ActionIcon,\n    AppShell,\n    Avatar,\n    Burger,\n    Container,\n    Group,\n    Menu,\n    Tooltip,\n    UnstyledButton,\n    useComputedColorScheme,\n    useMantineColorScheme,\n    useMantineTheme\n} from '@mantine/core';\nimport { useDisclosure, useMediaQuery, useMounted } from '@mantine/hooks';\nimport { IconMoon, IconSun } from '@tabler/icons-react';\nimport cx from 'clsx';\n\nimport AppMain from '../../atom/AppMain/AppMain';\nimport Navbar from '../../organism/Navbar/Navbar';\nimport { NavItem } from '../../organism/Navbar/NavItem';\nimport { useKitMessages } from '../../../provider/useKit';\nimport classes from './Layout.module.css';\n\ninterface Props {\n    children: React.ReactNode;\n\n    /** Brand of the app in the header (e.g. the logo with a link to the home page). */\n    logo: React.ReactNode;\n\n    /** Items of the side menu. */\n    navItems: NavItem[];\n\n    /** Content fixed at the bottom of the side menu (e.g. a link to log out). */\n    navFooter?: React.ReactNode;\n\n    /**\n     * Items of the user menu (e.g. `Menu.Item`s for the profile and to log out), opened by the avatar in the header.\n     * Without them, the avatar is not shown.\n     */\n    userMenu?: React.ReactNode;\n}\n\n/**\n * Structure of the pages of the app: header with the brand, the color scheme toggle and the user menu, collapsible side\n * menu and the content area.\n */\nexport const Layout = ({ children, logo, navItems, navFooter, userMenu }: Props) => {\n    const messages = useKitMessages().layout;\n    const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();\n    const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);\n    const { setColorScheme } = useMantineColorScheme();\n    const savedColorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true });\n    /* The server does not know the color scheme saved in the browser and always renders the light one. Using the saved\n       scheme only after mounting keeps the button label equal to the server HTML (avoiding a hydration error). */\n    const computedColorScheme = useMounted() ? savedColorScheme : 'light';\n    const nextColorScheme = computedColorScheme === 'light' ? 'dark' : 'light';\n    const colorSchemeLabel = nextColorScheme === 'dark' ? messages.enableDarkTheme : messages.enableLightTheme;\n\n    const theme = useMantineTheme();\n    const isDesktop = useMediaQuery(`(min-width: ${theme.breakpoints.sm})`);\n    const isMobile = !isDesktop;\n    const isOpened = isMobile ? mobileOpened : desktopOpened;\n    const toggleBurgerFn = isMobile ? toggleMobile : toggleDesktop;\n\n    return (\n        <AppShell\n            header={{ height: { base: 60, sm: 68 } }}\n            navbar={{\n                width: { base: 300 },\n                breakpoint: 'sm',\n                collapsed: { mobile: !mobileOpened, desktop: !desktopOpened }\n            }}\n            padding={0}\n        >\n            <AppShell.Header>\n                <Group h=\"100%\" justify=\"space-between\" wrap=\"nowrap\" gap=\"xs\" px={{ base: 'xs', sm: 'md' }}>\n                    <Group wrap=\"nowrap\" className={cx(classes.shrinkable, classes.headerGap)}>\n                        <Burger\n                            opened={isOpened}\n                            onClick={toggleBurgerFn}\n                            size=\"sm\"\n                            aria-label={isOpened ? messages.collapseNavigation : messages.expandNavigation}\n                            aria-expanded={isOpened}\n                            className={classes.fixed}\n                        />\n\n                        {logo}\n                    </Group>\n\n                    <Group wrap=\"nowrap\" gap=\"xs\" className={classes.fixed}>\n                        <Tooltip label={colorSchemeLabel}>\n                            <ActionIcon\n                                onClick={() => setColorScheme(nextColorScheme)}\n                                variant=\"subtle\"\n                                size={40}\n                                radius=\"xl\"\n                                aria-label={colorSchemeLabel}\n                            >\n                                <IconSun className={cx(classes.icon, classes.light)} stroke={1.5} />\n                                <IconMoon className={cx(classes.icon, classes.dark)} stroke={1.5} />\n                            </ActionIcon>\n                        </Tooltip>\n\n                        {userMenu && (\n                            <Menu shadow=\"lg\" width={200}>\n                                {/* The Tooltip stays outside the Menu.Target: in Mantine 9, the Menu.Target passes the menu\n                                    props to its direct child, and they would go to the Tooltip instead of the button. */}\n                                <Tooltip label={messages.userMenu}>\n                                    <Menu.Target>\n                                        <UnstyledButton aria-label={messages.userMenu} style={{ borderRadius: '50%' }}>\n                                            <Avatar color={theme.primaryColor} radius=\"xl\" size={40} />\n                                        </UnstyledButton>\n                                    </Menu.Target>\n                                </Tooltip>\n                                <Menu.Dropdown>\n                                    <Menu.Label tt=\"uppercase\" ta=\"center\" fw={600}>\n                                        {messages.userMenuTitle}\n                                    </Menu.Label>\n                                    {userMenu}\n                                </Menu.Dropdown>\n                            </Menu>\n                        )}\n                    </Group>\n                </Group>\n            </AppShell.Header>\n\n            <Navbar items={navItems} footer={navFooter} linkClickHandler={() => isMobile && toggleBurgerFn()} />\n\n            <AppShell.Main>\n                <AppMain>\n                    <Container p=\"md\" fluid>\n                        {children}\n                    </Container>\n                </AppMain>\n            </AppShell.Main>\n        </AppShell>\n    );\n};\n"],"mappings":"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"}

package/dist/component/template/Layout/Layout.module.js

@@ -0,0 +1,19 @@
+"use client";
+// src/component/template/Layout/Layout.module.css
+var shrinkable = "mk-Layout-module-shrinkable-JUv2C";
+var fixed = "mk-Layout-module-fixed-Z1ueS";
+var icon = "mk-Layout-module-icon-EDq-h";
+var dark = "mk-Layout-module-dark-Zx9Wz";
+var light = "mk-Layout-module-light--F7XT";
+var headerGap = "mk-Layout-module-headerGap-VrPBg";
+var Layout_module_default = {
+	shrinkable,
+	fixed,
+	icon,
+	dark,
+	light,
+	headerGap
+};
+export { dark, Layout_module_default as default, fixed, headerGap, icon, light, shrinkable };
+
+//# sourceMappingURL=Layout.module.js.map

package/dist/component/template/Layout/Layout.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.module.js","names":[],"sources":["../../../../src/component/template/Layout/Layout.module.css"],"sourcesContent":[".shrinkable {\n    min-width: 0;\n}\n\n.fixed {\n    flex-shrink: 0;\n}\n\n.icon {\n    width: 20px;\n    height: 20px;\n}\n\n.dark {\n    @mixin dark {\n        display: none;\n    }\n\n    @mixin light {\n        display: block;\n    }\n}\n\n.light {\n    @mixin light {\n        display: none;\n    }\n\n    @mixin dark {\n        display: block;\n    }\n}\n\n/* Responsive spacing of the header groups: the `gap` prop of the Mantine Group accepts no values per breakpoint. */\n.headerGap {\n    gap: var(--mantine-spacing-xs);\n\n    @mixin larger-than $mantine-breakpoint-sm {\n        gap: var(--mantine-spacing-md);\n    }\n}\n"],"mappings":""}

package/dist/component/template/ListPage/ListPage.d.ts

@@ -0,0 +1,32 @@
+import { ReactElement, ReactNode } from 'react';
+import { DataTableColumn } from 'mantine-datatable';
+import { ListDataSource } from '../../../data/ListDataSource';
+import { Identifiable } from '../../../model/Identifiable';
+import { BreadcrumbItem } from '../../molecule/Breadcrumb/Breadcrumb';
+import { ActionsSettings } from '../../organism/Table/Table';
+interface ListPageProps<T, S> {
+    /** Title of the page (e.g. "Regions"). */
+    title: string;
+    /** Plural name of the records, used in the title of the table card. */
+    titlePlural: string;
+    breadcrumbItems: BreadcrumbItem[];
+    /** Route of the "Add" button; absent for no button. */
+    addActionRoute?: string;
+    /** Source of the records and of their deletion. */
+    service: S;
+    tableColumns: DataTableColumn<T>[];
+    /** Base path of the pages of the records (e.g. `/region`). */
+    resourceBasePath: string;
+    actionsSettings?: Partial<ActionsSettings>;
+    /** Extra content above the table (e.g. filters). */
+    children?: ReactNode;
+    customFetchMethod?: () => Promise<T[]>;
+    /** Builds the URL opened to view a record. If absent, the default view route is used. */
+    getViewUrl?: (item: T) => string;
+}
+/**
+ * List page of records: header with the "Add" button, optional extra content (e.g. filters) and the table of the
+ * records, with the view, edit and delete actions.
+ */
+declare function ListPage<M extends Identifiable, S extends ListDataSource<M>>(props: ListPageProps<M, S>): ReactElement;
+export default ListPage;

package/dist/component/template/ListPage/ListPage.js

@@ -0,0 +1,47 @@
+"use client";
+import { useDocumentTitle, useKitMessages } from "../../../provider/useKit.js";
+import PaperCard from "../../molecule/PaperCard/PaperCard.js";
+import PageHeader from "../../organism/PageHeader/PageHeader.js";
+import Table from "../../organism/Table/Table.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Group, Stack, Text } from "@mantine/core";
+// src/component/template/ListPage/ListPage.tsx
+/**
+* List page of records: header with the "Add" button, optional extra content (e.g. filters) and the table of the
+* records, with the view, edit and delete actions.
+*/
+function ListPage(props) {
+	const { title, titlePlural, breadcrumbItems, addActionRoute, service, tableColumns, resourceBasePath, actionsSettings, children, customFetchMethod, getViewUrl } = props;
+	const documentTitle = useDocumentTitle(title);
+	const messages = useKitMessages();
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("title", { children: documentTitle }), /* @__PURE__ */ jsxs(Stack, {
+		gap: "lg",
+		children: [
+			/* @__PURE__ */ jsx(PageHeader, {
+				title,
+				breadcrumbItems,
+				addActionRoute
+			}),
+			children && /* @__PURE__ */ jsx(Stack, { children }),
+			/* @__PURE__ */ jsxs(PaperCard, { children: [/* @__PURE__ */ jsx(Group, {
+				justify: "space-between",
+				mb: "md",
+				children: /* @__PURE__ */ jsx(Text, {
+					fz: "lg",
+					fw: 600,
+					children: messages.table.listTitle(titlePlural)
+				})
+			}), /* @__PURE__ */ jsx(Table, {
+				service,
+				basePath: resourceBasePath,
+				columns: tableColumns,
+				customFetchMethod,
+				actionsSettings,
+				getViewUrl
+			})] })
+		]
+	})] });
+}
+export { ListPage as default };
+
+//# sourceMappingURL=ListPage.js.map

package/dist/component/template/ListPage/ListPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListPage.js","names":["_Fragment"],"sources":["../../../../src/component/template/ListPage/ListPage.tsx"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\n\nimport { Group, Stack, Text } from '@mantine/core';\nimport { DataTableColumn } from 'mantine-datatable';\n\nimport { ListDataSource } from '../../../data/ListDataSource';\nimport { Identifiable } from '../../../model/Identifiable';\nimport { useDocumentTitle, useKitMessages } from '../../../provider/useKit';\nimport { BreadcrumbItem } from '../../molecule/Breadcrumb/Breadcrumb';\nimport PaperCard from '../../molecule/PaperCard/PaperCard';\nimport PageHeader from '../../organism/PageHeader/PageHeader';\nimport Table, { ActionsSettings } from '../../organism/Table/Table';\n\ninterface ListPageProps<T, S> {\n    /** Title of the page (e.g. \"Regions\"). */\n    title: string;\n\n    /** Plural name of the records, used in the title of the table card. */\n    titlePlural: string;\n    breadcrumbItems: BreadcrumbItem[];\n\n    /** Route of the \"Add\" button; absent for no button. */\n    addActionRoute?: string;\n\n    /** Source of the records and of their deletion. */\n    service: S;\n    tableColumns: DataTableColumn<T>[];\n\n    /** Base path of the pages of the records (e.g. `/region`). */\n    resourceBasePath: string;\n    actionsSettings?: Partial<ActionsSettings>;\n\n    /** Extra content above the table (e.g. filters). */\n    children?: ReactNode;\n    customFetchMethod?: () => Promise<T[]>;\n\n    /** Builds the URL opened to view a record. If absent, the default view route is used. */\n    getViewUrl?: (item: T) => string;\n}\n\n/**\n * List page of records: header with the \"Add\" button, optional extra content (e.g. filters) and the table of the\n * records, with the view, edit and delete actions.\n */\nfunction ListPage<M extends Identifiable, S extends ListDataSource<M>>(props: ListPageProps<M, S>): ReactElement {\n    const {\n        title,\n        titlePlural,\n        breadcrumbItems,\n        addActionRoute,\n        service,\n        tableColumns,\n        resourceBasePath,\n        actionsSettings,\n        children,\n        customFetchMethod,\n        getViewUrl\n    } = props;\n    const documentTitle = useDocumentTitle(title);\n    const messages = useKitMessages();\n\n    return (\n        <>\n            <title>{documentTitle}</title>\n            <Stack gap=\"lg\">\n                <PageHeader title={title} breadcrumbItems={breadcrumbItems} addActionRoute={addActionRoute} />\n                {children && <Stack>{children}</Stack>}\n                <PaperCard>\n                    <Group justify=\"space-between\" mb=\"md\">\n                        <Text fz=\"lg\" fw={600}>\n                            {messages.table.listTitle(titlePlural)}\n                        </Text>\n                    </Group>\n                    <Table<M, S>\n                        service={service}\n                        basePath={resourceBasePath}\n                        columns={tableColumns}\n                        customFetchMethod={customFetchMethod}\n                        actionsSettings={actionsSettings}\n                        getViewUrl={getViewUrl}\n                    />\n                </PaperCard>\n            </Stack>\n        </>\n    );\n}\n\nexport default ListPage;\n"],"mappings":";;;;;;;;;;;;AA4CA,SAAS,SAA8D,OAA0C;CAC7G,MAAM,EACF,OACA,aACA,iBACA,gBACA,SACA,cACA,kBACA,iBACA,UACA,mBACA,eACA;CACJ,MAAM,gBAAgB,iBAAiB,KAAK;CAC5C,MAAM,WAAW,eAAe;CAEhC,OACI,qBAAAA,UAAA,EAAA,UAAA,CACI,oBAAC,SAAD,EAAA,UAAQ,cAAqB,CAAA,GAC7B,qBAAC,OAAD;EAAO,KAAI;EAAX,UAAA;GACI,oBAAC,YAAD;IAAmB;IAAwB;IAAiC;GAAiB,CAAA;GAC5F,YAAY,oBAAC,OAAD,EAAQ,SAAgB,CAAA;GACrC,qBAAC,WAAD,EAAA,UAAA,CACI,oBAAC,OAAD;IAAO,SAAQ;IAAgB,IAAG;IAC9B,UAAA,oBAAC,MAAD;KAAM,IAAG;KAAK,IAAI;KACb,UAAA,SAAS,MAAM,UAAU,WAAW;IACnC,CAAA;GACH,CAAA,GACP,oBAAC,OAAD;IACa;IACT,UAAU;IACV,SAAS;IACU;IACF;IACL;GACf,CAAA,CACM,EAAA,CAAA;EACR;CACT,CAAA,CAAA,EAAA,CAAA;AAEV"}

package/dist/component/template/PrintPage/PrintPage.d.ts

@@ -0,0 +1,25 @@
+import { ReactElement, ReactNode } from 'react';
+import type { ExportInfo } from '../../../export/ExportDocument';
+/** Paper orientation: portrait (default) or landscape, for wide tables (e.g. a year per column). */
+export type PrintOrientation = 'portrait' | 'landscape';
+type Props = {
+    /** Title of the report, shown in the header. */
+    title: string;
+    /** Context info shown below the title (e.g. the period and the filters). */
+    info?: ExportInfo[];
+    orientation?: PrintOrientation;
+    /** Name of the system, shown in the footer (e.g. "Data generated by My System"). */
+    systemName: string;
+    /** Logo shown on the left of the title (e.g. an `<img>` about 48 px high); absent to show none. */
+    logo?: ReactNode;
+    /** Content of the report: sections ({@link PrintSection}), tables and charts. */
+    children: ReactNode;
+};
+/**
+ * Common layout of the reports: an HTML page formatted to be printed or saved as PDF with the browser itself.
+ * It has the logo, the title, the generation date, the context and, at the end, a footer with the link of the system.
+ * The bar with the "Print" button and the tips of the print dialog is shown only on screen. The pagination (paper size,
+ * repeated table header, page numbers) comes from the `styles/print.css` of the library.
+ */
+declare function PrintPage({ title, info, orientation, systemName, logo, children }: Props): ReactElement;
+export default PrintPage;

package/dist/component/template/PrintPage/PrintPage.js

@@ -0,0 +1,115 @@
+"use client";
+import { useLightColorSchemeOnPrint } from "../../../hook/useLightColorSchemeOnPrint.js";
+import { useKitMessages } from "../../../provider/useKit.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Alert, Anchor, Box, Button, Group, Stack, Text, Title } from "@mantine/core";
+import { IconInfoCircle, IconPrinter } from "@tabler/icons-react";
+// src/component/template/PrintPage/PrintPage.tsx
+/** Size of the icons (px). */
+var ICON_SIZE = 18;
+/**
+* Common layout of the reports: an HTML page formatted to be printed or saved as PDF with the browser itself.
+* It has the logo, the title, the generation date, the context and, at the end, a footer with the link of the system.
+* The bar with the "Print" button and the tips of the print dialog is shown only on screen. The pagination (paper size,
+* repeated table header, page numbers) comes from the `styles/print.css` of the library.
+*/
+function PrintPage({ title, info = [], orientation = "portrait", systemName, logo, children }) {
+	useLightColorSchemeOnPrint();
+	const messages = useKitMessages();
+	const [generatedAt, setGeneratedAt] = useState();
+	const [siteUrl, setSiteUrl] = useState("");
+	useEffect(() => {
+		setGeneratedAt(/* @__PURE__ */ new Date());
+		setSiteUrl(window.location.origin);
+	}, []);
+	return /* @__PURE__ */ jsxs(Box, {
+		"data-print-orientation": orientation,
+		p: {
+			base: "xs",
+			sm: "md"
+		},
+		children: [
+			/* @__PURE__ */ jsx(PrintToolbar, { messages: messages.print }),
+			/* @__PURE__ */ jsxs(Stack, {
+				component: "header",
+				gap: 4,
+				mb: "lg",
+				children: [
+					/* @__PURE__ */ jsxs(Group, {
+						gap: "sm",
+						wrap: "nowrap",
+						children: [logo, /* @__PURE__ */ jsx(Title, {
+							order: 1,
+							size: "h2",
+							c: "var(--mantine-primary-color-filled)",
+							children: title
+						})]
+					}),
+					generatedAt && /* @__PURE__ */ jsx(Text, {
+						size: "sm",
+						c: "dimmed",
+						fs: "italic",
+						children: messages.export.generatedAt(generatedAt)
+					}),
+					info.map((item) => /* @__PURE__ */ jsxs(Text, {
+						size: "sm",
+						children: [
+							/* @__PURE__ */ jsxs(Text, {
+								span: true,
+								fw: 700,
+								c: "dimmed",
+								children: [item.label, ":"]
+							}),
+							" ",
+							item.value
+						]
+					}, item.label))
+				]
+			}),
+			children,
+			/* @__PURE__ */ jsxs(Stack, {
+				component: "footer",
+				gap: 0,
+				mt: "xl",
+				"data-print-block": true,
+				children: [/* @__PURE__ */ jsx(Text, {
+					size: "xs",
+					c: "dimmed",
+					children: messages.export.footer(systemName)
+				}), siteUrl && /* @__PURE__ */ jsx(Anchor, {
+					href: siteUrl,
+					size: "xs",
+					children: siteUrl
+				})]
+			})
+		]
+	});
+}
+/** Bar shown only on screen, with the print button and the tips about the options of the print dialog. */
+function PrintToolbar({ messages }) {
+	return /* @__PURE__ */ jsxs(Group, {
+		"data-print-hidden": true,
+		justify: "space-between",
+		align: "flex-start",
+		mb: "md",
+		wrap: "wrap",
+		children: [/* @__PURE__ */ jsx(Alert, {
+			variant: "light",
+			icon: /* @__PURE__ */ jsx(IconInfoCircle, { size: ICON_SIZE }),
+			title: messages.pdfTipTitle,
+			style: {
+				flex: 1,
+				minWidth: 280
+			},
+			children: messages.pdfTip
+		}), /* @__PURE__ */ jsx(Button, {
+			leftSection: /* @__PURE__ */ jsx(IconPrinter, { size: ICON_SIZE }),
+			onClick: () => window.print(),
+			children: messages.printButton
+		})]
+	});
+}
+export { PrintPage as default };
+
+//# sourceMappingURL=PrintPage.js.map

package/dist/component/template/PrintPage/PrintPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrintPage.js","names":[],"sources":["../../../../src/component/template/PrintPage/PrintPage.tsx"],"sourcesContent":["'use client';\n\nimport { ReactElement, ReactNode, useEffect, useState } from 'react';\n\nimport { Alert, Anchor, Box, Button, Group, Stack, Text, Title } from '@mantine/core';\nimport { IconInfoCircle, IconPrinter } from '@tabler/icons-react';\n\nimport type { ExportInfo } from '../../../export/ExportDocument';\nimport { useLightColorSchemeOnPrint } from '../../../hook/useLightColorSchemeOnPrint';\nimport { PrintMessages } from '../../../i18n/KitMessages';\nimport { useKitMessages } from '../../../provider/useKit';\n\n/** Size of the icons (px). */\nconst ICON_SIZE = 18;\n\n/** Paper orientation: portrait (default) or landscape, for wide tables (e.g. a year per column). */\nexport type PrintOrientation = 'portrait' | 'landscape';\n\ntype Props = {\n    /** Title of the report, shown in the header. */\n    title: string;\n\n    /** Context info shown below the title (e.g. the period and the filters). */\n    info?: ExportInfo[];\n\n    orientation?: PrintOrientation;\n\n    /** Name of the system, shown in the footer (e.g. \"Data generated by My System\"). */\n    systemName: string;\n\n    /** Logo shown on the left of the title (e.g. an `<img>` about 48 px high); absent to show none. */\n    logo?: ReactNode;\n\n    /** Content of the report: sections ({@link PrintSection}), tables and charts. */\n    children: ReactNode;\n};\n\n/**\n * Common layout of the reports: an HTML page formatted to be printed or saved as PDF with the browser itself.\n * It has the logo, the title, the generation date, the context and, at the end, a footer with the link of the system.\n * The bar with the \"Print\" button and the tips of the print dialog is shown only on screen. The pagination (paper size,\n * repeated table header, page numbers) comes from the `styles/print.css` of the library.\n */\nfunction PrintPage({ title, info = [], orientation = 'portrait', systemName, logo, children }: Props): ReactElement {\n    useLightColorSchemeOnPrint();\n    const messages = useKitMessages();\n\n    /* The generation date and the address of the system are read only in the browser, after mounting: on the server,\n       the date would be another one and there is no `window`, so the HTML would differ from the one of the browser\n       (hydration error). */\n    const [generatedAt, setGeneratedAt] = useState<Date>();\n    const [siteUrl, setSiteUrl] = useState('');\n    useEffect(() => {\n        setGeneratedAt(new Date());\n        setSiteUrl(window.location.origin);\n    }, []);\n\n    return (\n        <Box data-print-orientation={orientation} p={{ base: 'xs', sm: 'md' }}>\n            <PrintToolbar messages={messages.print} />\n\n            <Stack component=\"header\" gap={4} mb=\"lg\">\n                <Group gap=\"sm\" wrap=\"nowrap\">\n                    {logo}\n                    <Title order={1} size=\"h2\" c=\"var(--mantine-primary-color-filled)\">\n                        {title}\n                    </Title>\n                </Group>\n                {generatedAt && (\n                    <Text size=\"sm\" c=\"dimmed\" fs=\"italic\">\n                        {messages.export.generatedAt(generatedAt)}\n                    </Text>\n                )}\n                {info.map(item => (\n                    <Text key={item.label} size=\"sm\">\n                        <Text span fw={700} c=\"dimmed\">\n                            {item.label}:\n                        </Text>{' '}\n                        {item.value}\n                    </Text>\n                ))}\n            </Stack>\n\n            {children}\n\n            <Stack component=\"footer\" gap={0} mt=\"xl\" data-print-block>\n                <Text size=\"xs\" c=\"dimmed\">\n                    {messages.export.footer(systemName)}\n                </Text>\n                {siteUrl && (\n                    <Anchor href={siteUrl} size=\"xs\">\n                        {siteUrl}\n                    </Anchor>\n                )}\n            </Stack>\n        </Box>\n    );\n}\n\n/** Bar shown only on screen, with the print button and the tips about the options of the print dialog. */\nfunction PrintToolbar({ messages }: { messages: PrintMessages }): ReactElement {\n    return (\n        <Group data-print-hidden justify=\"space-between\" align=\"flex-start\" mb=\"md\" wrap=\"wrap\">\n            <Alert\n                variant=\"light\"\n                icon={<IconInfoCircle size={ICON_SIZE} />}\n                title={messages.pdfTipTitle}\n                style={{ flex: 1, minWidth: 280 }}\n            >\n                {messages.pdfTip}\n            </Alert>\n            <Button leftSection={<IconPrinter size={ICON_SIZE} />} onClick={() => window.print()}>\n                {messages.printButton}\n            </Button>\n        </Group>\n    );\n}\n\nexport default PrintPage;\n"],"mappings":";;;;;;;;;AAaA,IAAM,YAAY;;;;;;;AA8BlB,SAAS,UAAU,EAAE,OAAO,OAAO,CAAC,GAAG,cAAc,YAAY,YAAY,MAAM,YAAiC;CAChH,2BAA2B;CAC3B,MAAM,WAAW,eAAe;CAKhC,MAAM,CAAC,aAAa,kBAAkB,SAAe;CACrD,MAAM,CAAC,SAAS,cAAc,SAAS,EAAE;CACzC,gBAAgB;EACZ,+BAAe,IAAI,KAAK,CAAC;EACzB,WAAW,OAAO,SAAS,MAAM;CACrC,GAAG,CAAC,CAAC;CAEL,OACI,qBAAC,KAAD;EAAK,0BAAwB;EAAa,GAAG;GAAE,MAAM;GAAM,IAAI;EAAK;EAApE,UAAA;GACI,oBAAC,cAAD,EAAc,UAAU,SAAS,MAAQ,CAAA;GAEzC,qBAAC,OAAD;IAAO,WAAU;IAAS,KAAK;IAAG,IAAG;IAArC,UAAA;KACI,qBAAC,OAAD;MAAO,KAAI;MAAK,MAAK;MAArB,UAAA,CACK,MACD,oBAAC,OAAD;OAAO,OAAO;OAAG,MAAK;OAAK,GAAE;OACxB,UAAA;MACE,CAAA,CACJ;;KACN,eACG,oBAAC,MAAD;MAAM,MAAK;MAAK,GAAE;MAAS,IAAG;MACzB,UAAA,SAAS,OAAO,YAAY,WAAW;KACtC,CAAA;KAET,KAAK,KAAI,SACN,qBAAC,MAAD;MAAuB,MAAK;MAA5B,UAAA;OACI,qBAAC,MAAD;QAAM,MAAA;QAAK,IAAI;QAAK,GAAE;QAAtB,UAAA,CACK,KAAK,OAAM,GACV;;OAAE;OACP,KAAK;MACJ;KALK,GAAA,KAAK,KAKV,CACT;IACE;;GAEN;GAED,qBAAC,OAAD;IAAO,WAAU;IAAS,KAAK;IAAG,IAAG;IAAK,oBAAA;IAA1C,UAAA,CACI,oBAAC,MAAD;KAAM,MAAK;KAAK,GAAE;KACb,UAAA,SAAS,OAAO,OAAO,UAAU;IAChC,CAAA,GACL,WACG,oBAAC,QAAD;KAAQ,MAAM;KAAS,MAAK;KACvB,UAAA;IACG,CAAA,CAET;;EACN;;AAEb;;AAGA,SAAS,aAAa,EAAE,YAAuD;CAC3E,OACI,qBAAC,OAAD;EAAO,qBAAA;EAAkB,SAAQ;EAAgB,OAAM;EAAa,IAAG;EAAK,MAAK;EAAjF,UAAA,CACI,oBAAC,OAAD;GACI,SAAQ;GACR,MAAM,oBAAC,gBAAD,EAAgB,MAAM,UAAY,CAAA;GACxC,OAAO,SAAS;GAChB,OAAO;IAAE,MAAM;IAAG,UAAU;GAAI;GAE/B,UAAA,SAAS;EACP,CAAA,GACP,oBAAC,QAAD;GAAQ,aAAa,oBAAC,aAAD,EAAa,MAAM,UAAY,CAAA;GAAG,eAAe,OAAO,MAAM;GAC9E,UAAA,SAAS;EACN,CAAA,CACL;;AAEf"}

package/dist/component/template/ViewPage/ViewPage.d.ts

@@ -0,0 +1,11 @@
+import React, { ReactElement } from 'react';
+import { BreadcrumbItem } from '../../molecule/Breadcrumb/Breadcrumb';
+interface ViewPageProps {
+    /** Name of the record (e.g. "Region"). */
+    title: string;
+    breadcrumbItems: BreadcrumbItem[];
+    backRoute: string;
+}
+/** Page that shows a record, with the given content and the back button. */
+declare function ViewPage(props: React.PropsWithChildren<ViewPageProps>): ReactElement;
+export default ViewPage;

package/dist/component/template/ViewPage/ViewPage.js

@@ -0,0 +1,49 @@
+"use client";
+import { useDocumentTitle, useKitConfig } from "../../../provider/useKit.js";
+import PaperCard from "../../molecule/PaperCard/PaperCard.js";
+import PageHeader from "../../organism/PageHeader/PageHeader.js";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Box, Button, Grid, Stack, Text } from "@mantine/core";
+import { IconArrowBack } from "@tabler/icons-react";
+// src/component/template/ViewPage/ViewPage.tsx
+/** Page that shows a record, with the given content and the back button. */
+function ViewPage(props) {
+	const { title, breadcrumbItems, backRoute, children } = props;
+	const { router, messages } = useKitConfig();
+	const { Link } = router;
+	const pageTitle = `${messages.form.action.view} ${title}`;
+	const documentTitle = useDocumentTitle(pageTitle);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("title", { children: documentTitle }), /* @__PURE__ */ jsxs(Stack, {
+		gap: "lg",
+		children: [/* @__PURE__ */ jsx(PageHeader, {
+			title: pageTitle,
+			breadcrumbItems: [...breadcrumbItems, {
+				title: pageTitle,
+				href: "#"
+			}]
+		}), /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(Grid.Col, {
+			span: {
+				base: 12,
+				lg: 12
+			},
+			children: /* @__PURE__ */ jsx(PaperCard, { children: /* @__PURE__ */ jsxs(Stack, { children: [
+				/* @__PURE__ */ jsx(Text, {
+					size: "lg",
+					fw: 600,
+					children: pageTitle
+				}),
+				children,
+				/* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Button, {
+					leftSection: /* @__PURE__ */ jsx(IconArrowBack, { size: 16 }),
+					component: Link,
+					href: backRoute,
+					children: messages.common.back
+				}) })
+			] }) })
+		}) })]
+	})] });
+}
+export { ViewPage as default };
+
+//# sourceMappingURL=ViewPage.js.map

package/dist/component/template/ViewPage/ViewPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewPage.js","names":["_Fragment"],"sources":["../../../../src/component/template/ViewPage/ViewPage.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\n\nimport { Box, Button, Grid, Stack, Text } from '@mantine/core';\nimport { IconArrowBack } from '@tabler/icons-react';\n\nimport { useDocumentTitle, useKitConfig } from '../../../provider/useKit';\nimport { BreadcrumbItem } from '../../molecule/Breadcrumb/Breadcrumb';\nimport PaperCard from '../../molecule/PaperCard/PaperCard';\nimport PageHeader from '../../organism/PageHeader/PageHeader';\n\ninterface ViewPageProps {\n    /** Name of the record (e.g. \"Region\"). */\n    title: string;\n    breadcrumbItems: BreadcrumbItem[];\n    backRoute: string;\n}\n\n/** Page that shows a record, with the given content and the back button. */\nfunction ViewPage(props: React.PropsWithChildren<ViewPageProps>): ReactElement {\n    const { title, breadcrumbItems, backRoute, children } = props;\n    const { router, messages } = useKitConfig();\n    const { Link } = router;\n    const pageTitle = `${messages.form.action.view} ${title}`;\n    const documentTitle = useDocumentTitle(pageTitle);\n\n    return (\n        <>\n            <title>{documentTitle}</title>\n            <Stack gap=\"lg\">\n                <PageHeader title={pageTitle} breadcrumbItems={[...breadcrumbItems, { title: pageTitle, href: '#' }]} />\n                <Grid>\n                    <Grid.Col span={{ base: 12, lg: 12 }}>\n                        <PaperCard>\n                            <Stack>\n                                <Text size=\"lg\" fw={600}>\n                                    {pageTitle}\n                                </Text>\n\n                                {children}\n\n                                <Box>\n                                    <Button leftSection={<IconArrowBack size={16} />} component={Link} href={backRoute}>\n                                        {messages.common.back}\n                                    </Button>\n                                </Box>\n                            </Stack>\n                        </PaperCard>\n                    </Grid.Col>\n                </Grid>\n            </Stack>\n        </>\n    );\n}\n\nexport default ViewPage;\n"],"mappings":";;;;;;;;;;AAkBA,SAAS,SAAS,OAA6D;CAC3E,MAAM,EAAE,OAAO,iBAAiB,WAAW,aAAa;CACxD,MAAM,EAAE,QAAQ,aAAa,aAAa;CAC1C,MAAM,EAAE,SAAS;CACjB,MAAM,YAAY,GAAG,SAAS,KAAK,OAAO,KAAK,GAAG;CAClD,MAAM,gBAAgB,iBAAiB,SAAS;CAEhD,OACI,qBAAAA,UAAA,EAAA,UAAA,CACI,oBAAC,SAAD,EAAA,UAAQ,cAAqB,CAAA,GAC7B,qBAAC,OAAD;EAAO,KAAI;EAAX,UAAA,CACI,oBAAC,YAAD;GAAY,OAAO;GAAW,iBAAiB,CAAC,GAAG,iBAAiB;IAAE,OAAO;IAAW,MAAM;GAAI,CAAC;EAAI,CAAA,GACvG,oBAAC,MAAD,EAAA,UACI,oBAAC,KAAK,KAAN;GAAU,MAAM;IAAE,MAAM;IAAI,IAAI;GAAG;GAC/B,UAAA,oBAAC,WAAD,EAAA,UACI,qBAAC,OAAD,EAAA,UAAA;IACI,oBAAC,MAAD;KAAM,MAAK;KAAK,IAAI;KACf,UAAA;IACC,CAAA;IAEL;IAED,oBAAC,KAAD,EAAA,UACI,oBAAC,QAAD;KAAQ,aAAa,oBAAC,eAAD,EAAe,MAAM,GAAK,CAAA;KAAG,WAAW;KAAM,MAAM;KACpE,UAAA,SAAS,OAAO;IACb,CAAA,EACP,CAAA;GACF,EAAA,CAAA,EACA,CAAA;EACL,CAAA,EACR,CAAA,CACH;CACT,CAAA,CAAA,EAAA,CAAA;AAEV"}

package/dist/data/ListDataSource.d.ts

@@ -0,0 +1,12 @@
+import { Identifiable } from '../model/Identifiable';
+/**
+ * Source of the records of a table that allows deleting them (e.g. a service that accesses a REST API). Any object
+ * with these methods works, without extending a class.
+ * @template M type of the records
+ */
+export interface ListDataSource<M extends Identifiable> {
+    /** Fetches all records shown in the table. */
+    findAll(): Promise<M[]>;
+    /** Deletes the record with the given id. */
+    delete(id: number | string): Promise<void>;
+}

package/dist/data/ListDataSource.js

@@ -0,0 +1 @@
+"use client";

package/dist/data/SaveDataSource.d.ts

@@ -0,0 +1,16 @@
+import { Identifiable } from '../model/Identifiable';
+/**
+ * Destination of the data of a form: creates a record (without an id) or updates an existing one (with an id). Any
+ * object with this method works, without extending a class.
+ * @template M type of the saved record, returned by the destination
+ * @template D type of the data sent by the form (e.g. a DTO, or M itself)
+ */
+export interface SaveDataSource<M extends Identifiable, D> {
+    /**
+     * Creates or updates a record.
+     * @param id id of the record to update; if absent, the record is created
+     * @param data data to save
+     * @return the saved record
+     */
+    save(id: M['id'] | string | undefined, data: D): Promise<M>;
+}

package/dist/data/SaveDataSource.js

@@ -0,0 +1 @@
+"use client";

package/dist/export/ExportCellText.d.ts

@@ -0,0 +1,18 @@
+import { ClassifiedCell, NumberFormat } from './ExportDocument';
+/**
+ * Formats a number as a spreadsheet in the language of the locale shows it (e.g. a decimal comma in `pt-BR`).
+ * @param value number; a percentage is in the 0..1 scale
+ * @param format decimal places and whether the value is a percentage
+ * @param grouping whether the thousands separator is used (e.g. "1.234,56" in `pt-BR`); `false` gives "1234,56"
+ * @param locale locale of the format; defaults to `en-US`
+ * @return the formatted number, with "%" at the end if it is a percentage
+ */
+export declare function formatNumber(value: number, format: NumberFormat, grouping?: boolean, locale?: string): string;
+/**
+ * Returns the text of a cell, as the user sees it.
+ * @param cell cell already classified
+ * @param grouping whether the numbers use the thousands separator
+ * @param locale locale of the number format; defaults to `en-US`
+ * @return the text of the cell; empty for an absent value
+ */
+export declare function cellText(cell: ClassifiedCell, grouping?: boolean, locale?: string): string;

package/dist/export/ExportCellText.js

@@ -0,0 +1,60 @@
+"use client";
+import { DEFAULT_LOCALE } from "../i18n/KitLocale.js";
+// src/export/ExportCellText.ts
+/** Multiplier that converts a percentage from the 0..1 scale to the 0..100 display scale. */
+var PERCENT_SCALE = 100;
+/**
+* Formatters already created, by locale and format. Creating an `Intl.NumberFormat` is expensive, and the export
+* formats every cell (e.g. to measure the column widths), but there are few combinations of locale, decimal places and
+* thousands separator.
+*/
+var formatters = /* @__PURE__ */ new Map();
+/**
+* Returns the number formatter of a locale for the given decimal places and thousands separator.
+* @param locale locale of the format
+* @param decimals decimal places
+* @param grouping whether the thousands separator is used
+* @return the formatter, created only the first time
+*/
+function numberFormatter(locale, decimals, grouping) {
+	const key = `${locale}:${decimals}:${grouping}`;
+	let formatter = formatters.get(key);
+	if (!formatter) {
+		formatter = new Intl.NumberFormat(locale, {
+			minimumFractionDigits: decimals,
+			maximumFractionDigits: decimals,
+			useGrouping: grouping
+		});
+		formatters.set(key, formatter);
+	}
+	return formatter;
+}
+/**
+* Formats a number as a spreadsheet in the language of the locale shows it (e.g. a decimal comma in `pt-BR`).
+* @param value number; a percentage is in the 0..1 scale
+* @param format decimal places and whether the value is a percentage
+* @param grouping whether the thousands separator is used (e.g. "1.234,56" in `pt-BR`); `false` gives "1234,56"
+* @param locale locale of the format; defaults to `en-US`
+* @return the formatted number, with "%" at the end if it is a percentage
+*/
+function formatNumber(value, format, grouping = true, locale = DEFAULT_LOCALE) {
+	const formatter = numberFormatter(locale, format.decimals, grouping);
+	return format.percent ? `${formatter.format(value * PERCENT_SCALE)}%` : formatter.format(value);
+}
+/**
+* Returns the text of a cell, as the user sees it.
+* @param cell cell already classified
+* @param grouping whether the numbers use the thousands separator
+* @param locale locale of the number format; defaults to `en-US`
+* @return the text of the cell; empty for an absent value
+*/
+function cellText(cell, grouping = true, locale = DEFAULT_LOCALE) {
+	switch (cell.kind) {
+		case "empty": return "";
+		case "number": return formatNumber(cell.value, cell.format, grouping, locale);
+		default: return cell.text;
+	}
+}
+export { cellText, formatNumber };
+
+//# sourceMappingURL=ExportCellText.js.map

package/dist/export/ExportCellText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExportCellText.js","names":[],"sources":["../../src/export/ExportCellText.ts"],"sourcesContent":["import { DEFAULT_LOCALE } from '../i18n/KitLocale';\nimport { ClassifiedCell, NumberFormat } from './ExportDocument';\n\n/** Multiplier that converts a percentage from the 0..1 scale to the 0..100 display scale. */\nconst PERCENT_SCALE = 100;\n\n/**\n * Formatters already created, by locale and format. Creating an `Intl.NumberFormat` is expensive, and the export\n * formats every cell (e.g. to measure the column widths), but there are few combinations of locale, decimal places and\n * thousands separator.\n */\nconst formatters = new Map<string, Intl.NumberFormat>();\n\n/**\n * Returns the number formatter of a locale for the given decimal places and thousands separator.\n * @param locale locale of the format\n * @param decimals decimal places\n * @param grouping whether the thousands separator is used\n * @return the formatter, created only the first time\n */\nfunction numberFormatter(locale: string, decimals: number, grouping: boolean): Intl.NumberFormat {\n    const key = `${locale}:${decimals}:${grouping}`;\n    let formatter = formatters.get(key);\n    if (!formatter) {\n        formatter = new Intl.NumberFormat(locale, {\n            minimumFractionDigits: decimals,\n            maximumFractionDigits: decimals,\n            useGrouping: grouping\n        });\n        formatters.set(key, formatter);\n    }\n\n    return formatter;\n}\n\n/**\n * Formats a number as a spreadsheet in the language of the locale shows it (e.g. a decimal comma in `pt-BR`).\n * @param value number; a percentage is in the 0..1 scale\n * @param format decimal places and whether the value is a percentage\n * @param grouping whether the thousands separator is used (e.g. \"1.234,56\" in `pt-BR`); `false` gives \"1234,56\"\n * @param locale locale of the format; defaults to `en-US`\n * @return the formatted number, with \"%\" at the end if it is a percentage\n */\nexport function formatNumber(\n    value: number,\n    format: NumberFormat,\n    grouping: boolean = true,\n    locale: string = DEFAULT_LOCALE\n): string {\n    const formatter = numberFormatter(locale, format.decimals, grouping);\n\n    return format.percent ? `${formatter.format(value * PERCENT_SCALE)}%` : formatter.format(value);\n}\n\n/**\n * Returns the text of a cell, as the user sees it.\n * @param cell cell already classified\n * @param grouping whether the numbers use the thousands separator\n * @param locale locale of the number format; defaults to `en-US`\n * @return the text of the cell; empty for an absent value\n */\nexport function cellText(cell: ClassifiedCell, grouping: boolean = true, locale: string = DEFAULT_LOCALE): string {\n    switch (cell.kind) {\n        case 'empty':\n            return '';\n        case 'number':\n            return formatNumber(cell.value, cell.format, grouping, locale);\n        default:\n            return cell.text;\n    }\n}\n"],"mappings":";;;;AAIA,IAAM,gBAAgB;;;;;;AAOtB,IAAM,6BAAa,IAAI,IAA+B;;;;;;;;AAStD,SAAS,gBAAgB,QAAgB,UAAkB,UAAsC;CAC7F,MAAM,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG;CACrC,IAAI,YAAY,WAAW,IAAI,GAAG;CAClC,IAAI,CAAC,WAAW;EACZ,YAAY,IAAI,KAAK,aAAa,QAAQ;GACtC,uBAAuB;GACvB,uBAAuB;GACvB,aAAa;EACjB,CAAC;EACD,WAAW,IAAI,KAAK,SAAS;CACjC;CAEA,OAAO;AACX;;;;;;;;;AAUA,SAAgB,aACZ,OACA,QACA,WAAoB,MACpB,SAAiB,gBACX;CACN,MAAM,YAAY,gBAAgB,QAAQ,OAAO,UAAU,QAAQ;CAEnE,OAAO,OAAO,UAAU,GAAG,UAAU,OAAO,QAAQ,aAAa,EAAE,KAAK,UAAU,OAAO,KAAK;AAClG;;;;;;;;AASA,SAAgB,SAAS,MAAsB,WAAoB,MAAM,SAAiB,gBAAwB;CAC9G,QAAQ,KAAK,MAAb;EACI,KAAK,SACD,OAAO;EACX,KAAK,UACD,OAAO,aAAa,KAAK,OAAO,KAAK,QAAQ,UAAU,MAAM;EACjE,SACI,OAAO,KAAK;CACpB;AACJ"}

package/dist/export/ExportDocument.d.ts

@@ -0,0 +1,127 @@
+/**
+ * Model of the exported data, independent of the file format (see `ExportFormat`). An export is a document with one
+ * or more sheets, and each sheet is a matrix (an array of arrays) of cells, with the title of each column.
+ * It depends on no domain: whoever exports converts their data to this model.
+ * @author Manoel Campos
+ */
+import { KitLocale } from '../i18n/KitLocale';
+import { ExportMessages } from '../i18n/KitMessages';
+/** Format of a numeric value. Percentages are in the 0..1 scale and converted only for display. */
+export type NumberFormat = {
+    /** Decimal places shown. */
+    decimals: number;
+    /** Whether the value is a percentage in the 0..1 scale (e.g. 0.85 is shown as 85%). */
+    percent?: boolean;
+};
+/** Number with its own format, for when the format changes from one row to another (e.g. the unit of each row). */
+export type NumberCell = {
+    value: number;
+    format: NumberFormat;
+};
+/** Cell whose value could not be computed (e.g. a calculation error), unlike an empty (absent) cell. */
+export type InvalidCell = {
+    invalid: true;
+    /** Text shown instead of the value. */
+    text: string;
+};
+/**
+ * Value of a cell:
+ * - `string`: text;
+ * - `number`: number, in the format of the column (`NaN` is treated as an absent value);
+ * - {@link NumberCell}: number with its own format;
+ * - {@link InvalidCell}: invalid result;
+ * - `undefined`: absent value (empty cell), which is different from zero.
+ */
+export type ExportCell = string | number | NumberCell | InvalidCell | undefined;
+/** Column of a sheet. */
+export type ExportColumn = {
+    /** Title (header) of the column. */
+    header: string;
+    /** Format of the numbers of the column, used when the cell has none; absent for {@link DEFAULT_NUMBER_FORMAT}. */
+    format?: NumberFormat;
+};
+/** Sheet of the file: a table with the columns and the rows. */
+export type ExportSheet = {
+    /** Name of the sheet. Each format adapts it to its rules (e.g. the maximum length in Excel). */
+    name: string;
+    columns: ExportColumn[];
+    /**
+     * One array per row, with one cell per column, in the order of {@link columns}. A shorter row is completed with
+     * empty cells; a row with more cells than columns is an error, since the extra data would be lost.
+     */
+    rows: ExportCell[][];
+};
+/** Information about the context of the data, shown at the beginning of the file (e.g. the period and the filters). */
+export type ExportInfo = {
+    label: string;
+    value: string;
+};
+/** Visual identity of the system that generated the file, shown in the header and in the footer. */
+export type ExportBranding = {
+    /** Name of the system, shown in the footer (e.g. "Data generated by My System"). */
+    systemName: string;
+    /** Address of the system, shown as a link in the footer. */
+    siteUrl: string;
+    /** Logo shown in the header; absent to show no logo (e.g. if it could not be loaded). */
+    logo?: ExportImage;
+};
+/** PNG image embedded in the file. */
+export type ExportImage = {
+    /** Content of the image, as a base64 data URL (`data:image/png;base64,...`). */
+    pngDataUrl: string;
+    /** Original width and height (px), to keep the aspect ratio when resizing. */
+    width: number;
+    height: number;
+};
+/** Document to export: the data and its context. */
+export type ExportDocument = {
+    /** Title shown at the top of the file. */
+    title: string;
+    /** Name of the file, without the date and the extension, which are added on export. */
+    fileName: string;
+    info: ExportInfo[];
+    /** Date and time the data was generated. */
+    generatedAt: Date;
+    branding: ExportBranding;
+    sheets: ExportSheet[];
+    /** Locale of the texts and of the number format of the file. Default: `en-US`. */
+    locale?: KitLocale;
+    /** Texts that replace the ones of the locale (e.g. the ones the app overrides in the `KitProvider`). */
+    messages?: Partial<ExportMessages>;
+};
+/** Format of the numbers of a column that defines none. */
+export declare const DEFAULT_NUMBER_FORMAT: NumberFormat;
+/** Types of cell, after being normalized by {@link classifyCell}. */
+export type ClassifiedCell = {
+    kind: 'empty';
+} | {
+    kind: 'text';
+    text: string;
+} | {
+    kind: 'number';
+    value: number;
+    format: NumberFormat;
+} | {
+    kind: 'invalid';
+    text: string;
+};
+/**
+ * Creates a cell with an invalid result.
+ * @param text text shown instead of the value; defaults to the text of the default locale
+ * @return the invalid cell
+ */
+export declare function invalidCell(text?: string): InvalidCell;
+/**
+ * Tells whether the cell is an invalid result.
+ * @param cell cell to check
+ */
+export declare function isInvalidCell(cell: ExportCell): cell is InvalidCell;
+/**
+ * Classifies a cell, so that every format handles each type of value the same way. A `NaN` number is treated as
+ * absent (empty cell), and `Infinity` as invalid (e.g. a division by zero).
+ * @param cell cell to classify
+ * @param columnFormat format of the column of the cell, used when the cell is a number without its own format
+ * @param invalidText text of an infinite number; defaults to the text of the default locale
+ * @return the type and the value of the cell
+ */
+export declare function classifyCell(cell: ExportCell, columnFormat?: NumberFormat, invalidText?: string): ClassifiedCell;