@reactberry/system 2.0.0-beta

package/src/blocks/Menu/index.tsx

@@ -0,0 +1,60 @@
+"use client";
+import React from "react";
+import { Box } from "@/design-system/elements";
+import { MenuProvider, useMenu } from "./MenuContext";
+import { MenuItem } from "./MenuItem";
+import { MenuContent } from "./MenuContent";
+import { AnimatePresence } from "motion/react";
+
+interface MenuProps {
+  children: React.ReactNode;
+}
+
+// Add an interface for the child props
+interface MenuChildProps {
+  id: string | number;
+  children: React.ReactNode;
+}
+
+const MenuInner: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const { setSelected, selected, setDir } = useMenu();
+
+  const selectedContent = React.Children.toArray(children).find(
+    (child) =>
+      React.isValidElement(child) &&
+      (child.props as MenuChildProps).id === selected,
+  );
+
+  return (
+    <Box display="flex" alignItems="center" justifyContent="center">
+      <Box
+        position="relative"
+        display="flex"
+        alignItems="center"
+        onMouseLeave={() => {
+          setDir(null);
+          setSelected(null);
+        }}
+        zIndex={9999}
+      >
+        {children}
+
+        <AnimatePresence mode="sync">
+          {selected !== null &&
+            React.isValidElement(selectedContent) &&
+            (selectedContent.props as MenuChildProps).children}
+        </AnimatePresence>
+      </Box>
+    </Box>
+  );
+};
+
+export const Menu: React.FC<MenuProps> = ({ children }) => {
+  return (
+    <MenuProvider>
+      <MenuInner>{children}</MenuInner>
+    </MenuProvider>
+  );
+};
+
+export { MenuItem, MenuContent };

package/src/blocks/Modal/index.tsx

