@dxos/react-ui 0.8.4-main.c85a9c8dae → 0.8.4-main.d05539e30a

package/src/components/Dialog/Dialog.tsx

@@ -3,33 +3,19 @@
 //
 
 import { createContext } from '@radix-ui/react-context';
-import {
-  DialogClose as DialogClosePrimitive,
-  type DialogCloseProps as DialogClosePrimitiveProps,
-  DialogContent as DialogContentPrimitive,
-  DialogDescription as DialogDescriptionPrimitive,
-  type DialogDescriptionProps as DialogDescriptionPrimitiveProps,
-  DialogOverlay as DialogOverlayPrimitive,
-  type DialogOverlayProps as DialogOverlayPrimitiveProps,
-  DialogPortal as DialogPortalPrimitive,
-  type DialogPortalProps as DialogPortalPrimitiveProps,
-  Root as DialogRootPrimitive,
-  type DialogProps as DialogRootPrimitiveProps,
-  DialogTitle as DialogTitlePrimitive,
-  type DialogTitleProps as DialogTitlePrimitiveProps,
-  DialogTrigger as DialogTriggerPrimitive,
-  type DialogTriggerProps as DialogTriggerPrimitiveProps,
-} from '@radix-ui/react-dialog';
+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 { composableProps, type DialogSize, osTranslations, slottable } from '@dxos/ui-theme';
+import { type SlottableProps } from '@dxos/ui-types';
 
 import { useThemeContext } from '../../hooks';
 import { Column } from '../../primitives';
@@ -41,11 +27,16 @@ import { ElevationProvider } from '../ElevationProvider';
 // Root
 //
 
-type DialogRootProps = DialogRootPrimitiveProps;
+type DialogRootProps = DialogPrimitive.DialogProps;
 
 const DialogRoot: FunctionComponent<DialogRootProps> = (props) => (
   <ElevationProvider elevation='dialog'>
-    <DialogRootPrimitive {...props} />
+    <DialogPrimitive.Root
+      // NOTE: Radix warning unless set to undefined.
+      // https://www.radix-ui.com/primitives/docs/components/dialog#description
+      aria-describedby={undefined}
+      {...props}
+    />
   </ElevationProvider>
 );
 
@@ -53,17 +44,17 @@ const DialogRoot: FunctionComponent<DialogRootProps> = (props) => (
 // Trigger
 //
 
-type DialogTriggerProps = DialogTriggerPrimitiveProps;
+type DialogTriggerProps = DialogPrimitive.DialogTriggerProps;
 
-const DialogTrigger: FunctionComponent<DialogTriggerProps> = DialogTriggerPrimitive;
+const DialogTrigger: FunctionComponent<DialogTriggerProps> = DialogPrimitive.Trigger;
 
 //
 // Portal
 //
 
-type DialogPortalProps = DialogPortalPrimitiveProps;
+type DialogPortalProps = DialogPrimitive.DialogPortalProps;
 
-const DialogPortal: FunctionComponent<DialogPortalProps> = DialogPortalPrimitive;
+const DialogPortal: FunctionComponent<DialogPortalProps> = DialogPrimitive.Portal;
 
 //
 // Overlay
@@ -78,21 +69,23 @@ const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLa
   {},
 );
 
-type DialogOverlayProps = ThemedClassName<DialogOverlayPrimitiveProps & { blockAlign?: 'center' | 'start' | 'end' }>;
+type DialogOverlayProps = ThemedClassName<
+  DialogPrimitive.DialogOverlayProps & { blockAlign?: 'center' | 'start' | 'end' }
+>;
 
 const DialogOverlay: ForwardRefExoticComponent<DialogOverlayProps> = forwardRef<HTMLDivElement, DialogOverlayProps>(
   ({ classNames, children, blockAlign, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
 
     return (
-      <DialogOverlayPrimitive
+      <DialogPrimitive.Overlay
         {...props}
         data-block-align={blockAlign}
         className={tx('dialog.overlay', {}, classNames)}
         ref={forwardedRef}
       >
         <OverlayLayoutProvider inOverlayLayout>{children}</OverlayLayoutProvider>
-      </DialogOverlayPrimitive>
+      </DialogPrimitive.Overlay>
     );
   },
 );
@@ -105,7 +98,7 @@ DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
 
 const DIALOG_CONTENT_NAME = 'DialogContent';
 
-type DialogContentProps = ThemedClassName<ComponentPropsWithRef<typeof DialogContentPrimitive>> & {
+type DialogContentProps = ThemedClassName<ComponentPropsWithRef<typeof DialogPrimitive.Content>> & {
   size?: DialogSize;
   inOverlayLayout?: boolean;
 };
@@ -116,16 +109,25 @@ const DialogContent: ForwardRefExoticComponent<DialogContentProps> = forwardRef<
     const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
 
     return (
-      <DialogContentPrimitive
+      <DialogPrimitive.Content
         {...props}
         // NOTE: Radix warning unless set to undefined.
         // https://www.radix-ui.com/primitives/docs/components/dialog#description
         aria-describedby={undefined}
-        className={tx('dialog.content', { inOverlayLayout: propsInOverlayLayout || inOverlayLayout, size }, classNames)}
+        className={tx(
+          'dialog.content',
+          {
+            size,
+            inOverlayLayout: propsInOverlayLayout || inOverlayLayout,
+          },
+          classNames,
+        )}
         ref={forwardedRef}
       >
-        <Column.Root>{children}</Column.Root>
-      </DialogContentPrimitive>
+        <Column.Root classNames='dx-expander' gutter='sm'>
+          {children}
+        </Column.Root>
+      </DialogPrimitive.Content>
     );
   },
 );
