Move banner to ui package

packages/ui/src/components/Banner.tsx

@@ -0,0 +1,28 @@
+import classNames from 'classnames';
+import type { ReactNode } from 'react';
+
+export interface BannerProps {
+  children: ReactNode;
+  className?: string;
+  color?: 'primary' | 'secondary' | 'success' | 'notice' | 'warning' | 'danger' | 'info';
+}
+
+export function Banner({ children, className, color }: BannerProps) {
+  return (
+    <div className="w-auto grid grid-rows-1 max-h-full flex-0">
+      <div
+        className={classNames(
+          className,
+          color && 'bg-surface',
+          `x-theme-banner--${color}`,
+          'border border-border border-dashed',
+          'px-4 py-2 rounded-lg select-auto cursor-auto',
+          'overflow-auto text-text',
+          'mb-auto', // Don't stretch all the way down if the parent is in grid or flexbox
+        )}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

packages/ui/src/components/tree/TreeItem.tsx

@@ -10,7 +10,6 @@ import type {
 } from 'react';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { computeSideForDragMove } from '../../lib/dnd';
-import type { ContextMenuRenderer } from './common';
 import { Icon } from '../Icon';
 import { isLastFocusedFamily, isSelectedFamily } from './atoms';
 import { useCollapsedAtom, useIsAncestorCollapsed, useIsCollapsed, useSetCollapsed } from './context';

packages/ui/src/index.ts

@@ -31,3 +31,5 @@ export { useContainerSize } from "./hooks/useContainerSize";
 export { Overlay } from "./components/Overlay";
 export { Portal } from "./components/Portal";
 export { usePortal } from "./hooks/usePortal";
+export { Banner } from "./components/Banner";
+export type { BannerProps } from "./components/Banner";