@dashforge/tw 1.1.0 → 1.1.1

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

@@ -1,78 +0,0 @@
-// @vitest-environment jsdom
-import { describe, it, expect, vi, beforeAll } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-
-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;
-  }
-});
-
-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('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('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();
-  });
-
-  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();
-  });
-
-  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();
-  });
-
-  it('does not open the popover when disabled', () => {
-    render(<DateTimePicker name="d" disabled />);
-    fireEvent.click(screen.getByRole('button'));
-    expect(screen.queryByRole('dialog')).toBeNull();
-  });
-});

package/src/components/DateTimePicker/DateTimePicker.tsx

@@ -1,347 +0,0 @@
-import { useCallback, useContext, useEffect, useId, useRef, useState } from 'react';
-import { DashFormContext, useEngineVisibility } from '@dashforge/ui-core';
-import type { DashFormBridge, FieldRegistration } from '@dashforge/ui-core';
-import { useDashFieldMeta } from '@dashforge/forms';
-import {
-  formatTime,
-  generateTimeOptions,
-  getTodayISODate,
-  parseISODate,
-} from '@dashforge/calendar-core';
-import type { ISODate } from '@dashforge/calendar-core';
-import { cn } from '../../utils/cn.js';
-import { useAccessState } from '../../hooks/useAccessState.js';
-import { resolveValidationState } from '../_shared/resolveValidationState.js';
-import { Popover } from '../Popover/Popover.js';
-import { Calendar } from '../Calendar/Calendar.js';
-import { dateTimePickerVariants } from './dateTimePicker.variants.js';
-import type { DateTimePickerProps } from './dateTimePicker.types.js';
-
-// Inline 16×16 stroke calendar glyph — no icon dependency (tw convention).
-function CalendarIcon() {
-  return (
-    <svg width="1em" height="1em" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-      <rect
-        x="2.5"
-        y="3.5"
-        width="11"
-        height="10"
-        rx="1.5"
-        stroke="currentColor"
-        strokeWidth="1.5"
-      />
-      <path
-        d="M2.5 6.5h11M5.5 2v3M10.5 2v3"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-      />
-    </svg>
-  );
-}
-
-const DATETIME_PATTERN = /^(\d{4}-\d{2}-\d{2})T(\d{2}):(\d{2})/;
-
-/** Splits a stored `YYYY-MM-DDTHH:mm` value into its date and time parts. */
-function splitDateTime(value: string | null | undefined): {
-  date: ISODate | null;
-  time: string | null;
-} {
-  if (value == null || value === '') {
-    return { date: null, time: null };
-  }
-  const match = DATETIME_PATTERN.exec(value);
-  if (match !== null) {
-    return {
-      date: match[1] ?? null,
-      time: `${match[2] ?? '00'}:${match[3] ?? '00'}`,
-    };
-  }
-  return { date: parseISODate(value) !== null ? value : null, time: null };
-}
-
-/** Combines a date and a time into a `YYYY-MM-DDTHH:mm` value (or `null`). */
-function joinDateTime(date: ISODate | null, time: string | null): string | null {
-  if (date === null && time === null) {
-    return null;
-  }
-  return `${date ?? getTodayISODate()}T${time ?? '00:00'}`;
-}
-
-/** Formats a stored datetime for the trigger display. */
-function formatDateTime(
-  value: string | null,
-  locale: string,
-  hour12: boolean,
-): string {
-  const { date, time } = splitDateTime(value);
-  const parts: string[] = [];
-  if (date !== null) {
-    const parsed = parseISODate(date);
-    parts.push(
-      parsed === null
-        ? date
-        : new Intl.DateTimeFormat(locale, {
-            dateStyle: 'medium',
-            timeZone: 'UTC',
-          }).format(Date.UTC(parsed.year, parsed.month - 1, parsed.day)),
-    );
-  }
-  if (time !== null) {
-    parts.push(formatTime(time, { hour12 }));
-  }
-  return parts.join(', ');
-}
-
-/**
- * Dashforge TW `<DateTimePicker>` — a form-bound date + time field.
- *
- * A read-only trigger button paired with a popover combining a `<Calendar>`
- * and a time list (Radix Popover). Integrates with the Dashforge form
- * bridge + RBAC.
- *
- * Storage contract: a naive ISO datetime `"YYYY-MM-DDTHH:mm"` — no seconds,
- * no timezone. Shared with the MUI `@dashforge/ui` `DateTimePicker`.
- */
-export function DateTimePicker(props: DateTimePickerProps) {
-  const {
-    name,
-    rules,
-    label,
-    helperText,
-    error,
-    required,
-    disabled,
-    placeholder,
-    layout = 'stacked',
-    visibleWhen,
-    access,
-    value: explicitValue,
-    defaultValue,
-    onChange,
-    minDate,
-    maxDate,
-    disabledDates,
-    isDateDisabled,
-    weekStartDay,
-    locale,
-    stepMinutes,
-    hour12 = false,
-    fullWidth,
-    sx,
-    slotProps,
-    testId,
-  } = props;
-
-  const bridge = useContext(DashFormContext) as DashFormBridge | null;
-  const isVisible = useEngineVisibility(bridge?.engine, visibleWhen);
-  const fieldMeta = useDashFieldMeta(name);
-  const accessState = useAccessState(access);
-
-  const fieldId = useId();
-  const helperId = `${fieldId}-help`;
-
-  const [isOpen, setIsOpen] = useState(false);
-  const [internalValue, setInternalValue] = useState<string | null>(
-    defaultValue ?? null,
-  );
-
-  const unregisterRef = useRef({ bridge, name });
-  unregisterRef.current = { bridge, name };
-  const isMountedRef = useRef(false);
-  useEffect(() => {
-    isMountedRef.current = true;
-    return () => {
-      isMountedRef.current = false;
-      const { bridge: cap, name: capName } = unregisterRef.current;
-      queueMicrotask(() => {
-        if (!isMountedRef.current) cap?.unregister?.(capName);
-      });
-    };
-  }, []);
-
-  const effectiveDisabled = Boolean(disabled) || accessState.disabled;
-  const isInteractive = !effectiveDisabled && !accessState.readonly;
-  const isFormMode = Boolean(bridge?.register);
-
-  let resolvedError = error;
-  let resolvedHelperText: typeof helperText = helperText;
-  let registration: FieldRegistration | null = null;
-  let resolvedValue: string | null;
-
-  if (isFormMode && bridge) {
-    registration = bridge.register(name, rules);
-    const validation = resolveValidationState(name, bridge, error, helperText);
-    resolvedError = validation.error;
-    resolvedHelperText = validation.helperText;
-    if (explicitValue !== undefined) {
-      resolvedValue = explicitValue;
-    } else {
-      const bv = fieldMeta.value;
-      resolvedValue = bv == null ? null : String(bv);
-    }
-  } else if (explicitValue !== undefined) {
-    resolvedValue = explicitValue;
-  } else {
-    resolvedValue = internalValue;
-  }
-
-  const registrationRefFn = registration?.ref;
-  const triggerRef = useCallback(
-    (instance: HTMLButtonElement | null) => {
-      if (typeof registrationRefFn === 'function') {
-        registrationRefFn(instance);
-      }
-    },
-    [registrationRefFn],
-  );
-
-  if (!isVisible) return null;
-  if (!accessState.visible) return null;
-
-  const v = dateTimePickerVariants({ layout, error: resolvedError, fullWidth });
-  const resolvedLocale = locale ?? 'en-US';
-  const { date, time } = splitDateTime(resolvedValue);
-  const displayValue = formatDateTime(resolvedValue, resolvedLocale, hour12);
-  const options = generateTimeOptions({
-    ...(stepMinutes !== undefined && { stepMinutes }),
-  });
-
-  const commitValue = (next: string | null) => {
-    if (isFormMode && bridge) {
-      bridge.setValue?.(name, next);
-      void registration?.onChange?.({
-        target: { name, value: next ?? '' },
-        type: 'change',
-      });
-    } else if (explicitValue === undefined) {
-      setInternalValue(next);
-    }
-    onChange?.(next);
-  };
-
-  const markTouched = () => {
-    if (isFormMode && bridge) {
-      const committed = bridge.getValue(name);
-      void registration?.onBlur?.({
-        target: { name, value: committed == null ? '' : String(committed) },
-        type: 'blur',
-      });
-    }
-  };
-
-  const handleOpenChange = (next: boolean) => {
-    if (next && !isInteractive) {
-      return;
-    }
-    setIsOpen(next);
-    if (!next) {
-      markTouched();
-    }
-  };
-
-  // Picking a date keeps the popover open — the user still needs a time.
-  const handleDateSelect = (nextDate: ISODate) => {
-    commitValue(joinDateTime(nextDate, time));
-  };
-  // Picking a time completes the value and closes the popover.
-  const handleTimeSelect = (nextTime: string) => {
-    commitValue(joinDateTime(date, nextTime));
-    setIsOpen(false);
-    markTouched();
-  };
-
-  return (
-    <div
-      data-testid={testId}
-      className={cn(v.root(), sx, slotProps?.root?.className)}
-    >
-      {label && (
-        <label
-          htmlFor={fieldId}
-          className={cn(v.label(), slotProps?.label?.className)}
-        >
-          {label}
-          {required && (
-            <span
-              aria-hidden="true"
-              className={cn(v.requiredMark(), slotProps?.requiredMark?.className)}
-            >
-              *
-            </span>
-          )}
-        </label>
-      )}
-
-      <Popover
-        open={isOpen}
-        onOpenChange={handleOpenChange}
-        side="bottom"
-        align="start"
-        content={
-          <div className={v.panel()}>
-            <Calendar
-              value={date}
-              onChange={handleDateSelect}
-              minDate={minDate}
-              maxDate={maxDate}
-              disabledDates={disabledDates}
-              isDateDisabled={isDateDisabled}
-              weekStartDay={weekStartDay}
-              locale={locale}
-              aria-label="Choose date"
-              sx="border-0 bg-transparent p-0"
-            />
-            <div role="listbox" aria-label="Time options" className={v.list()}>
-              {options.map((option) => (
-                <button
-                  key={option}
-                  type="button"
-                  role="option"
-                  aria-selected={option === time}
-                  className={v.option()}
-                  onClick={() => {
-                    handleTimeSelect(option);
-                  }}
-                >
-                  {formatTime(option, { hour12 })}
-                </button>
-              ))}
-            </div>
-          </div>
-        }
-      >
-        <button
-          type="button"
-          id={fieldId}
-          ref={triggerRef}
-          disabled={effectiveDisabled}
-          aria-invalid={resolvedError ? true : undefined}
-          aria-describedby={resolvedHelperText ? helperId : undefined}
-          className={cn(v.trigger(), slotProps?.trigger?.className)}
-        >
-          <span className={displayValue ? v.value() : v.placeholder()}>
-            {displayValue || placeholder || 'Select date and time'}
-          </span>
-          <span className={v.icon()}>
-            <CalendarIcon />
-          </span>
-        </button>
-      </Popover>
-
-      {resolvedHelperText && (
-        <p
-          id={helperId}
-          className={cn(
-            resolvedError ? v.errorText() : v.helperText(),
-            resolvedError
-              ? slotProps?.errorText?.className
-              : slotProps?.helperText?.className,
-          )}
-        >
-          {resolvedHelperText}
-        </p>
-      )}
-    </div>
-  );
-}

