@ifto/mantine-kit 0.0.0-stage → 0.1.0

package/dist/component/atom/EditValueButton/EditValueButton.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    onClick: () => void;
+};
+/** Button that starts editing a table row in place. */
+declare const EditValueButton: ({ onClick }: Props) => import("react/jsx-runtime").JSX.Element;
+export default EditValueButton;

package/dist/component/atom/EditValueButton/EditValueButton.js

@@ -0,0 +1,24 @@
+"use client";
+import { useKitMessages } from "../../../provider/useKit.js";
+import { jsx } from "react/jsx-runtime";
+import { ActionIcon, Tooltip } from "@mantine/core";
+import { IconEdit } from "@tabler/icons-react";
+// src/component/atom/EditValueButton/EditValueButton.tsx
+/** Button that starts editing a table row in place. */
+var EditValueButton = ({ onClick }) => {
+	const label = useKitMessages().rowEdit.edit;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		label,
+		children: /* @__PURE__ */ jsx(ActionIcon, {
+			size: "sm",
+			variant: "subtle",
+			color: "blue",
+			onClick,
+			"aria-label": label,
+			children: /* @__PURE__ */ jsx(IconEdit, { size: 16 })
+		})
+	});
+};
+export { EditValueButton as default };
+
+//# sourceMappingURL=EditValueButton.js.map

package/dist/component/atom/EditValueButton/EditValueButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditValueButton.js","names":[],"sources":["../../../../src/component/atom/EditValueButton/EditValueButton.tsx"],"sourcesContent":["import { ActionIcon, Tooltip } from '@mantine/core';\nimport { IconEdit } from '@tabler/icons-react';\n\nimport { useKitMessages } from '../../../provider/useKit';\n\ntype Props = {\n    onClick: () => void;\n};\n\n/** Button that starts editing a table row in place. */\nconst EditValueButton = ({ onClick }: Props) => {\n    const label = useKitMessages().rowEdit.edit;\n\n    return (\n        <Tooltip label={label}>\n            <ActionIcon size=\"sm\" variant=\"subtle\" color=\"blue\" onClick={onClick} aria-label={label}>\n                <IconEdit size={16} />\n            </ActionIcon>\n        </Tooltip>\n    );\n};\n\nexport default EditValueButton;\n"],"mappings":";;;;;;;AAUA,IAAM,mBAAmB,EAAE,cAAqB;CAC5C,MAAM,QAAQ,eAAe,CAAC,CAAC,QAAQ;CAEvC,OACI,oBAAC,SAAD;EAAgB;EACZ,UAAA,oBAAC,YAAD;GAAY,MAAK;GAAK,SAAQ;GAAS,OAAM;GAAgB;GAAS,cAAY;GAC9E,UAAA,oBAAC,UAAD,EAAU,MAAM,GAAK,CAAA;EACb,CAAA;CACP,CAAA;AAEjB"}

package/dist/component/atom/ErrorAlert/ErrorAlert.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { AlertProps } from '@mantine/core';
+type Props = {
+    message: ReactNode;
+} & AlertProps;
+/** Red alert that shows an error message (e.g. when the data of a component cannot be loaded). */
+declare const ErrorAlert: ({ message, ...others }: Props) => import("react/jsx-runtime").JSX.Element;
+export default ErrorAlert;

package/dist/component/atom/ErrorAlert/ErrorAlert.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Alert } from "@mantine/core";
+import { IconBug } from "@tabler/icons-react";
+// src/component/atom/ErrorAlert/ErrorAlert.tsx
+/** Red alert that shows an error message (e.g. when the data of a component cannot be loaded). */
+var ErrorAlert = ({ message, ...others }) => {
+	const icon = /* @__PURE__ */ jsx(IconBug, { size: 18 });
+	const { title } = others;
+	return /* @__PURE__ */ jsx(Alert, {
+		variant: "light",
+		color: "red",
+		title,
+		icon,
+		...others,
+		children: message || ""
+	});
+};
+export { ErrorAlert as default };
+
+//# sourceMappingURL=ErrorAlert.js.map

package/dist/component/atom/ErrorAlert/ErrorAlert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorAlert.js","names":[],"sources":["../../../../src/component/atom/ErrorAlert/ErrorAlert.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport { Alert, AlertProps } from '@mantine/core';\nimport { IconBug } from '@tabler/icons-react';\n\ntype Props = { message: ReactNode } & AlertProps;\n\n/** Red alert that shows an error message (e.g. when the data of a component cannot be loaded). */\nconst ErrorAlert = ({ message, ...others }: Props) => {\n    const icon = <IconBug size={18} />;\n    const { title } = others;\n\n    return (\n        <Alert variant=\"light\" color=\"red\" title={title} icon={icon} {...others}>\n            {message || ''}\n        </Alert>\n    );\n};\n\nexport default ErrorAlert;\n"],"mappings":";;;;;;AAQA,IAAM,cAAc,EAAE,SAAS,GAAG,aAAoB;CAClD,MAAM,OAAO,oBAAC,SAAD,EAAS,MAAM,GAAK,CAAA;CACjC,MAAM,EAAE,UAAU;CAElB,OACI,oBAAC,OAAD;EAAO,SAAQ;EAAQ,OAAM;EAAa;EAAa;EAAM,GAAI;EAC5D,UAAA,WAAW;CACT,CAAA;AAEf"}

