Make mobile menu sheet height responsive and support controlled state

src/components/input/MobileMenuButton.tsx

@@ -1,16 +1,44 @@
-import { Button, Dialog, type DialogProps, DialogTrigger, Icon, Sheet } from '@umami/react-zen';
+import {
+  Button,
+  type DialogRenderProps,
+  DialogTrigger,
+  Icon,
+  Sheet,
+  type SheetProps,
+} from '@umami/react-zen';
+import { type ReactNode, useState } from 'react';
 import { Menu } from '@/components/icons';
 
-export function MobileMenuButton(props: DialogProps) {
+export interface MobileMenuButtonProps extends Omit<SheetProps, 'children' | 'side'> {
+  children?: ReactNode | ((props: DialogRenderProps) => ReactNode);
+}
+
+export function MobileMenuButton({
+  children,
+  isOpen: controlledOpen,
+  onOpenChange,
+  ...props
+}: MobileMenuButtonProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const isOpen = controlledOpen ?? uncontrolledOpen;
+  const handleOpenChange = (open: boolean) => {
+    if (controlledOpen === undefined) {
+      setUncontrolledOpen(open);
+    }
+    onOpenChange?.(open);
+  };
+
   return (
-    <DialogTrigger>
+    <DialogTrigger isOpen={isOpen} onOpenChange={handleOpenChange}>
       <Button>
         <Icon>
           <Menu />
         </Icon>
       </Button>
-      <Sheet side="left">
-        <Dialog {...props} style={{ width: 'auto' }} />
+      <Sheet {...props} side="left">
+        {typeof children === 'function'
+          ? children({ close: () => handleOpenChange(false) })
+          : children}
       </Sheet>
     </DialogTrigger>
   );