@mindlogic-ai/logician-ui 3.0.0-alpha.18 → 3.0.0-alpha.19

package/README.md

@@ -228,6 +228,25 @@ Available aliases:
    - `index.tsx` - Exports
 3. Add export to main `index.ts`
 
+## Technical Notes & TODOs
+
+### `createScaledContext()` factory
+
+`Popover`, `Menu`, and similar floating components each define a structurally identical context (`{ baseFontSize }`) to pass a font size down to their content wrapper for use with `ScaledContext`. This is currently duplicated across `Popover.types.ts` and `Menu.types.ts`.
+
+If a third component (e.g. Tooltip, Dialog) adopts this pattern, extract a shared factory:
+
+```ts
+// utils/createScaledContext.ts
+export function createScaledContext(defaultFontSize: string | number = '14px') {
+  const Context = React.createContext({ baseFontSize: defaultFontSize });
+  const useContext = () => React.useContext(Context);
+  return { Context, useContext };
+}
+```
+
+This is intentionally deferred — two instances don't justify the abstraction yet.
+
 ## Contributing
 
 1. Fork the repository

package/dist/components/Menu/Menu.d.ts

@@ -0,0 +1,24 @@
+import { Menu as ChakraMenu } from '@chakra-ui/react';
+import { MenuProps } from './Menu.types';
+export declare const Menu: {
+    ({ baseFontSize, children, ...props }: MenuProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    Trigger: import("react").ForwardRefExoticComponent<ChakraMenu.TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    TriggerItem: import("react").ForwardRefExoticComponent<ChakraMenu.TriggerItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    ContextTrigger: import("react").ForwardRefExoticComponent<ChakraMenu.ContextTriggerProps & import("react").RefAttributes<HTMLElement>>;
+    List: import("react").ForwardRefExoticComponent<ChakraMenu.ContentProps & {
+        portalled?: boolean;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    Item: ({ variant, value, children, icon, rightIcon, ...rest }: import("./MenuItem.types").MenuItemProps) => import("react/jsx-runtime").JSX.Element;
+    ItemGroup: import("react").ForwardRefExoticComponent<ChakraMenu.ItemGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+    ItemGroupLabel: import("react").ForwardRefExoticComponent<ChakraMenu.ItemGroupLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+    ItemCommand: import("react").ForwardRefExoticComponent<ChakraMenu.CommandProps & import("react").RefAttributes<HTMLElement>>;
+    CheckboxItem: import("react").ForwardRefExoticComponent<ChakraMenu.CheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    RadioItem: import("react").ForwardRefExoticComponent<ChakraMenu.RadioItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    RadioItemGroup: import("react").ForwardRefExoticComponent<ChakraMenu.RadioItemGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+    Separator: import("react").ForwardRefExoticComponent<ChakraMenu.SeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+    Arrow: import("react").ForwardRefExoticComponent<ChakraMenu.ArrowProps & import("react").RefAttributes<HTMLDivElement>>;
+    ArrowTip: import("react").ForwardRefExoticComponent<ChakraMenu.ArrowTipProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+//# sourceMappingURL=Menu.d.ts.map

package/dist/components/Menu/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,EAAe,SAAS,EAAE,MAAM,cAAc,CAAC;AAUtD,eAAO,MAAM,IAAI;2CAPgD,SAAS;;;;;;;;;;;;;;;;;;;CAsBxE,CAAC"}

package/dist/components/Menu/Menu.js

@@ -0,0 +1,30 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@chakra-ui/react');
+var MenuItem = require('./MenuItem.js');
+var Menu_types = require('./Menu.types.js');
+var MenuList = require('./MenuList.js');
+
+const MenuBase = ({ baseFontSize = '14px', children, ...props }) => (jsxRuntime.jsx(Menu_types.MenuContext.Provider, { value: { baseFontSize }, children: jsxRuntime.jsx(react.Menu.Root, { ...props, children: children }) }));
+MenuBase.displayName = 'Menu';
+const Menu = Object.assign(MenuBase, {
+    Trigger: react.Menu.Trigger,
+    TriggerItem: react.Menu.TriggerItem,
+    ContextTrigger: react.Menu.ContextTrigger,
+    List: MenuList.MenuList,
+    Item: MenuItem.MenuItem,
+    ItemGroup: react.Menu.ItemGroup,
+    ItemGroupLabel: react.Menu.ItemGroupLabel,
+    ItemCommand: react.Menu.ItemCommand,
+    CheckboxItem: react.Menu.CheckboxItem,
+    RadioItem: react.Menu.RadioItem,
+    RadioItemGroup: react.Menu.RadioItemGroup,
+    Separator: react.Menu.Separator,
+    Arrow: react.Menu.Arrow,
+    ArrowTip: react.Menu.ArrowTip,
+});
+
+exports.Menu = Menu;
+//# sourceMappingURL=Menu.js.map

package/dist/components/Menu/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":[null],"names":["_jsx","MenuContext","ChakraMenu","MenuList","MenuItem"],"mappings":";;;;;;;;;AAMA,MAAM,QAAQ,GAAG,CAAC,EAAE,YAAY,GAAG,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAa,MACxEA,cAAA,CAACC,sBAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,YAAY,EAAE,YAC3CD,cAAA,CAACE,UAAU,CAAC,IAAI,OAAK,KAAK,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAmB,EAAA,CACnC,CACxB;AACD,QAAQ,CAAC,WAAW,GAAG,MAAM;MAEhB,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE;IAC1C,OAAO,EAAEA,UAAU,CAAC,OAAO;IAC3B,WAAW,EAAEA,UAAU,CAAC,WAAW;IACnC,cAAc,EAAEA,UAAU,CAAC,cAAc;AACzC,IAAA,IAAI,EAAEC,iBAAQ;AACd,IAAA,IAAI,EAAEC,iBAAQ;IACd,SAAS,EAAEF,UAAU,CAAC,SAAS;IAC/B,cAAc,EAAEA,UAAU,CAAC,cAAc;IACzC,WAAW,EAAEA,UAAU,CAAC,WAAW;IACnC,YAAY,EAAEA,UAAU,CAAC,YAAY;IACrC,SAAS,EAAEA,UAAU,CAAC,SAAS;IAC/B,cAAc,EAAEA,UAAU,CAAC,cAAc;IACzC,SAAS,EAAEA,UAAU,CAAC,SAAS;IAC/B,KAAK,EAAEA,UAAU,CAAC,KAAK;IACvB,QAAQ,EAAEA,UAAU,CAAC,QAAQ;AAC9B,CAAA;;;;"}

package/dist/components/Menu/Menu.mjs

@@ -0,0 +1,28 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Menu as Menu$1 } from '@chakra-ui/react';
+import { MenuItem } from './MenuItem.mjs';
+import { MenuContext } from './Menu.types.mjs';
+import { MenuList } from './MenuList.mjs';
+
+const MenuBase = ({ baseFontSize = '14px', children, ...props }) => (jsx(MenuContext.Provider, { value: { baseFontSize }, children: jsx(Menu$1.Root, { ...props, children: children }) }));
+MenuBase.displayName = 'Menu';
+const Menu = Object.assign(MenuBase, {
+    Trigger: Menu$1.Trigger,
+    TriggerItem: Menu$1.TriggerItem,
+    ContextTrigger: Menu$1.ContextTrigger,
+    List: MenuList,
+    Item: MenuItem,
+    ItemGroup: Menu$1.ItemGroup,
+    ItemGroupLabel: Menu$1.ItemGroupLabel,
+    ItemCommand: Menu$1.ItemCommand,
+    CheckboxItem: Menu$1.CheckboxItem,
+    RadioItem: Menu$1.RadioItem,
+    RadioItemGroup: Menu$1.RadioItemGroup,
+    Separator: Menu$1.Separator,
+    Arrow: Menu$1.Arrow,
+    ArrowTip: Menu$1.ArrowTip,
+});
+
+export { Menu };
+//# sourceMappingURL=Menu.mjs.map

package/dist/components/Menu/Menu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.mjs","sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":[null],"names":["_jsx","ChakraMenu"],"mappings":";;;;;;;AAMA,MAAM,QAAQ,GAAG,CAAC,EAAE,YAAY,GAAG,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAa,MACxEA,GAAA,CAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,YAAY,EAAE,YAC3CA,GAAA,CAACC,MAAU,CAAC,IAAI,OAAK,KAAK,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAmB,EAAA,CACnC,CACxB;AACD,QAAQ,CAAC,WAAW,GAAG,MAAM;MAEhB,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE;IAC1C,OAAO,EAAEA,MAAU,CAAC,OAAO;IAC3B,WAAW,EAAEA,MAAU,CAAC,WAAW;IACnC,cAAc,EAAEA,MAAU,CAAC,cAAc;AACzC,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,IAAI,EAAE,QAAQ;IACd,SAAS,EAAEA,MAAU,CAAC,SAAS;IAC/B,cAAc,EAAEA,MAAU,CAAC,cAAc;IACzC,WAAW,EAAEA,MAAU,CAAC,WAAW;IACnC,YAAY,EAAEA,MAAU,CAAC,YAAY;IACrC,SAAS,EAAEA,MAAU,CAAC,SAAS;IAC/B,cAAc,EAAEA,MAAU,CAAC,cAAc;IACzC,SAAS,EAAEA,MAAU,CAAC,SAAS;IAC/B,KAAK,EAAEA,MAAU,CAAC,KAAK;IACvB,QAAQ,EAAEA,MAAU,CAAC,QAAQ;AAC9B,CAAA;;;;"}

package/dist/components/Menu/Menu.types.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Menu as ChakraMenu } from '@chakra-ui/react';
+export interface MenuContextValue {
+    baseFontSize: string | number;
+}
+export declare const MenuContext: React.Context<MenuContextValue>;
+export declare const useMenuContext: () => MenuContextValue;
+export type MenuProps = React.ComponentPropsWithoutRef<typeof ChakraMenu.Root> & {
+    baseFontSize?: string | number;
+};
+//# sourceMappingURL=Menu.types.d.ts.map

package/dist/components/Menu/Menu.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.types.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,WAAW,iCAEtB,CAAC;AAEH,eAAO,MAAM,cAAc,wBAAsC,CAAC;AAElE,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,wBAAwB,CACpD,OAAO,UAAU,CAAC,IAAI,CACvB,GAAG;IACF,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC,CAAC"}

package/dist/components/Menu/Menu.types.js

@@ -0,0 +1,13 @@
+"use client";
+'use strict';
+
+var React = require('react');
+
+const MenuContext = React.createContext({
+    baseFontSize: '14px',
+});
+const useMenuContext = () => React.useContext(MenuContext);
+
+exports.MenuContext = MenuContext;
+exports.useMenuContext = useMenuContext;
+//# sourceMappingURL=Menu.types.js.map

package/dist/components/Menu/Menu.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.types.js","sources":["../../../src/components/Menu/Menu.types.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAOO,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAmB;AAC/D,IAAA,YAAY,EAAE,MAAM;AACrB,CAAA;AAEM,MAAM,cAAc,GAAG,MAAM,KAAK,CAAC,UAAU,CAAC,WAAW;;;;;"}

package/dist/components/Menu/Menu.types.mjs

@@ -0,0 +1,10 @@
+"use client";
+import React__default from 'react';
+
+const MenuContext = React__default.createContext({
+    baseFontSize: '14px',
+});
+const useMenuContext = () => React__default.useContext(MenuContext);
+
+export { MenuContext, useMenuContext };
+//# sourceMappingURL=Menu.types.mjs.map

package/dist/components/Menu/Menu.types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.types.mjs","sources":["../../../src/components/Menu/Menu.types.ts"],"sourcesContent":[null],"names":["React"],"mappings":";;;AAOO,MAAM,WAAW,GAAGA,cAAK,CAAC,aAAa,CAAmB;AAC/D,IAAA,YAAY,EAAE,MAAM;AACrB,CAAA;AAEM,MAAM,cAAc,GAAG,MAAMA,cAAK,CAAC,UAAU,CAAC,WAAW;;;;"}

package/dist/components/Menu/MenuItem.js

@@ -11,7 +11,7 @@ const MenuItem = ({ variant = MenuItem_types.ItemVariant.Default, value, childre
     return (jsxRuntime.jsxs(react.Menu.Item, { value: value, color: isDangerVariant ? 'danger.main' : 'gray.1000', py: 2, minW: "fit-content", fontWeight: "semibold", gap: 3, cursor: "pointer", _hover: {
             color: isDangerVariant ? 'danger.main' : 'gray.1500',
             backgroundColor: isDangerVariant ? 'danger.lightest' : 'gray.50',
-        }, ...focusRing.focusRing, ...rest, children: [icon && icon, children, rightIcon && jsxRuntime.jsx(react.Spacer, {}), rightIcon && rightIcon] }));
+        }, ...focusRing.focusRing, ...rest, children: [icon, children, rightIcon && jsxRuntime.jsx(react.Spacer, {}), rightIcon] }));
 };
 
 exports.MenuItem = MenuItem;

