@dxos/react-ui 0.8.4-main.fd6878d → 0.8.4-staging.60fe92afc8

package/src/components/Button/Button.theme.ts

@@ -0,0 +1,31 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import type { ComponentFunction, Density, Elevation, Theme } from '@dxos/ui-types';
+
+export type ButtonStyleProps = Partial<{
+  inGroup?: boolean;
+  textWrap?: boolean;
+  density: Density;
+  elevation: Elevation;
+  disabled: boolean;
+  variant: 'default' | 'primary' | 'ghost' | 'outline';
+}>;
+
+const root: ComponentFunction<ButtonStyleProps> = (_props, ...etc) => {
+  return mx('dx-button dx-focus-ring group gap-1 [&_span]:truncate', ...etc);
+};
+
+const group: ComponentFunction<{ elevation?: Elevation }> = (_props, ...etc) => {
+  return mx(
+    'inline-flex rounded-xs [&>:first-child]:rounded-w-sm [&>:last-child]:rounded-ie-sm [&>button]:relative',
+    ...etc,
+  );
+};
+
+export const buttonTheme: Theme<ButtonStyleProps> = {
+  root,
+  group,
+};

package/src/components/{Buttons → Button}/Button.tsx

@@ -7,17 +7,17 @@ import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React, { type ComponentPropsWithRef, forwardRef, memo } from 'react';
 
-import { type Density, type Elevation } from '@dxos/react-ui-types';
+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>> {
-  variant?: 'default' | 'primary' | 'outline' | 'ghost' | 'destructive';
+type ButtonProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.button>> & {
+  variant?: 'default' | 'primary' | 'outline' | 'ghost' | 'destructive' | 'valence';
   density?: Density;
   elevation?: Elevation;
   asChild?: boolean;
-}
+};
 
 type ButtonGroupContextValue = { inGroup?: boolean };
 