@@ -0,0 +1,268 @@
+"use client";
+
+/**
+ * Enhanced Modal component
+ *
+ * Improvements:
+ * - Adds robust fallback navigation logic when closing (overlay click or programmatic).
+ * - Supports an optional `fallbackHref` prop for deterministic navigation when history is shallow.
+ * - Keeps support for user-supplied `onClose` (which always takes precedence).
+ * - Derives a parent path for common resource detail routes (/tasks/[id], /activity/[id]) if no fallback supplied.
+ * - Adds `closeOnOverlayClick` prop to allow disabling close when clicking the backdrop overlay.
+ *
+ * Usage:
+ * <Modal onClose={navigateBack} fallbackHref="/tasks" closeOnOverlayClick={false}>
+ *   ...
+ * </Modal>
+ */
+
+import { AnimatePresence, motion } from "motion/react";
+import { Box } from "@/design-system/elements";
+import { useKeypress } from "@/design-system/hooks/useKeypress";
+import { useOverlay } from "@/design-system/hooks/useOverlay";
+import { Backdrop } from "@/design-system/blocks/Overlay";
+import { usePathname, useRouter } from "next/navigation";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { createPortal } from "react-dom";
+
+// Re-export for consumers that import these directly from Modal
+export { pushThemeColor, popThemeColor } from "@/design-system/utils/overlayTheme";
+
+/**
+ * Context that exposes the Modal's close function to children.
+ * When `animated` is true, this triggers the exit animation before unmounting.
+ * When `animated` is false, this calls the close handler directly.
+ */
+const ModalCloseContext = createContext<(() => void) | null>(null);
+
+/**
+ * Hook to access the parent Modal's close function.
+ * Returns null if used outside a Modal.
+ */
+export function useModalClose() {
+  return useContext(ModalCloseContext);
+}
+
+interface ModalProps {
+  children: ReactNode;
+  onClose?: () => void;
+  portal?: boolean;
+  /**
+   * Explicit fallback route used when there is no browser history to return to.
+   * Example: "/tasks"
+   */
+  fallbackHref?: string;
+  /**
+   * (Optional) Disable using browser history even if available and always use fallback / derived path.
+   */
+  forceFallback?: boolean;
+  /**
+   * Whether clicking the backdrop overlay should close the modal.
+   * Defaults to true for current behavior. Set to false to prevent overlay clicks from closing.
+   */
+  closeOnOverlayClick?: boolean;
+  /**
+   * Whether to show the tinted backdrop overlay behind the modal.
+   * Defaults to true. Set to false for a transparent backdrop.
+   */
+  backdrop?: boolean;
+  /**
+   * Whether to animate the modal open/close with a scale + fade
+   * animation matching the sign-in card style. Defaults to false.
+   */
+  animated?: boolean;
+  /**
+   * Additional style/semantic props forwarded to container.
+   */
+  [key: string]: any;
+}
+
+export default function Modal({
+  children,
+  onClose,
+  portal = true,
+  fallbackHref,
+  forceFallback = false,
+  closeOnOverlayClick = true,
+  backdrop = true,
+  animated = false,
+  ...rest
+}: ModalProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const { mounted, isStandalone } = useOverlay(true);
+
+  // Track if we (likely) have a prior history entry.
+  // NOTE: history.length heuristic is imperfect but acceptable for typical SPA usage.
+  const canGoBackRef = useRef(false);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      canGoBackRef.current = window.history.length > 1;
+    }
+  }, []);
+
+  /**
+   * Derive a reasonable parent path if no explicit fallback was provided.
+   * Extend this logic as new modalized resource routes are introduced.
+   */
+  const deriveParentPath = useCallback((p: string): string => {
+    if (!p) return "/";
+    const patterns: Array<{ regex: RegExp; parent: string }> = [
+      { regex: /\/tasks\/[^/]+$/, parent: "/tasks" },
+      { regex: /\/activity\/[^/]+$/, parent: "/activity" },
+    ];
+
+    for (const { regex, parent } of patterns) {
+      if (regex.test(p)) return parent;
+    }
+    return "/"; // Default root
+  }, []);
+
+  const resolvedFallback =
+    fallbackHref || (pathname ? deriveParentPath(pathname) : "/") || "/";
+
+  /**
+   * Close handler:
+   * 1. If user supplied onClose -> call it.
+   * 2. Else if not forcing fallback and history seems viable -> router.back().
+   * 3. Else -> router.push(resolvedFallback).
+   */
+  const handleClose = useCallback(() => {
+    if (onClose) {
+      onClose();
+      return;
+    }
+
+    if (!forceFallback && canGoBackRef.current) {
+      router.back();
+      return;
+    }
+
+    router.push(resolvedFallback);
+  }, [onClose, forceFallback, router, resolvedFallback]);
+
+  /**
+   * Stop propagation inside main dialog so clicks there don't trigger overlay close.
+   */
+  const stopPropagation = useCallback(
+    (e: React.MouseEvent) => e.stopPropagation(),
+    []
+  );
+
+  // For animated modals, manage a closing state to allow exit animations
+  // before the portal is removed.
+  const [isClosing, setIsClosing] = useState(false);
+
+  const handleAnimatedClose = useCallback(() => {
+    setIsClosing(true);
+  }, []);
+
+  const onExitComplete = useCallback(() => {
+    setIsClosing(false);
+    handleClose();
+  }, [handleClose]);
+
+  const effectiveClose = animated ? handleAnimatedClose : handleClose;
+  const showContent = animated ? !isClosing : true;
+
+  // Close on Escape key. Uses effectiveClose so animated modals play exit animation.
+  useKeypress("Escape", effectiveClose);
+
+  const animatedTransition = {
+    type: "spring" as const,
+    stiffness: 500,
+    damping: 30,
+    mass: 0.8,
+  };
+
+  const modalContent = (
+    <Box
+      position="fixed"
+      top="0"
+      left="0"
+      width="100%"
+      height="100%"
+      display={"flex"}
+      justifyContent={"center"}
+      alignItems={"center"}
+      zIndex="100002"
+      pb="m"
+      px="xs"
+      style={{
+        paddingTop: isStandalone
+          ? "calc(1rem + env(safe-area-inset-top, 0px))"
+          : "1rem",
+      }}
+    >
+      <AnimatePresence onExitComplete={animated ? onExitComplete : undefined}>
+        {showContent && (
+          <>
+            {/* Dialog Panel */}
+            <Box
+              as={animated ? motion.div : undefined}
+              key="modal-dialog"
+              {...(animated
+                ? {
+                    initial: { opacity: 0, y: "2rem", scale: 0.85 },
+                    animate: { opacity: 1, y: 0, scale: 1 },
+                    exit: { opacity: 0, y: "2rem", scale: 0.85 },
+                    transition: animatedTransition,
+                  }
+                : {})}
+              role="dialog"
+              aria-modal="true"
+              position="relative"
+              maxWidth="inherit"
+              width="100%"
+              zIndex="100001"
+              shape="rounded"
+              $shadow="medium"
+              overflow="hidden"
+              height="100%"
+              skin="surface"
+              onClick={stopPropagation}
+              {...rest}
+            >
+              <Box
+                height="100%"
+                width="100%"
+                overflow="hidden"
+                display="flex"
+                flexDirection="column"
+              >
+                <ModalCloseContext.Provider value={effectiveClose}>
+                  {children}
+                </ModalCloseContext.Provider>
+              </Box>
+            </Box>
+
+            {/* Clickable overlay (behind dialog) */}
+            <Backdrop
+              key="modal-overlay"
+              animated={animated}
+              transition={animated ? animatedTransition : { duration: 0.2 }}
+              bg={backdrop ? "transparent.light.9" : "transparent"}
+              onClick={
+                closeOnOverlayClick ? effectiveClose : undefined
+              }
+            />
+          </>
+        )}
+      </AnimatePresence>
+    </Box>
+  );
+
+  // Avoid rendering portal content during SSR (Next.js) until mounted.
+  if (!mounted) return null;
+
+  return portal ? createPortal(modalContent, document.body) : modalContent;
+}