@@ -136,18 +138,18 @@ DialogContent.displayName = DIALOG_CONTENT_NAME;
 // Header
 //
 
-type DialogHeaderProps = ThemedClassName<PropsWithChildren> & { srOnly?: boolean };
+type DialogHeaderProps = SlottableProps;
 
-const DialogHeader: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<HTMLHeadingElement, DialogTitleProps>(
-  ({ classNames, srOnly, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    return (
-      <Column.Segment asChild>
-        <div role='heading' {...props} className={tx('dialog.header', { srOnly }, [classNames])} ref={forwardedRef} />
-      </Column.Segment>
-    );
-  },
-);
+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
@@ -161,11 +163,10 @@ const DialogCloseIconButton = forwardRef<HTMLButtonElement, DialogCloseIconButto
     return (
       <IconButton
         {...props}
-        label={label ?? t('close dialog label')}
+        label={label ?? t('close-dialog.label')}
         icon='ph--x--regular'
         iconOnly
         size={4}
-        density='fine'
         variant='ghost'
         ref={forwardedRef}
       />
@@ -177,32 +178,30 @@ const DialogCloseIconButton = forwardRef<HTMLButtonElement, DialogCloseIconButto
 // Body
 //
 
-type DialogBodyProps = PropsWithChildren;
+type DialogBodyProps = SlottableProps;
 
-const DialogBody: ForwardRefExoticComponent<DialogBodyProps> = forwardRef<HTMLDivElement, DialogBodyProps>(
-  ({ children, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    return (
-      <Column.Segment asChild>
-        <div role='none' {...props} className={tx('dialog.body')} ref={forwardedRef}>
-          {children}
-        </div>
-      </Column.Segment>
-    );
-  },
-);
+const DialogBody = 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.body', {}, className)} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
 
 //
 // Title
 //
 
-type DialogTitleProps = ThemedClassName<DialogTitlePrimitiveProps> & { srOnly?: boolean };
+type DialogTitleProps = ThemedClassName<DialogPrimitive.DialogTitleProps> & { srOnly?: boolean };
 
-const DialogTitle: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<HTMLHeadingElement, DialogTitleProps>(
+const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(
   ({ classNames, srOnly, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
-      <DialogTitlePrimitive {...props} className={tx('dialog.title', { srOnly }, classNames)} ref={forwardedRef} />
+      <DialogPrimitive.Title {...props} className={tx('dialog.title', { srOnly }, classNames)} ref={forwardedRef} />
     );
   },
 );
@@ -211,39 +210,35 @@ const DialogTitle: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<HTML
 // Description
 //
 
-type DialogDescriptionProps = ThemedClassName<DialogDescriptionPrimitiveProps> & { srOnly?: boolean };
+type DialogDescriptionProps = ThemedClassName<DialogPrimitive.DialogDescriptionProps> & { srOnly?: boolean };
 
-const DialogDescription: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<
-  HTMLParagraphElement,
-  DialogDescriptionProps
->(({ classNames, srOnly, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return (
-    <DialogDescriptionPrimitive
-      {...props}
-      className={tx('dialog.description', { srOnly }, classNames)}
-      ref={forwardedRef}
-    />
-  );
-});
+const DialogDescription = forwardRef<HTMLParagraphElement, DialogDescriptionProps>(
+  ({ classNames, srOnly, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DialogPrimitive.Description
+        {...props}
+        className={tx('dialog.description', { srOnly }, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
 
 //
 // ActionBar
 //
 
-type DialogActionBarProps = ThemedClassName<PropsWithChildren>;
+type DialogActionBarProps = SlottableProps;
 
-const DialogActionBar: ForwardRefExoticComponent<DialogActionBarProps> = forwardRef<
-  HTMLDivElement,
-  DialogActionBarProps
->(({ children, classNames, ...props }, forwardedRef) => {
+const DialogActionBar = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
+  const { className: classNames, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot : Primitive.div;
   const { tx } = useThemeContext();
   return (
-    <Column.Segment asChild>
-      <div {...props} className={tx('dialog.actionbar', {}, classNames)} ref={forwardedRef}>
-        {children}
-      </div>
-    </Column.Segment>
+    <Comp {...rest} className={tx('dialog.actionbar', {}, classNames)} ref={forwardedRef}>
+      {children}
+    </Comp>
   );
 });
 
@@ -251,9 +246,9 @@ const DialogActionBar: ForwardRefExoticComponent<DialogActionBarProps> = forward
 // Close
 //
 
-type DialogCloseProps = DialogClosePrimitiveProps;
+type DialogCloseProps = DialogPrimitive.DialogCloseProps;
 
-const DialogClose: FunctionComponent<DialogCloseProps> = DialogClosePrimitive;
+const DialogClose: FunctionComponent<DialogCloseProps> = DialogPrimitive.Close;
 
 //
 // Dialog
@@ -286,4 +281,5 @@ export type {
   DialogDescriptionProps,
   DialogActionBarProps,
   DialogCloseProps,
+  DialogCloseIconButtonProps,
 };

package/src/components/ErrorFallback/ErrorFallback.stories.tsx

@@ -8,11 +8,10 @@ import React from 'react';
 import { ErrorBoundary } from '@dxos/react-error-boundary';
 
 import { withLayout, withTheme } from '../../testing';
-
 import { ErrorFallback } from './ErrorFallback';
 import { ThrowError } from './ThrowError';
 
-const BasicStory = () => {
+const DefaultStory = () => {
   return (
     <ErrorBoundary name='story' FallbackComponent={ErrorFallback}>
       <ThrowError />
@@ -20,10 +19,6 @@ const BasicStory = () => {
   );
 };
 
-const StringErrorStory = () => {
-  return <ErrorFallback error='This is a string error message' data={{ context: 'story' }} />;
-};
-
 const meta: Meta = {
   title: 'ui/react-ui-core/components/ErrorFallback',
   component: ErrorFallback,
@@ -38,7 +33,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-  render: BasicStory,
+  render: DefaultStory,
   play: async () => {
     // This story intentionally renders an ErrorBoundary fallback; clear the smoke-test error flag.
     (window as any).__ERROR_BOUNDARY_ERRORS__ = [];
@@ -46,5 +41,5 @@ export const Default: Story = {
 };
 
 export const StringError: Story = {
-  render: StringErrorStory,
+  render: () => <ErrorFallback error='This is a string error message' data={{ context: 'story' }} />,
 };

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/Focus/AUDIT.md

@@ -0,0 +1,43 @@
+# Focus
+
+## Problem
+
+Grid cells use `overflow-hidden` which clips outward CSS `ring` (box-shadow) and `outline` styles.
+Using `border` for focus indicators creates doubled lines at grid cell boundaries.
+Inset `box-shadow` alone is obscured by child elements with backgrounds (e.g., toolbar headers).
+
+## Solution
+
+Uses a `::after` pseudo-element overlay with `ring-inset` to paint the focus ring above all child content.
+The pseudo-element is absolutely positioned, `pointer-events-none`, and inherits `border-radius`.
+
+- **Default**: ring is transparent (invisible until focused).
+- **`border` prop**: shows a CSS `border-separator` when unfocused (e.g., for grid cell edges).
+- **Focus/active/error states**: ring color changes to the appropriate indicator color.
+
+Both `Focus.Group` and `Focus.Item` support the `border` prop.
+
+## Why `::after` overlay
+
+| Approach                 | Clipped? | Obscured by children? | Notes                                                                 |
+| ------------------------ | -------- | --------------------- | --------------------------------------------------------------------- |
+| `ring` (outward)         | Yes      | N/A                   | Extends outside bounds, clipped by parent `overflow-hidden`.          |
+| `ring-inset`             | No       | Yes                   | Inset box-shadow is part of background layer; children paint over it. |
+| `::after` + `ring-inset` | No       | No                    | Pseudo-element paints above children. Requires `position: relative`.  |
+
+## Relationship to `dx-focus-ring-inset-over-all`
+
+The CSS class `dx-focus-ring-inset-over-all` (in `focus-ring.css`) uses the same `::after` technique
+but only reacts to `:focus-visible`. `Focus.Group/Item` additionally support programmatic states
+via `data-focus-state` (`active`, `error`).
+
+## Clean-up
+
+- [ ] Unify: extend `dx-focus-ring-inset-over-all` to support `data-focus-state` attributes,
+      then have `Focus.Group/Item` use the CSS class instead of inline Tailwind utilities.
+      Consumers: Plank, StackItem, Tabs, AttentionProvider, main sidebar.
+
+## Audit
+
+- [ ] Create a list of all container components (outside of `react-ui`) that directly use `overflow-hidden`;
+      Consider containers to be components that have `children` and expand (e.g., `grid`, `grow`, `h-full`, `w-full`).

package/src/components/Focus/Focus.stories.tsx

@@ -0,0 +1,230 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { type PropsWithChildren, useState } from 'react';
+
+import { mx } from '@dxos/ui-theme';
+
+import { withLayout, withTheme } from '../../testing';
+import { type ThemedClassName } from '../../util';
+import { Focus } from './Focus';
+
+type Item = { id: string; label: string };
+
+const ITEMS: Item[] = [
+  { id: '1', label: 'Item 1' },
+  { id: '2', label: 'Item 2' },
+  { id: '3', label: 'Item 3' },
+  { id: '4', label: 'Item 4' },
+  { id: '5', label: 'Item 5' },
+];
+
+const itemClassName = 'flex items-center gap-3 px-3 py-2 aria-current:bg-neutral-75 dark:aria-current:bg-neutral-800';
+
+const Container = ({ classNames, children }: ThemedClassName<PropsWithChildren>) => {
+  return (
+    <div className='dx-container grid grid-cols-[1fr_2fr_1fr]'>
+      <div className='border-e border-separator' />
+      <div className='dx-expander grid grid-rows-[1fr_2fr_1fr]'>
+        <div className='border-b border-separator' />
+        <div className={mx('h-full flex flex-col gap-2', classNames)}>{children}</div>
+        <div className='border-t border-separator' />
+      </div>
+      <div className='border-s border-separator' />
+    </div>
+  );
+};
+
+const Text = ({ children }: PropsWithChildren) => {
+  return <p className='p-1 text-sm text-subdued'>{children}</p>;
+};
+
+//
+// Default (vertical list)
+//
+
+const DefaultStory = () => {
+  const [current, setCurrent] = useState<string | undefined>('1');
+
+  return (
+    <Container>
+      <Text>Tab into the group, then use arrow keys to navigate. Press Enter to select.</Text>
+      <Focus.Group classNames='h-full'>
+        {ITEMS.map((item) => (
+          <Focus.Item
+            key={item.id}
+            current={current === item.id}
+            onCurrentChange={() => setCurrent(item.id)}
+            className={itemClassName}
+          >
+            <span className='size-2 bg-primary-500 opacity-0 aria-[current]:opacity-100' />
+            <span>{item.label}</span>
+          </Focus.Item>
+        ))}
+      </Focus.Group>
+      <Text>Selected: {current ?? 'none'}</Text>
+    </Container>
+  );
+};
+
+//
+// Horizontal group
+//
+
+const HorizontalStory = () => {
+  const [current, setCurrent] = useState<string | undefined>();
+
+  return (
+    <Container>
+      <Text>Horizontal arrow-key navigation between cards.</Text>
+      <Focus.Group classNames='h-full flex flex-row gap-2 items-center justify-center' orientation='horizontal'>
+        {ITEMS.map((item) => (
+          <Focus.Item
+            key={item.id}
+            current={current === item.id}
+            onCurrentChange={() => setCurrent(item.id)}
+            className='flex flex-col items-center justify-center w-20 h-20 border border-separator aria-current:border-primary-500 aria-current:bg-primary-50 dark:aria-current:bg-primary-900/20 cursor-pointer'
+          >
+            <span className='text-xs mt-1'>{item.label}</span>
+          </Focus.Item>
+        ))}
+      </Focus.Group>
+      <Text>Selected: {current ?? 'none'}</Text>
+    </Container>
+  );
+};
+
+//
+// Grid (demonstrates border prop and overflow-hidden clipping)
+//
+
+const GridCell = ({ border, items }: { border?: boolean; items: Item[] }) => {
+  const [current, setCurrent] = useState<string | undefined>();
+  return (
+    <div className='overflow-hidden bg-base-surface'>
+      <Focus.Group classNames='h-full' border={border}>
+        {items.map((item) => (
+          <Focus.Item
+            key={item.id}
+            current={current === item.id}
+            onCurrentChange={() => setCurrent(item.id)}
+            className={itemClassName}
+          >
+            <span>{item.label}</span>
+          </Focus.Item>
+        ))}
+      </Focus.Group>
+    </div>
+  );
+};
+
+const GridStory = () => {
+  return (
+    <div className='p-8 space-y-8'>
+      <Text>Tab between groups to compare. Each cell has overflow-hidden.</Text>
+
+      {/* Default vs border. */}
+      <div className='grid grid-cols-2 gap-4'>
+        <div className='space-y-2'>
+          <p className='text-xs font-mono text-subdued'>Default (invisible until focused)</p>
+          <div className='h-48'>
+            <GridCell items={ITEMS} />
+          </div>
+        </div>
+        <div className='space-y-2'>
+          <p className='text-xs font-mono text-subdued'>border (always visible)</p>
+          <div className='h-48'>
+            <GridCell border items={ITEMS} />
+          </div>
+        </div>
+      </div>
+
+      {/* Tight grid — border. */}
+      <p className='text-xs font-mono text-subdued'>Tight grid — border</p>
+      <div className='grid grid-cols-3'>
+        {[0, 1, 2].map((col) => (
+          <div key={col} className='overflow-hidden'>
+            <GridCell border items={ITEMS.slice(0, 3)} />
+          </div>
+        ))}
+      </div>
+
+      {/* Tight grid — default. */}
+      <p className='text-xs font-mono text-subdued'>Tight grid — default</p>
+      <div className='grid grid-cols-3'>
+        {[0, 1, 2].map((col) => (
+          <div key={col} className='overflow-hidden'>
+            <GridCell items={ITEMS.slice(0, 3)} />
+          </div>
+        ))}
+      </div>
+
+      {/* Item-level border. */}
+      <p className='text-xs font-mono text-subdued'>Item-level border</p>
+      <div className='h-48 overflow-hidden'>
+        <Focus.Group classNames='h-full'>
+          {ITEMS.slice(0, 3).map((item) => (
+            <Focus.Item key={item.id} border className={itemClassName}>
+              <span>{item.label}</span>
+            </Focus.Item>
+          ))}
+        </Focus.Group>
+      </div>
+
+      {/* Error state. */}
+      <p className='text-xs font-mono text-subdued'>Error state</p>
+      <div className='h-48 overflow-hidden'>
+        <Focus.Group classNames='h-full' data-focus-state='error'>
+          {ITEMS.slice(0, 3).map((item) => (
+            <Focus.Item key={item.id} className={itemClassName}>
+              <span>{item.label}</span>
+            </Focus.Item>
+          ))}
+        </Focus.Group>
+      </div>
+    </div>
+  );
+};
+
+//
+// asChild (slot) usage
+//
+
+const AsChildStory = () => {
+  const [current, setCurrent] = useState<string | undefined>();
+
+  return (
+    <Container>
+      <Text>Focus.Item rendered as a custom element via asChild.</Text>
+      <Focus.Group classNames='h-full'>
+        {ITEMS.slice(0, 3).map((item) => (
+          <Focus.Item key={item.id} asChild current={current === item.id} onCurrentChange={() => setCurrent(item.id)}>
+            <button className='flex w-full items-center gap-3 px-3 py-2 text-left hover:bg-neutral-75 dark:hover:bg-neutral-800 aria-current:bg-primary-50 dark:aria-current:bg-primary-900/20 aria-current:text-primary-600'>
+              <span>{item.label}</span>
+            </button>
+          </Focus.Item>
+        ))}
+      </Focus.Group>
+    </Container>
+  );
+};
+
+//
+// Meta
+//
+
+const meta: Meta = {
+  title: 'ui/react-ui-core/components/Focus',
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { render: DefaultStory };
+export const Horizontal: Story = { render: HorizontalStory };
+export const Grid: Story = { render: GridStory };
+export const AsChild: Story = { render: AsChildStory };