@dxos/react-ui 0.1.41-next.adfd7c6 → 0.3.3-main.5b114d4

package/src/components/List/List.tsx

@@ -0,0 +1,173 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { CaretDown, CaretRight } from '@phosphor-icons/react';
+import { Slot } from '@radix-ui/react-slot';
+import React, { type ComponentPropsWithoutRef, type FC, forwardRef, type ForwardRefExoticComponent } from 'react';
+
+import {
+  List as ListPrimitive,
+  type ListProps as ListPrimitiveProps,
+  type ListScopedProps,
+  ListItemHeading as ListPrimitiveItemHeading,
+  type ListItemHeadingProps as ListPrimitiveItemHeadingProps,
+  ListItemOpenTrigger as ListPrimitiveItemOpenTrigger,
+  type ListItemOpenTriggerProps as ListPrimitiveItemOpenTriggerProps,
+  ListItemCollapsibleContent,
+  type ListItemCollapsibleContentProps,
+  ListItem as ListPrimitiveItem,
+  type ListItemProps as ListPrimitiveItemProps,
+  type ListItemScopedProps,
+  LIST_NAME,
+  LIST_ITEM_NAME,
+  useListContext,
+  useListItemContext,
+} from '@dxos/react-list';
+import { type Density } from '@dxos/react-ui-types';
+
+import { useDensityContext, useThemeContext } from '../../hooks';
+import { type ThemedClassName } from '../../util';
+import { DensityProvider } from '../DensityProvider';
+
+type ListProps = ThemedClassName<ListPrimitiveProps> & { density?: Density };
+
+const List = forwardRef<HTMLOListElement, ListProps>(({ classNames, children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const density = useDensityContext(props.density);
+
+  return (
+    <DensityProvider density={density}>
+      <ListPrimitive {...props} className={tx('list.root', 'list', {}, classNames)} ref={forwardedRef}>
+        {children}
+      </ListPrimitive>
+    </DensityProvider>
+  );
+});
+
+type ListItemEndcapProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { asChild?: boolean };
+
+const ListItemEndcap = forwardRef<HTMLDivElement, ListItemEndcapProps>(
+  ({ children, classNames, asChild, ...props }, forwardedRef) => {
+    const Root = asChild ? Slot : 'div';
+    const density = useDensityContext();
+    const { tx } = useThemeContext();
+    return (
+      <Root
+        {...(!asChild && { role: 'none' })}
+        {...props}
+        className={tx('list.item.endcap', 'list__listItem__endcap', { density }, classNames)}
+        ref={forwardedRef}
+      >
+        {children}
+      </Root>
+    );
+  },
+);
+
+const MockListItemOpenTrigger = ({
+  classNames,
+  ...props
+}: ThemedClassName<Omit<ComponentPropsWithoutRef<'div'>, 'children'>>) => {
+  const density = useDensityContext();
+  const { tx } = useThemeContext();
+  return (
+    <div
+      role='none'
+      {...props}
+      className={tx('list.item.openTrigger', 'list__listItem__openTrigger--mock', { density }, classNames)}
+    />
+  );
+};
+
+type ListItemHeadingProps = ThemedClassName<ListPrimitiveItemHeadingProps>;
+
+const ListItemHeading = forwardRef<HTMLParagraphElement, ListItemHeadingProps>(
+  ({ children, classNames, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const density = useDensityContext();
+    return (
+      <ListPrimitiveItemHeading
+        {...props}
+        className={tx('list.item.heading', 'list__listItem__heading', { density }, classNames)}
+        ref={forwardedRef}
+      >
+        {children}
+      </ListPrimitiveItemHeading>
+    );
+  },
+);
+
+type ListItemOpenTriggerProps = ThemedClassName<ListPrimitiveItemOpenTriggerProps>;
+
+const ListItemOpenTrigger = forwardRef<HTMLButtonElement, ListItemOpenTriggerProps>(
+  ({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const density = useDensityContext();
+    const { open } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
+    const Icon = open ? CaretDown : CaretRight;
+    return (
+      <ListPrimitiveItemOpenTrigger
+        {...props}
+        className={tx('list.item.openTrigger', 'list__listItem__openTrigger', { density }, classNames)}
+        ref={forwardedRef}
+      >
+        {children || (
+          <Icon
+            {...{
+              weight: 'bold',
+              className: tx('list.item.openTriggerIcon', 'list__listItem__openTrigger__icon', {}),
+            }}
+          />
+        )}
+      </ListPrimitiveItemOpenTrigger>
+    );
+  },
+);
+
+type ListItemRootProps = ThemedClassName<ListPrimitiveItemProps>;
+
+const ListItemRoot = forwardRef<HTMLLIElement, ListItemRootProps>(
+  ({ classNames, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const density = useDensityContext();
+    return (
+      <ListPrimitiveItem
+        {...props}
+        className={tx('list.item.root', 'list__listItem', { density, collapsible: props.collapsible }, classNames)}
+        ref={forwardedRef}
+      >
+        {children}
+      </ListPrimitiveItem>
+    );
+  },
+);
+
+export const ListItem: {
+  Root: ForwardRefExoticComponent<ListItemRootProps>;
+  Endcap: ForwardRefExoticComponent<ListItemEndcapProps>;
+  Heading: ForwardRefExoticComponent<ListItemHeadingProps>;
+  OpenTrigger: ForwardRefExoticComponent<ListItemOpenTriggerProps>;
+  CollapsibleContent: ForwardRefExoticComponent<ListItemCollapsibleContentProps>;
+  MockOpenTrigger: FC<ThemedClassName<Omit<ComponentPropsWithoutRef<'div'>, 'children'>>>;
+} = {
+  Root: ListItemRoot,
+  Endcap: ListItemEndcap,
+  Heading: ListItemHeading,
+  OpenTrigger: ListItemOpenTrigger,
+  CollapsibleContent: ListItemCollapsibleContent,
+  MockOpenTrigger: MockListItemOpenTrigger,
+};
+
+export { List, useListContext, useListItemContext, LIST_NAME, LIST_ITEM_NAME };
+
+export type {
+  ListProps,
+  ListScopedProps,
+  ListItemRootProps,
+  ListItemScopedProps,
+  ListItemEndcapProps,
+  ListItemHeadingProps,
+  ListItemOpenTriggerProps,
+  ListItemCollapsibleContentProps,
+};

package/src/components/List/Tree.stories.tsx

@@ -0,0 +1,80 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React from 'react';
+
+import { Tree, TreeItem } from './Tree';
+
+type StorybookTreeProps = {
+  data: any;
+};
+
+type StorybookTreeItemProps = {
+  data: any;
+  prefix?: string;
+};
+
+const isScalar = (data: any) => !(typeof data === 'object' || Array.isArray(data));
+
+const createKey = (key: string, prefix?: string) => (prefix === undefined ? key : `${prefix}.${key}`);
+
+const StorybookTreeItem = ({ data, prefix }: StorybookTreeItemProps) => {
+  const keys = Array.isArray(data) ? Array.from(data.keys()) : Object.keys(data);
+  return (
+    <Tree.Root density='fine'>
+      {keys.map((key) => {
+        const id = createKey(String(key), prefix);
+        const value = data[key as keyof typeof data];
+        const valueIsScalar = isScalar(value);
+
+        return (
+          <TreeItem.Root key={id} id={id} collapsible={!valueIsScalar} defaultOpen>
+            <div role='none' className='grow flex'>
+              {valueIsScalar ? <TreeItem.MockOpenTrigger /> : <TreeItem.OpenTrigger />}
+              <TreeItem.Heading classNames='grow pbs-1'>{valueIsScalar ? String(value) : key}</TreeItem.Heading>
+            </div>
+            {!valueIsScalar && (
+              <TreeItem.Body className='pis-2'>
+                <Tree.Branch>
+                  <StorybookTreeItem data={value} prefix={id} />
+                </Tree.Branch>
+              </TreeItem.Body>
+            )}
+          </TreeItem.Root>
+        );
+      })}
+    </Tree.Root>
+  );
+};
+
+const StorybookTree = ({ data }: StorybookTreeProps) => {
+  return <StorybookTreeItem data={data} />;
+};
+
+export default {
+  component: StorybookTree,
+};
+
+export const Default = {
+  args: {
+    data: {
+      foo: 100,
+      bar: {
+        zoo: 200,
+      },
+      tags: ['a', 'b', 'c'],
+      items: [
+        {
+          a: true,
+          b: 100,
+        },
+        {
+          c: 200,
+        },
+      ],
+    },
+  },
+};

package/src/components/List/Tree.tsx

@@ -0,0 +1,76 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type ComponentPropsWithoutRef, type FC, forwardRef, type ForwardRefExoticComponent } from 'react';
+
+import {
+  List,
+  LIST_ITEM_NAME,
+  ListItem,
+  type ListItemCollapsibleContentProps,
+  type ListItemHeadingProps,
+  type ListItemOpenTriggerProps,
+  type ListItemRootProps,
+  type ListProps,
+  type ListScopedProps,
+  useListItemContext,
+} from './List';
+import { type ThemedClassName } from '../../util';
+
+type TreeRootProps = ListProps;
+
+type TreeItemProps = ListItemRootProps;
+
+const TreeRoot: ForwardRefExoticComponent<TreeRootProps> = forwardRef<HTMLOListElement, TreeRootProps>(
+  (props, forwardedRef) => {
+    return <List {...props} ref={forwardedRef} />;
+  },
+);
+
+type TreeBranchProps = TreeRootProps;
+
+const TreeBranch: ForwardRefExoticComponent<TreeBranchProps> = forwardRef<
+  HTMLOListElement,
+  ListScopedProps<TreeBranchProps>
+>(({ __listScope, ...props }, forwardedRef) => {
+  const { headingId } = useListItemContext(LIST_ITEM_NAME, __listScope);
+  return <List {...props} aria-labelledby={headingId} ref={forwardedRef} />;
+});
+
+const TreeItemRoot: ForwardRefExoticComponent<ListItemRootProps> = forwardRef<HTMLLIElement, ListItemRootProps>(
+  (props, forwardedRef) => {
+    return <ListItem.Root role='treeitem' {...props} ref={forwardedRef} />;
+  },
+);
+
+type TreeItemHeadingProps = ListItemHeadingProps;
+
+const TreeItemHeading = ListItem.Heading;
+
+type TreeItemOpenTriggerProps = ListItemOpenTriggerProps;
+
+const TreeItemOpenTrigger = ListItem.OpenTrigger;
+
+const MockTreeItemOpenTrigger = ListItem.MockOpenTrigger;
+
+type TreeItemBodyProps = ListItemCollapsibleContentProps;
+
+const TreeItemBody: ForwardRefExoticComponent<TreeItemBodyProps> = ListItem.CollapsibleContent;
+
+export const Tree = { Root: TreeRoot, Branch: TreeBranch };
+export const TreeItem: {
+  Root: ForwardRefExoticComponent<TreeItemProps>;
+  Heading: ForwardRefExoticComponent<TreeItemHeadingProps>;
+  Body: ForwardRefExoticComponent<TreeItemBodyProps>;
+  OpenTrigger: ForwardRefExoticComponent<TreeItemOpenTriggerProps>;
+  MockOpenTrigger: FC<ThemedClassName<Omit<ComponentPropsWithoutRef<'div'>, 'children'>>>;
+} = {
+  Root: TreeItemRoot,
+  Heading: TreeItemHeading,
+  Body: TreeItemBody,
+  OpenTrigger: TreeItemOpenTrigger,
+  MockOpenTrigger: MockTreeItemOpenTrigger,
+};
+
+export type { TreeRootProps, TreeItemProps, TreeItemHeadingProps, TreeItemBodyProps, TreeItemOpenTriggerProps };

package/src/components/List/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './List';
+export * from './Tree';

package/src/components/Main/Main.stories.tsx

@@ -0,0 +1,52 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React from 'react';
+
+import { Main, useSidebars } from './Main';
+import { Button } from '../Buttons';
+
+type StoryMainArgs = {};
+
+const NavigationSidebarToggle = () => {
+  const { toggleNavigationSidebar } = useSidebars('StoryMain__SidebarToggle');
+  return <Button onClick={toggleNavigationSidebar}>Toggle navigation sidebar</Button>;
+};
+
+const ComplementarySidebarToggle = () => {
+  const { toggleComplementarySidebar } = useSidebars('StoryMain__SidebarToggle');
+  return <Button onClick={toggleComplementarySidebar}>Toggle complementary sidebar</Button>;
+};
+
+const StoryMain = (_args: StoryMainArgs) => {
+  return (
+    <Main.Root defaultComplementarySidebarOpen>
+      <Main.Overlay />
+      <Main.NavigationSidebar classNames='p-4'>
+        <p>Navigation sidebar content, hi!</p>
+        <NavigationSidebarToggle />
+      </Main.NavigationSidebar>
+      <Main.Content>
+        <div role='group' className='m-2 p-4 bg-neutral-50 dark:bg-neutral-950 rounded space-y-2'>
+          <ComplementarySidebarToggle />
+          <p>Main content, hello!</p>
+          <NavigationSidebarToggle />
+        </div>
+      </Main.Content>
+      <Main.ComplementarySidebar classNames='p-4'>
+        <p>Complementary sidebar content, hello!</p>
+        <ComplementarySidebarToggle />
+      </Main.ComplementarySidebar>
+    </Main.Root>
+  );
+};
+
+export default { component: StoryMain };
+
+export const Default = {
+  args: {},
+  layout: 'fullscreen',
+};

package/src/components/Main/Main.tsx

@@ -0,0 +1,271 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+import { Root as DialogRoot, DialogContent } from '@radix-ui/react-dialog';
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import React, {
+  type ComponentPropsWithRef,
+  type Dispatch,
+  forwardRef,
+  type PropsWithChildren,
+  type SetStateAction,
+  useCallback,
+  useRef,
+} from 'react';
+
+import { useMediaQuery, useForwardedRef } from '@dxos/react-hooks';
+
+import { useSwipeToDismiss } from './useSwipeToDismiss';
+import { useThemeContext } from '../../hooks';
+import { type ThemedClassName } from '../../util';
+import { ElevationProvider } from '../ElevationProvider';
+
+const MAIN_ROOT_NAME = 'MainRoot';
+const NAVIGATION_SIDEBAR_NAME = 'NavigationSidebar';
+const COMPLEMENTARY_SIDEBAR_NAME = 'ComplementarySidebar';
+const MAIN_NAME = 'Main';
+const GENERIC_CONSUMER_NAME = 'GenericConsumer';
+
+type MainContextValue = {
+  navigationSidebarOpen: boolean;
+  setNavigationSidebarOpen: Dispatch<SetStateAction<boolean | undefined>>;
+  complementarySidebarOpen: boolean;
+  setComplementarySidebarOpen: Dispatch<SetStateAction<boolean | undefined>>;
+};
+
+const [MainProvider, useMainContext] = createContext<MainContextValue>(MAIN_NAME, {
+  navigationSidebarOpen: false,
+  setNavigationSidebarOpen: (nextOpen) => {
+    // TODO(burdon): Standardize with other context missing errors using raise.
+    console.warn('Attempt to set sidebar state without initializing `MainRoot`');
+  },
+  complementarySidebarOpen: false,
+  setComplementarySidebarOpen: (nextOpen) => {
+    // TODO(burdon): Standardize with other context missing errors using raise.
+    console.warn('Attempt to set sidebar state without initializing `MainRoot`');
+  },
+});
+
+const useSidebars = (consumerName = GENERIC_CONSUMER_NAME) => {
+  const { setNavigationSidebarOpen, navigationSidebarOpen, setComplementarySidebarOpen, complementarySidebarOpen } =
+    useMainContext(consumerName);
+  return {
+    navigationSidebarOpen,
+    setNavigationSidebarOpen,
+    toggleNavigationSidebar: useCallback(
+      () => setNavigationSidebarOpen(!navigationSidebarOpen),
+      [navigationSidebarOpen, setNavigationSidebarOpen],
+    ),
+    openNavigationSidebar: useCallback(() => setNavigationSidebarOpen(true), [setNavigationSidebarOpen]),
+    closeNavigationSidebar: useCallback(() => setNavigationSidebarOpen(false), [setNavigationSidebarOpen]),
+    complementarySidebarOpen,
+    setComplementarySidebarOpen,
+    toggleComplementarySidebar: useCallback(
+      () => setComplementarySidebarOpen(!complementarySidebarOpen),
+      [complementarySidebarOpen, setComplementarySidebarOpen],
+    ),
+    openComplementarySidebar: useCallback(() => setComplementarySidebarOpen(true), [setComplementarySidebarOpen]),
+    closeComplementarySidebar: useCallback(() => setComplementarySidebarOpen(false), [setComplementarySidebarOpen]),
+  };
+};
+
+type MainRootProps = PropsWithChildren<{
+  navigationSidebarOpen?: boolean;
+  defaultNavigationSidebarOpen?: boolean;
+  onNavigationSidebarOpenChange?: (nextOpen: boolean) => void;
+  complementarySidebarOpen?: boolean;
+  defaultComplementarySidebarOpen?: boolean;
+  onComplementarySidebarOpenChange?: (nextOpen: boolean) => void;
+}>;
+
+const MainRoot = ({
+  navigationSidebarOpen: propsNavigationSidebarOpen,
+  defaultNavigationSidebarOpen,
+  onNavigationSidebarOpenChange,
+  complementarySidebarOpen: propsComplementarySidebarOpen,
+  defaultComplementarySidebarOpen,
+  onComplementarySidebarOpenChange,
+  children,
+  ...props
+}: MainRootProps) => {
+  const [isLg] = useMediaQuery('lg', { ssr: false });
+  const [navigationSidebarOpen = isLg, setNavigationSidebarOpen] = useControllableState<boolean>({
+    prop: propsNavigationSidebarOpen,
+    defaultProp: defaultNavigationSidebarOpen,
+    onChange: onNavigationSidebarOpenChange,
+  });
+  const [complementarySidebarOpen = false, setComplementarySidebarOpen] = useControllableState<boolean>({
+    prop: propsComplementarySidebarOpen,
+    defaultProp: defaultComplementarySidebarOpen,
+    onChange: onComplementarySidebarOpenChange,
+  });
+  return (
+    <MainProvider
+      {...props}
+      {...{
+        navigationSidebarOpen,
+        setNavigationSidebarOpen,
+        complementarySidebarOpen,
+        setComplementarySidebarOpen,
+      }}
+    >
+      {children}
+    </MainProvider>
+  );
+};
+
+MainRoot.displayName = MAIN_ROOT_NAME;
+
+const handleOpenAutoFocus = (event: Event) => {
+  !document.body.hasAttribute('data-is-keyboard') && event.preventDefault();
+};
+
+type MainSidebarProps = ThemedClassName<ComponentPropsWithRef<typeof DialogContent>> & {
+  swipeToDismiss?: boolean;
+  open: boolean;
+  setOpen: Dispatch<SetStateAction<boolean | undefined>>;
+  side: 'inline-start' | 'inline-end';
+};
+
+// TODO(burdon): Factor out Sidebar?
+// TODO(burdon): Style left/right sidebar differently.
+const MainSidebar = forwardRef<HTMLDivElement, MainSidebarProps>(
+  ({ classNames, children, swipeToDismiss, onOpenAutoFocus, open, setOpen, side, ...props }, forwardedRef) => {
+    const [isLg] = useMediaQuery('lg', { ssr: false });
+    const { tx } = useThemeContext();
+    const ref = useForwardedRef(forwardedRef);
+    const noopRef = useRef(null);
+    useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
+      onDismiss: () => setOpen(false),
+    });
+    const Root = isLg ? Primitive.div : DialogContent;
+    return (
+      <DialogRoot open={open} modal={false}>
+        <Root
+          {...(!isLg && { forceMount: true, tabIndex: -1, onOpenAutoFocus: onOpenAutoFocus ?? handleOpenAutoFocus })}
+          {...props}
+          className={tx(
+            'main.sidebar',
+            'main__sidebar',
+            { isLg, [side === 'inline-end' ? 'inlineEndSidebarOpen' : 'inlineStartSidebarOpen']: open, side },
+            classNames,
+          )}
+          ref={ref}
+        >
+          <ElevationProvider elevation='group'>{children}</ElevationProvider>
+        </Root>
+      </DialogRoot>
+    );
+  },
+);
+
+type MainNavigationSidebarProps = Omit<MainSidebarProps, 'open' | 'setOpen' | 'side'>;
+
+const MainNavigationSidebar = forwardRef<HTMLDivElement, MainNavigationSidebarProps>((props, forwardedRef) => {
+  const { navigationSidebarOpen, setNavigationSidebarOpen } = useMainContext(NAVIGATION_SIDEBAR_NAME);
+  return (
+    <MainSidebar
+      {...props}
+      open={navigationSidebarOpen}
+      setOpen={setNavigationSidebarOpen}
+      side='inline-start'
+      ref={forwardedRef}
+    />
+  );
+});
+
+MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
+
+type MainComplementarySidebarProps = Omit<MainSidebarProps, 'open' | 'setOpen' | 'side'>;
+
+const MainComplementarySidebar = forwardRef<HTMLDivElement, MainComplementarySidebarProps>((props, forwardedRef) => {
+  const { complementarySidebarOpen, setComplementarySidebarOpen } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
+  return (
+    <MainSidebar
+      {...props}
+      open={complementarySidebarOpen}
+      setOpen={setComplementarySidebarOpen}
+      side='inline-end'
+      ref={forwardedRef}
+    />
+  );
+});
+
+MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
+
+type MainProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & { asChild?: boolean; bounce?: boolean };
+
+const MainContent = forwardRef<HTMLDivElement, MainProps>(
+  ({ asChild, classNames, bounce, children, ...props }: MainProps, forwardedRef) => {
+    const [isLg] = useMediaQuery('lg', { ssr: false });
+    const { navigationSidebarOpen, complementarySidebarOpen } = useMainContext(MAIN_NAME);
+    const { tx } = useThemeContext();
+    const Root = asChild ? Slot : 'main';
+
+    return (
+      <Root
+        {...props}
+        className={tx(
+          'main.content',
+          'main',
+          {
+            isLg,
+            inlineStartSidebarOpen: navigationSidebarOpen,
+            inlineEndSidebarOpen: complementarySidebarOpen,
+            bounce,
+          },
+          classNames,
+        )}
+        ref={forwardedRef}
+      >
+        {children}
+      </Root>
+    );
+  },
+);
+
+MainContent.displayName = MAIN_NAME;
+
+type MainOverlayProps = ThemedClassName<Omit<ComponentPropsWithRef<typeof Primitive.div>, 'children'>>;
+
+const MainOverlay = forwardRef<HTMLDivElement, MainOverlayProps>(({ classNames, ...props }, forwardedRef) => {
+  const [isLg] = useMediaQuery('lg', { ssr: false });
+  const { navigationSidebarOpen, setNavigationSidebarOpen, complementarySidebarOpen, setComplementarySidebarOpen } =
+    useMainContext(MAIN_NAME);
+  const { tx } = useThemeContext();
+  return (
+    <div
+      onClick={() => {
+        setNavigationSidebarOpen(false);
+        setComplementarySidebarOpen(false);
+      }}
+      {...props}
+      className={tx(
+        'main.overlay',
+        'main__overlay',
+        { isLg, inlineStartSidebarOpen: navigationSidebarOpen, inlineEndSidebarOpen: complementarySidebarOpen },
+        classNames,
+      )}
+      data-open={navigationSidebarOpen}
+      aria-hidden='true'
+      data-aria-hidden='true'
+      ref={forwardedRef}
+    />
+  );
+});
+
+export const Main = {
+  Content: MainContent,
+  Overlay: MainOverlay,
+  Root: MainRoot,
+  NavigationSidebar: MainNavigationSidebar,
+  ComplementarySidebar: MainComplementarySidebar,
+};
+
+export { useMainContext, useSidebars };
+
+export type { MainRootProps, MainProps, MainOverlayProps, MainNavigationSidebarProps };

package/src/components/Main/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './Main';