@dxos/react-ui 0.8.4-main.937b3ca → 0.8.4-main.9be5663bfe

package/src/components/Menu/DropdownMenu.tsx

@@ -17,9 +17,9 @@ import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import React, {
   type ComponentPropsWithRef,
   type ComponentPropsWithoutRef,
-  type ElementRef,
+  type ComponentRef,
   type FC,
-  type MutableRefObject,
+  PropsWithChildren,
   type ReactNode,
   type RefObject,
   forwardRef,
@@ -47,7 +47,7 @@ const useMenuScope: (scope?: Scope) => any = createMenuScope();
 
 type DropdownMenuContextValue = {
   triggerId: string;
-  triggerRef: MutableRefObject<HTMLButtonElement | null>;
+  triggerRef: RefObject<HTMLButtonElement | null>;
   contentId: string;
   open: boolean;
   onOpenChange(open: boolean): void;
@@ -58,17 +58,23 @@ type DropdownMenuContextValue = {
 const [DropdownMenuProvider, useDropdownMenuContext] =
   createDropdownMenuContext<DropdownMenuContextValue>(DROPDOWN_MENU_NAME);
 
-interface DropdownMenuRootProps {
-  children?: ReactNode;
+type DropdownMenuRootProps = PropsWithChildren<{
   dir?: Direction;
+  modal?: boolean;
   open?: boolean;
   defaultOpen?: boolean;
   onOpenChange?(open: boolean): void;
-  modal?: boolean;
-}
-
-const DropdownMenuRoot: FC<DropdownMenuRootProps> = (props: ScopedProps<DropdownMenuRootProps>) => {
-  const { __scopeDropdownMenu, children, dir, open: openProp, defaultOpen, onOpenChange, modal = true } = props;
+}>;
+
+const DropdownMenuRoot = ({
+  __scopeDropdownMenu,
+  children,
+  dir,
+  modal = true,
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+}: ScopedProps<DropdownMenuRootProps>) => {
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const triggerRef = useRef<HTMLButtonElement | null>(null);
   const [open = false, setOpen] = useControllableState({
@@ -81,14 +87,14 @@ const DropdownMenuRoot: FC<DropdownMenuRootProps> = (props: ScopedProps<Dropdown
     <DropdownMenuProvider
       scope={__scopeDropdownMenu}
       triggerId={useId()}
-      triggerRef={triggerRef as MutableRefObject<HTMLButtonElement | null>}
+      triggerRef={triggerRef}
       contentId={useId()}
       open={open}
       onOpenChange={setOpen}
       onOpenToggle={useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}
       modal={modal}
     >
-      <MenuPrimitive.Root {...menuScope} open={open} onOpenChange={setOpen} dir={dir} modal={modal}>
+      <MenuPrimitive.Root {...menuScope} dir={dir} modal={modal} open={open} onOpenChange={setOpen}>
         {children}
       </MenuPrimitive.Root>
     </DropdownMenuProvider>
@@ -103,9 +109,9 @@ DropdownMenuRoot.displayName = DROPDOWN_MENU_NAME;
 
 const TRIGGER_NAME = 'DropdownMenuTrigger';
 
-type DropdownMenuTriggerElement = ElementRef<typeof Primitive.button>;
+type DropdownMenuTriggerElement = ComponentRef<typeof Primitive.button>;
 type PrimitiveButtonProps = ComponentPropsWithoutRef<typeof Primitive.button>;
-interface DropdownMenuTriggerProps extends PrimitiveButtonProps {}
+type DropdownMenuTriggerProps = PrimitiveButtonProps;
 
 const DropdownMenuTrigger = forwardRef<DropdownMenuTriggerElement, DropdownMenuTriggerProps>(
   (props: ScopedProps<DropdownMenuTriggerProps>, forwardedRef) => {
@@ -168,9 +174,9 @@ DropdownMenuTrigger.displayName = TRIGGER_NAME;
 
 const VIRTUAL_TRIGGER_NAME = 'DropdownMenuVirtualTrigger';
 
-interface DropdownMenuVirtualTriggerProps {
+type DropdownMenuVirtualTriggerProps = {
   virtualRef: RefObject<DropdownMenuTriggerElement | null>;
-}
+};
 
 const DropdownMenuVirtualTrigger = (props: ScopedProps<DropdownMenuVirtualTriggerProps>) => {
   const { __scopeDropdownMenu, virtualRef } = props;
@@ -193,7 +199,7 @@ DropdownMenuVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME;
 const PORTAL_NAME = 'DropdownMenuPortal';
 
 type MenuPortalProps = ComponentPropsWithoutRef<typeof MenuPrimitive.Portal>;
-interface DropdownMenuPortalProps extends MenuPortalProps {}
+type DropdownMenuPortalProps = MenuPortalProps;
 
 const DropdownMenuPortal: FC<DropdownMenuPortalProps> = (props: ScopedProps<DropdownMenuPortalProps>) => {
   const { __scopeDropdownMenu, ...portalProps } = props;
@@ -214,11 +220,11 @@ type DropdownMenuViewportProps = ThemedClassName<ComponentPropsWithRef<typeof Pr
 const DropdownMenuViewport = forwardRef<HTMLDivElement, DropdownMenuViewportProps>(
   ({ classNames, asChild, children, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const Root = asChild ? Slot : Primitive.div;
+    const Comp = asChild ? Slot : Primitive.div;
     return (
-      <Root {...props} className={tx('menu.viewport', 'menu__viewport', {}, classNames)} ref={forwardedRef}>
+      <Comp {...props} className={tx('menu.viewport', {}, classNames)} ref={forwardedRef}>
         {children}
-      </Root>
+      </Comp>
     );
   },
 );
@@ -229,9 +235,9 @@ const DropdownMenuViewport = forwardRef<HTMLDivElement, DropdownMenuViewportProp
 
 const CONTENT_NAME = 'DropdownMenuContent';
 
-type DropdownMenuContentElement = ElementRef<typeof MenuPrimitive.Content>;
+type DropdownMenuContentElement = ComponentRef<typeof MenuPrimitive.Content>;
 type MenuContentProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Content>>;
-interface DropdownMenuContentProps extends Omit<MenuContentProps, 'onEntryFocus'> {}
+type DropdownMenuContentProps = Omit<MenuContentProps, 'onEntryFocus'>;
 
 const DropdownMenuContent = forwardRef<DropdownMenuContentElement, DropdownMenuContentProps>(
   (props: ScopedProps<DropdownMenuContentProps>, forwardedRef) => {
@@ -283,7 +289,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
@@ -308,9 +314,9 @@ DropdownMenuContent.displayName = CONTENT_NAME;
 
 const GROUP_NAME = 'DropdownMenuGroup';
 
-type DropdownMenuGroupElement = ElementRef<typeof MenuPrimitive.Group>;
+type DropdownMenuGroupElement = ComponentRef<typeof MenuPrimitive.Group>;
 type MenuGroupProps = ComponentPropsWithoutRef<typeof MenuPrimitive.Group>;
-interface DropdownMenuGroupProps extends MenuGroupProps {}
+type DropdownMenuGroupProps = MenuGroupProps;
 
 const DropdownMenuGroup = forwardRef<DropdownMenuGroupElement, DropdownMenuGroupProps>(
   (props: ScopedProps<DropdownMenuGroupProps>, forwardedRef) => {
@@ -328,9 +334,9 @@ DropdownMenuGroup.displayName = GROUP_NAME;
 
 const LABEL_NAME = 'DropdownMenuLabel';
 
-type DropdownMenuLabelElement = ElementRef<typeof MenuPrimitive.Label>;
+type DropdownMenuLabelElement = ComponentRef<typeof MenuPrimitive.Label>;
 type MenuLabelProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Label>>;
-interface DropdownMenuLabelProps extends MenuLabelProps {}
+type DropdownMenuLabelProps = MenuLabelProps;
 
 const DropdownMenuGroupLabel = forwardRef<DropdownMenuLabelElement, DropdownMenuLabelProps>(
   (props: ScopedProps<DropdownMenuLabelProps>, forwardedRef) => {
@@ -341,7 +347,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}
       />
     );
@@ -356,9 +362,9 @@ DropdownMenuGroupLabel.displayName = LABEL_NAME;
 
 const ITEM_NAME = 'DropdownMenuItem';
 
-type DropdownMenuItemElement = ElementRef<typeof MenuPrimitive.Item>;
+type DropdownMenuItemElement = ComponentRef<typeof MenuPrimitive.Item>;
 type MenuItemProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Item>>;
-interface DropdownMenuItemProps extends MenuItemProps {}
+type DropdownMenuItemProps = MenuItemProps;
 
 const DropdownMenuItem = forwardRef<DropdownMenuItemElement, DropdownMenuItemProps>(
   (props: ScopedProps<DropdownMenuItemProps>, forwardedRef) => {
@@ -369,7 +375,7 @@ const DropdownMenuItem = forwardRef<DropdownMenuItemElement, DropdownMenuItemPro
       <MenuPrimitive.Item
         {...menuScope}
         {...itemProps}
-        className={tx('menu.item', 'menu__item', {}, classNames)}
+        className={tx('menu.item', {}, classNames)}
         ref={forwardedRef}
       />
     );
@@ -384,9 +390,9 @@ DropdownMenuItem.displayName = ITEM_NAME;
 
 const CHECKBOX_ITEM_NAME = 'DropdownMenuCheckboxItem';
 
-type DropdownMenuCheckboxItemElement = ElementRef<typeof MenuPrimitive.CheckboxItem>;
+type DropdownMenuCheckboxItemElement = ComponentRef<typeof MenuPrimitive.CheckboxItem>;
 type MenuCheckboxItemProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.CheckboxItem>>;
-interface DropdownMenuCheckboxItemProps extends MenuCheckboxItemProps {}
+type DropdownMenuCheckboxItemProps = MenuCheckboxItemProps;
 
 const DropdownMenuCheckboxItem = forwardRef<DropdownMenuCheckboxItemElement, DropdownMenuCheckboxItemProps>(
   (props: ScopedProps<DropdownMenuCheckboxItemProps>, forwardedRef) => {
@@ -397,7 +403,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}
       />
     );
@@ -412,9 +418,9 @@ DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
 
 const RADIO_GROUP_NAME = 'DropdownMenuRadioGroup';
 
-type DropdownMenuRadioGroupElement = ElementRef<typeof MenuPrimitive.RadioGroup>;
+type DropdownMenuRadioGroupElement = ComponentRef<typeof MenuPrimitive.RadioGroup>;
 type MenuRadioGroupProps = ComponentPropsWithoutRef<typeof MenuPrimitive.RadioGroup>;
-interface DropdownMenuRadioGroupProps extends MenuRadioGroupProps {}
+type DropdownMenuRadioGroupProps = MenuRadioGroupProps;
 
 const DropdownMenuRadioGroup = forwardRef<DropdownMenuRadioGroupElement, DropdownMenuRadioGroupProps>(
   (props: ScopedProps<DropdownMenuRadioGroupProps>, forwardedRef) => {
@@ -432,7 +438,7 @@ DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
 
 const RADIO_ITEM_NAME = 'DropdownMenuRadioItem';
 
-type DropdownMenuRadioItemElement = ElementRef<typeof MenuPrimitive.RadioItem>;
+type DropdownMenuRadioItemElement = ComponentRef<typeof MenuPrimitive.RadioItem>;
 type MenuRadioItemProps = ComponentPropsWithoutRef<typeof MenuPrimitive.RadioItem>;
 type DropdownMenuRadioItemProps = ThemedClassName<MenuRadioItemProps>;
 
@@ -445,7 +451,7 @@ const DropdownMenuRadioItem = forwardRef<DropdownMenuRadioItemElement, DropdownM
       <MenuPrimitive.Item
         {...menuScope}
         {...itemProps}
-        className={tx('menu.item', 'menu__item', {}, classNames)}
+        className={tx('menu.item', {}, classNames)}
         ref={forwardedRef}
       />
     );
@@ -460,9 +466,9 @@ DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
 
 const INDICATOR_NAME = 'DropdownMenuItemIndicator';
 
-type DropdownMenuItemIndicatorElement = ElementRef<typeof MenuPrimitive.ItemIndicator>;
+type DropdownMenuItemIndicatorElement = ComponentRef<typeof MenuPrimitive.ItemIndicator>;
 type MenuItemIndicatorProps = ComponentPropsWithoutRef<typeof MenuPrimitive.ItemIndicator>;
-interface DropdownMenuItemIndicatorProps extends MenuItemIndicatorProps {}
+type DropdownMenuItemIndicatorProps = MenuItemIndicatorProps;
 
 const DropdownMenuItemIndicator = forwardRef<DropdownMenuItemIndicatorElement, DropdownMenuItemIndicatorProps>(
   (props: ScopedProps<DropdownMenuItemIndicatorProps>, forwardedRef) => {
@@ -480,9 +486,9 @@ DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
 
 const SEPARATOR_NAME = 'DropdownMenuSeparator';
 
-type DropdownMenuSeparatorElement = ElementRef<typeof MenuPrimitive.Separator>;
+type DropdownMenuSeparatorElement = ComponentRef<typeof MenuPrimitive.Separator>;
 type MenuSeparatorProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Separator>>;
-interface DropdownMenuSeparatorProps extends MenuSeparatorProps {}
+type DropdownMenuSeparatorProps = MenuSeparatorProps;
 
 const DropdownMenuSeparator = forwardRef<DropdownMenuSeparatorElement, DropdownMenuSeparatorProps>(
   (props: ScopedProps<DropdownMenuSeparatorProps>, forwardedRef) => {
@@ -493,7 +499,7 @@ const DropdownMenuSeparator = forwardRef<DropdownMenuSeparatorElement, DropdownM
       <MenuPrimitive.Separator
         {...menuScope}
         {...separatorProps}
-        className={tx('menu.separator', 'menu__item', {}, classNames)}
+        className={tx('menu.separator', {}, classNames)}
         ref={forwardedRef}
       />
     );
@@ -508,9 +514,9 @@ DropdownMenuSeparator.displayName = SEPARATOR_NAME;
 
 const ARROW_NAME = 'DropdownMenuArrow';
 
-type DropdownMenuArrowElement = ElementRef<typeof MenuPrimitive.Arrow>;
+type DropdownMenuArrowElement = ComponentRef<typeof MenuPrimitive.Arrow>;
 type MenuArrowProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Arrow>>;
-interface DropdownMenuArrowProps extends MenuArrowProps {}
+type DropdownMenuArrowProps = MenuArrowProps;
 
 const DropdownMenuArrow = forwardRef<DropdownMenuArrowElement, DropdownMenuArrowProps>(
   (props: ScopedProps<DropdownMenuArrowProps>, forwardedRef) => {
@@ -521,7 +527,7 @@ const DropdownMenuArrow = forwardRef<DropdownMenuArrowElement, DropdownMenuArrow
       <MenuPrimitive.Arrow
         {...menuScope}
         {...arrowProps}
-        className={tx('menu.arrow', 'menu__arrow', {}, classNames)}
+        className={tx('menu.arrow', {}, classNames)}
         ref={forwardedRef}
       />
     );
@@ -534,12 +540,12 @@ DropdownMenuArrow.displayName = ARROW_NAME;
 // DropdownMenuSub
 //
 
-interface DropdownMenuSubProps {
+type DropdownMenuSubProps = {
   children?: ReactNode;
   open?: boolean;
   defaultOpen?: boolean;
   onOpenChange?(open: boolean): void;
-}
+};
 
 const DropdownMenuSub: FC<DropdownMenuSubProps> = (props: ScopedProps<DropdownMenuSubProps>) => {
   const { __scopeDropdownMenu, children, open: openProp, onOpenChange, defaultOpen } = props;
@@ -563,9 +569,9 @@ const DropdownMenuSub: FC<DropdownMenuSubProps> = (props: ScopedProps<DropdownMe
 
 const SUB_TRIGGER_NAME = 'DropdownMenuSubTrigger';
 
-type DropdownMenuSubTriggerElement = ElementRef<typeof MenuPrimitive.SubTrigger>;
+type DropdownMenuSubTriggerElement = ComponentRef<typeof MenuPrimitive.SubTrigger>;
 type MenuSubTriggerProps = ComponentPropsWithoutRef<typeof MenuPrimitive.SubTrigger>;
-interface DropdownMenuSubTriggerProps extends MenuSubTriggerProps {}
+type DropdownMenuSubTriggerProps = MenuSubTriggerProps;
 
 const DropdownMenuSubTrigger = forwardRef<DropdownMenuSubTriggerElement, DropdownMenuSubTriggerProps>(
   (props: ScopedProps<DropdownMenuSubTriggerProps>, forwardedRef) => {
@@ -583,9 +589,9 @@ DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
 
 const SUB_CONTENT_NAME = 'DropdownMenuSubContent';
 
-type DropdownMenuSubContentElement = ElementRef<typeof MenuPrimitive.Content>;
+type DropdownMenuSubContentElement = ComponentRef<typeof MenuPrimitive.Content>;
 type MenuSubContentProps = ComponentPropsWithoutRef<typeof MenuPrimitive.SubContent>;
-interface DropdownMenuSubContentProps extends MenuSubContentProps {}
+type DropdownMenuSubContentProps = MenuSubContentProps;
 
 const DropdownMenuSubContent = forwardRef<DropdownMenuSubContentElement, DropdownMenuSubContentProps>(
   (props: ScopedProps<DropdownMenuSubContentProps>, forwardedRef) => {

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

@@ -5,31 +5,37 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
+import { random } from '@dxos/random';
 import { type MessageValence } from '@dxos/ui-types';
 
 import { withTheme } from '../../testing';
+import { Message } from './Message';
 
-import { Callout } from './Message';
+random.seed(123);
 
-type StoryProps = {
+type DefaultStoryProps = {
   valence: MessageValence;
   title: string;
   body: string;
 };
 
-const DefaultStory = ({ valence, title, body }: StoryProps) => (
-  <Callout.Root valence={valence}>
-    {title && <Callout.Title>{title}</Callout.Title>}
-    {body && <Callout.Content>{body}</Callout.Content>}
-  </Callout.Root>
+const DefaultStory = ({ valence, title, body }: DefaultStoryProps) => (
+  <div className='w-[30rem]'>
+    <Message.Root valence={valence}>
+      {title && <Message.Title>{title}</Message.Title>}
+      {body && <Message.Content>{body}</Message.Content>}
+    </Message.Root>
+  </div>
 );
 
 const meta = {
-  title: 'ui/react-ui-core/Callout',
-  component: Callout.Root as any,
+  title: 'ui/react-ui-core/components/Message',
+  component: Message.Root as any,
   render: DefaultStory,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
+  decorators: [withTheme()],
+  parameters: {
+    layout: 'centered',
+  },
   argTypes: {
     valence: {
       control: 'select',
@@ -46,6 +52,14 @@ export const Default: Story = {
   args: {
     valence: 'neutral',
     title: 'Alert title',
-    body: 'Alert content',
+    body: random.lorem.paragraphs(1),
+  },
+};
+
+export const Error: Story = {
+  args: {
+    valence: 'error',
+    title: 'Error title',
+    body: random.lorem.paragraphs(1),
   },
 };

package/src/components/Message/Message.tsx

@@ -58,20 +58,20 @@ const MessageRoot = forwardRef<HTMLDivElement, MessageRootProps>(
     const titleId = useId('message__title', propsTitleId);
     const descriptionId = useId('message__description', propsDescriptionId);
     const elevation = useElevationContext(propsElevation);
-    const Root = asChild ? Slot : Primitive.div;
+    const Comp = asChild ? Slot : Primitive.div;
 
     return (
       <MessageProvider {...{ titleId, descriptionId, valence }}>
-        <Root
+        <Comp
           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}
         >
           {children}
-        </Root>
+        </Comp>
       </MessageProvider>
     );
   },
@@ -91,27 +91,16 @@ type MessageTitleProps = Omit<ThemedClassName<ComponentPropsWithRef<typeof Primi
 const MESSAGE_TITLE_NAME = 'MessageTitle';
 
 const MessageTitle = forwardRef<HTMLHeadingElement, MessageTitleProps>(
-  ({ asChild, classNames, children, icon, ...props }, forwardedRef) => {
+  ({ asChild, classNames, children, icon: iconProp, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const { titleId, valence } = useMessageContext(MESSAGE_TITLE_NAME);
-    const Root = asChild ? Slot : Primitive.h2;
-
+    const Comp = asChild ? Slot : Primitive.h2;
+    const icon = iconProp ?? messageIcons[valence];
     return (
-      <Root
-        {...props}
-        className={tx('message.title', '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 })}
-          />
-        )}
-        <span>{children}</span>
-      </Root>
+      <Comp {...props} className={tx('message.header', {}, classNames)} id={titleId} ref={forwardedRef}>
+        {!icon && valence === 'neutral' ? <div /> : <Icon icon={icon} classNames={tx('message.icon', { valence })} />}
+        <span className={tx('message.title', {}, classNames)}>{children}</span>
+      </Comp>
     );
   },
 );
@@ -132,16 +121,11 @@ const MessageContent = forwardRef<HTMLParagraphElement, MessageContentProps>(
   ({ asChild, classNames, children, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const { descriptionId } = useMessageContext(MESSAGE_CONTENT_NAME);
-    const Root = asChild ? Slot : Primitive.p;
+    const Comp = asChild ? Slot : Primitive.p;
     return (
-      <Root
-        {...props}
-        className={tx('message.content', 'message__content', {}, classNames)}
-        id={descriptionId}
-        ref={forwardedRef}
-      >
+      <Comp {...props} className={tx('message.content', {}, classNames)} id={descriptionId} ref={forwardedRef}>
         {children}
-      </Root>
+      </Comp>
     );
   },
 );

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

@@ -5,14 +5,13 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { type PropsWithChildren, type ReactNode, useRef, useState } from 'react';
 
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 
 import { withTheme } from '../../testing';
 import { Button } from '../Button';
-
 import { Popover } from './Popover';
 
-faker.seed(1234);
+random.seed(1234);
 
 const DefaultStory = ({ openTrigger, children }: PropsWithChildren<{ openTrigger: ReactNode }>) => {
   return (
@@ -20,7 +19,7 @@ const DefaultStory = ({ openTrigger, children }: PropsWithChildren<{ openTrigger
       <Popover.Trigger asChild>{openTrigger}</Popover.Trigger>
       <Popover.Content>
         <Popover.Viewport>
-          <p className='pli-2 plb-1 min-is-[18rem] max-is-[38rem]'>{children}</p>
+          <p className='px-2 py-1 min-w-[18rem] max-w-[38rem]'>{children}</p>
         </Popover.Viewport>
         <Popover.Arrow />
       </Popover.Content>
@@ -29,10 +28,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;
@@ -42,7 +41,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     openTrigger: <Button>Open popover</Button>,
-    children: faker.lorem.paragraphs(3),
+    children: random.lorem.paragraphs(3),
   },
 };
 
@@ -59,7 +58,7 @@ export const VirtualTrigger = {
           <Popover.VirtualTrigger virtualRef={buttonRef} />
           <Popover.Content>
             <Popover.Viewport>
-              <p className='pli-2 plb-1 min-is-[18rem] max-is-[38rem]'>{faker.lorem.paragraphs(3)}</p>
+              <p className='px-2 py-1 min-w-[18rem] max-w-[38rem]'>{random.lorem.paragraphs(3)}</p>
             </Popover.Viewport>
             <Popover.Arrow />
           </Popover.Content>