package/dist/components/Menu/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","sources":["../../../src/components/Menu/MenuItem.tsx"],"sourcesContent":[null],"names":["ItemVariant","_jsxs","Menu","focusRing","_jsx","Spacer"],"mappings":";;;;;;;;AAMO,MAAM,QAAQ,GAAG,CAAC,EACvB,OAAO,GAAGA,0BAAW,CAAC,OAAO,EAC7B,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,GAAG,IAAI,EACO,KAAI;AAClB,IAAA,MAAM,eAAe,GAAG,OAAO,KAAKA,0BAAW,CAAC,MAAM;AAEtD,IAAA,QACEC,eAAA,CAACC,UAAI,CAAC,IAAI,EAAA,EACR,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,eAAe,GAAG,aAAa,GAAG,WAAW,EACpD,EAAE,EAAE,CAAC,EACL,IAAI,EAAC,aAAa,EAClB,UAAU,EAAC,UAAU,EACrB,GAAG,EAAE,CAAC,EACN,MAAM,EAAC,SAAS,EAChB,MAAM,EAAE;YACN,KAAK,EAAE,eAAe,GAAG,aAAa,GAAG,WAAW;YACpD,eAAe,EAAE,eAAe,GAAG,iBAAiB,GAAG,SAAS;SACjE,EAAA,GACGC,mBAAS,KACT,IAAI,EAAA,QAAA,EAAA,CAEP,IAAI,IAAI,IAAI,EACZ,QAAQ,EACR,SAAS,IAAIC,cAAA,CAACC,YAAM,EAAA,EAAA,CAAG,EACvB,SAAS,IAAI,SAAS,CAAA,EAAA,CACb;AAEhB;;;;"}
+{"version":3,"file":"MenuItem.js","sources":["../../../src/components/Menu/MenuItem.tsx"],"sourcesContent":[null],"names":["ItemVariant","_jsxs","Menu","focusRing","_jsx","Spacer"],"mappings":";;;;;;;;AAMO,MAAM,QAAQ,GAAG,CAAC,EACvB,OAAO,GAAGA,0BAAW,CAAC,OAAO,EAC7B,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,GAAG,IAAI,EACO,KAAI;AAClB,IAAA,MAAM,eAAe,GAAG,OAAO,KAAKA,0BAAW,CAAC,MAAM;AAEtD,IAAA,QACEC,eAAA,CAACC,UAAI,CAAC,IAAI,EAAA,EACR,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,eAAe,GAAG,aAAa,GAAG,WAAW,EACpD,EAAE,EAAE,CAAC,EACL,IAAI,EAAC,aAAa,EAClB,UAAU,EAAC,UAAU,EACrB,GAAG,EAAE,CAAC,EACN,MAAM,EAAC,SAAS,EAChB,MAAM,EAAE;YACN,KAAK,EAAE,eAAe,GAAG,aAAa,GAAG,WAAW;YACpD,eAAe,EAAE,eAAe,GAAG,iBAAiB,GAAG,SAAS;AACjE,SAAA,EAAA,GACGC,mBAAS,EAAA,GACT,IAAI,EAAA,QAAA,EAAA,CAEP,IAAI,EACJ,QAAQ,EACR,SAAS,IAAIC,eAACC,YAAM,EAAA,EAAA,CAAG,EACvB,SAAS,CAAA,EAAA,CACA;AAEhB;;;;"}

