@foodpilot/foods 2.8.0 → 2.10.0

package/dist/components/Chart/BreakdownTable/BreakdownTable.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+export type BreakdownNode = {
+    label: string;
+    value: number;
+    children?: BreakdownNode[];
+};
+export type BreakdownTableTextOptions = {
+    categoryHeader?: string;
+    scoreHeader?: string;
+    total?: string;
+};
+export type BreakdownTableProps = {
+    groups: BreakdownNode[];
+    valuesFormatterFn?: (value: number, precision?: number) => string;
+    valuesUnit?: string;
+    isLoading?: boolean;
+    headerLeft?: ReactNode;
+    headerRight?: ReactNode;
+    textOptions?: BreakdownTableTextOptions;
+    enableSorting?: boolean;
+    manualSort?: boolean;
+    sorting?: {
+        column: "label" | "value" | null;
+        direction: "asc" | "desc";
+    };
+    onSortingChange?: (s: {
+        column: "label" | "value" | null;
+        direction: "asc" | "desc";
+    }) => void;
+    resizable?: boolean;
+    initialRightColWidth?: number;
+    minRightColWidth?: number;
+    maxRightColWidth?: number;
+};
+export declare const BreakdownTable: (props: BreakdownTableProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Chart/BreakdownTable/BreakdownTable.js

@@ -0,0 +1,137 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import { useTheme, Box, TableContainer, Table, TableBody, TableRow, TableCell, Typography, Stack } from "@mui/material";
+import { BreakdownTableRow } from "./BreakdownTableRow.js";
+import { useBreakdownSorting } from "./useBreakdownSorting.js";
+import { useResizableRightColumn } from "./useResizableRightColumn.js";
+import { BreakdownTableSkeleton } from "./BreakdownTableSkeleton.js";
+import { BreakdownTableEmpty } from "./BreakdownTableEmpty.js";
+import { BreakdownTableHeader } from "./BreakdownTableHeader.js";
+const BreakdownTable = (props) => {
+  const theme = useTheme();
+  const {
+    groups,
+    valuesFormatterFn = (v, p) => theme.numbers.valueFormatterFn(v, p),
+    valuesUnit,
+    isLoading,
+    textOptions
+  } = props;
+  const texts = { ...textOptions ?? {} };
+  const [expanded, setExpanded] = useState({});
+  const { sortingState, sortingEnabled, groupsToRender, toggleSort } = useBreakdownSorting({
+    groups,
+    sorting: props.sorting,
+    enableSorting: props.enableSorting,
+    manualSort: props.manualSort,
+    onSortingChange: props.onSortingChange
+  });
+  const { rightColWidth, onMouseDownResizer } = useResizableRightColumn({
+    resizable: props.resizable,
+    initialRightColWidth: props.initialRightColWidth,
+    minRightColWidth: props.minRightColWidth,
+    maxRightColWidth: props.maxRightColWidth
+  });
+  const total = useMemo(() => groups.reduce((acc, g) => acc + (Number(g.value) || 0), 0), [groups]);
+  const getRowCellSx = (level) => ({
+    borderBottom: level === 0 ? `1px solid ${theme.palette.divider}` : "none",
+    padding: theme.spacing(2, 3)
+  });
+  const indentForLevel = (level) => level > 0 ? theme.spacing(6 + (level - 1) * 4.5) : void 0;
+  if (isLoading) {
+    const rows = Math.max(5, (groups == null ? void 0 : groups.length) || 6);
+    return /* @__PURE__ */ jsx(BreakdownTableSkeleton, { rows });
+  }
+  const isEmpty = ((groups == null ? void 0 : groups.length) ?? 0) === 0;
+  if (isEmpty) {
+    return /* @__PURE__ */ jsx(
+      BreakdownTableEmpty,
+      {
+        rightColWidth,
+        texts,
+        headerLeft: props.headerLeft,
+        headerRight: props.headerRight,
+        sortingEnabled,
+        sortingState,
+        onToggleSort: toggleSort,
+        resizable: props.resizable ?? true,
+        onMouseDownResizer
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      position: "relative",
+      width: "100%",
+      sx: {
+        border: `1px solid ${theme.palette.divider}`,
+        borderRadius: theme.shape.borderRadius,
+        backgroundColor: theme.palette.background.paper
+      },
+      children: /* @__PURE__ */ jsx(TableContainer, { sx: { borderRadius: theme.shape.borderRadius }, children: /* @__PURE__ */ jsx(Table, { children: /* @__PURE__ */ jsxs(TableBody, { children: [
+        /* @__PURE__ */ jsx(
+          BreakdownTableHeader,
+          {
+            rightColWidth,
+            sortingEnabled,
+            sortingState,
+            onToggleSort: toggleSort,
+            resizable: props.resizable ?? true,
+            onMouseDownResizer,
+            headerLeft: props.headerLeft,
+            headerRight: props.headerRight,
+            texts
+          }
+        ),
+        groupsToRender.map((g) => /* @__PURE__ */ jsx(
+          BreakdownTableRow,
+          {
+            node: g,
+            level: 0,
+            path: g.label,
+            valuesFormatterFn,
+            valuesUnit,
+            expanded,
+            setExpanded,
+            getRowCellSx,
+            indentForLevel
+          },
+          `row-${g.label}`
+        )),
+        /* @__PURE__ */ jsxs(TableRow, { children: [
+          /* @__PURE__ */ jsx(
+            TableCell,
+            {
+              sx: {
+                ...getRowCellSx(0),
+                borderBottom: 0,
+                borderRight: `1px solid ${theme.palette.divider}`
+              },
+              children: /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 700, color: theme.palette.text.primary }, children: texts.total })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TableCell,
+            {
+              sx: {
+                ...getRowCellSx(0),
+                borderBottom: 0,
+                width: `${rightColWidth}px`,
+                minWidth: `${rightColWidth}px`,
+                maxWidth: `${rightColWidth}px`
+              },
+              align: "right",
+              children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", justifyContent: "flex-end", children: [
+                /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 700 }, children: valuesFormatterFn(total) }),
+                valuesUnit && /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: theme.palette.text.secondary }, children: valuesUnit })
+              ] })
+            }
+          )
+        ] })
+      ] }) }) })
+    }
+  );
+};
+export {
+  BreakdownTable
+};

