@vvedantb/ui 0.1.4 → 0.2.0

package/src/ui/confirm-dialog.tsx

@@ -0,0 +1,61 @@
+import * as React from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "./alert-dialog";
+
+export type ConfirmDialogProps = React.ComponentProps<typeof AlertDialog> & {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  cancelLabel?: React.ReactNode;
+  confirmLabel?: React.ReactNode;
+  onCancel?: () => void;
+  onConfirm?: () => void;
+  variant?: "default" | "destructive";
+  confirmDisabled?: boolean;
+};
+
+function ConfirmDialog({
+  title,
+  description,
+  cancelLabel = "Cancel",
+  confirmLabel = "Confirm",
+  onCancel,
+  onConfirm,
+  variant = "default",
+  confirmDisabled,
+  children,
+  ...props
+}: ConfirmDialogProps) {
+  return (
+    <AlertDialog {...props}>
+      {children}
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          {description != null ? (
+            <AlertDialogDescription>{description}</AlertDialogDescription>
+          ) : null}
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel onClick={onCancel}>{cancelLabel}</AlertDialogCancel>
+          <AlertDialogAction
+            variant={variant}
+            disabled={confirmDisabled}
+            onClick={onConfirm}
+          >
+            {confirmLabel}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
+export { ConfirmDialog };

package/src/ui/dialog.tsx

@@ -4,12 +4,22 @@ import { IconX } from "@tabler/icons-react";
 import { cn } from "../utils/cn";
 import { assignRef } from "../utils/ref";
 import { connectModalSurface } from "./modalTransition";
+import {
+  connectBodyPointerEventsFix,
+  connectKeyboardScroll,
+  connectOverlayViewport,
+  treeHasDialogDescription,
+  useCompactOverlay,
+} from "./overlay-a11y";
 
 const Dialog = DialogPrimitive.Root;
 const DialogTrigger = DialogPrimitive.Trigger;
 const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
 
+const overlayMotionClass =
+  "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 motion-reduce:animate-none motion-reduce:data-[state=open]:animate-none motion-reduce:data-[state=closed]:animate-none";
+
 const DialogOverlay = React.forwardRef<
   React.ComponentRef<typeof DialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
@@ -17,7 +27,8 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-backdrop backdrop-blur-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-backdrop backdrop-blur-md",
+      overlayMotionClass,
       className,
     )}
     {...props}
@@ -25,59 +36,154 @@ const DialogOverlay = React.forwardRef<
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
+const DEFAULT_ALERT_DESCRIPTION = "This action needs confirmation.";
+
 const DialogContent = React.forwardRef<
   React.ComponentRef<typeof DialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
     hideCloseButton?: boolean;
   }
