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

package/src/components/Column/Column.stories.tsx

@@ -0,0 +1,181 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { Input, ScrollArea } from '../../components';
+import { withLayout, withTheme } from '../../testing';
+import { Column } from './Column';
+
+const List = () => {
+  return (
+    <ScrollArea.Root centered>
+      <ScrollArea.Viewport>
+        {Array.from({ length: 100 }).map((_, i) => (
+          <Input.Root key={i}>
+            <Input.TextInput value={`Item ${i}`} readOnly />
+          </Input.Root>
+        ))}
+      </ScrollArea.Viewport>
+    </ScrollArea.Root>
+  );
+};
+
+const DefaultStory = () => {
+  return (
+    <Column.Root classNames='overflow-hidden' gutter='md'>
+      <Column.Center>
+        <h1 className='p-1 bg-blue-500 text-black'>Header</h1>
+      </Column.Center>
+
+      <Column.Row>
+        <div className='p-1 bg-blue-500'>A</div>
+        <div className='p-1 bg-red-500'>B</div>
+        <div className='p-1 bg-blue-500'>C</div>
+      </Column.Row>
+
+      <Column.Center asChild>
+        <div>
+          <Input.Root>
+            <Input.TextInput placeholder='Search' />
+          </Input.Root>
+        </div>
+      </Column.Center>
+
+      <ScrollArea.Root orientation='vertical' padding>
+        <ScrollArea.Viewport>
+          <div className='flex flex-col gap-2'>
+            {Array.from({ length: 100 }).map((_, i) => (
+              <Input.Root key={i}>
+                <Input.TextInput value={`Item ${i}`} readOnly />
+              </Input.Root>
+            ))}
+          </div>
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
+
+      <Column.Center asChild>
+        <div className='flex flex-col'>
+          <h1 className='p-1 bg-red-500 text-black'>Section with overflow</h1>
+          <pre className='p-1 text-xs text-subdued overflow-auto'>{new Error().stack}</pre>
+        </div>
+      </Column.Center>
+
+      <Column.Center>
+        <div className='p-1 bg-green-500 text-black'>Footer</div>
+      </Column.Center>
+    </Column.Root>
+  );
+};
+
+const meta: Meta = {
+  title: 'ui/react-ui-core/components/Column',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'w-[25rem]' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+const InputList = ({ items = 50 }: { items?: number }) => (
+  <div className='flex flex-col gap-2'>
+    {Array.from({ length: items }).map((_, index) => (
+      <Input.Root key={index}>
+        <Input.TextInput value={`Item ${index + 1}`} readOnly />
+      </Input.Root>
+    ))}
+  </div>
+);
+
+export const WithScrollArea = {
+  decorators: [withLayout({ layout: 'column' })],
+  render: () => (
+    <Column.Root classNames='overflow-hidden' gutter='md'>
+      <Column.Center>
+        <h2>Header</h2>
+      </Column.Center>
+      <ScrollArea.Root padding centered orientation='vertical'>
+        <ScrollArea.Viewport>
+          <InputList items={30} />
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
+      <Column.Center>
+        <h2>Footer</h2>
+      </Column.Center>
+    </Column.Root>
+  ),
+};
+
+/**
+ * Column.Center places a single element in the center column of the parent grid.
+ * Preferred for centered content — safe to nest
+ * compound components (Form.Root, Editor.Root, etc.) that render `display: contents`.
+ */
+export const WithCenter: Story = {
+  decorators: [withLayout({ classNames: 'w-[25rem]' })],
+  render: () => (
+    <Column.Root gutter='md'>
+      <Column.Center>
+        <h2>Header (Column.Center)</h2>
+      </Column.Center>
+      <Column.Center classNames='flex flex-col'>
+        <p>This text is inside Column.Center. It sits in the central column between the gutters.</p>
+        <Input.Root>
+          <Input.Label>Name</Input.Label>
+          <Input.TextInput placeholder='Enter name' />
+        </Input.Root>
+      </Column.Center>
+      <Column.Center>
+        <h2>Footer (Column.Center)</h2>
+      </Column.Center>
+    </Column.Root>
+  ),
+};
+
+/**
+ * ScrollArea auto-bleeds inside Column.Root (via [.dx-column_&]:col-span-full).
+ * No Column.Bleed wrapper needed.
+ */
+export const WithScrollAreaAutoBleed: Story = {
+  decorators: [withLayout({ layout: 'column', classNames: 'w-[25rem]' })],
+  render: () => (
+    <Column.Root classNames='overflow-hidden' gutter='md'>
+      <Column.Center>
+        <h2>Header (Column.Center)</h2>
+      </Column.Center>
+      <ScrollArea.Root orientation='vertical' padding thin>
+        <ScrollArea.Viewport>
+          <InputList items={30} />
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
+      <Column.Center>
+        <h2>Footer (Column.Center)</h2>
+      </Column.Center>
+    </Column.Root>
+  ),
+};
+
+export const Experimental = {
+  render: () => {
+    return (
+      <div className='grid grid-cols-[2rem_1fr_2rem]'>
+        <div className='col-span-full grid grid-cols-subgrid'>
+          <div className='bg-red-surface'>A</div>
+          <div className='bg-green-surface'>B</div>
+          <div className='bg-blue-surface'>C</div>
+        </div>
+        <div className='col-span-full grid grid-cols-subgrid col-start-2'>
+          <div className='bg-green-surface'>B</div>
+        </div>
+      </div>
+    );
+  },
+};

package/src/components/Column/Column.theme.ts

@@ -0,0 +1,48 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import { type ComponentFunction } from '@dxos/ui-types';
+
+import { withColumn } from './withColumn';
+
+export type ColumnStyleProps = {};
+
+const root: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
+  return mx('dx-column-root grid', ...etc);
+};
+
+/**
+ * Three-column icon-slot row: spans all 3 columns of the parent Column.Root grid.
+ * Uses CSS subgrid to inherit column sizing from the parent Column.
+ * Children map to: [col-1: icon/slot] [col-2: content] [col-3: icon/action].
+ * NOTE: Must not use overflow-hidden here since it will clip input focus rings.
+ */
+const row: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
+  return mx('col-span-3 grid grid-cols-subgrid', ...etc);
+};
+
+/**
+ * Bleed placement: spans all 3 columns of the parent Column.Root grid (gutter-to-gutter).
+ * Use for `ScrollArea`, full-width dividers, tables, or any content that should ignore gutters.
+ */
+const bleed: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
+  return mx('col-span-full grid grid-cols-subgrid min-h-0', ...etc);
+};
+
+/**
+ * Center placement: places the element in column 2 (the central track between gutters) of the
+ * parent Column.Root grid. Does NOT use subgrid — placement is explicit on this element only.
+ * Safe to nest arbitrary compound components (including those that render `display: contents`).
+ */
+const center: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
+  return mx(withColumn.center(), 'min-h-0', ...etc);
+};
+
+export const columnTheme = {
+  root,
+  row,
+  bleed,
+  center,
+};