package/dist/components/Chart/BreakdownTable/BreakdownTableEmpty.d.ts

@@ -0,0 +1,14 @@
+import { BreakdownTableTextOptions } from './BreakdownTable';
+import { SortingState } from './useBreakdownSorting';
+export type BreakdownTableEmptyProps = {
+    rightColWidth: number;
+    texts: BreakdownTableTextOptions;
+    headerLeft?: React.ReactNode;
+    headerRight?: React.ReactNode;
+    sortingEnabled: boolean;
+    sortingState: SortingState;
+    onToggleSort: (column: "label" | "value") => void;
+    resizable?: boolean;
+    onMouseDownResizer: (e: React.MouseEvent) => void;
+};
+export declare const BreakdownTableEmpty: (props: BreakdownTableEmptyProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Chart/BreakdownTable/BreakdownTableEmpty.js

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme, Box, TableContainer, Table, TableBody, TableRow, TableCell, Stack, Typography } from "@mui/material";
+import { FoodsBadge } from "../../Badge/FoodsBadge.js";
+import { BreakdownTableHeader } from "./BreakdownTableHeader.js";
+const BreakdownTableEmpty = (props) => {
+  const theme = useTheme();
+  const {
+    rightColWidth,
+    texts,
+    headerLeft,
+    headerRight,
+    sortingEnabled,
+    sortingState,
+    onToggleSort,
+    resizable = true,
+    onMouseDownResizer
+  } = props;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      position: "relative",
+      width: "100%",
+      sx: {
+        border: `1px solid ${theme.palette.divider}`,
+        borderRadius: theme.shape.borderRadius,
+        backgroundColor: theme.palette.background.paper
+      },
+      children: /* @__PURE__ */ jsx(TableContainer, { sx: { borderRadius: theme.shape.borderRadius }, children: /* @__PURE__ */ jsx(Table, { children: /* @__PURE__ */ jsxs(TableBody, { children: [
+        /* @__PURE__ */ jsx(
+          BreakdownTableHeader,
+          {
+            rightColWidth,
+            sortingEnabled,
+            sortingState,
+            onToggleSort,
+            resizable,
+            onMouseDownResizer,
+            headerLeft,
+            headerRight,
+            texts
+          }
+        ),
+        /* @__PURE__ */ jsxs(TableRow, { children: [
+          /* @__PURE__ */ jsx(
+            TableCell,
+            {
+              sx: {
+                padding: theme.spacing(2),
+                borderBottom: 0,
+                borderRight: `1px solid ${theme.palette.divider}`
+              },
+              children: /* @__PURE__ */ jsx(Stack, { direction: "row", alignItems: "center", spacing: 2, children: /* @__PURE__ */ jsx(
+                FoodsBadge,
+                {
+                  size: 4,
+                  icon: "empty",
+                  boxProps: {
+                    sx: {
+                      borderRadius: "3px",
+                      backgroundColor: theme.custom.grey[400],
+                      color: theme.custom.grey[1400]
+                    }
+                  }
+                }
+              ) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            TableCell,
+            {
+              sx: {
+                padding: theme.spacing(2),
+                borderBottom: 0,
+                width: `${rightColWidth}px`,
+                minWidth: `${rightColWidth}px`,
+                maxWidth: `${rightColWidth}px`
+              },
+              align: "right",
+              children: /* @__PURE__ */ jsx(Typography, { component: "span", children: "—" })
+            }
+          )
+        ] })
+      ] }) }) })
+    }
+  );
+};
+export {
+  BreakdownTableEmpty
+};

package/dist/components/Chart/BreakdownTable/BreakdownTableHeader.d.ts

@@ -0,0 +1,14 @@
+import { BreakdownTableTextOptions } from './BreakdownTable';
+import { SortingState } from './useBreakdownSorting';
+export type BreakdownTableHeaderProps = {
+    rightColWidth: number;
+    sortingEnabled: boolean;
+    sortingState: SortingState;
+    onToggleSort: (column: "label" | "value") => void;
+    resizable?: boolean;
+    onMouseDownResizer: (e: React.MouseEvent) => void;
+    headerLeft?: React.ReactNode;
+    headerRight?: React.ReactNode;
+    texts: BreakdownTableTextOptions;
+};
+export declare const BreakdownTableHeader: (props: BreakdownTableHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Chart/BreakdownTable/BreakdownTableHeader.js

@@ -0,0 +1,85 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTheme, TableRow, TableCell, Stack, Typography, Box } from "@mui/material";
+import { FoodsIcon } from "../../Icons/FoodsIcon.js";
+const BreakdownTableHeader = (props) => {
+  const theme = useTheme();
+  const {
+    rightColWidth,
+    sortingEnabled,
+    sortingState,
+    onToggleSort,
+    resizable = true,
+    onMouseDownResizer,
+    headerLeft,
+    headerRight,
+    texts
+  } = props;
+  const headerCellSx = {
+    backgroundColor: theme.palette.grey[200],
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    py: theme.spacing(3),
+    px: theme.spacing(3),
+    color: theme.palette.text.primary
+  };
+  return /* @__PURE__ */ jsxs(TableRow, { children: [
+    /* @__PURE__ */ jsx(TableCell, { sx: { ...headerCellSx, borderRight: `1px solid ${theme.palette.divider}` }, children: headerLeft ?? /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 500, color: theme.palette.text.primary }, children: texts.categoryHeader }),
+      sortingEnabled && /* @__PURE__ */ jsx(
+        Box,
+        {
+          onClick: () => onToggleSort("label"),
+          sx: { display: "flex", alignItems: "center", cursor: "pointer", p: theme.spacing(0.5) },
+          children: /* @__PURE__ */ jsx(
+            FoodsIcon,
+            {
+              size: 2,
+              icon: sortingState.column === "label" ? sortingState.direction === "asc" ? "sortAscending" : "sortDescending" : "sortNoSorting"
+            }
+          )
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs(
+      TableCell,
+      {
+        sx: {
+          ...headerCellSx,
+          width: `${rightColWidth}px`,
+          minWidth: `${rightColWidth}px`,
+          maxWidth: `${rightColWidth}px`,
+          position: "relative"
+        },
+        align: "right",
+        children: [
+          headerRight ?? /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "flex-end", spacing: 1, children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 500, color: theme.palette.text.primary }, children: texts.scoreHeader }),
+            sortingEnabled && /* @__PURE__ */ jsx(
+              Box,
+              {
+                onClick: () => onToggleSort("value"),
+                sx: { display: "flex", alignItems: "center", cursor: "pointer", p: theme.spacing(0.5) },
+                children: /* @__PURE__ */ jsx(
+                  FoodsIcon,
+                  {
+                    size: 2,
+                    icon: sortingState.column === "value" ? sortingState.direction === "asc" ? "sortAscending" : "sortDescending" : "sortNoSorting"
+                  }
+                )
+              }
+            )
+          ] }),
+          resizable && /* @__PURE__ */ jsx(
+            Box,
+            {
+              onMouseDown: onMouseDownResizer,
+              sx: { position: "absolute", left: -4, top: 0, bottom: 0, width: 8, cursor: "col-resize" }
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+export {
+  BreakdownTableHeader
+};

package/dist/components/Chart/BreakdownTable/BreakdownTableRow.d.ts

@@ -0,0 +1,16 @@
+import { Theme } from '@mui/material';
+import { SystemStyleObject } from '@mui/system';
+import { BreakdownNode } from './BreakdownTable';
+import { Dispatch, SetStateAction } from 'react';
+export type BreakdownTableRowProps = {
+    node: BreakdownNode;
+    level: number;
+    path: string;
+    valuesFormatterFn: (value: number, precision?: number) => string;
+    valuesUnit?: string;
+    expanded: Record<string, boolean>;
+    setExpanded: Dispatch<SetStateAction<Record<string, boolean>>>;
+    getRowCellSx: (level: number) => SystemStyleObject<Theme>;
+    indentForLevel: (level: number) => string | undefined;
+};
+export declare const BreakdownTableRow: (props: BreakdownTableRowProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Chart/BreakdownTable/BreakdownTableRow.js

@@ -0,0 +1,90 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useTheme, TableRow, TableCell, Stack, Box, Typography } from "@mui/material";
+import { FoodsIcon } from "../../Icons/FoodsIcon.js";
+const BreakdownTableRow = (props) => {
+  var _a;
+  const theme = useTheme();
+  const { node, level, path, valuesFormatterFn, valuesUnit, expanded, setExpanded, getRowCellSx, indentForLevel } = props;
+  const isExpanded = expanded[path] === true;
+  const hasChildren = !!((_a = node.children) == null ? void 0 : _a.length);
+  const borderBottomStyle = level === 0 && !isExpanded ? `1px solid ${theme.palette.divider}` : "none";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(
+        TableCell,
+        {
+          sx: {
+            ...getRowCellSx(level),
+            borderBottom: borderBottomStyle,
+            borderRight: `1px solid ${theme.palette.divider}`,
+            pl: indentForLevel(level)
+          },
+          children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1.5, alignItems: "center", children: [
+            hasChildren ? /* @__PURE__ */ jsx(
+              Box,
+              {
+                component: "button",
+                "aria-label": isExpanded ? "collapse" : "expand",
+                onClick: () => setExpanded((e) => ({ ...e, [path]: !isExpanded })),
+                sx: {
+                  width: theme.spacing(3),
+                  height: theme.spacing(3),
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  borderRadius: theme.spacing(3.75),
+                  border: `1px solid ${theme.palette.grey[300]}`,
+                  backgroundColor: theme.palette.background.paper,
+                  cursor: "pointer",
+                  padding: 0,
+                  outline: "none",
+                  borderColor: theme.palette.grey[300],
+                  "&:focus-visible": {
+                    boxShadow: `0 0 0 2px ${theme.palette.primary.light}`
+                  }
+                },
+                children: /* @__PURE__ */ jsx(FoodsIcon, { size: 2, icon: isExpanded ? "arrowUpShort" : "arrowRightShort" })
+              }
+            ) : /* @__PURE__ */ jsx(Fragment, {}),
+            /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 700, color: theme.palette.text.primary }, children: node.label })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(TableCell, { sx: { ...getRowCellSx(level), borderBottom: borderBottomStyle }, align: "right", children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", justifyContent: "flex-end", children: [
+        /* @__PURE__ */ jsx(Typography, { sx: { fontWeight: 700 }, children: valuesFormatterFn(node.value) }),
+        valuesUnit && /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: theme.palette.text.secondary }, children: valuesUnit })
+      ] }) })
+    ] }, `row-${path}`),
+    hasChildren && isExpanded && node.children.map((child) => /* @__PURE__ */ jsx(
+      BreakdownTableRow,
+      {
+        node: child,
+        level: level + 1,
+        path: `${path} > ${child.label}`,
+        valuesFormatterFn,
+        valuesUnit,
+        expanded,
+        setExpanded,
+        getRowCellSx,
+        indentForLevel
+      },
+      `row-${path} > ${child.label}`
+    )),
+    level === 0 && hasChildren && isExpanded && /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(
+        TableCell,
+        {
+          sx: {
+            padding: 0,
+            borderBottom: `1px solid ${theme.palette.divider}`,
+            borderRight: `1px solid ${theme.palette.divider}`
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(TableCell, { sx: { padding: 0, borderBottom: `1px solid ${theme.palette.divider}` } })
+    ] }, `separator-${path}`)
+  ] });
+};
+export {
+  BreakdownTableRow
+};

