@dxos/react-ui 0.8.4-main.74a063c4e0 → 0.8.4-main.765dc60934

package/src/components/Dialog/Dialog.tsx

@@ -4,17 +4,17 @@
 
 import { createContext } from '@radix-ui/react-context';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
 import React, {
   type ComponentPropsWithRef,
   type ForwardRefExoticComponent,
   type FunctionComponent,
-  type PropsWithChildren,
   forwardRef,
 } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { type DialogSize, osTranslations } from '@dxos/ui-theme';
-import { slottable } from '@dxos/ui-theme';
+import { composableProps, type DialogSize, osTranslations, slottable } from '@dxos/ui-theme';
 import { type SlottableProps } from '@dxos/ui-types';
 
 import { useThemeContext } from '../../hooks';
@@ -138,18 +138,18 @@ DialogContent.displayName = DIALOG_CONTENT_NAME;
 // Header
 //
 
-type DialogHeaderProps = PropsWithChildren;
+type DialogHeaderProps = SlottableProps;
 
-const DialogHeader: ForwardRefExoticComponent<DialogHeaderProps> = forwardRef<HTMLHeadingElement, DialogHeaderProps>(
-  ({ children }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    return (
-      <Column.Row className={tx('dialog.header')} center ref={forwardedRef}>
-        {children}
-      </Column.Row>
-    );
-  },
-);
+const DialogHeader = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot : Primitive.div;
+  const { tx } = useThemeContext();
+  return (
+    <Comp {...rest} className={tx('dialog.header', {}, className)} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
 
 //
 // CloseIconButton
@@ -181,11 +181,13 @@ const DialogCloseIconButton = forwardRef<HTMLButtonElement, DialogCloseIconButto
 type DialogBodyProps = SlottableProps;
 
 const DialogBody = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot : Primitive.div;
   const { tx } = useThemeContext();
   return (
-    <Column.Content {...props} asChild={asChild} className={tx('dialog.body', {})} ref={forwardedRef}>
+    <Comp {...rest} className={tx('dialog.body', {}, className)} ref={forwardedRef}>
       {children}
-    </Column.Content>
+    </Comp>
   );
 });
 
@@ -227,20 +229,18 @@ const DialogDescription = forwardRef<HTMLParagraphElement, DialogDescriptionProp
 // ActionBar
 //
 
-type DialogActionBarProps = ThemedClassName<PropsWithChildren>;
+type DialogActionBarProps = SlottableProps;
 
