@dashforge/tw 0.9.1-beta → 0.11.0-beta

package/src/components/DateRangePicker/dateRangePicker.variants.ts

@@ -0,0 +1,101 @@
+import { tv } from 'tailwind-variants';
+
+/**
+ * Slots for `<DateRangePicker>` — a bridge-integrated start/end date field
+ * whose trigger is a `<button>` styled as an input, opening a dual-month
+ * range calendar popover.
+ *
+ * Theme identity: bare neutral / brand token-backed classes only — no
+ * `dark:` variants on the neutral palette (the preset CSS-var swap
+ * auto-inverts). See `_shared/themeIdentity.test.ts`.
+ */
+export const dateRangePickerVariants = tv({
+  slots: {
+    root: 'flex flex-col',
+    label: 'block text-sm font-medium text-neutral-900 mb-1',
+    requiredMark: 'text-danger-500 ml-0.5',
+    trigger:
+      'flex items-center gap-2 h-10 min-w-[15rem] rounded-md border border-neutral-300 bg-neutral-50 px-3 text-base text-neutral-900 cursor-pointer transition-colors hover:border-neutral-400 focus-visible:outline-none focus-visible:border-primary-500 focus-visible:ring-2 focus-visible:ring-primary-500/30 disabled:cursor-not-allowed disabled:opacity-60 disabled:bg-neutral-200',
+    value: 'flex-1 truncate text-left',
+    placeholder: 'flex-1 truncate text-left text-neutral-400',
+    icon: 'shrink-0 text-[1rem] text-neutral-500',
+    panel: 'flex gap-3 p-3 select-none',
+    month: 'flex flex-col gap-2',
+    header: 'flex items-center justify-between gap-1',
+    navButton:
+      'inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-[1rem] text-neutral-600 transition-colors hover:bg-neutral-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
+    navSpacer: 'h-7 w-7 shrink-0',
+    monthLabel: 'flex-1 text-center text-sm font-semibold text-neutral-900',
+    grid: 'flex flex-col gap-1',
+    weekdayRow: 'grid grid-cols-7 gap-1',
+    weekday:
+      'flex h-8 items-center justify-center text-xs font-semibold text-neutral-500',
+    weekRow: 'grid grid-cols-7 gap-1',
+    helperText: 'mt-1 text-sm text-neutral-600',
+    errorText: 'mt-1 text-sm text-danger-600',
+  },
+  variants: {
+    layout: {
+      stacked: {},
+      inline: {
+        root: 'flex-row items-start gap-3',
+        label: 'mb-0 pt-2.5 whitespace-nowrap shrink-0',
+      },
+    },
+    error: {
+      true: {
+        trigger:
+          'border-danger-500 hover:border-danger-500 focus-visible:border-danger-500 focus-visible:ring-danger-500/30',
+      },
+    },
+    fullWidth: {
+      true: {
+        root: 'w-full',
+        trigger: 'w-full min-w-0',
+      },
+    },
+  },
+  defaultVariants: {
+    layout: 'stacked',
+    error: false,
+    fullWidth: false,
+  },
+});
+
+/**
+ * Per-day-cell recipe for the range grid. `endpoint` (a committed start/end)
+ * is the solid fill; `inBand` (inside the committed or previewed range) is
+ * the light tint. Declared `inBand` before `endpoint` so an endpoint cell —
+ * which is also in-band — resolves to the solid fill.
+ */
+export const dateRangeDayVariants = tv({
+  base: 'flex h-9 w-9 items-center justify-center rounded-md text-sm text-neutral-900 transition-colors hover:bg-neutral-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500',
+  variants: {
+    inBand: {
+      true: 'bg-primary-100 hover:bg-primary-100',
+    },
+    endpoint: {
+      true: 'bg-primary-600 text-white hover:bg-primary-600',
+    },
+    siblingMonth: {
+      true: 'text-neutral-400',
+    },
+    today: {
+      true: 'font-bold ring-1 ring-inset ring-primary-400',
+    },
+    disabled: {
+      true: 'cursor-default text-neutral-300 opacity-60 hover:bg-transparent',
+    },
+  },
+  compoundVariants: [
+    { endpoint: true, today: true, class: 'ring-0' },
+    { endpoint: true, siblingMonth: true, class: 'text-white' },
+  ],
+  defaultVariants: {
+    inBand: false,
+    endpoint: false,
+    siblingMonth: false,
+    today: false,
+    disabled: false,
+  },
+});

package/src/components/DateTimePicker/DateTimePicker.test.tsx

@@ -1,204 +1,78 @@
 // @vitest-environment jsdom
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, beforeAll } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
-import { DashFormProvider } from '@dashforge/forms';
-import { DateTimePicker, isoToInputValue } from './DateTimePicker.js';
 