package/dist/components/Chart/BreakdownTable/BreakdownTableSkeleton.d.ts

@@ -0,0 +1,3 @@
+export declare const BreakdownTableSkeleton: ({ rows }: {
+    rows: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Chart/BreakdownTable/BreakdownTableSkeleton.js

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme, Box, TableContainer, Table, TableBody, TableRow, TableCell, Skeleton, Stack } from "@mui/material";
+const BreakdownTableSkeleton = ({ rows }) => {
+  const theme = useTheme();
+  const headerCellSx = {
+    backgroundColor: theme.palette.grey[200],
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    py: theme.spacing(3),
+    px: theme.spacing(3),
+    color: theme.palette.text.primary
+  };
+  const getRowCellSx = {
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    padding: theme.spacing(2, 3)
+  };
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      position: "relative",
+      width: "100%",
+      sx: {
+        border: `1px solid ${theme.palette.divider}`,
+        borderRadius: theme.shape.borderRadius,
+        backgroundColor: theme.palette.background.paper
+      },
+      children: /* @__PURE__ */ jsx(TableContainer, { sx: { borderRadius: theme.shape.borderRadius }, children: /* @__PURE__ */ jsx(Table, { children: /* @__PURE__ */ jsxs(TableBody, { children: [
+        /* @__PURE__ */ jsxs(TableRow, { children: [
+          /* @__PURE__ */ jsx(
+            TableCell,
+            {
+              sx: { ...headerCellSx, borderRight: `1px solid ${theme.palette.divider}` },
+              width: "auto",
+              children: /* @__PURE__ */ jsx(Skeleton, { width: 120, height: 18 })
+            }
+          ),
+          /* @__PURE__ */ jsx(TableCell, { sx: { ...headerCellSx, width: theme.spacing(25) }, align: "right", children: /* @__PURE__ */ jsx(Skeleton, { width: 80, height: 18, sx: { ml: "auto" } }) })
+        ] }),
+        Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxs(TableRow, { children: [
+          /* @__PURE__ */ jsx(TableCell, { sx: { ...getRowCellSx, borderRight: `1px solid ${theme.palette.divider}` }, children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", children: [
+            /* @__PURE__ */ jsx(
+              Skeleton,
+              {
+                variant: "circular",
+                width: theme.spacing(3),
+                height: theme.spacing(3)
+              }
+            ),
+            /* @__PURE__ */ jsx(Skeleton, { width: "60%", height: 18 })
+          ] }) }),
+          /* @__PURE__ */ jsx(TableCell, { sx: getRowCellSx, align: "right", children: /* @__PURE__ */ jsx(Skeleton, { width: 100, height: 18, sx: { ml: "auto" } }) })
+        ] }, `breakdown-table-skeleton-${i}`))
+      ] }) }) })
+    }
+  );
+};
+export {
+  BreakdownTableSkeleton
+};

