@seed-design/react 0.1.4 → 0.1.5

package/lib/index.cjs

@@ -50,6 +50,8 @@ const LoadingIndicator = require('./components/LoadingIndicator/LoadingIndicator
 const MannerTemp = require('./components/MannerTemp/MannerTemp.cjs');
 const MannerTempEmote = require('./components/MannerTemp/MannerTempEmote.cjs');
 const MannerTempBadge = require('./components/MannerTempBadge/MannerTempBadge.cjs');
+const MenuSheet = require('./components/MenuSheet/MenuSheet.cjs');
+const MenuSheet_namespace = require('./components/MenuSheet/MenuSheet.namespace.cjs');
 const NotificationBadge = require('./components/NotificationBadge/NotificationBadge.cjs');
 const reactPortal = require('@seed-design/react-portal');
 const ProgressCircle = require('./components/ProgressCircle/ProgressCircle.cjs');
@@ -213,6 +215,19 @@ exports.LoadingIndicator = LoadingIndicator.LoadingIndicator;
 exports.MannerTemp = MannerTemp.MannerTemp;
 exports.MannerTempEmote = MannerTempEmote.MannerTempEmote;
 exports.MannerTempBadge = MannerTempBadge.MannerTempBadge;
+exports.MenuSheetBackdrop = MenuSheet.MenuSheetBackdrop;
+exports.MenuSheetCloseButton = MenuSheet.MenuSheetCloseButton;
+exports.MenuSheetContent = MenuSheet.MenuSheetContent;
+exports.MenuSheetFooter = MenuSheet.MenuSheetFooter;
+exports.MenuSheetGroup = MenuSheet.MenuSheetGroup;
+exports.MenuSheetHeader = MenuSheet.MenuSheetHeader;
+exports.MenuSheetItem = MenuSheet.MenuSheetItem;
+exports.MenuSheetList = MenuSheet.MenuSheetList;
+exports.MenuSheetPositioner = MenuSheet.MenuSheetPositioner;
+exports.MenuSheetRoot = MenuSheet.MenuSheetRoot;
+exports.MenuSheetTitle = MenuSheet.MenuSheetTitle;
+exports.MenuSheetTrigger = MenuSheet.MenuSheetTrigger;
+exports.MenuSheet = MenuSheet_namespace;
 exports.NotificationBadge = NotificationBadge.NotificationBadge;
 exports.NotificationBadgePositioner = NotificationBadge.NotificationBadgePositioner;
 Object.defineProperty(exports, "Portal", {

package/lib/index.js

@@ -59,6 +59,9 @@ export { LoadingIndicator } from './components/LoadingIndicator/LoadingIndicator
 export { MannerTemp } from './components/MannerTemp/MannerTemp.js';
 export { MannerTempEmote } from './components/MannerTemp/MannerTempEmote.js';
 export { MannerTempBadge } from './components/MannerTempBadge/MannerTempBadge.js';
+export { MenuSheetBackdrop, MenuSheetCloseButton, MenuSheetContent, MenuSheetFooter, MenuSheetGroup, MenuSheetHeader, MenuSheetItem, MenuSheetList, MenuSheetPositioner, MenuSheetRoot, MenuSheetTitle, MenuSheetTrigger } from './components/MenuSheet/MenuSheet.js';
+import * as MenuSheet_namespace from './components/MenuSheet/MenuSheet.namespace.js';
+export { MenuSheet_namespace as MenuSheet };
 export { NotificationBadge, NotificationBadgePositioner } from './components/NotificationBadge/NotificationBadge.js';
 export { Portal } from '@seed-design/react-portal';
 export { ProgressCircleRange, ProgressCircleRoot, ProgressCircleTrack } from './components/ProgressCircle/ProgressCircle.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -58,12 +58,12 @@
     "clsx": "^2.1.1"
   },
   "peerDependencies": {
-    "@seed-design/css": "0.1.4",
+    "@seed-design/css": "0.1.5",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@seed-design/css": "0.1.4",
+    "@seed-design/css": "0.1.5",
     "@vitejs/plugin-react": "^4.4.1",
     "ajv": "^8.17.1",
     "globby": "^14.1.0",

package/src/components/ActionSheet/ActionSheet.tsx

@@ -16,8 +16,14 @@ const withStateProps = createWithStateProps([useDialogContext]);
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export interface ActionSheetRootProps extends ActionSheetVariantProps, DialogPrimitive.RootProps {}
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export const ActionSheetRoot = withRootProvider<ActionSheetRootProps>(DialogPrimitive.Root, {
   defaultProps: {
     lazyMount: true,
@@ -27,14 +33,26 @@ export const ActionSheetRoot = withRootProvider<ActionSheetRootProps>(DialogPrim
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export interface ActionSheetTriggerProps extends DialogPrimitive.TriggerProps {}
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export const ActionSheetTrigger = DialogPrimitive.Trigger;
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export interface ActionSheetPositionerProps extends DialogPrimitive.PositionerProps {}
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export const ActionSheetPositioner = withContext<HTMLDivElement, ActionSheetPositionerProps>(
   DialogPrimitive.Positioner,
   "positioner",
@@ -42,8 +60,14 @@ export const ActionSheetPositioner = withContext<HTMLDivElement, ActionSheetPosi
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export interface ActionSheetBackdropProps extends DialogPrimitive.BackdropProps {}
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export const ActionSheetBackdrop = withContext<HTMLDivElement, ActionSheetBackdropProps>(
   DialogPrimitive.Backdrop,
   "backdrop",
@@ -51,8 +75,14 @@ export const ActionSheetBackdrop = withContext<HTMLDivElement, ActionSheetBackdr
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export interface ActionSheetContentProps extends DialogPrimitive.ContentProps {}
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export const ActionSheetContent = withContext<HTMLDivElement, ActionSheetContentProps>(
   DialogPrimitive.Content,
   "content",
@@ -60,10 +90,16 @@ export const ActionSheetContent = withContext<HTMLDivElement, ActionSheetContent
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export interface ActionSheetHeaderProps
   extends PrimitiveProps,
     React.HTMLAttributes<HTMLDivElement> {}
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export const ActionSheetHeader = withContext<HTMLDivElement, ActionSheetHeaderProps>(
   withStateProps(Primitive.div),
   "header",
@@ -71,8 +107,14 @@ export const ActionSheetHeader = withContext<HTMLDivElement, ActionSheetHeaderPr
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export interface ActionSheetTitleProps extends DialogPrimitive.TitleProps {}
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export const ActionSheetTitle = withContext<HTMLHeadingElement, ActionSheetTitleProps>(
   withStateProps(Primitive.h2),
   "title",
@@ -80,8 +122,14 @@ export const ActionSheetTitle = withContext<HTMLHeadingElement, ActionSheetTitle
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export interface ActionSheetDescriptionProps extends DialogPrimitive.DescriptionProps {}
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export const ActionSheetDescription = withContext<
   HTMLParagraphElement,
   ActionSheetDescriptionProps
@@ -89,8 +137,14 @@ export const ActionSheetDescription = withContext<
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export interface ActionSheetListProps extends React.HTMLAttributes<HTMLDivElement> {}
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export const ActionSheetList = withContext<HTMLDivElement, ActionSheetListProps>(
   withStateProps(Primitive.div),
   "list",
@@ -98,19 +152,31 @@ export const ActionSheetList = withContext<HTMLDivElement, ActionSheetListProps>
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export interface ActionSheetItemProps
   extends PrimitiveProps,
     ActionSheetItemVariantProps,
     React.HTMLAttributes<HTMLButtonElement> {}
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export const ActionSheetItem = withItemContext<HTMLButtonElement, ActionSheetItemProps>(
   withStateProps(Primitive.button),
 );
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export interface ActionSheetCloseButtonProps extends DialogPrimitive.CloseButtonProps {}
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export const ActionSheetCloseButton = withContext<HTMLDivElement, ActionSheetCloseButtonProps>(
   DialogPrimitive.CloseButton,
   "closeButton",

package/src/components/ExtendedActionSheet/ExtendedActionSheet.tsx

@@ -19,10 +19,16 @@ const withStateProps = createWithStateProps([useDialogContext]);
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export interface ExtendedActionSheetRootProps
   extends ExtendedActionSheetVariantProps,
     DialogPrimitive.RootProps {}
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export const ExtendedActionSheetRoot = withRootProvider<ExtendedActionSheetRootProps>(
   DialogPrimitive.Root,
   {
@@ -35,14 +41,26 @@ export const ExtendedActionSheetRoot = withRootProvider<ExtendedActionSheetRootP
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export interface ExtendedActionSheetTriggerProps extends DialogPrimitive.TriggerProps {}
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export const ExtendedActionSheetTrigger = DialogPrimitive.Trigger;
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export interface ExtendedActionSheetPositionerProps extends DialogPrimitive.PositionerProps {}
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export const ExtendedActionSheetPositioner = withContext<
   HTMLDivElement,
   ExtendedActionSheetPositionerProps
@@ -50,8 +68,14 @@ export const ExtendedActionSheetPositioner = withContext<
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export interface ExtendedActionSheetBackdropProps extends DialogPrimitive.BackdropProps {}
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export const ExtendedActionSheetBackdrop = withContext<
   HTMLDivElement,
   ExtendedActionSheetBackdropProps
@@ -59,8 +83,14 @@ export const ExtendedActionSheetBackdrop = withContext<
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export interface ExtendedActionSheetContentProps extends DialogPrimitive.ContentProps {}
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export const ExtendedActionSheetContent = withContext<
   HTMLDivElement,
   ExtendedActionSheetContentProps
@@ -68,10 +98,16 @@ export const ExtendedActionSheetContent = withContext<
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export interface ExtendedActionSheetHeaderProps
   extends PrimitiveProps,
     React.HTMLAttributes<HTMLDivElement> {}
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export const ExtendedActionSheetHeader = withContext<
   HTMLDivElement,
   ExtendedActionSheetHeaderProps
@@ -79,8 +115,14 @@ export const ExtendedActionSheetHeader = withContext<
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export interface ExtendedActionSheetTitleProps extends DialogPrimitive.TitleProps {}
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export const ExtendedActionSheetTitle = withContext<
   HTMLHeadingElement,
   ExtendedActionSheetTitleProps
@@ -88,10 +130,16 @@ export const ExtendedActionSheetTitle = withContext<
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export interface ExtendedActionSheetListProps
   extends PrimitiveProps,
     React.HTMLAttributes<HTMLDivElement> {}
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export const ExtendedActionSheetList = withContext<HTMLDivElement, ExtendedActionSheetListProps>(
   withStateProps(Primitive.div),
   "list",
@@ -99,8 +147,14 @@ export const ExtendedActionSheetList = withContext<HTMLDivElement, ExtendedActio
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export interface ExtendedActionSheetGroupProps extends React.HTMLAttributes<HTMLDivElement> {}
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export const ExtendedActionSheetGroup = withContext<HTMLDivElement, ExtendedActionSheetGroupProps>(
   withStateProps(Primitive.div),
   "group",
@@ -108,11 +162,17 @@ export const ExtendedActionSheetGroup = withContext<HTMLDivElement, ExtendedActi
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export interface ExtendedActionSheetItemProps
   extends PrimitiveProps,
     ExtendedActionSheetItemVariantProps,
     React.HTMLAttributes<HTMLButtonElement> {}
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export const ExtendedActionSheetItem = withItemContext<
   HTMLButtonElement,
   ExtendedActionSheetItemProps
@@ -120,10 +180,16 @@ export const ExtendedActionSheetItem = withItemContext<
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export interface ExtendedActionSheetFooterProps
   extends PrimitiveProps,
     React.HTMLAttributes<HTMLDivElement> {}
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export const ExtendedActionSheetFooter = withContext<
   HTMLDivElement,
   ExtendedActionSheetFooterProps
@@ -131,8 +197,14 @@ export const ExtendedActionSheetFooter = withContext<
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export interface ExtendedActionSheetCloseButtonProps extends DialogPrimitive.CloseButtonProps {}
 
+/**
+ * @deprecated Use `MenuSheet` instead.
+ */
 export const ExtendedActionSheetCloseButton = withContext<
   HTMLDivElement,
   ExtendedActionSheetCloseButtonProps

package/src/components/MenuSheet/MenuSheet.namespace.ts

@@ -0,0 +1,26 @@
+export {
+  MenuSheetBackdrop as Backdrop,
+  MenuSheetPositioner as Positioner,
+  MenuSheetContent as Content,
+  MenuSheetFooter as Footer,
+  MenuSheetHeader as Header,
+  MenuSheetRoot as Root,
+  MenuSheetTitle as Title,
+  MenuSheetTrigger as Trigger,
+  MenuSheetList as List,
+  MenuSheetGroup as Group,
+  MenuSheetItem as Item,
+  MenuSheetCloseButton as CloseButton,
+  type MenuSheetBackdropProps as BackdropProps,
+  type MenuSheetPositionerProps as PositionerProps,
+  type MenuSheetContentProps as ContentProps,
+  type MenuSheetFooterProps as FooterProps,
+  type MenuSheetHeaderProps as HeaderProps,
+  type MenuSheetRootProps as RootProps,
+  type MenuSheetTitleProps as TitleProps,
+  type MenuSheetTriggerProps as TriggerProps,
+  type MenuSheetListProps as ListProps,
+  type MenuSheetGroupProps as GroupProps,
+  type MenuSheetItemProps as ItemProps,
+  type MenuSheetCloseButtonProps as CloseButtonProps,
+} from "./MenuSheet";

package/src/components/MenuSheet/MenuSheet.tsx

@@ -0,0 +1,172 @@
+import { Dialog as DialogPrimitive, useDialogContext } from "@seed-design/react-dialog";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { menuSheet, type MenuSheetVariantProps } from "@seed-design/css/recipes/menu-sheet";
+import {
+  menuSheetItem,
+  type MenuSheetItemVariantProps,
+} from "@seed-design/css/recipes/menu-sheet-item";
+import * as React from "react";
+import { createRecipeContext } from "../../utils/createRecipeContext";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+
+const { withRootProvider, withContext } = createSlotRecipeContext(menuSheet);
+const {
+  withContext: withItemContext,
+  PropsProvider: ItemPropsProvider,
+  useProps: useItemProps,
+} = createRecipeContext(menuSheetItem);
+const withStateProps = createWithStateProps([useDialogContext]);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetRootProps extends MenuSheetVariantProps, DialogPrimitive.RootProps {}
+
+export const MenuSheetRoot = withRootProvider<MenuSheetRootProps>(DialogPrimitive.Root, {
+  defaultProps: {
+    lazyMount: true,
+    unmountOnExit: true,
+  },
+});
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetTriggerProps extends DialogPrimitive.TriggerProps {}
+
+export const MenuSheetTrigger = DialogPrimitive.Trigger;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetPositionerProps extends DialogPrimitive.PositionerProps {}
+
+export const MenuSheetPositioner = withContext<HTMLDivElement, MenuSheetPositionerProps>(
+  DialogPrimitive.Positioner,
+  "positioner",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetBackdropProps extends DialogPrimitive.BackdropProps {}
+
+export const MenuSheetBackdrop = withContext<HTMLDivElement, MenuSheetBackdropProps>(
+  DialogPrimitive.Backdrop,
+  "backdrop",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetContentProps
+  extends DialogPrimitive.ContentProps,
+    Pick<MenuSheetItemVariantProps, "labelAlign"> {}
+
+const MenuSheetContentBase = withContext<HTMLDivElement, DialogPrimitive.ContentProps>(
+  DialogPrimitive.Content,
+  "content",
+);
+
+export const MenuSheetContent = React.forwardRef<HTMLDivElement, MenuSheetContentProps>(
+  ({ labelAlign, children, ...props }, ref) => {
+    return (
+      <ItemPropsProvider value={React.useMemo(() => ({ labelAlign }), [labelAlign])}>
+        <MenuSheetContentBase ref={ref} {...props}>
+          {children}
+        </MenuSheetContentBase>
+      </ItemPropsProvider>
+    );
+  },
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetHeaderProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const MenuSheetHeader = withContext<HTMLDivElement, MenuSheetHeaderProps>(
+  withStateProps(Primitive.div),
+  "header",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetTitleProps extends DialogPrimitive.TitleProps {}
+
+export const MenuSheetTitle = withContext<HTMLHeadingElement, MenuSheetTitleProps>(
+  withStateProps(Primitive.h2),
+  "title",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetListProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const MenuSheetList = withContext<HTMLDivElement, MenuSheetListProps>(
+  withStateProps(Primitive.div),
+  "list",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetGroupProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    Pick<MenuSheetItemVariantProps, "labelAlign"> {}
+
+const MenuSheetGroupBase = withContext<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  withStateProps(Primitive.div),
+  "group",
+);
+
+export const MenuSheetGroup = React.forwardRef<HTMLDivElement, MenuSheetGroupProps>(
+  ({ labelAlign: overriddenLabelAlign, children, ...props }, ref) => {
+    const parentProps = useItemProps();
+    const labelAlign = overriddenLabelAlign ?? parentProps?.labelAlign;
+
+    return (
+      <ItemPropsProvider value={React.useMemo(() => ({ labelAlign }), [labelAlign])}>
+        <MenuSheetGroupBase ref={ref} {...props}>
+          {children}
+        </MenuSheetGroupBase>
+      </ItemPropsProvider>
+    );
+  },
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetItemProps
+  extends PrimitiveProps,
+    MenuSheetItemVariantProps,
+    React.HTMLAttributes<HTMLButtonElement> {}
+
+const MenuSheetItemBase = withItemContext<HTMLButtonElement, MenuSheetItemProps>(
+  withStateProps(Primitive.button),
+);
+
+export const MenuSheetItem = React.forwardRef<HTMLButtonElement, MenuSheetItemProps>(
+  ({ labelAlign: overriddenLabelAlign, ...props }, ref) => {
+    const parentProps = useItemProps();
+    const labelAlign = overriddenLabelAlign ?? parentProps?.labelAlign;
+
+    return <MenuSheetItemBase ref={ref} labelAlign={labelAlign} {...props} />;
+  },
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetFooterProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const MenuSheetFooter = withContext<HTMLDivElement, MenuSheetFooterProps>(
+  withStateProps(Primitive.div),
+  "footer",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuSheetCloseButtonProps extends DialogPrimitive.CloseButtonProps {}
+
+export const MenuSheetCloseButton = withContext<HTMLDivElement, MenuSheetCloseButtonProps>(
+  DialogPrimitive.CloseButton,
+  "closeButton",
+);

package/src/components/MenuSheet/index.ts

@@ -0,0 +1,28 @@
+export {
+  MenuSheetBackdrop,
+  MenuSheetPositioner,
+  MenuSheetContent,
+  MenuSheetFooter,
+  MenuSheetHeader,
+  MenuSheetRoot,
+  MenuSheetTitle,
+  MenuSheetTrigger,
+  MenuSheetList,
+  MenuSheetGroup,
+  MenuSheetItem,
+  MenuSheetCloseButton,
+  type MenuSheetBackdropProps,
+  type MenuSheetPositionerProps,
+  type MenuSheetContentProps,
+  type MenuSheetFooterProps,
+  type MenuSheetHeaderProps,
+  type MenuSheetRootProps,
+  type MenuSheetTitleProps,
+  type MenuSheetTriggerProps,
+  type MenuSheetListProps,
+  type MenuSheetGroupProps,
+  type MenuSheetItemProps,
+  type MenuSheetCloseButtonProps,
+} from "./MenuSheet";
+
+export * as MenuSheet from "./MenuSheet.namespace";

package/src/components/index.ts

@@ -32,6 +32,7 @@ export * from "./LinkContent";
 export * from "./LoadingIndicator";
 export * from "./MannerTemp";
 export * from "./MannerTempBadge";
+export * from "./MenuSheet";
 export * from "./NotificationBadge";
 export * from "./Portal";
 export * from "./ProgressCircle";