From 8af8efbe3bf1f6f2f293d015fee6227e5518f410 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Sun, 25 Jan 2026 16:09:48 +0000
Subject: [PATCH] toggle-button-group

---
 .../v2/common/controls/HeaderTimeRange.tsx    |  3 +-
 .../src/Components/v2/inputs/ToggleButton.tsx | 52 +++++++++++++++++++
 client/src/Components/v2/inputs/index.tsx     |  1 +
 3 files changed, 54 insertions(+), 2 deletions(-)
 create mode 100644 client/src/Components/v2/inputs/ToggleButton.tsx

diff --git a/client/src/Components/v2/common/controls/HeaderTimeRange.tsx b/client/src/Components/v2/common/controls/HeaderTimeRange.tsx
index 3ca27ffbc..772683b43 100644
--- a/client/src/Components/v2/common/controls/HeaderTimeRange.tsx
+++ b/client/src/Components/v2/common/controls/HeaderTimeRange.tsx
@@ -1,7 +1,6 @@
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
-import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
-import ToggleButton from "@mui/material/ToggleButton";
+import { ToggleButtonGroup, ToggleButton } from "@/Components/v2/inputs";
 import { useTheme } from "@mui/material/styles";
 
 interface MonitorTimeFrameHeaderProps {
diff --git a/client/src/Components/v2/inputs/ToggleButton.tsx b/client/src/Components/v2/inputs/ToggleButton.tsx
new file mode 100644
index 000000000..40b4309b8
--- /dev/null
+++ b/client/src/Components/v2/inputs/ToggleButton.tsx
@@ -0,0 +1,52 @@
+import ToggleButton from "@mui/material/ToggleButton";
+import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
+import type { ToggleButtonProps } from "@mui/material/ToggleButton";
+import type { ToggleButtonGroupProps } from "@mui/material/ToggleButtonGroup";
+import { useTheme } from "@mui/material/styles";
+
+export const ToggleButtonInput = ({ sx, ...props }: ToggleButtonProps) => {
+	return (
+		<ToggleButton
+			{...props}
+			sx={{
+				px: 8,
+				textTransform: "none",
+				height: 34,
+				fontWeight: 400,
+				whiteSpace: "nowrap",
+				textOverflow: "ellipsis",
+				overflow: "hidden",
+				boxShadow: "none",
+				"&:hover": {
+					boxShadow: "none",
+				},
+				...sx,
+			}}
+		/>
+	);
+};
+
+export const ToggleButtonGroupInput = ({ sx, ...props }: ToggleButtonGroupProps) => {
+	const theme = useTheme();
+	return (
+		<ToggleButtonGroup
+			{...props}
+			sx={{
+				"& .MuiToggleButtonGroup-grouped": {
+					borderColor: theme.palette.divider,
+
+					borderRadius: 0,
+					"&:first-of-type": {
+						borderTopLeftRadius: 2,
+						borderBottomLeftRadius: 2,
+					},
+					"&:last-of-type": {
+						borderTopRightRadius: 2,
+						borderBottomRightRadius: 2,
+					},
+				},
+				...sx,
+			}}
+		/>
+	);
+};
diff --git a/client/src/Components/v2/inputs/index.tsx b/client/src/Components/v2/inputs/index.tsx
index 9a76f6f7f..07e919932 100644
--- a/client/src/Components/v2/inputs/index.tsx
+++ b/client/src/Components/v2/inputs/index.tsx
@@ -4,3 +4,4 @@ export { SelectInput as Select } from "./Select";
 export { CheckboxInput as Checkbox } from "./Checkbox";
 export { AutoCompleteInput as Autocomplete } from "./AutoComplete";
 export { TextInput as TextField } from "./TextInput";
+export { ToggleButtonInput as ToggleButton, ToggleButtonGroupInput as ToggleButtonGroup } from "./ToggleButton";