package/dist/components/Chart/BreakdownTable/useBreakdownSorting.d.ts

@@ -0,0 +1,19 @@
+import { BreakdownNode } from './BreakdownTable';
+export type SortingState = {
+    column: "label" | "value" | null;
+    direction: "asc" | "desc";
+};
+type Params = {
+    groups: BreakdownNode[];
+    sorting?: SortingState;
+    enableSorting?: boolean;
+    manualSort?: boolean;
+    onSortingChange?: (s: SortingState) => void;
+};
+export declare const useBreakdownSorting: ({ groups, sorting, enableSorting, manualSort, onSortingChange, }: Params) => {
+    readonly sortingState: SortingState;
+    readonly sortingEnabled: boolean;
+    readonly groupsToRender: BreakdownNode[];
+    readonly toggleSort: (column: "label" | "value") => void;
+};
+export {};

package/dist/components/Chart/BreakdownTable/useBreakdownSorting.js

@@ -0,0 +1,40 @@
+import { useState, useMemo } from "react";
+const useBreakdownSorting = ({
+  groups,
+  sorting,
+  enableSorting = true,
+  manualSort = false,
+  onSortingChange
+}) => {
+  const [internalSorting, setInternalSorting] = useState({ column: null, direction: "asc" });
+  const sortingState = sorting ?? internalSorting;
+  const sortingEnabled = enableSorting;
+  const setSorting = (s) => {
+    onSortingChange == null ? void 0 : onSortingChange(s);
+    setInternalSorting(s);
+  };
+  const toggleSort = (column) => {
+    if (sortingEnabled) {
+      const next = sortingState.column !== column ? { column, direction: "asc" } : { column, direction: sortingState.direction === "asc" ? "desc" : "asc" };
+      setSorting(next);
+    }
+  };
+  const sortNodes = (nodes) => {
+    if (sortingState.column) {
+      const arr = [...nodes].sort((a, b) => {
+        if (sortingState.column === "label") return a.label.localeCompare(b.label);
+        return (a.value || 0) - (b.value || 0);
+      });
+      if (sortingState.direction === "desc") arr.reverse();
+      return arr.map((n) => ({ ...n, children: n.children ? sortNodes(n.children) : void 0 }));
+    }
+    return nodes;
+  };
+  const groupsToRender = useMemo(() => {
+    return !manualSort && sortingState.column ? sortNodes(groups) : groups;
+  }, [groups, manualSort, sortingState]);
+  return { sortingState, sortingEnabled, groupsToRender, toggleSort };
+};
+export {
+  useBreakdownSorting
+};

