@dxos/react-ui 0.8.4-main.40e3dcdf1b → 0.8.4-main.4668b7de9b

package/src/components/Separator/Separator.tsx

@@ -1,24 +1,21 @@
 //
 // Copyright 2023 DXOS.org
 //
-import {
-  Separator as SeparatorPrimitive,
-  type SeparatorProps as SeparatorPrimitiveProps,
-} from '@radix-ui/react-separator';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import React, { forwardRef } from 'react';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 
-type SeparatorProps = ThemedClassName<SeparatorPrimitiveProps> & { subdued?: boolean };
+type SeparatorProps = ThemedClassName<SeparatorPrimitive.SeparatorProps> & { subdued?: boolean };
 
 const Separator = forwardRef<HTMLDivElement, SeparatorProps>(
   ({ classNames, orientation = 'horizontal', subdued, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
-      <SeparatorPrimitive
-        orientation={orientation}
+      <SeparatorPrimitive.Root
         {...props}
+        orientation={orientation}
         className={tx('separator.root', { orientation, subdued }, classNames)}
         ref={forwardedRef}
       />

package/src/components/Skeleton/Skeleton.stories.tsx

@@ -5,7 +5,6 @@
 import React from 'react';
 
 import { withTheme } from '../../testing';
-
 import { Skeleton } from './Skeleton';
 
 export default {

package/src/components/Skeleton/Skeleton.theme.ts

@@ -0,0 +1,22 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import type { ComponentFunction, Theme } from '@dxos/ui-types';
+
+export type SkeletonStyleProps = {
+  variant?: 'default' | 'circle' | 'text';
+};
+
+const root: ComponentFunction<SkeletonStyleProps> = ({ variant = 'default' }, ...etc) =>
+  mx(
+    'animate-pulse bg-neutral-300 dark:bg-neutral-700 rounded-md',
+    variant === 'circle' && 'rounded-full',
+    variant === 'text' && 'rounded-sm',
+    ...etc,
+  );
+
+export const skeletonTheme: Theme<SkeletonStyleProps> = {
+  root,
+};

package/src/components/Splitter/Splitter.stories.tsx

@@ -5,54 +5,54 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { type ComponentPropsWithoutRef, forwardRef, useState } from 'react';
 
-import { Panel } from '../../primitives';
 import { withLayout, withTheme } from '../../testing';
+import { Panel } from '../Panel';
 import { ScrollArea } from '../ScrollArea';
 import { Toolbar } from '../Toolbar';
-
 import { Splitter, type SplitterRootProps } from './Splitter';
 
 const PanelContent = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'> & { label: string }>(
-  ({ label, ...props }, ref) => (
-    <div ref={ref} {...props}>
-      <Panel.Root>
-        <Panel.Toolbar asChild>
-          <Toolbar.Root>{label}</Toolbar.Root>
-        </Panel.Toolbar>
-        <Panel.Content asChild>
-          <ScrollArea.Root orientation='vertical'>
-            <ScrollArea.Viewport>
-              {Array.from({ length: 100 }).map((_, i) => (
-                <div key={i} className='p-1'>
-                  {label}-{i}
-                </div>
-              ))}
-            </ScrollArea.Viewport>
-          </ScrollArea.Root>
-        </Panel.Content>
-      </Panel.Root>
-    </div>
+  ({ label, ...props }, forwardedRef) => (
+    <Panel.Root {...props} ref={forwardedRef}>
+      <Panel.Toolbar asChild>
+        <Toolbar.Root>{label}</Toolbar.Root>
+      </Panel.Toolbar>
+      <Panel.Content asChild>
+        <ScrollArea.Root orientation='vertical'>
+          <ScrollArea.Viewport>
+            {Array.from({ length: 100 }).map((_, i) => (
+              <div key={i} className='p-1'>
+                {label}-{i}
+              </div>
+            ))}
+          </ScrollArea.Viewport>
+        </ScrollArea.Root>
+      </Panel.Content>
+    </Panel.Root>
   ),
 );
 
 const DefaultStory = (props: SplitterRootProps) => {
-  const [mode, setMode] = useState(props.mode ?? 'both');
+  const [mode, setMode] = useState(props.mode ?? 'split');
+  const [ratio, setRatio] = useState(props.ratio ?? 0.5);
 
   return (
     <Panel.Root>
       <Panel.Toolbar asChild>
         <Toolbar.Root>
-          <Toolbar.Button onClick={() => setMode('upper')}>A</Toolbar.Button>
-          <Toolbar.Button onClick={() => setMode('both')}>A + B</Toolbar.Button>
-          <Toolbar.Button onClick={() => setMode('lower')}>B</Toolbar.Button>
+          <Toolbar.Button onClick={() => setMode('top')}>A</Toolbar.Button>
+          <Toolbar.Button onClick={() => setMode('split')}>A+B</Toolbar.Button>
+          <Toolbar.Button onClick={() => setMode('bottom')}>B</Toolbar.Button>
+          <Toolbar.Separator />
+          <Toolbar.Button onClick={() => setRatio((r) => 1 - r)}>Toggle</Toolbar.Button>
         </Toolbar.Root>
       </Panel.Toolbar>
       <Panel.Content asChild>
-        <Splitter.Root mode={mode} ratio={props.ratio}>
-          <Splitter.Panel asChild position='upper'>
+        <Splitter.Root mode={mode} ratio={ratio}>
+          <Splitter.Panel asChild position='top'>
             <PanelContent label='A' />
           </Splitter.Panel>
-          <Splitter.Panel asChild position='lower'>
+          <Splitter.Panel asChild position='bottom'>
             <PanelContent label='B' />
           </Splitter.Panel>
         </Splitter.Root>
@@ -77,7 +77,7 @@ type Story = StoryObj<SplitterRootProps>;
 
 export const Default: Story = {
   args: {
-    mode: 'both',
-    ratio: 0.5,
+    mode: 'split',
+    ratio: 0.4,
   },
 };

package/src/components/Splitter/Splitter.theme.ts

@@ -0,0 +1,18 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import { type ComponentFunction, type Theme } from '@dxos/ui-types';
+
+export type SplitterStyleProps = {};
+
+const root: ComponentFunction<SplitterStyleProps> = (_props, ...etc) => mx('relative h-full overflow-hidden', ...etc);
+
+const panel: ComponentFunction<SplitterStyleProps> = (_props, ...etc) =>
+  mx('absolute inset-x-0 flex flex-col overflow-hidden', ...etc);
+
+export const splitterTheme: Theme<SplitterStyleProps> = {
+  root,
+  panel,
+};

package/src/components/Splitter/Splitter.tsx

@@ -5,22 +5,20 @@
 import { createContextScope } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
-import React, { forwardRef } from 'react';
-
-import { composableProps } from '@dxos/ui-theme';
-import { type SlottableProps } from '@dxos/ui-types';
+import React from 'react';
 
 import { useThemeContext } from '../../hooks';
+import { composableProps, slottable } from '../../util';
+import { ThemedClassName } from '../../util';
 
 type ScopedProps<P> = P & { __scopeSplitter?: any };
 
-// TODO(burdon): Enable resize.
 // TODO(burdon): Generalize horizontal/vertical and change to start/end.
-type Mode = 'upper' | 'lower' | 'both';
+type Mode = 'top' | 'bottom' | 'split';
 
 type SplitterContextValue = {
   mode: Mode;
-  ratio: number;
+  ratio?: number;
   transition: number;
 };
 
@@ -36,16 +34,18 @@ const [SplitterProvider, useSplitterContext] = createSplitterContext<SplitterCon
 
 const ROOT_NAME = 'Splitter.Root';
 
-type RootProps = SlottableProps<HTMLDivElement, Partial<SplitterContextValue>>;
+type SplitterRootProps = Partial<SplitterContextValue>;
 
-const Root = forwardRef<HTMLDivElement, ScopedProps<RootProps>>(
-  ({ __scopeSplitter, asChild, mode = 'upper', ratio = 0.5, transition = 250, children, ...props }, forwardedRef) => {
-    const { className, ...rest } = composableProps(props);
-    const Comp = asChild ? Slot : Primitive.div;
+const SplitterRoot = slottable<HTMLDivElement, SplitterRootProps>(
+  ({ asChild, mode = 'top', ratio = 0.5, transition = 250, children, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
+    const { __scopeSplitter, ...rest } = props as ScopedProps<typeof props>;
+    const { className, ...restProps } = composableProps(rest);
+    const Comp = asChild ? Slot : Primitive.div;
+
     return (
       <SplitterProvider scope={__scopeSplitter} mode={mode} ratio={ratio} transition={transition}>
-        <Comp role='none' {...rest} ref={forwardedRef} className={tx('splitter.root', {}, className)}>
+        <Comp {...restProps} ref={forwardedRef} className={tx('splitter.root', {}, className)}>
           {children}
         </Comp>
       </SplitterProvider>
@@ -53,7 +53,7 @@ const Root = forwardRef<HTMLDivElement, ScopedProps<RootProps>>(
   },
 );
 
-Root.displayName = ROOT_NAME;
+SplitterRoot.displayName = ROOT_NAME;
 
 //
 // Panel
@@ -61,44 +61,40 @@ Root.displayName = ROOT_NAME;
 
 const PANEL_NAME = 'Splitter.Panel';
 
-type PanelProps = SlottableProps<
-  HTMLDivElement,
-  {
-    position: 'upper' | 'lower';
-  }
->;
+type SplitterPanelProps = ThemedClassName<{
+  position: 'top' | 'bottom';
+}>;
 
-const Panel = forwardRef<HTMLDivElement, ScopedProps<PanelProps>>(
-  ({ __scopeSplitter, asChild, children, position, style, ...props }, forwardedRef) => {
-    const { className, ...rest } = composableProps(props);
-    const Comp = asChild ? Slot : Primitive.div;
-    const { mode, ratio, transition } = useSplitterContext(PANEL_NAME, __scopeSplitter);
+const SplitterPanel = slottable<HTMLDivElement, SplitterPanelProps>(
+  ({ classNames, asChild, children, position, style, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
+    const { __scopeSplitter, ...rest } = props as ScopedProps<typeof props>;
+    const Comp = asChild ? Slot : Primitive.div;
+    const { mode, ratio = 0.5, transition } = useSplitterContext(PANEL_NAME, __scopeSplitter);
+    const { className, ...restProps } = composableProps(rest);
 
     // Calculate position and height based on mode and ratio.
-    const isUpper = position === 'upper';
-    const top = isUpper ? '0%' : mode === 'upper' ? '100%' : mode === 'lower' ? '0%' : `${ratio * 100}%`;
-
-    const height = isUpper
-      ? mode === 'upper'
+    const isTopPanel = position === 'top';
+    const topOffset = isTopPanel ? '0%' : mode === 'top' ? '100%' : mode === 'bottom' ? '0%' : `${ratio * 100}%`;
+    const height = isTopPanel
+      ? mode === 'top'
         ? '100%'
-        : mode === 'lower'
+        : mode === 'bottom'
           ? '0%'
           : `${ratio * 100}%`
-      : mode === 'lower'
+      : mode === 'bottom'
         ? '100%'
-        : mode === 'upper'
+        : mode === 'top'
           ? '0%'
           : `${(1 - ratio) * 100}%`;
 
     return (
       <Comp
-        role='none'
-        {...rest}
+        {...restProps}
         ref={forwardedRef}
         className={tx('splitter.panel', {}, className)}
         style={{
-          top,
+          top: topOffset,
           height,
           transition: `top ${transition}ms, height ${transition}ms ease-out`,
           ...style,
@@ -110,17 +106,17 @@ const Panel = forwardRef<HTMLDivElement, ScopedProps<PanelProps>>(
   },
 );
 
-Panel.displayName = PANEL_NAME;
+SplitterPanel.displayName = PANEL_NAME;
 
 //
 // Splitter
 //
 
 const Splitter = {
-  Root,
-  Panel,
+  Root: SplitterRoot,
+  Panel: SplitterPanel,
 };
 
 export { Splitter, createSplitterScope };
 
-export type { Mode as SplitterMode, RootProps as SplitterRootProps, PanelProps as SplitterPanelProps };
+export type { Mode as SplitterMode, SplitterRootProps, SplitterPanelProps };

package/src/components/Status/Status.stories.tsx

@@ -6,7 +6,6 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { withTheme } from '../../testing';
-
 import { Status } from './Status';
 
 const meta = {

package/src/components/Status/Status.theme.ts

@@ -0,0 +1,31 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import type { ComponentFunction, Theme } from '@dxos/ui-types';
+
+export type StatusStyleProps = {
+  variant?: 'default' | 'main-bottom';
+  indeterminate?: boolean;
+};
+
+const root: ComponentFunction<StatusStyleProps> = ({ variant = 'default' }, ...etc) =>
+  mx(
+    'h-1 relative rounded-full overflow-hidden',
+    variant === 'main-bottom' ? 'w-full block' : 'inline-20 inline-block bg-base-surface',
+    ...etc,
+  );
+
+const bar: ComponentFunction<StatusStyleProps> = ({ variant = 'default', indeterminate }, ...etc) =>
+  mx(
+    'absolute inset-y-0 block rounded-full',
+    variant === 'main-bottom' ? 'bg-composer-300' : 'bg-un-accent',
+    indeterminate ? 'animate-progress-indeterminate' : 'start-0',
+    ...etc,
+  );
+
+export const statusTheme: Theme<StatusStyleProps> = {
+  root,
+  bar,
+};

package/src/components/Status/Status.tsx

@@ -5,13 +5,15 @@
 import React, { type ComponentPropsWithRef, forwardRef } from 'react';
 
 import { useThemeContext } from '../../hooks';
+import { type StatusStyleProps } from '../../theme';
 import { type ThemedClassName } from '../../util';
 
-type StatusProps = ThemedClassName<ComponentPropsWithRef<'span'>> & {
-  indeterminate?: boolean;
-  variant?: 'default' | 'main-bottom';
-  progress?: number;
-};
+type StatusProps = ThemedClassName<
+  ComponentPropsWithRef<'span'> &
+    StatusStyleProps & {
+      progress?: number;
+    }
+>;
 
 const Status = forwardRef<HTMLSpanElement, StatusProps>(
   ({ classNames, children, progress = 0, indeterminate, variant, ...props }, forwardedRef) => {

package/src/components/Tag/Tag.stories.tsx

@@ -9,7 +9,6 @@ import { hues } from '@dxos/ui-theme';
 import { type ChromaticPalette, type MessageValence } from '@dxos/ui-types';
 
 import { withLayout, withTheme } from '../../testing';
-
 import { Tag } from './Tag';
 
 const palettes = ['neutral', 'success', 'info', 'warning', 'error', ...hues] as (ChromaticPalette | MessageValence)[];

package/src/components/Tag/Tag.theme.ts

@@ -0,0 +1,22 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import {
+  type ChromaticPalette,
+  type ComponentFunction,
+  type MessageValence,
+  type NeutralPalette,
+  type Theme,
+} from '@dxos/ui-types';
+
+export type TagStyleProps = {
+  palette?: ChromaticPalette | NeutralPalette | MessageValence;
+};
+
+const root: ComponentFunction<TagStyleProps> = (_, ...etc) => mx('dx-tag', ...etc);
+
+export const tagTheme: Theme<TagStyleProps> = {
+  root,
+};

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

@@ -7,38 +7,48 @@ import React, { type ReactNode, useState } from 'react';
 
 import { withTheme } from '../../testing';
 import { Button } from '../Button';
-
 import { Toast } from './Toast';
 
 type ActionTriggerProps = { altText: string; trigger: ReactNode };
 
 type StorybookToastProps = Partial<{
+  icon: string;
   title: string;
   description: string;
+  duration: number;
   actionTriggers: ActionTriggerProps[];
   openTrigger: string;
-  closeTrigger: ReactNode;
+  defaultOpen: boolean;
 }>;
 
-const DefaultStory = ({ title, description, actionTriggers, openTrigger, closeTrigger }: StorybookToastProps) => {
-  const [open, setOpen] = useState(true);
+const DefaultStory = ({
+  icon,
+  title,
+  description,
+  duration,
+  actionTriggers,
+  openTrigger,
+  defaultOpen = true,
+}: StorybookToastProps) => {
+  const [open, setOpen] = useState(defaultOpen);
   return (
     <Toast.Provider>
       <Button onClick={() => setOpen(true)}>{openTrigger}</Button>
       <Toast.Viewport />
-      <Toast.Root open={open} onOpenChange={setOpen}>
-        <Toast.Body>
-          <Toast.Title>{title}</Toast.Title>
-          <Toast.Description>{description}</Toast.Description>
-        </Toast.Body>
-        <Toast.Actions>
-          <Toast.Close asChild={typeof closeTrigger !== 'string'}>{closeTrigger}</Toast.Close>
-          {(actionTriggers || []).map(({ altText, trigger }: ActionTriggerProps, index: number) => (
-            <Toast.Action key={index} altText={altText} asChild={typeof trigger !== 'string'}>
-              {trigger}
-            </Toast.Action>
-          ))}
-        </Toast.Actions>
+      <Toast.Root open={open} onOpenChange={setOpen} defaultOpen={defaultOpen} duration={duration}>
+        <Toast.Title icon={icon} onClose={() => setOpen(false)}>
+          {title}
+        </Toast.Title>
+        <Toast.Description>{description}</Toast.Description>
+        {actionTriggers && actionTriggers.length > 0 && (
+          <Toast.Actions>
+            {actionTriggers.map(({ altText, trigger }: ActionTriggerProps, index: number) => (
+              <Toast.Action key={index} altText={altText} asChild={typeof trigger !== 'string'}>
+                {trigger}
+              </Toast.Action>
+            ))}
+          </Toast.Actions>
+        )}
       </Toast.Root>
     </Toast.Provider>
   );
@@ -57,18 +67,28 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
+    defaultOpen: true,
     openTrigger: 'Open toast',
+    icon: 'ph--sparkle--regular',
     title: 'This is a toast',
     description: 'This goes away on its own with a timer.',
+    duration: 100_000,
+  },
+};
+
+export const WithAction: Story = {
+  args: {
+    defaultOpen: true,
+    openTrigger: 'Open toast',
+    icon: 'ph--sparkle--regular',
+    title: 'This is a toast',
+    description: 'This goes away on its own with a timer.',
+    duration: 100_000,
     actionTriggers: [
       {
         altText: 'Press F5 to reload the page',
         trigger: <Button variant='primary'>Reload</Button>,
       },
     ],
-    closeTrigger: <Button>Close</Button>,
-  },
-  parameters: {
-    chromatic: { delay: 800 },
   },
 };

package/src/components/Toast/Toast.theme.ts

@@ -0,0 +1,56 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { mx, surfaceShadow } from '@dxos/ui-theme';
+import { type ComponentFunction, type Theme } from '@dxos/ui-types';
+
+export type ToastStyleProps = {};
+
+const viewport: ComponentFunction<ToastStyleProps> = (_props, ...etc) =>
+  mx(
+    // TODO(burdon): block-end should take into account status bar.
+    'z-40 fixed bottom-[calc(env(safe-area-inset-bottom)+1rem)] inset-start-[calc(env(safe-area-inset-left)+1rem)] inset-end-[calc(env(safe-area-inset-right)+1rem)] w-auto md:end-[calc(env(safe-area-inset-right)+1rem)] md:left-auto md:w-full md:max-w-sm',
+    'rounded-md flex flex-col gap-2',
+    ...etc,
+  );
+
+const root: ComponentFunction<ToastStyleProps> = (_props, ...etc) =>
+  mx(
+    'dx-popover-surface rounded-md p-1',
+    surfaceShadow({ elevation: 'toast' }),
+    'radix-state-open:animate-toast-slide-in-bottom md:radix-state-open:animate-toast-slide-in-right',
+    'radix-state-closed:animate-toast-hide',
+    'radix-swipe-end:animate-toast-swipe-out',
+    'translate-x-radix-toast-swipe-move-x',
+    'radix-swipe-cancel:translate-x-0 radix-swipe-cancel:duration-200 radix-swipe-cancel:ease-[ease]',
+    'dx-focus-ring',
+    ...etc,
+  );
+
+const grid: ComponentFunction<ToastStyleProps> = (_props, ...etc) => mx('gap-y-1 pbe-1', ...etc);
+
+const header: ComponentFunction<ToastStyleProps> = (_props, ...etc) => mx('items-center', ...etc);
+
+const icon: ComponentFunction<ToastStyleProps> = (_props, ...etc) => mx('col-start-1 grid place-items-center', ...etc);
+
+const title: ComponentFunction<ToastStyleProps> = (_props, ...etc) =>
+  mx('col-start-2 overflow-hidden truncate font-medium', ...etc);
+
+const close: ComponentFunction<ToastStyleProps> = (_props, ...etc) => mx('col-start-3', ...etc);
+
+const description: ComponentFunction<ToastStyleProps> = (_props, ...etc) => mx('col-start-2 text-description', ...etc);
+
+const actions: ComponentFunction<ToastStyleProps> = (_props, ...etc) => mx('flex gap-2 mbs-1', ...etc);
+
+export const toastTheme: Theme<ToastStyleProps> = {
+  viewport,
+  root,
+  grid,
+  header,
+  icon,
+  title,
+  close,
+  description,
+  actions,
+};