@dxos/react-ui 0.8.4-main.3c1ae3b → 0.8.4-main.3eb6e50203

package/src/components/{Menus → Menu}/ContextMenu.tsx

@@ -36,7 +36,7 @@ const ContextMenuContent = forwardRef<HTMLDivElement, ContextMenuContentProps>(
         {...props}
         data-arrow-keys='up down'
         collisionPadding={safeCollisionPadding}
-        className={tx('menu.content', 'menu', { elevation }, classNames)}
+        className={tx('menu.content', { elevation }, classNames)}
         ref={forwardedRef}
       >
         {children}
@@ -54,7 +54,7 @@ const ContextMenuViewport = forwardRef<HTMLDivElement, ContextMenuViewportProps>
     const { tx } = useThemeContext();
     const Root = asChild ? Slot : Primitive.div;
     return (
-      <Root {...props} className={tx('menu.viewport', 'menu__viewport', {}, classNames)} ref={forwardedRef}>
+      <Root {...props} className={tx('menu.viewport', {}, classNames)} ref={forwardedRef}>
         {children}
       </Root>
     );
@@ -65,13 +65,7 @@ type ContextMenuArrowProps = ThemedClassName<ContextMenuPrimitive.ContextMenuArr
 
 const ContextMenuArrow = forwardRef<SVGSVGElement, ContextMenuArrowProps>(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return (
-    <ContextMenuPrimitive.Arrow
-      {...props}
-      className={tx('menu.arrow', 'menu__arrow', {}, classNames)}
-      ref={forwardedRef}
-    />
-  );
+  return <ContextMenuPrimitive.Arrow {...props} className={tx('menu.arrow', {}, classNames)} ref={forwardedRef} />;
 });
 
 type ContextMenuGroupProps = ContextMenuPrimitive.ContextMenuGroupProps;
@@ -87,13 +81,7 @@ type ContextMenuItemProps = ThemedClassName<ContextMenuPrimitive.ContextMenuItem
 const ContextMenuItem = forwardRef<HTMLDivElement, ContextMenuItemProps>(
   ({ classNames, ...props }: ContextMenuItemProps, forwardedRef) => {
     const { tx } = useThemeContext();
-    return (
-      <ContextMenuPrimitive.Item
-        {...props}
-        className={tx('menu.item', 'menu__item', {}, classNames)}
-        ref={forwardedRef}
-      />
-    );
+    return <ContextMenuPrimitive.Item {...props} className={tx('menu.item', {}, classNames)} ref={forwardedRef} />;
   },
 );
 
@@ -103,11 +91,7 @@ const ContextMenuCheckboxItem = forwardRef<HTMLDivElement, ContextMenuCheckboxIt
   ({ classNames, ...props }: ContextMenuItemProps, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
-      <ContextMenuPrimitive.CheckboxItem
-        {...props}
-        className={tx('menu.item', 'menu__item--checkbox', {}, classNames)}
-        ref={forwardedRef}
-      />
+      <ContextMenuPrimitive.CheckboxItem {...props} className={tx('menu.item', {}, classNames)} ref={forwardedRef} />
     );
   },
 );
@@ -118,11 +102,7 @@ const ContextMenuSeparator = forwardRef<HTMLDivElement, ContextMenuSeparatorProp
   ({ classNames, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
-      <ContextMenuPrimitive.Separator
-        {...props}
-        className={tx('menu.separator', 'menu__item', {}, classNames)}
-        ref={forwardedRef}
-      />
+      <ContextMenuPrimitive.Separator {...props} className={tx('menu.separator', {}, classNames)} ref={forwardedRef} />
     );
   },
 );
@@ -133,11 +113,7 @@ const ContextMenuGroupLabel = forwardRef<HTMLDivElement, ContextMenuGroupLabelPr
   ({ classNames, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
-      <ContextMenuPrimitive.Label
-        {...props}
-        className={tx('menu.groupLabel', 'menu__group__label', {}, classNames)}
-        ref={forwardedRef}
-      />
+      <ContextMenuPrimitive.Label {...props} className={tx('menu.groupLabel', {}, classNames)} ref={forwardedRef} />
     );
   },
 );

package/src/components/{Menus → Menu}/DropdownMenu.stories.tsx

@@ -92,10 +92,10 @@ const DefaultStory = () => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/DropdownMenu',
+  title: 'ui/react-ui-core/components/DropdownMenu',
   component: DropdownMenu.Root,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/components/{Menus → Menu}/DropdownMenu.tsx

@@ -35,9 +35,9 @@ import { type ThemedClassName } from '../../util';
 
 type Direction = 'ltr' | 'rtl';
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenu
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenu
+//
 
 const DROPDOWN_MENU_NAME = 'DropdownMenu';
 
