@dxos/react-ui 0.8.4-staging.ac66bdf99f → 0.9.0

package/src/components/ScrollContainer/ScrollContainer.tsx

@@ -18,10 +18,10 @@ import React, {
 import { addEventListener, combine } from '@dxos/async';
 import { invariant } from '@dxos/invariant';
 import { useMergeRefs } from '@dxos/react-hooks';
-import { composable, composableProps, slottable } from '@dxos/ui-theme';
 import { mx } from '@dxos/ui-theme';
 import { type SlottableProps } from '@dxos/ui-types';
 
+import { composable, composableProps, slottable } from '../../util';
 import { type ThemedClassName } from '../../util';
 import { IconButton } from '../Button';
 import { ScrollArea, type ScrollAreaRootProps } from '../ScrollArea';
@@ -55,7 +55,7 @@ const [ScrollContainerProvider, useScrollContainerContext] =
 // Root
 //
 
-type RootProps = PropsWithChildren<{
+type ScrollContainerRootProps = PropsWithChildren<{
   pin?: boolean;
   behavior?: ScrollBehavior;
 }>;
@@ -64,7 +64,7 @@ type RootProps = PropsWithChildren<{
  * Headless scroll container that provides context for scroll state.
  * Render ScrollContainer.Content and ScrollContainer.Viewport as children.
  */
-const Root = forwardRef<ScrollController, RootProps>(
+const ScrollContainerRoot = forwardRef<ScrollController, ScrollContainerRootProps>(
   ({ children, pin, behavior: behaviorProp = 'smooth' }, forwardedRef) => {
     const scrollerRef = useRef<HTMLDivElement | null>(null);
     const autoScrollRef = useRef(false);
@@ -139,23 +139,23 @@ const Root = forwardRef<ScrollController, RootProps>(
   },
 );
 
-Root.displayName = 'ScrollContainer.Root';
+ScrollContainerRoot.displayName = 'ScrollContainer.Root';
 
 //
 // Content
 //
 
-type ContentProps = Pick<ScrollAreaRootProps, 'thin' | 'padding' | 'centered'>;
+type ScrollContainerContentProps = Pick<ScrollAreaRootProps, 'thin' | 'padding' | 'centered'>;
 
 /**
  * Composable wrapper around ScrollArea.Root.
  * Provides the DOM structure for the scroll container.
  */
-const Content = composable<HTMLDivElement, ContentProps>(
+const ScrollContainerContent = composable<HTMLDivElement, ScrollContainerContentProps>(
   ({ children, thin, padding, centered, ...props }, forwardedRef) => {
     return (
       <ScrollArea.Root
-        {...composableProps(props, { classNames: 'relative' })}
+        {...composableProps(props, { classNames: 'relative isolate' })}
         thin={thin}
         padding={padding}
         centered={centered}
@@ -167,7 +167,7 @@ const Content = composable<HTMLDivElement, ContentProps>(
   },
 );
 
-Content.displayName = 'ScrollContainer.Content';
+ScrollContainerContent.displayName = 'ScrollContainer.Content';
 
 //
 // Viewport
@@ -175,40 +175,42 @@ Content.displayName = 'ScrollContainer.Content';
 
 const VIEWPORT_NAME = 'ScrollContainer.Viewport';
 
-type ViewportProps = SlottableProps;
+type ScrollContainerViewportProps = SlottableProps;
 
-const Viewport = slottable<HTMLDivElement, ViewportProps>(({ children, asChild, ...props }, forwardedRef) => {
-  const scrollerRef = useRef<HTMLDivElement>(null);
-  const mergedRef = useMergeRefs([forwardedRef, scrollerRef]);
-  const { setViewport, setPinned, setOverflow } = useScrollContainerContext(VIEWPORT_NAME);
+const ScrollContainerViewport = slottable<HTMLDivElement, ScrollContainerViewportProps>(
+  ({ children, asChild, ...props }, forwardedRef) => {
+    const scrollerRef = useRef<HTMLDivElement>(null);
+    const mergedRef = useMergeRefs([forwardedRef, scrollerRef]);
+    const { setViewport, setPinned, setOverflow } = useScrollContainerContext(VIEWPORT_NAME);
 
-  // Register the scroll element with Root and set up wheel/scroll listeners.
-  useEffect(() => {
-    const el = scrollerRef.current;
-    if (!el) {
-      return;
-    }
+    // Register the scroll element with Root and set up wheel/scroll listeners.
+    useEffect(() => {
+      const el = scrollerRef.current;
+      if (!el) {
+        return;
+      }
 
-    setViewport(el);
+      setViewport(el);
 
-    return combine(
-      addEventListener(el, 'wheel', () => setPinned(isBottom(el))),
-      addEventListener(el, 'scroll', () => setOverflow((el.scrollTop ?? 0) > 0)),
-      () => setViewport(null),
-    );
-  }, [setViewport, setPinned, setOverflow]);
+      return combine(
+        addEventListener(el, 'wheel', () => setPinned(isBottom(el))),
+        addEventListener(el, 'scroll', () => setOverflow((el.scrollTop ?? 0) > 0)),
+        () => setViewport(null),
+      );
+    }, [setViewport, setPinned, setOverflow]);
 
-  return (
-    <>
-      <ScrollArea.Viewport asChild={asChild} {...composableProps(props)} ref={mergedRef}>
-        {children}
-      </ScrollArea.Viewport>
-      <PinEffect scrollerRef={scrollerRef} />
-    </>
-  );
-});
+    return (
+      <>
+        <ScrollArea.Viewport asChild={asChild} {...composableProps(props)} ref={mergedRef}>
+          {children}
+        </ScrollArea.Viewport>
+        <ScrollContainerPinEffect scrollerRef={scrollerRef} />
+      </>
+    );
+  },
+);
 
-Viewport.displayName = VIEWPORT_NAME;
+ScrollContainerViewport.displayName = VIEWPORT_NAME;
 
 /**
  * Isolated component that consumes pinned/controller from context.
@@ -216,7 +218,7 @@ Viewport.displayName = VIEWPORT_NAME;
  */
 const PIN_EFFECT_NAME = 'ScrollContainer.PinEffect';
 
-const PinEffect = ({ scrollerRef }: { scrollerRef: RefObject<HTMLDivElement | null> }) => {
+const ScrollContainerPinEffect = ({ scrollerRef }: { scrollerRef: RefObject<HTMLDivElement | null> }) => {
   const { pinned, controller } = useScrollContainerContext(PIN_EFFECT_NAME);
 
   // Pin scroll to bottom when content changes.
@@ -269,26 +271,25 @@ const PinEffect = ({ scrollerRef }: { scrollerRef: RefObject<HTMLDivElement | nu
 
 const FADE_NAME = 'ScrollContainer.Fade';
 
-type FadeProps = {};
+type ScrollContainerFadeProps = {};
 
-const Fade = () => {
+function ScrollContainerFade() {
   const { overflow } = useScrollContainerContext(FADE_NAME);
 
   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',
       )}
     />
   );
-};
+}
 
-Fade.displayName = FADE_NAME;
+ScrollContainerFade.displayName = FADE_NAME;
 
 //
 // ScrollDownButton
@@ -296,14 +297,13 @@ Fade.displayName = FADE_NAME;
 
 const SCROLL_DOWN_BUTTON_NAME = 'ScrollContainer.ScrollDownButton';
 
-type ScrollDownButtonProps = ThemedClassName;
+type ScrollContainerScrollDownButtonProps = ThemedClassName;
 
-const ScrollDownButton = ({ classNames }: ScrollDownButtonProps) => {
+function ScrollContainerScrollDownButton({ classNames }: ScrollContainerScrollDownButtonProps) {
   const { pinned, controller } = useScrollContainerContext(SCROLL_DOWN_BUTTON_NAME);
 
   return (
     <div
-      role='none'
       className={mx(
         'absolute bottom-2 right-4 opacity-100 transition-opacity duration-300',
         pinned && 'opacity-0',
@@ -320,9 +320,9 @@ const ScrollDownButton = ({ classNames }: ScrollDownButtonProps) => {
       />
     </div>
   );
-};
+}
 
-ScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
+ScrollContainerScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
 
 //
 // ScrollContainer
@@ -331,17 +331,17 @@ ScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
 export { useScrollContainerContext };
 
 export const ScrollContainer = {
-  Root,
-  Content,
-  Viewport,
-  Fade,
-  ScrollDownButton,
+  Root: ScrollContainerRoot,
+  Content: ScrollContainerContent,
+  Viewport: ScrollContainerViewport,
+  Fade: ScrollContainerFade,
+  ScrollDownButton: ScrollContainerScrollDownButton,
 };
 
 export type {
-  RootProps as ScrollContainerRootProps,
-  ContentProps as ScrollContainerContentProps,
-  ViewportProps as ScrollContainerViewportProps,
-  FadeProps as ScrollContainerFadeProps,
-  ScrollDownButtonProps as ScrollContainerScrollDownButtonProps,
+  ScrollContainerRootProps,
+  ScrollContainerContentProps,
+  ScrollContainerViewportProps,
+  ScrollContainerFadeProps,
+  ScrollContainerScrollDownButtonProps,
 };

package/src/components/Select/Select.theme.ts

@@ -0,0 +1,55 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { mx, surfaceShadow, surfaceZIndex } from '@dxos/ui-theme';
+import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
+
+export type SelectStyleProps = Partial<{
+  elevation: Elevation;
+}>;
+
+const content: ComponentFunction<SelectStyleProps> = ({ elevation }, ...etc) => {
+  return mx(
+    'dx-modal-surface rounded-sm border border-separator',
+    'min-w-(--radix-select-trigger-width) max-h-(--radix-select-content-available-height)',
+    surfaceShadow({ elevation: 'positioned' }),
+    surfaceZIndex({ elevation, level: 'menu' }),
+    ...etc,
+  );
+};
+
+const triggerButton: ComponentFunction<SelectStyleProps> = (_props, ...etc) =>
+  mx('grid grid-cols-[1fr_auto] [&>span]:text-left', ...etc);
+
+const viewport: ComponentFunction<SelectStyleProps> = (_props, ...etc) => mx(...etc);
+
+const item: ComponentFunction<SelectStyleProps> = (_props, ...etc) =>
+  mx(
+    'flex items-center min-h-[2rem] px-2.5 py-1 gap-2',
+    'text-base-fg leading-none select-none outline-hidden',
+    '[&>svg]:invisible [&[data-state=checked]>svg]:visible',
+    'dx-highlighted',
+    ...etc,
+  );
+
+const itemIndicator: ComponentFunction<SelectStyleProps> = (_props, ...etc) => mx('items-center', ...etc);
+
+const arrow: ComponentFunction<SelectStyleProps> = (_props, ...etc) => mx('fill-separator', ...etc);
+
+const separator: ComponentFunction<SelectStyleProps> = (_props, ...etc) =>
+  mx('self-stretch border-b my-1 border-separator', ...etc);
+
+const scrollButton: ComponentFunction<SelectStyleProps> = (_props, ...etc) =>
+  mx('dx-modal-surface flex items-center justify-center cursor-default h-6 w-full', ...etc);
+
+export const selectTheme: Theme<SelectStyleProps> = {
+  content,
+  triggerButton,
+  viewport,
+  item,
+  itemIndicator,
+  arrow,
+  separator,
+  scrollButton,
+};

package/src/components/Select/Select.tsx

@@ -5,8 +5,7 @@
 import * as SelectPrimitive from '@radix-ui/react-select';
 import React, { forwardRef } from 'react';
 
-import { useElevationContext, useThemeContext } from '../../hooks';
-import { useSafeCollisionPadding } from '../../hooks/useSafeCollisionPadding';
+import { useSafeCollisionPadding, useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 import { Button, type ButtonProps } from '../Button';
 import { Icon } from '../Icon';
@@ -34,12 +33,12 @@ const SelectPortal = SelectPrimitive.Portal;
 type SelectTriggerButtonProps = Omit<ButtonProps, 'children'> & Pick<SelectValueProps, 'placeholder' | 'children'>;
 
 const SelectTriggerButton = forwardRef<HTMLButtonElement, SelectTriggerButtonProps>(
-  ({ children, placeholder, ...props }, forwardedRef) => {
+  ({ children, placeholder, classNames, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
     return (
       <SelectPrimitive.Trigger asChild ref={forwardedRef}>
-        <Button {...props}>
+        <Button {...props} classNames={tx('select.triggerButton', {}, classNames)}>
           <SelectPrimitive.Value placeholder={placeholder}>{children}</SelectPrimitive.Value>
-          <span className='w-1 flex-1' />
           <SelectPrimitive.Icon asChild>
             <Icon size={3} icon='ph--caret-down--bold' />
           </SelectPrimitive.Icon>
@@ -49,6 +48,8 @@ const SelectTriggerButton = forwardRef<HTMLButtonElement, SelectTriggerButtonPro
   },
 );
 
+SelectTriggerButton.displayName = 'Select.TriggerButton';
+
 type SelectContentProps = ThemedClassName<SelectPrimitive.SelectContentProps>;
 
 const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(
@@ -71,6 +72,8 @@ const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(
   },
 );
 
+SelectContent.displayName = 'Select.Content';
+
 type SelectScrollUpButtonProps = ThemedClassName<SelectPrimitive.SelectScrollUpButtonProps>;
 
 const SelectScrollUpButton = forwardRef<HTMLDivElement, SelectScrollUpButtonProps>(
@@ -88,6 +91,8 @@ const SelectScrollUpButton = forwardRef<HTMLDivElement, SelectScrollUpButtonProp
   },
 );
 
+SelectScrollUpButton.displayName = 'Select.ScrollUpButton';
+
 type SelectScrollDownButtonProps = ThemedClassName<SelectPrimitive.SelectScrollDownButtonProps>;
 
 const SelectScrollDownButton = forwardRef<HTMLDivElement, SelectScrollDownButtonProps>(
@@ -105,6 +110,8 @@ const SelectScrollDownButton = forwardRef<HTMLDivElement, SelectScrollDownButton
   },
 );
 
+SelectScrollDownButton.displayName = 'Select.ScrollDownButton';
+
 type SelectViewportProps = ThemedClassName<SelectPrimitive.SelectViewportProps>;
 
 const SelectViewport = forwardRef<HTMLDivElement, SelectViewportProps>(
@@ -118,6 +125,8 @@ const SelectViewport = forwardRef<HTMLDivElement, SelectViewportProps>(
   },
 );
 
+SelectViewport.displayName = 'Select.Viewport';
+
 type SelectItemProps = ThemedClassName<SelectPrimitive.SelectItemProps>;
 
 const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(({ classNames, ...props }, forwardedRef) => {
@@ -125,6 +134,8 @@ const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(({ classNames, ..
   return <SelectPrimitive.Item {...props} className={tx('select.item', {}, classNames)} ref={forwardedRef} />;
 });
 
+SelectItem.displayName = 'Select.Item';
+
 type SelectItemTextProps = SelectPrimitive.SelectItemTextProps;
 
 const SelectItemText = SelectPrimitive.ItemText;
@@ -146,22 +157,23 @@ const SelectItemIndicator = forwardRef<HTMLDivElement, SelectItemIndicatorProps>
   },
 );
 
+SelectItemIndicator.displayName = 'Select.ItemIndicator';
+
 type SelectOptionProps = SelectItemProps;
 
-// TODO(burdon): Option to show icon on left/right.
 const SelectOption = forwardRef<HTMLDivElement, SelectItemProps>(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return (
     <SelectPrimitive.Item {...props} className={tx('select.item', {}, classNames)} ref={forwardedRef}>
       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-      <span className='grow w-1' />
-      {/* <SelectPrimitive.ItemIndicator className={tx('select.itemIndicator', 'option__indicator', {})}> */}
-      <Icon icon='ph--check--regular' />
-      {/* </SelectPrimitive.ItemIndicator> */}
+      <span className='grow' />
+      <Icon size={3} icon='ph--check--regular' />
     </SelectPrimitive.Item>
   );
 });
 
+SelectOption.displayName = 'Select.Option';
+
 type SelectGroupProps = SelectPrimitive.SelectGroupProps;
 
 const SelectGroup = SelectPrimitive.Group;
@@ -177,6 +189,8 @@ const SelectSeparator = forwardRef<HTMLDivElement, SelectSeparatorProps>(({ clas
   return <SelectPrimitive.Separator {...props} className={tx('select.separator', {}, classNames)} ref={forwardedRef} />;
 });
 
+SelectSeparator.displayName = 'Select.Separator';
+
 type SelectArrowProps = ThemedClassName<SelectPrimitive.SelectArrowProps>;
 
 const SelectArrow = forwardRef<SVGSVGElement, SelectArrowProps>(({ classNames, ...props }, forwardedRef) => {
@@ -184,6 +198,8 @@ const SelectArrow = forwardRef<SVGSVGElement, SelectArrowProps>(({ classNames, .
   return <SelectPrimitive.Arrow {...props} className={tx('select.arrow', {}, classNames)} ref={forwardedRef} />;
 });
 
+SelectArrow.displayName = 'Select.Arrow';
+
 export const Select = {
   Root: SelectRoot,
   Trigger: SelectTrigger,

package/src/components/Separator/Separator.theme.ts

@@ -0,0 +1,23 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import { type ComponentFunction, type Theme } from '@dxos/ui-types';
+
+export type SeparatorStyleProps = {
+  orientation?: 'horizontal' | 'vertical';
+  subdued?: boolean;
+};
+
+const root: ComponentFunction<SeparatorStyleProps> = ({ orientation, subdued }, ...etc) =>
+  mx(
+    'self-stretch',
+    orientation === 'vertical' ? 'border-e mx-1' : 'border-b my-1',
+    subdued ? 'border-subdued-separator' : 'border-separator',
+    ...etc,
+  );
+
+export const separatorTheme: Theme<SeparatorStyleProps> = {
+  root,
+};

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,8 +5,8 @@
 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';

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

@@ -7,9 +7,8 @@ import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React from 'react';
 
-import { composableProps, slottable } from '@dxos/ui-theme';
-
 import { useThemeContext } from '../../hooks';
+import { composableProps, slottable } from '../../util';
 import { ThemedClassName } from '../../util';
 
 type ScopedProps<P> = P & { __scopeSplitter?: any };
@@ -35,11 +34,9 @@ const [SplitterProvider, useSplitterContext] = createSplitterContext<SplitterCon
 
 const ROOT_NAME = 'Splitter.Root';
 
-type RootOwnProps = Partial<SplitterContextValue>;
-
-type RootProps = RootOwnProps;
+type SplitterRootProps = Partial<SplitterContextValue>;
 
-const Root = slottable<HTMLDivElement, RootOwnProps>(
+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>;
@@ -56,7 +53,7 @@ const Root = slottable<HTMLDivElement, RootOwnProps>(
   },
 );
 
-Root.displayName = ROOT_NAME;
+SplitterRoot.displayName = ROOT_NAME;
 
 //
 // Panel
@@ -64,13 +61,11 @@ Root.displayName = ROOT_NAME;
 
 const PANEL_NAME = 'Splitter.Panel';
 
-type PanelOwnProps = ThemedClassName<{
+type SplitterPanelProps = ThemedClassName<{
   position: 'top' | 'bottom';
 }>;
 
-type PanelProps = PanelOwnProps;
-
-const Panel = slottable<HTMLDivElement, PanelOwnProps>(
+const SplitterPanel = slottable<HTMLDivElement, SplitterPanelProps>(
   ({ classNames, asChild, children, position, style, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const { __scopeSplitter, ...rest } = props as ScopedProps<typeof props>;
@@ -111,17 +106,17 @@ const Panel = slottable<HTMLDivElement, PanelOwnProps>(
   },
 );
 
-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.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

@@ -4,9 +4,8 @@
 
 import React, { type ComponentPropsWithRef, forwardRef } from 'react';
 
-import { type StatusStyleProps } from '@dxos/ui-theme';
-
 import { useThemeContext } from '../../hooks';
+import { type StatusStyleProps } from '../../theme';
 import { type ThemedClassName } from '../../util';
 
 type StatusProps = ThemedClassName<

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,
+};