->(({ className, children, hideCloseButton, ...props }, ref) => {
-  const surfaceCleanupRef = React.useRef<(() => void) | null>(null);
+>(
+  (
+    {
+      className,
+      children,
+      hideCloseButton,
+      role,
+      onOpenAutoFocus,
+      "aria-describedby": ariaDescribedBy,
+      ...props
+    },
+    ref,
+  ) => {
+    const compact = useCompactOverlay();
+    const isAlert = role === "alertdialog";
+    const contentNodeRef = React.useRef<HTMLDivElement | null>(null);
+    const surfaceCleanupRef = React.useRef<(() => void) | null>(null);
+    const overlayCleanupRef = React.useRef<(() => void) | null>(null);
+    const generatedDescriptionId = React.useId();
+    const hasDescription = treeHasDialogDescription(children, DialogDescription);
+    const missingDescription =
+      isAlert && ariaDescribedBy == null && !hasDescription;
+
+    React.useEffect(() => {
+      if (!missingDescription) return;
+      const nodeEnv = (globalThis as { process?: { env?: { NODE_ENV?: string } } })
+        .process?.env?.NODE_ENV;
+      if (nodeEnv === "production") return;
+      console.warn(
+        '[Dialog] role="alertdialog" requires a description. Add DialogDescription or aria-describedby.',
+      );
+    }, [missingDescription]);
 
-  const mergedRef = React.useCallback(
-    (node: HTMLDivElement | null) => {
-      if (surfaceCleanupRef.current) {
-        surfaceCleanupRef.current();
+    const mergedRef = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        surfaceCleanupRef.current?.();
         surfaceCleanupRef.current = null;
-      }
+        overlayCleanupRef.current?.();
+        overlayCleanupRef.current = null;
 
-      if (node) {
-        surfaceCleanupRef.current = connectModalSurface(node);
-      }
+        contentNodeRef.current = node;
+        if (node) {
+          if (!compact) {
+            surfaceCleanupRef.current = connectModalSurface(node);
+          }
+          const viewport = connectOverlayViewport(node);
+          const keyboard = connectKeyboardScroll(node);
+          const pointerEvents = connectBodyPointerEventsFix();
+          overlayCleanupRef.current = () => {
+            viewport();
+            keyboard();
+            pointerEvents();
+          };
+        }
 
-      assignRef(ref, node);
-    },
-    [ref],
-  );
+        assignRef(ref, node);
+      },
+      [ref, compact],
+    );
 
-  React.useLayoutEffect(() => {
-    return () => {
-      surfaceCleanupRef.current?.();
-      surfaceCleanupRef.current = null;
+    React.useLayoutEffect(() => {
+      return () => {
+        surfaceCleanupRef.current?.();
+        surfaceCleanupRef.current = null;
+        overlayCleanupRef.current?.();
+        overlayCleanupRef.current = null;
+      };
+    }, []);
+
+    const handleOpenAutoFocus = (event: Event) => {
+      onOpenAutoFocus?.(event);
+      if (!isAlert || event.defaultPrevented) return;
+      event.preventDefault();
+      const root = contentNodeRef.current;
+      const cancel = root?.querySelector<HTMLElement>("[data-alert-cancel]");
+      (cancel ?? root)?.focus();
     };
-  }, []);
-
-  return (
-    <DialogPortal>
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        ref={mergedRef}
-        className={cn(
-          "glass-panel-strong t-modal fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg max-sm:w-[calc(100vw-2rem)] max-h-[90dvh] gap-4 overflow-y-auto rounded-lg p-6 text-overlay-foreground smooth-shadow-ring-xl",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        {!hideCloseButton && (
-          <DialogPrimitive.Close className="absolute right-4 top-4 inline-flex h-8 w-8 items-center justify-center rounded-lg text-muted transition-[background-color,transform] hover:bg-surface-tertiary/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:pointer-events-none before:absolute before:inset-[-4px] before:content-['']">
-            <IconX className="h-4 w-4" />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  );
-});
+
+    return (
+      <DialogPortal>
+        <DialogOverlay />
+        <DialogPrimitive.Content
+          ref={mergedRef}
+          {...(role ? { role } : {})}
+          {...(missingDescription
+            ? { "aria-describedby": generatedDescriptionId }
+            : ariaDescribedBy != null
+              ? { "aria-describedby": ariaDescribedBy }
+              : {})}
+          onOpenAutoFocus={handleOpenAutoFocus}
+          data-compact={compact ? "true" : undefined}
+          className={cn(
+            "glass-panel-strong z-50 flex w-full flex-col gap-4 p-6 text-overlay-foreground smooth-shadow-ring-xl",
+            compact
+              ? cn(
+                  "overflow-y-auto fixed inset-x-0 top-auto w-full max-w-none rounded-t-2xl rounded-b-none pt-3",
+                  "max-h-[var(--overlay-vv-height,100dvh)]",
+                  "bottom-[var(--overlay-vv-bottom,0px)]",
+                  "pb-[max(1.5rem,env(safe-area-inset-bottom,0px))]",
+                  "data-[compact=true]:[&_button]:min-h-11 data-[compact=true]:[&_[data-slot=dialog-footer]]:flex-col-reverse data-[compact=true]:[&_[data-slot=dialog-footer]]:sm:flex-col-reverse",
+                  "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom",
+                  "motion-reduce:animate-none motion-reduce:data-[state=open]:animate-none motion-reduce:data-[state=closed]:animate-none",
+                )
+              : "t-modal fixed left-1/2 top-1/2 max-h-[90dvh] max-w-lg max-sm:w-[calc(100vw-2rem)] overflow-y-auto rounded-lg",
+            className,
+          )}
+          {...props}
+        >
+          {compact ? (
+            <div
+              aria-hidden
+              className="mx-auto mb-1 flex min-h-11 w-full shrink-0 items-center justify-center"
+            >
+              <span className="h-1 w-12 rounded-full bg-surface-tertiary" />
+            </div>
+          ) : null}
+          {missingDescription ? (
+            <DialogPrimitive.Description
+              id={generatedDescriptionId}
+              className="sr-only"
+            >
+              {DEFAULT_ALERT_DESCRIPTION}
+            </DialogPrimitive.Description>
+          ) : null}
+          {children}
+          {!hideCloseButton && (
+            <DialogPrimitive.Close
+              className={cn(
+                "absolute right-2 top-2 inline-flex h-11 w-11 items-center justify-center rounded-lg text-overlay-foreground/70 transition-[background-color,transform] hover:bg-surface-tertiary/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:pointer-events-none",
+                "motion-reduce:transition-none",
+              )}
+            >
+              <IconX className="h-4 w-4" />
+              <span className="sr-only">Close</span>
+            </DialogPrimitive.Close>
+          )}
+        </DialogPrimitive.Content>
+      </DialogPortal>
+    );
+  },
+);
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({
@@ -85,19 +191,36 @@ const DialogHeader = ({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn("flex flex-col gap-1.5 text-center sm:text-left", className)}
+    className={cn("flex flex-col gap-1.5 pr-10 text-left", className)}
     {...props}
   />
 );
 DialogHeader.displayName = "DialogHeader";
 
+const DialogBody = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "min-h-11 flex-1 overflow-y-auto overscroll-contain",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogBody.displayName = "DialogBody";
+
 const DialogFooter = ({
   className,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
+    data-slot="dialog-footer"
     className={cn(
-      "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+      "mt-auto flex flex-col-reverse gap-2 bg-overlay pt-2 sm:flex-row sm:justify-end",
+      "pb-[max(0px,env(safe-area-inset-bottom,0px))]",
+      "[&_button]:max-sm:min-h-11",
       className,
     )}
     {...props}
@@ -126,7 +249,11 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm leading-relaxed text-muted", className)}
+    className={cn(
+      // `--muted` is ~3.5:1 on overlay; mix toward overlay-foreground for 4.5:1.
+      "text-sm leading-relaxed text-[color-mix(in_oklch,var(--overlay-foreground)_72%,var(--overlay))]",
+      className,
+    )}
     {...props}
   />
 ));
@@ -143,6 +270,7 @@ export {
   DialogContent,
   DialogRawContent,
   DialogHeader,
+  DialogBody,
   DialogFooter,
   DialogTitle,
   DialogDescription,

package/src/ui/modalTransition.ts

@@ -1,3 +1,5 @@
+import { prefersReducedMotion } from "./overlay-a11y";
+
 const closeTimers = new WeakMap<HTMLElement, ReturnType<typeof setTimeout>>();
 
 function readModalCloseMs(): number {
@@ -27,6 +29,10 @@ function openModalSurface(el: HTMLElement): void {
 function closeModalSurface(el: HTMLElement): void {
   clearCloseTimer(el);
   el.classList.remove("is-open");
+  if (prefersReducedMotion()) {
+    el.classList.remove("is-closing");
+    return;
+  }
   el.classList.add("is-closing");
   const closeMs = readModalCloseMs();
   const timer = setTimeout(() => {
@@ -40,6 +46,10 @@ function closeModalSurface(el: HTMLElement): void {
 function primeModalSurface(el: HTMLElement): void {
   clearCloseTimer(el);
   el.classList.remove("is-open", "is-closing");
+  if (prefersReducedMotion()) {
+    openModalSurface(el);
+    return;
+  }
   requestAnimationFrame(() => {
     openModalSurface(el);
   });

package/src/ui/overlay-a11y.ts

@@ -0,0 +1,135 @@
+import * as React from "react";
+
+/** Phones, plus short landscape viewports such as 844×390. */
+export const COMPACT_OVERLAY_QUERY = "(max-width: 639px), (max-height: 500px)";
+
+export function prefersReducedMotion(): boolean {
+  return (
+    typeof window !== "undefined" &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  );
+}
+
+export function useCompactOverlay(): boolean {
+  const [compact, setCompact] = React.useState(false);
+
+  React.useLayoutEffect(() => {
+    const mql = window.matchMedia(COMPACT_OVERLAY_QUERY);
+    const sync = () => setCompact(mql.matches);
+    sync();
+    mql.addEventListener("change", sync);
+    return () => mql.removeEventListener("change", sync);
+  }, []);
+
+  return compact;
+}
+
+/** Radix dropdowns leave `pointer-events: none` on body when a dialog opens. */
+export function restoreBodyPointerEvents(): void {
+  if (typeof document === "undefined") return;
+  if (document.body.style.pointerEvents === "none") {
+    document.body.style.removeProperty("pointer-events");
+  }
+}
+
+export function connectBodyPointerEventsFix(): () => void {
+  restoreBodyPointerEvents();
+  const observer = new MutationObserver(() => restoreBodyPointerEvents());
+  observer.observe(document.body, {
+    attributes: true,
+    attributeFilter: ["style"],
+  });
+  const t0 = window.setTimeout(restoreBodyPointerEvents, 0);
+  const t1 = window.setTimeout(restoreBodyPointerEvents, 50);
+  return () => {
+    observer.disconnect();
+    window.clearTimeout(t0);
+    window.clearTimeout(t1);
+  };
+}
+
+export function connectOverlayViewport(el: HTMLElement): () => void {
+  const apply = () => {
+    const vv = window.visualViewport;
+    const height = vv?.height ?? window.innerHeight;
+    const offsetTop = vv?.offsetTop ?? 0;
+    const bottom = Math.max(0, window.innerHeight - height - offsetTop);
+    el.style.setProperty("--overlay-vv-height", `${height}px`);
+    el.style.setProperty("--overlay-vv-bottom", `${bottom}px`);
+    if (el.getAttribute("data-compact") === "true") {
+      el.style.height = `${Math.min(el.scrollHeight, height)}px`;
+    } else {
+      el.style.removeProperty("height");
+    }
+  };
+
+  apply();
+  const vv = window.visualViewport;
+  vv?.addEventListener("resize", apply);
+  vv?.addEventListener("scroll", apply);
+  window.addEventListener("resize", apply);
+  return () => {
+    vv?.removeEventListener("resize", apply);
+    vv?.removeEventListener("scroll", apply);
+    window.removeEventListener("resize", apply);
+    el.style.removeProperty("--overlay-vv-height");
+    el.style.removeProperty("--overlay-vv-bottom");
+  };
+}
+
+function isEditable(el: EventTarget | null): el is HTMLElement {
+  if (!(el instanceof HTMLElement)) return false;
+  const tag = el.tagName;
+  return (
+    tag === "INPUT" ||
+    tag === "TEXTAREA" ||
+    tag === "SELECT" ||
+    el.isContentEditable
+  );
+}
+
+export function connectKeyboardScroll(root: HTMLElement): () => void {
+  const scrollFocused = () => {
+    const run = () => {
+      const target = document.activeElement;
+      if (!isEditable(target) || !root.contains(target)) return;
+      target.scrollIntoView({
+        block: "center",
+        behavior: prefersReducedMotion() ? "auto" : "smooth",
+      });
+    };
+    requestAnimationFrame(() => requestAnimationFrame(run));
+  };
+
+  const onFocusIn = (event: FocusEvent) => {
+    if (!isEditable(event.target)) return;
+    requestAnimationFrame(scrollFocused);
+  };
+
+  root.addEventListener("focusin", onFocusIn);
+  window.visualViewport?.addEventListener("resize", scrollFocused);
+  window.addEventListener("resize", scrollFocused);
+  return () => {
+    root.removeEventListener("focusin", onFocusIn);
+    window.visualViewport?.removeEventListener("resize", scrollFocused);
+    window.removeEventListener("resize", scrollFocused);
+  };
+}
+
+export function treeHasDialogDescription(
+  node: React.ReactNode,
+  descriptionType: React.ElementType,
+): boolean {
+  return React.Children.toArray(node).some((child) => {
+    if (!React.isValidElement(child)) return false;
+    const type = child.type;
+    if (type === descriptionType) return true;
+    const displayName =
+      typeof type === "object" && type !== null
+        ? (type as { displayName?: string }).displayName
+        : undefined;
+    if (displayName === "DialogDescription") return true;
+    const props = child.props as { children?: React.ReactNode };
+    return treeHasDialogDescription(props.children, descriptionType);
+  });
+}

package/src/ui/sheet.tsx

@@ -3,6 +3,12 @@
 import * as React from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
 import { cn } from "../utils/cn";
+import { assignRef } from "../utils/ref";
+import {
+  connectBodyPointerEventsFix,
+  connectKeyboardScroll,
+  connectOverlayViewport,
+} from "./overlay-a11y";
 
 type SheetSide = "top" | "bottom" | "left" | "right";
 
@@ -33,6 +39,9 @@ const SheetHandle = DrawerPrimitive.Handle;
 const SheetTitle = DrawerPrimitive.Title;
 const SheetDescription = DrawerPrimitive.Description;
 
+const overlayMotionClass =
+  "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 motion-reduce:animate-none motion-reduce:data-[state=open]:animate-none motion-reduce:data-[state=closed]:animate-none";
+
 const SheetOverlay = React.forwardRef<
   React.ComponentRef<typeof DrawerPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
@@ -40,7 +49,8 @@ const SheetOverlay = React.forwardRef<
   <DrawerPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-backdrop backdrop-blur-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-backdrop backdrop-blur-md",
+      overlayMotionClass,
       className,
     )}
     {...props}
@@ -49,8 +59,9 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = "SheetOverlay";
 
 const sheetSideClass: Record<SheetSide, string> = {
-  bottom: "inset-x-0 bottom-0 mt-24 flex h-auto flex-col rounded-t-2xl",
-  top: "inset-x-0 top-0 mb-24 flex h-auto flex-col rounded-b-2xl",
+  bottom:
+    "inset-x-0 bottom-[var(--overlay-vv-bottom,0px)] mt-24 flex max-h-[min(96dvh,calc(var(--overlay-vv-height,100dvh)-1.5rem))] h-auto flex-col rounded-t-2xl pb-[max(0.75rem,env(safe-area-inset-bottom,0px))]",
+  top: "inset-x-0 top-0 mb-24 flex h-auto max-h-[var(--overlay-vv-height,100dvh)] flex-col rounded-b-2xl pt-[max(0.75rem,env(safe-area-inset-top,0px))]",
   left: "inset-y-2 left-2 right-auto flex h-auto w-80 max-w-[88vw] flex-col rounded-2xl",
   right:
     "inset-y-2 left-auto right-2 flex h-auto w-80 max-w-[88vw] flex-col rounded-2xl",
@@ -65,20 +76,50 @@ const SheetContent = React.forwardRef<
 >(({ className, children, side: sideProp, ...props }, ref) => {
   const direction = React.useContext(SheetDirectionContext);
   const side = sideProp ?? direction;
+  const overlayCleanupRef = React.useRef<(() => void) | null>(null);
+
+  const mergedRef = React.useCallback(
+    (node: HTMLDivElement | null) => {
+      overlayCleanupRef.current?.();
+      overlayCleanupRef.current = null;
+      if (node) {
+        const viewport = connectOverlayViewport(node);
+        const keyboard = connectKeyboardScroll(node);
+        const pointerEvents = connectBodyPointerEventsFix();
+        overlayCleanupRef.current = () => {
+          viewport();
+          keyboard();
+          pointerEvents();
+        };
+      }
+      assignRef(ref, node);
+    },
+    [ref],
+  );
+
+  React.useLayoutEffect(() => {
+    return () => {
+      overlayCleanupRef.current?.();
+      overlayCleanupRef.current = null;
+    };
+  }, []);
+
   return (
     <SheetPortal>
       <SheetOverlay />
       <DrawerPrimitive.Content
-        ref={ref}
+        ref={mergedRef}
         className={cn(
-          "fixed z-50 bg-overlay/95 text-overlay-foreground smooth-shadow-ring-xl outline-hidden backdrop-blur-xl",
+          "fixed z-50 overflow-y-auto bg-overlay/95 text-overlay-foreground smooth-shadow-ring-xl outline-hidden backdrop-blur-xl motion-reduce:transition-none",
           sheetSideClass[side],
           className,
         )}
         {...props}
       >
         {side === "bottom" || side === "top" ? (
-          <SheetHandle className="mx-auto mt-3 mb-1 h-1 w-12 shrink-0 rounded-full bg-surface-tertiary" />
+          <div className="flex min-h-11 shrink-0 items-center justify-center">
+            <SheetHandle className="relative mx-auto h-1 w-12 shrink-0 rounded-full bg-surface-tertiary after:absolute after:inset-x-[-16px] after:inset-y-[-20px] after:content-['']" />
+          </div>
         ) : null}
         {children}
       </DrawerPrimitive.Content>
@@ -87,6 +128,30 @@ const SheetContent = React.forwardRef<
 });
 SheetContent.displayName = "SheetContent";
 
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col gap-1.5 p-4 text-left", className)} {...props} />
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "sticky bottom-0 mt-auto flex flex-col-reverse gap-2 bg-overlay/95 p-4 sm:flex-row sm:justify-end",
+      "pb-[max(1rem,env(safe-area-inset-bottom,0px))]",
+      "[&_button]:max-sm:min-h-11",
+      className,
+    )}
+    {...props}
+  />
+);
+SheetFooter.displayName = "SheetFooter";
+
 export {
   Sheet,
   SheetPortal,
@@ -97,4 +162,6 @@ export {
   SheetHandle,
   SheetTitle,
   SheetDescription,
+  SheetHeader,
+  SheetFooter,
 };