@@ -97,9 +97,9 @@ const DropdownMenuRoot: FC<DropdownMenuRootProps> = (props: ScopedProps<Dropdown
 
 DropdownMenuRoot.displayName = DROPDOWN_MENU_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuTrigger
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuTrigger
+//
 
 const TRIGGER_NAME = 'DropdownMenuTrigger';
 
@@ -162,9 +162,9 @@ const DropdownMenuTrigger = forwardRef<DropdownMenuTriggerElement, DropdownMenuT
 
 DropdownMenuTrigger.displayName = TRIGGER_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuVirtualTrigger
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuVirtualTrigger
+//
 
 const VIRTUAL_TRIGGER_NAME = 'DropdownMenuVirtualTrigger';
 
@@ -186,9 +186,9 @@ const DropdownMenuVirtualTrigger = (props: ScopedProps<DropdownMenuVirtualTrigge
 
 DropdownMenuVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuPortal
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuPortal
+//
 
 const PORTAL_NAME = 'DropdownMenuPortal';
 
@@ -203,9 +203,9 @@ const DropdownMenuPortal: FC<DropdownMenuPortalProps> = (props: ScopedProps<Drop
 
 DropdownMenuPortal.displayName = PORTAL_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuViewport
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuViewport
+//
 
 type DropdownMenuViewportProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
   asChild?: boolean;
@@ -216,16 +216,16 @@ const DropdownMenuViewport = forwardRef<HTMLDivElement, DropdownMenuViewportProp
     const { tx } = useThemeContext();
     const Root = asChild ? Slot : Primitive.div;
     return (
-      <Root {...props} className={tx('menu.viewport', 'menu__viewport', {}, classNames)} ref={forwardedRef}>
+      <Root {...props} className={tx('menu.viewport', {}, classNames)} ref={forwardedRef}>
         {children}
       </Root>
     );
   },
 );
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuContent
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuContent
+//
 
 const CONTENT_NAME = 'DropdownMenuContent';
 
@@ -283,7 +283,7 @@ const DropdownMenuContent = forwardRef<DropdownMenuContentElement, DropdownMenuC
           }
         })}
         data-arrow-keys='up down'
-        className={tx('menu.content', 'menu', { elevation }, classNames)}
+        className={tx('menu.content', { elevation }, classNames)}
         style={{
           ...props.style,
           // re-namespace exposed content custom properties
@@ -302,9 +302,9 @@ const DropdownMenuContent = forwardRef<DropdownMenuContentElement, DropdownMenuC
 
 DropdownMenuContent.displayName = CONTENT_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuGroup
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuGroup
+//
 
 const GROUP_NAME = 'DropdownMenuGroup';
 
@@ -322,9 +322,9 @@ const DropdownMenuGroup = forwardRef<DropdownMenuGroupElement, DropdownMenuGroup
 
 DropdownMenuGroup.displayName = GROUP_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuLabel
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuLabel
+//
 
 const LABEL_NAME = 'DropdownMenuLabel';
 
@@ -341,7 +341,7 @@ const DropdownMenuGroupLabel = forwardRef<DropdownMenuLabelElement, DropdownMenu
       <MenuPrimitive.Label
         {...menuScope}
         {...labelProps}
-        className={tx('menu.groupLabel', 'menu__group__label', {}, classNames)}
+        className={tx('menu.groupLabel', {}, classNames)}
         ref={forwardedRef}
       />
     );
@@ -350,9 +350,9 @@ const DropdownMenuGroupLabel = forwardRef<DropdownMenuLabelElement, DropdownMenu
 
 DropdownMenuGroupLabel.displayName = LABEL_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuItem
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuItem
+//
 
 const ITEM_NAME = 'DropdownMenuItem';
 
@@ -369,7 +369,7 @@ const DropdownMenuItem = forwardRef<DropdownMenuItemElement, DropdownMenuItemPro
       <MenuPrimitive.Item
         {...menuScope}
         {...itemProps}
-        className={tx('menu.item', 'menu__item', {}, classNames)}
+        className={tx('menu.item', {}, classNames)}
         ref={forwardedRef}
       />
     );
@@ -378,9 +378,9 @@ const DropdownMenuItem = forwardRef<DropdownMenuItemElement, DropdownMenuItemPro
 
 DropdownMenuItem.displayName = ITEM_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuCheckboxItem
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuCheckboxItem
+//
 
 const CHECKBOX_ITEM_NAME = 'DropdownMenuCheckboxItem';
 
@@ -397,7 +397,7 @@ const DropdownMenuCheckboxItem = forwardRef<DropdownMenuCheckboxItemElement, Dro
       <MenuPrimitive.CheckboxItem
         {...menuScope}
         {...checkboxItemProps}