package/src/components/Column/Column.tsx

@@ -0,0 +1,166 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import React, { type CSSProperties } from 'react';
+
+import { type SlottableProps } from '@dxos/ui-types';
+
+import { useThemeContext } from '../../hooks';
+import { composableProps, slottable } from '../../util';
+
+//
+// Root
+//
+
+const COLUMN_ROOT_NAME = 'Column.Root';
+
+type GutterSize = 'xs' | 'sm' | 'md' | 'lg';
+
+const gutterSizes: Record<GutterSize, string> = {
+  xs: 'var(--dx-gutter-xs)',
+  sm: 'var(--dx-gutter-sm)',
+  md: 'var(--dx-gutter-md)',
+  lg: 'var(--dx-gutter-lg)',
+};
+
+type ColumnRootProps = { gutter?: GutterSize };
+
+/**
+ * Creates a 3-column CSS grid with left/right gutter columns and a center content column.
+ * Sets `--gutter` and `--dx-col` CSS variables for nested components.
+ *
+ * `--dx-col` defaults to `2 / span 1` (center column),
+ * enabling `withColumn` utilities to cascade the correct grid placement to slotted children.
+ *
+ * Direct children participate in the grid in one of several ways:
+ * - **Column.Center** — places element in the center column (col 2). Preferred for plain content.
+ * - **Column.Bleed** — spans all 3 columns gutter-to-gutter. Preferred for `ScrollArea` and
+ *   other content that should ignore the gutters.
+ * - **Column.Row** — 3-col subgrid row (icons in gutters, content in center).
+ *
+ * Use `withColumn.center()` / `withColumn.bleed()` helpers to apply placement on slotted elements.
+ *
+ * Gutter sizes: `'sm'` for compact layouts (Dialog); `'md'` (default); `'lg'` for wider spacing.
+ */
+const ColumnRoot = slottable<HTMLDivElement, ColumnRootProps>(
+  ({ children, asChild, role, gutter = 'md', ...props }, forwardedRef) => {
+    const { className, ...rest } = composableProps(props);
+    const Comp = asChild ? Slot : Primitive.div;
+    const { tx } = useThemeContext();
+    const gutterSize = gutterSizes[gutter];
+    return (
+      <Comp
+        {...rest}
+        role={role ?? 'none'}
+        style={
+          {
+            ...rest.style,
+            '--gutter': gutterSize,
+            '--dx-col': '2 / span 1',
+            gridTemplateColumns: [gutterSize, 'minmax(0,1fr)', gutterSize].join(' '),
+          } as CSSProperties
+        }
+        className={tx('column.root', { gutter }, className)}
+        ref={forwardedRef}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+ColumnRoot.displayName = COLUMN_ROOT_NAME;
+
+//
+// Row
+//
+
+const COLUMN_ROW_NAME = 'Column.Row';
+
+type ColumnRowProps = {};
+
+/**
+ * Spans all 3 columns of the parent Column.Root and uses CSS subgrid to inherit their sizing.
+ * Children map to: [col-1: icon/slot] [col-2: content] [col-3: icon/action].
+ * Must be a direct child of Column.Root.
+ */
+const ColumnRow = slottable<HTMLDivElement, ColumnRowProps>(({ children, asChild, role, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot : Primitive.div;
+  const { tx } = useThemeContext();
+  return (
+    <Comp {...rest} role={role ?? 'none'} className={tx('column.row', {}, className)} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
+
+ColumnRow.displayName = COLUMN_ROW_NAME;
+
+//
+// Bleed
+//
+
+const COLUMN_BLEED_NAME = 'Column.Bleed';
+
+type ColumnBleedProps = SlottableProps;
+
+/**
+ * Spans all 3 columns of the parent Column.Root (gutter-to-gutter).
+ * Establishes a CSS subgrid so that grandchildren can participate in the parent column tracks.
+ * Use for `ScrollArea`, full-width dividers, tables, or any content that should ignore the gutters.
+ */
+const ColumnBleed = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot : Primitive.div;
+  return (
+    <Comp {...rest} className={tx('column.bleed', {}, className)} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
+
+ColumnBleed.displayName = COLUMN_BLEED_NAME;
+
+//
+// Center
+//
+
+const COLUMN_CENTER_NAME = 'Column.Center';
+
+type ColumnCenterProps = SlottableProps;
+
+/**
+ * Places its element in column 2 (the center track between gutters) of the parent Column.Root.
+ * Does NOT use subgrid — placement is explicit on this element only, so it is safe to nest
+ * arbitrary compound components (including ones that render `display: contents` wrappers).
+ */
+const ColumnCenter = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot : Primitive.div;
+  return (
+    <Comp {...rest} className={tx('column.center', {}, className)} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
+
+ColumnCenter.displayName = COLUMN_CENTER_NAME;
+
+//
+// Column
+//
+
+export const Column = {
+  Root: ColumnRoot,
+  Row: ColumnRow,
+  Bleed: ColumnBleed,
+  Center: ColumnCenter,
+};
+
+export type { ColumnRootProps, ColumnRowProps, ColumnBleedProps, ColumnCenterProps };

package/src/components/Column/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './Column';
+export * from './withColumn';

package/src/components/Column/withColumn.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+/**
+ * Column-aware theme utilities.
+ * Components apply these in their theme functions to participate in the Column grid
+ * without importing Column React components.
+ *
+ * CSS custom property cascade:
+ * - Column.Root sets `--dx-col: 2 / span 1` (center column placement).
+ * - ScrollArea.Viewport resets `--dx-col: auto` after consuming `--gutter`.
+ * - Components apply `grid-column: var(--dx-col, auto)` to auto-center in Column
+ *   or do nothing outside Column / inside ScrollArea.
+ */
+export const withColumn = {
+  /** Centers element in the Column grid via --dx-col. No-op outside Column or inside ScrollArea. */
+  center: () => '[grid-column:var(--dx-col,auto)]',
+
+  /** Propagates the Column grid to children via subgrid. No-op outside Column.
+   *  Direct children default to center column unless they are a dx-container (ScrollArea). */
+  propagate: () =>
+    '[.dx-column-root_&]:col-span-full [.dx-column-root_&]:grid [.dx-column-root_&]:grid-cols-subgrid [.dx-column-root_&]:[&>*:not(.dx-container)]:[grid-column:var(--dx-col,auto)]',
+
+  /** Resets --dx-col after consuming --gutter. Applied by ScrollArea.Viewport. */
+  consumed: () => '[--dx-col:auto]',
+};

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -0,0 +1,102 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { format } from 'date-fns';
+import React, { useState } from 'react';
+
+import { withTheme } from '../../testing';
+import { translations } from '../../translations';
+import { type DateRange } from '../Calendar';
+import { Input } from '../Input';
+import { DatePicker } from './DatePicker';
+
+const toTime = (date: Date | undefined) => (date ? format(date, 'HH:mm') : '');
+const applyTime = (date: Date | undefined, time: string): Date => {
+  const [hours, minutes] = time.split(':').map((part) => parseInt(part, 10));
+  const out = date ? new Date(date) : new Date();
+  out.setHours(Number.isFinite(hours) ? hours : 0, Number.isFinite(minutes) ? minutes : 0, 0, 0);
+  return out;
+};
+
+const meta: Meta<typeof DatePicker.Root> = {
+  title: 'ui/react-ui-core/components/DatePicker',
+  decorators: [withTheme()],
+  parameters: { layout: 'centered', translations },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Single: Story = {
+  render: () => {
+    const [value, setValue] = useState<Date | undefined>();
+    return (
+      <DatePicker.Root mode='single' value={value} onValueChange={setValue}>
+        <DatePicker.Trigger />
+        <DatePicker.Content>
+          <DatePicker.Calendar />
+        </DatePicker.Content>
+      </DatePicker.Root>
+    );
+  },
+};
+
+export const Range: Story = {
+  render: () => {
+    const [value, setValue] = useState<DateRange | undefined>();
+    return (
+      <DatePicker.Root mode='range' value={value} onValueChange={setValue}>
+        <DatePicker.Trigger />
+        <DatePicker.Content>
+          <DatePicker.Calendar />
+        </DatePicker.Content>
+      </DatePicker.Root>
+    );
+  },
+};
+
+export const SingleWithTime: Story = {
+  render: () => {
+    const [value, setValue] = useState<Date | undefined>();
+    return (
+      <DatePicker.Root mode='single' withTime value={value} onValueChange={setValue}>
+        <DatePicker.Trigger format='PPP p' />
+        <DatePicker.Content>
+          <DatePicker.Calendar />
+          <Input.Root>
+            <Input.Time value={toTime(value)} onValueChange={(next) => setValue(applyTime(value, next))} />
+          </Input.Root>
+        </DatePicker.Content>
+      </DatePicker.Root>
+    );
+  },
+};
+
+export const RangeWithTime: Story = {
+  render: () => {
+    const [value, setValue] = useState<DateRange | undefined>();
+    return (
+      <DatePicker.Root mode='range' withTime value={value} onValueChange={setValue}>
+        <DatePicker.Trigger format='PPP p' />
+        <DatePicker.Content>
+          <DatePicker.Calendar />
+          <Input.Root>
+            <Input.Time
+              value={toTime(value?.from)}
+              onValueChange={(next) => setValue(value ? { ...value, from: applyTime(value.from, next) } : undefined)}
+            />
+          </Input.Root>
+          <Input.Root>
+            <Input.Time
+              value={toTime(value?.to)}
+              onValueChange={(next) => setValue(value?.from ? { ...value, to: applyTime(value.to, next) } : undefined)}
+            />
+          </Input.Root>
+        </DatePicker.Content>
+      </DatePicker.Root>
+    );
+  },
+};

package/src/components/DatePicker/DatePicker.theme.ts

@@ -0,0 +1,35 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import { type ComponentFunction, type Theme } from '@dxos/ui-types';
+
+export type DatePickerStyleProps = Partial<{
+  hasValue: boolean;
+}>;
+
+const trigger: ComponentFunction<DatePickerStyleProps> = ({ hasValue }, ...etc) =>
+  mx(
+    'inline-flex w-fit items-center gap-2 px-2 rounded-sm border border-separator',
+    'bg-input-surface text-base-fg',
+    'hover:bg-hover-surface focus-visible:outline-2 focus-visible:outline-primary-500',
+    !hasValue && 'text-description',
+    ...etc,
+  );
+
+const content: ComponentFunction<DatePickerStyleProps> = (_p, ...etc) => mx('flex flex-col gap-2 p-2', ...etc);
+
+const timeField: ComponentFunction<DatePickerStyleProps> = (_p, ...etc) =>
+  mx(
+    'flex items-center gap-2 px-2 py-1',
+    '[&_input]:bg-input-surface [&_input]:border [&_input]:border-separator',
+    '[&_input]:rounded-sm [&_input]:px-2 [&_input]:py-1',
+    ...etc,
+  );
+
+export const datePickerTheme: Theme<DatePickerStyleProps> = {
+  trigger,
+  content,
+  timeField,
+};