package/dist/components/Chart/BreakdownTable/useResizableRightColumn.d.ts

@@ -0,0 +1,10 @@
+export type ResizableParams = {
+    resizable?: boolean;
+    initialRightColWidth?: number;
+    minRightColWidth?: number;
+    maxRightColWidth?: number;
+};
+export declare const useResizableRightColumn: ({ resizable, initialRightColWidth, minRightColWidth, maxRightColWidth, }: ResizableParams) => {
+    readonly rightColWidth: number;
+    readonly onMouseDownResizer: (e: React.MouseEvent) => void;
+};

package/dist/components/Chart/BreakdownTable/useResizableRightColumn.js

@@ -0,0 +1,42 @@
+import { useState, useRef } from "react";
+import { useTheme } from "@mui/material";
+const useResizableRightColumn = ({
+  resizable = true,
+  initialRightColWidth,
+  minRightColWidth,
+  maxRightColWidth
+}) => {
+  const theme = useTheme();
+  const defaultRightWidth = Number.parseInt(String(theme.spacing(25)).replace("px", "")) || 200;
+  const minW = minRightColWidth ?? 200;
+  const maxW = maxRightColWidth ?? 460;
+  const [rightColWidth, setRightColWidth] = useState(initialRightColWidth ?? defaultRightWidth);
+  const isResizing = useRef(false);
+  const startX = useRef(0);
+  const startWidth = useRef(0);
+  const onMouseDownResizer = (e) => {
+    if (!resizable) return;
+    isResizing.current = true;
+    startX.current = e.clientX;
+    startWidth.current = rightColWidth;
+    const handleMove = (ev) => {
+      if (!isResizing.current) return;
+      const dx = ev.clientX - startX.current;
+      const next = Math.max(minW, Math.min(maxW, startWidth.current - dx));
+      setRightColWidth(next);
+    };
+    const handleUp = () => {
+      if (!isResizing.current) return;
+      isResizing.current = false;
+      document.removeEventListener("mousemove", handleMove);
+      document.removeEventListener("mouseup", handleUp);
+    };
+    document.addEventListener("mousemove", handleMove);
+    document.addEventListener("mouseup", handleUp);
+    e.preventDefault();
+  };
+  return { rightColWidth, onMouseDownResizer };
+};
+export {
+  useResizableRightColumn
+};

