@seed-design/react 1.2.15 → 2.0.1

package/src/components/Menu/Menu.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import { Menu as MenuPrimitive, useMenuContext, useMenuItemContext } from "@seed-design/react-menu";
+import { menu, type MenuVariantProps } from "@seed-design/css/recipes/menu";
+import { menuItem, type MenuItemVariantProps } from "@seed-design/css/recipes/menu-item";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import clsx from "clsx";
+import * as React from "react";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+
+const { ClassNamesProvider, withContext, useClassNames } = createSlotRecipeContext(menu);
+const {
+  PropsProvider: ItemPropsProvider,
+  useProps: useItemProps,
+  withContext: withItemContext,
+  ClassNamesProvider: ItemClassNamesProvider,
+} = createSlotRecipeContext(menuItem);
+const withStateProps = createWithStateProps([useMenuContext]);
+const withItemStateProps = createWithStateProps([useMenuItemContext]);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuRootProps extends MenuVariantProps, MenuPrimitive.RootProps {}
+
+export const MenuRoot = (props: MenuRootProps) => {
+  const [variantProps, otherProps] = menu.splitVariantProps(props);
+  const classNames = menu(variantProps);
+
+  return (
+    <ClassNamesProvider value={classNames}>
+      <ItemPropsProvider value={{ size: variantProps.size }}>
+        <MenuPrimitive.Root {...otherProps} />
+      </ItemPropsProvider>
+    </ClassNamesProvider>
+  );
+};
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuAnchorProps extends MenuPrimitive.AnchorProps {}
+
+export const MenuAnchor = MenuPrimitive.Anchor;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuTriggerProps extends MenuPrimitive.TriggerProps {}
+
+export const MenuTrigger = MenuPrimitive.Trigger;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuPositionerProps
+  extends MenuPrimitive.PositionerProps,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const MenuPositioner = React.forwardRef<HTMLDivElement, MenuPositionerProps>(
+  ({ className, ...props }, ref) => {
+    const classNames = useClassNames();
+
+    return (
+      <MenuPrimitive.Positioner
+        ref={ref}
+        className={clsx(classNames.positioner, className)}
+        {...props}
+      />
+    );
+  },
+);
+MenuPositioner.displayName = "MenuPositioner";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuContentProps extends MenuPrimitive.ContentProps {}
+
+export const MenuContent = withContext<HTMLDivElement, MenuContentProps>(
+  MenuPrimitive.Content,
+  "content",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuScrollAreaProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const MenuScrollArea = withContext<HTMLDivElement, MenuScrollAreaProps>(
+  withStateProps(Primitive.div),
+  "scrollArea",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuGroupProps extends MenuPrimitive.GroupProps {}
+
+export const MenuGroup = withContext<HTMLDivElement, MenuGroupProps>(MenuPrimitive.Group, "group");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuGroupLabelProps extends MenuPrimitive.GroupLabelProps {}
+
+export const MenuGroupLabel = withContext<HTMLDivElement, MenuGroupLabelProps>(
+  MenuPrimitive.GroupLabel,
+  "groupLabel",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuItemProps extends MenuItemVariantProps, MenuPrimitive.ItemProps {}
+
+export const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(
+  ({ className: propClassName, ...props }, ref) => {
+    const [variantProps, otherProps] = menuItem.splitVariantProps(props);
+    const parentProps = useItemProps();
+
+    const classNames = menuItem({ ...parentProps, ...variantProps });
+
+    return (
+      <ItemClassNamesProvider value={classNames}>
+        <MenuPrimitive.Item
+          ref={ref}
+          className={clsx(classNames.root, propClassName)}
+          {...otherProps}
+        />
+      </ItemClassNamesProvider>
+    );
+  },
+);
+MenuItem.displayName = "MenuItem";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuItemBodyProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const MenuItemBody = withItemContext<HTMLDivElement, MenuItemBodyProps>(
+  withItemStateProps(Primitive.div),
+  "body",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuItemLabelProps extends PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {}
+
+export const MenuItemLabel = withItemContext<HTMLSpanElement, MenuItemLabelProps>(
+  withItemStateProps(Primitive.span),
+  "label",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface MenuItemDescriptionProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const MenuItemDescription = withItemContext<HTMLSpanElement, MenuItemDescriptionProps>(
+  withItemStateProps(Primitive.span),
+  "description",
+);

package/src/components/Menu/index.ts

@@ -0,0 +1,28 @@
+export {
+  MenuRoot,
+  MenuAnchor,
+  MenuTrigger,
+  MenuPositioner,
+  MenuContent,
+  MenuScrollArea,
+  MenuGroup,
+  MenuGroupLabel,
+  MenuItem,
+  MenuItemBody,
+  MenuItemLabel,
+  MenuItemDescription,
+  type MenuRootProps,
+  type MenuAnchorProps,
+  type MenuTriggerProps,
+  type MenuPositionerProps,
+  type MenuContentProps,
+  type MenuScrollAreaProps,
+  type MenuGroupProps,
+  type MenuGroupLabelProps,
+  type MenuItemProps,
+  type MenuItemBodyProps,
+  type MenuItemLabelProps,
+  type MenuItemDescriptionProps,
+} from "./Menu";
+
+export * as Menu from "./Menu.namespace";

package/src/components/MenuSheet/MenuSheet.tsx

@@ -21,6 +21,9 @@ const withStateProps = createWithStateProps([useDialogContext]);
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export interface MenuSheetRootProps extends MenuSheetVariantProps, DialogPrimitive.RootProps {
   /**
    * @default true
@@ -32,6 +35,9 @@ export interface MenuSheetRootProps extends MenuSheetVariantProps, DialogPrimiti
   unmountOnExit?: DialogPrimitive.RootProps["unmountOnExit"];
 }
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export const MenuSheetRoot = withRootProvider<MenuSheetRootProps>(DialogPrimitive.Root, {
   defaultProps: {
     lazyMount: true,
@@ -41,14 +47,26 @@ export const MenuSheetRoot = withRootProvider<MenuSheetRootProps>(DialogPrimitiv
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export interface MenuSheetTriggerProps extends DialogPrimitive.TriggerProps {}
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export const MenuSheetTrigger = DialogPrimitive.Trigger;
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export interface MenuSheetPositionerProps extends DialogPrimitive.PositionerProps {}
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export const MenuSheetPositioner = withContext<HTMLDivElement, MenuSheetPositionerProps>(
   DialogPrimitive.Positioner,
   "positioner",
@@ -56,8 +74,14 @@ export const MenuSheetPositioner = withContext<HTMLDivElement, MenuSheetPosition
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export interface MenuSheetBackdropProps extends DialogPrimitive.BackdropProps {}
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export const MenuSheetBackdrop = withContext<HTMLDivElement, MenuSheetBackdropProps>(
   DialogPrimitive.Backdrop,
   "backdrop",
@@ -65,10 +89,16 @@ export const MenuSheetBackdrop = withContext<HTMLDivElement, MenuSheetBackdropPr
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export interface MenuSheetContentProps
   extends DialogPrimitive.ContentProps,
     Pick<MenuSheetItemVariantProps, "labelAlign"> {}
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export const MenuSheetContent = React.forwardRef<HTMLDivElement, MenuSheetContentProps>(
   ({ className, ...props }, ref) => {
     const [variantProps, otherProps] = menuSheetItem.splitVariantProps(props);
@@ -88,10 +118,16 @@ export const MenuSheetContent = React.forwardRef<HTMLDivElement, MenuSheetConten
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export interface MenuSheetHeaderProps
   extends PrimitiveProps,
     React.HTMLAttributes<HTMLDivElement> {}
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export const MenuSheetHeader = withContext<HTMLDivElement, MenuSheetHeaderProps>(
   withStateProps(Primitive.div),
   "header",
@@ -100,8 +136,14 @@ export const MenuSheetHeader = withContext<HTMLDivElement, MenuSheetHeaderProps>
 // NOTE: uses DialogPrimitive.TitleProps,
 // but actual rendered component is a Primitive.h2 rather than a DialogPrimitive.Title
 // find out why later; h2 is same but missing and some a11y features
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export interface MenuSheetTitleProps extends DialogPrimitive.TitleProps {}
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export const MenuSheetTitle = withContext<HTMLHeadingElement, MenuSheetTitleProps>(
   withStateProps(Primitive.h2),
   "title",
@@ -110,8 +152,14 @@ export const MenuSheetTitle = withContext<HTMLHeadingElement, MenuSheetTitleProp
 // NOTE: uses DialogPrimitive.DescriptionProps,
 // but actual rendered component is a Primitive.p rather than a DialogPrimitive.Description
 // find out why later; p is same but missing and some a11y features
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export interface MenuSheetDescriptionProps extends DialogPrimitive.DescriptionProps {}
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export const MenuSheetDescription = withContext<HTMLParagraphElement, MenuSheetDescriptionProps>(
   withStateProps(Primitive.p),
   "description",
@@ -119,8 +167,14 @@ export const MenuSheetDescription = withContext<HTMLParagraphElement, MenuSheetD
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export interface MenuSheetListProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export const MenuSheetList = withContext<HTMLDivElement, MenuSheetListProps>(
   withStateProps(Primitive.div),
   "list",
@@ -128,10 +182,16 @@ export const MenuSheetList = withContext<HTMLDivElement, MenuSheetListProps>(
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export interface MenuSheetGroupProps
   extends React.HTMLAttributes<HTMLDivElement>,
     Pick<MenuSheetItemVariantProps, "labelAlign"> {}
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export const MenuSheetGroup = React.forwardRef<HTMLDivElement, MenuSheetGroupProps>(
   ({ className, ...props }, ref) => {
     const [variantProps, otherProps] = menuSheetItem.splitVariantProps(props);
@@ -155,11 +215,17 @@ export const MenuSheetGroup = React.forwardRef<HTMLDivElement, MenuSheetGroupPro
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export interface MenuSheetItemProps
   extends PrimitiveProps,
     MenuSheetItemVariantProps,
     React.HTMLAttributes<HTMLButtonElement> {}
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export const MenuSheetItem = React.forwardRef<HTMLButtonElement, MenuSheetItemProps>(
   ({ className: propClassName, ...props }, ref) => {
     const [variantProps, otherProps] = menuSheetItem.splitVariantProps(props);
@@ -181,28 +247,46 @@ export const MenuSheetItem = React.forwardRef<HTMLButtonElement, MenuSheetItemPr
   },
 );
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export interface MenuSheetItemContentProps
   extends PrimitiveProps,
     React.HTMLAttributes<HTMLDivElement> {}
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export const MenuSheetItemContent = withItemContext<HTMLDivElement, MenuSheetItemContentProps>(
   withStateProps(Primitive.div),
   "content",
 );
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export interface MenuSheetItemLabelProps
   extends PrimitiveProps,
     React.HTMLAttributes<HTMLSpanElement> {}
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export const MenuSheetItemLabel = withItemContext<HTMLSpanElement, MenuSheetItemLabelProps>(
   withStateProps(Primitive.span),
   "label",
 );
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export interface MenuSheetItemDescriptionProps
   extends PrimitiveProps,
     React.HTMLAttributes<HTMLSpanElement> {}
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export const MenuSheetItemDescription = withItemContext<
   HTMLSpanElement,
   MenuSheetItemDescriptionProps
@@ -210,10 +294,16 @@ export const MenuSheetItemDescription = withItemContext<
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export interface MenuSheetFooterProps
   extends PrimitiveProps,
     React.HTMLAttributes<HTMLDivElement> {}
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export const MenuSheetFooter = withContext<HTMLDivElement, MenuSheetFooterProps>(
   withStateProps(Primitive.div),
   "footer",
@@ -221,8 +311,14 @@ export const MenuSheetFooter = withContext<HTMLDivElement, MenuSheetFooterProps>
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export interface MenuSheetCloseButtonProps extends DialogPrimitive.CloseButtonProps {}
 
+/**
+ * @deprecated Use `SwipeableMenuSheet` instead.
+ */
 export const MenuSheetCloseButton = withContext<HTMLDivElement, MenuSheetCloseButtonProps>(
   DialogPrimitive.CloseButton,
   "closeButton",

package/src/components/NavigationMenu/NavigationMenu.namespace.ts

@@ -0,0 +1,26 @@
+export {
+  NavigationMenuProvider as Provider,
+  NavigationMenuRoot as Root,
+  NavigationMenuTrigger as Trigger,
+  NavigationMenuPositioner as Positioner,
+  NavigationMenuContent as Content,
+  NavigationMenuScrollArea as ScrollArea,
+  NavigationMenuGroup as Group,
+  NavigationMenuGroupLabel as GroupLabel,
+  NavigationMenuItem as Item,
+  NavigationMenuItemBody as ItemBody,
+  NavigationMenuItemLabel as ItemLabel,
+  NavigationMenuItemDescription as ItemDescription,
+  type NavigationMenuProviderProps as ProviderProps,
+  type NavigationMenuRootProps as RootProps,
+  type NavigationMenuTriggerProps as TriggerProps,
+  type NavigationMenuPositionerProps as PositionerProps,
+  type NavigationMenuContentProps as ContentProps,
+  type NavigationMenuScrollAreaProps as ScrollAreaProps,
+  type NavigationMenuGroupProps as GroupProps,
+  type NavigationMenuGroupLabelProps as GroupLabelProps,
+  type NavigationMenuItemProps as ItemProps,
+  type NavigationMenuItemBodyProps as ItemBodyProps,
+  type NavigationMenuItemLabelProps as ItemLabelProps,
+  type NavigationMenuItemDescriptionProps as ItemDescriptionProps,
+} from "./NavigationMenu";

package/src/components/NavigationMenu/NavigationMenu.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import { menu, type MenuVariantProps } from "@seed-design/css/recipes/menu";
+import { menuItem, type MenuItemVariantProps } from "@seed-design/css/recipes/menu-item";
+import {
+  NavigationMenu as NavigationMenuPrimitive,
+  useNavigationMenuItemContext,
+  useNavigationMenuRootContext,
+} from "@seed-design/react-navigation-menu";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import clsx from "clsx";
+import * as React from "react";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+
+const { ClassNamesProvider, withContext, useClassNames } = createSlotRecipeContext(menu);
+const {
+  PropsProvider: ItemPropsProvider,
+  useProps: useItemProps,
+  withContext: withItemContext,
+  ClassNamesProvider: ItemClassNamesProvider,
+} = createSlotRecipeContext(menuItem);
+const withStateProps = createWithStateProps([useNavigationMenuRootContext]);
+const withItemStateProps = createWithStateProps([useNavigationMenuItemContext]);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface NavigationMenuProviderProps
+  extends MenuVariantProps,
+    NavigationMenuPrimitive.ProviderProps {}
+
+export const NavigationMenuProvider = (props: NavigationMenuProviderProps) => {
+  const [variantProps, otherProps] = menu.splitVariantProps(props);
+  const classNames = menu(variantProps);
+
+  return (
+    <ClassNamesProvider value={classNames}>
+      <ItemPropsProvider value={{ size: variantProps.size }}>
+        <NavigationMenuPrimitive.Provider {...otherProps} />
+      </ItemPropsProvider>
+    </ClassNamesProvider>
+  );
+};
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface NavigationMenuRootProps extends NavigationMenuPrimitive.RootProps {}
+
+export const NavigationMenuRoot = NavigationMenuPrimitive.Root;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface NavigationMenuTriggerProps extends NavigationMenuPrimitive.TriggerProps {}
+
+export const NavigationMenuTrigger = NavigationMenuPrimitive.Trigger;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface NavigationMenuPositionerProps extends NavigationMenuPrimitive.PositionerProps {}
+
+export const NavigationMenuPositioner = React.forwardRef<
+  HTMLDivElement,
+  NavigationMenuPositionerProps
+>(({ className, ...props }, ref) => {
+  const classNames = useClassNames();
+
+  return (
+    <NavigationMenuPrimitive.Positioner
+      ref={ref}
+      className={clsx(classNames.positioner, className)}
+      {...props}
+    />
+  );
+});
+NavigationMenuPositioner.displayName = "NavigationMenuPositioner";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface NavigationMenuContentProps extends NavigationMenuPrimitive.ContentProps {}
+
+export const NavigationMenuContent = withContext<HTMLDivElement, NavigationMenuContentProps>(
+  NavigationMenuPrimitive.Content,
+  "content",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface NavigationMenuScrollAreaProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const NavigationMenuScrollArea = withContext<HTMLDivElement, NavigationMenuScrollAreaProps>(
+  withStateProps(Primitive.div),
+  "scrollArea",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface NavigationMenuGroupProps extends NavigationMenuPrimitive.GroupProps {}
+
+export const NavigationMenuGroup = withContext<HTMLDivElement, NavigationMenuGroupProps>(
+  NavigationMenuPrimitive.Group,
+  "group",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface NavigationMenuGroupLabelProps extends NavigationMenuPrimitive.GroupLabelProps {}
+
+export const NavigationMenuGroupLabel = withContext<HTMLDivElement, NavigationMenuGroupLabelProps>(
+  NavigationMenuPrimitive.GroupLabel,
+  "groupLabel",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface NavigationMenuItemProps
+  extends MenuItemVariantProps,
+    NavigationMenuPrimitive.ItemProps {}
+
+export const NavigationMenuItem = React.forwardRef<HTMLButtonElement, NavigationMenuItemProps>(
+  ({ className: propClassName, ...props }, ref) => {
+    const [variantProps, otherProps] = menuItem.splitVariantProps(props);
+    const parentProps = useItemProps();
+
+    const classNames = menuItem({ ...parentProps, ...variantProps });
+
+    return (
+      <ItemClassNamesProvider value={classNames}>
+        <NavigationMenuPrimitive.Item
+          ref={ref}
+          className={clsx(classNames.root, propClassName)}
+          {...otherProps}
+        />
+      </ItemClassNamesProvider>
+    );
+  },
+);
+NavigationMenuItem.displayName = "NavigationMenuItem";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface NavigationMenuItemBodyProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const NavigationMenuItemBody = withItemContext<HTMLDivElement, NavigationMenuItemBodyProps>(
+  withItemStateProps(Primitive.div),
+  "body",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface NavigationMenuItemLabelProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const NavigationMenuItemLabel = withItemContext<
+  HTMLSpanElement,
+  NavigationMenuItemLabelProps
+>(withItemStateProps(Primitive.span), "label");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface NavigationMenuItemDescriptionProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const NavigationMenuItemDescription = withItemContext<
+  HTMLSpanElement,
+  NavigationMenuItemDescriptionProps
+>(withItemStateProps(Primitive.span), "description");