@dashforge/tw 0.9.1-beta → 0.11.0-beta

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

@@ -1,84 +1,55 @@
-import { tv, type VariantProps } from 'tailwind-variants';
+import { tv } from 'tailwind-variants';
 
 /**
- * Tailwind-variants recipe for `<DateTimePicker>` with 6 slots.
+ * 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.
  *
- * Styling mirrors `<TextField>` for layout / sizes / error states so
- * the two field types compose visually in the same form.
- *
- * Native `<input type="date|time|datetime-local">` quirks handled here:
- *
- *  - The browser-rendered placeholder mask (e.g., `mm/dd/yyyy`) is
- *    invisible on `bg-neutral-50` by default in some themes; we keep
- *    the same neutral palette and rely on the input's own contrast
- *    rules (no extra `::placeholder` styling — browsers don't honor it
- *    on these input types).
- *  - The native picker indicator (calendar / clock icon) is
- *    browser-supplied; we ensure it stays visible in dark mode via
- *    `color-scheme: light dark` on the input (set inline below).
+ * 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',
+    root: 'flex flex-col',
     label: 'block text-sm font-medium text-neutral-900 mb-1',
     requiredMark: 'text-danger-500 ml-0.5',
-    inputWrapper: [
-      'relative flex items-center',
-      'rounded-md border bg-neutral-50',
-      'border-neutral-300',
-      'transition-colors',
-      'focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-500/30',
-    ],
-    input: [
-      'block w-full bg-transparent outline-none',
-      'text-neutral-900 placeholder:text-neutral-400',
-      'disabled:cursor-not-allowed disabled:opacity-60',
-      'read-only:cursor-default',
-      // `color-scheme` lets the native calendar / clock icon respect
-      // the dark mode (otherwise it stays light-themed against dark bg)
-      '[color-scheme:light_dark]',
-    ],
+    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: {
-    size: {
-      sm: { inputWrapper: 'h-8 px-2', input: 'text-sm' },
-      md: { inputWrapper: 'h-10 px-3', input: 'text-base' },
-      lg: { inputWrapper: 'h-12 px-4', input: 'text-lg' },
-    },
     layout: {
-      stacked: { root: 'flex-col' },
+      stacked: {},
       inline: {
         root: 'flex-row items-start gap-3',
-        label: 'mb-0 pt-2 whitespace-nowrap shrink-0',
+        label: 'mb-0 pt-2.5 whitespace-nowrap shrink-0',
       },
     },
     error: {
       true: {
-        inputWrapper:
-          'border-danger-500 focus-within:border-danger-500 focus-within:ring-danger-500/30',
+        trigger:
+          'border-danger-500 hover:border-danger-500 focus-visible:border-danger-500 focus-visible:ring-danger-500/30',
       },
     },
     fullWidth: {
       true: {
         root: 'w-full',
-        inputWrapper: 'w-full',
-      },
-    },
-    disabled: {
-      true: {
-        inputWrapper: 'opacity-60 cursor-not-allowed bg-neutral-200',
+        trigger: 'w-full min-w-0',
       },
     },
   },
   defaultVariants: {
-    size: 'md',
     layout: 'stacked',
     error: false,
     fullWidth: false,
-    disabled: false,
   },
 });
-
-export type DateTimePickerVariants = VariantProps<typeof dateTimePickerVariants>;

package/src/components/Tabs/Tabs.test.tsx

@@ -19,7 +19,6 @@ describe('Tabs — rendering', () => {
     expect(screen.queryByRole('tab', { name: 'Overview' })).not.toBeNull();
     expect(screen.queryByRole('tab', { name: 'Details' })).not.toBeNull();
     expect(screen.queryByRole('tab', { name: 'History' })).not.toBeNull();
-    // Only the active panel renders content (others get data-state="inactive").
     expect(screen.queryByText('Overview body')).not.toBeNull();
   });
 
@@ -30,7 +29,7 @@ describe('Tabs — rendering', () => {
 
   it('switches active panel via controlled `value` rerender', () => {
     const { rerender } = render(
-      <Tabs items={items} value="overview" onValueChange={() => {}} />
+      <Tabs items={items} value="overview" onValueChange={() => {}} />,
     );
     expect(screen.queryByText('Overview body')).not.toBeNull();
     rerender(<Tabs items={items} value="details" onValueChange={() => {}} />);
@@ -39,14 +38,20 @@ describe('Tabs — rendering', () => {
 
   it('marks the active tab via aria-selected', () => {
     render(<Tabs items={items} defaultValue="details" />);
-    const detailsTab = screen.getByRole('tab', { name: 'Details' });
-    expect(detailsTab.getAttribute('aria-selected')).toBe('true');
-    const overviewTab = screen.getByRole('tab', { name: 'Overview' });
-    expect(overviewTab.getAttribute('aria-selected')).toBe('false');
+    expect(
+      screen.getByRole('tab', { name: 'Details' }).getAttribute('aria-selected'),
+    ).toBe('true');
+    expect(
+      screen.getByRole('tab', { name: 'Overview' }).getAttribute('aria-selected'),
+    ).toBe('false');
   });
-});
 
-void fireEvent; // imported for parity but not needed after the controlled-mode simplification
+  it('selects a tab on click', () => {
+    render(<Tabs items={items} />);
+    fireEvent.click(screen.getByRole('tab', { name: 'Details' }));
+    expect(screen.queryByText('Details body')).not.toBeNull();
+  });
+});
 
 describe('Tabs — variants', () => {
   it.each(['underline', 'pill'] as const)('renders variant=%s', (variant) => {
@@ -56,19 +61,85 @@ describe('Tabs — variants', () => {
 
   it.each(['horizontal', 'vertical'] as const)('renders orientation=%s', (o) => {
     render(<Tabs items={items} orientation={o} />);
-    const list = screen.getByRole('tablist');
-    expect(list.getAttribute('aria-orientation')).toBe(o);
+    expect(screen.getByRole('tablist').getAttribute('aria-orientation')).toBe(o);
   });
 });
 
 describe('Tabs — disabled items', () => {
   it('marks disabled triggers as disabled', () => {
+    const disabledItems = [...items.slice(0, 2), { ...items[2]!, disabled: true }];
+    render(<Tabs items={disabledItems} />);
+    const trigger = screen.getByRole('tab', {
+      name: 'History',
+    }) as HTMLButtonElement;
+    expect(trigger.disabled).toBe(true);
+  });
+
+  it('skips disabled tabs during keyboard navigation', () => {
     const disabledItems = [
-      ...items.slice(0, 2),
-      { ...items[2]!, disabled: true },
+      items[0]!,
+      { ...items[1]!, disabled: true },
+      items[2]!,
     ];
     render(<Tabs items={disabledItems} />);
-    const trigger = screen.getByRole('tab', { name: 'History' }) as HTMLButtonElement;
-    expect(trigger.disabled).toBe(true);
+    fireEvent.keyDown(screen.getByRole('tablist'), { key: 'ArrowRight' });
+    // Overview → (skip disabled Details) → History
+    expect(
+      screen.getByRole('tab', { name: 'History' }).getAttribute('aria-selected'),
+    ).toBe('true');
+  });
+});
+
+describe('Tabs — keyboard', () => {
+  it('ArrowRight activates the next tab', () => {
+    render(<Tabs items={items} />);
+    fireEvent.keyDown(screen.getByRole('tablist'), { key: 'ArrowRight' });
+    expect(
+      screen.getByRole('tab', { name: 'Details' }).getAttribute('aria-selected'),
+    ).toBe('true');
+    expect(screen.queryByText('Details body')).not.toBeNull();
+  });
+
+  it('ArrowRight wraps at the end', () => {
+    render(<Tabs items={items} defaultValue="history" />);
+    fireEvent.keyDown(screen.getByRole('tablist'), { key: 'ArrowRight' });
+    expect(
+      screen.getByRole('tab', { name: 'Overview' }).getAttribute('aria-selected'),
+    ).toBe('true');
+  });
+
+  it('Home / End jump to the first / last tab', () => {
+    render(<Tabs items={items} defaultValue="details" />);
+    const list = screen.getByRole('tablist');
+    fireEvent.keyDown(list, { key: 'End' });
+    expect(
+      screen.getByRole('tab', { name: 'History' }).getAttribute('aria-selected'),
+    ).toBe('true');
+    fireEvent.keyDown(list, { key: 'Home' });
+    expect(
+      screen.getByRole('tab', { name: 'Overview' }).getAttribute('aria-selected'),
+    ).toBe('true');
+  });
+
+  it('ArrowDown drives a vertical tablist', () => {
+    render(<Tabs items={items} orientation="vertical" />);
+    fireEvent.keyDown(screen.getByRole('tablist'), { key: 'ArrowDown' });
+    expect(
+      screen.getByRole('tab', { name: 'Details' }).getAttribute('aria-selected'),
+    ).toBe('true');
+  });
+});
+
+describe('Tabs — keepMounted', () => {
+  it('mounts only the active panel by default', () => {
+    render(<Tabs items={items} defaultValue="overview" />);
+    expect(screen.queryByText('Overview body')).not.toBeNull();
+    expect(screen.queryByText('History body')).toBeNull();
+  });
+
+  it('keeps every panel mounted when keepMounted is set', () => {
+    render(<Tabs items={items} defaultValue="overview" keepMounted />);
+    expect(screen.queryByText('Overview body')).not.toBeNull();
+    expect(screen.queryByText('History body')).not.toBeNull();
   });
 });

package/src/components/Tabs/Tabs.tsx

@@ -1,19 +1,23 @@
-import * as RadixTabs from '@radix-ui/react-tabs';
 import { cn } from '../../utils/cn.js';
 import { tabsVariants } from './tabs.variants.js';
+import { useTabs } from './useTabs.js';
 import type { TabsProps } from './tabs.types.js';
 
 /**
  * Dashforge TW `<Tabs>` — declarative tab navigation.
  *
- * Built on `@radix-ui/react-tabs`:
- *  - APG tabs pattern (arrow-key navigation, automatic activation,
- *    `role="tablist"` + `role="tab"` + `role="tabpanel"`).
- *  - Controlled / uncontrolled (`value` / `defaultValue`).
+ * Custom clean-room implementation on the headless `useTabs` engine — no
+ * runtime UI dependency. Implements the WAI-ARIA APG tabs pattern: arrow-key
+ * navigation, automatic activation, roving tabindex, `role="tablist"` +
+ * `role="tab"` + `role="tabpanel"`.
  *
  * Two variant axes:
  *  - `variant` — `underline` (default) | `pill`
  *  - `orientation` — `horizontal` (default) | `vertical`
+ *
+ * Controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
+ * `keepMounted` keeps inactive panels in the DOM (default: only the active
+ * panel is mounted).
  */
 export function Tabs(props: TabsProps) {
   const {
@@ -23,44 +27,51 @@ export function Tabs(props: TabsProps) {
     onValueChange,
     variant = 'underline',
     orientation = 'horizontal',
+    keepMounted = false,
     sx,
     slotProps,
   } = props;
 
   const v = tabsVariants({ variant, orientation });
-  const resolvedDefault = defaultValue ?? items[0]?.value;
+  const tabs = useTabs({
+    items,
+    value,
+    defaultValue,
+    onValueChange,
+    orientation,
+  });
+
+  // Either all panels (hidden when inactive) or just the active one.
+  const panels = keepMounted
+    ? items
+    : items.filter((item) => item.value === tabs.activeValue);
 
   return (
-    <RadixTabs.Root
-      value={value}
-      defaultValue={resolvedDefault}
-      onValueChange={onValueChange}
-      orientation={orientation}
-      className={cn(v.root(), sx, slotProps?.root?.className)}
-    >
-      <RadixTabs.List
+    <div className={cn(v.root(), sx, slotProps?.root?.className)}>
+      <div
+        {...tabs.getTabListProps()}
         className={cn(v.list(), slotProps?.list?.className)}
       >
         {items.map((item) => (
-          <RadixTabs.Trigger
+          <button
             key={item.value}
-            value={item.value}
-            disabled={item.disabled}
+            type="button"
+            {...tabs.getTabProps(item)}
             className={cn(v.trigger(), slotProps?.trigger?.className)}
           >
             {item.label}
-          </RadixTabs.Trigger>
+          </button>
         ))}
-      </RadixTabs.List>
-      {items.map((item) => (
-        <RadixTabs.Content
+      </div>
+      {panels.map((item) => (
+        <div
           key={item.value}
-          value={item.value}
+          {...tabs.getPanelProps(item)}
           className={cn(v.content(), slotProps?.content?.className)}
         >
           {item.content}
-        </RadixTabs.Content>
+        </div>
       ))}
-    </RadixTabs.Root>
+    </div>
   );
 }

package/src/components/Tabs/tabs.types.ts

@@ -26,7 +26,8 @@ export interface TabItem {
 /**
  * Props for `<Tabs>`.
  *
- * Built on `@radix-ui/react-tabs`. Two variant axes:
+ * Custom clean-room implementation — the headless `useTabs` engine, no Radix.
+ * Two variant axes:
  *  - `variant` — `underline` (default) | `pill`
  *  - `orientation` — `horizontal` (default) | `vertical`
  *
@@ -34,7 +35,7 @@ export interface TabItem {
  * (`defaultValue`) modes — the `value` prop wins when both are set.
  */
 export interface TabsProps extends TabsVariants {
-  /** Tab items array (declarative — alternative to passing children). */
+  /** Tab items array. */
   items: TabItem[];
   /** Controlled active value. */
   value?: string;
@@ -42,6 +43,11 @@ export interface TabsProps extends TabsVariants {
   defaultValue?: string;
   /** Fires when the active tab changes. */
   onValueChange?: (value: string) => void;
+  /**
+   * Keep inactive panels mounted (hidden via the `hidden` attribute).
+   * Default `false` — only the active panel is in the DOM.
+   */
+  keepMounted?: boolean;
   /** Root className shortcut. */
   sx?: string;
   /** Per-slot overrides. */

package/src/components/Tabs/useTabs.ts

@@ -0,0 +1,167 @@
+import { useCallback, useId, useRef, useState } from 'react';
+import type { KeyboardEvent } from 'react';
+import type { TabItem } from './tabs.types.js';
+
+/**
+ * `useTabs` — the headless tab engine for the Tailwind `<Tabs>`.
+ *
+ * Pure logic, zero UI: active-value state (controlled / uncontrolled) plus
+ * the WAI-ARIA APG keyboard model (arrow keys, Home/End, roving tabindex,
+ * automatic activation, disabled-skip, edge wrap). Returns attribute bundles
+ * for the `tablist` / `tab` / `tabpanel` roles.
+ *
+ * Deliberately NOT a shared package: the tab logic is ~90 lines — too thin
+ * to justify a published `tabs-core`. The MUI skin keeps its own near-identical
+ * copy. Only the public API contract is shared.
+ */
+interface UseTabsOptions {
+  items: TabItem[];
+  value: string | undefined;
+  defaultValue: string | undefined;
+  onValueChange: ((value: string) => void) | undefined;
+  orientation: 'horizontal' | 'vertical';
+}
+
+interface TabListAttributes {
+  role: 'tablist';
+  'aria-orientation': 'horizontal' | 'vertical';
+  onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
+}
+
+interface TabAttributes {
+  role: 'tab';
+  id: string;
+  'aria-selected': boolean;
+  'aria-controls': string;
+  tabIndex: number;
+  disabled: boolean | undefined;
+  'data-state': 'active' | 'inactive';
+  onClick: () => void;
+  ref: (el: HTMLButtonElement | null) => void;
+}
+
+interface PanelAttributes {
+  role: 'tabpanel';
+  id: string;
+  'aria-labelledby': string;
+  tabIndex: number;
+  hidden: boolean;
+  'data-state': 'active' | 'inactive';
+}
+
+export interface UseTabsResult {
+  /** The currently active tab value. */
+  activeValue: string;
+  getTabListProps: () => TabListAttributes;
+  getTabProps: (item: TabItem) => TabAttributes;
+  getPanelProps: (item: TabItem) => PanelAttributes;
+}
+
+export function useTabs(options: UseTabsOptions): UseTabsResult {
+  const { items, value, defaultValue, onValueChange, orientation } = options;
+
+  const baseId = useId();
+  const firstValue = items[0]?.value ?? '';
+  const [internalValue, setInternalValue] = useState<string>(
+    defaultValue ?? firstValue,
+  );
+  const isControlled = value !== undefined;
+  const activeValue = isControlled ? value : internalValue;
+
+  // Tab buttons, keyed by value — used to move DOM focus on keyboard nav.
+  const tabRefs = useRef(new Map<string, HTMLButtonElement>());
+
+  const select = useCallback(
+    (next: string) => {
+      if (!isControlled) {
+        setInternalValue(next);
+      }
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange],
+  );
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      const nextKey = orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';
+      const prevKey = orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';
+      const enabled = items.filter((item) => item.disabled !== true);
+      if (enabled.length === 0) {
+        return;
+      }
+      const currentIndex = enabled.findIndex(
+        (item) => item.value === activeValue,
+      );
+      let targetIndex: number | null = null;
+      if (event.key === nextKey) {
+        targetIndex =
+          currentIndex < 0 ? 0 : (currentIndex + 1) % enabled.length;
+      } else if (event.key === prevKey) {
+        targetIndex =
+          currentIndex < 0
+            ? enabled.length - 1
+            : (currentIndex - 1 + enabled.length) % enabled.length;
+      } else if (event.key === 'Home') {
+        targetIndex = 0;
+      } else if (event.key === 'End') {
+        targetIndex = enabled.length - 1;
+      }
+      if (targetIndex === null) {
+        return;
+      }
+      event.preventDefault();
+      const target = enabled[targetIndex];
+      if (target === undefined) {
+        return;
+      }
+      select(target.value);
+      tabRefs.current.get(target.value)?.focus();
+    },
+    [items, orientation, activeValue, select],
+  );
+
+  const getTabListProps = (): TabListAttributes => ({
+    role: 'tablist',
+    'aria-orientation': orientation,
+    onKeyDown: handleKeyDown,
+  });
+
+  const getTabProps = (item: TabItem): TabAttributes => {
+    const active = item.value === activeValue;
+    return {
+      role: 'tab',
+      id: `${baseId}-tab-${item.value}`,
+      'aria-selected': active,
+      'aria-controls': `${baseId}-panel-${item.value}`,
+      tabIndex: active ? 0 : -1,
+      disabled: item.disabled,
+      'data-state': active ? 'active' : 'inactive',
+      onClick: () => {
+        if (item.disabled !== true) {
+          select(item.value);
+        }
+      },
+      ref: (el: HTMLButtonElement | null) => {
+        if (el) {
+          tabRefs.current.set(item.value, el);
+        } else {
+          tabRefs.current.delete(item.value);
+        }
+      },
+    };
+  };
+
+  const getPanelProps = (item: TabItem): PanelAttributes => {
+    const active = item.value === activeValue;
+    return {
+      role: 'tabpanel',
+      id: `${baseId}-panel-${item.value}`,
+      'aria-labelledby': `${baseId}-tab-${item.value}`,
+      tabIndex: 0,
+      hidden: !active,
+      'data-state': active ? 'active' : 'inactive',
+    };
+  };
+
+  return { activeValue, getTabListProps, getTabProps, getPanelProps };
+}

package/src/components/TimePicker/TimePicker.test.tsx

@@ -0,0 +1,65 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeAll } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+
+import { TimePicker } from './TimePicker.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('TimePicker', () => {
+  it('renders a labelled trigger with the placeholder', () => {
+    render(<TimePicker name="alarm" label="Alarm" placeholder="Pick a time" />);
+    expect(screen.queryByText('Alarm')).not.toBeNull();
+    expect(screen.getByRole('button').textContent).toContain('Pick a time');
+  });
+
+  it('shows a 24-hour controlled value', () => {
+    render(<TimePicker name="t" value="14:30" />);
+    expect(screen.getByRole('button').textContent).toContain('14:30');
+  });
+
+  it('formats the value in 12-hour notation when hour12 is set', () => {
+    render(<TimePicker name="t" value="14:30" hour12 />);
+    expect(screen.getByRole('button').textContent).toContain('2:30 PM');
+  });
+
+  it('opens the time-list popover from the trigger', () => {
+    render(<TimePicker name="t" />);
+    expect(screen.queryByRole('listbox')).toBeNull();
+    fireEvent.click(screen.getByRole('button'));
+    expect(screen.getByRole('listbox', { name: 'Time options' })).not.toBeNull();
+  });
+
+  it('selects a time from the popover, updates the trigger and closes', () => {
+    const onChange = vi.fn();
+    render(<TimePicker name="t" onChange={onChange} />);
+    fireEvent.click(screen.getByRole('button'));
+    fireEvent.click(screen.getByRole('option', { name: '09:00' }));
+    expect(onChange).toHaveBeenCalledWith('09:00');
+    expect(screen.queryByRole('listbox')).toBeNull();
+    expect(screen.getByRole('button').textContent).toContain('09:00');
+  });
+
+  it('does not open the popover when disabled', () => {
+    render(<TimePicker name="t" disabled />);
+    fireEvent.click(screen.getByRole('button'));
+    expect(screen.queryByRole('listbox')).toBeNull();
+  });
+});