@dxos/react-ui 0.1.41-next.adfd7c6 → 0.3.3-main.3ce60d4

package/src/components/Avatars/AvatarGroup.tsx

@@ -0,0 +1,111 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type ComponentPropsWithRef, forwardRef } from 'react';
+
+import { useId } from '@dxos/react-hooks';
+
+import { Avatar, type AvatarRootProps, useAvatarContext } from './Avatar';
+import { useThemeContext } from '../../hooks';
+import { type ThemedClassName } from '../../util';
+
+type AvatarGroupRootProps = Omit<AvatarRootProps, 'status' | 'maskId' | 'inGroup'> &
+  ThemedClassName<ComponentPropsWithRef<'div'>>;
+
+const AvatarGroupRoot = forwardRef<HTMLDivElement, AvatarGroupRootProps>(
+  (
+    {
+      labelId: propsLabelId,
+      descriptionId: propsDescriptionId,
+      size,
+      variant,
+      children,
+      classNames,
+    }: AvatarGroupRootProps,
+    forwardedRef,
+  ) => {
+    const { tx } = useThemeContext();
+    const labelId = useId('avatar-group__label', propsLabelId);
+    const descriptionId = useId('avatar-group__description', propsDescriptionId);
+    return (
+      <Avatar.Root {...{ labelId, descriptionId, size, variant, inGroup: true }}>
+        <div
+          role='group'
+          className={tx('avatar.group', 'avatar-group', {}, classNames)}
+          aria-labelledby={labelId}
+          aria-describedby={descriptionId}
+          ref={forwardedRef}
+        >
+          {children}
+        </div>
+      </Avatar.Root>
+    );
+  },
+);
+
+type AvatarGroupItemRootProps = Omit<AvatarRootProps, 'labelId' | 'descriptionId' | 'inGroup'>;
+
+const AvatarGroupItemRoot = ({ maskId, size, variant, status, children }: AvatarGroupItemRootProps) => {
+  const {
+    labelId,
+    descriptionId,
+    size: contextSize,
+    variant: contextVariant,
+  } = useAvatarContext('AvatarGroupItemRoot');
+  return (
+    <Avatar.Root
+      {...{
+        labelId,
+        descriptionId,
+        maskId,
+        status,
+        size: size ?? contextSize,
+        variant: variant ?? contextVariant,
+        inGroup: true,
+      }}
+    >
+      {children}
+    </Avatar.Root>
+  );
+};
+
+type AvatarGroupLabelProps = ThemedClassName<Omit<ComponentPropsWithRef<'span'>, 'id'>> & { srOnly?: boolean };
+
+const AvatarGroupLabel = forwardRef<HTMLSpanElement, AvatarGroupLabelProps>(
+  ({ srOnly, classNames, children, ...props }, forwardedRef) => {
+    const { labelId, size } = useAvatarContext('AvatarGroupLabel');
+    const { tx } = useThemeContext();
+    return (
+      <span
+        {...props}
+        id={labelId}
+        className={tx('avatar.groupLabel', 'avatar-group__label', { srOnly, size }, classNames)}
+      >
+        {children}
+      </span>
+    );
+  },
+);
+
+type AvatarGroupDescriptionProps = ThemedClassName<Omit<ComponentPropsWithRef<'span'>, 'id'>> & { srOnly?: boolean };
+
+const AvatarGroupDescription = forwardRef<HTMLSpanElement, AvatarGroupDescriptionProps>(
+  ({ srOnly, classNames, children, ...props }, forwardedRef) => {
+    const { descriptionId } = useAvatarContext('AvatarGroupDescription');
+    const { tx } = useThemeContext();
+    return (
+      <span
+        {...props}
+        id={descriptionId}
+        className={tx('avatar.groupDescription', 'avatar-group__description', { srOnly }, classNames)}
+      >
+        {children}
+      </span>
+    );
+  },
+);
+
+export const AvatarGroup = { Root: AvatarGroupRoot, Label: AvatarGroupLabel, Description: AvatarGroupDescription };
+export const AvatarGroupItem = { Root: AvatarGroupItemRoot };
+export type { AvatarGroupRootProps, AvatarGroupItemRootProps, AvatarGroupLabelProps, AvatarGroupDescriptionProps };