-        className={tx('menu.item', 'menu__item--checkbox', {}, classNames)}
+        className={tx('menu.item', {}, classNames)}
         ref={forwardedRef}
       />
     );
@@ -406,9 +406,9 @@ const DropdownMenuCheckboxItem = forwardRef<DropdownMenuCheckboxItemElement, Dro
 
 DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuRadioGroup
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuRadioGroup
+//
 
 const RADIO_GROUP_NAME = 'DropdownMenuRadioGroup';
 
@@ -426,9 +426,9 @@ const DropdownMenuRadioGroup = forwardRef<DropdownMenuRadioGroupElement, Dropdow
 
 DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuRadioItem
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuRadioItem
+//
 
 const RADIO_ITEM_NAME = 'DropdownMenuRadioItem';
 
@@ -445,7 +445,7 @@ const DropdownMenuRadioItem = forwardRef<DropdownMenuRadioItemElement, DropdownM
       <MenuPrimitive.Item
         {...menuScope}
         {...itemProps}
-        className={tx('menu.item', 'menu__item', {}, classNames)}
+        className={tx('menu.item', {}, classNames)}
         ref={forwardedRef}
       />
     );
@@ -454,9 +454,9 @@ const DropdownMenuRadioItem = forwardRef<DropdownMenuRadioItemElement, DropdownM
 
 DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuItemIndicator
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuItemIndicator
+//
 
 const INDICATOR_NAME = 'DropdownMenuItemIndicator';
 
@@ -474,9 +474,9 @@ const DropdownMenuItemIndicator = forwardRef<DropdownMenuItemIndicatorElement, D
 
 DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuSeparator
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuSeparator
+//
 
 const SEPARATOR_NAME = 'DropdownMenuSeparator';
 
@@ -493,7 +493,7 @@ const DropdownMenuSeparator = forwardRef<DropdownMenuSeparatorElement, DropdownM
       <MenuPrimitive.Separator
         {...menuScope}
         {...separatorProps}
-        className={tx('menu.separator', 'menu__item', {}, classNames)}
+        className={tx('menu.separator', {}, classNames)}
         ref={forwardedRef}
       />
     );
@@ -502,9 +502,9 @@ const DropdownMenuSeparator = forwardRef<DropdownMenuSeparatorElement, DropdownM
 
 DropdownMenuSeparator.displayName = SEPARATOR_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuArrow
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuArrow
+//
 
 const ARROW_NAME = 'DropdownMenuArrow';
 
@@ -521,7 +521,7 @@ const DropdownMenuArrow = forwardRef<DropdownMenuArrowElement, DropdownMenuArrow
       <MenuPrimitive.Arrow
         {...menuScope}
         {...arrowProps}
-        className={tx('menu.arrow', 'menu__arrow', {}, classNames)}
+        className={tx('menu.arrow', {}, classNames)}
         ref={forwardedRef}
       />
     );
@@ -530,9 +530,9 @@ const DropdownMenuArrow = forwardRef<DropdownMenuArrowElement, DropdownMenuArrow
 
 DropdownMenuArrow.displayName = ARROW_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuSub
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuSub
+//
 
 interface DropdownMenuSubProps {
   children?: ReactNode;
@@ -557,9 +557,9 @@ const DropdownMenuSub: FC<DropdownMenuSubProps> = (props: ScopedProps<DropdownMe
   );
 };
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuSubTrigger
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuSubTrigger
+//
 
 const SUB_TRIGGER_NAME = 'DropdownMenuSubTrigger';
 
@@ -577,9 +577,9 @@ const DropdownMenuSubTrigger = forwardRef<DropdownMenuSubTriggerElement, Dropdow
 
 DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuSubContent
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuSubContent
+//
 
 const SUB_CONTENT_NAME = 'DropdownMenuSubContent';
 
@@ -615,7 +615,9 @@ const DropdownMenuSubContent = forwardRef<DropdownMenuSubContentElement, Dropdow
 
 DropdownMenuSubContent.displayName = SUB_CONTENT_NAME;
 