package/dist/component/atom/Surface/Surface.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { BoxProps, PaperProps } from '@mantine/core';
+type SurfaceProps = {
+    children: ReactNode;
+} & BoxProps & PaperProps;
+/** Polymorphic container (e.g. `component={Paper}`) used as the base of cards and page headers. */
+declare const Surface: (<C = "div">(props: import("@mantine/core").PolymorphicComponentProps<C, SurfaceProps>) => React.ReactElement) & Omit<import("react").FunctionComponent<({
+    children: ReactNode;
+} & BoxProps & PaperProps & {
+    component: React.ElementType;
+    renderRoot?: (props: Record<string, any>) => any;
+}) | ({
+    children: ReactNode;
+} & BoxProps & PaperProps & {
+    component?: any;
+} & Omit<any, "__size" | "__vars" | "attributes" | "bd" | "bdrs" | "bg" | "bga" | "bgp" | "bgr" | "bgsz" | "bottom" | "c" | "children" | "className" | "classNames" | "component" | "darkHidden" | "display" | "ff" | "flex" | "fs" | "fw" | "fz" | "h" | "hiddenFrom" | "inset" | "left" | "lh" | "lightHidden" | "lts" | "m" | "mah" | "maw" | "mb" | "me" | "mie" | "mih" | "mis" | "miw" | "ml" | "mod" | "mr" | "ms" | "mt" | "mx" | "my" | "opacity" | "p" | "pb" | "pe" | "pie" | "pis" | "pl" | "pos" | "pr" | "ps" | "pt" | "px" | "py" | "radius" | "right" | "shadow" | "style" | "styles" | "ta" | "td" | "top" | "tt" | "unstyled" | "variant" | "vars" | "visibleFrom" | "w" | "withBorder"> & {
+    ref?: any;
+    renderRoot?: (props: any) => any;
+})>, never> & Record<string, never>;
+export default Surface;

package/dist/component/atom/Surface/Surface.js

@@ -0,0 +1,15 @@
+"use client";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Box, createPolymorphicComponent } from "@mantine/core";
+// src/component/atom/Surface/Surface.tsx
+/** Polymorphic container (e.g. `component={Paper}`) used as the base of cards and page headers. */
+var Surface = createPolymorphicComponent(forwardRef(({ children, ...others }, ref) => /* @__PURE__ */ jsx(Box, {
+	component: "div",
+	...others,
+	ref,
+	children
+})));
+export { Surface as default };
+
+//# sourceMappingURL=Surface.js.map

package/dist/component/atom/Surface/Surface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Surface.js","names":[],"sources":["../../../../src/component/atom/Surface/Surface.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, ReactNode } from 'react';\n\nimport { Box, BoxProps, createPolymorphicComponent, PaperProps } from '@mantine/core';\n\ntype SurfaceProps = { children: ReactNode } & BoxProps & PaperProps;\n\n/** Polymorphic container (e.g. `component={Paper}`) used as the base of cards and page headers. */\nconst Surface = createPolymorphicComponent<'div', SurfaceProps>(\n    forwardRef<HTMLDivElement, SurfaceProps>(({ children, ...others }, ref) => (\n        <Box component=\"div\" {...others} ref={ref}>\n            {children}\n        </Box>\n    ))\n);\n\nexport default Surface;\n"],"mappings":";;;;;;AASA,IAAM,UAAU,2BACZ,YAA0C,EAAE,UAAU,GAAG,UAAU,QAC/D,oBAAC,KAAD;CAAK,WAAU;CAAM,GAAI;CAAa;CACjC;AACA,CAAA,CACR,CACL"}

package/dist/component/molecule/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+/** Item of the {@link Breadcrumb}. An `href` of `#` marks the current page, shown as text instead of a link. */
+export interface BreadcrumbItem {
+    title: string;
+    href: string;
+}
+export interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+}
+/** Navigation path to the current page, with a link for each previous page. */
+declare const Breadcrumb: React.FC<BreadcrumbProps>;
+export default Breadcrumb;

package/dist/component/molecule/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,38 @@
+"use client";
+import { useKitRouter } from "../../../provider/useKit.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { useColorScheme } from "@mantine/hooks";
+import { Anchor, Breadcrumbs, Text, rem, useMantineTheme } from "@mantine/core";
+// src/component/molecule/Breadcrumb/Breadcrumb.tsx
+/** Navigation path to the current page, with a link for each previous page. */
+var Breadcrumb = ({ items }) => {
+	const { Link } = useKitRouter();
+	const theme = useMantineTheme();
+	const colorScheme = useColorScheme();
+	const BREADCRUMBS_PROPS = { style: { a: {
+		padding: rem(8),
+		borderRadius: theme.radius.sm,
+		fontWeight: 500,
+		color: colorScheme === "dark" ? theme.white : theme.black,
+		"&:hover": {
+			transition: "all ease 150ms",
+			backgroundColor: colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[2],
+			textDecoration: "none"
+		}
+	} } };
+	return /* @__PURE__ */ jsx(Breadcrumbs, {
+		...BREADCRUMBS_PROPS,
+		children: items.map((item, index) => item.href === "#" ? /* @__PURE__ */ jsx(Text, {
+			c: "dimmed",
+			children: item.title
+		}, index) : /* @__PURE__ */ jsx(Anchor, {
+			component: Link,
+			href: item.href,
+			children: item.title
+		}, index))
+	});
+};
+export { Breadcrumb as default };
+
+//# sourceMappingURL=Breadcrumb.js.map

