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

package/src/components/Input/SegmentedInput.tsx

@@ -0,0 +1,454 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+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 {
+  DateField,
+  type DateFieldProps,
+  DateInput,
+  DateSegment,
+  TimeField,
+  type TimeFieldProps,
+} from 'react-aria-components';
+
+import { INPUT_NAME, type InputScopedProps, useInputContext } from '@dxos/react-input';
+
+import { useDensityContext, useElevationContext, useThemeContext } from '../../hooks';
+import { type ThemedClassName } from '../../util';
+import { DatePicker } from '../DatePicker';
+import { Popover } from '../Popover';
+import { type InputSharedProps, useInputTrigger } from './Input';
+
+//
+// Value <-> @internationalized/date adapters.
+//
+
+const tryParse = <T,>(parser: (input: string) => T, value: string | undefined): T | null => {
+  if (!value) {
+    return null;
+  }
+  try {
+    return parser(value);
+  } catch {
+    return null;
+  }
+};
+
+const pad = (value: number, length = 2) => String(value).padStart(length, '0');
+
+const formatCalendarDate = (date: CalendarDate): string => `${pad(date.year, 4)}-${pad(date.month)}-${pad(date.day)}`;
+
+const formatCalendarDateTime = (datetime: CalendarDateTime): string =>
+  `${pad(datetime.year, 4)}-${pad(datetime.month)}-${pad(datetime.day)}` +
+  `T${pad(datetime.hour)}:${pad(datetime.minute)}`;
+
+const formatTime = (time: Time): string => `${pad(time.hour)}:${pad(time.minute)}`;
+
+const toCalendarDate = (date: Date) => new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
+
+//
+// Theming.
+//
+
+const fieldClass = 'inline-flex items-center gap-px font-mono 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
+// caret is visible while typing — friendlier UX even though it's slightly misleading mid-segment.
+//
+// `tabular-nums` on the field combined with `min-width` per segment keeps each segment a fixed
+// 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]! ' +
+  '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-[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';
+
+// 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
+// alignment with date fields. Keep them in the DOM (so directional isolation survives) but
+// collapse them to zero width.
+const BIDI_FORMAT_RE = /^[‪-‮⁦-⁩]+$/;
+
+/**
+ * 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 }) => {
+  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' />;
+    }
+    if (segment.text.includes(',')) {
+      return (
+        <span aria-hidden className='select-none'>
+          {' '}
+        </span>
+      );
+    }
+  }
+  return <DateSegment segment={segment as any} className={segmentClass} />;
+};
+
+//
+// Shared props.
+//
+
+type SegmentedInputBaseProps = InputSharedProps &
+  ThemedClassName<{
+    id?: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    'aria-label'?: string;
+  }>;
+
+type SegmentedTimeBearingProps = SegmentedInputBaseProps & {
+  /** `24` (default) renders HH:mm; `12` renders hh:mm with an AM/PM segment. */
+  hourCycle?: 12 | 24;
+};
+
+//
+// Internal helpers.
+//
+
+const useFieldChrome = ({
+  __inputScope,
+  density: densityProp,
+  elevation: elevationProp,
+}: {
+  __inputScope?: any;
+  density: InputSharedProps['density'];
+  elevation: InputSharedProps['elevation'];
+}) => {
+  const { tx } = useThemeContext();
+  const density = useDensityContext(densityProp);
+  const elevation = useElevationContext(elevationProp);
+  const { id: contextId, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
+  return { tx, density, elevation, validationValence, contextId, descriptionId, errorMessageId };
+};
+
+/**
+ * Wraps a field with `Popover.Anchor` and a `DatePicker.Root` whose open state is driven by
+ * the surrounding `Input.Root`'s registered trigger. `Input.TriggerIcon` (a sibling under
+ * `Input.Root`) calls the registered handler on press; the popover anchors to this field.
+ */
+const PickerWrapper = ({
+  pickerValue,
+  onPickerChange,
+  withTime,
+  disabled = false,
+  children,
+  calendar,
+}: {
+  pickerValue: Date | undefined;
+  onPickerChange: (next: Date | undefined) => void;
+  withTime: boolean;
+  disabled?: boolean;
+  children: React.ReactNode;
+  calendar: React.ReactNode;
+}) => {
+  const [open, setOpen] = useState(false);
+  const openPicker = useCallback(() => {
+    if (!disabled) {
+      setOpen(true);
+    }
+  }, [disabled]);
+  useInputTrigger(disabled ? undefined : openPicker);
+  return (
+    <DatePicker.Root
+      mode='single'
+      withTime={withTime}
+      value={pickerValue}
+      onValueChange={disabled ? undefined : onPickerChange}
+      open={open}
+      onOpenChange={setOpen}
+    >
+      <Popover.Anchor asChild>{children}</Popover.Anchor>
+      <DatePicker.Content>{calendar}</DatePicker.Content>
+    </DatePicker.Root>
+  );
+};
+
+//
+// SegmentedDate.
+//
+
+type SegmentedDateProps = SegmentedInputBaseProps;
+
+const SegmentedDate = forwardRef<HTMLDivElement, InputScopedProps<SegmentedDateProps>>(
+  (
+    {
+      __inputScope,
+      classNames,
+      density: densityProp,
+      elevation: elevationProp,
+      variant,
+      value,
+      defaultValue,
+      onValueChange,
+      disabled,
+      autoFocus,
+      id,
+      'aria-label': ariaLabel,
+    },
+    forwardedRef,
+  ) => {
+    const { tx, density, elevation, validationValence, contextId, descriptionId, errorMessageId } = useFieldChrome({
+      __inputScope,
+      density: densityProp,
+      elevation: elevationProp,
+    });
+
+    const [stringValue, setStringValue] = useControllableState<string>({
+      prop: value,
+      defaultProp: defaultValue ?? '',
+      onChange: onValueChange,
+    });
+
+    const parsed = tryParse(parseDate, stringValue);
+
+    const fieldProps: DateFieldProps<CalendarDate> = {
+      value: parsed,
+      onChange: (next) => setStringValue(next ? formatCalendarDate(next) : ''),
+      isDisabled: disabled,
+      autoFocus,
+      'aria-label': ariaLabel ?? 'date',
+      granularity: 'day',
+      shouldForceLeadingZeros: true,
+    };
+
+    const field = (
+      <DateField {...fieldProps}>
+        <DateInput
+          ref={forwardedRef}
+          {...((id ?? contextId) ? { id: id ?? contextId } : {})}
+          {...(descriptionId ? { 'aria-describedby': descriptionId } : {})}
+          {...(validationValence === 'error' && errorMessageId
+            ? { 'aria-invalid': true, 'aria-errormessage': errorMessageId }
+            : {})}
+          data-density={density}
+          className={tx(
+            'input.input',
+            { variant, disabled, density, elevation, validationValence },
+            fieldClass,
+            classNames,
+          )}
+        >
+          {renderSegment}
+        </DateInput>
+      </DateField>
+    );
+
+    return (
+      <PickerWrapper
+        pickerValue={parsed ? new Date(parsed.year, parsed.month - 1, parsed.day) : undefined}
+        onPickerChange={(next) => setStringValue(next ? formatCalendarDate(toCalendarDate(next)) : '')}
+        withTime={false}
+        disabled={disabled}
+        calendar={<DatePicker.Calendar />}
+      >
+        {field}
+      </PickerWrapper>
+    );
+  },
+);
+SegmentedDate.displayName = 'Input.SegmentedDate';
+
+//
+// SegmentedTime — no picker (no time-only picker primitive available); does not register a trigger.
+//
+
+type SegmentedTimeProps = SegmentedTimeBearingProps;
+
+const SegmentedTime = forwardRef<HTMLDivElement, InputScopedProps<SegmentedTimeProps>>(
+  (
+    {
+      __inputScope,
+      classNames,
+      density: densityProp,
+      elevation: elevationProp,
+      variant,
+      value,
+      defaultValue,
+      onValueChange,
+      disabled,
+      autoFocus,
+      id,
+      hourCycle = 24,
+      'aria-label': ariaLabel,
+    },
+    forwardedRef,
+  ) => {
+    const { tx, density, elevation, validationValence, contextId, descriptionId, errorMessageId } = useFieldChrome({
+      __inputScope,
+      density: densityProp,
+      elevation: elevationProp,
+    });
+
+    const [stringValue, setStringValue] = useControllableState<string>({
+      prop: value,
+      defaultProp: defaultValue ?? '',
+      onChange: onValueChange,
+    });
+
+    const parsed = tryParse(parseTime, stringValue);
+
+    const fieldProps: TimeFieldProps<Time> = {
+      value: parsed,
+      onChange: (next) => setStringValue(next ? formatTime(next) : ''),
+      isDisabled: disabled,
+      autoFocus,
+      'aria-label': ariaLabel ?? 'time',
+      granularity: 'minute',
+      hourCycle,
+      shouldForceLeadingZeros: true,
+    };
+
+    return (
+      <TimeField {...fieldProps}>
+        <DateInput
+          ref={forwardedRef}
+          {...((id ?? contextId) ? { id: id ?? contextId } : {})}
+          {...(descriptionId ? { 'aria-describedby': descriptionId } : {})}
+          {...(validationValence === 'error' && errorMessageId
+            ? { 'aria-invalid': true, 'aria-errormessage': errorMessageId }
+            : {})}
+          data-density={density}
+          className={tx(
+            'input.input',
+            { variant, disabled, density, elevation, validationValence },
+            fieldClass,
+            classNames,
+          )}
+        >
+          {renderSegment}
+        </DateInput>
+      </TimeField>
+    );
+  },
+);
+SegmentedTime.displayName = 'Input.SegmentedTime';
+
+//
+// SegmentedDateTime.
+//
+
+type SegmentedDateTimeProps = SegmentedTimeBearingProps;
+
+const SegmentedDateTime = forwardRef<HTMLDivElement, InputScopedProps<SegmentedDateTimeProps>>(
+  (
+    {
+      __inputScope,
+      classNames,
+      density: densityProp,
+      elevation: elevationProp,
+      variant,
+      value,
+      defaultValue,
+      onValueChange,
+      disabled,
+      autoFocus,
+      id,
+      hourCycle = 24,
+      'aria-label': ariaLabel,
+    },
+    forwardedRef,
+  ) => {
+    const { tx, density, elevation, validationValence, contextId, descriptionId, errorMessageId } = useFieldChrome({
+      __inputScope,
+      density: densityProp,
+      elevation: elevationProp,
+    });
+
+    const [stringValue, setStringValue] = useControllableState<string>({
+      prop: value,
+      defaultProp: defaultValue ?? '',
+      onChange: onValueChange,
+    });
+
+    const parsed = tryParse(parseDateTime, stringValue);
+
+    const fieldProps: DateFieldProps<CalendarDateTime> = {
+      value: parsed,
+      onChange: (next) => setStringValue(next ? formatCalendarDateTime(next) : ''),
+      isDisabled: disabled,
+      autoFocus,
+      'aria-label': ariaLabel ?? 'date-time',
+      granularity: 'minute',
+      hourCycle,
+      shouldForceLeadingZeros: true,
+    };
+
+    const field = (
+      <DateField {...fieldProps}>
+        <DateInput
+          ref={forwardedRef}
+          {...((id ?? contextId) ? { id: id ?? contextId } : {})}
+          {...(descriptionId ? { 'aria-describedby': descriptionId } : {})}
+          {...(validationValence === 'error' && errorMessageId
+            ? { 'aria-invalid': true, 'aria-errormessage': errorMessageId }
+            : {})}
+          data-density={density}
+          className={tx(
+            'input.input',
+            { variant, disabled, density, elevation, validationValence },
+            fieldClass,
+            classNames,
+          )}
+        >
+          {renderSegment}
+        </DateInput>
+      </DateField>
+    );
+
+    return (
+      <PickerWrapper
+        pickerValue={
+          parsed ? new Date(parsed.year, parsed.month - 1, parsed.day, parsed.hour, parsed.minute) : undefined
+        }
+        onPickerChange={(next) =>
+          setStringValue(
+            next
+              ? formatCalendarDateTime(
+                  new CalendarDateTime(
+                    next.getFullYear(),
+                    next.getMonth() + 1,
+                    next.getDate(),
+                    next.getHours(),
+                    next.getMinutes(),
+                  ),
+                )
+              : '',
+          )
+        }
+        withTime
+        disabled={disabled}
+        calendar={<DatePicker.Calendar />}
+      >
+        {field}
+      </PickerWrapper>
+    );
+  },
+);
+SegmentedDateTime.displayName = 'Input.SegmentedDateTime';
+
+export { SegmentedDate, SegmentedTime, SegmentedDateTime };
+
+export type { SegmentedDateProps, SegmentedTimeProps, SegmentedDateTimeProps };

package/src/components/Input/constants.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export const inputTextLabel = 'py-1 text-sm text-description';

package/src/components/Input/index.ts

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

package/src/components/Link/Link.stories.tsx

@@ -5,13 +5,12 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { withTheme } from '../../testing';
-
 import { Link } from './Link';
 
 const meta = {
-  title: 'ui/react-ui-core/Link',
+  title: 'ui/react-ui-core/components/Link',
   component: Link,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof Link>;
 
 export default meta;

package/src/components/Link/Link.theme.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import { type ComponentFunction, type Theme } from '@dxos/ui-types';
+
+export type LinkStyleProps = {
+  variant?: 'accent' | 'neutral';
+};
+
+const root: ComponentFunction<LinkStyleProps> = ({ variant }, ...etc) => mx('dx-link', ...etc);
+
+export const linkTheme: Theme<LinkStyleProps> = {
+  root,
+};

package/src/components/Link/Link.tsx

@@ -16,9 +16,17 @@ export type LinkProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.a
   }>;
 
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
-  ({ asChild, variant, classNames, ...props }, forwardedRef) => {
+  ({ classNames, asChild, variant, target = '_blank', rel = 'noreferrer', ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const Root = asChild ? Slot : Primitive.a;
-    return <Root {...props} className={tx('link.root', 'link', { variant }, classNames)} ref={forwardedRef} />;
+    const Comp = asChild ? Slot : Primitive.a;
+    return (
+      <Comp
+        {...props}
+        target={target}
+        rel={rel}
+        className={tx('link.root', { variant }, classNames)}
+        ref={forwardedRef}
+      />
+    );
   },
 );

package/src/components/List/List.stories.tsx

@@ -7,26 +7,18 @@ import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy }
 import { CSS } from '@dnd-kit/utilities';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { type ReactNode, useState } from 'react';
+import React, { type ReactNode, useCallback, useState } from 'react';
 
-import {
-  getSize,
-  ghostHover,
-  ghostSelected,
-  ghostSelectedTrackingInterFromNormal,
-  mx,
-  surfaceShadow,
-} from '@dxos/react-ui-theme';
+import { getSize, ghostHover, mx, surfaceShadow } from '@dxos/ui-theme';
 
 import { withTheme } from '../../testing';
 import { Icon } from '../Icon';
-
 import { List, ListItem, type ListScopedProps } from './List';
 
 const meta = {
-  title: 'ui/react-ui-core/List',
+  title: 'ui/react-ui-core/components/List',
   component: List,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof List>;
 
 export default meta;
@@ -44,11 +36,11 @@ const UniformListItem = ({ id, text }: { id: string; text: string }) => {
       style={{ transform: CSS.Transform.toString(transform) }}
     >
       <ListItem.Endcap>
-        <Icon icon='ph--dots-six-vertical--regular' classNames={mx(getSize(5), 'mbs-2.5')} />
+        <Icon icon='ph--dots-six-vertical--regular' classNames={mx(getSize(5), 'mt-2.5')} />
       </ListItem.Endcap>
-      <ListItem.Heading classNames='grow pbs-2'>{text}</ListItem.Heading>
+      <ListItem.Heading classNames='grow pt-2'>{text}</ListItem.Heading>
       <ListItem.Endcap>
-        <Icon icon='ph--push-pin--regular' classNames={mx(getSize(5), 'mbs-2.5')} />
+        <Icon icon='ph--push-pin--regular' classNames={mx(getSize(5), 'mt-2.5')} />
       </ListItem.Endcap>
     </ListItem.Root>
   );
@@ -63,16 +55,20 @@ export const UniformSizeDraggable: Story = {
       })),
     );
 