@@ -31,24 +31,16 @@ 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 Root = asChild ? Slot : Primitive.button;
+      const elevation = useElevationContext(elevationProp);
+      const density = useDensityContext(densityProp);
+      const Comp = asChild ? Slot : Primitive.button;
       return (
-        <Root
+        <Comp
           ref={ref}
           {...props}
           data-variant={variant}
@@ -56,7 +48,6 @@ const Button = memo(
           data-props={inGroup ? 'grouped' : ''}
           className={tx(
             'button.root',
-            'button',
             {
               variant,
               inGroup,
@@ -69,7 +60,7 @@ const Button = memo(
           {...(props.disabled && { disabled: true })}
         >
           {children}
-        </Root>
+        </Comp>
       );
     },
   ),
@@ -86,16 +77,11 @@ const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
   ({ children, elevation: propsElevation, classNames, asChild, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const elevation = useElevationContext(propsElevation);
-    const Root = asChild ? Slot : Primitive.div;
+    const Comp = asChild ? Slot : Primitive.div;
     return (
-      <Root
-        role='none'
-        {...props}
-        className={tx('button.group', 'button-group', { elevation }, classNames)}
-        ref={forwardedRef}
-      >
+      <Comp {...props} className={tx('button.group', { elevation }, classNames)} ref={forwardedRef}>
         <ButtonGroupProvider inGroup>{children}</ButtonGroupProvider>
-      </Root>
+      </Comp>
     );
   },
 );

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

@@ -0,0 +1,92 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { type Density } from '@dxos/ui-types';
+
+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='flex gap-4'>
+        <IconButton {...props} />
+        <IconButton iconOnly {...props} />
+        <Button>{props.label}</Button>
+      </div>
+    </Tooltip.Provider>
+  );
+};
+
+const densities: Density[] = ['lg', 'md', 'sm', 'xs'];
+const densityIconSize: Record<Density, IconButtonProps['size']> = {
+  lg: 5,
+  md: 4,
+  sm: 4,
+  xs: 4,
+};
+
+const DensitiesStory = (props: Omit<IconButtonProps, 'density' | 'size'>) => {
+  return (
+    <Tooltip.Provider>
+      <div className='grid grid-cols-[auto_1fr_1fr_1fr] gap-4 items-center'>
+        <div />
+        <div className='text-xs text-subdued uppercase'>iconOnly</div>
+        <div className='text-xs text-subdued uppercase'>label + icon</div>
+        <div className='text-xs text-subdued uppercase'>Button (reference)</div>
+        {densities.map((density) => (
+          <React.Fragment key={density}>
+            <div className='text-xs font-mono'>density={density}</div>
+            <IconButton
+              square
+              classNames='w-fit'
+              density={density}
+              size={densityIconSize[density]}
+              iconOnly
+              {...props}
+            />
+            <IconButton classNames='w-fit' density={density} size={densityIconSize[density]} {...props} />
+            <Button density={density}>{props.label}</Button>
+          </React.Fragment>
+        ))}
+      </div>
+    </Tooltip.Provider>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-core/components/IconButton',
+  component: IconButton,
+  render: DefaultStory as any,
+  decorators: [withTheme()],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof IconButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: DensitiesStory as any,
+  args: {
+    label: 'Close',
+    icon: 'ph--x--regular',
+  },
+};
+
+export const Ghost: Story = {
+  render: DensitiesStory as any,
+  args: {
+    label: 'Close',
+    icon: 'ph--x--regular',
+    variant: 'ghost',
+  },
+};

package/src/components/Button/IconButton.theme.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import type { ComponentFunction, Theme } from '@dxos/ui-types';
+
+import { type ButtonStyleProps } from './Button.theme';
+
+export type IconButtonStyleProps = ButtonStyleProps & {
+  iconOnly?: boolean;
+  square?: boolean;
+};
+
+const root: ComponentFunction<IconButtonStyleProps> = ({ iconOnly, square }, ...etc) => {
+  return mx('px-1.5', !iconOnly && 'gap-1.5', square && 'aspect-square', ...etc);
+};
+
+export const iconButtonTheme: Theme<IconButtonStyleProps> = {
+  root,
+};

package/src/components/{Buttons → Button}/IconButton.tsx

@@ -8,25 +8,34 @@ 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'> &
-  Pick<IconProps, 'icon' | 'size'> & {
+  Partial<Pick<IconProps, 'icon' | 'size'>> & {
     label: string;
-    iconOnly?: boolean;
     noTooltip?: boolean;
     caretDown?: boolean;
+    iconOnly?: boolean;
+    square?: boolean; // TODO(burdon): Handle more uniformly.
+    iconEnd?: boolean;
     iconClassNames?: ThemedClassName<any>['classNames'];
-    tooltipPortal?: boolean;
     tooltipSide?: TooltipSide;
   };
 
+const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, forwardedRef) =>
+  props.iconOnly ? (
+    <IconOnlyButton {...props} ref={forwardedRef} />
+  ) : (
+    <LabelledIconButton {...props} ref={forwardedRef} />
+  ),
+);
+
 const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ noTooltip, tooltipPortal = true, tooltipSide, ...props }, forwardedRef) => {
+  ({ noTooltip, tooltipSide, ...props }, forwardedRef) => {
     if (noTooltip) {
       return <LabelledIconButton {...props} ref={forwardedRef} />;
     }
+
     return (
       <Tooltip.Trigger asChild content={props.label} side={tooltipSide}>
         <LabelledIconButton {...props} ref={forwardedRef} />
@@ -36,26 +45,22 @@ const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
 );
 
 const LabelledIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ icon, size, iconOnly, label, classNames, iconClassNames, caretDown, ...props }, forwardedRef) => {
+  (
+    { size, icon, iconOnly, square, iconEnd, iconClassNames, label, caretDown, noTooltip: _, classNames, ...props },
+    forwardedRef,
+  ) => {
     const { tx } = useThemeContext();
     return (
-      <Button {...props} classNames={tx('iconButton.root', 'iconButton', { iconOnly }, classNames)} ref={forwardedRef}>
-        <Icon icon={icon} size={size} classNames={iconClassNames} />
+      <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} />}
         {caretDown && <Icon size={3} icon='ph--caret-down--bold' />}
       </Button>
     );
   },
 );
 