package/src/blocks/MorphingPopover/index.tsx

@@ -0,0 +1,294 @@
+"use client";
+
+import React, { useCallback, useEffect, useId, useRef, useState } from "react";
+import { Box } from "@/design-system/elements";
+import { createPortal } from "react-dom";
+import { useClickOutside } from "@/design-system/hooks/useClickOutside";
+import {
+  AnimatePresence,
+  MotionConfig,
+  motion,
+  type Transition,
+  type Variants,
+} from "motion/react";
+import Underlay from "../Underlay";
+
+const DEFAULT_TRANSITION: Transition = {
+  type: "spring",
+  bounce: 0.1,
+  duration: 0.4,
+};
+
+const DEFAULT_VARIANTS: Variants = {
+  initial: { opacity: 0, borderRadius: 9999 },
+  animate: { opacity: 1, borderRadius: 16 },
+  exit: { opacity: 0, borderRadius: 9999 },
+};
+
+type MorphingPopoverRenderTriggerProps = {
+  ref: (node: HTMLElement | null) => void;
+  onClick?: () => void;
+};
+
+export type MorphingPopoverProps = {
+  /** Trigger element shown when the popover is closed. */
+  trigger?: React.ReactNode;
+  /** Props forwarded to the trigger wrapper when not using renderTrigger. */
+  triggerProps?: Record<string, any>;
+  /** Optional placement hint (kept for API compatibility; currently ignored). */
+  placement?: string;
+  /** Props forwarded to the morphing panel container. */
+  panelProps?: Record<string, any>;
+  /** Props forwarded to the outer container Box. */
+  containerProps?: Record<string, any>;
+  /**
+   * Custom trigger renderer for full control over the trigger element.
+   * Signature mirrors the standard Popover API.
+   */
+  renderTrigger?: (props: MorphingPopoverRenderTriggerProps) => React.ReactNode;
+  /**
+   * Popover content. If a function, receives a close() helper.
+   */
+  children?:
+    | React.ReactNode
+    | ((context: { close: () => void }) => React.ReactNode);
+  /** Motion transition applied via MotionConfig. */
+  transition?: Transition;
+  /** Framer Motion variants for the morphing panel. */
+  variants?: Variants;
+  /** Uncontrolled initial open state. */
+  defaultOpen?: boolean;
+  /** Controlled open state. */
+  open?: boolean;
+  /** Callback when open state changes. */
+  onOpenChange?: (open: boolean) => void;
+};
+
+export default function MorphingPopover({
+  trigger,
+  triggerProps,
+  placement: _placement = "bottom end",
+  panelProps,
+  containerProps,
+  renderTrigger,
+  children,
+  transition = DEFAULT_TRANSITION,
+  variants = DEFAULT_VARIANTS,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange,
+}: MorphingPopoverProps) {
+  const uniqueId = useId();
+  const layoutId = `morphing-popover-${uniqueId}`;
+
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const isControlled = controlledOpen !== undefined;
+  const isOpen = isControlled ? !!controlledOpen : uncontrolledOpen;
+
+  const panelRef = useRef<HTMLDivElement | null>(null);
+
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (!isControlled) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+
+  const handleOpen = useCallback(() => {
+    setOpen(true);
+  }, [setOpen]);
+
+  const handleClose = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+
+  // Close on click outside of the panel when open.
+  useClickOutside(panelRef, () => handleClose(), isOpen);
+
+  // Close on Escape key.
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        handleClose();
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen, handleClose]);
+
+  const triggerRef = useRef<HTMLElement | null>(null);
+
+  const handleTriggerRef = useCallback((node: HTMLElement | null) => {
+    triggerRef.current = node;
+  }, []);
+
+  const renderTriggerNode = () => {
+    // If a custom trigger renderer is provided, mirror the Popover API
+    // and let the returned element control opening via the provided onClick.
+    if (renderTrigger) {
+      const rendered = renderTrigger({
+        ref: handleTriggerRef,
+        onClick: handleOpen,
+      });
+
+      if (!rendered) return null;
+
+      if (React.isValidElement(rendered)) {
+        const MotionComponent = motion.create(
+          rendered.type as React.ComponentType<any>
+        );
+        const childProps = rendered.props as Record<string, any>;
+
+        return (
+          <MotionComponent
+            {...childProps}
+            layoutId={layoutId}
+            onClick={(event: React.MouseEvent<any>) => {
+              if (typeof childProps.onClick === "function") {
+                childProps.onClick(event);
+              }
+              // Do not call handleOpen here; we expect the child's onClick
+              // (wired via props.onClick) to manage open/close so we avoid
+              // double-calling it.
+            }}
+          />
+        );
+      }
+
+      // Fallback: wrap non-element custom triggers.
+      return (
+        <Box
+          as={motion.div}
+          layoutId={layoutId}
+          onClick={handleOpen}
+          {...triggerProps}
+        >
+          {rendered}
+        </Box>
+      );
+    }
+
+    // Default trigger path: use the provided trigger node and augment its
+    // onClick to also open the popover.
+    const rendered = trigger;
+
+    if (!rendered) return null;
+
+    if (React.isValidElement(rendered)) {
+      const MotionComponent = motion.create(
+        rendered.type as React.ComponentType<any>
+      );
+      const childProps = rendered.props as Record<string, any>;
+
+      return (
+        <MotionComponent
+          {...childProps}
+          layoutId={layoutId}
+          onClick={(event: React.MouseEvent<any>) => {
+            if (typeof childProps.onClick === "function") {
+              childProps.onClick(event);
+            }
+            if (!event.defaultPrevented) {
+              handleOpen();
+            }
+          }}
+        />
+      );
+    }
+
+    // Fallback: wrap non-element triggers.
+    return (
+      <Box
+        as={motion.div}
+        layoutId={layoutId}
+        onClick={handleOpen}
+        {...triggerProps}
+      >
+        {rendered}
+      </Box>
+    );
+  };
+
+  const { style: panelStyleFromProps, ...restPanelProps } = panelProps ?? {};
+
+  const content =
+    typeof children === "function"
+      ? children({ close: handleClose })
+      : children;
+
+  const overlay = (
+    <AnimatePresence>
+      {isOpen && (
+        <Box
+          as={motion.div}
+          key={`${layoutId}-overlay`}
+          position="fixed"
+          top={0}
+          left={0}
+          right={0}
+          bottom={0}
+          zIndex="999999"
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+        >
+          <Box
+            as={motion.div}
+            ref={panelRef}
+            key={layoutId}
+            layoutId={layoutId}
+            role="dialog"
+            aria-modal="true"
+            id={`morphing-popover-panel-${uniqueId}`}
+            shape="rounded"
+            $shadow="medium"
+            skin="surface"
+            p="xsmall"
+            style={panelStyleFromProps || {}}
+            initial="initial"
+            animate="animate"
+            exit="exit"
+            position={"relative"}
+            zIndex={"1"}
+            variants={variants}
+            {...restPanelProps}
+          >
+            {content}
+          </Box>
+          <Underlay
+            as={motion.div}
+            width="100dvw"
+            height="100dvh"
+            color="transparent"
+            top="0"
+            left="0"
+            position="fixed"
+            zIndex="-1"
+            initial="initial"
+            animate="animate"
+            exit="exit"
+          />
+        </Box>
+      )}
+    </AnimatePresence>
+  );
+
+  return (
+    <MotionConfig transition={transition}>
+      <Box position="relative" display="inline-flex" {...containerProps}>
+        {renderTriggerNode()}
+        {typeof window === "undefined"
+          ? overlay
+          : createPortal(overlay, document.body)}
+      </Box>
+    </MotionConfig>
+  );
+}