package/src/components/DateTimePicker/dateTimePicker.types.ts

@@ -1,79 +0,0 @@
-import type { ReactNode } from 'react';
-import type { Engine } from '@dashforge/ui-core';
-import type { AccessRequirement } from '@dashforge/rbac';
-import type { ISODate, WeekDay } from '@dashforge/calendar-core';
-
-/** Per-slot `className` overrides for `<DateTimePicker>`. */
-export interface DateTimePickerSlotProps {
-  root?: { className?: string };
-  label?: { className?: string };
-  requiredMark?: { className?: string };
-  trigger?: { className?: string };
-  helperText?: { className?: string };
-  errorText?: { className?: string };
-}
-
-/**
- * Props for the `<DateTimePicker>` form field (Tailwind skin).
- *
- * A read-only trigger paired with a popover combining a `<Calendar>` and a
- * time list. The stored value is a naive ISO datetime — `"YYYY-MM-DDTHH:mm"`
- * — or `null`. No seconds, no timezone.
- *
- * For a date-only field use `<DatePicker>`; for time-only use `<TimePicker>`.
- * The prop surface mirrors the MUI `@dashforge/ui` `DateTimePicker`.
- */
-export interface DateTimePickerProps {
-  /** Field name — the bridge registration key. Required. */
-  name: string;
-  /** Validation rules forwarded to the form bridge. */
-  rules?: unknown;
-  /** Field label. */
-  label?: ReactNode;
-  /** Helper text below the control (overrides a bridge error message). */
-  helperText?: ReactNode;
-  /** Explicit error state (overrides the bridge's auto error). */
-  error?: boolean;
-  /** Marks the field required (adds the label asterisk). */
-  required?: boolean;
-  /** Disables the field. */
-  disabled?: boolean;
-  /** Placeholder shown when no value is selected. */
-  placeholder?: string;
-  /** Label/control layout. */
-  layout?: 'stacked' | 'inline';
-  /** Reactive visibility predicate evaluated against the form engine. */
-  visibleWhen?: (engine: Engine) => boolean;
-  /** RBAC access requirement. */
-  access?: AccessRequirement;
-  /** Controlled value — `"YYYY-MM-DDTHH:mm"` or `null`. */
-  value?: string | null;
-  /** Uncontrolled initial value. */
-  defaultValue?: string | null;
-  /** Fired with the new datetime (or `null` when cleared). */
-  onChange?: (value: string | null) => void;
-  /** Earliest selectable date (inclusive). */
-  minDate?: ISODate;
-  /** Latest selectable date (inclusive). */
-  maxDate?: ISODate;
-  /** Explicit list of disabled dates. */
-  disabledDates?: readonly ISODate[];
-  /** Predicate marking arbitrary dates disabled. */
-  isDateDisabled?: (date: ISODate) => boolean;
-  /** Weekday of the calendar's first column (`0` = Sunday). */
-  weekStartDay?: WeekDay;
-  /** BCP-47 locale for the calendar and the display format. */
-  locale?: string;
-  /** Step between time-list options, in minutes. Default `30`. */
-  stepMinutes?: number;
-  /** Render the time list in 12-hour notation. Default `false`. */
-  hour12?: boolean;
-  /** Stretches the field to its container width. */
-  fullWidth?: boolean;
-  /** Root-level Tailwind class override. */
-  sx?: string;
-  /** Per-slot `className` overrides. */
-  slotProps?: DateTimePickerSlotProps;
-  /** Test id applied to the field root. */
-  testId?: string;
-}