package/dist/components/Menu/MenuItem.mjs

@@ -9,7 +9,7 @@ const MenuItem = ({ variant = ItemVariant.Default, value, children, icon, rightI
     return (jsxs(Menu.Item, { value: value, color: isDangerVariant ? 'danger.main' : 'gray.1000', py: 2, minW: "fit-content", fontWeight: "semibold", gap: 3, cursor: "pointer", _hover: {
             color: isDangerVariant ? 'danger.main' : 'gray.1500',
             backgroundColor: isDangerVariant ? 'danger.lightest' : 'gray.50',
-        }, ...focusRing, ...rest, children: [icon && icon, children, rightIcon && jsx(Spacer, {}), rightIcon && rightIcon] }));
+        }, ...focusRing, ...rest, children: [icon, children, rightIcon && jsx(Spacer, {}), rightIcon] }));
 };
 
 export { MenuItem };

package/dist/components/Menu/MenuItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.mjs","sources":["../../../src/components/Menu/MenuItem.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAMO,MAAM,QAAQ,GAAG,CAAC,EACvB,OAAO,GAAG,WAAW,CAAC,OAAO,EAC7B,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,GAAG,IAAI,EACO,KAAI;AAClB,IAAA,MAAM,eAAe,GAAG,OAAO,KAAK,WAAW,CAAC,MAAM;AAEtD,IAAA,QACEA,IAAA,CAAC,IAAI,CAAC,IAAI,EAAA,EACR,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,eAAe,GAAG,aAAa,GAAG,WAAW,EACpD,EAAE,EAAE,CAAC,EACL,IAAI,EAAC,aAAa,EAClB,UAAU,EAAC,UAAU,EACrB,GAAG,EAAE,CAAC,EACN,MAAM,EAAC,SAAS,EAChB,MAAM,EAAE;YACN,KAAK,EAAE,eAAe,GAAG,aAAa,GAAG,WAAW;YACpD,eAAe,EAAE,eAAe,GAAG,iBAAiB,GAAG,SAAS;SACjE,EAAA,GACG,SAAS,KACT,IAAI,EAAA,QAAA,EAAA,CAEP,IAAI,IAAI,IAAI,EACZ,QAAQ,EACR,SAAS,IAAIC,GAAA,CAAC,MAAM,EAAA,EAAA,CAAG,EACvB,SAAS,IAAI,SAAS,CAAA,EAAA,CACb;AAEhB;;;;"}
+{"version":3,"file":"MenuItem.mjs","sources":["../../../src/components/Menu/MenuItem.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAMO,MAAM,QAAQ,GAAG,CAAC,EACvB,OAAO,GAAG,WAAW,CAAC,OAAO,EAC7B,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,GAAG,IAAI,EACO,KAAI;AAClB,IAAA,MAAM,eAAe,GAAG,OAAO,KAAK,WAAW,CAAC,MAAM;AAEtD,IAAA,QACEA,IAAA,CAAC,IAAI,CAAC,IAAI,EAAA,EACR,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,eAAe,GAAG,aAAa,GAAG,WAAW,EACpD,EAAE,EAAE,CAAC,EACL,IAAI,EAAC,aAAa,EAClB,UAAU,EAAC,UAAU,EACrB,GAAG,EAAE,CAAC,EACN,MAAM,EAAC,SAAS,EAChB,MAAM,EAAE;YACN,KAAK,EAAE,eAAe,GAAG,aAAa,GAAG,WAAW;YACpD,eAAe,EAAE,eAAe,GAAG,iBAAiB,GAAG,SAAS;AACjE,SAAA,EAAA,GACG,SAAS,EAAA,GACT,IAAI,EAAA,QAAA,EAAA,CAEP,IAAI,EACJ,QAAQ,EACR,SAAS,IAAIC,IAAC,MAAM,EAAA,EAAA,CAAG,EACvB,SAAS,CAAA,EAAA,CACA;AAEhB;;;;"}

package/dist/components/Menu/MenuList.d.ts

@@ -1,5 +1,8 @@
-import { MenuContentProps as ChakraMenuContentProps } from '@chakra-ui/react';
-export interface MenuListProps extends ChakraMenuContentProps {
-}
-export declare const MenuList: ({ children, ...rest }: MenuListProps) => import("react/jsx-runtime").JSX.Element;
+import { Menu, MenuContentProps as ChakraMenuContentProps } from '@chakra-ui/react';
+export type MenuListProps = ChakraMenuContentProps & {
+    portalled?: boolean;
+};
+export declare const MenuList: import("react").ForwardRefExoticComponent<Menu.ContentProps & {
+    portalled?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=MenuList.d.ts.map

package/dist/components/Menu/MenuList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,gBAAgB,IAAI,sBAAsB,EAE3C,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,aAAc,SAAQ,sBAAsB;CAAG;AAEhE,eAAO,MAAM,QAAQ,GAAI,uBAAuB,aAAa,4CAiB5D,CAAC"}
+{"version":3,"file":"MenuList.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,gBAAgB,IAAI,sBAAsB,EAAU,MAAM,kBAAkB,CAAC;AAK5F,MAAM,MAAM,aAAa,GAAG,sBAAsB,GAAG;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,QAAQ;gBAHP,OAAO;kDAyBpB,CAAC"}

package/dist/components/Menu/MenuList.js

@@ -2,11 +2,17 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var react = require('@chakra-ui/react');
+var ScaledContext = require('../ScaledContext/ScaledContext.js');
+var Menu_types = require('./Menu.types.js');
 
-const MenuList = ({ children, ...rest }) => {
-    return (jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsx(react.Menu.Positioner, { children: jsxRuntime.jsx(react.Menu.Content, { border: "1px solid", borderColor: "gray.200", borderRadius: "md", boxShadow: "0 5px 20px 1px var(--chakra-colors-gray-50)", p: "1.5", ...rest, children: children }) }) }));
-};
+const MenuList = React.forwardRef(({ children, portalled = true, ...rest }, ref) => {
+    const { baseFontSize } = Menu_types.useMenuContext();
+    const content = (jsxRuntime.jsx(react.Menu.Positioner, { children: jsxRuntime.jsx(react.Menu.Content, { ref: ref, border: "1px solid", borderColor: "gray.200", borderRadius: "md", boxShadow: "0 5px 20px 1px {colors.gray.50}", p: "1.5", ...rest, children: jsxRuntime.jsx(ScaledContext.ScaledContext, { fontSize: baseFontSize, children: children }) }) }));
+    return portalled ? jsxRuntime.jsx(react.Portal, { children: content }) : content;
+});
+MenuList.displayName = 'Menu.List';
 
 exports.MenuList = MenuList;
 //# sourceMappingURL=MenuList.js.map

