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

package/src/components/Tooltip/Tooltip.tsx

@@ -54,7 +54,7 @@ type TooltipContextValue = {
   open: boolean;
   stateAttribute: 'closed' | 'delayed-open' | 'instant-open';
   trigger: TooltipTriggerElement | null;
-  onTriggerChange(trigger: TooltipTriggerElement | null): void;
+  onTriggerChange(trigger: TooltipTriggerElement | null, content?: ReactNode, side?: TooltipSide): void;
   onTriggerEnter(): void;
   onTriggerLeave(): void;
   onOpen(): void;
@@ -111,15 +111,18 @@ const TooltipProvider: FC<TooltipProviderProps> = (props: TooltipScopedProps<Too
 
   const popperScope = usePopperScope(__scopeTooltip);
   const [trigger, setTrigger] = useState<HTMLButtonElement | null>(null);
-  const [content, setContent] = useState<string>('');
+  const [content, setContent] = useState<ReactNode>(null);
   const [side, setSide] = useState<TooltipSide | undefined>(undefined);
   const triggerRef = useRef<HTMLButtonElement | null>(trigger);
-  const handleTriggerChange = useCallback((nextTrigger: HTMLButtonElement | null) => {
-    setTrigger(nextTrigger);
-    triggerRef.current = nextTrigger;
-    setContent(nextTrigger?.getAttribute('data-tooltip-content') ?? '');
-    setSide((nextTrigger?.getAttribute('data-tooltip-side') as TooltipSide | null) ?? undefined);
-  }, []);
+  const handleTriggerChange = useCallback(
+    (nextTrigger: HTMLButtonElement | null, nextContent?: ReactNode, nextSide?: TooltipSide) => {
+      setTrigger(nextTrigger);
+      triggerRef.current = nextTrigger;
+      setContent(nextContent ?? null);
+      setSide(nextSide);
+    },
+    [],
+  );
   const contentId = useId();
   const openTimerRef = useRef(0);
   const wasOpenDelayedRef = useRef(false);
@@ -244,13 +247,13 @@ const TooltipVirtualTrigger = ({
 // TooltipTrigger
 //
 
-const TRIGGER_NAME = 'TooltipTrigger';
+const TRIGGER_NAME = 'Tooltip.Trigger';
 
 type TooltipTriggerElement = ComponentRef<typeof Primitive.button>;
 type PrimitiveButtonProps = ComponentPropsWithoutRef<typeof Primitive.button>;
-type TooltipTriggerProps = PrimitiveButtonProps &
+type TooltipTriggerProps = Omit<PrimitiveButtonProps, 'content'> &
   Pick<TooltipProps, 'delayDuration'> & {
-    content?: string;
+    content?: ReactNode;
     side?: TooltipSide;
     onInteract?: (event: SyntheticEvent) => void;
   };
@@ -283,8 +286,6 @@ const TooltipTrigger = forwardRef<TooltipTriggerElement, TooltipTriggerProps>(
         // commonly anchors and the anchor `type` attribute signifies MIME type.
         aria-describedby={context.open ? context.contentId : undefined}
         data-state={context.stateAttribute}
-        data-tooltip-content={content}
-        data-tooltip-side={side}
         {...triggerProps}
         ref={composedRefs}
         onPointerMove={composeEventHandlers(props.onPointerMove, (event) => {
@@ -296,7 +297,7 @@ const TooltipTrigger = forwardRef<TooltipTriggerElement, TooltipTriggerProps>(
             if (event.defaultPrevented) {
               return;
             }
-            context.onTriggerChange(ref.current);
+            context.onTriggerChange(ref.current, content, side);
             context.onTriggerEnter();
             hasPointerMoveOpenedRef.current = true;
           }
@@ -326,7 +327,7 @@ TooltipTrigger.displayName = TRIGGER_NAME;
 // TooltipPortal
 //
 
-const PORTAL_NAME = 'TooltipPortal';
+const PORTAL_NAME = 'Tooltip.Portal';
 
 type PortalContextValue = { forceMount?: true };
 const [PortalProvider, usePortalContext] = createTooltipContext<PortalContextValue>(PORTAL_NAME, {
@@ -367,7 +368,7 @@ TooltipPortal.displayName = PORTAL_NAME;
 // TooltipContent
 //
 
-const CONTENT_NAME = 'TooltipContent';
+const CONTENT_NAME = 'Tooltip.Content';
 
 type TooltipContentElement = TooltipContentImplElement;
 type TooltipContentProps = TooltipContentImplProps & {
@@ -578,7 +579,7 @@ TooltipContent.displayName = CONTENT_NAME;
 // TooltipArrow
 //
 
-const ARROW_NAME = 'TooltipArrow';
+const ARROW_NAME = 'Tooltip.Arrow';
 
 type TooltipArrowElement = ComponentRef<typeof PopperPrimitive.Arrow>;
 type PopperArrowProps = ComponentPropsWithoutRef<typeof PopperPrimitive.Arrow>;

package/src/components/Tooltip/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './Tooltip';
+export * from './tooltipContent';

package/src/components/Tooltip/tooltipContent.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { mx, surfaceShadow, surfaceZIndex } from '@dxos/ui-theme';
+import { type ComponentFunction } from '@dxos/ui-types';
+
+import { type TooltipStyleProps } from './Tooltip.theme';
+
+export const tooltipContent: ComponentFunction<TooltipStyleProps> = ({ elevation }, ...etc) =>
+  mx(
+    'inline-flex items-center p-1 max-w-64 text-sm bg-inverse-surface text-inverse-fg rounded-sm',
+    surfaceShadow({ elevation: 'positioned' }),
+    surfaceZIndex({ elevation, level: 'tooltip' }),
+    ...etc,
+  );

package/src/components/index.ts

@@ -2,15 +2,15 @@
 // Copyright 2022 DXOS.org
 //
 
-export * from './DensityProvider';
-export * from './ElevationProvider';
-export * from './ThemeProvider';
-
 export * from './Avatars';
 export * from './Breadcrumb';
 export * from './Button';
+export * from './Calendar';
 export * from './Card';
+export * from './Carousel';
 export * from './Clipboard';
+export * from './Column';
+export * from './DatePicker';
 export * from './Dialog';
 export * from './ErrorFallback';
 export * from './Focus';
@@ -20,16 +20,18 @@ export * from './Input';
 export * from './Link';
 export * from './List';
 export * from './Main';
+export * from './MediaPlayer';
 export * from './Menu';
 export * from './Message';
+export * from './Panel';
 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 './Status';
 export * from './Tag';
 export * from './Toast';
 export * from './Toolbar';

package/src/exemplars/generics.stories.tsx

@@ -5,9 +5,8 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { slottable } from '@dxos/ui-theme';
-
 import { withTheme } from '../testing';
+import { slottable } from '../util';
 
 /**
  * Generic component pattern using the slottable factory.

package/src/exemplars/slot.stories.tsx

@@ -7,9 +7,10 @@ import { Slot } from '@radix-ui/react-slot';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { PropsWithChildren } from 'react';
 
-import { composable, composableProps, mx, slottable } from '@dxos/ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { withTheme } from '../testing';
+import { composable, composableProps, slottable } from '../util';
 import { ThemedClassName } from '../util';
 
 /**
@@ -59,9 +60,7 @@ const Leaf = composable<HTMLButtonElement>(({ children, ...props }, forwardedRef
 
 /** This isn't a valid child for a `slottable` component. */
 const Simple = ({ children, classNames }: ThemedClassName<PropsWithChildren>) => (
-  <div role='none' className={mx(classNames)}>
-    {children}
-  </div>
+  <div className={mx(classNames)}>{children}</div>
 );
 
 const meta = {
@@ -99,7 +98,7 @@ export const Inner: Story = {
     <Outer asChild role='article' classNames='border-orange-500'>
       <Middle asChild>
         <Leaf>
-          <div role='none'>Leaf</div>
+          <div>Leaf</div>
         </Leaf>
       </Middle>
     </Outer>
@@ -108,7 +107,7 @@ export const Inner: Story = {
 
 export const Error: Story = {
   render: () => (
-    <Outer asChild role='none' classNames='p-2 border border-green-500 rounded'>
+    <Outer asChild classNames='p-2 border border-green-500 rounded'>
       <Middle asChild>
         <Simple>Simple</Simple>
       </Middle>

package/src/exemplars/virtualizer.stories.tsx

@@ -66,7 +66,6 @@ export const Default = {
           <ScrollArea.Root orientation='vertical' centered>
             <ScrollArea.Viewport classNames='p-2' ref={setViewport}>
               <div
-                role='none'
                 style={{
                   position: 'relative',
                   height: virtualizer.getTotalSize(),

package/src/hooks/useDensityContext.ts

@@ -6,7 +6,7 @@ import { useContext } from 'react';
 
 import { type Density } from '@dxos/ui-types';
 
-import { DensityContext } from '../components';
+import { DensityContext } from '../primitives';
 
 export const useDensityContext = (densityProp?: Density): Density | undefined => {
   const { density } = useContext(DensityContext);

package/src/hooks/useElevationContext.ts

@@ -6,7 +6,7 @@ import { useContext } from 'react';
 
 import { type Elevation } from '@dxos/ui-types';
 
-import { ElevationContext } from '../components';
+import { ElevationContext } from '../primitives';
 
 export const useElevationContext = (propsElevation?: Elevation) => {
   const { elevation } = useContext(ElevationContext);

package/src/hooks/useThemeContext.ts

@@ -6,6 +6,6 @@ import { useContext } from 'react';
 
 import { raise } from '@dxos/debug';
 
-import { ThemeContext } from '../components';
+import { ThemeContext } from '../primitives';
 
 export const useThemeContext = () => useContext(ThemeContext) ?? raise(new Error('Missing ThemeContext'));

package/src/hooks/useTranslationsContext.ts

@@ -4,6 +4,6 @@
 
 import { useContext } from 'react';
 
-import { TranslationsContext } from '../components/ThemeProvider/TranslationsProvider';
+import { TranslationsContext } from '../primitives';
 
 export const useTranslationsContext = () => useContext(TranslationsContext);

package/src/index.ts

@@ -11,4 +11,5 @@ export * from '@dxos/ui-types';
 export * from './components';
 export * from './hooks';
 export * from './primitives';
+export * from './theme';
 export * from './util';

package/src/playground/Custom.stories.tsx

@@ -12,37 +12,30 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
   return (
     <Tooltip.Provider>
       <div className='flex flex-col gap-6'>
-        {/* Large */}
+        {/* Large (40px) */}
         <div className='grid grid-cols-3 gap-4'>
           <div className='flex justify-center'>
-            <Button {...args} density='coarse'>
+            <Button {...args} density='lg'>
               {children}
             </Button>
           </div>
           <div className='flex justify-center'>
-            <IconButton {...args} label='Test' icon='ph--circle--regular' density='coarse' />
+            <IconButton {...args} label='Test' icon='ph--circle--regular' density='lg' />
           </div>
           <div className='flex justify-center'>
-            <IconButton
-              {...args}
-              label='Test'
-              icon='ph--circle--regular'
-              iconOnly
-              density='coarse'
-              classNames='px-1.5'
-            />
+            <IconButton {...args} label='Test' icon='ph--circle--regular' iconOnly density='lg' classNames='px-1.5' />
           </div>
         </div>
 
-        {/* Medium */}
+        {/* Medium (32px, default) */}
         <div className='grid grid-cols-3 gap-4'>
           <div className='flex justify-center'>
-            <Button {...args} density='fine'>
+            <Button {...args} density='md'>
               {children}
             </Button>
           </div>
           <div className='flex justify-center'>
-            <IconButton {...args} label='Test' icon='ph--circle--regular' density='fine' classNames='px-2' />
+            <IconButton {...args} label='Test' icon='ph--circle--regular' density='md' classNames='px-2' />
           </div>
           <div className='flex justify-center'>
             <IconButton
@@ -50,37 +43,24 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
               label='Test'
               icon='ph--circle--regular'
               iconOnly
-              density='fine'
+              density='md'
               classNames='py-1 px-1.5'
             />
           </div>
         </div>
 
-        {/* Small */}
+        {/* Small (28px) */}
         <div className='grid grid-cols-3 gap-4'>
           <div className='flex justify-center'>
-            <Button {...args} density='fine' classNames={'!h-[24px] !text-[14px] p-0 px-1.5 min-h-0'}>
+            <Button {...args} density='sm'>
               {children}
             </Button>
           </div>
           <div className='flex justify-center'>
-            <IconButton
-              {...args}
-              label='Test'
-              icon='ph--circle--regular'
-              density='fine'
-              classNames={'!h-[24px] !text-[14px] p-1 min-h-0 gap-0.5'}
-            />
+            <IconButton {...args} label='Test' icon='ph--circle--regular' density='sm' />
           </div>
           <div className='flex justify-center'>
-            <IconButton
-              {...args}
-              label='Test'
-              icon='ph--circle--regular'
-              iconOnly
-              density='fine'
-              classNames={'!h-[24px] !text-[14px] p-1 min-h-0'}
-            />
+            <IconButton {...args} label='Test' icon='ph--circle--regular' iconOnly density='sm' />
           </div>
         </div>
 

package/src/primitives/Container/Container.tsx

@@ -6,7 +6,9 @@ import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React from 'react';
 
-import { composableProps, mx, slottable } from '@dxos/ui-theme';
+import { mx } from '@dxos/ui-theme';
+
+import { composableProps, slottable } from '../../util';
 
 export const Container = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps<HTMLDivElement>(props);

package/src/{components → primitives}/DensityProvider/DensityProvider.tsx

@@ -14,7 +14,7 @@ export type DensityProviderProps = PropsWithChildren<{
   density?: Density;
 }>;
 
-export const DensityContext = createContext<DensityContextValue>({ density: 'fine' });
+export const DensityContext = createContext<DensityContextValue>({ density: 'md' });
 
 export const DensityProvider = ({ density, children }: DensityProviderProps) => (
   <DensityContext.Provider value={{ density }}>{children}</DensityContext.Provider>

package/src/primitives/Flex/Flex.tsx

@@ -6,7 +6,9 @@ import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React from 'react';
 
-import { composableProps, mx, slottable } from '@dxos/ui-theme';
+import { mx } from '@dxos/ui-theme';
+
+import { composableProps, slottable } from '../../util';
 
 export type FlexProps = { column?: boolean; grow?: boolean };
 

package/src/primitives/Grid/Grid.tsx

@@ -4,7 +4,9 @@
 
 import React from 'react';
 
-import { composable, composableProps, mx } from '@dxos/ui-theme';
+import { mx } from '@dxos/ui-theme';
+
+import { composable, composableProps } from '../../util';
 
 export type GridProps = { cols?: number; rows?: number; grow?: boolean };
 

package/src/{components → primitives}/ThemeProvider/ThemeProvider.stories.tsx

@@ -10,7 +10,7 @@ import { withLayout, withTheme } from '../../testing';
 import { ThemeProvider } from './ThemeProvider';
 
 const meta = {
-  title: 'ui/react-ui-core/components/ThemeProvider',
+  title: 'ui/react-ui-core/primitives/ThemeProvider',
   component: ThemeProvider,
   render: () => {
     const { themeMode, platform } = useThemeContext();

package/src/{components → primitives}/ThemeProvider/ThemeProvider.tsx

@@ -41,7 +41,7 @@ export const ThemeProvider = ({
   appNs,
   tx = (_path, _styleProps, ..._options) => undefined,
   themeMode = 'dark',
-  rootDensity = 'fine',
+  rootDensity = 'md',
   noCache,
   platform,
 }: ThemeProviderProps) => {

package/src/{components → primitives}/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';
+export { TranslationsContext, useTranslation } from './TranslationsProvider';

package/src/primitives/index.ts

@@ -2,8 +2,10 @@
 // Copyright 2026 DXOS.org
 //
 
-export * from './Column';
+export * from './DensityProvider';
+export * from './ElevationProvider';
+export * from './ThemeProvider';
+
 export * from './Container';
 export * from './Flex';
 export * from './Grid';
-export * from './Panel';

package/src/testing/decorators/withLayout.tsx

@@ -39,7 +39,7 @@ export const withLayout =
       const { layout = 'default', classNames, scroll } = props;
       const Container = layouts[layout] ?? layouts.fullscreen;
       return (
-        <Container classNames={mx(classNames, scroll ? 'overflow-y-auto' : 'overflow-hidden')}>
+        <Container classNames={mx(scroll ? 'overflow-y-auto' : 'overflow-hidden', classNames)}>
           <MemoizedStory />
         </Container>
       );
@@ -47,31 +47,21 @@ export const withLayout =
   };
 
 const layouts: Record<ContainerType, FC<ContainerProps>> = {
-  default: ({ classNames, children }: ContainerProps) => (
-    <div role='none' className={mx('p-4', classNames)}>
-      {children}
-    </div>
-  ),
+  default: ({ classNames, children }: ContainerProps) => <div className={mx('p-4', classNames)}>{children}</div>,
 
   fullscreen: ({ classNames, children }: ContainerProps) => (
-    <div role='none' className={mx('fixed inset-0 flex overflow-hidden bg-black', classNames)}>
-      {children}
-    </div>
+    <div className={mx('fixed inset-0 flex overflow-hidden bg-black', classNames)}>{children}</div>
   ),
 
   centered: ({ classNames, children }: ContainerProps) => (
-    <div role='none' className={mx('fixed inset-0 grid overflow-hidden place-items-center bg-black')}>
-      <div role='none' className={mx('flex flex-col bg-base-surface', classNames)}>
-        {children}
-      </div>
+    <div className={mx('fixed inset-0 grid overflow-hidden place-items-center bg-black')}>
+      <div className={mx('flex flex-col bg-base-surface', classNames)}>{children}</div>
     </div>
   ),
 
   column: ({ classNames, children }: ContainerProps) => (
-    <div role='none' className='fixed inset-0 flex overflow-hidden justify-center bg-black'>
-      <div role='none' className={mx('flex flex-col w-[40rem] bg-base-surface', classNames)}>
-        {children}
-      </div>
+    <div className='fixed inset-0 flex overflow-hidden justify-center bg-black'>
+      <div className={mx('flex flex-col w-[40rem] bg-base-surface', classNames)}>{children}</div>
     </div>
   ),
 };

package/src/testing/decorators/withLayoutVariants.tsx

@@ -42,7 +42,7 @@ export const withLayoutVariants = ({
     { elevation: 'positioned', surface: 'bg-card-surface' },
     { elevation: 'base', surface: 'bg-base-surface' },
   ],
-  densities = ['coarse'],
+  densities = ['md'],
 }: Config = {}): Decorator => {
   return (Story) => <Panel Story={Story} elevations={elevations} densities={densities} />;
 };

package/src/testing/decorators/withTheme.tsx

@@ -4,14 +4,20 @@
 
 import { type Decorator } from '@storybook/react';
 import React from 'react';
+import { I18nProvider } from 'react-aria-components';
 
-import { defaultTx } from '@dxos/ui-theme';
 import { type ThemeMode } from '@dxos/ui-types';
 
-import { type ThemeContextValue, ThemeProvider, Tooltip } from '../../components';
+import { Tooltip } from '../../components';
+import { type ThemeContextValue, ThemeProvider } from '../../primitives';
+import { defaultTx } from '../../theme';
 
 /**
  * Adds theme decorator.
+ *
+ * `I18nProvider` is included so react-aria-components-backed widgets (DateField, Calendar, …)
+ * have a guaranteed locale in headless test environments where `navigator.language` may be
+ * empty.
  */
 export const withTheme =
   ({ tx = defaultTx, noCache, platform }: Partial<ThemeContextValue> = {}): Decorator =>
@@ -22,16 +28,18 @@ export const withTheme =
     } = context;
 
     return (
-      <ThemeProvider
-        tx={tx}
-        themeMode={theme as ThemeMode}
-        resourceExtensions={translations}
-        noCache={noCache}
-        platform={platform}
-      >
-        <Tooltip.Provider>
-          <Story />
-        </Tooltip.Provider>
-      </ThemeProvider>
+      <I18nProvider locale='en-US'>
+        <ThemeProvider
+          tx={tx}
+          themeMode={(theme as ThemeMode) || 'dark'}
+          resourceExtensions={translations}
+          noCache={noCache}
+          platform={platform}
+        >
+          <Tooltip.Provider>
+            <Story />
+          </Tooltip.Provider>
+        </ThemeProvider>
+      </I18nProvider>
     );
   };

package/src/theme/bindTheme.ts

@@ -0,0 +1,13 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ClassNameArray, type ComponentFunction, type Theme, type ThemeFunction } from '@dxos/ui-types';
+import { getDeep } from '@dxos/util';
+
+export const bindTheme = <P extends Record<string, any>>(theme: Theme<Record<string, any>>): ThemeFunction<P> => {
+  return (path: string, styleProps?: P, ...etc: ClassNameArray) => {
+    const result = getDeep<Theme<P> | ComponentFunction<P>>(theme, path.split('.'));
+    return typeof result === 'function' ? result(styleProps ?? ({} as P), ...etc) : undefined;
+  };
+};

package/src/theme/defaultTheme.ts

@@ -0,0 +1,83 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Theme } from '@dxos/ui-types';
+
+import { avatarTheme } from '../components/Avatars/Avatar.theme';
+import { breadcrumbTheme } from '../components/Breadcrumb/Breadcrumb.theme';
+import { buttonTheme } from '../components/Button/Button.theme';
+import { iconButtonTheme } from '../components/Button/IconButton.theme';
+import { calendarTheme } from '../components/Calendar/Calendar.theme';
+import { cardTheme } from '../components/Card/Card.theme';
+import { columnTheme } from '../components/Column/Column.theme';
+import { datePickerTheme } from '../components/DatePicker/DatePicker.theme';
+import { dialogTheme } from '../components/Dialog/Dialog.theme';
+import { focusTheme } from '../components/Focus/Focus.theme';
+import { iconTheme } from '../components/Icon/Icon.theme';
+import { inputTheme } from '../components/Input/Input.theme';
+import { linkTheme } from '../components/Link/Link.theme';
+import { listTheme } from '../components/List/List.theme';
+import { treegridTheme } from '../components/List/Treegrid.theme';
+import { mainTheme } from '../components/Main/Main.theme';
+import { menuTheme } from '../components/Menu/Menu.theme';
+import { messageTheme } from '../components/Message/Message.theme';
+import { panelTheme } from '../components/Panel/Panel.theme';
+import { popoverTheme } from '../components/Popover/Popover.theme';
+import { scrollAreaTheme } from '../components/ScrollArea/ScrollArea.theme';
+import { selectTheme } from '../components/Select/Select.theme';
+import { separatorTheme } from '../components/Separator/Separator.theme';
+import { skeletonTheme } from '../components/Skeleton/Skeleton.theme';
+import { splitterTheme } from '../components/Splitter/Splitter.theme';
+import { statusTheme } from '../components/Status/Status.theme';
+import { tagTheme } from '../components/Tag/Tag.theme';
+import { toastTheme } from '../components/Toast/Toast.theme';
+import { toolbarTheme } from '../components/Toolbar/Toolbar.theme';
+import { tooltipTheme } from '../components/Tooltip/Tooltip.theme';
+import { bindTheme } from './bindTheme';
+
+export const defaultTheme: Theme<Record<string, any>> = {
+  themeName: () => 'default',
+
+  //
+  // Primitives
+  //
+
+  column: columnTheme,
+  panel: panelTheme,
+
+  //
+  // Components
+  //
+
+  avatar: avatarTheme,
+  breadcrumb: breadcrumbTheme,
+  button: buttonTheme,
+  calendar: calendarTheme,
+  card: cardTheme,
+  datePicker: datePickerTheme,
+  dialog: dialogTheme,
+  focus: focusTheme,
+  icon: iconTheme,
+  iconButton: iconButtonTheme,
+  input: inputTheme,
+  link: linkTheme,
+  list: listTheme,
+  main: mainTheme,
+  message: messageTheme,
+  menu: menuTheme,
+  popover: popoverTheme,
+  scrollArea: scrollAreaTheme,
+  select: selectTheme,
+  separator: separatorTheme,
+  skeleton: skeletonTheme,
+  splitter: splitterTheme,
+  status: statusTheme,
+  tag: tagTheme,
+  toast: toastTheme,
+  toolbar: toolbarTheme,
+  tooltip: tooltipTheme,
+  treegrid: treegridTheme,
+};
+
+export const defaultTx = bindTheme(defaultTheme);