@octoguide/mui-ui-toolkit 0.8.1 → 0.8.2

package/dist/index.d.mts

@@ -1013,8 +1013,10 @@ interface ToggleProps extends Omit<React__default.HTMLAttributes<HTMLFieldSetEle
     onChange?: (value: boolean) => void;
     /** Blur handler forwarded to both radio inputs */
     onBlur?: () => void;
+    /** Controls the height of the toggle — small (40px), medium (56px, matches TextField), large (64px) */
+    size?: 'small' | 'medium' | 'large';
 }
-declare function Toggle({ name, checked, label, description, error, onChange, onBlur, ...restProps }: ToggleProps): react_jsx_runtime.JSX.Element;
+declare function Toggle({ name, checked, label, description, error, onChange, onBlur, size, ...restProps }: ToggleProps): react_jsx_runtime.JSX.Element;
 declare namespace Toggle {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -1013,8 +1013,10 @@ interface ToggleProps extends Omit<React__default.HTMLAttributes<HTMLFieldSetEle
     onChange?: (value: boolean) => void;
     /** Blur handler forwarded to both radio inputs */
     onBlur?: () => void;
+    /** Controls the height of the toggle — small (40px), medium (56px, matches TextField), large (64px) */
+    size?: 'small' | 'medium' | 'large';
 }
-declare function Toggle({ name, checked, label, description, error, onChange, onBlur, ...restProps }: ToggleProps): react_jsx_runtime.JSX.Element;
+declare function Toggle({ name, checked, label, description, error, onChange, onBlur, size, ...restProps }: ToggleProps): react_jsx_runtime.JSX.Element;
 declare namespace Toggle {
     var displayName: string;
 }

package/dist/index.js

@@ -1599,7 +1599,17 @@ var ToggleButton = (0, import_styles8.styled)(import_material8.ToggleButton)(({
   textTransform: "none",
   color: theme.palette.text.primary,
   lineHeight: 1.25,
+  // Default (medium): 48px so ToggleButtonGroup total = 48 + 4 + 4 (group padding) = 56px (matches TextField medium)
+  height: "48px",
   transition: `background-color ${theme.tokens.transitions.durationBase} ease`,
+  "&.MuiToggleButton-sizeSmall": {
+    // 32px so ToggleButtonGroup total = 32 + 4 + 4 = 40px (matches TextField small)
+    height: "32px"
+  },
+  "&.MuiToggleButton-sizeLarge": {
+    // 56px so ToggleButtonGroup total = 56 + 4 + 4 = 64px (matches Toggle large)
+    height: "56px"
+  },
   "&:hover": {
     backgroundColor: theme.tokens.colors.backgroundSubtle
   },
@@ -3638,11 +3648,11 @@ var StyledLegend = (0, import_styles23.styled)("legend")(({ theme }) => ({
   marginBottom: theme.spacing(1),
   padding: 0
 }));
-var StyledToggleWrapper = (0, import_styles23.styled)("div")(({ theme }) => ({
+var StyledToggleWrapper = (0, import_styles23.styled)("div")(({ theme, size = "medium" }) => ({
   display: "flex",
   flexDirection: "row",
   width: theme.spacing(15),
-  height: theme.spacing(6),
+  height: size === "small" ? theme.spacing(5) : size === "large" ? theme.spacing(8) : theme.spacing(7),
   backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.paper : theme.palette.common.white,
   border: `1px solid ${theme.tokens.colors.border}`,
   borderRadius: theme.tokens.borderRadius.md
@@ -3746,13 +3756,14 @@ function Toggle({
   error,
   onChange,
   onBlur,
+  size = "medium",
   ...restProps
 }) {
   const testId = restProps["data-testid"];
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(StyledFieldset, { "data-component-id": "toggle", ...getCleanProps(restProps), children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(StyledLegend, { children: label }),
     description && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_FormHelperText.default, { children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(StyledToggleWrapper, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(StyledToggleWrapper, { size, children: [
       /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
         StyledSwitch,
         {