package/dist/component/molecule/Breadcrumb/Breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.js","names":[],"sources":["../../../../src/component/molecule/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Anchor, Breadcrumbs, BreadcrumbsProps, rem, Text, useMantineTheme } from '@mantine/core';\nimport { useColorScheme } from '@mantine/hooks';\n\nimport { useKitRouter } from '../../../provider/useKit';\n\n/** Item of the {@link Breadcrumb}. An `href` of `#` marks the current page, shown as text instead of a link. */\nexport interface BreadcrumbItem {\n    title: string;\n    href: string;\n}\n\nexport interface BreadcrumbProps {\n    items: BreadcrumbItem[];\n}\n\n/** Navigation path to the current page, with a link for each previous page. */\nconst Breadcrumb: React.FC<BreadcrumbProps> = ({ items }) => {\n    const { Link } = useKitRouter();\n    const theme = useMantineTheme();\n    const colorScheme = useColorScheme();\n    const BREADCRUMBS_PROPS: Omit<BreadcrumbsProps, 'children'> = {\n        style: {\n            a: {\n                padding: rem(8),\n                borderRadius: theme.radius.sm,\n                fontWeight: 500,\n                color: colorScheme === 'dark' ? theme.white : theme.black,\n\n                '&:hover': {\n                    transition: 'all ease 150ms',\n                    backgroundColor: colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2],\n                    textDecoration: 'none'\n                }\n            }\n        }\n    };\n\n    return (\n        <Breadcrumbs {...BREADCRUMBS_PROPS}>\n            {items.map((item, index) =>\n                item.href === '#' ? (\n                    <Text c=\"dimmed\" key={index}>\n                        {item.title}\n                    </Text>\n                ) : (\n                    <Anchor component={Link} href={item.href} key={index}>\n                        {item.title}\n                    </Anchor>\n                )\n            )}\n        </Breadcrumbs>\n    );\n};\n\nexport default Breadcrumb;\n"],"mappings":";;;;;;;;AAkBA,IAAM,cAAyC,EAAE,YAAY;CACzD,MAAM,EAAE,SAAS,aAAa;CAC9B,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,cAAc,eAAe;CACnC,MAAM,oBAAwD,EAC1D,OAAO,EACH,GAAG;EACC,SAAS,IAAI,CAAC;EACd,cAAc,MAAM,OAAO;EAC3B,YAAY;EACZ,OAAO,gBAAgB,SAAS,MAAM,QAAQ,MAAM;EAEpD,WAAW;GACP,YAAY;GACZ,iBAAiB,gBAAgB,SAAS,MAAM,OAAO,KAAK,KAAK,MAAM,OAAO,KAAK;GACnF,gBAAgB;EACpB;CACJ,EACJ,EACJ;CAEA,OACI,oBAAC,aAAD;EAAa,GAAI;EACZ,UAAA,MAAM,KAAK,MAAM,UACd,KAAK,SAAS,MACV,oBAAC,MAAD;GAAM,GAAE;GACH,UAAA,KAAK;EACJ,GAFgB,KAEhB,IAEN,oBAAC,QAAD;GAAQ,WAAW;GAAM,MAAM,KAAK;GAC/B,UAAA,KAAK;EACF,GAFuC,KAEvC,CAEhB;CACS,CAAA;AAErB"}

package/dist/component/molecule/ExportMenuButton/ExportMenuButton.d.ts

@@ -0,0 +1,25 @@
+import { ReactElement } from 'react';
+import { ButtonProps } from '@mantine/core';
+import type { ExportFormat } from '../../../export/ExportFormat';
+type Props = Omit<ButtonProps, 'children' | 'leftSection' | 'loading'> & {
+    /**
+     * Exports the data in the chosen format. While the `Promise` is running, the button shows it is loading; if it
+     * fails, the error is shown in a notification.
+     */
+    onExport: (format: ExportFormat) => Promise<void>;
+    /**
+     * Formats offered in the menu, in their order: the built-in ones (e.g. `EXPORT_FORMATS` or just `XLSX_FORMAT`, from
+     * `export/ExportFormats`) or any other implementation of {@link ExportFormat}.
+     */
+    formats: readonly ExportFormat[];
+    /** Text of the button; absent for the one of the locale. */
+    label?: string;
+    /** Text shown below the name of a format in the menu (e.g. what is exported in it); absent for none. */
+    formatDescription?: (format: ExportFormat) => string | undefined;
+};
+/**
+ * "Export" button, with a menu of the given export formats. It knows neither what is exported nor how: whoever uses it
+ * chooses the formats and generates the file in {@link Props.onExport}.
+ */
+declare function ExportMenuButton({ onExport, formats, label, formatDescription, ...buttonProps }: Props): ReactElement;
+export default ExportMenuButton;

package/dist/component/molecule/ExportMenuButton/ExportMenuButton.js

@@ -0,0 +1,49 @@
+"use client";
+import { useKitMessages } from "../../../provider/useKit.js";
+import { showErrorNotification } from "../../../util/Notifications.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Menu, Text } from "@mantine/core";
+import { IconDownload } from "@tabler/icons-react";
+// src/component/molecule/ExportMenuButton/ExportMenuButton.tsx
+/** Size of the button icon (px). */
+var ICON_SIZE = 18;
+/**
+* "Export" button, with a menu of the given export formats. It knows neither what is exported nor how: whoever uses it
+* chooses the formats and generates the file in {@link Props.onExport}.
+*/
+function ExportMenuButton({ onExport, formats, label, formatDescription, ...buttonProps }) {
+	const messages = useKitMessages();
+	const [exporting, setExporting] = useState(false);
+	async function exportFormat(format) {
+		setExporting(true);
+		try {
+			await onExport(format);
+		} catch (error) {
+			showErrorNotification(error, messages.export.failed(format.label), messages.common.error);
+		} finally {
+			setExporting(false);
+		}
+	}
+	return /* @__PURE__ */ jsxs(Menu, {
+		position: "bottom-end",
+		withinPortal: true,
+		children: [/* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(Button, {
+			variant: "light",
+			leftSection: /* @__PURE__ */ jsx(IconDownload, { size: ICON_SIZE }),
+			loading: exporting,
+			...buttonProps,
+			children: label ?? messages.export.button
+		}) }), /* @__PURE__ */ jsx(Menu.Dropdown, { children: formats.map((format) => /* @__PURE__ */ jsxs(Menu.Item, {
+			onClick: () => exportFormat(format),
+			children: [format.label, formatDescription?.(format) && /* @__PURE__ */ jsx(Text, {
+				size: "xs",
+				c: "dimmed",
+				children: formatDescription(format)
+			})]
+		}, format.id)) })]
+	});
+}
+export { ExportMenuButton as default };
+
+//# sourceMappingURL=ExportMenuButton.js.map

