@dxos/react-ui 0.9.1-main.c7dcc2e112 → 0.9.1-staging.ee54ba693a

package/src/components/Input/Input.stories.tsx

@@ -33,7 +33,7 @@ type VariantMap = {
 
 type Variant = { [K in keyof VariantMap]: { type: K } & VariantMap[K] }[keyof VariantMap];
 
-type DefaultStoryProps = Partial<{
+type StoryArgs = Partial<{
   kind: keyof VariantMap;
   label: string;
   labelVisuallyHidden: boolean;
@@ -52,7 +52,7 @@ const DefaultStory = ({
   validationValence,
   validationMessage,
   ...props
-}: DefaultStoryProps) => {
+}: StoryArgs) => {
   return (
     <Input.Root {...{ validationValence }}>
       <Input.Label srOnly={labelVisuallyHidden}>{label}</Input.Label>
@@ -63,8 +63,16 @@ const DefaultStory = ({
       {kind === 'time' && <Input.Time {...props} />}
       {kind === 'date' && <Input.Date {...props} />}
       {kind === 'datetime' && <Input.DateTime {...props} />}
-      {kind === 'checkbox' && <Input.Checkbox {...props} />}
-      {kind === 'switch' && <Input.Switch {...props} />}
+      {kind === 'checkbox' && (
+        <Input.Block>
+          <Input.Checkbox {...props} />
+        </Input.Block>
+      )}
+      {kind === 'switch' && (
+        <Input.Block>
+          <Input.Switch {...props} />
+        </Input.Block>
+      )}
 
       <Input.DescriptionAndValidation srOnly={descriptionVisuallyHidden}>
         {validationMessage && <Input.Validation classNames='block'>{validationMessage}</Input.Validation>}
@@ -83,7 +91,7 @@ const meta = {
 
 export default meta;
 
-type Story = StoryObj<DefaultStoryProps & Variant>;
+type Story = StoryObj<StoryArgs & Variant>;
 
 export const Density: Story = {
   render: () => (

package/src/components/Input/Input.theme.ts

@@ -3,7 +3,7 @@
 //
 
 import { densityDimensions, staticDisabled } from '@dxos/ui-theme';
-import { getSize, getHeight, getWidth, mx, snapSize, sizeValue, textValence } from '@dxos/ui-theme';
+import { getSize, mx, sizeValue, snapSize, textValence } from '@dxos/ui-theme';
 import {
   type ComponentFragment,
   type ComponentFunction,
@@ -13,8 +13,6 @@ import {
   type Size,
 } from '@dxos/ui-types';
 
-import { inputTextLabel } from './constants';
-
 export type InputStyleProps = Partial<{
   variant: 'default' | 'subdued' | 'static';
   density: Density;
@@ -32,16 +30,10 @@ export type InputMetaStyleProps = Partial<{
 }>;
 
 const textInputSurfaceFocus =
-  'transition-colors bg-input-surface focus:bg-focus-surface border border-separator focus:border-separator';
+  'transition-colors bg-input-surface focus:bg-focus-surface border border-input-separator focus:border-separator';
 
 const textInputSurfaceHover = 'hover:bg-focus-surface';
 
-const booleanInputSurface =
-  'shadow-inner transition-colors bg-un-accent aria-checked:bg-accent-bg aria-[checked=mixed]:bg-accent-bg';
-
-const booleanInputSurfaceHover =
-  'hover:bg-un-accent-hover hover:aria-checked:bg-accent-bg-hover hover:aria-[checked=mixed]:bg-accent-bg-hover';
-
 // TODO(burdon): Replace with semantic tokens.
 const valence = (valence?: MessageValence) => {
   switch (valence) {
@@ -97,32 +89,15 @@ const input: ComponentFunction<InputStyleProps> = (props, ...etc) =>
 
 const textArea: ComponentFunction<InputStyleProps> = (props, ...etc) => input(props, ...etc);
 
-const checkbox: ComponentFunction<InputStyleProps> = ({ size = 5 }, ...etc) =>
+const checkbox: ComponentFunction<InputStyleProps> = ({ size = 4 }, ...etc) =>
   mx('dx-checkbox dx-focus-ring', getSize(size), ...etc);
 
-const checkboxIndicator: ComponentFunction<InputStyleProps> = ({ size = 5, checked }, ...etc) =>
+const checkboxIndicator: ComponentFunction<InputStyleProps> = ({ size = 4, checked }, ...etc) =>
   mx(getSize(snapSize(sizeValue(size) * 0.65, 4)), !checked && 'invisible', ...etc);
 
-const switchRoot: ComponentFunction<InputStyleProps> = ({ size = 5, disabled }, ...etc) =>
-  mx(
-    getHeight(size),
-    getWidth(snapSize(sizeValue(size) * 1.75, 9)),
-    booleanInputSurface,
-    !disabled && booleanInputSurfaceHover,
-    // TODO(burdon): Added m-1 margin to make 40px width to align with 40px icon button.
-    'cursor-pointer shrink-0 rounded-full px-1 mx-1 relative',
-    'dx-focus-ring',
-    ...etc,
-  );
-
-const switchThumb: ComponentFunction<InputStyleProps> = ({ size = 5 }, ...etc) =>
-  mx(
-    getSize(size === 'px' ? 'px' : ((size - 2) as Size)),
-    'block bg-white rounded-full transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[100%]',
-    ...etc,
-  );
+const switch_: ComponentFunction<InputStyleProps> = (_props, ...etc) => mx('dx-checkbox--switch dx-focus-ring', ...etc);
 
-const withSegmentsInput: ComponentFunction<InputStyleProps> = (props, ...etc) =>
+const pin: ComponentFunction<InputStyleProps> = (props, ...etc) =>
   mx(
     'font-mono selection:bg-transparent mx-auto',
     props.density === 'lg'
@@ -138,7 +113,7 @@ const withSegmentsInput: ComponentFunction<InputStyleProps> = (props, ...etc) =>
 
 const segment: ComponentFunction<InputStyleProps> = (props, ...etc) =>
   mx(
-    'flex items-center justify-center font-mono',
+    'flex items-center justify-center tabular-nums',
     props.density === 'lg'
       ? 'size-12 rounded-xs'
       : props.density === 'sm'
@@ -155,7 +130,7 @@ const segment: ComponentFunction<InputStyleProps> = (props, ...etc) =>
   );
 
 const label: ComponentFunction<InputMetaStyleProps> = (props, ...etc) =>
-  mx('block', inputTextLabel, props.srOnly && 'sr-only', ...etc);
+  mx('block text-sm text-description', props.srOnly && 'sr-only', ...etc);
 
 const description: ComponentFunction<InputMetaStyleProps> = (props, ...etc) =>
   mx('text-description', props.srOnly && 'sr-only', ...etc);
@@ -164,7 +139,7 @@ const descriptionAndValidation: ComponentFunction<InputMetaStyleProps> = (props,
   mx('leading-none my-1.5', props.srOnly && 'sr-only', ...etc);
 
 const validation: ComponentFunction<InputMetaStyleProps> = (props, ...etc) =>
-  mx(inputTextLabel, props.srOnly ? 'sr-only' : textValence(props.validationValence), ...etc);
+  mx('text-sm text-description', props.srOnly ? 'sr-only' : textValence(props.validationValence), ...etc);
 
 const triggerIcon: ComponentFunction<{}> = (_p, ...etc) =>
   mx(
@@ -174,17 +149,20 @@ const triggerIcon: ComponentFunction<{}> = (_p, ...etc) =>
     ...etc,
   );
 
+const block: ComponentFunction<InputStyleProps> = (props, ...etc) =>
+  mx('grid place-items-center w-[var(--dx-rail-item)] h-[var(--dx-rail-item)]', ...etc);
+
 export const inputTheme = {
   input,
   textArea,
-  inputWithSegments: withSegmentsInput,
+  pin,
   segment,
-  checkbox,
-  checkboxIndicator,
   label,
   description,
-  switch: switchRoot,
-  switchThumb,
+  checkbox,
+  checkboxIndicator,
+  switch: switch_,
+  block,
   validation,
   descriptionAndValidation,
   triggerIcon,

package/src/components/Input/Input.tsx

@@ -8,6 +8,7 @@ import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import React, {
   type ComponentPropsWithRef,
   type ForwardRefExoticComponent,
+  PropsWithChildren,
   forwardRef,
   useCallback,
   useEffect,
@@ -37,7 +38,6 @@ import {
   type ValidationProps as ValidationPrimitiveProps,
   useInputContext,
 } from '@dxos/react-input';
-import { mx } from '@dxos/ui-theme';
 import { type Density, type Elevation, type Size } from '@dxos/ui-types';
 
 import { translationKey } from '#translations';
@@ -262,7 +262,7 @@ const PinInput = forwardRef<HTMLInputElement, PinInputProps>(
           ...props,
           ...(props.autoFocus && !hasIosKeyboard && { autoFocus: true }),
         }}
-        className={tx('input.inputWithSegments', { disabled: props.disabled }, classNames) || ''}
+        className={tx('input.pin', { disabled: props.disabled }, classNames) || ''}
         segmentClassName={tx('input.segment', { disabled: props.disabled, density, elevation }) || ''}
         ref={forwardedRef}
       />
@@ -400,7 +400,7 @@ const Checkbox: ForwardRefExoticComponent<CheckboxProps> = forwardRef<
             'aria-invalid': 'true' as const,
             'aria-errormessage': errorMessageId,
           }),
-          className: tx('input.checkbox', { size }, 'shrink-0', classNames),
+          'className': tx('input.checkbox', { size }, 'shrink-0', classNames),
         }}
         ref={forwardedRef}
       >
@@ -435,6 +435,7 @@ const Switch = forwardRef<HTMLInputElement, InputScopedProps<SwitchProps>>(
     },
     forwardedRef,
   ) => {
+    const { tx } = useThemeContext();
     const [checked, onCheckedChange] = useControllableState({
       prop: propsChecked,
       defaultProp: propsDefaultChecked ?? false,
@@ -446,7 +447,7 @@ const Switch = forwardRef<HTMLInputElement, InputScopedProps<SwitchProps>>(
     return (
       <input
         type='checkbox'
-        className={mx('dx-checkbox--switch dx-focus-ring', classNames)}
+        className={tx('input.switch', { disabled: props.disabled }, classNames)}
         checked={checked}
         onChange={(event) => {
           onCheckedChange(event.target.checked);
@@ -466,6 +467,21 @@ const Switch = forwardRef<HTMLInputElement, InputScopedProps<SwitchProps>>(
 
 Switch.displayName = 'Input.Switch';
 
+//
+// Wrapper for Switch/Checkbox to center them within the input row height.
+//
+
+const Block = forwardRef<HTMLDivElement, PropsWithChildren>(({ children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <div {...props} className={tx('input.block')} ref={forwardedRef}>
+      {children}
+    </div>
+  );
+});
+
+Block.displayName = 'Input.Block';
+
 //
 // Date / Time / DateTime — segmented react-aria-components fields with locale-aware ordering,
 // spinbutton semantics, and immutable separators. ISO string API:
@@ -499,6 +515,7 @@ export const Input = {
   DateTime,
   Checkbox,
   Switch,
+  Block,
   Label,
   Description,
   Validation,
@@ -508,19 +525,19 @@ export const Input = {
 export { useInputTrigger };
 
 export type {
-  InputVariant,
+  CheckboxProps,
+  DateInputProps,
+  DateTimeInputProps,
+  DescriptionAndValidationProps,
+  DescriptionProps,
   InputRootProps,
   InputSharedProps,
+  InputVariant,
+  LabelProps,
   PinInputProps,
-  TextInputProps,
+  SwitchProps,
   TextAreaProps,
+  TextInputProps,
   TimeProps,
-  DateInputProps,
-  DateTimeInputProps,
-  CheckboxProps,
-  SwitchProps,
-  LabelProps,
-  DescriptionProps,
   ValidationProps,
-  DescriptionAndValidationProps,
 };

package/src/components/Input/SegmentedInput.tsx

@@ -4,7 +4,7 @@
 
 import { CalendarDate, CalendarDateTime, Time, parseDate, parseDateTime, parseTime } from '@internationalized/date';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, { forwardRef, useCallback, useState } from 'react';
+import React, { type ComponentProps, ReactNode, forwardRef, useCallback, useState } from 'react';
 import {
   DateField,
   type DateFieldProps,
@@ -53,7 +53,9 @@ const toCalendarDate = (date: Date) => new CalendarDate(date.getFullYear(), date
 // Theming.
 //
 
-const fieldClass = 'inline-flex items-center gap-px font-mono tabular-nums focus-within:bg-attention-surface';
+// TODO(burdon): Move to theme.
+const fieldClassNames =
+  'inline-flex flex-nowrap items-center gap-px whitespace-nowrap tabular-nums focus-within:bg-attention-surface';
 
 // React Aria sets `caret-color: transparent` inline on each segment because spinbuttons replace
 // the whole value rather than inserting at a caret position. We override with `!important` so a
@@ -63,16 +65,18 @@ const fieldClass = 'inline-flex items-center gap-px font-mono tabular-nums focus
 // width regardless of value (so e.g. month `1` and `12` occupy the same space). `text-align: end`
 // right-aligns the digits within that fixed width.
 // TODO(burdon): Move to Input.theme.ts
-const segmentClass =
-  'rounded-xs outline-none text-end [caret-color:currentColor]! ' +
+const segmentClassNames =
+  'shrink-0 rounded-xs outline-none text-end [caret-color:currentColor]! ' +
   'data-[type=year]:min-w-[4ch] ' +
-  'data-[type=month]:min-w-[2ch] data-[type=day]:min-w-[2ch] ' +
-  'data-[type=hour]:min-w-[2ch] data-[type=minute]:min-w-[2ch] ' +
+  'data-[type=month]:min-w-[1ch] data-[type=day]:min-w-[1ch] ' +
+  'data-[type=hour]:min-w-[1ch] data-[type=minute]:min-w-[1ch] ' +
   'data-[placeholder]:text-subdued data-[type=literal]:text-subdued ' +
   'data-[focused]:bg-accent-bg data-[focused]:text-accent-fg ' +
   'data-[invalid]:text-rose-500 ' +
   'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50';
 
+const timeSegmentClassNames = `${segmentClassNames} data-[type=dayPeriod]:text-xs data-[type=dayPeriod]:text-description`;
+
 // Match bidi format characters (LRI/RLI/PDI/LRE/RLE/PDF/LRO/RLO) that React Aria inserts to
 // isolate locale-formatted portions. These are invisible glyphs but the browser still gives
 // them ~4px of width, which pushes the first visible character of time-only fields out of
@@ -80,18 +84,22 @@ const segmentClass =
 // collapse them to zero width.
 const BIDI_FORMAT_RE = /^[‪-‮⁦-⁩]+$/;
 
+// The segment object react-aria passes to the `DateInput` render function and expects back on
+// `DateSegment` — derived from the component so no extra dependency on `react-stately` is needed.
+type DateSegmentData = ComponentProps<typeof DateSegment>['segment'];
+
 /**
  * Render a single DateSegment. Locale-specific literals between date and time portions
  * (e.g. en-US's `", "`) become a plain space; bidi format markers are kept but rendered
  * zero-width so the visible content lines up at the field's left edge.
  */
-const renderSegment = (segment: { type: string; text: string }) => {
+const renderSegment = (segment: DateSegmentData, classNames = segmentClassNames) => {
   if (segment.type === 'literal') {
     if (BIDI_FORMAT_RE.test(segment.text)) {
       // Render as a fixed-width spacer (between date and time portions of a datetime field),
       // but hide when at the field's edges — opening LRI is the first child of a time-only
       // field and would push everything right; closing PDI is the last child everywhere.
-      return <span aria-hidden className='select-none w-[2ch] first:hidden last:hidden' />;
+      return <span aria-hidden className='select-none w-[1ch] first:hidden last:hidden' />;
     }
     if (segment.text.includes(',')) {
       return (
@@ -101,7 +109,8 @@ const renderSegment = (segment: { type: string; text: string }) => {
       );
     }
   }
-  return <DateSegment segment={segment as any} className={segmentClass} />;
+
+  return <DateSegment segment={segment} className={classNames} />;
 };
 
 //
@@ -110,12 +119,12 @@ const renderSegment = (segment: { type: string; text: string }) => {
 
 type SegmentedInputBaseProps = InputSharedProps &
   ThemedClassName<{
-    id?: string;
-    value?: string;
-    defaultValue?: string;
-    onValueChange?: (value: string) => void;
-    disabled?: boolean;
-    autoFocus?: boolean;
+    'id'?: string;
+    'value'?: string;
+    'defaultValue'?: string;
+    'onValueChange'?: (value: string) => void;
+    'disabled'?: boolean;
+    'autoFocus'?: boolean;
     'aria-label'?: string;
   }>;
 
@@ -150,19 +159,19 @@ const useFieldChrome = ({
  * `Input.Root`) calls the registered handler on press; the popover anchors to this field.
  */
 const PickerWrapper = ({
+  children,
   pickerValue,
-  onPickerChange,
   withTime,
   disabled = false,
-  children,
   calendar,
+  onPickerChange,
 }: {
+  children: ReactNode;
   pickerValue: Date | undefined;
-  onPickerChange: (next: Date | undefined) => void;
   withTime: boolean;
   disabled?: boolean;
-  children: React.ReactNode;
-  calendar: React.ReactNode;
+  calendar: ReactNode;
+  onPickerChange: (next: Date | undefined) => void;
 }) => {
   const [open, setOpen] = useState(false);
   const openPicker = useCallback(() => {
@@ -225,13 +234,13 @@ const SegmentedDate = forwardRef<HTMLDivElement, InputScopedProps<SegmentedDateP
     const parsed = tryParse(parseDate, stringValue);
 
     const fieldProps: DateFieldProps<CalendarDate> = {
-      value: parsed,
-      onChange: (next) => setStringValue(next ? formatCalendarDate(next) : ''),
-      isDisabled: disabled,
+      'value': parsed,
+      'onChange': (next) => setStringValue(next ? formatCalendarDate(next) : ''),
+      'isDisabled': disabled,
       autoFocus,
       'aria-label': ariaLabel ?? 'date',
-      granularity: 'day',
-      shouldForceLeadingZeros: true,
+      'granularity': 'day',
+      'shouldForceLeadingZeros': true,
     };
 
     const field = (
@@ -247,7 +256,7 @@ const SegmentedDate = forwardRef<HTMLDivElement, InputScopedProps<SegmentedDateP
           className={tx(
             'input.input',
             { variant, disabled, density, elevation, validationValence },
-            fieldClass,
+            fieldClassNames,
             classNames,
           )}
         >
@@ -311,14 +320,14 @@ const SegmentedTime = forwardRef<HTMLDivElement, InputScopedProps<SegmentedTimeP
     const parsed = tryParse(parseTime, stringValue);
 
     const fieldProps: TimeFieldProps<Time> = {
-      value: parsed,
-      onChange: (next) => setStringValue(next ? formatTime(next) : ''),
-      isDisabled: disabled,
+      'value': parsed,
+      'onChange': (next) => setStringValue(next ? formatTime(next) : ''),
+      'isDisabled': disabled,
       autoFocus,
       'aria-label': ariaLabel ?? 'time',
-      granularity: 'minute',
+      'granularity': 'minute',
       hourCycle,
-      shouldForceLeadingZeros: true,
+      'shouldForceLeadingZeros': true,
     };
 
     return (
@@ -334,11 +343,11 @@ const SegmentedTime = forwardRef<HTMLDivElement, InputScopedProps<SegmentedTimeP
           className={tx(
             'input.input',
             { variant, disabled, density, elevation, validationValence },
-            fieldClass,
+            fieldClassNames,
             classNames,
           )}
         >
-          {renderSegment}
+          {(segment) => renderSegment(segment, timeSegmentClassNames)}
         </DateInput>
       </TimeField>
     );
@@ -386,14 +395,14 @@ const SegmentedDateTime = forwardRef<HTMLDivElement, InputScopedProps<SegmentedD
     const parsed = tryParse(parseDateTime, stringValue);
 
     const fieldProps: DateFieldProps<CalendarDateTime> = {
-      value: parsed,
-      onChange: (next) => setStringValue(next ? formatCalendarDateTime(next) : ''),
-      isDisabled: disabled,
+      'value': parsed,
+      'onChange': (next) => setStringValue(next ? formatCalendarDateTime(next) : ''),
+      'isDisabled': disabled,
       autoFocus,
       'aria-label': ariaLabel ?? 'date-time',
-      granularity: 'minute',
+      'granularity': 'minute',
       hourCycle,
-      shouldForceLeadingZeros: true,
+      'shouldForceLeadingZeros': true,
     };
 
     const field = (
@@ -409,7 +418,7 @@ const SegmentedDateTime = forwardRef<HTMLDivElement, InputScopedProps<SegmentedD
           className={tx(
             'input.input',
             { variant, disabled, density, elevation, validationValence },
-            fieldClass,
+            fieldClassNames,
             classNames,
           )}
         >
@@ -449,6 +458,6 @@ const SegmentedDateTime = forwardRef<HTMLDivElement, InputScopedProps<SegmentedD
 );
 SegmentedDateTime.displayName = 'Input.SegmentedDateTime';
 
-export { SegmentedDate, SegmentedTime, SegmentedDateTime };
+export { SegmentedDate, SegmentedDateTime, SegmentedTime };
 
-export type { SegmentedDateProps, SegmentedTimeProps, SegmentedDateTimeProps };
+export type { SegmentedDateProps, SegmentedDateTimeProps, SegmentedTimeProps };

package/src/components/Input/index.ts

@@ -4,4 +4,3 @@
 
 export * from './Input';
 export * from './SegmentedInput';
-export * from './constants';

package/src/components/Main/Main.tsx

@@ -9,8 +9,8 @@ import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import React, {
-  type ComponentPropsWithRef,
   type ComponentPropsWithoutRef,
+  type ComponentPropsWithRef,
   type Dispatch,
   type KeyboardEvent,
   type PropsWithChildren,
@@ -428,6 +428,6 @@ export const Main = {
   ComplementarySidebar: MainComplementarySidebar,
 };
 
-export { useMainContext, useSidebars, useLandmarkMover };
+export { useLandmarkMover, useMainContext, useSidebars };
 
-export type { MainRootProps, MainOverlayProps, MainContentProps, MainNavigationSidebarProps, SidebarState };
+export type { MainContentProps, MainNavigationSidebarProps, MainOverlayProps, MainRootProps, SidebarState };

package/src/components/MediaPlayer/MediaPlayer.tsx

@@ -14,10 +14,10 @@ export type MediaFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
 
 /** Static map to keep Tailwind's class scanner happy (no dynamic `object-${fit}`). */
 const FIT_CLASS: Record<MediaFit, string> = {
-  cover: 'object-cover',
-  contain: 'object-contain',
-  fill: 'object-fill',
-  none: 'object-none',
+  'cover': 'object-cover',
+  'contain': 'object-contain',
+  'fill': 'object-fill',
+  'none': 'object-none',
   'scale-down': 'object-scale-down',
 };
 

package/src/components/Menu/ContextMenu.tsx

@@ -134,16 +134,16 @@ export const ContextMenu = {
 };
 
 export type {
-  ContextMenuRootProps,
-  ContextMenuTriggerProps,
-  ContextMenuPortalProps,
-  ContextMenuContentProps,
-  ContextMenuViewportProps,
   ContextMenuArrowProps,
-  ContextMenuGroupProps,
-  ContextMenuItemProps,
   ContextMenuCheckboxItemProps,
+  ContextMenuContentProps,
+  ContextMenuGroupLabelProps,
+  ContextMenuGroupProps,
   ContextMenuItemIndicatorProps,
+  ContextMenuItemProps,
+  ContextMenuPortalProps,
+  ContextMenuRootProps,
   ContextMenuSeparatorProps,
-  ContextMenuGroupLabelProps,
+  ContextMenuTriggerProps,
+  ContextMenuViewportProps,
 };

package/src/components/Menu/DropdownMenu.tsx

@@ -15,8 +15,8 @@ import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import React, {
-  type ComponentPropsWithRef,
   type ComponentPropsWithoutRef,
+  type ComponentPropsWithRef,
   type ComponentRef,
   type FC,
   PropsWithChildren,
@@ -29,8 +29,7 @@ import React, {
   useRef,
 } from 'react';
 
-import { useElevationContext, useThemeContext } from '../../hooks';
-import { useSafeCollisionPadding } from '../../hooks/useSafeCollisionPadding';
+import { useElevationContext, useSafeCollisionPadding, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 
 type Direction = 'ltr' | 'rtl';
@@ -653,22 +652,22 @@ const useDropdownMenuMenuScope: (scope?: DropdownMenuScope) => any = useMenuScop
 export { createDropdownMenuScope, useDropdownMenuContext, useDropdownMenuMenuScope };
 
 export type {
-  DropdownMenuRootProps,
-  DropdownMenuTriggerProps,
-  DropdownMenuVirtualTriggerProps,
-  DropdownMenuPortalProps,
+  DropdownMenuArrowProps,
+  DropdownMenuCheckboxItemProps,
   DropdownMenuContentProps,
-  DropdownMenuViewportProps,
   DropdownMenuGroupProps,
-  DropdownMenuLabelProps,
+  DropdownMenuItemIndicatorProps,
   DropdownMenuItemProps,
-  DropdownMenuCheckboxItemProps,
+  DropdownMenuLabelProps,
+  DropdownMenuPortalProps,
   DropdownMenuRadioGroupProps,
   DropdownMenuRadioItemProps,
-  DropdownMenuItemIndicatorProps,
+  DropdownMenuRootProps,
   DropdownMenuSeparatorProps,
-  DropdownMenuArrowProps,
+  DropdownMenuSubContentProps,
   DropdownMenuSubProps,
   DropdownMenuSubTriggerProps,
-  DropdownMenuSubContentProps,
+  DropdownMenuTriggerProps,
+  DropdownMenuViewportProps,
+  DropdownMenuVirtualTriggerProps,
 };

package/src/components/Message/Message.stories.tsx

@@ -14,14 +14,14 @@ import { Message } from './Message';
 
 random.seed(123);
 
-type DefaultStoryProps = {
+type StoryArgs = {
   valence: MessageValence;
   title: string;
   body: string;
   button?: boolean;
 };
 
-const DefaultStory = ({ valence, title, body, button }: DefaultStoryProps) => (
+const DefaultStory = ({ valence, title, body, button }: StoryArgs) => (
   <div className='w-[30rem]'>
     <Message.Root valence={valence}>
       {title && <Message.Title onClose={() => console.log('close')}>{title}</Message.Title>}

package/src/components/Message/Message.theme.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { mx, messageValence } from '@dxos/ui-theme';
+import { messageValence, mx } from '@dxos/ui-theme';
 import { type ComponentFunction, type Elevation, type MessageValence, type Theme } from '@dxos/ui-types';
 
 export type MessageStyleProps = {

package/src/components/Message/Message.tsx

@@ -5,7 +5,7 @@
 import { createContext } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
-import React, { type CSSProperties, type ComponentPropsWithRef, forwardRef } from 'react';
+import React, { type ComponentPropsWithRef, type CSSProperties, forwardRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useId } from '@dxos/react-hooks';
@@ -204,6 +204,6 @@ export const Message = {
 
 export const Callout = Message;
 
-export type { MessageRootProps, MessageTitleProps, MessageContentProps };
+export type { MessageContentProps, MessageRootProps, MessageTitleProps };
 
 export { messageIcons };