-    const handleDragEnd = (event: DragEndEvent) => {
-      const { active, over } = event;
-      if (active.id !== over?.id) {
-        setItems((items) => {
-          const oldIndex = items.findIndex((item) => item.id === active.id);
-          const newIndex = items.findIndex((item) => item.id === over?.id);
-          return arrayMove(items, oldIndex, newIndex);
-        });
-      }
-    };
+    const handleDragEnd = useCallback(
+      (event: DragEndEvent) => {
+        const { active, over } = event;
+        if (active.id !== over?.id) {
+          setItems((items) => {
+            const oldIndex = items.findIndex((item) => item.id === active.id);
+            const newIndex = items.findIndex((item) => item.id === over?.id);
+            return arrayMove(items, oldIndex, newIndex);
+          });
+        }
+      },
+      [items],
+    );
+
     return (
       <DndContext onDragEnd={handleDragEnd}>
         <SortableContext items={items.map(({ id }) => id)} strategy={verticalListSortingStrategy}>
@@ -106,13 +102,13 @@ const ManySizesDraggableListItem = ({
       style={{ transform: CSS.Translate.toString(transform) }}
     >
       <ListItem.Endcap>
-        <Icon icon='ph--dots-six-vertical--regular' classNames={mx(getSize(5), 'mbs-2.5')} />
+        <Icon icon='ph--dots-six-vertical--regular' classNames={mx(getSize(5), 'mt-2.5')} />
       </ListItem.Endcap>
-      <ListItem.Heading classNames='grow pbs-2' asChild>
+      <ListItem.Heading classNames='grow pt-2' asChild>
         {text}
       </ListItem.Heading>
       <ListItem.Endcap>
-        <Icon icon='ph--push-pin--regular' classNames={mx(getSize(5), 'mbs-2.5')} />
+        <Icon icon='ph--push-pin--regular' classNames={mx(getSize(5), 'mt-2.5')} />
       </ListItem.Endcap>
     </ListItem.Root>
   );
@@ -126,9 +122,9 @@ export const ManySizesDraggable: Story = {
         text: (
           <p
             className={mx(
-              index % 3 === 0 ? 'bs-20' : index % 2 === 0 ? 'bs-12' : 'bs-8',
+              index % 3 === 0 ? 'h-20' : index % 2 === 0 ? 'h-12' : 'h-8',
               surfaceShadow({ elevation: 'positioned' }),
-              'mbe-2 p-2 bg-white dark:bg-neutral-800 rounded',
+              'mb-2 p-2 bg-white dark:bg-neutral-800 rounded-sm',
             )}
           >{`List item ${index + 1}`}</p>
         ),
@@ -180,11 +176,11 @@ export const Collapsible: Story = {
       <List {...args}>
         {items.map(({ id, text, body }, index) => (
           <ListItem.Root key={id} id={id} collapsible={index !== 2} defaultOpen={index % 2 === 0}>
-            <div role='none' className='grow flex'>
+            <div className='grow flex'>
               {index !== 2 ? <ListItem.OpenTrigger /> : <ListItem.MockOpenTrigger />}
-              <ListItem.Heading classNames='grow pbs-2'>{text}</ListItem.Heading>
+              <ListItem.Heading classNames='grow pt-2'>{text}</ListItem.Heading>
               <ListItem.Endcap>
-                <Icon icon='ph--push-pin--regular' classNames={mx(getSize(5), 'mbs-2.5')} />
+                <Icon icon='ph--push-pin--regular' classNames={mx(getSize(5), 'mt-2.5')} />
               </ListItem.Endcap>
             </div>
             {index !== 2 && <ListItem.CollapsibleContent>{body}</ListItem.CollapsibleContent>}
@@ -225,11 +221,11 @@ export const SelectableListbox: Story = {
             key={id}
             tabIndex={0}
             selected={selectedId === id}
-            classNames={mx(ghostHover, ghostSelected, ghostSelectedTrackingInterFromNormal)}
+            classNames={mx(ghostHover, 'dx-selected')}
             onClick={() => setSelectedId(id)}
             onKeyUp={(event) => handleKeyUp(event, id)}
           >
-            <ListItem.Heading classNames='flex pli-1 items-center grow truncate'>{text}</ListItem.Heading>
+            <ListItem.Heading classNames='flex px-1 items-center grow truncate'>{text}</ListItem.Heading>
           </ListItem.Root>
         ))}
       </List>