package/src/components/DateTimePicker/dateTimePicker.variants.ts

@@ -1,55 +0,0 @@
-import { tv } from 'tailwind-variants';
-
-/**
- * Slots for `<DateTimePicker>` — a bridge-integrated date+time field whose
- * trigger is a `<button>` styled as an input, opening a popover that
- * combines a `<Calendar>` with a time list.
- *
- * 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 dateTimePickerVariants = 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-[13rem] 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 items-stretch',
-    list: 'flex max-h-[19rem] min-w-[6.5rem] flex-col gap-0.5 overflow-y-auto border-l border-neutral-200 p-1',
-    option:
-      'flex w-full cursor-pointer items-center rounded px-2.5 py-1.5 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 aria-selected:bg-primary-600 aria-selected:text-white aria-selected:hover:bg-primary-600',
-    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,
-  },
-});

package/src/components/Dialog/Dialog.test.tsx

@@ -1,96 +0,0 @@
-// @vitest-environment jsdom
-import * as React from 'react';
-import { describe, it, expect, afterEach } from 'vitest';
-import { render, screen, fireEvent, cleanup } from '@testing-library/react';
-import { Dialog } from './Dialog.js';
-
-void React;
-afterEach(() => cleanup());
-
-describe('Dialog — rendering', () => {
-  it('renders nothing when open=false', () => {
-    render(
-      <Dialog open={false} onOpenChange={() => {}}>
-        <p>body</p>
-      </Dialog>
-    );
-    expect(screen.queryByText('body')).toBeNull();
-  });
-
-  it('renders title + body + close button when open', () => {
-    render(
-      <Dialog open onOpenChange={() => {}} title="Confirm action">
-        <p>body content</p>
-      </Dialog>
-    );
-    expect(screen.queryByText('Confirm action')).not.toBeNull();
-    expect(screen.queryByText('body content')).not.toBeNull();
-    expect(screen.queryByLabelText('Close')).not.toBeNull();
-  });
-
-  it('honors showCloseButton={false}', () => {
-    render(
-      <Dialog open onOpenChange={() => {}} showCloseButton={false}>
-        <p>body</p>
-      </Dialog>
-    );
-    expect(screen.queryByLabelText('Close')).toBeNull();
-  });
-
-  it('emits onOpenChange(false) when close button is clicked', () => {
-    let lastOpen: boolean | null = null;
-    render(
-      <Dialog open onOpenChange={(o) => (lastOpen = o)}>
-        <p>body</p>
-      </Dialog>
-    );
-    fireEvent.click(screen.getByLabelText('Close'));
-    expect(lastOpen).toBe(false);
-  });
-
-  it('renders description when provided', () => {
-    render(
-      <Dialog open onOpenChange={() => {}} title="Title" description="Hint text">
-        <p>body</p>
-      </Dialog>
-    );
-    expect(screen.queryByText('Hint text')).not.toBeNull();
-  });
-});
-
-describe('Dialog — size variants', () => {
-  it.each(['sm', 'md', 'lg'] as const)('renders size=%s without crashing', (size) => {
-    render(
-      <Dialog open onOpenChange={() => {}} size={size}>
-        <p>body</p>
-      </Dialog>
-    );
-    expect(screen.queryByText('body')).not.toBeNull();
-  });
-});
-
-describe('Dialog — sx + slotProps', () => {
-  it('appends sx to the content element', () => {
-    render(
-      <Dialog open onOpenChange={() => {}} sx="custom-sx-class">
-        <p>body</p>
-      </Dialog>
-    );
-    const content = screen.getByText('body').closest('[role="dialog"]');
-    expect(content?.className).toContain('custom-sx-class');
-  });
-
-  it('applies slotProps.title.className', () => {
-    render(
-      <Dialog
-        open
-        onOpenChange={() => {}}
-        title="T"
-        slotProps={{ title: { className: 'tw-title-override' } }}
-      >
-        <p>body</p>
-      </Dialog>
-    );
-    expect(screen.getByText('T').className).toContain('tw-title-override');
-  });
-});