package/src/components/Avatars/index.ts

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

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -0,0 +1,46 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React from 'react';
+
+import { Breadcrumb } from './Breadcrumb';
+import { Button } from '../Buttons';
+
+const StorybookBreadcrumb = () => {
+  return (
+    <Breadcrumb.Root aria-label='Breadcrumb'>
+      <Breadcrumb.List>
+        <Breadcrumb.ListItem>
+          <Breadcrumb.Link asChild>
+            <Button variant='ghost' density='fine' classNames='pli-0 text-base font-normal'>
+              Grocery
+            </Button>
+          </Breadcrumb.Link>
+          <Breadcrumb.Separator />
+        </Breadcrumb.ListItem>
+        <Breadcrumb.ListItem>
+          <Breadcrumb.Link href='#'>Produce</Breadcrumb.Link>
+          <Breadcrumb.Separator />
+        </Breadcrumb.ListItem>
+        <Breadcrumb.ListItem>
+          <Breadcrumb.Link href='#'>Veggies</Breadcrumb.Link>
+          <Breadcrumb.Separator />
+        </Breadcrumb.ListItem>
+        <Breadcrumb.ListItem>
+          <Breadcrumb.Current>Peppers</Breadcrumb.Current>
+        </Breadcrumb.ListItem>
+      </Breadcrumb.List>
+    </Breadcrumb.Root>
+  );
+};
+
+export default {
+  component: StorybookBreadcrumb,
+};
+
+export const Default = {
+  args: {},
+};

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,116 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Dot } from '@phosphor-icons/react';
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import React, { type ComponentPropsWithoutRef, type ComponentPropsWithRef, forwardRef } from 'react';
+
+import { useThemeContext } from '../../hooks';
+import { type ThemedClassName } from '../../util';
+import { Link, type LinkProps } from '../Link';
+
+type BreadcrumbRootProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
+  'aria-label': string;
+  asChild?: boolean;
+};
+
+const BreadcrumbRoot = forwardRef<HTMLDivElement, BreadcrumbRootProps>(
+  ({ asChild, classNames, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const Root = asChild ? Slot : Primitive.div;
+    return (
+      <Root
+        role='navigation'
+        {...props}
+        className={tx('breadcrumb.root', 'breadcrumb', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+type BreadcrumbListProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.ol>> & { asChild?: boolean };
+
+const BreadcrumbList = forwardRef<HTMLOListElement, BreadcrumbListProps>(
+  ({ asChild, classNames, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const Root = asChild ? Slot : Primitive.ol;
+    return <Root {...props} className={tx('breadcrumb.list', 'breadcrumb__list', {}, classNames)} ref={forwardedRef} />;
+  },
+);
+
+type BreadcrumbListItemProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.li>> & { asChild?: boolean };
+
+const BreadcrumbListItem = forwardRef<HTMLLIElement, BreadcrumbListItemProps>(
+  ({ asChild, classNames, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const Root = asChild ? Slot : Primitive.li;
+    return (
+      <Root
+        {...props}
+        className={tx('breadcrumb.listItem', 'breadcrumb__list__item', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+type BreadcrumbLinkProps = LinkProps;
+
+const BreadcrumbLink = forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(({ asChild, ...props }, forwardedRef) => {
+  const Root = asChild ? Slot : Link;
+  return <Root {...props} ref={forwardedRef} />;
+});
+
+type BreadcrumbCurrentProps = ThemedClassName<ComponentPropsWithRef<'h1'>> & { asChild?: boolean };
+
+const BreadcrumbCurrent = forwardRef<HTMLHeadingElement, BreadcrumbCurrentProps>(
+  ({ asChild, classNames, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const Root = asChild ? Slot : 'h1';
+    return (
+      <Root
+        {...props}
+        aria-current='page'
+        className={tx('breadcrumb.current', 'breadcrumb__item__heading--current', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+type BreadcrumbSeparatorProps = ThemedClassName<ComponentPropsWithoutRef<typeof Primitive.span>>;
+
+const BreadcrumbSeparator = ({ children, classNames, ...props }: BreadcrumbSeparatorProps) => {
+  const { tx } = useThemeContext();
+  return (
+    <Primitive.span
+      role='separator'
+      aria-hidden='true'
+      {...props}
+      className={tx('breadcrumb.separator', 'breadcrumb__separator', {}, classNames)}
+    >
+      {children ?? <Dot weight='bold' />}
+    </Primitive.span>
+  );
+};
+
+export const Breadcrumb = {
+  Root: BreadcrumbRoot,
+  List: BreadcrumbList,
+  ListItem: BreadcrumbListItem,
+  Link: BreadcrumbLink,
+  Current: BreadcrumbCurrent,
+  Separator: BreadcrumbSeparator,
+};
+
+export type {
+  BreadcrumbRootProps,
+  BreadcrumbListProps,
+  BreadcrumbListItemProps,
+  BreadcrumbLinkProps,
+  BreadcrumbCurrentProps,
+  BreadcrumbSeparatorProps,
+};

package/src/{composites/JoinDialog → components/Breadcrumb}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './JoinDialog';
+export * from './Breadcrumb';

package/src/components/Buttons/Button.stories.tsx

@@ -0,0 +1,85 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { CaretLeft, CaretRight } from '@phosphor-icons/react';
+import React, { type PropsWithChildren } from 'react';
+
+import { chromeSurface, groupSurface, mx, surfaceElevation } from '@dxos/react-ui-theme';
+
+import { Button, ButtonGroup, type ButtonProps } from './Button';
+import { DensityProvider } from '../DensityProvider';
+import { ElevationProvider } from '../ElevationProvider';
+
+export default {
+  component: Button,
+};
+
+const Container = ({ children }: PropsWithChildren<{}>) => (
+  <>
+    <div role='group' className={mx('flex flex-col gap-4 mbe-4 p-4')}>
+      <ElevationProvider elevation='base'>
+        <div className='flex gap-4'>{children}</div>
+        <DensityProvider density='fine'>
+          <div className='flex gap-4'>{children}</div>
+        </DensityProvider>
+      </ElevationProvider>
+    </div>
+    <div
+      role='group'
+      className={mx('flex flex-col gap-4 mbe-4 p-4 rounded-lg', groupSurface, surfaceElevation({ elevation: 'group' }))}
+    >
+      <ElevationProvider elevation='group'>
+        <div className='flex gap-4'>{children}</div>
+        <DensityProvider density='fine'>
+          <div className='flex gap-4'>{children}</div>
+        </DensityProvider>
+      </ElevationProvider>
+    </div>
+    <div
+      role='group'
+      className={mx(
+        'flex flex-col gap-4 mbe-4 p-4 rounded-lg',
+        chromeSurface,
+        surfaceElevation({ elevation: 'chrome' }),
+      )}
+    >
+      <ElevationProvider elevation='chrome'>
+        <div className='flex gap-4'>{children}</div>
+        <DensityProvider density='fine'>
+          <div className='flex gap-4'>{children}</div>
+        </DensityProvider>
+      </ElevationProvider>
+    </div>
+  </>
+);
+
+export const Default = {
+  render: ({ children, ...args }: Omit<ButtonProps, 'ref'>) => (
+    <Container>
+      <Button {...args}>{children}</Button>
+      <Button {...args} disabled>
+        Disabled
+      </Button>
+      {(args.variant === 'default' || args.variant === 'primary') && (
+        <ButtonGroup>
+          <Button {...args}>
+            <CaretLeft />
+          </Button>
+          <Button {...args}>
+            <CaretRight />
+          </Button>
+        </ButtonGroup>
+      )}
+    </Container>
+  ),
+  args: { children: 'Hello', disabled: false, variant: 'default' },
+};
+
+export const Primary = { ...Default, args: { variant: 'primary', children: 'Hello' } };
+
+export const Outline = { ...Default, args: { variant: 'outline', children: 'Hello' } };
+
+export const Ghost = { ...Default, args: { variant: 'ghost', children: 'Hello' } };

package/src/components/Buttons/Button.tsx

@@ -0,0 +1,93 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import React, { type ComponentPropsWithRef, forwardRef } from 'react';
+
+import { type Density, type Elevation } from '@dxos/react-ui-types';
+
+import { useDensityContext, useElevationContext, useThemeContext } from '../../hooks';
+import { type ThemedClassName } from '../../util';
+
+interface ButtonProps extends ThemedClassName<ComponentPropsWithRef<typeof Primitive.button>> {
+  variant?: 'default' | 'primary' | 'outline' | 'ghost';
+  density?: Density;
+  elevation?: Elevation;
+  asChild?: boolean;
+}
+
+type ButtonGroupContextValue = { inGroup?: boolean };
+
+const BUTTON_GROUP_NAME = 'ButtonGroup';
+const BUTTON_NAME = 'Button';
+const [ButtonGroupProvider, useButtonGroupContext] = createContext<ButtonGroupContextValue>(BUTTON_GROUP_NAME, {
+  inGroup: false,
+});
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    { classNames, children, density: propsDensity, elevation: propsElevation, variant = 'default', asChild, ...props },
+    ref,
+  ) => {
+    const { inGroup } = useButtonGroupContext(BUTTON_NAME);
+    const { tx } = useThemeContext();
+    const elevation = useElevationContext(propsElevation);
+    const density = useDensityContext(propsDensity);
+    const Root = asChild ? Slot : Primitive.button;
+    return (
+      <Root
+        ref={ref}
+        {...props}
+        className={tx(
+          'button.root',
+          'button',
+          {
+            variant,
+            inGroup,
+            disabled: props.disabled,
+            density,
+            elevation,
+          },
+          classNames,
+        )}
+        {...(props.disabled && { disabled: true })}
+      >
+        {children}
+      </Root>
+    );
+  },
+);
+
+Button.displayName = BUTTON_NAME;
+
+type ButtonGroupProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
+  elevation?: Elevation;
+  asChild?: boolean;
+};
+
+const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
+  ({ children, elevation: propsElevation, classNames, asChild, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const elevation = useElevationContext(propsElevation);
+    const Root = asChild ? Slot : Primitive.div;
+    return (
+      <Root
+        role='none'
+        {...props}
+        className={tx('button.group', 'button-group', { elevation }, classNames)}
+        ref={forwardedRef}
+      >
+        <ButtonGroupProvider inGroup>{children}</ButtonGroupProvider>
+      </Root>
+    );
+  },
+);
+
+ButtonGroup.displayName = BUTTON_GROUP_NAME;
+
+export { Button, ButtonGroup, BUTTON_GROUP_NAME, useButtonGroupContext };
+
+export type { ButtonProps, ButtonGroupProps };

package/src/components/Buttons/Toggle.stories.tsx

@@ -0,0 +1,28 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { TextB } from '@phosphor-icons/react';
+import React from 'react';
+
+import { Toggle } from './Toggle';
+
+type StorybookToggleProps = {};
+
+const StorybookToggle = (props: StorybookToggleProps) => {
+  return (
+    <Toggle {...props}>
+      <TextB />
+    </Toggle>
+  );
+};
+
+export default {
+  component: StorybookToggle,
+};
+
+export const Default = {
+  args: {},
+};

package/src/components/Buttons/Toggle.tsx

@@ -0,0 +1,23 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Toggle as TogglePrimitive, type ToggleProps as TogglePrimitiveProps } from '@radix-ui/react-toggle';
+import React, { forwardRef } from 'react';
+
+import { Button, type ButtonProps } from './Button';
+
+type ToggleProps = Omit<TogglePrimitiveProps, 'asChild'> & ButtonProps;
+
+const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
+  ({ defaultPressed, pressed, onPressedChange, ...props }, forwardedRef) => {
+    return (
+      <TogglePrimitive {...{ defaultPressed, pressed, onPressedChange }} asChild>
+        <Button {...props} ref={forwardedRef} />
+      </TogglePrimitive>
+    );
+  },
+);
+
+export { Toggle };
+export type { ToggleProps };

package/src/components/Buttons/ToggleGroup.stories.tsx

@@ -0,0 +1,38 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { TextB, TextItalic } from '@phosphor-icons/react';
+import React from 'react';
+
+import { ToggleGroup, ToggleGroupItem, type ToggleGroupProps } from './ToggleGroup';
+
+type StorybookToggleGroupProps = {
+  type: ToggleGroupProps['type'];
+};
+
+// TODO(burdon): ToggleGroup.Item.
+const StorybookToggleGroup = (props: StorybookToggleGroupProps) => {
+  return (
+    <ToggleGroup {...props}>
+      <ToggleGroupItem value='textb'>
+        <TextB />
+      </ToggleGroupItem>
+      <ToggleGroupItem value='texti'>
+        <TextItalic />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  );
+};
+
+export default {
+  component: StorybookToggleGroup,
+};
+
+export const Default = {
+  args: {
+    type: 'single',
+  },
+};

package/src/components/Buttons/ToggleGroup.tsx

@@ -0,0 +1,41 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import {
+  ToggleGroup as ToggleGroupPrimitive,
+  type ToggleGroupSingleProps,
+  type ToggleGroupMultipleProps,
+  type ToggleGroupItemProps as ToggleGroupItemPrimitiveProps,
+  ToggleGroupItem as ToggleGroupItemPrimitive,
+} from '@radix-ui/react-toggle-group';
+import React, { forwardRef } from 'react';
+
+import { Button, ButtonGroup, type ButtonGroupProps, type ButtonProps } from './Button';
+
+type ToggleGroupProps = Omit<ToggleGroupSingleProps, 'className'> | Omit<ToggleGroupMultipleProps, 'className'>;
+
+const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps & ButtonGroupProps>(
+  ({ classNames, children, ...props }, forwardedRef) => {
+    return (
+      <ToggleGroupPrimitive {...props} asChild>
+        <ButtonGroup {...{ classNames, children }} ref={forwardedRef} />
+      </ToggleGroupPrimitive>
+    );
+  },
+);
+
+type ToggleGroupItemProps = Omit<ToggleGroupItemPrimitiveProps, 'className'> & ButtonProps;
+
+const ToggleGroupItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
+  ({ variant, elevation, density, classNames, children, ...props }, forwardedRef) => {
+    return (
+      <ToggleGroupItemPrimitive {...props} asChild>
+        <Button {...{ variant, elevation, density, classNames, children }} ref={forwardedRef} />
+      </ToggleGroupItemPrimitive>
+    );
+  },
+);
+
+export { ToggleGroup, ToggleGroupItem };
+export type { ToggleGroupProps, ToggleGroupItemProps };

package/src/components/Buttons/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export * from './Button';
+export * from './Toggle';
+export * from './ToggleGroup';