mm

packages/ui-react/package.json

@@ -27,7 +27,8 @@
     "build": "pnpm gen-index && vite build && pnpm gen-dts"
   },
   "dependencies": {
-    "@dg/css": "workspace:*"
+    "@dg/css": "workspace:*",
+    "@floating-ui/react": "^0.27.20"
   },
   "devDependencies": {
     "@types/node": "^25.6.0",

packages/ui-react/src/componnets/Menu/Menu.tsx

@@ -0,0 +1,50 @@
+import {
+  autoUpdate,
+  flip,
+  useClick,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useListNavigation,
+  useRole,
+  useTypeahead,
+  type Placement,
+} from "@floating-ui/react";
+import { useRef, useState } from "react";
+import type { CommonProps } from "../../utils/CommonProps";
+
+export type MenuProps = CommonProps;
+
+export const Menu = (props: MenuProps) => {
+  const { children } = props;
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+  const [hasFocusInside, setHasFocusInside] = useState(false);
+
+  const { refs, floatingStyles, context } = useFloating({
+    placement: "bottom-start",
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [flip()],
+  });
+
+  const elementsRef = useRef([]);
+
+  const listNav = useListNavigation(context, {
+    listRef: elementsRef,
+    activeIndex,
+    onNavigate: setActiveIndex,
+  });
+
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context, { role: "listbox" });
+
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(
+    [listNav, click, dismiss, role],
+  );
+
+  return;
+};

packages/ui-react/src/componnets/Menu/MenuContext.ts

@@ -0,0 +1,19 @@
+import { createContext } from "react";
+
+export type MenuContextValue = {
+  getItemProps: (
+    userProps?: React.HTMLProps<HTMLElement>,
+  ) => Record<string, unknown>;
+  activeIndex: number | null;
+  setActiveIndex: React.Dispatch<React.SetStateAction<number | null>>;
+  setHasFocusInside: React.Dispatch<React.SetStateAction<boolean>>;
+  isOpen: boolean;
+};
+
+export const MenuContext = createContext<MenuContextValue>({
+  getItemProps: () => ({}),
+  activeIndex: null,
+  setActiveIndex: () => {},
+  setHasFocusInside: () => {},
+  isOpen: false,
+});

packages/ui-react/src/componnets/Popover/Popover.tsx

@@ -0,0 +1,20 @@
+import {
+  autoUpdate,
+  flip,
+  useClick,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useListNavigation,
+  useRole,
+  useTypeahead,
+  type Placement,
+} from "@floating-ui/react";
+import { useRef, useState } from "react";
+import type { CommonProps } from "../../utils/CommonProps";
+
+export type PopvoverProps = CommonProps & {
+  placement?: Placement;
+};
+
+export const Popover = (props: PopvoverProps) => {};

packages/ui-react/src/componnets/Popover/PopoverTrigger.tsx

@@ -0,0 +1,3 @@
+export type PopoverTriggerProps = {};
+
+export const PopoverTrigger = () => {};