package/dist/components/Chart/PolymorphicChart/charts/PolymorphicCumulativeChart.js

@@ -233,6 +233,7 @@ const PolymorphicCumulativeChart = (props) => {
                             placement: "top",
                             popperZIndex: 2e3,
                             width: "unset",
+                            sx: { maxWidth: "300px" },
                             children: /* @__PURE__ */ jsx(
                               Box,
                               {

package/dist/components/Chart/index.d.ts

@@ -6,3 +6,4 @@ export * from './HorizontalGauge/HorizontalGaugeChart';
 export * from './TrajectoryChart/TrajectoryChart';
 export * from './HistogramComparisonChart';
 export * from './PolymorphicChart';
+export * from './BreakdownTable/BreakdownTable';

package/dist/components/Icons/FoodsIcon.d.ts

@@ -1,9 +1,10 @@
 import { WidthHeight, iconMapping } from './iconConfig';
 export type IconMapping = typeof iconMapping;
+export type IconMappingProps = keyof IconMapping | (string & {}) | undefined;
 type Size = WidthHeight | number;
 export type FoodsIconProps = {
     size: Size;
-    icon: keyof IconMapping | (string & {}) | undefined;
+    icon: IconMappingProps;
     placeholder?: "empty" | "blank" | "defaultIcon";
     backgroundColor?: string;
     color?: string;

package/dist/components/Tabs/FoodsTabs/FoodsTabTemplate.d.ts

@@ -0,0 +1,9 @@
+import { TabProps, TypographyProps, Theme } from '@mui/material';
+import { TabVariants } from './FoodsTabs';
+import { StyledComponent } from '@emotion/styled';
+import { MUIStyledCommonProps } from '@mui/system';
+export declare const SpecialTab: StyledComponent<Omit<TabProps, "icon"> & {
+    variant: TabVariants;
+    isSelected: boolean;
+    textVariant: TypographyProps["variant"];
+} & MUIStyledCommonProps<Theme>, {}, {}>;

package/dist/components/Tabs/FoodsTabs/FoodsTabs.d.ts

@@ -0,0 +1,35 @@
+import { BoxProps, TabProps, TabsProps, TypographyProps, TabsOwnProps, Theme } from '@mui/material';
+import { ReactNode, DetailedHTMLProps, HTMLAttributes, DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES, RefObject } from 'react';
+import { IconMappingProps } from '../../Icons';
+import { StyledComponent } from '@emotion/styled';
+import { CommonProps } from '@mui/material/OverridableComponent';
+import { MUIStyledCommonProps } from '@mui/system';
+export type TabVariants = "primary" | "secondary" | "buttons";
+export type FoodsTabTemplateOption = {
+    name: ReactNode;
+    icon?: IconMappingProps;
+    disabled?: boolean;
+    TabProps?: TabProps;
+};
+export type FoodsTabsProps = {
+    tabs: FoodsTabTemplateOption[];
+    tabVariant: TabVariants;
+    textVariant?: TypographyProps["variant"];
+    selectedTabIndex?: number;
+    /**
+     * Force scrollable behavior even on desktop.
+     * If not provided, scrollable will be automatically enabled on mobile devices.
+     */
+    forceScrollable?: boolean;
+    BoxProps?: BoxProps;
+    TabsProps?: TabsProps;
+    TabProps?: TabProps;
+};
+export declare const FoodsTabs: (props: FoodsTabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SpecialTabs: StyledComponent< TabsOwnProps & CommonProps & Omit<Omit< DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | RefObject<HTMLDivElement> | null | undefined;
+}, "className" | "classes" | "style" | "children" | "aria-label" | "aria-labelledby" | "onChange" | "sx" | "slots" | "slotProps" | "variant" | "orientation" | "value" | "action" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & {
+    component?: React.ElementType;
+} & {
+    tabVariant: TabVariants;
+} & MUIStyledCommonProps<Theme>, {}, {}>;

package/dist/main.js

@@ -43,6 +43,7 @@ import { CustomizedAxisTick } from "./components/Chart/HistogramComparisonChart/
 import { HistogramComparisonChart } from "./components/Chart/HistogramComparisonChart/HistogramComparisonChart.js";
 import { PolymorphicChart } from "./components/Chart/PolymorphicChart/PolymorphicChart.js";
 import { PolymorphicChartRenderer } from "./components/Chart/PolymorphicChart/PolymorphicChartRenderer.js";
+import { BreakdownTable } from "./components/Chart/BreakdownTable/BreakdownTable.js";
 import { PrimaryCheckbox } from "./components/Checkbox/PrimaryCheckbox.js";
 import { anyToCheckbox, checkboxToAny } from "./components/Checkbox/helperFunctions.js";
 import { FoodsCheckbox } from "./components/Checkbox/FoodsCheckbox.js";
@@ -142,6 +143,8 @@ import { BredTheme, BredThemeOptions } from "./themes/themes/BredTheme.js";
 import { CollectiveTheme, CollectiveThemeOptions } from "./themes/themes/CollectiveTheme.js";
 import { FoodPilotTheme, FoodpilotThemeOptions } from "./themes/themes/FoodPilotTheme.js";
 import { WinePilotTheme, WinepilotThemeOptions } from "./themes/themes/WinePilotTheme.js";
+import { useResponsivePadding } from "./themes/responsive/useResponsivePadding.js";
+import { useResponsiveBreakpoints } from "./themes/responsive/useResponsiveBreakpoints.js";
 import { FoodsThemeOptionsProvider, FoodsThemeProvider } from "./themes/FoodsThemeProvider.js";
 export {
   AccordionProduct,
@@ -157,6 +160,7 @@ export {
   BlockListContainer,
   BottomSheetDialog,
   BoxStyled,
+  BreakdownTable,
   BredTheme,
   BredThemeOptions,
   Button,
@@ -322,5 +326,7 @@ export {
   themes,
   typographyConfig,
   useFormBaseContext,
+  useResponsiveBreakpoints,
+  useResponsivePadding,
   yellowTheme
 };

package/dist/themes/index.d.ts

@@ -11,3 +11,4 @@ export declare const getThemeLogo: (theme: string) => React.FunctionComponent<Re
 export { FoodsThemeProvider, FoodsThemeOptionsProvider };
 export * from './common';
 export * from './themes';
+export * from './responsive';

package/dist/themes/responsive/index.d.ts

@@ -0,0 +1,2 @@
+export { useResponsivePadding } from './useResponsivePadding';
+export { useResponsiveBreakpoints } from './useResponsiveBreakpoints';

package/dist/themes/responsive/useResponsiveBreakpoints.d.ts

@@ -0,0 +1,6 @@
+export declare const useResponsiveBreakpoints: () => {
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+    isUltrawide: boolean;
+};

package/dist/themes/responsive/useResponsiveBreakpoints.js

@@ -0,0 +1,18 @@
+import { useTheme } from "@mui/material/styles";
+import { useMediaQuery } from "@mui/material";
+const useResponsiveBreakpoints = () => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+  const isTablet = useMediaQuery(theme.breakpoints.between("md", "lg"));
+  const isDesktop = useMediaQuery(theme.breakpoints.between("lg", "xl"));
+  const isUltrawide = useMediaQuery(theme.breakpoints.up("xl"));
+  return {
+    isMobile,
+    isTablet,
+    isDesktop,
+    isUltrawide
+  };
+};
+export {
+  useResponsiveBreakpoints
+};

package/dist/themes/responsive/useResponsivePadding.d.ts

@@ -0,0 +1 @@
+export declare const useResponsivePadding: () => "0.5rem" | "2rem" | "1.5rem" | "2.5rem";

package/dist/themes/responsive/useResponsivePadding.js

@@ -0,0 +1,12 @@
+import { useResponsiveBreakpoints } from "./useResponsiveBreakpoints.js";
+const useResponsivePadding = () => {
+  const { isMobile, isTablet, isDesktop, isUltrawide } = useResponsiveBreakpoints();
+  if (isMobile) return "0.5rem";
+  if (isTablet) return "1.5rem";
+  if (isDesktop) return "2rem";
+  if (isUltrawide) return "2.5rem";
+  return "2rem";
+};
+export {
+  useResponsivePadding
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@foodpilot/foods",
   "private": false,
-  "version": "2.8.0",
+  "version": "2.10.0",
   "type": "module",
   "main": "./dist/main.js",
   "module": "./dist/main.js",