package/src/blocks/Overlay/Backdrop.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { motion } from "motion/react";
+import { Box } from "@/design-system/elements";
+
+interface BackdropProps {
+  onClick?: () => void;
+  bg?: string;
+  zIndex?: number | string;
+  /** When true, the backdrop fades in from opacity 0. Otherwise it appears instantly. */
+  animated?: boolean;
+  /** Custom motion transition. Falls back to a simple 200ms fade. */
+  transition?: object;
+  [key: string]: any;
+}
+
+/**
+ * Animated full-screen backdrop overlay used by Modal, Drawer, etc.
+ * Must be rendered inside an `<AnimatePresence>` for exit animations.
+ */
+export function Backdrop({
+  onClick,
+  bg = "rgba(0, 0, 0, 0.5)",
+  zIndex,
+  animated = false,
+  transition,
+  ...rest
+}: BackdropProps) {
+  return (
+    <Box
+      as={motion.div}
+      initial={{ opacity: animated ? 0 : 1 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={transition ?? { duration: 0.2 }}
+      position="fixed"
+      top="0"
+      left="0"
+      width="100%"
+      height="100%"
+      bg={bg}
+      zIndex={zIndex}
+      onClick={onClick}
+      aria-hidden="true"
+      {...rest}
+    />
+  );
+}

package/src/blocks/Overlay/OverscrollGuard.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { motion } from "motion/react";
+import { Box } from "@/design-system/elements";
+
+interface OverscrollGuardProps {
+  zIndex?: number | string;
+}
+
+/**
+ * Covers the safe-area gap at the bottom and extends well past the viewport
+ * so iOS rubber-band overscroll never reveals the page behind an overlay.
+ * The 200px buffer exceeds the maximum rubber-band distance on iOS.
+ *
+ * Must be rendered inside an `<AnimatePresence>` for exit animations.
+ */
+export function OverscrollGuard({ zIndex = 10008 }: OverscrollGuardProps) {
+  return (
+    <Box
+      as={motion.div}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      position="fixed"
+      left="0"
+      right="0"
+      zIndex={zIndex}
+      bg="surface"
+      skin="translucent"
+      style={{
+        bottom: "-200px",
+        height: "calc(env(safe-area-inset-bottom, 0px) + 200px)",
+      }}
+    />
+  );
+}

package/src/blocks/Overlay/index.ts

@@ -0,0 +1,2 @@
+export { Backdrop } from "./Backdrop";
+export { OverscrollGuard } from "./OverscrollGuard";