-const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, forwardedRef) =>
-  props.iconOnly ? (
-    <IconOnlyButton {...props} ref={forwardedRef} />
-  ) : (
-    <LabelledIconButton {...props} ref={forwardedRef} />
-  ),
-);
-
 export { IconButton };
 
 export type { IconButtonProps };

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

@@ -0,0 +1,36 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { withTheme } from '../../testing';
+import { Icon } from '../Icon';
+import { Toggle, type ToggleProps } from './Toggle';
+
+const DefaultStory = (props: ToggleProps) => {
+  return (
+    <Toggle {...props}>
+      <Icon icon='ph--text-b--regular' />
+    </Toggle>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-core/components/Toggle',
+  component: Toggle,
+  render: DefaultStory,
+  decorators: [withTheme()],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Toggle>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

package/src/components/{Buttons → 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/{Buttons → Button}/ToggleGroup.stories.tsx

@@ -2,13 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 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?
@@ -25,15 +23,18 @@ const DefaultStory = (props: ToggleGroupProps) => {
   );
 };
 
-export default {
-  title: 'ui/react-ui-core/ToggleGroup',
+const meta = {
+  title: 'ui/react-ui-core/components/ToggleGroup',
   component: ToggleGroup,
   render: DefaultStory,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+  decorators: [withTheme()],
+} satisfies Meta<typeof ToggleGroup>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {
     type: 'single',
   },

package/src/components/Button/ToggleGroup.tsx

@@ -0,0 +1,50 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+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<ToggleGroupPrimitive.ToggleGroupSingleProps, 'className'>
+  | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps, 'className'>;
+
+const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps & ButtonGroupProps>(
+  ({ classNames, children, ...props }, forwardedRef) => {
+    return (
+      <ToggleGroupPrimitive.Root {...props} asChild>
+        <ButtonGroup {...{ classNames, children }} ref={forwardedRef} />
+      </ToggleGroupPrimitive.Root>
+    );
+  },
+);
+
+type ToggleGroupItemProps = Omit<ToggleGroupPrimitive.ToggleGroupItemProps, 'className'> & ButtonProps;
+
+const ToggleGroupItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
+  ({ variant, elevation, density, classNames, children, ...props }, forwardedRef) => {
+    return (
+      <ToggleGroupPrimitive.Item {...props} asChild>
+        <Button {...{ variant, elevation, density, classNames, children }} ref={forwardedRef} />
+      </ToggleGroupPrimitive.Item>
+    );
+  },
+);
+
+type ToggleGroupIconItemProps = Omit<ToggleGroupPrimitive.ToggleGroupItemProps, 'className'> & IconButtonProps;
+
+const ToggleGroupIconItem = forwardRef<HTMLButtonElement, ToggleGroupIconItemProps>(
+  ({ variant, label, icon, size, elevation, density, classNames, ...props }, forwardedRef) => {
+    return (
+      <ToggleGroupPrimitive.Item {...props} asChild>
+        <IconButton {...{ variant, elevation, density, classNames, label, icon, size }} ref={forwardedRef} />
+      </ToggleGroupPrimitive.Item>
+    );
+  },
+);
+
+export { ToggleGroup, ToggleGroupItem, ToggleGroupIconItem };
+export type { ToggleGroupProps, ToggleGroupItemProps };

package/src/components/Calendar/Calendar.stories.tsx

@@ -0,0 +1,43 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useState } from 'react';
+
+import { withLayout, withTheme } from '../../testing';
+import { Calendar, type DateRange } from './Calendar';
+
+const meta: Meta<typeof Calendar.Root> = {
+  title: 'ui/react-ui-core/components/Calendar',
+  component: Calendar.Root,
+  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'flex flex-row p-4 justify-center' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Calendar.Root>;
+
+export const Single: Story = {
+  render: () => {
+    const [date, setDate] = useState<Date | undefined>(new Date());
+    return <Calendar.Root mode='single' selected={date} onSelect={setDate} />;
+  },
+};
+
+export const Range: Story = {
+  render: () => {
+    const [range, setRange] = useState<DateRange | undefined>();
+    return <Calendar.Root mode='range' selected={range} onSelect={setRange} />;
+  },
+};
+
+export const WithMinDate: Story = {
+  render: () => {
+    const [date, setDate] = useState<Date | undefined>();
+    return <Calendar.Root mode='single' selected={date} onSelect={setDate} minValue={new Date()} />;
+  },
+};

package/src/components/Calendar/Calendar.theme.ts

@@ -0,0 +1,74 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import { type ComponentFunction, type Theme } from '@dxos/ui-types';
+
+export type CalendarStyleProps = Partial<{}>;
+
+//
+// Theme slots target react-aria-components elements. RAC attaches `data-*` attributes to its
+// rendered nodes (`data-selected`, `data-focused`, `data-disabled`, `data-outside-month`,
+// `data-selection-start`, `data-selection-end`, `data-hovered`, etc.) which we hook into via
+// Tailwind's `data-[…]:` modifiers.
+//
+
+const root: ComponentFunction<CalendarStyleProps> = (_p, ...etc) =>
+  mx('relative w-fit h-fit self-start p-2 select-none bg-group-surface text-base-fg', ...etc);
+
+const nav: ComponentFunction<CalendarStyleProps> = (_p, ...etc) => mx('flex items-center justify-between pb-1', ...etc);
+
+const caption_label: ComponentFunction<CalendarStyleProps> = (_p, ...etc) =>
+  mx('flex-1 text-center text-sm font-medium', ...etc);
+
+const button_previous: ComponentFunction<CalendarStyleProps> = (_p, ...etc) =>
+  mx(
+    'h-7 w-7 inline-flex items-center justify-center rounded-sm shrink-0',
+    'text-description hover:bg-hover-surface',
+    'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
+    ...etc,
+  );
+
+const button_next: ComponentFunction<CalendarStyleProps> = (_p, ...etc) =>
+  mx(
+    'h-7 w-7 inline-flex items-center justify-center rounded-sm shrink-0',
+    'text-description hover:bg-hover-surface',
+    'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
+    ...etc,
+  );
+
+const month_grid: ComponentFunction<CalendarStyleProps> = (_p, ...etc) => mx('w-full border-collapse', ...etc);
+
+const weekdays: ComponentFunction<CalendarStyleProps> = (_p, ...etc) => mx('', ...etc);
+
+const weekday: ComponentFunction<CalendarStyleProps> = (_p, ...etc) =>
+  mx('w-9 h-7 text-xs font-thin text-description', ...etc);
+
+const day: ComponentFunction<CalendarStyleProps> = (_p, ...etc) =>
+  mx(
+    'relative w-9 h-9 p-0 text-center text-sm rounded-sm inline-flex items-center justify-center cursor-pointer',
+    'outline-none',
+    'data-[hovered]:bg-hover-surface',
+    'data-[focus-visible]:outline-2 data-[focus-visible]:outline-primary-500',
+    'data-[selected]:bg-primary-500 data-[selected]:text-primary-fg data-[selected]:hover:bg-primary-500',
+    'data-[outside-month]:text-description/40',
+    'data-[disabled]:text-description/40 data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-transparent',
+    'data-[unavailable]:line-through data-[unavailable]:text-description/50 data-[unavailable]:cursor-not-allowed',
+    // Range selection visual layer.
+    'data-[selection-start]:rounded-l-sm data-[selection-end]:rounded-r-sm',
+    'data-[selection-start]:bg-primary-500 data-[selection-end]:bg-primary-500',
+    ...etc,
+  );
+
+export const calendarTheme: Theme<CalendarStyleProps> = {
+  root,
+  nav,
+  caption_label,
+  button_previous,
+  button_next,
+  month_grid,
+  weekdays,
+  weekday,
+  day,
+};