@dxos/react-ui 0.8.4-main.d05673bc65 → 0.8.4-main.dfabb4ec29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.8.4-main.d05673bc65",
+  "version": "0.8.4-main.dfabb4ec29",
   "description": "Low-level React components for DXOS, applying a theme to a core group of primitives",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -12,6 +12,9 @@
   "author": "DXOS.org",
   "sideEffects": false,
   "type": "module",
+  "imports": {
+    "#translations": "./src/translations.ts"
+  },
   "exports": {
     ".": {
       "source": "./src/index.ts",
@@ -24,16 +27,15 @@
       "browser": "./dist/lib/browser/testing/index.mjs",
       "node": "./dist/lib/node-esm/testing/index.mjs",
       "types": "./dist/types/src/testing/index.d.ts"
+    },
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "browser": "./dist/lib/browser/translations.mjs",
+      "node": "./dist/lib/node-esm/translations.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "testing": [
-        "./dist/types/src/testing/index.d.ts"
-      ]
-    }
-  },
   "files": [
     "dist",
     "src"
@@ -73,24 +75,25 @@
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "@radix-ui/react-visually-hidden": "1.1.2",
     "aria-hidden": "^1.2.4",
-    "date-fns": "^3.3.1",
+    "date-fns": "^3.6.0",
+    "dompurify": "^3.3.1",
     "error-stack-parser": "^2.1.4",
     "i18next": "^21.10.0",
     "keyborg": "^2.5.0",
     "react-error-boundary": "^4.0.13",
     "react-i18next": "^11.18.6",
     "react-remove-scroll": "^2.6.0",
-    "@dxos/debug": "0.8.4-main.d05673bc65",
-    "@dxos/invariant": "0.8.4-main.d05673bc65",
-    "@dxos/lit-ui": "0.8.4-main.d05673bc65",
-    "@dxos/react-error-boundary": "0.8.4-main.d05673bc65",
-    "@dxos/async": "0.8.4-main.d05673bc65",
-    "@dxos/log": "0.8.4-main.d05673bc65",
-    "@dxos/react-hooks": "0.8.4-main.d05673bc65",
-    "@dxos/react-input": "0.8.4-main.d05673bc65",
-    "@dxos/react-list": "0.8.4-main.d05673bc65",
-    "@dxos/ui-types": "0.8.4-main.d05673bc65",
-    "@dxos/util": "0.8.4-main.d05673bc65"
+    "@dxos/async": "0.8.4-main.dfabb4ec29",
+    "@dxos/debug": "0.8.4-main.dfabb4ec29",
+    "@dxos/lit-ui": "0.8.4-main.dfabb4ec29",
+    "@dxos/log": "0.8.4-main.dfabb4ec29",
+    "@dxos/invariant": "0.8.4-main.dfabb4ec29",
+    "@dxos/react-error-boundary": "0.8.4-main.dfabb4ec29",
+    "@dxos/react-input": "0.8.4-main.dfabb4ec29",
+    "@dxos/ui-types": "0.8.4-main.dfabb4ec29",
+    "@dxos/util": "0.8.4-main.dfabb4ec29",
+    "@dxos/react-list": "0.8.4-main.dfabb4ec29",
+    "@dxos/react-hooks": "0.8.4-main.dfabb4ec29"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
@@ -103,15 +106,15 @@
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
     "tabster": "^8.5.5",
-    "vite": "^7.1.11",
-    "@dxos/random": "0.8.4-main.d05673bc65",
-    "@dxos/util": "0.8.4-main.d05673bc65",
-    "@dxos/ui-theme": "0.8.4-main.d05673bc65"
+    "vite": "^8.0.10",
+    "@dxos/ui-theme": "0.8.4-main.dfabb4ec29",
+    "@dxos/util": "0.8.4-main.dfabb4ec29",
+    "@dxos/random": "0.8.4-main.dfabb4ec29"
   },
   "peerDependencies": {
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.8.4-main.d05673bc65"
+    "@dxos/ui-theme": "0.8.4-main.dfabb4ec29"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Avatars/Avatar.stories.tsx

@@ -9,10 +9,9 @@ import { type ChromaticPalette, type Size } from '@dxos/ui-types';
 import { hexToFallback } from '@dxos/util';
 
 import { withTheme } from '../../testing';
-
 import { Avatar, type AvatarAnimation, type AvatarStatus, type AvatarVariant } from './Avatar';
 
-type StoryProps = PropsWithChildren<{
+type DefaultStoryProps = PropsWithChildren<{
   id?: string;
   imgSrc?: string;
   fallbackText?: string;
@@ -25,7 +24,7 @@ type StoryProps = PropsWithChildren<{
   hue?: ChromaticPalette;
 }>;
 
-const DefaultStory = (props: StoryProps) => {
+const DefaultStory = (props: DefaultStoryProps) => {
   const {
     id = '20970b563fc49b5bb194a6ffdff376031a3a11f9481360c071c3fed87874106b',
     status,

package/src/components/Avatars/Avatar.tsx

@@ -2,13 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos/lit-ui/dx-avatar.pcss';
-
 import { createContext } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React, { type ComponentProps, type ComponentPropsWithRef, type PropsWithChildren, forwardRef } from 'react';
 
+import '@dxos/lit-ui/dx-avatar.pcss';
 import {
   type AvatarAnimation,
   type AvatarStatus,

package/src/components/Avatars/AvatarGroup.stories.tsx

@@ -9,7 +9,6 @@ import { useId } from '@dxos/react-hooks';
 import { toEmoji } from '@dxos/util';
 
 import { withTheme } from '../../testing';
-
 import { Avatar } from './Avatar';
 
 const hues = ['lime', 'teal', 'purple', 'pink'];

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -7,7 +7,6 @@ import React from 'react';
 
 import { withTheme } from '../../testing';
 import { Button } from '../Button';
-
 import { Breadcrumb, type BreadcrumbRootProps } from './Breadcrumb';
 
 const DefaultStory = (props: BreadcrumbRootProps) => {
@@ -16,7 +15,7 @@ const DefaultStory = (props: BreadcrumbRootProps) => {
       <Breadcrumb.List>
         <Breadcrumb.ListItem>
           <Breadcrumb.Link asChild>
-            <Button variant='ghost' density='fine' classNames='px-0 text-base-surface-text font-normal'>
+            <Button variant='ghost' classNames='px-0 text-base-surface-text font-normal'>
               Grocery
             </Button>
           </Breadcrumb.Link>

package/src/components/Button/Button.stories.tsx

@@ -8,7 +8,6 @@ import React from 'react';
 import { withTheme } from '../../testing';
 import { withLayoutVariants } from '../../testing';
 import { Icon } from '../Icon';
-
 import { Button, ButtonGroup, type ButtonProps } from './Button';
 
 const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {

package/src/components/Button/Button.tsx

@@ -12,12 +12,12 @@ import { type Density, type Elevation } from '@dxos/ui-types';
 import { useDensityContext, useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 
-interface ButtonProps extends ThemedClassName<ComponentPropsWithRef<typeof Primitive.button>> {
+type ButtonProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.button>> & {
   variant?: 'default' | 'primary' | 'outline' | 'ghost' | 'destructive';
   density?: Density;
   elevation?: Elevation;
   asChild?: boolean;
-}
+};
 
 type ButtonGroupContextValue = { inGroup?: boolean };
 
@@ -31,21 +31,13 @@ const [ButtonGroupProvider, useButtonGroupContext] = createContext<ButtonGroupCo
 const Button = memo(
   forwardRef<HTMLButtonElement, ButtonProps>(
     (
-      {
-        classNames,
-        children,
-        density: propsDensity,
-        elevation: propsElevation,
-        variant = 'default',
-        asChild,
-        ...props
-      },
+      { classNames, children, density: densityProp, elevation: elevationProp, variant = 'default', asChild, ...props },
       ref,
     ) => {
       const { inGroup } = useButtonGroupContext(BUTTON_NAME);
       const { tx } = useThemeContext();
-      const elevation = useElevationContext(propsElevation);
-      const density = useDensityContext(propsDensity);
+      const elevation = useElevationContext(elevationProp);
+      const density = useDensityContext(densityProp);
       const Comp = asChild ? Slot : Primitive.button;
       return (
         <Comp

package/src/components/Button/IconButton.stories.tsx

@@ -7,17 +7,16 @@ import React from 'react';
 
 import { withTheme } from '../../testing';
 import { Tooltip } from '../Tooltip';
-
+import { Button } from './Button';
 import { IconButton, type IconButtonProps } from './IconButton';
 
 const DefaultStory = (props: IconButtonProps) => {
   return (
     <Tooltip.Provider>
-      <div className='mb-4'>
+      <div className='flex gap-4'>
         <IconButton {...props} />
-      </div>
-      <div className='mb-4'>
         <IconButton iconOnly {...props} />
+        <Button>{props.label}</Button>
       </div>
     </Tooltip.Provider>
   );
@@ -28,6 +27,9 @@ const meta = {
   component: IconButton,
   render: DefaultStory as any,
   decorators: [withTheme()],
+  parameters: {
+    layout: 'centered',
+  },
 } satisfies Meta<typeof IconButton>;
 
 export default meta;

package/src/components/Button/IconButton.tsx

@@ -8,7 +8,6 @@ import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 import { Icon, type IconProps } from '../Icon';
 import { Tooltip, type TooltipSide } from '../Tooltip';
-
 import { Button, type ButtonProps } from './Button';
 
 type IconButtonProps = Omit<ButtonProps, 'children'> &
@@ -17,6 +16,7 @@ type IconButtonProps = Omit<ButtonProps, 'children'> &
     noTooltip?: boolean;
     caretDown?: boolean;
     iconOnly?: boolean;
+    square?: boolean; // TODO(burdon): Handle more uniformly.
     iconEnd?: boolean;
     iconClassNames?: ThemedClassName<any>['classNames'];
     tooltipSide?: TooltipSide;
@@ -44,15 +44,14 @@ const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   },
 );
 
-// TODO(burdon): Inherit size from container/density.
 const LabelledIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   (
-    { size = 5, icon, iconOnly, iconEnd, iconClassNames, label, caretDown, noTooltip: _, classNames, ...props },
+    { size, icon, iconOnly, square, iconEnd, iconClassNames, label, caretDown, noTooltip: _, classNames, ...props },
     forwardedRef,
   ) => {
     const { tx } = useThemeContext();
     return (
-      <Button {...props} classNames={tx('iconButton.root', { iconOnly }, classNames)} ref={forwardedRef}>
+      <Button {...props} classNames={tx('iconButton.root', { iconOnly, square }, classNames)} ref={forwardedRef}>
         {icon && !iconEnd && <Icon icon={icon} size={size} classNames={iconClassNames} />}
         <span className={iconOnly ? 'sr-only' : undefined}>{label}</span>
         {icon && iconEnd && <Icon icon={icon} size={size} classNames={iconClassNames} />}

package/src/components/Button/Toggle.stories.tsx

@@ -7,7 +7,6 @@ import React from 'react';
 
 import { withTheme } from '../../testing';
 import { Icon } from '../Icon';
-
 import { Toggle, type ToggleProps } from './Toggle';
 
 const DefaultStory = (props: ToggleProps) => {

package/src/components/Button/Toggle.tsx

@@ -2,19 +2,19 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Toggle as TogglePrimitive, type ToggleProps as TogglePrimitiveProps } from '@radix-ui/react-toggle';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
 import React, { forwardRef } from 'react';
 
 import { Button, type ButtonProps } from './Button';
 
-type ToggleProps = Omit<TogglePrimitiveProps, 'asChild'> & ButtonProps;
+type ToggleProps = Omit<TogglePrimitive.ToggleProps, 'asChild'> & ButtonProps;
 
 const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
   ({ defaultPressed, pressed, onPressedChange, ...props }, forwardedRef) => {
     return (
-      <TogglePrimitive {...{ defaultPressed, pressed, onPressedChange }} asChild>
+      <TogglePrimitive.Root {...{ defaultPressed, pressed, onPressedChange }} asChild>
         <Button {...props} ref={forwardedRef} />
-      </TogglePrimitive>
+      </TogglePrimitive.Root>
     );
   },
 );

package/src/components/Button/ToggleGroup.stories.tsx

@@ -7,7 +7,6 @@ import React from 'react';
 
 import { withTheme } from '../../testing';
 import { Icon } from '../Icon';
-
 import { ToggleGroup, ToggleGroupItem, type ToggleGroupProps } from './ToggleGroup';
 
 // TODO(burdon): Create Radix-style Root, Item, etc?

package/src/components/Button/ToggleGroup.tsx

@@ -2,50 +2,46 @@
 // Copyright 2023 DXOS.org
 //
 
-import {
-  ToggleGroupItem as ToggleGroupItemPrimitive,
-  type ToggleGroupItemProps as ToggleGroupItemPrimitiveProps,
-  type ToggleGroupMultipleProps,
-  ToggleGroup as ToggleGroupPrimitive,
-  type ToggleGroupSingleProps,
-} from '@radix-ui/react-toggle-group';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import React, { forwardRef } from 'react';
 
 import { Button, ButtonGroup, type ButtonGroupProps, type ButtonProps } from './Button';
 import { IconButton, type IconButtonProps } from './IconButton';
 
-type ToggleGroupProps = Omit<ToggleGroupSingleProps, 'className'> | Omit<ToggleGroupMultipleProps, 'className'>;
+type ToggleGroupProps =
+  | Omit<ToggleGroupPrimitive.ToggleGroupSingleProps, 'className'>
+  | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps, 'className'>;
 
 const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps & ButtonGroupProps>(
   ({ classNames, children, ...props }, forwardedRef) => {
     return (
-      <ToggleGroupPrimitive {...props} asChild>
+      <ToggleGroupPrimitive.Root {...props} asChild>
         <ButtonGroup {...{ classNames, children }} ref={forwardedRef} />
-      </ToggleGroupPrimitive>
+      </ToggleGroupPrimitive.Root>
     );
   },
 );
 
-type ToggleGroupItemProps = Omit<ToggleGroupItemPrimitiveProps, 'className'> & ButtonProps;
+type ToggleGroupItemProps = Omit<ToggleGroupPrimitive.ToggleGroupItemProps, 'className'> & ButtonProps;
 
 const ToggleGroupItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
   ({ variant, elevation, density, classNames, children, ...props }, forwardedRef) => {
     return (
-      <ToggleGroupItemPrimitive {...props} asChild>
+      <ToggleGroupPrimitive.Item {...props} asChild>
         <Button {...{ variant, elevation, density, classNames, children }} ref={forwardedRef} />
-      </ToggleGroupItemPrimitive>
+      </ToggleGroupPrimitive.Item>
     );
   },
 );
 
-type ToggleGroupIconItemProps = Omit<ToggleGroupItemPrimitiveProps, 'className'> & IconButtonProps;
+type ToggleGroupIconItemProps = Omit<ToggleGroupPrimitive.ToggleGroupItemProps, 'className'> & IconButtonProps;
 
 const ToggleGroupIconItem = forwardRef<HTMLButtonElement, ToggleGroupIconItemProps>(
   ({ variant, label, icon, size, elevation, density, classNames, ...props }, forwardedRef) => {
     return (
-      <ToggleGroupItemPrimitive {...props} asChild>
+      <ToggleGroupPrimitive.Item {...props} asChild>
         <IconButton {...{ variant, elevation, density, classNames, label, icon, size }} ref={forwardedRef} />
-      </ToggleGroupItemPrimitive>
+      </ToggleGroupPrimitive.Item>
     );
   },
 );

package/src/components/Card/Card.stories.tsx

@@ -5,22 +5,22 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useRef } from 'react';
 
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { Icon } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { Card } from './Card';
 
-faker.seed(0);
+random.seed(0);
 
-type StoryProps = {
+type DefaultStoryProps = {
   title: string;
   description?: string;
   image?: string;
   fullWidth?: boolean;
 };
 
-const DefaultStory = ({ title, description, image, fullWidth }: StoryProps) => {
+const DefaultStory = ({ title, description, image, fullWidth }: DefaultStoryProps) => {
   const handleRef = useRef<HTMLButtonElement>(null);
   console.log(title);
   return (
@@ -65,20 +65,20 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-const image = faker.image.url();
+const image = random.image.url();
 
 export const Default: Story = {
   args: {
-    title: faker.commerce.productName(),
-    description: faker.lorem.paragraph(3),
+    title: random.commerce.productName(),
+    description: random.lorem.paragraph(3),
     image,
   },
 };
 
 export const FullWidth: Story = {
   args: {
-    title: faker.commerce.productName(),
-    description: faker.lorem.paragraph(3),
+    title: random.commerce.productName(),
+    description: random.lorem.paragraph(3),
     image,
     fullWidth: true,
   },
@@ -86,7 +86,7 @@ export const FullWidth: Story = {
 
 export const Simple: Story = {
   args: {
-    title: faker.commerce.productName(),
+    title: random.commerce.productName(),
   },
   render: ({ title }) => {
     const handleRef = useRef<HTMLButtonElement>(null);
@@ -104,8 +104,8 @@ export const Simple: Story = {
 
 export const Description: Story = {
   args: {
-    title: faker.commerce.productName(),
-    description: faker.lorem.paragraph(3),
+    title: random.commerce.productName(),
+    description: random.lorem.paragraph(3),
   },
   render: ({ title, description }) => {
     const handleRef = useRef<HTMLButtonElement>(null);
@@ -129,18 +129,18 @@ export const Description: Story = {
 export const Mock = () => (
   <div className='grid grid-cols-[2rem_1fr_2rem] w-full dx-card-min-width dx-card-max-width border border-separator rounded-xs'>
     <div className='grid grid-cols-subgrid col-span-full'>
-      <div role='none' className='grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center'>
+      <div className='grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center'>
         <Icon icon='ph--dots-six-vertical--regular' />
       </div>
       <div className='p-1 whitespace-normal break-words text-description items-center'>
         This line is very very long and it should wrap.
       </div>
-      <div role='none' className='grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center'>
+      <div className='grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center'>
         <Icon icon='ph--x--regular' />
       </div>
     </div>
     <div className='grid grid-cols-subgrid col-span-3'>
-      <div role='none' className='grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center'>
+      <div className='grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center'>
         <Icon icon='ph--dots-six-vertical--regular' />
       </div>
       <div className='p-1 text-description items-center col-span-2'>