@cere/cere-design-system 0.0.21 → 0.0.22

package/dist/index.mjs

@@ -7353,8 +7353,307 @@ var MetricsChart = ({ history = [] }) => {
   ] });
 };
 
+// src/components/charts/TimeSeriesGraph/TimeSeriesGraph.tsx
+import { useCallback as useCallback6, useMemo as useMemo2, useState as useState10 } from "react";
+import {
+  Box as Box24,
+  Card as Card3,
+  CardHeader as CardHeader3,
+  CardMedia as CardMedia2,
+  CircularProgress as CircularProgress7,
+  Divider as Divider8,
+  Stack as Stack7,
+  Typography as Typography21,
+  styled as styled45,
+  useTheme as useTheme5
+} from "@mui/material";
+import { LineChart as LineChart3 } from "@mui/x-charts";
+import { format as format3 } from "date-fns";
+
+// src/components/charts/TimeSeriesGraph/TimeRangeSelect.tsx
+import { MenuItem as MenuItem4, TextField as TextField5 } from "@mui/material";
+import { jsx as jsx87 } from "react/jsx-runtime";
+var TimeRangeSelect = ({ options: options2, value, onChange }) => /* @__PURE__ */ jsx87(
+  TextField5,
+  {
+    select: true,
+    size: "small",
+    value: value ?? (options2.length > 0 ? options2[0].value : ""),
+    onChange: (e) => onChange?.(e.target.value),
+    "aria-label": "Time range selector",
+    sx: { minWidth: 120 },
+    children: options2.map((option) => /* @__PURE__ */ jsx87(MenuItem4, { value: option.value, children: option.label }, option.value))
+  }
+);
+
+// src/components/charts/TimeSeriesGraph/SummaryStats.tsx
+import { Stack as Stack6, Typography as Typography20 } from "@mui/material";
+import { jsx as jsx88, jsxs as jsxs40 } from "react/jsx-runtime";
+var formatSummaryValue = (value, unit) => {
+  const displayValue = typeof value === "number" ? value.toLocaleString() : value;
+  return unit ? `${displayValue} ${unit}` : displayValue;
+};
+var SummaryStats = ({ items }) => {
+  if (items.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx88(
+    Stack6,
+    {
+      direction: "row",
+      spacing: 3,
+      padding: 2,
+      flexWrap: "wrap",
+      useFlexGap: true,
+      role: "list",
+      "aria-label": "Summary statistics",
+      children: items.map((item) => /* @__PURE__ */ jsxs40(
+        Stack6,
+        {
+          direction: "row",
+          alignItems: "center",
+          spacing: 1,
+          role: "listitem",
+          children: [
+            /* @__PURE__ */ jsx88(Typography20, { variant: "body2", color: "text.secondary", children: item.label }),
+            /* @__PURE__ */ jsx88(Typography20, { variant: "h5", fontWeight: 600, children: formatSummaryValue(item.value, item.unit) })
+          ]
+        },
+        item.label
+      ))
+    }
+  );
+};
+
+// src/components/charts/TimeSeriesGraph/TimeSeriesGraph.tsx
+import { Fragment as Fragment13, jsx as jsx89, jsxs as jsxs41 } from "react/jsx-runtime";
+var ChartContainer = styled45(Box24)({
+  position: "relative",
+  height: 320
+});
+var LoadingOverlay = styled45(Box24)(({ theme: theme2 }) => ({
+  position: "absolute",
+  inset: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "rgba(255, 255, 255, 0.7)",
+  zIndex: 1,
+  borderRadius: theme2.shape.borderRadius
+}));
+var LegendDot = styled45(Box24, {
+  shouldForwardProp: (prop) => prop !== "dotColor"
+})(({ dotColor }) => ({
+  width: 14,
+  height: 14,
+  borderRadius: 4,
+  backgroundColor: dotColor,
+  flexShrink: 0
+}));
+var formatYAxisValue = (value) => {
+  const absValue = Math.abs(value);
+  if (absValue >= 1e9) {
+    return `${(value / 1e9).toFixed(absValue % 1e9 === 0 ? 0 : 1)}B`;
+  }
+  if (absValue >= 1e6) {
+    return `${(value / 1e6).toFixed(absValue % 1e6 === 0 ? 0 : 1)}M`;
+  }
+  if (absValue >= 1e3) {
+    return `${(value / 1e3).toFixed(absValue % 1e3 === 0 ? 0 : 1)}K`;
+  }
+  return String(value);
+};
+var buildDataset = (series, hiddenSeries) => {
+  const timestampMap = /* @__PURE__ */ new Map();
+  series.forEach((s) => {
+    if (hiddenSeries.has(s.name)) return;
+    s.data.forEach((dp) => {
+      const ts = dp.timestamp.getTime();
+      if (!timestampMap.has(ts)) {
+        timestampMap.set(ts, { timestamp: dp.timestamp });
+      }
+      timestampMap.get(ts)[s.name] = dp.value;
+    });
+  });
+  return Array.from(timestampMap.values()).sort(
+    (a, b) => a.timestamp.getTime() - b.timestamp.getTime()
+  );
+};
+var TimeSeriesGraph = ({
+  title,
+  series,
+  timeRangeOptions,
+  selectedTimeRange,
+  onTimeRangeChange,
+  summaryItems,
+  showSummary = true,
+  headerAction,
+  loading = false
+}) => {
+  const theme2 = useTheme5();
+  const [hiddenSeries, setHiddenSeries] = useState10(/* @__PURE__ */ new Set());
+  const dataset = useMemo2(() => buildDataset(series, hiddenSeries), [series, hiddenSeries]);
+  const visibleSeries = useMemo2(
+    () => series.filter((s) => !hiddenSeries.has(s.name)),
+    [series, hiddenSeries]
+  );
+  const chartColors = useMemo2(() => visibleSeries.map((s) => s.color), [visibleSeries]);
+  const handleLegendToggle = useCallback6((seriesName) => {
+    setHiddenSeries((prev) => {
+      const next = new Set(prev);
+      if (next.has(seriesName)) {
+        next.delete(seriesName);
+      } else {
+        next.add(seriesName);
+      }
+      return next;
+    });
+  }, []);
+  const timeBounds = useMemo2(() => {
+    if (dataset.length === 0) return { min: void 0, max: void 0 };
+    const timestamps = dataset.map((row) => row.timestamp.getTime());
+    return {
+      min: new Date(Math.min(...timestamps)),
+      max: new Date(Math.max(...timestamps))
+    };
+  }, [dataset]);
+  const hasData = dataset.length > 0;
+  const shouldShowSummary = showSummary && summaryItems && summaryItems.length > 0;
+  const headerActionElement = /* @__PURE__ */ jsxs41(Stack7, { direction: "row", spacing: 1, alignItems: "center", children: [
+    headerAction,
+    timeRangeOptions && timeRangeOptions.length > 0 && /* @__PURE__ */ jsx89(
+      TimeRangeSelect,
+      {
+        options: timeRangeOptions,
+        value: selectedTimeRange,
+        onChange: onTimeRangeChange
+      }
+    )
+  ] });
+  const showHeader = !!title || !!headerAction || timeRangeOptions && timeRangeOptions.length > 0;
+  return /* @__PURE__ */ jsxs41(
+    Card3,
+    {
+      "aria-label": title ? `Line chart showing ${title}` : "Line chart",
+      role: "figure",
+      children: [
+        showHeader && /* @__PURE__ */ jsx89(
+          CardHeader3,
+          {
+            title,
+            titleTypographyProps: {
+              variant: "subtitle1",
+              fontWeight: 500
+            },
+            action: headerActionElement
+          }
+        ),
+        /* @__PURE__ */ jsxs41(CardMedia2, { children: [
+          /* @__PURE__ */ jsxs41(ChartContainer, { children: [
+            loading && /* @__PURE__ */ jsx89(LoadingOverlay, { role: "status", "aria-label": "Loading chart data", children: /* @__PURE__ */ jsx89(CircularProgress7, { size: 40 }) }),
+            /* @__PURE__ */ jsx89(
+              LineChart3,
+              {
+                dataset,
+                axisHighlight: { x: "line", y: "none" },
+                grid: { horizontal: true, vertical: false },
+                margin: { top: 10, right: 20, bottom: 40, left: 50 },
+                colors: chartColors.length > 0 ? chartColors : [theme2.palette.primary.main],
+                slots: {
+                  noDataOverlay: () => null
+                },
+                tooltip: { trigger: hasData ? "axis" : "none" },
+                yAxis: [
+                  {
+                    disableLine: true,
+                    disableTicks: true,
+                    min: hasData ? void 0 : 0,
+                    max: hasData ? void 0 : 100,
+                    tickNumber: hasData ? void 0 : 5,
+                    valueFormatter: (value) => formatYAxisValue(value || 0),
+                    tickLabelStyle: {
+                      fontSize: 10
+                    }
+                  }
+                ],
+                xAxis: [
+                  {
+                    dataKey: "timestamp",
+                    scaleType: "time",
+                    min: timeBounds.min,
+                    max: timeBounds.max,
+                    disableLine: true,
+                    disableTicks: true,
+                    valueFormatter: (date) => format3(date, "do MMM"),
+                    tickLabelStyle: {
+                      fontSize: 10
+                    }
+                  }
+                ],
+                series: visibleSeries.map((s) => ({
+                  curve: "linear",
+                  dataKey: s.name,
+                  label: s.name,
+                  showMark: false,
+                  connectNulls: false
+                })),
+                slotProps: {
+                  legend: { hidden: true }
+                }
+              }
+            )
+          ] }),
+          series.length > 0 && /* @__PURE__ */ jsx89(
+            Stack7,
+            {
+              direction: "row",
+              spacing: 2,
+              justifyContent: "center",
+              paddingY: 1,
+              flexWrap: "wrap",
+              useFlexGap: true,
+              role: "list",
+              "aria-label": "Chart legend",
+              children: series.map((s) => {
+                const isHidden = hiddenSeries.has(s.name);
+                return /* @__PURE__ */ jsxs41(
+                  Stack7,
+                  {
+                    direction: "row",
+                    spacing: 1,
+                    alignItems: "center",
+                    role: "listitem",
+                    onClick: () => handleLegendToggle(s.name),
+                    sx: {
+                      cursor: "pointer",
+                      opacity: isHidden ? 0.4 : 1,
+                      transition: "opacity 0.2s ease",
+                      userSelect: "none"
+                    },
+                    "aria-pressed": !isHidden,
+                    "aria-label": `Toggle ${s.name} visibility`,
+                    children: [
+                      /* @__PURE__ */ jsx89(LegendDot, { dotColor: s.color }),
+                      /* @__PURE__ */ jsx89(Typography21, { variant: "body2", children: s.name })
+                    ]
+                  },
+                  s.name
+                );
+              })
+            }
+          )
+        ] }),
+        shouldShowSummary && /* @__PURE__ */ jsxs41(Fragment13, { children: [
+          /* @__PURE__ */ jsx89(Divider8, {}),
+          /* @__PURE__ */ jsx89(SummaryStats, { items: summaryItems })
+        ] })
+      ]
+    }
+  );
+};
+
 // src/components/third-party/FlowEditor.tsx
-import { useCallback as useCallback6 } from "react";
+import { useCallback as useCallback7 } from "react";
 import ReactFlow, {
   Background,
   Controls,
@@ -7363,10 +7662,10 @@ import ReactFlow, {
   BackgroundVariant,
   ConnectionLineType
 } from "reactflow";
-import { Box as Box24 } from "@mui/material";
-import { useTheme as useTheme5 } from "@mui/material/styles";
+import { Box as Box25 } from "@mui/material";
+import { useTheme as useTheme6 } from "@mui/material/styles";
 import { Background as Background2, Controls as Controls2, MiniMap as MiniMap2, Panel, BackgroundVariant as BackgroundVariant2, ConnectionLineType as ConnectionLineType2 } from "reactflow";
-import { jsx as jsx87, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx90, jsxs as jsxs42 } from "react/jsx-runtime";
 var FlowEditor = ({
   nodes,
   edges,
@@ -7383,8 +7682,8 @@ var FlowEditor = ({
   onInit,
   ...reactFlowProps
 }) => {
-  const theme2 = useTheme5();
-  const handleInit = useCallback6(
+  const theme2 = useTheme6();
+  const handleInit = useCallback7(
     (instance) => {
       if (onInit) {
         onInit(instance);
@@ -7392,8 +7691,8 @@ var FlowEditor = ({
     },
     [onInit]
   );
-  return /* @__PURE__ */ jsx87(ReactFlowProvider, { children: /* @__PURE__ */ jsx87(
-    Box24,
+  return /* @__PURE__ */ jsx90(ReactFlowProvider, { children: /* @__PURE__ */ jsx90(
+    Box25,
     {
       sx: {
         width: "100%",
@@ -7405,7 +7704,7 @@ var FlowEditor = ({
         ...containerProps?.sx
       },
       ...containerProps,
-      children: /* @__PURE__ */ jsxs40(
+      children: /* @__PURE__ */ jsxs42(
         ReactFlow,
         {
           nodes,
@@ -7427,7 +7726,7 @@ var FlowEditor = ({
           },
           ...reactFlowProps,
           children: [
-            showBackground && /* @__PURE__ */ jsx87(
+            showBackground && /* @__PURE__ */ jsx90(
               Background,
               {
                 variant: backgroundVariant,
@@ -7436,8 +7735,8 @@ var FlowEditor = ({
                 color: theme2.palette.divider
               }
             ),
-            showControls && /* @__PURE__ */ jsx87(Controls, {}),
-            showMinimap && /* @__PURE__ */ jsx87(
+            showControls && /* @__PURE__ */ jsx90(Controls, {}),
+            showMinimap && /* @__PURE__ */ jsx90(
               MiniMap,
               {
                 nodeColor: (node) => {
@@ -7460,15 +7759,15 @@ var FlowEditor = ({
 };
 
 // src/components/third-party/CodeEditor.tsx
-import { useCallback as useCallback7, useEffect as useEffect2, useState as useState10, useRef as useRef2 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect2, useState as useState11, useRef as useRef2 } from "react";
 import Editor from "@monaco-editor/react";
-import { Box as Box25, IconButton as IconButton11, Tooltip as Tooltip7 } from "@mui/material";
+import { Box as Box26, IconButton as IconButton11, Tooltip as Tooltip7 } from "@mui/material";
 import FullscreenIcon from "@mui/icons-material/Fullscreen";
 import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import ExpandMoreIcon3 from "@mui/icons-material/ExpandMore";
 import ExpandLessIcon from "@mui/icons-material/ExpandLess";
-import { jsx as jsx88, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx91, jsxs as jsxs43 } from "react/jsx-runtime";
 var configureTypeScript = (monaco) => {
   monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
     target: monaco.languages.typescript.ScriptTarget.ES2020,
@@ -7512,15 +7811,15 @@ var CodeEditor = ({
   containerProps,
   typeDefinitions
 }) => {
-  const [isEditorReady, setIsEditorReady] = useState10(false);
-  const [validationErrors, setValidationErrors] = useState10([]);
-  const [isFullscreen, setIsFullscreen] = useState10(false);
-  const [tsCode, setTsCode] = useState10(value);
-  const [actualHeight, setActualHeight] = useState10(
+  const [isEditorReady, setIsEditorReady] = useState11(false);
+  const [validationErrors, setValidationErrors] = useState11([]);
+  const [isFullscreen, setIsFullscreen] = useState11(false);
+  const [tsCode, setTsCode] = useState11(value);
+  const [actualHeight, setActualHeight] = useState11(
     typeof height === "number" ? `${height}px` : height
   );
-  const [showProblems, setShowProblems] = useState10(false);
-  const [hasUserToggledProblems, setHasUserToggledProblems] = useState10(false);
+  const [showProblems, setShowProblems] = useState11(false);
+  const [hasUserToggledProblems, setHasUserToggledProblems] = useState11(false);
   useEffect2(() => {
     if (hasUserToggledProblems) return;
     if (validationErrors.length > 0) {
@@ -7540,14 +7839,14 @@ var CodeEditor = ({
       setActualHeight(typeof height === "number" ? `${height}px` : height);
     }
   }, [height, isFullscreen]);
-  const toggleFullscreen = useCallback7(() => {
+  const toggleFullscreen = useCallback8(() => {
     const newFullscreenState = !isFullscreen;
     setIsFullscreen(newFullscreenState);
     if (onFullscreenChange) {
       onFullscreenChange(newFullscreenState);
     }
   }, [isFullscreen, onFullscreenChange]);
-  const gotoMarker = useCallback7(
+  const gotoMarker = useCallback8(
     (marker) => {
       const ed = finalEditorRef?.current;
       if (!ed) return;
@@ -7579,7 +7878,7 @@ var CodeEditor = ({
       window.removeEventListener("keydown", escapeHandler, { capture: true });
     };
   }, [isFullscreen, onFullscreenChange]);
-  const handleEditorDidMount = useCallback7(
+  const handleEditorDidMount = useCallback8(
     (editor, monaco) => {
       console.log("CodeEditor: onMount called", { editor: !!editor, monaco: !!monaco });
       try {
@@ -7680,8 +7979,8 @@ var CodeEditor = ({
     theme: themeProp || "vs",
     ...options2
   };
-  return /* @__PURE__ */ jsx88(
-    Box25,
+  return /* @__PURE__ */ jsx91(
+    Box26,
     {
       sx: {
         display: "flex",
@@ -7701,8 +8000,8 @@ var CodeEditor = ({
         pb: isFullscreen ? 2 : 0,
         overflow: isFullscreen ? "hidden" : "visible"
       },
-      children: /* @__PURE__ */ jsxs41(
-        Box25,
+      children: /* @__PURE__ */ jsxs43(
+        Box26,
         {
           sx: {
             flex: 1,
@@ -7717,7 +8016,7 @@ var CodeEditor = ({
           },
           ...containerProps,
           children: [
-            /* @__PURE__ */ jsx88(Tooltip7, { title: isFullscreen ? "Exit Fullscreen" : "Fullscreen", children: /* @__PURE__ */ jsx88(
+            /* @__PURE__ */ jsx91(Tooltip7, { title: isFullscreen ? "Exit Fullscreen" : "Fullscreen", children: /* @__PURE__ */ jsx91(
               IconButton11,
               {
                 onClick: toggleFullscreen,
@@ -7735,11 +8034,11 @@ var CodeEditor = ({
                   },
                   boxShadow: 1
                 },
-                children: isFullscreen ? /* @__PURE__ */ jsx88(FullscreenExitIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx88(FullscreenIcon, { fontSize: "small" })
+                children: isFullscreen ? /* @__PURE__ */ jsx91(FullscreenExitIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx91(FullscreenIcon, { fontSize: "small" })
               }
             ) }),
-            /* @__PURE__ */ jsx88(
-              Box25,
+            /* @__PURE__ */ jsx91(
+              Box26,
               {
                 sx: {
                   flex: 1,
@@ -7750,7 +8049,7 @@ var CodeEditor = ({
                   position: "relative",
                   height: isFullscreen ? "100%" : actualHeight
                 },
-                children: /* @__PURE__ */ jsx88(
+                children: /* @__PURE__ */ jsx91(
                   Editor,
                   {
                     height: "100%",
@@ -7761,7 +8060,7 @@ var CodeEditor = ({
                     onMount: handleEditorDidMount,
                     theme: themeProp || "vs",
                     options: defaultOptions,
-                    loading: /* @__PURE__ */ jsx88(Box25, { sx: { p: 2, textAlign: "center" }, children: "Loading Monaco Editor..." }),
+                    loading: /* @__PURE__ */ jsx91(Box26, { sx: { p: 2, textAlign: "center" }, children: "Loading Monaco Editor..." }),
                     beforeMount: (monaco) => {
                       console.log("CodeEditor: beforeMount called", { monaco: !!monaco });
                     }
@@ -7769,8 +8068,8 @@ var CodeEditor = ({
                 )
               }
             ),
-            validationErrors.length > 0 && /* @__PURE__ */ jsxs41(
-              Box25,
+            validationErrors.length > 0 && /* @__PURE__ */ jsxs43(
+              Box26,
               {
                 sx: {
                   borderTop: 1,
@@ -7783,8 +8082,8 @@ var CodeEditor = ({
                   transition: "max-height 0.2s ease"
                 },
                 children: [
-                  /* @__PURE__ */ jsxs41(
-                    Box25,
+                  /* @__PURE__ */ jsxs43(
+                    Box26,
                     {
                       sx: {
                         display: "flex",
@@ -7798,15 +8097,15 @@ var CodeEditor = ({
                         color: "text.secondary"
                       },
                       children: [
-                        /* @__PURE__ */ jsx88(ErrorOutlineIcon, { color: "error", fontSize: "small" }),
-                        /* @__PURE__ */ jsx88(Box25, { sx: { fontWeight: 600, color: "text.primary" }, children: "Problems" }),
-                        /* @__PURE__ */ jsxs41(Box25, { sx: { ml: 1 }, children: [
+                        /* @__PURE__ */ jsx91(ErrorOutlineIcon, { color: "error", fontSize: "small" }),
+                        /* @__PURE__ */ jsx91(Box26, { sx: { fontWeight: 600, color: "text.primary" }, children: "Problems" }),
+                        /* @__PURE__ */ jsxs43(Box26, { sx: { ml: 1 }, children: [
                           validationErrors.length,
                           " error",
                           validationErrors.length > 1 ? "s" : ""
                         ] }),
-                        /* @__PURE__ */ jsx88(Box25, { sx: { flex: 1 } }),
-                        /* @__PURE__ */ jsx88(
+                        /* @__PURE__ */ jsx91(Box26, { sx: { flex: 1 } }),
+                        /* @__PURE__ */ jsx91(
                           IconButton11,
                           {
                             size: "small",
@@ -7815,14 +8114,14 @@ var CodeEditor = ({
                               setHasUserToggledProblems(true);
                               setShowProblems((s) => !s);
                             },
-                            children: showProblems ? /* @__PURE__ */ jsx88(ExpandMoreIcon3, { fontSize: "small" }) : /* @__PURE__ */ jsx88(ExpandLessIcon, { fontSize: "small" })
+                            children: showProblems ? /* @__PURE__ */ jsx91(ExpandMoreIcon3, { fontSize: "small" }) : /* @__PURE__ */ jsx91(ExpandLessIcon, { fontSize: "small" })
                           }
                         )
                       ]
                     }
                   ),
-                  showProblems && /* @__PURE__ */ jsx88(Box25, { sx: { overflow: "auto" }, children: validationErrors.map((error, index) => /* @__PURE__ */ jsxs41(
-                    Box25,
+                  showProblems && /* @__PURE__ */ jsx91(Box26, { sx: { overflow: "auto" }, children: validationErrors.map((error, index) => /* @__PURE__ */ jsxs43(
+                    Box26,
                     {
                       onClick: () => gotoMarker(error),
                       sx: {
@@ -7838,12 +8137,12 @@ var CodeEditor = ({
                         fontSize: "0.85rem"
                       },
                       children: [
-                        /* @__PURE__ */ jsx88(ErrorOutlineIcon, { color: "error", sx: { fontSize: 18 } }),
-                        /* @__PURE__ */ jsxs41(Box25, { sx: { color: "text.secondary", width: 64 }, children: [
+                        /* @__PURE__ */ jsx91(ErrorOutlineIcon, { color: "error", sx: { fontSize: 18 } }),
+                        /* @__PURE__ */ jsxs43(Box26, { sx: { color: "text.secondary", width: 64 }, children: [
                           "Line ",
                           error.startLineNumber
                         ] }),
-                        /* @__PURE__ */ jsx88(Box25, { sx: { color: "text.primary", flex: 1, minWidth: 0 }, children: error.message })
+                        /* @__PURE__ */ jsx91(Box26, { sx: { color: "text.primary", flex: 1, minWidth: 0 }, children: error.message })
                       ]
                     },
                     `${error.startLineNumber}-${error.startColumn}-${index}`
@@ -7968,11 +8267,14 @@ export {
   StepLabel,
   Stepper,
   StorageAppIcon,
+  SummaryStats,
   Switch,
   Tab,
   Table,
   TableHeader,
   TextField,
+  TimeRangeSelect,
+  TimeSeriesGraph,
   ToggleButton,
   ToggleButtonGroup,
   Toolbar,