package/dist/component/molecule/ExportMenuButton/ExportMenuButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExportMenuButton.js","names":[],"sources":["../../../../src/component/molecule/ExportMenuButton/ExportMenuButton.tsx"],"sourcesContent":["'use client';\n\nimport { ReactElement, useState } from 'react';\n\nimport { Button, ButtonProps, Menu, Text } from '@mantine/core';\nimport { IconDownload } from '@tabler/icons-react';\n\nimport type { ExportFormat } from '../../../export/ExportFormat';\nimport { useKitMessages } from '../../../provider/useKit';\nimport { showErrorNotification } from '../../../util/Notifications';\n\n/** Size of the button icon (px). */\nconst ICON_SIZE = 18;\n\ntype Props = Omit<ButtonProps, 'children' | 'leftSection' | 'loading'> & {\n    /**\n     * Exports the data in the chosen format. While the `Promise` is running, the button shows it is loading; if it\n     * fails, the error is shown in a notification.\n     */\n    onExport: (format: ExportFormat) => Promise<void>;\n\n    /**\n     * Formats offered in the menu, in their order: the built-in ones (e.g. `EXPORT_FORMATS` or just `XLSX_FORMAT`, from\n     * `export/ExportFormats`) or any other implementation of {@link ExportFormat}.\n     */\n    formats: readonly ExportFormat[];\n\n    /** Text of the button; absent for the one of the locale. */\n    label?: string;\n\n    /** Text shown below the name of a format in the menu (e.g. what is exported in it); absent for none. */\n    formatDescription?: (format: ExportFormat) => string | undefined;\n};\n\n/**\n * \"Export\" button, with a menu of the given export formats. It knows neither what is exported nor how: whoever uses it\n * chooses the formats and generates the file in {@link Props.onExport}.\n */\nfunction ExportMenuButton({ onExport, formats, label, formatDescription, ...buttonProps }: Props): ReactElement {\n    const messages = useKitMessages();\n    const [exporting, setExporting] = useState(false);\n\n    async function exportFormat(format: ExportFormat): Promise<void> {\n        setExporting(true);\n        try {\n            await onExport(format);\n        } catch (error) {\n            showErrorNotification(error, messages.export.failed(format.label), messages.common.error);\n        } finally {\n            setExporting(false);\n        }\n    }\n\n    return (\n        <Menu position=\"bottom-end\" withinPortal>\n            <Menu.Target>\n                <Button\n                    variant=\"light\"\n                    leftSection={<IconDownload size={ICON_SIZE} />}\n                    loading={exporting}\n                    {...buttonProps}\n                >\n                    {label ?? messages.export.button}\n                </Button>\n            </Menu.Target>\n\n            <Menu.Dropdown>\n                {formats.map(format => (\n                    <Menu.Item key={format.id} onClick={() => exportFormat(format)}>\n                        {format.label}\n                        {formatDescription?.(format) && (\n                            <Text size=\"xs\" c=\"dimmed\">\n                                {formatDescription(format)}\n                            </Text>\n                        )}\n                    </Menu.Item>\n                ))}\n            </Menu.Dropdown>\n        </Menu>\n    );\n}\n\nexport default ExportMenuButton;\n"],"mappings":";;;;;;;;;AAYA,IAAM,YAAY;;;;;AA0BlB,SAAS,iBAAiB,EAAE,UAAU,SAAS,OAAO,mBAAmB,GAAG,eAAoC;CAC5G,MAAM,WAAW,eAAe;CAChC,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAEhD,eAAe,aAAa,QAAqC;EAC7D,aAAa,IAAI;EACjB,IAAI;GACA,MAAM,SAAS,MAAM;EACzB,SAAS,OAAO;GACZ,sBAAsB,OAAO,SAAS,OAAO,OAAO,OAAO,KAAK,GAAG,SAAS,OAAO,KAAK;EAC5F,UAAU;GACN,aAAa,KAAK;EACtB;CACJ;CAEA,OACI,qBAAC,MAAD;EAAM,UAAS;EAAa,cAAA;EAA5B,UAAA,CACI,oBAAC,KAAK,QAAN,EAAA,UACI,oBAAC,QAAD;GACI,SAAQ;GACR,aAAa,oBAAC,cAAD,EAAc,MAAM,UAAY,CAAA;GAC7C,SAAS;GACT,GAAI;GAEH,UAAA,SAAS,SAAS,OAAO;EACtB,CAAA,EACC,CAAA,GAEb,oBAAC,KAAK,UAAN,EAAA,UACK,QAAQ,KAAI,WACT,qBAAC,KAAK,MAAN;GAA2B,eAAe,aAAa,MAAM;GAA7D,UAAA,CACK,OAAO,OACP,oBAAoB,MAAM,KACvB,oBAAC,MAAD;IAAM,MAAK;IAAK,GAAE;IACb,UAAA,kBAAkB,MAAM;GACvB,CAAA,CAEH;EAPK,GAAA,OAAO,EAOZ,CACd,EACU,CAAA,CACb;;AAEd"}