-describe('isoToInputValue (pure helper)', () => {
-  it('returns "" for null / undefined / empty', () => {
-    expect(isoToInputValue('date', null)).toBe('');
-    expect(isoToInputValue('date', undefined)).toBe('');
-    expect(isoToInputValue('date', '')).toBe('');
-  });
-
-  it('passes through canonical `YYYY-MM-DD` for date mode', () => {
-    expect(isoToInputValue('date', '2026-05-16')).toBe('2026-05-16');
-  });
-
-  it('passes through canonical `HH:mm` for time mode', () => {
-    expect(isoToInputValue('time', '09:42')).toBe('09:42');
-  });
-
-  it('passes through canonical `HH:mm:ss` for time mode', () => {
-    expect(isoToInputValue('time', '09:42:15')).toBe('09:42:15');
-  });
+import { DateTimePicker } from './DateTimePicker.js';
+
+beforeAll(() => {
+  // Radix Popover (Floating UI) needs ResizeObserver — jsdom lacks it.
+  if (!('ResizeObserver' in globalThis)) {
+    class ResizeObserverStub {
+      observe(): void {
+        /* no-op */
+      }
+      unobserve(): void {
+        /* no-op */
+      }
+      disconnect(): void {
+        /* no-op */
+      }
+    }
+    (globalThis as { ResizeObserver?: unknown }).ResizeObserver =
+      ResizeObserverStub;
+  }
+});
 
-  it('passes through canonical `YYYY-MM-DDTHH:mm` for datetime mode', () => {
-    expect(isoToInputValue('datetime', '2026-05-16T09:42')).toBe(
-      '2026-05-16T09:42'
+describe('DateTimePicker', () => {
+  it('renders a labelled trigger with the placeholder', () => {
+    render(
+      <DateTimePicker name="appt" label="Appointment" placeholder="Pick one" />,
     );
+    expect(screen.queryByText('Appointment')).not.toBeNull();
+    expect(screen.getByRole('button').textContent).toContain('Pick one');
   });
 
-  it('truncates a rich ISO datetime to the date mode prefix', () => {
-    expect(isoToInputValue('date', '2026-05-16T09:42:15.000Z')).toBe(
-      '2026-05-16'
+  it('shows a formatted controlled value', () => {
+    render(<DateTimePicker name="d" value="2026-05-20T14:30" />);
+    expect(screen.getByRole('button').textContent).toContain(
+      'May 20, 2026, 14:30',
     );
   });
 
-  it('returns "" for an unparseable string', () => {
-    expect(isoToInputValue('date', 'not-a-date')).toBe('');
-  });
-});
-
-describe('<DateTimePicker>', () => {
-  describe('standalone (no DashForm)', () => {
-    it('renders a native date input by default', () => {
-      render(<DateTimePicker name="dob" label="DOB" />);
-      const input = screen.getByLabelText('DOB') as HTMLInputElement;
-      expect(input.type).toBe('date');
-    });
-
-    it('renders a time input when mode="time"', () => {
-      render(<DateTimePicker name="t" label="Time" mode="time" />);
-      const input = screen.getByLabelText('Time') as HTMLInputElement;
-      expect(input.type).toBe('time');
-    });
-
-    it('renders a datetime-local input when mode="datetime"', () => {
-      render(<DateTimePicker name="dt" label="When" mode="datetime" />);
-      const input = screen.getByLabelText('When') as HTMLInputElement;
-      expect(input.type).toBe('datetime-local');
-    });
-
-    it('seeds `defaultValue` (uncontrolled)', () => {
-      render(
-        <DateTimePicker name="dob" label="DOB" defaultValue="2026-05-16" />
-      );
-      const input = screen.getByLabelText('DOB') as HTMLInputElement;
-      expect(input.defaultValue).toBe('2026-05-16');
-    });
-
-    it('reflects controlled `value`', () => {
-      render(
-        <DateTimePicker name="dob" label="DOB" value="2026-05-16" />
-      );
-      const input = screen.getByLabelText('DOB') as HTMLInputElement;
-      expect(input.value).toBe('2026-05-16');
-    });
-
-    it('truncates a controlled rich ISO to the date mode prefix', () => {
-      render(
-        <DateTimePicker
-          name="dob"
-          label="DOB"
-          value="2026-05-16T09:42:15.000Z"
-        />
-      );
-      const input = screen.getByLabelText('DOB') as HTMLInputElement;
-      expect(input.value).toBe('2026-05-16');
-    });
-
-    it('forwards min/max/step to the native input', () => {
-      render(
-        <DateTimePicker
-          name="t"
-          label="Time"
-          mode="time"
-          min="08:00"
-          max="18:00"
-          step={300}
-        />
-      );
-      const input = screen.getByLabelText('Time') as HTMLInputElement;
-      expect(input.min).toBe('08:00');
-      expect(input.max).toBe('18:00');
-      expect(input.step).toBe('300');
-    });
-
-    it('renders a `*` for required fields and sets the native attr', () => {
-      render(<DateTimePicker name="dob" label="DOB" required />);
-      const input = screen.getByLabelText(/DOB/) as HTMLInputElement;
-      expect(input.required).toBe(true);
-      expect(screen.getByText('*')).toBeTruthy();
-    });
-
-    it('renders helperText when not in error', () => {
-      render(
-        <DateTimePicker
-          name="dob"
-          label="DOB"
-          helperText="Pick a date in the past."
-        />
-      );
-      expect(screen.getByText('Pick a date in the past.')).toBeTruthy();
-    });
-
-    it('shows the helperText in the error slot when `error` is true', () => {
-      render(
-        <DateTimePicker
-          name="dob"
-          label="DOB"
-          error
-          helperText="Required"
-        />
-      );
-      const p = screen.getByText('Required');
-      // The error slot has the `text-danger-600` class per the variants.
-      expect(p.className).toMatch(/danger/);
-    });
-
-    it('disables the input', () => {
-      render(<DateTimePicker name="dob" label="DOB" disabled />);
-      const input = screen.getByLabelText('DOB') as HTMLInputElement;
-      expect(input.disabled).toBe(true);
-    });
+  it('opens a popover with a calendar and a time list', () => {
+    render(<DateTimePicker name="d" defaultValue="2026-05-20T10:00" />);
+    expect(screen.queryByRole('dialog')).toBeNull();
+    fireEvent.click(screen.getByRole('button'));
+    expect(screen.queryByRole('dialog')).not.toBeNull();
+    expect(screen.getByRole('grid')).not.toBeNull();
+    expect(screen.getByRole('listbox', { name: 'Time options' })).not.toBeNull();
   });
 
-  describe('event wiring', () => {
-    it('fires onValueChange with the typed value (date)', () => {
-      const onValueChange = vi.fn();
-      render(
-        <DateTimePicker
-          name="dob"
-          label="DOB"
-          onValueChange={onValueChange}
-        />
-      );
-      const input = screen.getByLabelText('DOB') as HTMLInputElement;
-      fireEvent.change(input, { target: { value: '2026-12-25' } });
-      expect(onValueChange).toHaveBeenCalledWith('2026-12-25');
-    });
-
-    it('fires onValueChange with `null` when the input is cleared', () => {
-      const onValueChange = vi.fn();
-      render(
-        <DateTimePicker
-          name="dob"
-          label="DOB"
-          value="2026-05-16"
-          onValueChange={onValueChange}
-        />
-      );
-      const input = screen.getByLabelText('DOB') as HTMLInputElement;
-      fireEvent.change(input, { target: { value: '' } });
-      expect(onValueChange).toHaveBeenCalledWith(null);
-    });
+  it('picking a date updates the value and keeps the popover open', () => {
+    const onChange = vi.fn();
+    render(
+      <DateTimePicker name="d" defaultValue="2026-05-20T10:00" onChange={onChange} />,
+    );
+    fireEvent.click(screen.getByRole('button'));
+    fireEvent.click(screen.getByRole('button', { name: /May 15, 2026/ }));
+    expect(onChange).toHaveBeenCalledWith('2026-05-15T10:00');
+    expect(screen.queryByRole('dialog')).not.toBeNull();
   });
 
-  describe('inside DashFormProvider', () => {
-    it('mounts cleanly with the bridge attached', () => {
-      render(
-        <DashFormProvider defaultValues={{ dob: '2026-05-16' }}>
-          <DateTimePicker name="dob" label="DOB" />
-        </DashFormProvider>
-      );
-      // Mount assertion — defaultValues commit is timing-sensitive in
-      // vitest (mirror of how Autocomplete / RadioGroup / NumberField
-      // are tested), so we don't assert input.value here.
-      expect(screen.getByLabelText('DOB')).toBeTruthy();
-    });
+  it('picking a time completes the value and closes the popover', () => {
+    const onChange = vi.fn();
+    render(
+      <DateTimePicker name="d" defaultValue="2026-05-20T10:00" onChange={onChange} />,
+    );
+    fireEvent.click(screen.getByRole('button'));
+    fireEvent.click(screen.getByRole('option', { name: '14:30' }));
+    expect(onChange).toHaveBeenCalledWith('2026-05-20T14:30');
+    expect(screen.queryByRole('dialog')).toBeNull();
   });
 
-  describe('visibility', () => {
-    it('returns null when visibleWhen returns false', () => {
-      const { container } = render(
-        <DateTimePicker
-          name="dob"
-          label="DOB"
-          visibleWhen={() => false}
-        />
-      );
-      expect(container.querySelector('input')).toBeNull();
-    });
+  it('does not open the popover when disabled', () => {
+    render(<DateTimePicker name="d" disabled />);
+    fireEvent.click(screen.getByRole('button'));
+    expect(screen.queryByRole('dialog')).toBeNull();
   });
 });