-const DialogActionBar = forwardRef<HTMLDivElement, DialogActionBarProps>(
-  ({ children, classNames, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    return (
-      <Column.Row center>
-        <div {...props} className={tx('dialog.actionbar', {}, classNames)} ref={forwardedRef}>
-          {children}
-        </div>
-      </Column.Row>
-    );
-  },
-);
+const DialogActionBar = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
+  const { className: classNames, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot : Primitive.div;
+  const { tx } = useThemeContext();
+  return (
+    <Comp {...rest} className={tx('dialog.actionbar', {}, classNames)} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
 
 //
 // Close

package/src/components/ErrorFallback/ErrorStack.tsx

@@ -9,11 +9,45 @@ import { mx } from '@dxos/ui-theme';
 
 type LocalFrame = { href: string; fileName: string };
 
+export type ParsedStackFrame = ReturnType<typeof ErrorStackParser.parse>[number];
+
+export type ErrorStackProps = {
+  /** When set, these frames are shown instead of parsing `error`. */
+  frames?: ParsedStackFrame[];
+  /** Used when `frames` is omitted. */
+  error?: Error;
+};
+
+/**
+ * Parses `captureOwnerStack()` output (React dev) into frames for {@link ErrorStack}.
+ * Prefixes a synthetic Error line when needed so `error-stack-parser` can read V8-style stacks.
+ */
+export const parseCaptureOwnerStack = (stack: string | null): ParsedStackFrame[] | null => {
+  if (stack == null || stack.length === 0) {
+    return null;
+  }
+  const err = new Error();
+  err.stack = stack;
+  try {
+    return ErrorStackParser.parse(err);
+  } catch {
+    err.stack = `Error\n${stack}`;
+    try {
+      return ErrorStackParser.parse(err);
+    } catch {
+      return null;
+    }
+  }
+};
+
 /**
  * Renders a parsed error stack trace with tree connector symbols and clickable vscode:// links for local frames.
  */
-export const ErrorStack = ({ error }: { error: Error }) => {
-  const frames = ErrorStackParser.parse(error);
+export const ErrorStack = ({ error, frames: framesProp }: ErrorStackProps) => {
+  const frames = framesProp ?? (error ? ErrorStackParser.parse(error) : []);
+  if (frames.length === 0) {
+    return null;
+  }
 
   return (
     <div className='font-mono text-sm'>

package/src/components/Icon/Icon.tsx

@@ -3,7 +3,7 @@
 //
 
 import { type Primitive } from '@radix-ui/react-primitive';
-import React, { type ComponentPropsWithRef, forwardRef, memo } from 'react';
+import React, { type ComponentPropsWithRef, forwardRef, memo, useMemo } from 'react';
 
 import { type Size } from '@dxos/ui-types';
 
@@ -13,18 +13,25 @@ import { type ThemedClassName } from '../../util';
 export type IconProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.svg>> & {
   icon: string;
   size?: Size;
+  synchronized?: boolean;
 };
 
 /**
  * The Icon's size can be set directly or inherited from the `--dx-icon-size` CSS variable.
  */
 export const Icon = memo(
-  forwardRef<SVGSVGElement, IconProps>(({ icon, classNames, size, ...props }, forwardedRef) => {
+  forwardRef<SVGSVGElement, IconProps>(({ classNames, icon, size, synchronized, style, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
+    const spinDelay = useMemo(() => (synchronized ? `${-(Date.now() % 1_000)}ms` : undefined), [synchronized]);
     const href = useIconHref(icon);
 
     return (
-      <svg {...props} className={tx('icon.root', { size }, classNames)} ref={forwardedRef}>
+      <svg
+        {...props}
+        style={{ ...style, animationDelay: spinDelay }}
+        className={tx('icon.root', { size }, classNames)}
+        ref={forwardedRef}
+      >
         <use href={href} />
       </svg>
     );

package/src/components/Image/Image.tsx

@@ -13,15 +13,16 @@ export type ImageProps = ThemedClassName<
   {
     src: string;
     alt?: string;
+    fit?: 'contain' | 'cover';
     crossOrigin?: 'anonymous' | 'use-credentials' | '';
   } & ColorOptions
 >;
 
-// TODO(burdon): Option for neutral background color.
 export const Image = ({
   classNames,
   src,
   alt = '',
+  fit = 'contain',
   crossOrigin = 'anonymous',
   sampleSize = 64,
   contrast = 0.9,
@@ -68,7 +69,16 @@ export const Image = ({
 
   return (
     <div
-      className={mx(`relative flex w-full justify-center overflow-hidden transition-all duration-700`, classNames)}
+      // `isolate` (`isolation: isolate`) creates a new stacking context so
+      // the inner <img>'s `z-10` stays scoped to this wrapper. Without it
+      // the z-10 leaks into the parent's stacking context and elevates the
+      // image above any pseudo-element rings (e.g. Focus.Item's
+      // `dx-ring-pseudo` `::after`) painted on ancestors — most visibly,
+      // the focus ring on a Card containing a Card.Poster.
+      className={mx(
+        `relative flex w-full justify-center overflow-hidden transition-all duration-700 isolate`,
+        classNames,
+      )}
       style={{
         backgroundColor: dominantColor,
       }}
@@ -94,7 +104,10 @@ export const Image = ({
         crossOrigin={crossOriginState}
         onError={handleImageError}
         onLoad={handleImageLoad}
-        className='z-10 object-contain transition-opacity duration-500'
+        className={mx(
+          'z-10 transition-opacity duration-500',
+          fit === 'cover' ? 'w-full h-full object-cover' : 'object-contain',
+        )}
         style={{
           opacity: imageLoaded ? 1 : 0,
         }}
@@ -162,7 +175,9 @@ const extractDominantColor = (
       const alpha = pixels[i + 3];
 
       // Skip transparent pixels.
-      if (alpha === 0) continue;
+      if (alpha === 0) {
+        continue;
+      }
 
       // Calculate saturation to weight vibrant colors more.
       const max = Math.max(red, green, blue);
@@ -202,21 +217,29 @@ const isTransparent = (pixels: Uint8ClampedArray, sampleSize: number, threshold:
   for (let x = 0; x < sampleSize; x++) {
     // Top edge.
     const topIndex = x * 4;
-    if (pixels[topIndex + 3] === 0) edgeTransparentPixels++;
+    if (pixels[topIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
 
     // Bottom edge.
     const bottomIndex = ((sampleSize - 1) * sampleSize + x) * 4;
-    if (pixels[bottomIndex + 3] === 0) edgeTransparentPixels++;
+    if (pixels[bottomIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
   }
 
   for (let y = 1; y < sampleSize - 1; y++) {
     // Left edge.
     const leftIndex = y * sampleSize * 4;
-    if (pixels[leftIndex + 3] === 0) edgeTransparentPixels++;
+    if (pixels[leftIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
 
     // Right edge.
     const rightIndex = (y * sampleSize + sampleSize - 1) * 4;
-    if (pixels[rightIndex + 3] === 0) edgeTransparentPixels++;
+    if (pixels[rightIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
   }
 
   return edgeTransparentPixels / edgePixels > threshold;

package/src/components/Input/Input.tsx

@@ -130,13 +130,13 @@ type TextInputProps = InputSharedProps & ThemedClassName<TextInputPrimitiveProps
 
 const TextInput = forwardRef<HTMLInputElement, InputScopedProps<TextInputProps>>(
   (
-    { __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, noAutoFill, ...props },
+    { __inputScope, classNames, density: densityProp, elevation: elevationProp, variant, noAutoFill, ...props },
     forwardedRef,
   ) => {
     const { hasIosKeyboard } = useThemeContext();
     const { tx } = useThemeContext();
-    const density = useDensityContext(propsDensity);
-    const elevation = useElevationContext(propsElevation);
+    const density = useDensityContext(densityProp);
+    const elevation = useElevationContext(elevationProp);
     const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
 
     return (

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

@@ -176,7 +176,7 @@ export const Collapsible: Story = {
       <List {...args}>
         {items.map(({ id, text, body }, index) => (
           <ListItem.Root key={id} id={id} collapsible={index !== 2} defaultOpen={index % 2 === 0}>
-            <div role='none' className='grow flex'>
+            <div className='grow flex'>
               {index !== 2 ? <ListItem.OpenTrigger /> : <ListItem.MockOpenTrigger />}
               <ListItem.Heading classNames='grow pt-2'>{text}</ListItem.Heading>
               <ListItem.Endcap>

package/src/components/List/List.tsx

@@ -75,7 +75,7 @@ const MockListItemOpenTrigger = ({
 }: ThemedClassName<Omit<ComponentPropsWithoutRef<'div'>, 'children'>>) => {
   const density = useDensityContext();
   const { tx } = useThemeContext();
-  return <div role='none' {...props} className={tx('list.item.openTrigger', { density }, classNames)} />;
+  return <div {...props} className={tx('list.item.openTrigger', { density }, classNames)} />;
 };
 
 type ListItemHeadingProps = ThemedClassName<ListPrimitiveItemHeadingProps>;

package/src/components/List/ListDropIndicator.tsx

@@ -52,7 +52,6 @@ export const ListDropIndicator = ({
 
   return (
     <div
-      role='none'
       style={
         {
           '--line-thickness': `${strokeSize}px`,

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

@@ -32,7 +32,7 @@ const StorybookTreeItem = ({ data, prefix }: StorybookTreeItemProps) => {
 
         return (
           <TreeItem.Root key={id} id={id} collapsible={!valueIsScalar} defaultOpen>
-            <div role='none' className='grow flex'>
+            <div className='grow flex'>
               {valueIsScalar ? <TreeItem.MockOpenTrigger /> : <TreeItem.OpenTrigger />}
               <TreeItem.Heading classNames='grow pt-1'>{valueIsScalar ? String(value) : key}</TreeItem.Heading>
             </div>

package/src/components/MediaPlayer/MediaPlayer.stories.tsx

@@ -0,0 +1,42 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { withTheme } from '@dxos/react-ui/testing';
+
+import { MediaPlayer } from './MediaPlayer';
+
+const meta = {
+  title: 'ui/react-ui/MediaPlayer',
+  component: MediaPlayer,
+  decorators: [withTheme()],
+  parameters: { layout: 'centered' },
+} satisfies Meta<typeof MediaPlayer>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Video: Story = {
+  args: {
+    src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+    classNames: 'max-w-[640px]',
+  },
+};
+
+export const Audio: Story = {
+  args: {
+    src: 'https://commondatastorage.googleapis.com/codeskulptor-demos/DDR_assets/Kangaroo_MusiQue_-_The_Neverwritten_Role_Playing_Game.mp3',
+    classNames: 'min-w-[480px]',
+  },
+};
+
+export const ExplicitKind: Story = {
+  args: {
+    src: 'https://commondatastorage.googleapis.com/codeskulptor-demos/DDR_assets/Kangaroo_MusiQue_-_The_Neverwritten_Role_Playing_Game.mp3',
+    kind: 'audio',
+    classNames: 'min-w-[480px]',
+  },
+};

package/src/components/MediaPlayer/MediaPlayer.tsx

@@ -0,0 +1,97 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React from 'react';
+
+import { mx } from '@dxos/ui-theme';
+
+import { type ThemedClassName } from '../../util';
+
+export type MediaKind = 'video' | 'audio';
+
+export type MediaPlayerProps = ThemedClassName<{
+  src: string;
+  /** Override auto-detection. When omitted, `detectMediaKind(src)` is used and falls back to 'video'. */
+  kind?: MediaKind;
+  controls?: boolean;
+  autoPlay?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+  /** Accessible label for the `<video>` / `<audio>` element. */
+  alt?: string;
+  /** Defaults to 'anonymous' for cross-origin sources (e.g. signed S3 URLs). */
+  crossOrigin?: 'anonymous' | 'use-credentials' | '';
+}>;
+
+const VIDEO_EXTENSIONS = ['.mp4', '.webm', '.ogv', '.mov', '.m4v'];
+const AUDIO_EXTENSIONS = ['.mp3', '.wav', '.ogg', '.m4a', '.aac', '.flac'];
+
+/**
+ * Best-effort detection of `video` vs `audio` from a media URL.
+ * Inspects the pathname's extension (ignoring query/hash). Returns `undefined`
+ * when the URL doesn't look like a recognised media file — callers should
+ * default to 'video' or render a fallback (e.g. iframe / img).
+ */
+export const detectMediaKind = (src: string): MediaKind | undefined => {
+  // Strip query and hash, then take the last path segment's extension.
+  const pathname = src.split(/[?#]/, 1)[0]!;
+  const lower = pathname.toLowerCase();
+  if (VIDEO_EXTENSIONS.some((extension) => lower.endsWith(extension))) {
+    return 'video';
+  }
+  if (AUDIO_EXTENSIONS.some((extension) => lower.endsWith(extension))) {
+    return 'audio';
+  }
+  return undefined;
+};
+
+/**
+ * Renders a generated or remotely-hosted media artefact as a native
+ * `<video>` or `<audio>` element. `kind` defaults to the auto-detected
+ * kind from the URL extension (and falls back to 'video' for ambiguous URLs).
+ */
+export const MediaPlayer = ({
+  classNames,
+  src,
+  kind,
+  controls = true,
+  autoPlay = false,
+  loop = false,
+  muted = false,
+  alt,
+  crossOrigin = 'anonymous',
+}: MediaPlayerProps) => {
+  const resolved = kind ?? detectMediaKind(src) ?? 'video';
+  if (resolved === 'audio') {
+    return (
+      // TODO(burdon): Move to ui-theme.
+      <audio
+        className={mx('w-full', classNames)}
+        src={src}
+        controls={controls}
+        autoPlay={autoPlay}
+        loop={loop}
+        muted={muted}
+        crossOrigin={crossOrigin}
+        aria-label={alt}
+      />
+    );
+  }
+
+  return (
+    // TODO(burdon): Move to ui-theme.
+    <div className={mx('dx-container flex items-center justify-center', classNames)}>
+      <video
+        className='aspect-video max-w-full max-h-full'
+        src={src}
+        controls={controls}
+        autoPlay={autoPlay}
+        loop={loop}
+        muted={muted}
+        crossOrigin={crossOrigin}
+        aria-label={alt}
+      />
+    </div>
+  );
+};

package/src/components/MediaPlayer/index.ts

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

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

@@ -22,7 +22,7 @@ type DefaultStoryProps = {
 const DefaultStory = ({ valence, title, body }: DefaultStoryProps) => (
   <div className='w-[30rem]'>
     <Message.Root valence={valence}>
-      {title && <Message.Title>{title}</Message.Title>}
+      {title && <Message.Title onClose={() => console.log('close')}>{title}</Message.Title>}
       {body && <Message.Content>{body}</Message.Content>}
     </Message.Root>
   </div>

package/src/components/Message/Message.tsx

@@ -6,12 +6,16 @@ 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 { useTranslation } from 'react-i18next';
 
 import { useId } from '@dxos/react-hooks';
 import { type Elevation, type MessageValence } from '@dxos/ui-types';
 
+import { translationKey } from '#translations';
+
 import { useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
+import { IconButton } from '../Button';
 import { Icon } from '../Icon';
 
 const messageIcons: Record<MessageValence, string> = {
@@ -84,23 +88,36 @@ MessageRoot.displayName = MESSAGE_NAME;
 //
 
 type MessageTitleProps = Omit<ThemedClassName<ComponentPropsWithRef<typeof Primitive.h2>>, 'id'> & {
-  asChild?: boolean;
   icon?: string;
+  onClose?: () => void;
 };
 
 const MESSAGE_TITLE_NAME = 'MessageTitle';
 
 const MessageTitle = forwardRef<HTMLHeadingElement, MessageTitleProps>(
-  ({ asChild, classNames, children, icon: iconProp, ...props }, forwardedRef) => {
+  ({ classNames, children, icon: iconProp, onClose }, forwardedRef) => {
+    const { t } = useTranslation(translationKey);
     const { tx } = useThemeContext();
     const { titleId, valence } = useMessageContext(MESSAGE_TITLE_NAME);
-    const Comp = asChild ? Slot : Primitive.h2;
     const icon = iconProp ?? messageIcons[valence];
     return (
-      <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>
+      <div className={tx('message.header', {}, classNames)} id={titleId} ref={forwardedRef}>
+        {icon && (
+          <div className={tx('message.icon', { valence })}>
+            <Icon icon={icon} />
+          </div>
+        )}
+        <h2 className={tx('message.title', {}, classNames)}>{children}</h2>
+        {onClose && (
+          <IconButton
+            variant='ghost'
+            icon='ph--x--regular'
+            iconOnly
+            label={t('toolbar-close.label')}
+            onClick={onClose}
+          />
+        )}
+      </div>
     );
   },
 );

package/src/components/ScrollArea/ScrollArea.stories.tsx

@@ -48,11 +48,7 @@ const Row = ({ items = 50 }: { items?: number }) => (
 );
 
 const Container = ({ classNames, children }: ThemedClassName<PropsWithChildren>) => {
-  return (
-    <div role='none' className={mx('border border-separator rounded-md overflow-hidden', classNames)}>
-      {children}
-    </div>
-  );
+  return <div className={mx('border border-separator rounded-md overflow-hidden', classNames)}>{children}</div>;
 };
 
 export const Vertical = {

package/src/components/ScrollContainer/ScrollContainer.tsx

@@ -276,13 +276,12 @@ const Fade = () => {
 
   return (
     <div
-      role='none'
       data-visible={overflow}
       className={mx(
         // NOTE: Gradients may not be visible with dark reader extensions.
         'z-10 absolute top-0 inset-x-0 h-24 w-full',
         'opacity-0 duration-200 transition-opacity data-[visible="true"]:opacity-100',
-        'bg-gradient-to-b from-(--surface-bg) to-transparent pointer-events-none',
+        'bg-gradient-to-b from-(--color-base-surface) to-transparent pointer-events-none',
       )}
     />
   );
@@ -303,7 +302,6 @@ const ScrollDownButton = ({ classNames }: ScrollDownButtonProps) => {
 
   return (
     <div
-      role='none'
       className={mx(
         'absolute bottom-2 right-4 opacity-100 transition-opacity duration-300',
         pinned && 'opacity-0',

package/src/components/ThemeProvider/index.ts

@@ -2,7 +2,7 @@
 // Copyright 2022 DXOS.org
 //
 
-export { type Label, isLabel, toLocalizedString } from '@dxos/ui-types';
+export { type Label, isLabel, toLocalizedString } from '@dxos/ui-types/translations';
 
 export * from './ThemeProvider';
 export { useTranslation } from './TranslationsProvider';

package/src/components/Toolbar/Toolbar.tsx

@@ -12,8 +12,9 @@ import { useTranslation } from 'react-i18next';
 import { composable, composableProps, slottable, type ToolbarStyleProps } from '@dxos/ui-theme';
 import { type SlottableProps } from '@dxos/ui-types';
 
+import { translationKey } from '#translations';
+
 import { useThemeContext } from '../../hooks';
-import { translationKey } from '../../translations';
 import {
   Button,
   ButtonGroup,
@@ -160,7 +161,7 @@ const ToolbarToggleGroupItem = forwardRef<HTMLButtonElement, ToolbarToggleGroupI
 type ToolbarToggleGroupIconItemProps = Omit<ToggleGroupItemPrimitiveProps, 'className'> & IconButtonProps;
 
 const ToolbarToggleGroupIconItem = forwardRef<HTMLButtonElement, ToolbarToggleGroupIconItemProps>(
-  ({ variant, density, elevation, classNames, icon, label, iconOnly, ...props }, forwardedRef) => {
+  ({ variant, density, elevation, classNames, icon, label, iconOnly, iconClassNames, ...props }, forwardedRef) => {
     return (
       <ToolbarPrimitive.ToolbarToggleItem {...props} asChild>
         <IconButton
@@ -172,6 +173,7 @@ const ToolbarToggleGroupIconItem = forwardRef<HTMLButtonElement, ToolbarToggleGr
             icon,
             label,
             iconOnly,
+            iconClassNames,
           }}
           ref={forwardedRef}
         />

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -19,7 +19,7 @@ type DefaultStoryProps = {
 const DefaultStory = ({ tooltips, defaultOpen }: DefaultStoryProps) => {
   return (
     <Tooltip.Provider defaultOpen={defaultOpen}>
-      <div role='none' className='w-32'>
+      <div className='w-32'>
         {tooltips.map(({ label, content }, i) => (
           <Tooltip.Trigger asChild key={i} content={content} side='right'>
             <Button classNames='block w-full'>{label}</Button>

package/src/components/index.ts

@@ -10,6 +10,7 @@ export * from './Avatars';
 export * from './Breadcrumb';
 export * from './Button';
 export * from './Card';
+export * from './Carousel';
 export * from './Clipboard';
 export * from './Dialog';
 export * from './ErrorFallback';
@@ -20,6 +21,7 @@ export * from './Input';
 export * from './Link';
 export * from './List';
 export * from './Main';
+export * from './MediaPlayer';
 export * from './Menu';
 export * from './Message';
 export * from './Popover';