@dxos/react-ui 0.8.4-main.ef1bc66f44 → 0.8.4-main.f466a3d56e

package/src/components/Carousel/Carousel.tsx

@@ -0,0 +1,337 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+import React, {
+  createContext,
+  type KeyboardEvent,
+  type PropsWithChildren,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+
+import { mx } from '@dxos/ui-theme';
+
+import { translationKey } from '../../translations';
+import { type ThemedClassName } from '../../util';
+import { IconButton } from '../Button';
+import { useTranslation } from '../ThemeProvider';
+
+// TODO(burdon): Move per-element class strings to `@dxos/ui-theme` (theme tokens)
+// so callers can re-theme via the same mechanism the rest of `react-ui` uses.
+
+//
+// Context
+//
+
+type CarouselContextValue = {
+  index: number;
+  count: number;
+  setIndex: (index: number) => void;
+  next: () => void;
+  prev: () => void;
+};
+
+const CarouselContext = createContext<CarouselContextValue | null>(null);
+
+/** Returns the current carousel state. Must be used within {@link Carousel.Root}. */
+export const useCarousel = (): CarouselContextValue => {
+  const context = useContext(CarouselContext);
+  if (!context) {
+    throw new Error('useCarousel must be used within Carousel.Root');
+  }
+  return context;
+};
+
+//
+// Root
+//
+
+export type CarouselRootProps = ThemedClassName<
+  PropsWithChildren<{
+    /** Total number of slides; drives auto-advance and indicator counts. */
+    count: number;
+    /** Whether to auto-advance slides on mount. Defaults to `false`. */
+    autorun?: boolean;
+    /** Auto-advance interval in milliseconds. Set 0 to disable. */
+    intervalMs?: number;
+    defaultIndex?: number;
+  }>
+>;
+
+const CarouselRoot = ({
+  classNames,
+  children,
+  count,
+  autorun = false,
+  intervalMs = 5_000,
+  defaultIndex = 0,
+}: CarouselRootProps) => {
+  const [index, setIndexState] = useState(defaultIndex);
+  const [autoAdvance, setAutoAdvance] = useState(autorun);
+
+  // Reset to first slide if the slide count shrinks below the current index.
+  useEffect(() => {
+    if (index >= count) {
+      setIndexState(0);
+    }
+  }, [count, index]);
+
+  // Auto-advance — stops permanently once the user interacts with any control.
+  useEffect(() => {
+    if (!autoAdvance || count <= 1 || intervalMs <= 0) {
+      return;
+    }
+    const handle = setInterval(() => setIndexState((i) => (i + 1) % count), intervalMs);
+    return () => clearInterval(handle);
+  }, [autoAdvance, count, intervalMs]);
+
+  const setIndex = useCallback((next: number) => {
+    setAutoAdvance(false);
+    setIndexState(next);
+  }, []);
+  const next = useCallback(() => {
+    setAutoAdvance(false);
+    setIndexState((i) => (i + 1) % count);
+  }, [count]);
+  const prev = useCallback(() => {
+    setAutoAdvance(false);
+    setIndexState((i) => (i - 1 + count) % count);
+  }, [count]);
+
+  const value = useMemo(() => ({ index, count, setIndex, next, prev }), [index, count, setIndex, next, prev]);
+
+  if (count === 0) {
+    return null;
+  }
+
+  return (
+    <CarouselContext.Provider value={value}>
+      {/*
+       * Rows are `[1fr, auto]`: row 1 (Previous|Viewport|Next) stretches when the parent
+       * gives the carousel a definite height, and row 2 (Indicators / Caption) sticks to
+       * its content height. With no parent height constraint, the `1fr` row simply tracks
+       * row-1 content — preserving the existing aspect-video behaviour for unbounded use.
+       */}
+      {/* TODO(burdon): Move to ui-theme. */}
+      <div
+        className={mx(
+          'w-full grid grid-cols-[min-content_1fr_min-content] grid-rows-[minmax(0,1fr)_auto] gap-4 items-center',
+          classNames,
+        )}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  );
+};
+
+CarouselRoot.displayName = 'Carousel.Root';
+
+//
+// Viewport
+//
+
+export type CarouselViewportProps = ThemedClassName<PropsWithChildren<{}>>;
+
+const CarouselViewport = ({ children, classNames }: CarouselViewportProps) => {
+  const { t } = useTranslation(translationKey);
+  const { count, next, prev } = useCarousel();
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      if (count <= 1) {
+        return;
+      }
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        prev();
+      } else if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        next();
+      }
+    },
+    [count, next, prev],
+  );
+
+  return (
+    <div
+      // TODO(burdon): Move to ui-theme.
+      className={mx(
+        'relative w-full aspect-video overflow-hidden',
+        'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
+        classNames,
+      )}
+      tabIndex={0}
+      role='region'
+      aria-roledescription='carousel'
+      aria-label={t('carousel-viewport.label')}
+      onKeyDown={handleKeyDown}
+    >
+      {children}
+    </div>
+  );
+};
+
+CarouselViewport.displayName = 'Carousel.Viewport';
+
+//
+// Slide
+//
+
+export type CarouselSlideProps = ThemedClassName<
+  PropsWithChildren<{
+    index: number;
+  }>
+>;
+
+const CarouselSlide = ({ children, index, classNames }: CarouselSlideProps) => {
+  const { index: active } = useCarousel();
+  if (active !== index) {
+    return null;
+  }
+
+  // TODO(burdon): Move to ui-theme.
+  return <div className={mx('absolute inset-0 w-full h-full bg-baseSurface', classNames)}>{children}</div>;
+};
+
+CarouselSlide.displayName = 'Carousel.Slide';
+
+//
+// Previous / Next
+//
+
+export type CarouselButtonProps = ThemedClassName<{}>;
+
+const CarouselPrevious = ({ classNames }: CarouselButtonProps) => {
+  const { t } = useTranslation(translationKey);
+  const { count, prev } = useCarousel();
+  if (count <= 1) {
+    return <div />;
+  }
+
+  return (
+    <IconButton
+      classNames={classNames}
+      square
+      variant='ghost'
+      icon='ph--caret-left--regular'
+      iconOnly
+      label={t('carousel-prev.label')}
+      onClick={prev}
+    />
+  );
+};
+
+CarouselPrevious.displayName = 'Carousel.Previous';
+
+const CarouselNext = ({ classNames }: CarouselButtonProps) => {
+  const { t } = useTranslation(translationKey);
+  const { count, next } = useCarousel();
+  if (count <= 1) {
+    return <div />;
+  }
+
+  return (
+    <IconButton
+      classNames={classNames}
+      square
+      variant='ghost'
+      icon='ph--caret-right--regular'
+      iconOnly
+      label={t('carousel-next.label')}
+      onClick={next}
+    />
+  );
+};
+
+CarouselNext.displayName = 'Carousel.Next';
+
+//
+// Indicators
+//
+
+export type CarouselIndicatorsProps = ThemedClassName<{}>;
+
+/** Tab-strip of slide indicators. Sits in the centre column so it matches the viewport's width. */
+const CarouselIndicators = ({ classNames }: CarouselIndicatorsProps) => {
+  const { t } = useTranslation(translationKey);
+  const { count, index, setIndex } = useCarousel();
+  const arrowNavigationAttrs = useArrowNavigationGroup({ axis: 'horizontal', memorizeCurrent: true });
+  if (count <= 1) {
+    return null;
+  }
+
+  return (
+    <div className='col-start-2 overflow-hidden'>
+      <div
+        {...arrowNavigationAttrs}
+        className={mx('flex items-center justify-center', classNames)}
+        role='tablist'
+        aria-label={t('carousel-indicators.label')}
+      >
+        {Array.from({ length: count }).map((_, i) => (
+          <IconButton
+            key={i}
+            role='tab'
+            aria-selected={i === index}
+            classNames={i === index ? 'text-primary-500' : 'text-description'}
+            icon={i === index ? 'ph--circle--fill' : 'ph--circle--regular'}
+            iconOnly
+            label={t('carousel-go-to.label', { index: i + 1 })}
+            onClick={() => setIndex(i)}
+            onFocus={() => setIndex(i)}
+            size={3}
+            variant='ghost'
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+CarouselIndicators.displayName = 'Carousel.Indicators';
+
+//
+// Caption
+//
+
+export type CarouselCaptionProps = ThemedClassName<{
+  /** Render prop receiving the active slide index. */
+  children: (index: number) => ReactNode;
+}>;
+
+/** Caption sized to the viewport's column. */
+const CarouselCaption = ({ children, classNames }: CarouselCaptionProps) => {
+  const { index } = useCarousel();
+  const content = children(index);
+  if (content == null || content === false || content === '') {
+    return null;
+  }
+  return (
+    // TODO(burdon): Move to ui-theme.
+    <div className='col-start-2'>
+      <p className={mx('text-center text-description', classNames)}>{content}</p>
+    </div>
+  );
+};
+
+CarouselCaption.displayName = 'Carousel.Caption';
+
+//
+// Carousel
+//
+
+export const Carousel = {
+  Root: CarouselRoot,
+  Viewport: CarouselViewport,
+  Slide: CarouselSlide,
+  Previous: CarouselPrevious,
+  Next: CarouselNext,
+  Indicators: CarouselIndicators,
+  Caption: CarouselCaption,
+};

package/src/components/Carousel/index.ts

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

package/src/components/Clipboard/CopyButton.tsx

@@ -10,7 +10,6 @@ import { Button, type ButtonProps, IconButton } from '../Button';
 import { Icon, type IconProps } from '../Icon';
 import { useTranslation } from '../ThemeProvider';
 import { type TooltipScopedProps, useTooltipContext } from '../Tooltip';
-
 import { useClipboard } from './ClipboardProvider';
 
 export type CopyButtonProps = ButtonProps &
@@ -18,7 +17,7 @@ export type CopyButtonProps = ButtonProps &
     value: string;
   };
 
-const inactiveLabelStyles = 'invisible bs-px -mbe-px overflow-hidden';
+const inactiveLabelStyles = 'invisible h-px -mb-px overflow-hidden';
 
 export const CopyButton = ({ classNames, value, size = 5, ...props }: CopyButtonProps) => {
   const { t } = useTranslation(osTranslations);
@@ -31,12 +30,12 @@ export const CopyButton = ({ classNames, value, size = 5, ...props }: CopyButton
       onClick={() => setTextValue(value)}
       data-testid='copy-invitation'
     >
-      <div role='none' className={mx('flex gap-1 items-center', isCopied && inactiveLabelStyles)}>
-        <span className='pli-1'>{t('copy label')}</span>
+      <div className={mx('flex gap-1 items-center', isCopied && inactiveLabelStyles)}>
+        <span className='px-1'>{t('copy.label')}</span>
         <Icon icon='ph--copy--regular' size={size} />
       </div>
-      <div role='none' className={mx('flex gap-1 items-center', !isCopied && inactiveLabelStyles)}>
-        <span className='pli-1'>{t('copy success label')}</span>
+      <div className={mx('flex gap-1 items-center', !isCopied && inactiveLabelStyles)}>
+        <span className='px-1'>{t('copy-success.label')}</span>
         <Icon icon='ph--check--regular' size={size} />
       </div>
     </Button>
@@ -58,7 +57,7 @@ export const CopyButtonIconOnly = ({
   const { t } = useTranslation(osTranslations);
   const { textValue, setTextValue } = useClipboard();
   const isCopied = textValue === value;
-  const label = isCopied ? t('copy success label') : (props.label ?? t('copy label'));
+  const label = isCopied ? t('copy-success.label') : (props.label ?? t('copy.label'));
   const { onOpen } = useTooltipContext('CopyButton', __scopeTooltip);
   return (
     <IconButton

package/src/components/Dialog/AlertDialog.stories.tsx

@@ -5,22 +5,21 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
+import { random } from '@dxos/random';
+
 import { withTheme } from '../../testing';
 import { Button } from '../Button';
-import { Toolbar } from '../Toolbar';
-
 import { AlertDialog } from './AlertDialog';
 
-type StoryProps = Partial<{
+type DefaultStoryProps = Partial<{
   title: string;
   description: string;
-  body: string;
   openTrigger: string;
   cancelTrigger: string;
   actionTrigger: string;
 }>;
 
-const DefaultStory = ({ title, description, body, openTrigger, cancelTrigger, actionTrigger }: StoryProps) => {
+const DefaultStory = ({ title, description, openTrigger, cancelTrigger, actionTrigger }: DefaultStoryProps) => {
   return (
     <AlertDialog.Root defaultOpen>
       <AlertDialog.Trigger asChild>
@@ -28,18 +27,19 @@ const DefaultStory = ({ title, description, body, openTrigger, cancelTrigger, ac
       </AlertDialog.Trigger>
       <AlertDialog.Overlay>
         <AlertDialog.Content>
-          <AlertDialog.Title>{title}</AlertDialog.Title>
-          <AlertDialog.Description>{description}</AlertDialog.Description>
-          <p className='mbs-2 mbe-8'>{body}</p>
-          <Toolbar.Root>
+          <AlertDialog.Body>
+            <AlertDialog.Title>{title}</AlertDialog.Title>
+            <AlertDialog.Description>{description}</AlertDialog.Description>
+          </AlertDialog.Body>
+          <AlertDialog.ActionBar>
             <div className='grow' />
             <AlertDialog.Cancel asChild>
-              <Toolbar.Button>{cancelTrigger}</Toolbar.Button>
+              <Button>{cancelTrigger}</Button>
             </AlertDialog.Cancel>
             <AlertDialog.Action asChild>
-              <Toolbar.Button variant='primary'>{actionTrigger}</Toolbar.Button>
+              <Button variant='primary'>{actionTrigger}</Button>
             </AlertDialog.Action>
-          </Toolbar.Root>
+          </AlertDialog.ActionBar>
         </AlertDialog.Content>
       </AlertDialog.Overlay>
     </AlertDialog.Root>
@@ -59,10 +59,9 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    title: 'AlertDialog title',
+    title: random.lorem.sentence(3),
+    description: random.lorem.paragraph(1),
     openTrigger: 'Open AlertDialog',
-    description: 'AlertDialog description',
-    body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
     cancelTrigger: 'Cancel',
     actionTrigger: 'Action',
   },