@ifto/mantine-kit 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,121 @@
+"use client";
+import AppMain from "../../atom/AppMain/AppMain.js";
+import { Navbar } from "../../organism/Navbar/Navbar.js";
+import { useKitMessages } from "../../../provider/useKit.js";
+import Layout_module_default from "./Layout.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useDisclosure, useMediaQuery, useMounted } from "@mantine/hooks";
+import { ActionIcon, AppShell, Avatar, Burger, Container, Group, Menu, Tooltip, UnstyledButton, useComputedColorScheme, useMantineColorScheme, useMantineTheme } from "@mantine/core";
+import { IconMoon, IconSun } from "@tabler/icons-react";
+import cx from "clsx";
+// src/component/template/Layout/Layout.tsx
+/**
+* Structure of the pages of the app: header with the brand, the color scheme toggle and the user menu, collapsible side
+* menu and the content area.
+*/
+var Layout = ({ children, logo, navItems, navFooter, userMenu }) => {
+	const messages = useKitMessages().layout;
+	const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
+	const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
+	const { setColorScheme } = useMantineColorScheme();
+	const savedColorScheme = useComputedColorScheme("light", { getInitialValueInEffect: true });
+	const nextColorScheme = (useMounted() ? savedColorScheme : "light") === "light" ? "dark" : "light";
+	const colorSchemeLabel = nextColorScheme === "dark" ? messages.enableDarkTheme : messages.enableLightTheme;
+	const theme = useMantineTheme();
+	const isMobile = !useMediaQuery(`(min-width: ${theme.breakpoints.sm})`);
+	const isOpened = isMobile ? mobileOpened : desktopOpened;
+	const toggleBurgerFn = isMobile ? toggleMobile : toggleDesktop;
+	return /* @__PURE__ */ jsxs(AppShell, {
+		header: { height: {
+			base: 60,
+			sm: 68
+		} },
+		navbar: {
+			width: { base: 300 },
+			breakpoint: "sm",
+			collapsed: {
+				mobile: !mobileOpened,
+				desktop: !desktopOpened
+			}
+		},
+		padding: 0,
+		children: [
+			/* @__PURE__ */ jsx(AppShell.Header, { children: /* @__PURE__ */ jsxs(Group, {
+				h: "100%",
+				justify: "space-between",
+				wrap: "nowrap",
+				gap: "xs",
+				px: {
+					base: "xs",
+					sm: "md"
+				},
+				children: [/* @__PURE__ */ jsxs(Group, {
+					wrap: "nowrap",
+					className: cx(Layout_module_default.shrinkable, Layout_module_default.headerGap),
+					children: [/* @__PURE__ */ jsx(Burger, {
+						opened: isOpened,
+						onClick: toggleBurgerFn,
+						size: "sm",
+						"aria-label": isOpened ? messages.collapseNavigation : messages.expandNavigation,
+						"aria-expanded": isOpened,
+						className: Layout_module_default.fixed
+					}), logo]
+				}), /* @__PURE__ */ jsxs(Group, {
+					wrap: "nowrap",
+					gap: "xs",
+					className: Layout_module_default.fixed,
+					children: [/* @__PURE__ */ jsx(Tooltip, {
+						label: colorSchemeLabel,
+						children: /* @__PURE__ */ jsxs(ActionIcon, {
+							onClick: () => setColorScheme(nextColorScheme),
+							variant: "subtle",
+							size: 40,
+							radius: "xl",
+							"aria-label": colorSchemeLabel,
+							children: [/* @__PURE__ */ jsx(IconSun, {
+								className: cx(Layout_module_default.icon, Layout_module_default.light),
+								stroke: 1.5
+							}), /* @__PURE__ */ jsx(IconMoon, {
+								className: cx(Layout_module_default.icon, Layout_module_default.dark),
+								stroke: 1.5
+							})]
+						})
+					}), userMenu && /* @__PURE__ */ jsxs(Menu, {
+						shadow: "lg",
+						width: 200,
+						children: [/* @__PURE__ */ jsx(Tooltip, {
+							label: messages.userMenu,
+							children: /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(UnstyledButton, {
+								"aria-label": messages.userMenu,
+								style: { borderRadius: "50%" },
+								children: /* @__PURE__ */ jsx(Avatar, {
+									color: theme.primaryColor,
+									radius: "xl",
+									size: 40
+								})
+							}) })
+						}), /* @__PURE__ */ jsxs(Menu.Dropdown, { children: [/* @__PURE__ */ jsx(Menu.Label, {
+							tt: "uppercase",
+							ta: "center",
+							fw: 600,
+							children: messages.userMenuTitle
+						}), userMenu] })]
+					})]
+				})]
+			}) }),
+			/* @__PURE__ */ jsx(Navbar, {
+				items: navItems,
+				footer: navFooter,
+				linkClickHandler: () => isMobile && toggleBurgerFn()
+			}),
+			/* @__PURE__ */ jsx(AppShell.Main, { children: /* @__PURE__ */ jsx(AppMain, { children: /* @__PURE__ */ jsx(Container, {
+				p: "md",
+				fluid: true,
+				children
+			}) }) })
+		]
+	});
+};
+export { Layout };
+
+//# sourceMappingURL=Layout.js.map

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":";;;;;;;;;;;;;;;AA+CA,IAAa,UAAU,EAAE,UAAU,MAAM,UAAU,WAAW,eAAsB;CAChF,MAAM,WAAW,eAAe,CAAC,CAAC;CAClC,MAAM,CAAC,cAAc,EAAE,QAAQ,kBAAkB,cAAc;CAC/D,MAAM,CAAC,eAAe,EAAE,QAAQ,mBAAmB,cAAc,IAAI;CACrE,MAAM,EAAE,mBAAmB,sBAAsB;CACjD,MAAM,mBAAmB,uBAAuB,SAAS,EAAE,yBAAyB,KAAK,CAAC;CAI1F,MAAM,mBADsB,WAAW,IAAI,mBAAmB,aACd,UAAU,SAAS;CACnE,MAAM,mBAAmB,oBAAoB,SAAS,SAAS,kBAAkB,SAAS;CAE1F,MAAM,QAAQ,gBAAgB;CAE9B,MAAM,WAAW,CADC,cAAc,eAAe,MAAM,YAAY,GAAG,EAClD;CAClB,MAAM,WAAW,WAAW,eAAe;CAC3C,MAAM,iBAAiB,WAAW,eAAe;CAEjD,OACI,qBAAC,UAAD;EACI,QAAQ,EAAE,QAAQ;GAAE,MAAM;GAAI,IAAI;EAAG,EAAE;EACvC,QAAQ;GACJ,OAAO,EAAE,MAAM,IAAI;GACnB,YAAY;GACZ,WAAW;IAAE,QAAQ,CAAC;IAAc,SAAS,CAAC;GAAc;EAChE;EACA,SAAS;EAPb,UAAA;GASI,oBAAC,SAAS,QAAV,EAAA,UACI,qBAAC,OAAD;IAAO,GAAE;IAAO,SAAQ;IAAgB,MAAK;IAAS,KAAI;IAAK,IAAI;KAAE,MAAM;KAAM,IAAI;IAAK;IAA1F,UAAA,CACI,qBAAC,OAAD;KAAO,MAAK;KAAS,WAAW,GAAGA,sBAAQ,YAAYA,sBAAQ,SAAS;KAAxE,UAAA,CACI,oBAAC,QAAD;MACI,QAAQ;MACR,SAAS;MACT,MAAK;MACL,cAAY,WAAW,SAAS,qBAAqB,SAAS;MAC9D,iBAAe;MACf,WAAWA,sBAAQ;KACtB,CAAA,GAEA,IACE;IAEP,CAAA,GAAA,qBAAC,OAAD;KAAO,MAAK;KAAS,KAAI;KAAK,WAAWA,sBAAQ;KAAjD,UAAA,CACI,oBAAC,SAAD;MAAS,OAAO;MACZ,UAAA,qBAAC,YAAD;OACI,eAAe,eAAe,eAAe;OAC7C,SAAQ;OACR,MAAM;OACN,QAAO;OACP,cAAY;OALhB,UAAA,CAOI,oBAAC,SAAD;QAAS,WAAW,GAAGA,sBAAQ,MAAMA,sBAAQ,KAAK;QAAG,QAAQ;OAAM,CAAA,GACnE,oBAAC,UAAD;QAAU,WAAW,GAAGA,sBAAQ,MAAMA,sBAAQ,IAAI;QAAG,QAAQ;OAAM,CAAA,CAC3D;;KACP,CAAA,GAER,YACG,qBAAC,MAAD;MAAM,QAAO;MAAK,OAAO;MAAzB,UAAA,CAGI,oBAAC,SAAD;OAAS,OAAO,SAAS;OACrB,UAAA,oBAAC,KAAK,QAAN,EAAA,UACI,oBAAC,gBAAD;QAAgB,cAAY,SAAS;QAAU,OAAO,EAAE,cAAc,MAAM;QACxE,UAAA,oBAAC,QAAD;SAAQ,OAAO,MAAM;SAAc,QAAO;SAAK,MAAM;QAAK,CAAA;OAC9C,CAAA,EACP,CAAA;MACR,CAAA,GACT,qBAAC,KAAK,UAAN,EAAA,UAAA,CACI,oBAAC,KAAK,OAAN;OAAY,IAAG;OAAY,IAAG;OAAS,IAAI;OACtC,UAAA,SAAS;MACF,CAAA,GACX,QACU,EAAA,CAAA,CACb;KAEP,CAAA,CAAA;IACJ,CAAA,CAAA;GACM,CAAA,EAAA,CAAA;GAEjB,oBAAC,QAAD;IAAQ,OAAO;IAAU,QAAQ;IAAW,wBAAwB,YAAY,eAAe;GAAI,CAAA;GAEnG,oBAAC,SAAS,MAAV,EAAA,UACI,oBAAC,SAAD,EAAA,UACI,oBAAC,WAAD;IAAW,GAAE;IAAK,OAAA;IACb;GACM,CAAA,EACN,CAAA,EACE,CAAA;EACT;;AAElB"}

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"}