-/* ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenu
+//
 
 export const DropdownMenu = {
   Root: DropdownMenuRoot,

package/src/components/Message/Message.stories.tsx

@@ -5,7 +5,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { type MessageValence } from '@dxos/react-ui-types';
+import { type MessageValence } from '@dxos/ui-types';
 
 import { withTheme } from '../../testing';
 
@@ -25,10 +25,10 @@ const DefaultStory = ({ valence, title, body }: StoryProps) => (
 );
 
 const meta = {
-  title: 'ui/react-ui-core/Callout',
+  title: 'ui/react-ui-core/components/Callout',
   component: Callout.Root as any,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   parameters: { chromatic: { disableSnapshot: false } },
   argTypes: {
     valence: {

package/src/components/Message/Message.tsx

@@ -8,7 +8,7 @@ import { Slot } from '@radix-ui/react-slot';
 import React, { type ComponentPropsWithRef, forwardRef } from 'react';
 
 import { useId } from '@dxos/react-hooks';
-import { type Elevation, type MessageValence } from '@dxos/react-ui-types';
+import { type Elevation, type MessageValence } from '@dxos/ui-types';
 
 import { useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
@@ -31,9 +31,15 @@ type MessageRootProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.d
 };
 
 type MessageContextValue = { titleId?: string; descriptionId: string; valence: MessageValence };
+
 const MESSAGE_NAME = 'Message';
+
 const [MessageProvider, useMessageContext] = createContext<MessageContextValue>(MESSAGE_NAME);
 
+//
+// Root
+//
+
 const MessageRoot = forwardRef<HTMLDivElement, MessageRootProps>(
   (
     {
@@ -59,7 +65,7 @@ const MessageRoot = forwardRef<HTMLDivElement, MessageRootProps>(
         <Root
           role={valence === 'neutral' ? 'paragraph' : 'alert'}
           {...props}
-          className={tx('message.root', 'message', { valence, elevation }, classNames)}
+          className={tx('message.root', { valence, elevation }, classNames)}
           aria-labelledby={titleId}
           aria-describedby={descriptionId}
           ref={forwardedRef}
@@ -73,6 +79,10 @@ const MessageRoot = forwardRef<HTMLDivElement, MessageRootProps>(
 
 MessageRoot.displayName = MESSAGE_NAME;
 
+//
+// Title
+//
+
 type MessageTitleProps = Omit<ThemedClassName<ComponentPropsWithRef<typeof Primitive.h2>>, 'id'> & {
   asChild?: boolean;
   icon?: string;
@@ -87,18 +97,9 @@ const MessageTitle = forwardRef<HTMLHeadingElement, MessageTitleProps>(
     const Root = asChild ? Slot : Primitive.h2;
 
     return (
-      <Root
-        {...props}
-        className={tx('message.title', 'message__title', {}, classNames)}
-        id={titleId}
-        ref={forwardedRef}
-      >
+      <Root {...props} className={tx('message.title', {}, classNames)} id={titleId} ref={forwardedRef}>
         {!icon && valence === 'neutral' ? null : (
-          <Icon
-            size={5}
-            icon={icon ?? messageIcons[valence]}
-            classNames={tx('message.icon', 'message__icon', { valence })}
-          />
+          <Icon size={5} icon={icon ?? messageIcons[valence]} classNames={tx('message.icon', { valence })} />
         )}
         <span>{children}</span>
       </Root>
@@ -108,33 +109,41 @@ const MessageTitle = forwardRef<HTMLHeadingElement, MessageTitleProps>(
 
 MessageTitle.displayName = MESSAGE_TITLE_NAME;
 
+//
+// Content
+//
+
 type MessageContentProps = Omit<ThemedClassName<ComponentPropsWithRef<typeof Primitive.h2>>, 'id'> & {
   asChild?: boolean;
 };
 
-const MESSAGE_BODY_NAME = 'MessageContent';
+const MESSAGE_CONTENT_NAME = 'MessageContent';
 
 const MessageContent = forwardRef<HTMLParagraphElement, MessageContentProps>(
   ({ asChild, classNames, children, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const { descriptionId } = useMessageContext(MESSAGE_BODY_NAME);
+    const { descriptionId } = useMessageContext(MESSAGE_CONTENT_NAME);
     const Root = asChild ? Slot : Primitive.p;
     return (
-      <Root
-        {...props}
-        className={tx('message.content', 'message__content', {}, classNames)}
-        id={descriptionId}
-        ref={forwardedRef}
-      >
+      <Root {...props} className={tx('message.content', {}, classNames)} id={descriptionId} ref={forwardedRef}>
         {children}
       </Root>
     );
   },
 );
 
-MessageContent.displayName = MESSAGE_BODY_NAME;
+MessageContent.displayName = MESSAGE_CONTENT_NAME;
+
+//
+// Message
+//
+
+export const Message = {
+  Root: MessageRoot,
+  Title: MessageTitle,
+  Content: MessageContent,
+};
 
-export const Message = { Root: MessageRoot, Title: MessageTitle, Content: MessageContent };
 export const Callout = Message;
 
 export type { MessageRootProps, MessageTitleProps, MessageContentProps };

package/src/components/Popover/Popover.stories.tsx

@@ -29,10 +29,10 @@ const DefaultStory = ({ openTrigger, children }: PropsWithChildren<{ openTrigger
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Popover',
+  title: 'ui/react-ui-core/components/Popover',
   component: Popover.Root,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;