@dashforge/tw 1.1.0 → 1.2.0

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

@@ -1,145 +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 { Tabs } from './Tabs.js';
-
-void React;
-afterEach(() => cleanup());
-
-const items = [
-  { value: 'overview', label: 'Overview', content: <p>Overview body</p> },
-  { value: 'details', label: 'Details', content: <p>Details body</p> },
-  { value: 'history', label: 'History', content: <p>History body</p> },
-];
-
-describe('Tabs — rendering', () => {
-  it('renders all triggers and the default-active content', () => {
-    render(<Tabs items={items} />);
-    expect(screen.queryByRole('tab', { name: 'Overview' })).not.toBeNull();
-    expect(screen.queryByRole('tab', { name: 'Details' })).not.toBeNull();
-    expect(screen.queryByRole('tab', { name: 'History' })).not.toBeNull();
-    expect(screen.queryByText('Overview body')).not.toBeNull();
-  });
-
-  it('honors `defaultValue`', () => {
-    render(<Tabs items={items} defaultValue="history" />);
-    expect(screen.queryByText('History body')).not.toBeNull();
-  });
-
-  it('switches active panel via controlled `value` rerender', () => {
-    const { rerender } = render(
-      <Tabs items={items} value="overview" onValueChange={() => {}} />,
-    );
-    expect(screen.queryByText('Overview body')).not.toBeNull();
-    rerender(<Tabs items={items} value="details" onValueChange={() => {}} />);
-    expect(screen.queryByText('Details body')).not.toBeNull();
-  });
-
-  it('marks the active tab via aria-selected', () => {
-    render(<Tabs items={items} defaultValue="details" />);
-    expect(
-      screen.getByRole('tab', { name: 'Details' }).getAttribute('aria-selected'),
-    ).toBe('true');
-    expect(
-      screen.getByRole('tab', { name: 'Overview' }).getAttribute('aria-selected'),
-    ).toBe('false');
-  });
-
-  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) => {
-    render(<Tabs items={items} variant={variant} />);
-    expect(screen.queryByRole('tablist')).not.toBeNull();
-  });
-
-  it.each(['horizontal', 'vertical'] as const)('renders orientation=%s', (o) => {
-    render(<Tabs items={items} orientation={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[0]!,
-      { ...items[1]!, disabled: true },
-      items[2]!,
-    ];
-    render(<Tabs items={disabledItems} />);
-    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,77 +0,0 @@
-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.
- *
- * 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 {
-    items,
-    value,
-    defaultValue,
-    onValueChange,
-    variant = 'underline',
-    orientation = 'horizontal',
-    keepMounted = false,
-    sx,
-    slotProps,
-  } = props;
-
-  const v = tabsVariants({ variant, orientation });
-  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 (
-    <div className={cn(v.root(), sx, slotProps?.root?.className)}>
-      <div
-        {...tabs.getTabListProps()}
-        className={cn(v.list(), slotProps?.list?.className)}
-      >
-        {items.map((item) => (
-          <button
-            key={item.value}
-            type="button"
-            {...tabs.getTabProps(item)}
-            className={cn(v.trigger(), slotProps?.trigger?.className)}
-          >
-            {item.label}
-          </button>
-        ))}
-      </div>
-      {panels.map((item) => (
-        <div
-          key={item.value}
-          {...tabs.getPanelProps(item)}
-          className={cn(v.content(), slotProps?.content?.className)}
-        >
-          {item.content}
-        </div>
-      ))}
-    </div>
-  );
-}

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

@@ -1,55 +0,0 @@
-import type { ReactNode } from 'react';
-import type { TabsVariants } from './tabs.variants.js';
-
-export interface TabsSlotProps {
-  root?: { className?: string };
-  list?: { className?: string };
-  trigger?: { className?: string };
-  content?: { className?: string };
-}
-
-/**
- * Single tab item — paired `{ value, label, content }`. The `value`
- * is the canonical id (selected via the `value` / `defaultValue`
- * props on the root); the `label` is the trigger button text, and
- * `content` is what renders in the panel when this tab is active.
- */
-export interface TabItem {
-  value: string;
-  label: ReactNode;
-  /** Tab panel content. */
-  content: ReactNode;
-  /** Per-tab disabled flag. */
-  disabled?: boolean;
-}
-
-/**
- * Props for `<Tabs>`.
- *
- * Custom clean-room implementation — the headless `useTabs` engine, no Radix.
- * Two variant axes:
- *  - `variant` — `underline` (default) | `pill`
- *  - `orientation` — `horizontal` (default) | `vertical`
- *
- * Supports controlled (`value` + `onValueChange`) and uncontrolled
- * (`defaultValue`) modes — the `value` prop wins when both are set.
- */
-export interface TabsProps extends TabsVariants {
-  /** Tab items array. */
-  items: TabItem[];
-  /** Controlled active value. */
-  value?: string;
-  /** Default active value (uncontrolled). Defaults to first item's value. */
-  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. */
-  slotProps?: TabsSlotProps;
-}

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

@@ -1,69 +0,0 @@
-import { tv, type VariantProps } from 'tailwind-variants';
-
-export const tabsVariants = tv({
-  slots: {
-    root: 'flex',
-    list: 'inline-flex items-center gap-1',
-    trigger: [
-      'inline-flex items-center justify-center whitespace-nowrap',
-      'text-sm font-medium transition-colors',
-      'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
-      'disabled:opacity-50 disabled:pointer-events-none',
-      'motion-reduce:transition-none',
-    ],
-    content: [
-      'mt-3 focus:outline-none',
-      'data-[state=inactive]:hidden',
-    ],
-  },
-  variants: {
-    variant: {
-      underline: {
-        // Neutral palette auto-inverts via CSS-var swap.
-        list: 'border-b border-neutral-200',
-        trigger: [
-          'px-3 py-2 border-b-2 border-transparent text-neutral-600',
-          'hover:text-neutral-900',
-          // Primary palette does NOT auto-invert — `dark:` shift is
-          // an intentional tone refinement (kept).
-          'data-[state=active]:border-primary-500 data-[state=active]:text-primary-700',
-          'dark:data-[state=active]:text-primary-400',
-        ],
-      },
-      pill: {
-        // Pill list bg uses the elevation tier — auto-inverts.
-        list: 'rounded-lg bg-neutral-100 p-1',
-        trigger: [
-          'px-3 py-1.5 rounded-md text-neutral-600',
-          'hover:text-neutral-900',
-          // Active pill is one tier above the list bg
-          // (`bg-neutral-100`-inverted = #171717 in dark).
-          // `bg-white` is hardcoded so a `dark:` is required —
-          // target `dark:bg-neutral-200` (= #262626 in dark) sits
-          // ONE TIER above the list bg, preserving the elevation
-          // semantic from light mode (where `bg-white` sits above
-          // `bg-neutral-100` = #f5f5f5).
-          'data-[state=active]:bg-white dark:data-[state=active]:bg-neutral-200',
-          'data-[state=active]:text-neutral-900',
-          'data-[state=active]:shadow-sm',
-        ],
-      },
-    },
-    orientation: {
-      horizontal: {
-        root: 'flex-col',
-        list: 'flex-row',
-      },
-      vertical: {
-        root: 'flex-row gap-4',
-        list: 'flex-col items-stretch',
-      },
-    },
-  },
-  defaultVariants: {
-    variant: 'underline',
-    orientation: 'horizontal',
-  },
-});
-
-export type TabsVariants = VariantProps<typeof tabsVariants>;

package/src/components/Tabs/useTabs.ts

@@ -1,167 +0,0 @@
-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 };
-}