package/dist/components/Menu/MenuList.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuList.js","sources":["../../../src/components/Menu/MenuList.tsx"],"sourcesContent":[null],"names":["_jsx","Portal","Menu"],"mappings":";;;;;;AAQO,MAAM,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAiB,KAAI;AAC/D,IAAA,QACEA,cAAA,CAACC,YAAM,cACLD,cAAA,CAACE,UAAI,CAAC,UAAU,EAAA,EAAA,QAAA,EACdF,cAAA,CAACE,UAAI,CAAC,OAAO,EAAA,EACX,MAAM,EAAC,WAAW,EAClB,WAAW,EAAC,UAAU,EACtB,YAAY,EAAC,IAAI,EACjB,SAAS,EAAC,6CAA6C,EACvD,CAAC,EAAC,KAAK,EAAA,GACH,IAAI,EAAA,QAAA,EAEP,QAAQ,GACI,EAAA,CACC,EAAA,CACX;AAEb;;;;"}
+{"version":3,"file":"MenuList.js","sources":["../../../src/components/Menu/MenuList.tsx"],"sourcesContent":[null],"names":["forwardRef","useMenuContext","_jsx","Menu","ScaledContext","Portal"],"mappings":";;;;;;;;;MAUa,QAAQ,GAAGA,gBAAU,CAChC,CAAC,EAAE,QAAQ,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAI;AAC/C,IAAA,MAAM,EAAE,YAAY,EAAE,GAAGC,yBAAc,EAAE;IAEzC,MAAM,OAAO,IACXC,cAAA,CAACC,UAAI,CAAC,UAAU,EAAA,EAAA,QAAA,EACdD,cAAA,CAACC,UAAI,CAAC,OAAO,EAAA,EACX,GAAG,EAAE,GAAG,EACR,MAAM,EAAC,WAAW,EAClB,WAAW,EAAC,UAAU,EACtB,YAAY,EAAC,IAAI,EACjB,SAAS,EAAC,iCAAiC,EAC3C,CAAC,EAAC,KAAK,EAAA,GACH,IAAI,EAAA,QAAA,EAERD,eAACE,2BAAa,EAAA,EAAC,QAAQ,EAAE,YAAY,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAiB,EAAA,CACpD,EAAA,CACC,CACnB;AAED,IAAA,OAAO,SAAS,GAAGF,cAAA,CAACG,YAAM,EAAA,EAAA,QAAA,EAAE,OAAO,EAAA,CAAU,GAAG,OAAO;AACzD,CAAC;AAEH,QAAQ,CAAC,WAAW,GAAG,WAAW;;;;"}

package/dist/components/Menu/MenuList.mjs

@@ -1,10 +1,16 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { Portal, Menu } from '@chakra-ui/react';
+import { forwardRef } from 'react';
+import { Menu, Portal } from '@chakra-ui/react';
+import { ScaledContext } from '../ScaledContext/ScaledContext.mjs';
+import { useMenuContext } from './Menu.types.mjs';
 
-const MenuList = ({ children, ...rest }) => {
-    return (jsx(Portal, { children: jsx(Menu.Positioner, { children: jsx(Menu.Content, { border: "1px solid", borderColor: "gray.200", borderRadius: "md", boxShadow: "0 5px 20px 1px var(--chakra-colors-gray-50)", p: "1.5", ...rest, children: children }) }) }));
-};
+const MenuList = forwardRef(({ children, portalled = true, ...rest }, ref) => {
+    const { baseFontSize } = useMenuContext();
+    const content = (jsx(Menu.Positioner, { children: jsx(Menu.Content, { ref: ref, border: "1px solid", borderColor: "gray.200", borderRadius: "md", boxShadow: "0 5px 20px 1px {colors.gray.50}", p: "1.5", ...rest, children: jsx(ScaledContext, { fontSize: baseFontSize, children: children }) }) }));
+    return portalled ? jsx(Portal, { children: content }) : content;
+});
+MenuList.displayName = 'Menu.List';
 
 export { MenuList };
 //# sourceMappingURL=MenuList.mjs.map

