@dxos/react-ui 0.8.4-main.3a94e84 → 0.8.4-main.3eb6e50203

package/src/components/Toast/Toast.stories.tsx

@@ -2,13 +2,13 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { type ReactNode, useState } from 'react';
 
-import { Toast } from './Toast';
 import { withTheme } from '../../testing';
-import { Button } from '../Buttons';
+import { Button } from '../Button';
+
+import { Toast } from './Toast';
 
 type ActionTriggerProps = { altText: string; trigger: ReactNode };
 
@@ -44,15 +44,18 @@ const DefaultStory = ({ title, description, actionTriggers, openTrigger, closeTr
   );
 };
 
-export default {
-  title: 'ui/react-ui-core/Toast',
-  component: Toast,
+const meta = {
+  title: 'ui/react-ui-core/components/Toast',
+  component: Toast as any,
   render: DefaultStory,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+  decorators: [withTheme()],
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {
     openTrigger: 'Open toast',
     title: 'This is a toast',

package/src/components/Toast/Toast.tsx

@@ -5,22 +5,22 @@
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import {
+  ToastAction as ToastActionPrimitive,
+  type ToastActionProps as ToastActionPrimitiveProps,
+  ToastClose as ToastClosePrimitive,
+  type ToastCloseProps as ToastClosePrimitiveProps,
+  ToastDescription as ToastDescriptionPrimitive,
+  type ToastDescriptionProps as ToastDescriptionPrimitiveProps,
   ToastProvider as ToastProviderPrimitive,
   type ToastProviderProps as ToastProviderPrimitiveProps,
-  ToastViewport as ToastViewportPrimitive,
-  type ToastViewportProps as ToastViewportPrimitiveProps,
   Root as ToastRootPrimitive,
   type ToastProps as ToastRootPrimitiveProps,
   ToastTitle as ToastTitlePrimitive,
   type ToastTitleProps as ToastTitlePrimitiveProps,
-  ToastDescription as ToastDescriptionPrimitive,
-  type ToastDescriptionProps as ToastDescriptionPrimitiveProps,
-  ToastAction as ToastActionPrimitive,
-  type ToastActionProps as ToastActionPrimitiveProps,
-  ToastClose as ToastClosePrimitive,
-  type ToastCloseProps as ToastClosePrimitiveProps,
+  ToastViewport as ToastViewportPrimitive,
+  type ToastViewportProps as ToastViewportPrimitiveProps,
 } from '@radix-ui/react-toast';
-import React, { type ComponentPropsWithRef, forwardRef, type FunctionComponent } from 'react';
+import React, { type ComponentPropsWithRef, type FunctionComponent, forwardRef } from 'react';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
@@ -34,9 +34,7 @@ type ToastViewportProps = ThemedClassName<ToastViewportPrimitiveProps>;
 
 const ToastViewport = forwardRef<HTMLOListElement, ToastViewportProps>(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return (
-    <ToastViewportPrimitive className={tx('toast.viewport', 'toast-viewport', {}, classNames)} ref={forwardedRef} />
-  );
+  return <ToastViewportPrimitive className={tx('toast.viewport', {}, classNames)} ref={forwardedRef} />;
 });
 
 type ToastRootProps = ThemedClassName<ToastRootPrimitiveProps>;
@@ -44,7 +42,7 @@ type ToastRootProps = ThemedClassName<ToastRootPrimitiveProps>;
 const ToastRoot = forwardRef<HTMLLIElement, ToastRootProps>(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return (
-    <ToastRootPrimitive {...props} className={tx('toast.root', 'toast', {}, classNames)} ref={forwardedRef}>
+    <ToastRootPrimitive {...props} className={tx('toast.root', {}, classNames)} ref={forwardedRef}>
       <ElevationProvider elevation='toast'>{children}</ElevationProvider>
     </ToastRootPrimitive>
   );
@@ -55,7 +53,7 @@ type ToastBodyProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div
 const ToastBody = forwardRef<HTMLDivElement, ToastBodyProps>(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const Root = asChild ? Slot : Primitive.div;
-  return <Root {...props} className={tx('toast.body', 'toast__body', {}, classNames)} ref={forwardedRef} />;
+  return <Root {...props} className={tx('toast.body', {}, classNames)} ref={forwardedRef} />;
 });
 
 type ToastTitleProps = ThemedClassName<ToastTitlePrimitiveProps>;
@@ -64,7 +62,7 @@ const ToastTitle = forwardRef<HTMLHeadingElement, ToastTitleProps>(
   ({ asChild, classNames, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const Root = asChild ? Slot : ToastTitlePrimitive;
-    return <Root {...props} className={tx('toast.title', 'toast__title', {}, classNames)} ref={forwardedRef} />;
+    return <Root {...props} className={tx('toast.title', {}, classNames)} ref={forwardedRef} />;
   },
 );
 
@@ -74,9 +72,7 @@ const ToastDescription = forwardRef<HTMLParagraphElement, ToastDescriptionProps>
   ({ asChild, classNames, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const Root = asChild ? Slot : ToastDescriptionPrimitive;
-    return (
-      <Root {...props} className={tx('toast.description', 'toast__description', {}, classNames)} ref={forwardedRef} />
-    );
+    return <Root {...props} className={tx('toast.description', {}, classNames)} ref={forwardedRef} />;
   },
 );
 
@@ -86,7 +82,7 @@ const ToastActions = forwardRef<HTMLDivElement, ToastActionsProps>(
   ({ asChild, classNames, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const Root = asChild ? Slot : Primitive.div;
-    return <Root {...props} className={tx('toast.actions', 'toast__actions', {}, classNames)} ref={forwardedRef} />;
+    return <Root {...props} className={tx('toast.actions', {}, classNames)} ref={forwardedRef} />;
   },
 );
 

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -2,16 +2,16 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { Toolbar } from './Toolbar';
 import { withTheme } from '../../testing';
-import { Toggle } from '../Buttons';
+import { Toggle } from '../Button';
 import { Icon } from '../Icon';
 import { Select } from '../Select';
 
+import { Toolbar } from './Toolbar';
+
 type StorybookToolbarProps = {};
 
 const DefaultStory = (props: StorybookToolbarProps) => {
@@ -29,6 +29,7 @@ const DefaultStory = (props: StorybookToolbarProps) => {
               <Select.Option value={'b'}>B</Select.Option>
               <Select.Option value={'c'}>C</Select.Option>
             </Select.Viewport>
+            <Select.Arrow />
           </Select.Content>
         </Select.Portal>
       </Select.Root>
@@ -62,21 +63,22 @@ const DefaultStory = (props: StorybookToolbarProps) => {
       </Toolbar.Button>
       <Toolbar.Separator />
       <Toolbar.Button>Test</Toolbar.Button>
-      <Toolbar.Button>
-        <Icon icon='ph--arrow-clockwise--regular' />
-      </Toolbar.Button>
+      <Toolbar.IconButton icon='ph--arrow-clockwise--regular' label='Refresh' iconOnly />
     </Toolbar.Root>
   );
 };
 
-export default {
-  title: 'ui/react-ui-core/Toolbar',
-  component: Toolbar,
+const meta = {
+  title: 'ui/react-ui-core/components/Toolbar',
+  component: Toolbar as any,
   render: DefaultStory,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+  decorators: [withTheme()],
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {},
 };

package/src/components/Toolbar/Toolbar.tsx

@@ -4,7 +4,9 @@
 
 import type { ToggleGroupItemProps as ToggleGroupItemPrimitiveProps } from '@radix-ui/react-toggle-group';
 import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
-import React, { forwardRef } from 'react';
+import React, { Fragment, forwardRef } from 'react';
+
+import { type ToolbarStyleProps } from '@dxos/ui-theme';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
@@ -13,27 +15,45 @@ import {
   ButtonGroup,
   type ButtonGroupProps,
   type ButtonProps,
+  IconButton,
+  type IconButtonProps,
   Toggle,
   type ToggleGroupItemProps,
   type ToggleProps,
-  IconButton,
-  type IconButtonProps,
-} from '../Buttons';
+} from '../Button';
 import { Link, type LinkProps } from '../Link';
 import { Separator, type SeparatorProps } from '../Separator';
 
-type ToolbarRootProps = ThemedClassName<ToolbarPrimitive.ToolbarProps> & { layoutManaged?: boolean };
+type ToolbarRootProps = ThemedClassName<
+  ToolbarPrimitive.ToolbarProps &
+    ToolbarStyleProps & {
+      textBlockWidth?: boolean;
+    }
+>;
 
+// TODO(burdon): Implement asChild property.
 const ToolbarRoot = forwardRef<HTMLDivElement, ToolbarRootProps>(
-  ({ classNames, children, layoutManaged, ...props }, forwardedRef) => {
+  (
+    { classNames, children, density, disabled, layoutManaged, textBlockWidth: textBlockWidthProp, ...props },
+    forwardedRef,
+  ) => {
     const { tx } = useThemeContext();
+    const InnerRoot = textBlockWidthProp ? 'div' : Fragment;
+    const innerRootProps = textBlockWidthProp
+      ? {
+          role: 'none',
+          className: tx('toolbar.inner', { layoutManaged }, classNames),
+        }
+      : {};
+
     return (
       <ToolbarPrimitive.Root
         {...props}
-        className={tx('toolbar.root', 'toolbar', { layoutManaged }, classNames)}
+        data-arrow-keys={props.orientation === 'vertical' ? 'up down' : 'left right'}
+        className={tx('toolbar.root', { density, disabled, layoutManaged }, classNames)}
         ref={forwardedRef}
       >
-        {children}
+        <InnerRoot {...innerRootProps}>{children}</InnerRoot>
       </ToolbarPrimitive.Root>
     );
   },
@@ -54,7 +74,7 @@ type ToolbarIconButtonProps = IconButtonProps;
 const ToolbarIconButton = forwardRef<HTMLButtonElement, ToolbarIconButtonProps>((props, forwardedRef) => {
   return (
     <ToolbarPrimitive.Button asChild>
-      <IconButton {...props} ref={forwardedRef} />
+      <IconButton {...props} noTooltip ref={forwardedRef} />
     </ToolbarPrimitive.Button>
   );
 });
@@ -113,7 +133,18 @@ const ToolbarToggleGroupIconItem = forwardRef<HTMLButtonElement, ToolbarToggleGr
   ({ variant, density, elevation, classNames, icon, label, iconOnly, ...props }, forwardedRef) => {
     return (
       <ToolbarPrimitive.ToolbarToggleItem {...props} asChild>
-        <IconButton {...{ variant, density, elevation, classNames, icon, label, iconOnly }} ref={forwardedRef} />
+        <IconButton
+          {...{
+            variant,
+            density,
+            elevation,
+            classNames,
+            icon,
+            label,
+            iconOnly,
+          }}
+          ref={forwardedRef}
+        />
       </ToolbarPrimitive.ToolbarToggleItem>
     );
   },

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

@@ -2,14 +2,15 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { faker } from '@dxos/random';
 
-import { Tooltip } from './Tooltip';
 import { withTheme } from '../../testing';
-import { Button } from '../Buttons';
+import { Button } from '../Button';
+
+import { Tooltip } from './Tooltip';
 
 type StoryProps = {
   tooltips: { label: string; content: string }[];
@@ -28,15 +29,18 @@ const DefaultStory = ({ tooltips, defaultOpen }: StoryProps) => (
   </Tooltip.Provider>
 );
 
-export default {
-  title: 'ui/react-ui-core/Tooltip',
-  component: Tooltip,
+const meta = {
+  title: 'ui/react-ui-core/components/Tooltip',
+  component: Tooltip as any,
   render: DefaultStory,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+  decorators: [withTheme()],
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {
     tooltips: [
       {
@@ -50,9 +54,9 @@ export const Default = {
   },
 };
 
-export const DefaultOpen = {
+export const DefaultOpen: Story = {
   args: {
-    defaultOption: true,
+    defaultOpen: true,
     tooltips: [
       {
         label: 'Tooltip trigger',
@@ -65,9 +69,9 @@ export const DefaultOpen = {
   },
 };
 
-export const StressTest = {
+export const StressTest: Story = {
   args: {
-    defaultOption: true,
+    defaultOpen: true,
     tooltips: faker.helpers.multiple(
       () => ({
         label: faker.lorem.words(2),

package/src/components/Tooltip/Tooltip.tsx

@@ -11,7 +11,7 @@ import type { Scope } from '@radix-ui/react-context';
 import { DismissableLayer } from '@radix-ui/react-dismissable-layer';
 import { useId } from '@radix-ui/react-id';
 import * as PopperPrimitive from '@radix-ui/react-popper';
-import { createPopperScope, type PopperAnchorProps } from '@radix-ui/react-popper';
+import { type PopperAnchorProps, createPopperScope } from '@radix-ui/react-popper';
 import { Portal as PortalPrimitive } from '@radix-ui/react-portal';
 import { Presence } from '@radix-ui/react-presence';
 import { Primitive } from '@radix-ui/react-primitive';
@@ -23,10 +23,11 @@ import React, {
   type ComponentPropsWithoutRef,
   type ElementRef,
   type FC,
-  type SyntheticEvent,
-  forwardRef,
   type MutableRefObject,
   type ReactNode,
+  type RefObject,
+  type SyntheticEvent,
+  forwardRef,
   useCallback,
   useEffect,
   useMemo,
@@ -40,9 +41,9 @@ type TooltipScopedProps<P = {}> = P & { __scopeTooltip?: Scope };
 const [createTooltipContext, createTooltipScope] = createContextScope('Tooltip', [createPopperScope]);
 const usePopperScope = createPopperScope();
 
-/* -------------------------------------------------------------------------------------------------
- * Tooltip
- * ----------------------------------------------------------------------------------------------- */
+//
+// Tooltip
+//
 
 const DEFAULT_DELAY_DURATION = 700;
 const TOOLTIP_OPEN = 'tooltip.open';
@@ -214,11 +215,11 @@ const TooltipProvider: FC<TooltipProviderProps> = (props: TooltipScopedProps<Too
           isPointerInTransitRef.current = inTransit;
         }, [])}
       >
-        <TooltipContent side={side} className={tx('tooltip.content', 'tooltip', { elevation })}>
+        <TooltipContent side={side} className={tx('tooltip.content', { elevation })}>
           {content}
-          <TooltipArrow className={tx('tooltip.arrow', 'tooltip__arrow')} />
+          <TooltipArrow className={tx('tooltip.arrow')} />
         </TooltipContent>
-        <TooltipVirtualTrigger virtualRef={triggerRef} />
+        <TooltipVirtualTrigger virtualRef={triggerRef as RefObject<HTMLButtonElement>} />
         {children}
       </TooltipContextProvider>
     </PopperPrimitive.Root>
@@ -227,9 +228,9 @@ const TooltipProvider: FC<TooltipProviderProps> = (props: TooltipScopedProps<Too
 
 TooltipProvider.displayName = TOOLTIP_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * TooltipVirtualTrigger
- * ----------------------------------------------------------------------------------------------- */
+//
+// TooltipVirtualTrigger
+//
 
 const TooltipVirtualTrigger = ({
   virtualRef,
@@ -239,9 +240,9 @@ const TooltipVirtualTrigger = ({
   return <PopperPrimitive.Anchor asChild {...popperScope} virtualRef={virtualRef} />;
 };
 
-/* -------------------------------------------------------------------------------------------------
- * TooltipTrigger
- * ----------------------------------------------------------------------------------------------- */
+//
+// TooltipTrigger
+//
 
 const TRIGGER_NAME = 'TooltipTrigger';
 
@@ -321,9 +322,9 @@ const TooltipTrigger = forwardRef<TooltipTriggerElement, TooltipTriggerProps>(
 
 TooltipTrigger.displayName = TRIGGER_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * TooltipPortal
- * ----------------------------------------------------------------------------------------------- */
+//
+// TooltipPortal
+//
 
 const PORTAL_NAME = 'TooltipPortal';
 
@@ -362,9 +363,9 @@ const TooltipPortal: FC<TooltipPortalProps> = (props: TooltipScopedProps<Tooltip
 
 TooltipPortal.displayName = PORTAL_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * TooltipContent
- * ----------------------------------------------------------------------------------------------- */
+//
+// TooltipContent
+//
 
 const CONTENT_NAME = 'TooltipContent';
 
@@ -573,9 +574,9 @@ const TooltipContentImpl = forwardRef<TooltipContentImplElement, TooltipContentI
 
 TooltipContent.displayName = CONTENT_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * TooltipArrow
- * ----------------------------------------------------------------------------------------------- */
+//
+// TooltipArrow
+//
 
 const ARROW_NAME = 'TooltipArrow';
 
@@ -598,8 +599,6 @@ const TooltipArrow = forwardRef<TooltipArrowElement, TooltipArrowProps>(
 
 TooltipArrow.displayName = ARROW_NAME;
 
-/* ----------------------------------------------------------------------------------------------- */
-
 type TooltipSide = NonNullable<TooltipContentProps['side']>;
 
 const getExitSideFromRect = (point: Point, rect: DOMRect): TooltipSide => {
@@ -754,6 +753,10 @@ const getHullPresorted = <P extends Point>(points: Readonly<Array<P>>): Array<P>
   }
 };
 
+//
+// Tooltip
+//
+
 export const Tooltip = {
   Provider: TooltipProvider,
   Trigger: TooltipTrigger,

package/src/components/index.ts

@@ -5,21 +5,24 @@
 export * from './AnchoredOverflow';
 export * from './Avatars';
 export * from './Breadcrumb';
-export * from './Buttons';
+export * from './Button';
 export * from './Clipboard';
-export * from './Dialogs';
+export * from './Dialog';
 export * from './Icon';
 export * from './Input';
 export * from './Link';
-export * from './Lists';
+export * from './List';
 export * from './Main';
-export * from './Menus';
+export * from './Menu';
 export * from './Message';
 export * from './Popover';
 export * from './Status';
 export * from './ScrollArea';
+export * from './ScrollContainer';
 export * from './Select';
 export * from './Separator';
+export * from './Skeleton';
+export * from './Splitter';
 export * from './Tag';
 export * from './Toast';
 export * from './Toolbar';

package/src/exemplars/generics.stories.tsx

@@ -0,0 +1,44 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { type ReactElement, type Ref, forwardRef } from 'react';
+
+import { type SlottableProps } from '@dxos/ui-types';
+
+import { withTheme } from '../testing';
+
+const ComponentInner = forwardRef<HTMLDivElement, ComponentProps>(({ children, ...props }, forwardedRef) => {
+  return (
+    <div {...props} ref={forwardedRef}>
+      {children}
+    </div>
+  );
+});
+
+ComponentInner.displayName = 'Component';
+
+/**
+ * Generic component pattern.
+ */
+type ComponentProps<P extends HTMLElement = any> = SlottableProps<P>;
+
+const Component = ComponentInner as <P extends HTMLElement>(
+  props: SlottableProps<P> & { ref?: Ref<P> },
+) => ReactElement;
+
+const meta = {
+  title: 'ui/react-ui-core/exemplars/generics',
+  component: Component,
+  decorators: [withTheme()],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Single: Story = {};

package/src/exemplars/slot.stories.tsx

@@ -0,0 +1,108 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Slot } from '@radix-ui/react-slot';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { type PropsWithChildren, forwardRef } from 'react';
+
+import { mx } from '@dxos/ui-theme';
+import { type SlottableClassName, type SlottableProps, type ThemedClassName } from '@dxos/ui-types';
+
+import { withTheme } from '../testing';
+
+/**
+ * Composition
+ *
+ * All Radix primitive parts that render a DOM element accept an asChild prop.
+ * When asChild is set to true, Radix will not render a default DOM element, instead cloning the part's child and passing it the props and behavior required to make it functional.
+ * https://www.radix-ui.com/primitives/docs/guides/composition
+ */
+
+// Outer primitive (like Tooltip.Trigger or Focus.Group).
+const Outer = forwardRef<HTMLDivElement, SlottableProps<HTMLDivElement>>(
+  ({ children, className, classNames, asChild, ...props }, forwardedRef) => {
+    const Root = asChild ? Slot : 'div';
+    return (
+      <Root {...props} className={mx(className, classNames)} data-outer='true' ref={forwardedRef}>
+        {children}
+      </Root>
+    );
+  },
+);
+
+// Middle primitive (like Dialog.Trigger or Mosaic.Cell).
+const Middle = forwardRef<HTMLDivElement, SlottableProps<HTMLDivElement>>(
+  ({ children, className, classNames, asChild, ...props }, forwardedRef) => {
+    const Root = asChild ? Slot : 'div';
+    return (
+      <Root {...props} className={mx(className, classNames)} data-middle='true' ref={forwardedRef}>
+        {children}
+      </Root>
+    );
+  },
+);
+
+// Leaf component (like Card.Root).
+const Leaf = forwardRef<HTMLButtonElement, SlottableClassName<PropsWithChildren>>(
+  ({ className, classNames, children, ...props }, forwardedRef) => {
+    return (
+      <button {...props} className={mx('p-2 outline-none border rounded', className, classNames)} ref={forwardedRef}>
+        {children}
+      </button>
+    );
+  },
+);
+
+// Test 1: Single asChild.
+const TestSingle = ({ classNames, ...props }: ThemedClassName<{ role?: string }>) => (
+  <Outer asChild {...props} className={mx('p-2', classNames)}>
+    <Leaf>Single asChild</Leaf>
+  </Outer>
+);
+
+// Test 2: Nested asChild.
+const TestNested = ({ classNames, ...props }: ThemedClassName<{ role?: string }>) => {
+  return (
+    <Outer asChild {...props} className={mx('p-2', classNames)}>
+      <Middle asChild>
+        <Leaf>Nested asChild</Leaf>
+      </Middle>
+    </Outer>
+  );
+};
+
+// Test 3: Complex.
+const TestInner = ({ classNames, ...props }: ThemedClassName<{ role?: string }>) => (
+  <Outer asChild {...props} className={mx('p-2', classNames)}>
+    <Middle asChild>
+      <Leaf>
+        <div role='none'>Leaf</div>
+      </Leaf>
+    </Middle>
+  </Outer>
+);
+
+const meta = {
+  title: 'ui/react-ui-core/exemplars/slot',
+  decorators: [withTheme()],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Single: Story = {
+  render: () => <TestSingle role='listitem' classNames='border-red-500' />,
+};
+
+export const Nested: Story = {
+  render: () => <TestNested role='listitem' classNames='border-green-500' />,
+};
+
+export const Inner: Story = {
+  render: () => <TestInner role='listitem' classNames='border-blue-500' />,
+};