@dxos/react-ui 0.3.11-main.3f845e1 → 0.3.11-main.463e5cd

package/src/components/{Lists → List}/List.stories.tsx

@@ -7,10 +7,18 @@ import '@dxosTheme';
 import { DndContext, type DragEndEvent, type DragStartEvent } from '@dnd-kit/core';
 import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { DotsSixVertical, PushPin } from '@phosphor-icons/react';
 import React, { type FC, type ReactNode, useState } from 'react';
 
-import { getSize, mx, surfaceElevation } from '@dxos/react-ui-theme';
+import {
+  getSize,
+  ghostHover,
+  ghostSelected,
+  ghostSelectedTrackingInterFromNormal,
+  mx,
+  surfaceElevation,
+} from '@dxos/react-ui-theme';
 
 import { List, ListItem, type ListProps, type ListScopedProps } from './List';
 import { withTheme } from '../../testing';
@@ -106,6 +114,7 @@ const ManySizesDraggableListItem = ({
     </ListItem.Root>
   );
 };
+
 export const ManySizesDraggable = {
   render: ({ ...args }) => {
     const [items, setItems] = useState(
@@ -183,6 +192,45 @@ export const Collapsible = {
   },
   args: {
     variant: 'unordered',
-    toggleOpenLabel: 'Open/close storybook list item',
+    // toggleOpenLabel: 'Open/close storybook list item', // TODO(burdon): ???
+  },
+};
+
+export const SelectableListbox = {
+  render: () => {
+    const [selectedId, setSelectedId] = useState<string>();
+    const domAttributes = useArrowNavigationGroup({ axis: 'vertical' });
+    const [items, _setItems] = useState(
+      [...Array(12)].map((_, index) => ({
+        id: `listItem-${index}`,
+        text: `List item ${index + 1}`,
+      })),
+    );
+
+    const handleKeyUp = (event: any, id: string) => {
+      switch (event.key) {
+        case ' ':
+        case 'Enter': {
+          setSelectedId(id);
+        }
+      }
+    };
+
+    return (
+      <List selectable {...domAttributes}>
+        {items.map(({ id, text }) => (
+          <ListItem.Root
+            key={id}
+            tabIndex={0}
+            selected={selectedId === id}
+            classNames={mx('items-center', ghostHover, ghostSelected, ghostSelectedTrackingInterFromNormal)}
+            onClick={() => setSelectedId(id)}
+            onKeyUp={(event) => handleKeyUp(event, id)}
+          >
+            <ListItem.Heading classNames='grow'>Lorem ipsum dolor sit amet</ListItem.Heading>
+          </ListItem.Root>
+        ))}
+      </List>
+    );
   },
 };

package/src/components/Menus/ContextMenu.stories.tsx

@@ -0,0 +1,106 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React from 'react';
+
+import { ContextMenu } from './ContextMenu';
+import { withTheme } from '../../testing';
+
+const StorybookContextMenu = () => {
+  // NOTE(thure): Since long-tap will select text in some OSs, apply `select-none` to `ContextMenu.Trigger` where possible.
+  return (
+    <ContextMenu.Root>
+      <ContextMenu.Trigger className='select-none border border-dashed border-neutral-400/50 rounded-lg flex items-center justify-center p-8 font-normal'>
+        Right-click / long-tap here.
+      </ContextMenu.Trigger>
+
+      <ContextMenu.Content collisionPadding={8}>
+        <ContextMenu.Viewport>
+          <ContextMenu.Item>
+            <span className='grow'>New Tab</span>
+            <span className='opacity-50'>⌘+T</span>
+          </ContextMenu.Item>
+          <ContextMenu.Item>
+            <span className='grow'>New Window</span>
+            <span className='opacity-50'>⌘+N</span>
+          </ContextMenu.Item>
+          <ContextMenu.Item disabled>
+            <span className='grow'>New Private Window</span>
+            <span className='opacity-50'>⇧+⌘+N</span>
+          </ContextMenu.Item>
+          {/* <ContextMenu.Sub> */}
+          {/*  <ContextMenu.SubTrigger> */}
+          {/*    More Tools */}
+          {/*    <div> */}
+          {/*      <ChevronRightIcon /> */}
+          {/*    </div> */}
+          {/*  </ContextMenu.SubTrigger> */}
+          {/*  <ContextMenu.Portal> */}
+          {/*    <ContextMenu.SubContent sideOffset={2} alignOffset={-5}> */}
+          {/*      <ContextMenu.Item> */}
+          {/*        Save Page As… <div>⌘+S</div> */}
+          {/*      </ContextMenu.Item> */}
+          {/*      <ContextMenu.Item>Create Shortcut…</ContextMenu.Item> */}
+          {/*      <ContextMenu.Item>Name Window…</ContextMenu.Item> */}
+          {/*      <ContextMenu.Separator /> */}
+          {/*      <ContextMenu.Item>Developer Tools</ContextMenu.Item> */}
+          {/*    </ContextMenu.SubContent> */}
+          {/*  </ContextMenu.Portal> */}
+          {/* </ContextMenu.Sub> */}
+
+          {/* <ContextMenu.Separator /> */}
+
+          {/* <ContextMenu.CheckboxItem checked={bookmarksChecked} onCheckedChange={setBookmarksChecked}> */}
+          {/*  <ContextMenu.ItemIndicator> */}
+          {/*    <CheckIcon /> */}
+          {/*  </ContextMenu.ItemIndicator> */}
+          {/*  Show Bookmarks <div>⌘+B</div> */}
+          {/* </ContextMenu.CheckboxItem> */}
+          {/* <ContextMenu.CheckboxItem checked={urlsChecked} onCheckedChange={setUrlsChecked}> */}
+          {/*  <ContextMenu.ItemIndicator> */}
+          {/*    <CheckIcon /> */}
+          {/*  </ContextMenu.ItemIndicator> */}
+          {/*  Show Full URLs */}
+          {/* </ContextMenu.CheckboxItem> */}
+
+          <ContextMenu.Separator />
+
+          <ContextMenu.GroupLabel>People</ContextMenu.GroupLabel>
+          {/* <ContextMenu.RadioGroup value={person} onValueChange={setPerson}> */}
+          {/*  <ContextMenu.RadioItem value='pedro'> */}
+          {/*    <ContextMenu.ItemIndicator> */}
+          {/*      <DotFilledIcon /> */}
+          {/*    </ContextMenu.ItemIndicator> */}
+          {/*    Pedro Duarte */}
+          {/*  </ContextMenu.RadioItem> */}
+          {/*  <ContextMenu.RadioItem value='colm'> */}
+          {/*    <ContextMenu.ItemIndicator> */}
+          {/*      <DotFilledIcon /> */}
+          {/*    </ContextMenu.ItemIndicator> */}
+          {/*    Colm Tuite */}
+          {/*  </ContextMenu.RadioItem> */}
+          {/* </ContextMenu.RadioGroup> */}
+        </ContextMenu.Viewport>
+
+        <ContextMenu.Arrow />
+      </ContextMenu.Content>
+    </ContextMenu.Root>
+  );
+};
+
+export default {
+  title: 'react-ui/Context menu',
+  component: StorybookContextMenu,
+  decorators: [withTheme],
+  parameters: { chromatic: { disableSnapshot: false } },
+};
+
+export const Default = {
+  args: {},
+  parameters: {
+    chromatic: { delay: 1600 },
+  },
+};

package/src/components/Menus/ContextMenu.tsx

@@ -0,0 +1,170 @@
+//
+// Copyright 2023 DXOS.org
+//
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import React, { type ComponentPropsWithRef, forwardRef } from 'react';
+
+import { useThemeContext } from '../../hooks';
+import { type ThemedClassName } from '../../util';
+import { ElevationProvider } from '../ElevationProvider';
+
+type ContextMenuRootProps = ContextMenuPrimitive.ContextMenuProps;
+
+const ContextMenuRoot = ContextMenuPrimitive.ContextMenu;
+
+type ContextMenuTriggerProps = ContextMenuPrimitive.ContextMenuTriggerProps;
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+
+type ContextMenuPortalProps = ContextMenuPrimitive.ContextMenuPortalProps;
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
+
+type ContextMenuContentProps = ThemedClassName<ContextMenuPrimitive.ContextMenuContentProps> & {
+  constrainBlockSize?: boolean;
+};
+
+const ContextMenuContent = forwardRef<HTMLDivElement, ContextMenuContentProps>(
+  ({ classNames, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <ContextMenuPrimitive.Content
+        collisionPadding={8}
+        {...props}
+        className={tx('menu.content', 'menu', {}, classNames)}
+        ref={forwardedRef}
+      >
+        <ElevationProvider elevation='chrome'>{children}</ElevationProvider>
+      </ContextMenuPrimitive.Content>
+    );
+  },
+);
+
+type ContextMenuViewportProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
+  asChild?: boolean;
+};
+
+const ContextMenuViewport = forwardRef<HTMLDivElement, ContextMenuViewportProps>(
+  ({ classNames, asChild, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const Root = asChild ? Slot : Primitive.div;
+    return (
+      <Root {...props} className={tx('menu.viewport', 'menu__viewport', {}, classNames)} ref={forwardedRef}>
+        {children}
+      </Root>
+    );
+  },
+);
+
+type ContextMenuArrowProps = ThemedClassName<ContextMenuPrimitive.ContextMenuArrowProps>;
+
+const ContextMenuArrow = forwardRef<SVGSVGElement, ContextMenuArrowProps>(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <ContextMenuPrimitive.Arrow
+      {...props}
+      className={tx('menu.arrow', 'menu__arrow', {}, classNames)}
+      ref={forwardedRef}
+    />
+  );
+});
+
+type ContextMenuGroupProps = ContextMenuPrimitive.ContextMenuGroupProps;
+
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+
+type ContextMenuItemIndicatorProps = ContextMenuPrimitive.ContextMenuItemIndicatorProps;
+
+const ContextMenuItemIndicator = ContextMenuPrimitive.ItemIndicator;
+
+type ContextMenuItemProps = ThemedClassName<ContextMenuPrimitive.ContextMenuItemProps>;
+
+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}
+      />
+    );
+  },
+);
+
+type ContextMenuCheckboxItemProps = ThemedClassName<ContextMenuPrimitive.ContextMenuCheckboxItemProps>;
+
+const ContextMenuCheckboxItem = forwardRef<HTMLDivElement, ContextMenuCheckboxItemProps>(
+  ({ classNames, ...props }: ContextMenuItemProps, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <ContextMenuPrimitive.CheckboxItem
+        {...props}
+        className={tx('menu.item', 'menu__item--checkbox', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+type ContextMenuSeparatorProps = ThemedClassName<ContextMenuPrimitive.ContextMenuSeparatorProps>;
+
+const ContextMenuSeparator = forwardRef<HTMLDivElement, ContextMenuSeparatorProps>(
+  ({ classNames, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <ContextMenuPrimitive.Separator
+        {...props}
+        className={tx('menu.separator', 'menu__item', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+type ContextMenuGroupLabelProps = ThemedClassName<ContextMenuPrimitive.ContextMenuLabelProps>;
+
+const ContextMenuGroupLabel = forwardRef<HTMLDivElement, ContextMenuGroupLabelProps>(
+  ({ classNames, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <ContextMenuPrimitive.Label
+        {...props}
+        className={tx('menu.groupLabel', 'menu__group__label', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+export const ContextMenu = {
+  Root: ContextMenuRoot,
+  Trigger: ContextMenuTrigger,
+  Portal: ContextMenuPortal,
+  Content: ContextMenuContent,
+  Viewport: ContextMenuViewport,
+  Arrow: ContextMenuArrow,
+  Group: ContextMenuGroup,
+  Item: ContextMenuItem,
+  CheckboxItem: ContextMenuCheckboxItem,
+  ItemIndicator: ContextMenuItemIndicator,
+  Separator: ContextMenuSeparator,
+  GroupLabel: ContextMenuGroupLabel,
+};
+
+export type {
+  ContextMenuRootProps,
+  ContextMenuTriggerProps,
+  ContextMenuPortalProps,
+  ContextMenuContentProps,
+  ContextMenuViewportProps,
+  ContextMenuArrowProps,
+  ContextMenuGroupProps,
+  ContextMenuItemProps,
+  ContextMenuCheckboxItemProps,
+  ContextMenuItemIndicatorProps,
+  ContextMenuSeparatorProps,
+  ContextMenuGroupLabelProps,
+};

package/src/components/Menus/DropdownMenu.tsx

@@ -0,0 +1,173 @@
+//
+// Copyright 2023 DXOS.org
+//
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import React, { type ComponentPropsWithRef, forwardRef } from 'react';
+
+import { useThemeContext } from '../../hooks';
+import { type ThemedClassName } from '../../util';
+import { ElevationProvider } from '../ElevationProvider';
+
+type DropdownMenuRootProps = DropdownMenuPrimitive.DropdownMenuProps;
+
+const DropdownMenuRoot = DropdownMenuPrimitive.DropdownMenu;
+
+type DropdownMenuTriggerProps = DropdownMenuPrimitive.DropdownMenuTriggerProps;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+type DropdownMenuPortalProps = DropdownMenuPrimitive.DropdownMenuPortalProps;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+type DropdownMenuContentProps = ThemedClassName<DropdownMenuPrimitive.DropdownMenuContentProps> & {
+  constrainBlockSize?: boolean;
+};
+
+const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuContentProps>(
+  ({ classNames, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DropdownMenuPrimitive.Content
+        sideOffset={4}
+        collisionPadding={8}
+        {...props}
+        className={tx('menu.content', 'menu', {}, classNames)}
+        ref={forwardedRef}
+      >
+        <ElevationProvider elevation='chrome'>{children}</ElevationProvider>
+      </DropdownMenuPrimitive.Content>
+    );
+  },
+);
+
+type DropdownMenuViewportProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
+  asChild?: boolean;
+};
+
+const DropdownMenuViewport = forwardRef<HTMLDivElement, DropdownMenuViewportProps>(
+  ({ classNames, asChild, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const Root = asChild ? Slot : Primitive.div;
+    return (
+      <Root {...props} className={tx('menu.viewport', 'menu__viewport', {}, classNames)} ref={forwardedRef}>
+        {children}
+      </Root>
+    );
+  },
+);
+
+type DropdownMenuArrowProps = ThemedClassName<DropdownMenuPrimitive.DropdownMenuArrowProps>;
+
+const DropdownMenuArrow = forwardRef<SVGSVGElement, DropdownMenuArrowProps>(
+  ({ classNames, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DropdownMenuPrimitive.Arrow
+        {...props}
+        className={tx('menu.arrow', 'menu__arrow', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+type DropdownMenuGroupProps = DropdownMenuPrimitive.DropdownMenuGroupProps;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+type DropdownMenuItemIndicatorProps = DropdownMenuPrimitive.DropdownMenuItemIndicatorProps;
+
+const DropdownMenuItemIndicator = DropdownMenuPrimitive.ItemIndicator;
+
+type DropdownMenuItemProps = ThemedClassName<DropdownMenuPrimitive.DropdownMenuItemProps>;
+
+const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
+  ({ classNames, ...props }: DropdownMenuItemProps, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DropdownMenuPrimitive.Item
+        {...props}
+        className={tx('menu.item', 'menu__item', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+type DropdownMenuCheckboxItemProps = ThemedClassName<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps>;
+
+const DropdownMenuCheckboxItem = forwardRef<HTMLDivElement, DropdownMenuCheckboxItemProps>(
+  ({ classNames, ...props }: DropdownMenuItemProps, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DropdownMenuPrimitive.CheckboxItem
+        {...props}
+        className={tx('menu.item', 'menu__item--checkbox', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+type DropdownMenuSeparatorProps = ThemedClassName<DropdownMenuPrimitive.DropdownMenuSeparatorProps>;
+
+const DropdownMenuSeparator = forwardRef<HTMLDivElement, DropdownMenuSeparatorProps>(
+  ({ classNames, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DropdownMenuPrimitive.Separator
+        {...props}
+        className={tx('menu.separator', 'menu__item', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+type DropdownMenuGroupLabelProps = ThemedClassName<DropdownMenuPrimitive.DropdownMenuLabelProps>;
+
+const DropdownMenuGroupLabel = forwardRef<HTMLDivElement, DropdownMenuGroupLabelProps>(
+  ({ classNames, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DropdownMenuPrimitive.Label
+        {...props}
+        className={tx('menu.groupLabel', 'menu__group__label', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+export const DropdownMenu = {
+  Root: DropdownMenuRoot,
+  Trigger: DropdownMenuTrigger,
+  Portal: DropdownMenuPortal,
+  Content: DropdownMenuContent,
+  Viewport: DropdownMenuViewport,
+  Arrow: DropdownMenuArrow,
+  Group: DropdownMenuGroup,
+  Item: DropdownMenuItem,
+  CheckboxItem: DropdownMenuCheckboxItem,
+  ItemIndicator: DropdownMenuItemIndicator,
+  Separator: DropdownMenuSeparator,
+  GroupLabel: DropdownMenuGroupLabel,
+};
+
+export type {
+  DropdownMenuRootProps,
+  DropdownMenuTriggerProps,
+  DropdownMenuPortalProps,
+  DropdownMenuContentProps,
+  DropdownMenuViewportProps,
+  DropdownMenuArrowProps,
+  DropdownMenuGroupProps,
+  DropdownMenuItemProps,
+  DropdownMenuCheckboxItemProps,
+  DropdownMenuItemIndicatorProps,
+  DropdownMenuSeparatorProps,
+  DropdownMenuGroupLabelProps,
+};

package/src/components/{DropdownMenu → Menus}/index.ts

@@ -2,4 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './ContextMenu';
 export * from './DropdownMenu';

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -58,6 +58,7 @@ export const ThemeProvider = ({
       return () => kb.unsubscribe(handleInputModalityChange);
     }
   }, []);
+
   return (
     <ThemeContext.Provider value={{ tx, themeMode, hasIosKeyboard: hasIosKeyboard() }}>
       <TranslationsProvider

package/src/components/ThemeProvider/TranslationsProvider.tsx

@@ -2,12 +2,14 @@
 // Copyright 2022 DXOS.org
 //
 
+import { enUS as dtLocaleEnUs, type Locale } from 'date-fns/locale';
 import i18Next, { type Resource } from 'i18next';
-import React, { type ReactNode, useEffect, createContext, useState, Suspense } from 'react';
-import { initReactI18next } from 'react-i18next';
+import React, { type ReactNode, useEffect, createContext, useState, Suspense, useContext } from 'react';
+import { initReactI18next, useTranslation as useI18NextTranslation } from 'react-i18next';
 
 const initialLng = 'en-US';
 const initialNs = 'dxos-common';
+const initialDtLocale = dtLocaleEnUs;
 
 export const resources = {
   [initialLng]: {
@@ -28,16 +30,32 @@ void i18Next.use(initReactI18next).init({
 
 export interface TranslationsProviderProps {
   children?: ReactNode;
+  // TODO(wittjosiah): Rename to `placeholder` to match ClientProvider?
+  //   Placeholder => loading, fallback => error.
   fallback?: ReactNode;
   resourceExtensions?: Resource[];
   appNs?: string;
+  dtLocale?: Locale;
 }
 
 export const TranslationsContext = createContext({
   appNs: initialNs,
+  dtLocale: initialDtLocale,
 });
 
-export const TranslationsProvider = ({ fallback, resourceExtensions, children, appNs }: TranslationsProviderProps) => {
+export const useTranslation = (...args: Parameters<typeof useI18NextTranslation>) => {
+  const result = useI18NextTranslation(...args);
+  const { dtLocale } = useContext(TranslationsContext);
+  return { ...result, dtLocale };
+};
+
+export const TranslationsProvider = ({
+  fallback,
+  resourceExtensions,
+  children,
+  appNs,
+  dtLocale,
+}: TranslationsProviderProps) => {
   const [loaded, setLoaded] = useState(false);
   useEffect(() => {
     setLoaded(false);
@@ -56,7 +74,7 @@ export const TranslationsProvider = ({ fallback, resourceExtensions, children, a
   // TODO(thure): This is not ideal, but i18next was causing `Suspense` to not render the fallback even when the child was asking for namespaces yet to be added.
   // TODO(burdon): Fallbacks should only appear after a short delay, and if the displayed then be visible for 500mx to avoid startup flickering.
   return (
-    <TranslationsContext.Provider value={{ appNs: appNs ?? initialNs }}>
+    <TranslationsContext.Provider value={{ appNs: appNs ?? initialNs, dtLocale: dtLocale ?? initialDtLocale }}>
       <Suspense fallback={fallback}>{loaded ? children : fallback}</Suspense>
     </TranslationsContext.Provider>
   );

package/src/components/ThemeProvider/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './ThemeProvider';
+export { useTranslation } from './TranslationsProvider';

package/src/components/index.ts

@@ -7,10 +7,10 @@ export * from './Avatars';
 export * from './Breadcrumb';
 export * from './Buttons';
 export * from './Dialogs';
-export * from './DropdownMenu';
+export * from './Menus';
 export * from './Input';
 export * from './Link';
-export * from './Lists';
+export * from './List';
 export * from './Main';
 export * from './Message';
 export * from './Popover';

package/src/index.ts

@@ -3,7 +3,7 @@
 //
 
 export type { TFunction } from 'i18next';
-export { useTranslation, Trans } from 'react-i18next';
+export { Trans } from 'react-i18next';
 export * from '@dxos/react-ui-types';
 export * from '@dxos/react-hooks';
 

package/src/playground/Surfaces.stories.tsx

@@ -8,13 +8,13 @@ import React, { type PropsWithChildren } from 'react';
 
 import {
   baseSurface,
-  chromeSurface,
+  modalSurface,
   groupSurface,
   mx,
   surfaceElevation,
   fixedSurface,
   fixedBorder,
-  inputSurface,
+  attentionSurface,
 } from '@dxos/react-ui-theme';
 
 import { withTheme } from '../testing';
@@ -25,14 +25,14 @@ const Surface = ({
 }: PropsWithChildren & { level: 'base' | 'group' | 'chrome' | 'fixed' | 'input' }) => {
   const surface =
     level === 'chrome'
-      ? [chromeSurface, surfaceElevation({ elevation: 'chrome' })]
+      ? [modalSurface, surfaceElevation({ elevation: 'chrome' })]
       : level === 'group'
-      ? [groupSurface, surfaceElevation({ elevation: 'group' })]
-      : level === 'input'
-      ? [inputSurface, surfaceElevation({ elevation: 'group' })]
-      : level === 'fixed'
-      ? [fixedSurface, fixedBorder, 'border', surfaceElevation({ elevation: 'chrome' })]
-      : [baseSurface];
+        ? [groupSurface, surfaceElevation({ elevation: 'group' })]
+        : level === 'input'
+          ? [attentionSurface, surfaceElevation({ elevation: 'group' })]
+          : level === 'fixed'
+            ? [fixedSurface, fixedBorder, 'border', surfaceElevation({ elevation: 'chrome' })]
+            : [baseSurface];
 
   return (
     <div

package/src/playground/Typography.stories.tsx

@@ -44,7 +44,7 @@ const TypographyStory = () => {
 };
 
 export default {
-  title: 'DXOS UI/Scenarios/Typography',
+  title: 'react-ui/Scenarios/Typography',
   component: TypographyStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },

package/dist/types/src/components/DropdownMenu/DropdownMenu.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,iBAAiB,IAAI,8BAA8B,EAExD,KAAK,wBAAwB,IAAI,iCAAiC,EAElE,KAAK,uBAAuB,IAAI,gCAAgC,EAEhE,KAAK,wBAAwB,IAAI,iCAAiC,EAElE,KAAK,sBAAsB,IAAI,+BAA+B,EAE9D,KAAK,sBAAsB,IAAI,+BAA+B,EAE9D,KAAK,qBAAqB,IAAI,8BAA8B,EAE5D,KAAK,6BAA6B,IAAI,sCAAsC,EAE5E,KAAK,8BAA8B,IAAI,uCAAuC,EAE9E,KAAK,0BAA0B,IAAI,mCAAmC,EAEtE,KAAK,sBAAsB,IAAI,+BAA+B,EAC/D,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,KAAK,EAAE,EAAE,KAAK,qBAAqB,EAAc,MAAM,OAAO,CAAC;AAGtE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlD,KAAK,qBAAqB,GAAG,8BAA8B,CAAC;AAI5D,KAAK,wBAAwB,GAAG,iCAAiC,CAAC;AAIlE,KAAK,uBAAuB,GAAG,gCAAgC,CAAC;AAIhE,KAAK,wBAAwB,GAAG,eAAe,CAAC,iCAAiC,CAAC,GAAG;IAAE,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAmBtH,KAAK,yBAAyB,GAAG,eAAe,CAAC,qBAAqB,CAAC,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG;IAC9F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAkBF,KAAK,sBAAsB,GAAG,eAAe,CAAC,+BAA+B,CAAC,CAAC;AAe/E,KAAK,sBAAsB,GAAG,+BAA+B,CAAC;AAI9D,KAAK,8BAA8B,GAAG,uCAAuC,CAAC;AAI9E,KAAK,qBAAqB,GAAG,eAAe,CAAC,8BAA8B,CAAC,CAAC;AAe7E,KAAK,6BAA6B,GAAG,eAAe,CAAC,sCAAsC,CAAC,CAAC;AAe7F,KAAK,0BAA0B,GAAG,eAAe,CAAC,mCAAmC,CAAC,CAAC;AAevF,KAAK,2BAA2B,GAAG,eAAe,CAAC,+BAA+B,CAAC,CAAC;AAepF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;CAaxB,CAAC;AAEF,YAAY,EACV,qBAAqB,EACrB,wBAAwB,EACxB,uBAAuB,EACvB,wBAAwB,EACxB,yBAAyB,EACzB,sBAAsB,EACtB,sBAAsB,EACtB,qBAAqB,EACrB,6BAA6B,EAC7B,8BAA8B,EAC9B,0BAA0B,EAC1B,2BAA2B,GAC5B,CAAC"}