package/dist/components/Menu/MenuList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MenuList.mjs","sources":["../../../src/components/Menu/MenuList.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAQO,MAAM,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAiB,KAAI;AAC/D,IAAA,QACEA,GAAA,CAAC,MAAM,cACLA,GAAA,CAAC,IAAI,CAAC,UAAU,EAAA,EAAA,QAAA,EACdA,GAAA,CAAC,IAAI,CAAC,OAAO,EAAA,EACX,MAAM,EAAC,WAAW,EAClB,WAAW,EAAC,UAAU,EACtB,YAAY,EAAC,IAAI,EACjB,SAAS,EAAC,6CAA6C,EACvD,CAAC,EAAC,KAAK,EAAA,GACH,IAAI,EAAA,QAAA,EAEP,QAAQ,GACI,EAAA,CACC,EAAA,CACX;AAEb;;;;"}
+{"version":3,"file":"MenuList.mjs","sources":["../../../src/components/Menu/MenuList.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;;MAUa,QAAQ,GAAG,UAAU,CAChC,CAAC,EAAE,QAAQ,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,KAAI;AAC/C,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,cAAc,EAAE;IAEzC,MAAM,OAAO,IACXA,GAAA,CAAC,IAAI,CAAC,UAAU,EAAA,EAAA,QAAA,EACdA,GAAA,CAAC,IAAI,CAAC,OAAO,EAAA,EACX,GAAG,EAAE,GAAG,EACR,MAAM,EAAC,WAAW,EAClB,WAAW,EAAC,UAAU,EACtB,YAAY,EAAC,IAAI,EACjB,SAAS,EAAC,iCAAiC,EAC3C,CAAC,EAAC,KAAK,EAAA,GACH,IAAI,EAAA,QAAA,EAERA,IAAC,aAAa,EAAA,EAAC,QAAQ,EAAE,YAAY,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAiB,EAAA,CACpD,EAAA,CACC,CACnB;AAED,IAAA,OAAO,SAAS,GAAGA,GAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EAAE,OAAO,EAAA,CAAU,GAAG,OAAO;AACzD,CAAC;AAEH,QAAQ,CAAC,WAAW,GAAG,WAAW;;;;"}

package/dist/components/Menu/index.d.ts

@@ -1,7 +1,6 @@
-export { MenuButton } from './MenuButton';
-export type * from './MenuButton.types';
+export { Menu } from './Menu';
+export type { MenuProps } from './Menu.types';
 export { MenuItem } from './MenuItem';
 export type * from './MenuItem.types';
 export { MenuList } from './MenuList';
-export { Menu } from '@chakra-ui/react';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Menu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,mBAAmB,oBAAoB,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,mBAAmB,kBAAkB,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,mBAAmB,kBAAkB,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -52,10 +52,9 @@ var Markdown = require('./components/Markdown/Markdown.js');
 var Masonry = require('./components/Masonry/Masonry.js');
 var MaxLengthIndicator = require('./components/MaxLengthIndicator/MaxLengthIndicator.js');
 var MDXEditor = require('./components/MDXEditor/MDXEditor.js');
-var MenuButton = require('./components/Menu/MenuButton.js');
+var Menu = require('./components/Menu/Menu.js');
 var MenuItem = require('./components/Menu/MenuItem.js');
 var MenuList = require('./components/Menu/MenuList.js');
-var react = require('@chakra-ui/react');
 var Modal = require('./components/Modal/Modal.js');
 var ModalBody = require('./components/Modal/ModalBody.js');
 var ModalCloseButton = require('./components/Modal/ModalCloseButton.js');
@@ -101,6 +100,7 @@ var TabList = require('./components/Tabs/TabList/TabList.js');
 var TabPanel = require('./components/Tabs/TabPanel.js');
 var TabPanels = require('./components/Tabs/TabPanels.js');
 var Tabs = require('./components/Tabs/Tabs.js');
+var react = require('@chakra-ui/react');
 var Tag = require('./components/Tag/Tag.js');
 var Tag_styles = require('./components/Tag/Tag.styles.js');
 var TagCloseButton = require('./components/Tag/TagCloseButton/TagCloseButton.js');
@@ -187,21 +187,9 @@ exports.baseMarkdownComponents = Markdown.baseMarkdownComponents;
 exports.Masonry = Masonry.Masonry;
 exports.MaxLengthIndicator = MaxLengthIndicator.MaxLengthIndicator;
 exports.MDXEditor = MDXEditor.MDXEditor;
-exports.MenuButton = MenuButton.MenuButton;
+exports.Menu = Menu.Menu;
 exports.MenuItem = MenuItem.MenuItem;
 exports.MenuList = MenuList.MenuList;
-Object.defineProperty(exports, "Menu", {
-	enumerable: true,
-	get: function () { return react.Menu; }
-});
-Object.defineProperty(exports, "TagLeftIcon", {
-	enumerable: true,
-	get: function () { return react.Icon; }
-});
-Object.defineProperty(exports, "TagRightIcon", {
-	enumerable: true,
-	get: function () { return react.Icon; }
-});
 exports.Modal = Modal.Modal;
 exports.ModalBody = ModalBody.ModalBody;
 exports.ModalCloseButton = ModalCloseButton.ModalCloseButton;
@@ -252,6 +240,14 @@ exports.TabList = TabList.TabList;
 exports.TabPanel = TabPanel.TabPanel;
 exports.TabPanels = TabPanels.TabPanels;
 exports.Tabs = Tabs.Tabs;
+Object.defineProperty(exports, "TagLeftIcon", {
+	enumerable: true,
+	get: function () { return react.Icon; }
+});
+Object.defineProperty(exports, "TagRightIcon", {
+	enumerable: true,
+	get: function () { return react.Icon; }
+});
 exports.Tag = Tag.Tag;
 exports.getTagStyles = Tag_styles.getTagStyles;
 exports.tagColorPaletteStyles = Tag_styles.tagColorPaletteStyles;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.mjs

@@ -50,10 +50,9 @@ export { Markdown, baseMarkdownComponents } from './components/Markdown/Markdown
 export { Masonry } from './components/Masonry/Masonry.mjs';
 export { MaxLengthIndicator } from './components/MaxLengthIndicator/MaxLengthIndicator.mjs';
 export { MDXEditor } from './components/MDXEditor/MDXEditor.mjs';
-export { MenuButton } from './components/Menu/MenuButton.mjs';
+export { Menu } from './components/Menu/Menu.mjs';
 export { MenuItem } from './components/Menu/MenuItem.mjs';
 export { MenuList } from './components/Menu/MenuList.mjs';
-export { Menu, Icon as TagLeftIcon, Icon as TagRightIcon } from '@chakra-ui/react';
 export { Modal } from './components/Modal/Modal.mjs';
 export { ModalBody } from './components/Modal/ModalBody.mjs';
 export { ModalCloseButton } from './components/Modal/ModalCloseButton.mjs';
@@ -99,6 +98,7 @@ export { TabList } from './components/Tabs/TabList/TabList.mjs';
 export { TabPanel } from './components/Tabs/TabPanel.mjs';
 export { TabPanels } from './components/Tabs/TabPanels.mjs';
 export { Tabs } from './components/Tabs/Tabs.mjs';
+export { Icon as TagLeftIcon, Icon as TagRightIcon } from '@chakra-ui/react';
 export { Tag } from './components/Tag/Tag.mjs';
 export { getTagStyles, tagColorPaletteStyles, tagColorPalettes, tagVariants } from './components/Tag/Tag.styles.mjs';
 export { TagCloseButton } from './components/Tag/TagCloseButton/TagCloseButton.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindlogic-ai/logician-ui",
-  "version": "3.0.0-alpha.18",
+  "version": "3.0.0-alpha.19",
   "description": "A comprehensive React design system built on Chakra UI",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/components/Menu/Menu.stories.tsx

@@ -3,12 +3,11 @@ import { useState } from 'react';
 
 import { IoChevronDownOutline, SlSettings } from '../Icon';
 import { IconButton } from '../IconButton';
-import { Menu, MenuButton, MenuItem, MenuList } from '.';
-import { MenuItemProps } from './MenuItem.types';
 import { Button } from '../Button/Button';
+import { Menu } from './Menu';
+import { MenuItemProps } from './MenuItem.types';
 
-// Interface for story-specific menu item data
-interface StoryMenuItemProps {
+interface StoryMenuItemData {
   label: string;
   onClick?: () => void;
   itemIcon?: React.ReactElement;
@@ -16,24 +15,26 @@ interface StoryMenuItemProps {
   variant?: MenuItemProps['variant'];
 }
 
-// Props for the story templates
 interface MenuStoryProps {
   label?: string;
-  menuItems: StoryMenuItemProps[];
+  baseFontSize?: string;
+  menuItems: StoryMenuItemData[];
 }
 
 const meta = {
   title: 'Components/Menu',
-  // @ts-expect-error - Menu is a namespace, not a component
   component: Menu,
+  parameters: { layout: 'centered' },
   args: {
     label: 'Trigger',
+    baseFontSize: '14px',
     menuItems: [
       { label: 'Profile', onClick: () => alert('Profile clicked') },
       { label: 'Settings', onClick: () => alert('Settings clicked') },
     ],
   },
   argTypes: {
+    baseFontSize: { control: 'text' },
     menuItems: { control: 'object' },
   },
 } satisfies Meta<MenuStoryProps>;
@@ -42,260 +43,145 @@ export default meta;
 
 type Story = StoryObj<MenuStoryProps>;
 
-export const DefaultMenu: Story = {
-  args: {
-    menuItems: [
-      { label: 'Profile', onClick: () => alert('Profile clicked') },
-      {
-        label: 'Settings',
-        onClick: () => alert('Settings clicked'),
-      },
-    ],
-  },
-  render: ({ label, menuItems }) => (
-    <Menu.Root>
-      <MenuButton aria-label={'storybook button menu'} as={Button}>
-        {label} <IoChevronDownOutline />
-      </MenuButton>
-      <MenuList>
-        {menuItems.map((item: StoryMenuItemProps) => (
-          <MenuItem
-            key={item.label}
-            value={item.label}
-            variant={item.variant}
-            icon={item.itemIcon}
-            onClick={item.onClick}
-          >
-            {item.label}
-          </MenuItem>
-        ))}
-      </MenuList>
-    </Menu.Root>
+const renderItems = (items: StoryMenuItemData[]) =>
+  items.map(item => (
+    <Menu.Item
+      key={item.label}
+      value={item.label}
+      variant={item.variant}
+      icon={item.itemIcon}
+      rightIcon={item.rightItemIcon}
+      onClick={item.onClick}
+    >
+      {item.label}
+    </Menu.Item>
+  ));
+
+export const Default: Story = {
+  render: ({ label, baseFontSize, menuItems }) => (
+    <Menu baseFontSize={baseFontSize}>
+      <Menu.Trigger asChild>
+        <Button variant="outline">
+          {label} <IoChevronDownOutline />
+        </Button>
+      </Menu.Trigger>
+      <Menu.List>{renderItems(menuItems)}</Menu.List>
+    </Menu>
   ),
 };
 
-export const IconMenu: Story = {
+export const WithIcons: Story = {
   args: {
     menuItems: [
-      {
-        label: 'Profile',
-        onClick: () => alert('Profile clicked'),
-        itemIcon: <SlSettings />,
-      },
-      {
-        label: 'Settings',
-        onClick: () => alert('Settings clicked'),
-        itemIcon: <SlSettings />,
-      },
+      { label: 'Profile', onClick: () => alert('Profile clicked'), itemIcon: <SlSettings /> },
+      { label: 'Settings', onClick: () => alert('Settings clicked'), itemIcon: <SlSettings /> },
     ],
   },
-  render: ({ label, menuItems }) => (
-    <Menu.Root>
-      <MenuButton aria-label={'storybook button menu'} as={Button}>
-        {label} <IoChevronDownOutline />
-      </MenuButton>
-      <MenuList>
-        {menuItems.map((item: StoryMenuItemProps) => (
-          <MenuItem
-            key={item.label}
-            value={item.label}
-            variant={item.variant}
-            icon={item.itemIcon}
-            onClick={item.onClick}
-          >
-            {item.label}
-          </MenuItem>
-        ))}
-      </MenuList>
-    </Menu.Root>
+  render: ({ label, baseFontSize, menuItems }) => (
+    <Menu baseFontSize={baseFontSize}>
+      <Menu.Trigger asChild>
+        <Button variant="outline">
+          {label} <IoChevronDownOutline />
+        </Button>
+      </Menu.Trigger>
+      <Menu.List>{renderItems(menuItems)}</Menu.List>
+    </Menu>
   ),
 };
 
-export const RightIconMenu: Story = {
+export const WithRightIcons: Story = {
   args: {
     menuItems: [
-      {
-        label: 'Profile',
-        onClick: () => alert('Profile clicked'),
-        rightItemIcon: <SlSettings />,
-      },
-      {
-        label: 'Settings',
-        onClick: () => alert('Settings clicked'),
-        rightItemIcon: <SlSettings />,
-      },
+      { label: 'Profile', onClick: () => alert('Profile clicked'), rightItemIcon: <SlSettings /> },
+      { label: 'Settings', onClick: () => alert('Settings clicked'), rightItemIcon: <SlSettings /> },
     ],
   },
-  render: ({ label, menuItems }) => (
-    <Menu.Root>
-      <MenuButton aria-label={'storybook button menu'} as={Button}>
-        {label} <IoChevronDownOutline />
-      </MenuButton>
-      <MenuList>
-        {menuItems.map((item: StoryMenuItemProps) => (
-          <MenuItem
-            key={item.label}
-            value={item.label}
-            variant={item.variant}
-            rightIcon={item.rightItemIcon}
-            onClick={item.onClick}
-          >
-            {item.label}
-          </MenuItem>
-        ))}
-      </MenuList>
-    </Menu.Root>
+  render: ({ label, baseFontSize, menuItems }) => (
+    <Menu baseFontSize={baseFontSize}>
+      <Menu.Trigger asChild>
+        <Button variant="outline">
+          {label} <IoChevronDownOutline />
+        </Button>
+      </Menu.Trigger>
+      <Menu.List>{renderItems(menuItems)}</Menu.List>
+    </Menu>
   ),
 };
 
-export const BothSideIconMenu: Story = {
+export const WithBothIcons: Story = {
   args: {
     menuItems: [
-      {
-        label: 'Profile',
-        onClick: () => alert('Profile clicked'),
-        itemIcon: <SlSettings />,
-        rightItemIcon: <IoChevronDownOutline />,
-      },
-      {
-        label: 'Settings',
-        onClick: () => alert('Settings clicked'),
-        itemIcon: <SlSettings />,
-        rightItemIcon: <IoChevronDownOutline />,
-      },
+      { label: 'Profile', itemIcon: <SlSettings />, rightItemIcon: <IoChevronDownOutline />, onClick: () => alert('Profile clicked') },
+      { label: 'Settings', itemIcon: <SlSettings />, rightItemIcon: <IoChevronDownOutline />, onClick: () => alert('Settings clicked') },
     ],
   },
-  render: ({ label, menuItems }) => (
-    <Menu.Root>
-      <MenuButton aria-label={'storybook button menu'} as={Button}>
-        {label} <IoChevronDownOutline />
-      </MenuButton>
-      <MenuList>
-        {menuItems.map((item: StoryMenuItemProps) => (
-          <MenuItem
-            key={item.label}
-            value={item.label}
-            variant={item.variant}
-            icon={item.itemIcon}
-            rightIcon={item.rightItemIcon}
-            onClick={item.onClick}
-          >
-            {item.label}
-          </MenuItem>
-        ))}
-      </MenuList>
-    </Menu.Root>
+  render: ({ label, baseFontSize, menuItems }) => (
+    <Menu baseFontSize={baseFontSize}>
+      <Menu.Trigger asChild>
+        <Button variant="outline">
+          {label} <IoChevronDownOutline />
+        </Button>
+      </Menu.Trigger>
+      <Menu.List>{renderItems(menuItems)}</Menu.List>
+    </Menu>
   ),
 };
 
-export const DangerMenu: Story = {
+export const WithDangerItem: Story = {
   args: {
     menuItems: [
       { label: 'Profile', onClick: () => alert('Profile clicked') },
-      {
-        label: 'Settings',
-        onClick: () => alert('Settings clicked'),
-        itemIcon: <SlSettings />,
-        variant: 'danger',
-      },
+      { label: 'Delete', onClick: () => alert('Delete clicked'), itemIcon: <SlSettings />, variant: 'danger' },
     ],
   },
-  render: ({ label, menuItems }) => (
-    <Menu.Root>
-      <MenuButton aria-label={'storybook button menu'} as={Button}>
-        {label} <IoChevronDownOutline />
-      </MenuButton>
-      <MenuList>
-        {menuItems.map((item: StoryMenuItemProps) => (
-          <MenuItem
-            key={item.label}
-            value={item.label}
-            variant={item.variant}
-            icon={item.itemIcon}
-            onClick={item.onClick}
-          >
-            {item.label}
-          </MenuItem>
-        ))}
-      </MenuList>
-    </Menu.Root>
+  render: ({ label, baseFontSize, menuItems }) => (
+    <Menu baseFontSize={baseFontSize}>
+      <Menu.Trigger asChild>
+        <Button variant="outline">
+          {label} <IoChevronDownOutline />
+        </Button>
+      </Menu.Trigger>
+      <Menu.List>{renderItems(menuItems)}</Menu.List>
+    </Menu>
   ),
 };
 
-export const IconButtonTriggerMenu: Story = {
-  args: {
-    menuItems: [
-      { label: 'Profile', onClick: () => alert('Profile clicked') },
-      {
-        label: 'Settings',
-        onClick: () => alert('Settings clicked'),
-        itemIcon: <SlSettings />,
-      },
-    ],
-  },
-  argTypes: {
-    label: { table: { disable: true } },
-  },
-  render: ({ menuItems }) => (
-    <Menu.Root>
-      <MenuButton aria-label="storybook icon button menu" as={IconButton}>
-        <IoChevronDownOutline />
-      </MenuButton>
-      <MenuList>
-        {menuItems.map((item: StoryMenuItemProps) => (
-          <MenuItem
-            key={item.label}
-            value={item.label}
-            variant={item.variant}
-            icon={item.itemIcon}
-            onClick={item.onClick}
-          >
-            {item.label}
-          </MenuItem>
-        ))}
-      </MenuList>
-    </Menu.Root>
+export const IconButtonTrigger: Story = {
+  argTypes: { label: { table: { disable: true } } },
+  render: ({ baseFontSize, menuItems }) => (
+    <Menu baseFontSize={baseFontSize}>
+      <Menu.Trigger asChild>
+        <IconButton aria-label="Open menu"><IoChevronDownOutline /></IconButton>
+      </Menu.Trigger>
+      <Menu.List>{renderItems(menuItems)}</Menu.List>
+    </Menu>
   ),
 };
 
-export const SelectiveIconMenu: Story = {
-  args: {
-    menuItems: [
-      { label: 'Profile', onClick: () => alert('Profile clicked') },
-      { label: 'Settings', onClick: () => alert('Settings clicked') },
-      { label: 'Logout', onClick: () => alert('Logout clicked') },
-    ],
-  },
-  render: function SelectiveIconRender({ label, menuItems }) {
-    const [selectedLabel, setSelectedLabel] = useState<string | null>(
-      menuItems[0].label
-    );
-
-    const handleItemClick = (label: string, onClick?: () => void) => {
-      setSelectedLabel(label);
-      onClick && onClick();
-    };
+export const SelectiveIcon: Story = {
+  render: function SelectiveIconRender({ label, baseFontSize, menuItems }) {
+    const [selectedLabel, setSelectedLabel] = useState<string | null>(menuItems[0].label);
 
     return (
-      <Menu.Root>
-        <MenuButton aria-label={'storybook button menu'} as={Button}>
-          {label} <IoChevronDownOutline />
-        </MenuButton>
-        <MenuList>
-          {menuItems.map((item: StoryMenuItemProps) => (
-            <MenuItem
+      <Menu baseFontSize={baseFontSize}>
+        <Menu.Trigger asChild>
+          <Button variant="outline">
+            {label} <IoChevronDownOutline />
+          </Button>
+        </Menu.Trigger>
+        <Menu.List>
+          {menuItems.map(item => (
+            <Menu.Item
               key={item.label}
               value={item.label}
-              onClick={() => handleItemClick(item.label, item.onClick)}
-              icon={
-                selectedLabel === item.label ? <SlSettings /> : undefined
-              }
+              onClick={() => { setSelectedLabel(item.label); item.onClick?.(); }}
+              icon={selectedLabel === item.label ? <SlSettings /> : undefined}
             >
               {item.label}
-            </MenuItem>
+            </Menu.Item>
           ))}
-        </MenuList>
-      </Menu.Root>
+        </Menu.List>
+      </Menu>
     );
   },
 };

package/src/components/Menu/Menu.tsx

@@ -0,0 +1,29 @@
+import { Menu as ChakraMenu } from '@chakra-ui/react';
+
+import { MenuItem } from './MenuItem';
+import { MenuContext, MenuProps } from './Menu.types';
+import { MenuList } from './MenuList';
+
+const MenuBase = ({ baseFontSize = '14px', children, ...props }: MenuProps) => (
+  <MenuContext.Provider value={{ baseFontSize }}>
+    <ChakraMenu.Root {...props}>{children}</ChakraMenu.Root>
+  </MenuContext.Provider>
+);
+MenuBase.displayName = 'Menu';
+
+export const Menu = Object.assign(MenuBase, {
+  Trigger: ChakraMenu.Trigger,
+  TriggerItem: ChakraMenu.TriggerItem,
+  ContextTrigger: ChakraMenu.ContextTrigger,
+  List: MenuList,
+  Item: MenuItem,
+  ItemGroup: ChakraMenu.ItemGroup,
+  ItemGroupLabel: ChakraMenu.ItemGroupLabel,
+  ItemCommand: ChakraMenu.ItemCommand,
+  CheckboxItem: ChakraMenu.CheckboxItem,
+  RadioItem: ChakraMenu.RadioItem,
+  RadioItemGroup: ChakraMenu.RadioItemGroup,
+  Separator: ChakraMenu.Separator,
+  Arrow: ChakraMenu.Arrow,
+  ArrowTip: ChakraMenu.ArrowTip,
+});

package/src/components/Menu/Menu.types.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Menu as ChakraMenu } from '@chakra-ui/react';
+
+export interface MenuContextValue {
+  baseFontSize: string | number;
+}
+
+export const MenuContext = React.createContext<MenuContextValue>({
+  baseFontSize: '14px',
+});
+
+export const useMenuContext = () => React.useContext(MenuContext);
+
+export type MenuProps = React.ComponentPropsWithoutRef<
+  typeof ChakraMenu.Root
+> & {
+  baseFontSize?: string | number;
+};

package/src/components/Menu/MenuItem.tsx

@@ -30,10 +30,10 @@ export const MenuItem = ({
       {...focusRing}
       {...rest}
     >
-      {icon && icon}
+      {icon}
       {children}
       {rightIcon && <Spacer />}
-      {rightIcon && rightIcon}
+      {rightIcon}
     </Menu.Item>
   );
 };

package/src/components/Menu/MenuList.tsx

@@ -1,26 +1,34 @@
-import {
-  Menu,
-  MenuContentProps as ChakraMenuContentProps,
-  Portal,
-} from '@chakra-ui/react';
+import { forwardRef } from 'react';
+import { Menu, MenuContentProps as ChakraMenuContentProps, Portal } from '@chakra-ui/react';
 
-export interface MenuListProps extends ChakraMenuContentProps {}
+import { ScaledContext } from '../ScaledContext';
+import { useMenuContext } from './Menu.types';
 
-export const MenuList = ({ children, ...rest }: MenuListProps) => {
-  return (
-    <Portal>
+export type MenuListProps = ChakraMenuContentProps & {
+  portalled?: boolean;
+};
+
+export const MenuList = forwardRef<HTMLDivElement, MenuListProps>(
+  ({ children, portalled = true, ...rest }, ref) => {
+    const { baseFontSize } = useMenuContext();
+
+    const content = (
       <Menu.Positioner>
         <Menu.Content
+          ref={ref}
           border="1px solid"
           borderColor="gray.200"
           borderRadius="md"
-          boxShadow="0 5px 20px 1px var(--chakra-colors-gray-50)"
+          boxShadow="0 5px 20px 1px {colors.gray.50}"
           p="1.5"
           {...rest}
         >
-          {children}
+          <ScaledContext fontSize={baseFontSize}>{children}</ScaledContext>
         </Menu.Content>
       </Menu.Positioner>
-    </Portal>
-  );
-};
+    );
+
+    return portalled ? <Portal>{content}</Portal> : content;
+  }
+);
+MenuList.displayName = 'Menu.List';

package/src/components/Menu/index.ts

@@ -1,6 +1,5 @@
-export { MenuButton } from './MenuButton';
-export type * from './MenuButton.types';
+export { Menu } from './Menu';
+export type { MenuProps } from './Menu.types';
 export { MenuItem } from './MenuItem';
 export type * from './MenuItem.types';
 export { MenuList } from './MenuList';
-export { Menu } from '@chakra-ui/react';

package/dist/components/Menu/MenuButton.d.ts

@@ -1,3 +0,0 @@
-import { CustomMenuButtonProps } from './MenuButton.types';
-export declare const MenuButton: ({ as: Component, children, ...rest }: CustomMenuButtonProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=MenuButton.d.ts.map

package/dist/components/Menu/MenuButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MenuButton.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuButton.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAE3D,eAAO,MAAM,UAAU,GAAI,sCAIxB,qBAAqB,4CAMvB,CAAC"}

package/dist/components/Menu/MenuButton.js

@@ -1,12 +0,0 @@
-"use client";
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('@chakra-ui/react');
-
-const MenuButton = ({ as: Component, children, ...rest }) => {
-    return (jsxRuntime.jsx(react.Menu.Trigger, { asChild: true, children: jsxRuntime.jsx(Component, { ...rest, children: children }) }));
-};
-
-exports.MenuButton = MenuButton;
-//# sourceMappingURL=MenuButton.js.map

package/dist/components/Menu/MenuButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MenuButton.js","sources":["../../../src/components/Menu/MenuButton.tsx"],"sourcesContent":[null],"names":["_jsx","Menu"],"mappings":";;;;;;AAKO,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EAAE,SAAS,EACb,QAAQ,EACR,GAAG,IAAI,EACe,KAAI;AAC1B,IAAA,QACEA,cAAA,CAACC,UAAI,CAAC,OAAO,IAAC,OAAO,EAAA,IAAA,EAAA,QAAA,EACnBD,cAAA,CAAC,SAAS,OAAK,IAAI,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAa,EAAA,CAC9B;AAEnB;;;;"}

package/dist/components/Menu/MenuButton.mjs

@@ -1,10 +0,0 @@
-"use client";
-import { jsx } from 'react/jsx-runtime';
-import { Menu } from '@chakra-ui/react';
-
-const MenuButton = ({ as: Component, children, ...rest }) => {
-    return (jsx(Menu.Trigger, { asChild: true, children: jsx(Component, { ...rest, children: children }) }));
-};
-
-export { MenuButton };
-//# sourceMappingURL=MenuButton.mjs.map

package/dist/components/Menu/MenuButton.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"MenuButton.mjs","sources":["../../../src/components/Menu/MenuButton.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAKO,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EAAE,SAAS,EACb,QAAQ,EACR,GAAG,IAAI,EACe,KAAI;AAC1B,IAAA,QACEA,GAAA,CAAC,IAAI,CAAC,OAAO,IAAC,OAAO,EAAA,IAAA,EAAA,QAAA,EACnBA,GAAA,CAAC,SAAS,OAAK,IAAI,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAa,EAAA,CAC9B;AAEnB;;;;"}

package/dist/components/Menu/MenuButton.types.d.ts

@@ -1,20 +0,0 @@
-import { Button } from '@/components/Button';
-import type { ButtonProps } from '@/components/Button/Button.types';
-import { IconButton } from '@/components/IconButton';
-import type { IconButtonProps as CustomIconButtonProps } from '@/components/IconButton/IconButton.types';
-interface ButtonMenuButtonProps extends Omit<ButtonProps, 'as' | 'colorScheme'> {
-    as: typeof Button;
-    rightIcon?: React.ReactElement;
-    icon?: never;
-    children?: React.ReactNode;
-}
-interface IconButtonMenuButtonProps extends Omit<CustomIconButtonProps, 'as' | 'colorScheme'> {
-    as: typeof IconButton;
-    icon?: React.ReactElement;
-    rightIcon?: never;
-    'aria-label': string;
-    children?: React.ReactNode;
-}
-export type CustomMenuButtonProps = ButtonMenuButtonProps | IconButtonMenuButtonProps;
-export {};
-//# sourceMappingURL=MenuButton.types.d.ts.map

package/dist/components/Menu/MenuButton.types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MenuButton.types.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,EAAE,eAAe,IAAI,qBAAqB,EAAE,MAAM,0CAA0C,CAAC;AAGzG,UAAU,qBAAsB,SAAQ,IAAI,CAC1C,WAAW,EACX,IAAI,GAAG,aAAa,CACrB;IACC,EAAE,EAAE,OAAO,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC/B,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,UAAU,yBAA0B,SAAQ,IAAI,CAC9C,qBAAqB,EACrB,IAAI,GAAG,aAAa,CACrB;IACC,EAAE,EAAE,OAAO,UAAU,CAAC;IACtB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,MAAM,qBAAqB,GAC7B,qBAAqB,GACrB,yBAAyB,CAAC"}

package/src/components/Menu/MenuButton.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { Menu } from '@chakra-ui/react';
-
-import { CustomMenuButtonProps } from './MenuButton.types';
-
-export const MenuButton = ({
-  as: Component,
-  children,
-  ...rest
-}: CustomMenuButtonProps) => {
-  return (
-    <Menu.Trigger asChild>
-      <Component {...rest}>{children}</Component>
-    </Menu.Trigger>
-  );
-};

package/src/components/Menu/MenuButton.types.ts

@@ -1,30 +0,0 @@
-import { Button } from '@/components/Button';
-import type { ButtonProps } from '@/components/Button/Button.types';
-import { IconButton } from '@/components/IconButton';
-import type { IconButtonProps as CustomIconButtonProps } from '@/components/IconButton/IconButton.types';
-
-// as 속성에 들어갈 `Button`과 `IconButton`에 따른 조건부 타입
-interface ButtonMenuButtonProps extends Omit<
-  ButtonProps,
-  'as' | 'colorScheme'
-> {
-  as: typeof Button;
-  rightIcon?: React.ReactElement;
-  icon?: never;
-  children?: React.ReactNode;
-}
-
-interface IconButtonMenuButtonProps extends Omit<
-  CustomIconButtonProps,
-  'as' | 'colorScheme'
-> {
-  as: typeof IconButton;
-  icon?: React.ReactElement;
-  rightIcon?: never;
-  'aria-label': string;
-  children?: React.ReactNode;
-}
-
-export type CustomMenuButtonProps =
-  | ButtonMenuButtonProps
-  | IconButtonMenuButtonProps;