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

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,7 +5,6 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { withTheme } from '../../testing';
-
 import { Link } from './Link';
 
 const 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 Comp = asChild ? Slot : Primitive.a;
-    return <Comp {...props} className={tx('link.root', { variant }, classNames)} ref={forwardedRef} />;
+    return (
+      <Comp
+        {...props}
+        target={target}
+        rel={rel}
+        className={tx('link.root', { variant }, classNames)}
+        ref={forwardedRef}
+      />
+    );
   },
 );

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

@@ -13,7 +13,6 @@ 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 = {
@@ -177,7 +176,7 @@ 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 pt-2'>{text}</ListItem.Heading>
               <ListItem.Endcap>

package/src/components/List/List.theme.ts

@@ -0,0 +1,47 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { densityBlockSize, ghostHover } from '@dxos/ui-theme';
+import { getSize, mx } from '@dxos/ui-theme';
+import { type ComponentFunction, type Density, type Theme } from '@dxos/ui-types';
+
+export type ListStyleProps = Partial<{
+  density: Density;
+  collapsible: boolean;
+}>;
+
+const root: ComponentFunction<ListStyleProps> = (_, ...etc) => mx(...etc);
+
+const item: ComponentFunction<ListStyleProps> = ({ collapsible }, ...etc) => mx(!collapsible && 'flex', ...etc);
+
+const itemEndcap: ComponentFunction<ListStyleProps> = ({ density }, ...etc) =>
+  mx(
+    density === 'lg' ? getSize(10) : density === 'sm' ? getSize(7) : density === 'xs' ? getSize(6) : getSize(8),
+    'shrink-0 flex items-center justify-center',
+    ...etc,
+  );
+
+const itemHeading: ComponentFunction<ListStyleProps> = ({ density }, ...etc) =>
+  mx(densityBlockSize(density), 'flex items-center overflow-hidden [&>span]:truncate', ...etc);
+
+const itemDragHandleIcon: ComponentFunction<ListStyleProps> = (_props, ...etc) => mx(getSize(5), 'mt-2.5', ...etc);
+
+const itemOpenTrigger: ComponentFunction<ListStyleProps> = ({ density }, ...etc) =>
+  mx('w-5 rounded-sm flex justify-center items-center', densityBlockSize(density), ghostHover, 'dx-focus-ring', ...etc);
+
+const itemOpenTriggerIcon: ComponentFunction<ListStyleProps> = (_props, ...etc) => {
+  return mx(getSize(5), ...etc);
+};
+
+export const listTheme: Theme<ListStyleProps> = {
+  root,
+  item: {
+    root: item,
+    endcap: itemEndcap,
+    heading: itemHeading,
+    dragHandleIcon: itemDragHandleIcon,
+    openTrigger: itemOpenTrigger,
+    openTriggerIcon: itemOpenTriggerIcon,
+  },
+};

package/src/components/List/List.tsx

@@ -27,21 +27,22 @@ import {
 import { type Density } from '@dxos/ui-types';
 
 import { useDensityContext, useThemeContext } from '../../hooks';
+import { DensityProvider } from '../../primitives';
+import { composable, composableProps } from '../../util';
 import { type ThemedClassName } from '../../util';
-import { DensityProvider } from '../DensityProvider';
 import { Icon } from '../Icon';
-
 import { ListDropIndicator } from './ListDropIndicator';
 
-type ListProps = ThemedClassName<ListPrimitiveProps> & { density?: Density };
+type ListProps = ThemedClassName<ListPrimitiveProps & { density?: Density }>;
 
-const List = forwardRef<HTMLOListElement, ListProps>(({ classNames, children, ...props }, forwardedRef) => {
+const List = composable<HTMLOListElement, ListProps>(({ children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext(props.density);
+  const { className, ...rest } = composableProps(props);
 
   return (
     <DensityProvider density={density}>
-      <ListPrimitive {...props} className={tx('list.root', {}, classNames)} ref={forwardedRef}>
+      <ListPrimitive {...rest} className={tx('list.root', {}, className)} ref={forwardedRef}>
         {children}
       </ListPrimitive>
     </DensityProvider>
@@ -74,7 +75,7 @@ const MockListItemOpenTrigger = ({
 }: ThemedClassName<Omit<ComponentPropsWithoutRef<'div'>, 'children'>>) => {
   const density = useDensityContext();
   const { tx } = useThemeContext();
-  return <div role='none' {...props} className={tx('list.item.openTrigger', { density }, classNames)} />;
+  return <div {...props} className={tx('list.item.openTrigger', { density }, classNames)} />;
 };
 
 type ListItemHeadingProps = ThemedClassName<ListPrimitiveItemHeadingProps>;
@@ -89,7 +90,7 @@ const ListItemHeading = forwardRef<HTMLParagraphElement, ListItemHeadingProps>(
         className={tx('list.item.heading', { density }, classNames)}
         ref={forwardedRef}
       >
-        {children}
+        <span>{children}</span>
       </ListPrimitiveItemHeading>
     );
   },

package/src/components/List/ListDropIndicator.tsx

@@ -52,7 +52,6 @@ export const ListDropIndicator = ({
 
   return (
     <div
-      role='none'
       style={
         {
           '--line-thickness': `${strokeSize}px`,
@@ -64,7 +63,7 @@ export const ListDropIndicator = ({
           '--offset-terminal': `${offsetToAlignTerminalWithLine}px`,
         } as CSSProperties
       }
-      className={`absolute z-10 pointer-events-none bg-accent-surface before:content-[''] before:w-(--terminal-size) before:h-(--terminal-size) box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accent-surface before:rounded-full ${orientationStyles[orientation]} ${edgeStyles[edge]}`}
+      className={`absolute z-10 pointer-events-none bg-accent-bg before:content-[''] before:w-(--terminal-size) before:h-(--terminal-size) box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accent-bg before:rounded-full ${orientationStyles[orientation]} ${edgeStyles[edge]}`}
     />
   );
 };

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

@@ -6,7 +6,6 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { withTheme } from '../../testing';
-
 import { Tree, TreeItem } from './Tree';
 
 type StorybookTreeProps = {
@@ -25,7 +24,7 @@ const createKey = (key: string, prefix?: string) => (prefix === undefined ? key
 const StorybookTreeItem = ({ data, prefix }: StorybookTreeItemProps) => {
   const keys = Array.isArray(data) ? Array.from(data.keys()) : Object.keys(data);
   return (
-    <Tree.Root density='fine'>
+    <Tree.Root>
       {keys.map((key) => {
         const id = createKey(String(key), prefix);
         const value = data[key as keyof typeof data];
@@ -33,7 +32,7 @@ const StorybookTreeItem = ({ data, prefix }: StorybookTreeItemProps) => {
 
         return (
           <TreeItem.Root key={id} id={id} collapsible={!valueIsScalar} defaultOpen>
-            <div role='none' className='grow flex'>
+            <div className='grow flex'>
               {valueIsScalar ? <TreeItem.MockOpenTrigger /> : <TreeItem.OpenTrigger />}
               <TreeItem.Heading classNames='grow pt-1'>{valueIsScalar ? String(value) : key}</TreeItem.Heading>
             </div>

package/src/components/List/Tree.tsx

@@ -5,7 +5,6 @@
 import React, { type ComponentPropsWithoutRef, type FC, type ForwardRefExoticComponent, forwardRef } from 'react';
 
 import { type ThemedClassName } from '../../util';
-
 import {
   LIST_ITEM_NAME,
   List,