package/dist/component/molecule/PaperCard/PaperCard.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+type PaperCardProps = {
+    children: ReactNode;
+};
+/** Bordered card with padding and rounded corners, used to group the content of a page (e.g. a form or a table). */
+declare const PaperCard: ({ children }: PaperCardProps) => import("react/jsx-runtime").JSX.Element;
+export default PaperCard;

package/dist/component/molecule/PaperCard/PaperCard.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Paper } from "@mantine/core";
+// src/component/molecule/PaperCard/PaperCard.tsx
+var PAPER_PROPS = {
+	p: "md",
+	radius: "md",
+	withBorder: true
+};
+/** Bordered card with padding and rounded corners, used to group the content of a page (e.g. a form or a table). */
+var PaperCard = ({ children }) => /* @__PURE__ */ jsx(Paper, {
+	...PAPER_PROPS,
+	children
+});
+export { PaperCard as default };
+
+//# sourceMappingURL=PaperCard.js.map

package/dist/component/molecule/PaperCard/PaperCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaperCard.js","names":[],"sources":["../../../../src/component/molecule/PaperCard/PaperCard.tsx"],"sourcesContent":["'use client';\n\nimport { ReactNode } from 'react';\n\nimport { Paper, PaperProps } from '@mantine/core';\n\ntype PaperCardProps = { children: ReactNode };\n\nconst PAPER_PROPS: PaperProps = {\n    p: 'md',\n    radius: 'md',\n    withBorder: true\n};\n\n/** Bordered card with padding and rounded corners, used to group the content of a page (e.g. a form or a table). */\nconst PaperCard = ({ children }: PaperCardProps) => <Paper {...PAPER_PROPS}>{children}</Paper>;\n\nexport default PaperCard;\n"],"mappings":";;;;AAQA,IAAM,cAA0B;CAC5B,GAAG;CACH,QAAQ;CACR,YAAY;AAChB;;AAGA,IAAM,aAAa,EAAE,eAA+B,oBAAC,OAAD;CAAO,GAAI;CAAc;AAAgB,CAAA"}

package/dist/component/molecule/PrintSection/PrintSection.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement, ReactNode } from 'react';
+type Props = {
+    /** Title of the section. When printing, it is not left alone at the end of a page. */
+    title: string;
+    /** Whether the section starts on a new page, when printing. */
+    newPage?: boolean;
+    children: ReactNode;
+};
+/**
+ * Section of a report ({@link PrintPage}), with a title. When printing, it may start on a new page (e.g. one topic
+ * per page), and the title is not separated from the content.
+ */
+declare function PrintSection({ title, newPage, children }: Props): ReactElement;
+export default PrintSection;

package/dist/component/molecule/PrintSection/PrintSection.js

@@ -0,0 +1,29 @@
+"use client";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, Title } from "@mantine/core";
+// src/component/molecule/PrintSection/PrintSection.tsx
+/**
+* Section of a report ({@link PrintPage}), with a title. When printing, it may start on a new page (e.g. one topic
+* per page), and the title is not separated from the content.
+*/
+function PrintSection({ title, newPage = false, children }) {
+	const titleId = useId();
+	return /* @__PURE__ */ jsxs(Box, {
+		component: "section",
+		mb: "xl",
+		"aria-labelledby": titleId,
+		"data-print-new-page": newPage || void 0,
+		children: [/* @__PURE__ */ jsx(Title, {
+			id: titleId,
+			order: 2,
+			size: "h3",
+			mb: "sm",
+			"data-print-keep-with-next": true,
+			children: title
+		}), children]
+	});
+}
+export { PrintSection as default };
+
+//# sourceMappingURL=PrintSection.js.map

package/dist/component/molecule/PrintSection/PrintSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrintSection.js","names":[],"sources":["../../../../src/component/molecule/PrintSection/PrintSection.tsx"],"sourcesContent":["import { ReactElement, ReactNode, useId } from 'react';\n\nimport { Box, Title } from '@mantine/core';\n\ntype Props = {\n    /** Title of the section. When printing, it is not left alone at the end of a page. */\n    title: string;\n\n    /** Whether the section starts on a new page, when printing. */\n    newPage?: boolean;\n\n    children: ReactNode;\n};\n\n/**\n * Section of a report ({@link PrintPage}), with a title. When printing, it may start on a new page (e.g. one topic\n * per page), and the title is not separated from the content.\n */\nfunction PrintSection({ title, newPage = false, children }: Props): ReactElement {\n    // Links the section to its title, so screen readers announce the section by name.\n    const titleId = useId();\n\n    return (\n        <Box component=\"section\" mb=\"xl\" aria-labelledby={titleId} data-print-new-page={newPage || undefined}>\n            <Title id={titleId} order={2} size=\"h3\" mb=\"sm\" data-print-keep-with-next>\n                {title}\n            </Title>\n            {children}\n        </Box>\n    );\n}\n\nexport default PrintSection;\n"],"mappings":";;;;;;;;;AAkBA,SAAS,aAAa,EAAE,OAAO,UAAU,OAAO,YAAiC;CAE7E,MAAM,UAAU,MAAM;CAEtB,OACI,qBAAC,KAAD;EAAK,WAAU;EAAU,IAAG;EAAK,mBAAiB;EAAS,uBAAqB,WAAW,KAAA;EAA3F,UAAA,CACI,oBAAC,OAAD;GAAO,IAAI;GAAS,OAAO;GAAG,MAAK;GAAK,IAAG;GAAK,6BAAA;GAC3C,UAAA;EACE,CAAA,GACN,QACA;;AAEb"}

package/dist/component/molecule/SelectField/SelectField.d.ts

@@ -0,0 +1,32 @@
+import { ReactElement } from 'react';
+import { type Primitive, type SelectProps } from '@mantine/core';
+/**
+ * Props of the {@link SelectField}.
+ * @template T type of each item of the {@link data} array
+ * @template V type of the field value (such as the type of the id of the items). Mantine 9 accepts primitive values
+ *           (number, string, boolean), so the form keeps the value with its real type, without converting it to string.
+ */
+interface SelectFieldProps<T, V extends Primitive> extends Omit<SelectProps<V>, 'data'> {
+    /** Items offered in the select. */
+    data: T[];
+    /**
+     * Returns the value of an item, which identifies it uniquely (such as the id). Items without an id (`null` or
+     * `undefined`, such as a record not saved yet) are not shown.
+     */
+    getId: (item: T) => V | null | undefined;
+    /** Returns the text shown for an item. */
+    getDescription: (item: T) => string;
+    /** Text shown when no option matches the search; absent for the one of the locale, built from the label. */
+    nothingFoundMessage?: string;
+    /**
+     * Whether the user can type to filter the options. Default: `true`, since most fields have long lists. Use `false`
+     * in fields with few options.
+     */
+    searchable?: boolean;
+}
+/**
+ * Select built from an array of any objects, with a placeholder and a "not found" text built from the label (e.g.
+ * "Select the Region"), in the language of the locale.
+ */
+export declare function SelectField<T, V extends Primitive = string>({ data, getId, getDescription, nothingFoundMessage, searchable, ...rest }: SelectFieldProps<T, V>): ReactElement;
+export {};

package/dist/component/molecule/SelectField/SelectField.js

@@ -0,0 +1,38 @@
+"use client";
+import { useKitMessages } from "../../../provider/useKit.js";
+import { withPlaceholderFromLabel } from "../../../util/TransformData.js";
+import { jsx } from "react/jsx-runtime";
+import { Select } from "@mantine/core";
+// src/component/molecule/SelectField/SelectField.tsx
+/**
+* Converts an item of the data of the {@link SelectField} into an option of the select.
+* @param item item to convert
+* @param getId function that returns the value (id) of the item
+* @param getDescription function that returns the text shown for the item
+* @return an array with the option of the item, or an empty array if the item has no id
+*/
+function toOption(item, getId, getDescription) {
+	const value = getId(item);
+	return value === null || value === void 0 ? [] : [{
+		value,
+		label: getDescription(item)
+	}];
+}
+/**
+* Select built from an array of any objects, with a placeholder and a "not found" text built from the label (e.g.
+* "Select the Region"), in the language of the locale.
+*/
+function SelectField({ data, getId, getDescription, nothingFoundMessage, searchable = true, ...rest }) {
+	const messages = useKitMessages().select;
+	const transformedData = data.flatMap((item) => toOption(item, getId, getDescription));
+	const modifiedRest = withPlaceholderFromLabel(messages.placeholder, rest);
+	return /* @__PURE__ */ jsx(Select, {
+		data: transformedData,
+		nothingFoundMessage: nothingFoundMessage || messages.nothingFound(String(modifiedRest.label)),
+		searchable,
+		...modifiedRest
+	});
+}
+export { SelectField };
+
+//# sourceMappingURL=SelectField.js.map

package/dist/component/molecule/SelectField/SelectField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectField.js","names":[],"sources":["../../../../src/component/molecule/SelectField/SelectField.tsx"],"sourcesContent":["import { ReactElement } from 'react';\n\nimport { type ComboboxItem, type Primitive, Select, type SelectProps } from '@mantine/core';\n\nimport { useKitMessages } from '../../../provider/useKit';\nimport { withPlaceholderFromLabel } from '../../../util/TransformData';\n\n/**\n * Props of the {@link SelectField}.\n * @template T type of each item of the {@link data} array\n * @template V type of the field value (such as the type of the id of the items). Mantine 9 accepts primitive values\n *           (number, string, boolean), so the form keeps the value with its real type, without converting it to string.\n */\ninterface SelectFieldProps<T, V extends Primitive> extends Omit<SelectProps<V>, 'data'> {\n    /** Items offered in the select. */\n    data: T[];\n\n    /**\n     * Returns the value of an item, which identifies it uniquely (such as the id). Items without an id (`null` or\n     * `undefined`, such as a record not saved yet) are not shown.\n     */\n    getId: (item: T) => V | null | undefined;\n\n    /** Returns the text shown for an item. */\n    getDescription: (item: T) => string;\n\n    /** Text shown when no option matches the search; absent for the one of the locale, built from the label. */\n    nothingFoundMessage?: string;\n\n    /**\n     * Whether the user can type to filter the options. Default: `true`, since most fields have long lists. Use `false`\n     * in fields with few options.\n     */\n    searchable?: boolean;\n}\n\n/**\n * Converts an item of the data of the {@link SelectField} into an option of the select.\n * @param item item to convert\n * @param getId function that returns the value (id) of the item\n * @param getDescription function that returns the text shown for the item\n * @return an array with the option of the item, or an empty array if the item has no id\n */\nfunction toOption<T, V extends Primitive>(\n    item: T,\n    getId: (item: T) => V | null | undefined,\n    getDescription: (item: T) => string\n): ComboboxItem<V>[] {\n    const value = getId(item);\n    return value === null || value === undefined ? [] : [{ value, label: getDescription(item) }];\n}\n\n/**\n * Select built from an array of any objects, with a placeholder and a \"not found\" text built from the label (e.g.\n * \"Select the Region\"), in the language of the locale.\n */\nexport function SelectField<T, V extends Primitive = string>({\n    data,\n    getId,\n    getDescription,\n    nothingFoundMessage,\n    searchable = true,\n    ...rest\n}: SelectFieldProps<T, V>): ReactElement {\n    const messages = useKitMessages().select;\n    const transformedData = data.flatMap(item => toOption(item, getId, getDescription));\n    const modifiedRest = withPlaceholderFromLabel(messages.placeholder, rest);\n\n    return (\n        <Select<V>\n            data={transformedData}\n            nothingFoundMessage={nothingFoundMessage || messages.nothingFound(String(modifiedRest.label))}\n            searchable={searchable}\n            {...modifiedRest}\n        />\n    );\n}\n"],"mappings":";;;;;;;;;;;;;AA2CA,SAAS,SACL,MACA,OACA,gBACiB;CACjB,MAAM,QAAQ,MAAM,IAAI;CACxB,OAAO,UAAU,QAAQ,UAAU,KAAA,IAAY,CAAC,IAAI,CAAC;EAAE;EAAO,OAAO,eAAe,IAAI;CAAE,CAAC;AAC/F;;;;;AAMA,SAAgB,YAA6C,EACzD,MACA,OACA,gBACA,qBACA,aAAa,MACb,GAAG,QACkC;CACrC,MAAM,WAAW,eAAe,CAAC,CAAC;CAClC,MAAM,kBAAkB,KAAK,SAAQ,SAAQ,SAAS,MAAM,OAAO,cAAc,CAAC;CAClF,MAAM,eAAe,yBAAyB,SAAS,aAAa,IAAI;CAExE,OACI,oBAAC,QAAD;EACI,MAAM;EACN,qBAAqB,uBAAuB,SAAS,aAAa,OAAO,aAAa,KAAK,CAAC;EAChF;EACZ,GAAI;CACP,CAAA;AAET"}

package/dist/component/molecule/StatsCard/Stats.module.js

@@ -0,0 +1,15 @@
+"use client";
+// src/component/molecule/StatsCard/Stats.module.css
+var value = "mk-Stats-module-value-EAntx";
+var diff = "mk-Stats-module-diff-r3gSM";
+var icon = "mk-Stats-module-icon-YG6b9";
+var title = "mk-Stats-module-title-MzSDP";
+var Stats_module_default = {
+	value,
+	diff,
+	icon,
+	title
+};
+export { Stats_module_default as default, diff, icon, title, value };
+
+//# sourceMappingURL=Stats.module.js.map

package/dist/component/molecule/StatsCard/Stats.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stats.module.js","names":[],"sources":["../../../../src/component/molecule/StatsCard/Stats.module.css"],"sourcesContent":[".value {\n    font-size: rem(24px);\n    font-weight: 500;\n    line-height: 1;\n}\n\n.diff {\n    line-height: 1;\n    display: flex;\n    align-items: center;\n}\n\n.icon {\n    @mixin dark {\n        color: var(--mantine-color-dark-3);\n    }\n\n    @mixin light {\n        color: var(--mantine-color-gray-4);\n    }\n}\n\n.title {\n    font-weight: 500;\n    text-transform: uppercase;\n}\n"],"mappings":""}

package/dist/component/molecule/StatsCard/StatsCard.d.ts

@@ -0,0 +1,18 @@
+import { PaperProps } from '@mantine/core';
+/** Value of a {@link StatsCard}. */
+export type StatsCardData = {
+    title: string;
+    value: string;
+    /** Percentage change from the previous period (e.g. `12` for +12%). */
+    diff: number;
+    /** Period shown in a badge (e.g. "Monthly"). */
+    period?: string;
+    /** What the change is compared to (e.g. "Compared to last year"); absent for the text of the locale (last month). */
+    comparison?: string;
+};
+type StatsCardProps = {
+    data: StatsCardData;
+} & PaperProps;
+/** Card with a key value, its change from the previous period (up or down arrow) and the period. */
+declare const StatsCard: ({ data, ...others }: StatsCardProps) => import("react/jsx-runtime").JSX.Element;
+export default StatsCard;

package/dist/component/molecule/StatsCard/StatsCard.js

@@ -0,0 +1,60 @@
+"use client";
+import { useKitMessages } from "../../../provider/useKit.js";
+import Stats_module_default from "./Stats.module.js";
+import Surface from "../../atom/Surface/Surface.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Badge, Group, Paper, Text } from "@mantine/core";
+import { IconArrowDownRight, IconArrowUpRight } from "@tabler/icons-react";
+// src/component/molecule/StatsCard/StatsCard.tsx
+/** Card with a key value, its change from the previous period (up or down arrow) and the period. */
+var StatsCard = ({ data, ...others }) => {
+	const { title, value, period, diff, comparison } = data;
+	const DiffIcon = diff > 0 ? IconArrowUpRight : IconArrowDownRight;
+	const messages = useKitMessages().stats;
+	return /* @__PURE__ */ jsxs(Surface, {
+		component: Paper,
+		...others,
+		children: [
+			/* @__PURE__ */ jsxs(Group, {
+				justify: "space-between",
+				children: [/* @__PURE__ */ jsx(Text, {
+					size: "xs",
+					c: "dimmed",
+					className: Stats_module_default.title,
+					children: title
+				}), period && /* @__PURE__ */ jsx(Badge, {
+					variant: "filled",
+					radius: "sm",
+					children: period
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Group, {
+				align: "flex-end",
+				gap: "xs",
+				mt: 25,
+				children: [/* @__PURE__ */ jsx(Text, {
+					className: Stats_module_default.value,
+					children: value
+				}), /* @__PURE__ */ jsxs(Text, {
+					c: diff > 0 ? "teal" : "red",
+					fz: "sm",
+					fw: 500,
+					className: Stats_module_default.diff,
+					children: [/* @__PURE__ */ jsxs("span", { children: [diff, "%"] }), /* @__PURE__ */ jsx(DiffIcon, {
+						size: "1rem",
+						stroke: 1.5
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				fz: "xs",
+				c: "dimmed",
+				mt: 7,
+				children: comparison ?? messages.comparedToLastMonth
+			})
+		]
+	});
+};
+export { StatsCard as default };
+
+//# sourceMappingURL=StatsCard.js.map

package/dist/component/molecule/StatsCard/StatsCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatsCard.js","names":["classes"],"sources":["../../../../src/component/molecule/StatsCard/StatsCard.tsx"],"sourcesContent":["import { Badge, Group, Paper, PaperProps, Text } from '@mantine/core';\nimport { IconArrowDownRight, IconArrowUpRight } from '@tabler/icons-react';\n\nimport { useKitMessages } from '../../../provider/useKit';\nimport classes from './Stats.module.css';\nimport Surface from '../../atom/Surface/Surface';\n\n/** Value of a {@link StatsCard}. */\nexport type StatsCardData = {\n    title: string;\n    value: string;\n\n    /** Percentage change from the previous period (e.g. `12` for +12%). */\n    diff: number;\n\n    /** Period shown in a badge (e.g. \"Monthly\"). */\n    period?: string;\n\n    /** What the change is compared to (e.g. \"Compared to last year\"); absent for the text of the locale (last month). */\n    comparison?: string;\n};\n\ntype StatsCardProps = { data: StatsCardData } & PaperProps;\n\n/** Card with a key value, its change from the previous period (up or down arrow) and the period. */\nconst StatsCard = ({ data, ...others }: StatsCardProps) => {\n    const { title, value, period, diff, comparison } = data;\n    const DiffIcon = diff > 0 ? IconArrowUpRight : IconArrowDownRight;\n    const messages = useKitMessages().stats;\n\n    return (\n        <Surface component={Paper} {...others}>\n            <Group justify=\"space-between\">\n                <Text size=\"xs\" c=\"dimmed\" className={classes.title}>\n                    {title}\n                </Text>\n                {period && (\n                    <Badge variant=\"filled\" radius=\"sm\">\n                        {period}\n                    </Badge>\n                )}\n            </Group>\n\n            <Group align=\"flex-end\" gap=\"xs\" mt={25}>\n                <Text className={classes.value}>{value}</Text>\n                <Text c={diff > 0 ? 'teal' : 'red'} fz=\"sm\" fw={500} className={classes.diff}>\n                    <span>{diff}%</span>\n                    <DiffIcon size=\"1rem\" stroke={1.5} />\n                </Text>\n            </Group>\n\n            <Text fz=\"xs\" c=\"dimmed\" mt={7}>\n                {comparison ?? messages.comparedToLastMonth}\n            </Text>\n        </Surface>\n    );\n};\n\nexport default StatsCard;\n"],"mappings":";;;;;;;;;AAyBA,IAAM,aAAa,EAAE,MAAM,GAAG,aAA6B;CACvD,MAAM,EAAE,OAAO,OAAO,QAAQ,MAAM,eAAe;CACnD,MAAM,WAAW,OAAO,IAAI,mBAAmB;CAC/C,MAAM,WAAW,eAAe,CAAC,CAAC;CAElC,OACI,qBAAC,SAAD;EAAS,WAAW;EAAO,GAAI;EAA/B,UAAA;GACI,qBAAC,OAAD;IAAO,SAAQ;IAAf,UAAA,CACI,oBAAC,MAAD;KAAM,MAAK;KAAK,GAAE;KAAS,WAAWA,qBAAQ;KACzC,UAAA;IACC,CAAA,GACL,UACG,oBAAC,OAAD;KAAO,SAAQ;KAAS,QAAO;KAC1B,UAAA;IACE,CAAA,CAER;;GAEP,qBAAC,OAAD;IAAO,OAAM;IAAW,KAAI;IAAK,IAAI;IAArC,UAAA,CACI,oBAAC,MAAD;KAAM,WAAWA,qBAAQ;KAAQ,UAAA;IAAY,CAAA,GAC7C,qBAAC,MAAD;KAAM,GAAG,OAAO,IAAI,SAAS;KAAO,IAAG;KAAK,IAAI;KAAK,WAAWA,qBAAQ;KAAxE,UAAA,CACI,qBAAC,QAAD,EAAA,UAAA,CAAO,MAAK,GAAO,EAAA,CAAA,GACnB,oBAAC,UAAD;MAAU,MAAK;MAAO,QAAQ;KAAM,CAAA,CAClC;IACH,CAAA,CAAA;;GAEP,oBAAC,MAAD;IAAM,IAAG;IAAK,GAAE;IAAS,IAAI;IACxB,UAAA,cAAc,SAAS;GACtB,CAAA;EACD;;AAEjB"}

package/dist/component/organism/DataForm/DataForm.d.ts

@@ -0,0 +1,26 @@
+import React, { ReactElement } from 'react';
+import type { UseFormReturnType } from '@mantine/form';
+/** Props of the submit button. */
+interface SubmitProps {
+    title: string;
+    successMsg?: string;
+    errorMsg: string;
+    disabled?: boolean;
+    /** Question shown in a confirmation dialog before submitting; absent to submit right away. */
+    confirmationMessage?: string;
+}
+interface FormProps<D extends object> {
+    title: string;
+    /** Page opened after the data is saved and by the back button; absent for no back button nor navigation. */
+    backRoute?: string;
+    /** Sends the form data (e.g. to the API). */
+    fetchMethod: (data: D) => Promise<unknown>;
+    form: UseFormReturnType<D>;
+    submit: SubmitProps;
+}
+/**
+ * Form in a card, with the back and submit buttons. On submit, calls `fetchMethod` (optionally after a confirmation),
+ * shows a notification and goes back to `backRoute`, if given.
+ */
+declare function DataForm<D extends object>(props: React.PropsWithChildren<FormProps<D>>): ReactElement;
+export default DataForm;