@dashforge/tw 1.0.0 → 1.1.1

package/src/components/Pagination/pagination.types.ts

@@ -1,117 +0,0 @@
-import type { PaginationVariants } from './pagination.variants.js';
-
-export interface PaginationSlotProps {
-  root?: { className?: string };
-  summary?: { className?: string };
-  list?: { className?: string };
-  pageButton?: { className?: string };
-  activeButton?: { className?: string };
-  navButton?: { className?: string };
-  ellipsis?: { className?: string };
-  pageSizeSelector?: { className?: string };
-  jumpInput?: { className?: string };
-}
-
-/**
- * I18n strings for `<Pagination>`. Default = English. Override the
- * subset you need to translate; the rest fall back to defaults.
- */
-export interface PaginationLabels {
-  first?: string;
-  prev?: string;
-  next?: string;
-  last?: string;
-  page?: string;
-  of?: string;
-  showing?: string;
-  perPage?: string;
-  goToPage?: string;
-}
-
-/**
- * Props for `<Pagination>`.
- *
- * Controlled component: the consumer owns `page` + `pageSize`. The
- * component emits `onPageChange` / `onPageSizeChange` and recomputes
- * the visible page range from `totalCount`.
- *
- * @example
- * ```tsx
- * const [page, setPage] = useState(1);
- * const [pageSize, setPageSize] = useState(20);
- *
- * <Pagination
- *   page={page}
- *   pageSize={pageSize}
- *   totalCount={1437}
- *   onPageChange={setPage}
- *   onPageSizeChange={setPageSize}
- *   pageSizeOptions={[10, 20, 50, 100]}
- * />
- * ```
- */
-export interface PaginationProps extends Pick<PaginationVariants, 'variant' | 'size'> {
-  /** Current page, **1-indexed**. */
-  page: number;
-
-  /** Items per page. */
-  pageSize: number;
-
-  /** Total items in the underlying data set (NOT total pages — we compute that). */
-  totalCount: number;
-
-  /** Fired when the user picks a different page. */
-  onPageChange: (page: number) => void;
-
-  /**
-   * Fired when the user picks a different page size. Omit (or pass
-   * undefined) to hide the page-size selector.
-   */
-  onPageSizeChange?: (pageSize: number) => void;
-
-  /**
-   * Options shown in the page-size selector.
-   * @default [10, 20, 50, 100]
-   */
-  pageSizeOptions?: number[];
-
-  /**
-   * How many page buttons to show on each side of the current page.
-   * @default 1
-   */
-  siblingCount?: number;
-
-  /**
-   * How many page buttons to always show at the start/end of the
-   * sequence (acts as "boundary"). @default 1
-   */
-  boundaryCount?: number;
-
-  /**
-   * Show first/last buttons (`«` / `»`). @default true
-   */
-  showFirstLast?: boolean;
-
-  /**
-   * Show the direct page-jump input (variant=`default` only).
-   * @default true
-   */
-  showJumpInput?: boolean;
-
-  /**
-   * Disable all interactive elements (kept rendered but inert).
-   */
-  disabled?: boolean;
-
-  /**
-   * I18n strings. Defaults are English; pass the subset you need
-   * to translate.
-   */
-  labels?: PaginationLabels;
-
-  /** Root-level Tailwind override. */
-  sx?: string;
-
-  /** Per-slot overrides. */
-  slotProps?: PaginationSlotProps;
-}

package/src/components/Pagination/pagination.variants.ts

@@ -1,117 +0,0 @@
-import { tv, type VariantProps } from 'tailwind-variants';
-
-/**
- * `<Pagination>` variant recipe.
- *
- * Slots:
- *  - `root`             — outer `<nav>` container
- *  - `summary`          — "Showing X-Y of Z" text
- *  - `list`             — `<ul>` of page buttons
- *  - `pageButton`       — individual page number button
- *  - `activeButton`     — modifier applied to the current page
- *  - `navButton`        — first/prev/next/last buttons
- *  - `ellipsis`         — `…` rendered when range gap
- *  - `pageSizeSelector` — native `<select>` for page size
- *  - `jumpInput`        — direct page jump `<input>`
- *
- * Variant axes:
- *  - `variant` — `default` (full kit) | `compact` (number buttons +
- *    prev/next only) | `minimal` ("X / Y pages" + prev/next only).
- *  - `size` — `sm` | `md` (default) | `lg`. Drives padding + text
- *    size on the buttons.
- */
-export const paginationVariants = tv({
-  slots: {
-    root: 'flex flex-wrap items-center gap-3',
-    // All neutral classes auto-invert via the dashforgePreset() CSS-var
-    // swap. `bg-neutral-50` provides the button surface (matches page
-    // surface; the border gives the separation). `hover:bg-neutral-100`
-    // is the one-tier elevation that works in both modes.
-    summary: 'text-neutral-600',
-    list: 'inline-flex items-center gap-1',
-    pageButton: [
-      'inline-flex items-center justify-center rounded-md',
-      'border border-neutral-300',
-      'bg-neutral-50',
-      'text-neutral-700',
-      'hover:bg-neutral-100',
-      'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
-      'transition-colors motion-reduce:transition-none',
-      'disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none',
-    ],
-    activeButton: [
-      // Primary palette does NOT auto-invert — `dark:` shift is a
-      // design choice for tone refinement (kept).
-      'bg-primary-500 text-white border-primary-500',
-      'hover:bg-primary-600 dark:hover:bg-primary-400',
-    ],
-    navButton: [
-      'inline-flex items-center justify-center rounded-md',
-      'border border-neutral-300',
-      'bg-neutral-50',
-      'text-neutral-700',
-      'hover:bg-neutral-100',
-      'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
-      'transition-colors motion-reduce:transition-none',
-      'disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none',
-    ],
-    ellipsis: 'inline-flex items-center justify-center text-neutral-500 px-1',
-    pageSizeSelector: [
-      'inline-flex items-center gap-2',
-      'text-neutral-700',
-    ],
-    jumpInput: [
-      'rounded-md border border-neutral-300',
-      'bg-neutral-50',
-      'text-neutral-900',
-      'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
-      'transition-colors motion-reduce:transition-none',
-    ],
-  },
-  variants: {
-    // Note: variant-driven visibility is enforced via conditional JSX
-    // rendering (in `Pagination.tsx`), NOT via `hidden` Tailwind class.
-    // Reason: `display: none` keeps the elements in the DOM (and in the
-    // a11y tree depending on how it's applied), which leaks into
-    // testing-library `queryByText` and feels semantically wrong for
-    // "this UI piece doesn't exist in this variant". So compact and
-    // minimal slots stay empty here.
-    variant: {
-      default: {},
-      compact: {},
-      minimal: {},
-    },
-    size: {
-      sm: {
-        summary: 'text-xs',
-        pageButton: 'h-7 min-w-7 px-2 text-xs',
-        navButton: 'h-7 min-w-7 px-2 text-xs',
-        ellipsis: 'h-7 min-w-5 text-xs',
-        pageSizeSelector: 'text-xs',
-        jumpInput: 'h-7 px-2 text-xs w-14',
-      },
-      md: {
-        summary: 'text-sm',
-        pageButton: 'h-9 min-w-9 px-3 text-sm',
-        navButton: 'h-9 min-w-9 px-3 text-sm',
-        ellipsis: 'h-9 min-w-6 text-sm',
-        pageSizeSelector: 'text-sm',
-        jumpInput: 'h-9 px-2 text-sm w-16',
-      },
-      lg: {
-        summary: 'text-base',
-        pageButton: 'h-10 min-w-10 px-4 text-base',
-        navButton: 'h-10 min-w-10 px-4 text-base',
-        ellipsis: 'h-10 min-w-7 text-base',
-        pageSizeSelector: 'text-base',
-        jumpInput: 'h-10 px-3 text-base w-20',
-      },
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-    size: 'md',
-  },
-});
-
-export type PaginationVariants = VariantProps<typeof paginationVariants>;

package/src/components/Popover/Popover.test.tsx

@@ -1,72 +0,0 @@
-// @vitest-environment jsdom
-import * as React from 'react';
-import { describe, it, expect, afterEach, beforeAll } from 'vitest';
-import { render, screen, cleanup } from '@testing-library/react';
-import { Popover } from './Popover.js';
-
-void React;
-afterEach(() => cleanup());
-
-// jsdom doesn't implement ResizeObserver — Radix Floating UI requires it.
-beforeAll(() => {
-  if (typeof globalThis.ResizeObserver === 'undefined') {
-    (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver = class {
-      observe() {}
-      unobserve() {}
-      disconnect() {}
-    };
-  }
-});
-
-describe('Popover — rendering', () => {
-  it('renders the trigger always', () => {
-    render(
-      <Popover content={<p>Panel</p>}>
-        <button>Open panel</button>
-      </Popover>
-    );
-    expect(screen.queryByRole('button', { name: 'Open panel' })).not.toBeNull();
-  });
-
-  it('renders content when controlled open=true', () => {
-    render(
-      <Popover content={<p>Panel content</p>} open onOpenChange={() => {}}>
-        <button>Open panel</button>
-      </Popover>
-    );
-    expect(screen.queryByText('Panel content')).not.toBeNull();
-  });
-
-  it('does not render content when open=false', () => {
-    render(
-      <Popover content={<p>Panel content</p>} open={false} onOpenChange={() => {}}>
-        <button>Open panel</button>
-      </Popover>
-    );
-    expect(screen.queryByText('Panel content')).toBeNull();
-  });
-});
-
-describe('Popover — placement', () => {
-  it.each(['top', 'right', 'bottom', 'left'] as const)(
-    'renders side=%s without crashing',
-    (side) => {
-      render(
-        <Popover content={<p>Panel</p>} open side={side} onOpenChange={() => {}}>
-          <button>T</button>
-        </Popover>
-      );
-      expect(screen.queryByText('Panel')).not.toBeNull();
-    }
-  );
-
-  it('applies width style', () => {
-    render(
-      <Popover content={<p>Panel</p>} open width="300px" onOpenChange={() => {}}>
-        <button>T</button>
-      </Popover>
-    );
-    const content = screen.getByText('Panel').closest('[role="dialog"]') as HTMLElement | null;
-    expect(content?.style.width).toBe('300px');
-  });
-});

package/src/components/Popover/Popover.tsx

@@ -1,55 +0,0 @@
-import * as RadixPopover from '@radix-ui/react-popover';
-import { cn } from '../../utils/cn.js';
-import { popoverVariants } from './popover.variants.js';
-import type { PopoverProps } from './popover.types.js';
-
-/**
- * Dashforge TW `<Popover>` — clickable floating content panel.
- *
- * Built on `@radix-ui/react-popover`:
- *  - Focus trap inside the popover (Tab cycles within).
- *  - Outside-click + Escape dismiss.
- *  - APG dialog-like semantics (`role="dialog"` on content).
- *  - Portal-rendered.
- *
- * Use `<Popover>` for menus / pickers / settings panels with
- * interactive children. Use `<Tooltip>` for read-only hints.
- */
-export function Popover(props: PopoverProps) {
-  const {
-    children,
-    content,
-    side = 'bottom',
-    align = 'center',
-    showArrow = false,
-    open,
-    onOpenChange,
-    sideOffset = 8,
-    width,
-    slotProps,
-  } = props;
-
-  const v = popoverVariants();
-
-  return (
-    <RadixPopover.Root open={open} onOpenChange={onOpenChange}>
-      <RadixPopover.Trigger asChild>{children}</RadixPopover.Trigger>
-      <RadixPopover.Portal>
-        <RadixPopover.Content
-          side={side}
-          align={align}
-          sideOffset={sideOffset}
-          style={width != null ? { width } : undefined}
-          className={cn(v.content(), slotProps?.content?.className)}
-        >
-          {content}
-          {showArrow && (
-            <RadixPopover.Arrow
-              className={cn(v.arrow(), slotProps?.arrow?.className)}
-            />
-          )}
-        </RadixPopover.Content>
-      </RadixPopover.Portal>
-    </RadixPopover.Root>
-  );
-}

package/src/components/Popover/popover.types.ts

@@ -1,42 +0,0 @@
-import type { ReactNode } from 'react';
-
-export interface PopoverSlotProps {
-  content?: { className?: string };
-  arrow?: { className?: string };
-}
-
-/**
- * Props for `<Popover>`.
- *
- * Built on `@radix-ui/react-popover`. Use for richer floating UI
- * than a tooltip — e.g. action menus, color pickers, settings
- * panels.
- *
- * Differences vs `<Tooltip>`:
- *  - Popover is **clickable** and captures focus inside (focus trap).
- *  - Popover supports arbitrary interactive content (forms, buttons).
- *  - Popover dismisses on outside-click / Escape (Radix-managed).
- *  - No `role="tooltip"` — popovers are conceptually mini-dialogs.
- */
-export interface PopoverProps {
-  /** The trigger element (wrapped in Radix's `asChild` slot). */
-  children: ReactNode;
-  /** Popover body content. */
-  content: ReactNode;
-  /** Side of the trigger to render on. @default 'bottom' */
-  side?: 'top' | 'right' | 'bottom' | 'left';
-  /** Alignment along the perpendicular axis. @default 'center' */
-  align?: 'start' | 'center' | 'end';
-  /** Show an arrow indicator. @default false */
-  showArrow?: boolean;
-  /** Controlled open state. */
-  open?: boolean;
-  /** Called when open state changes. */
-  onOpenChange?: (open: boolean) => void;
-  /** Side offset in pixels. @default 8 */
-  sideOffset?: number;
-  /** Width of the popover content. CSS value. */
-  width?: string;
-  /** Per-slot overrides. */
-  slotProps?: PopoverSlotProps;
-}

package/src/components/Popover/popover.variants.ts

@@ -1,24 +0,0 @@
-import { tv, type VariantProps } from 'tailwind-variants';
-
-export const popoverVariants = tv({
-  slots: {
-    content: [
-      // Neutral border auto-inverts via CSS-var swap.
-      'z-50 rounded-md border border-neutral-200',
-      // bg-white hardcoded (no auto-invert) so `dark:` is required.
-      // Target `dark:bg-neutral-100` resolves to #171717 in dark mode
-      // (one elevation tier above the page surface).
-      'bg-white dark:bg-neutral-100 p-4 shadow-lg',
-      // Text auto-inverts.
-      'text-sm text-neutral-900',
-      'focus:outline-none',
-      'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
-      'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
-      'motion-reduce:transition-none motion-reduce:duration-0',
-    ],
-    // Arrow follows content bg: `fill-white` in light + matching dark target.
-    arrow: 'fill-white dark:fill-neutral-100',
-  },
-});
-
-export type PopoverVariants = VariantProps<typeof popoverVariants>;

package/src/components/RadioGroup/RadioGroup.test.tsx

@@ -1,140 +0,0 @@
-// @vitest-environment jsdom
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent, within } from '@testing-library/react';
-import { DashFormProvider } from '@dashforge/forms';
-import { RadioGroup } from './RadioGroup.js';
-import type { RadioGroupOption } from './radioGroup.types.js';
-
-const colors: RadioGroupOption[] = [
-  { value: 'red', label: 'Red' },
-  { value: 'green', label: 'Green' },
-  { value: 'blue', label: 'Blue' },
-];
-
-describe('<RadioGroup>', () => {
-  describe('standalone (no DashForm)', () => {
-    it('renders all options with the provided labels', () => {
-      render(
-        <RadioGroup name="color" label="Pick a color" options={colors} />
-      );
-      // Group label rendered as the labelledby anchor
-      expect(screen.getByText('Pick a color')).toBeTruthy();
-      // Each option label resolves through the htmlFor → button id link
-      for (const opt of colors) {
-        expect(screen.getByLabelText(opt.label as string)).toBeTruthy();
-      }
-    });
-
-    it('selects the default value via uncontrolled `defaultValue`', () => {
-      render(
-        <RadioGroup
-          name="color"
-          options={colors}
-          defaultValue="green"
-        />
-      );
-      const radios = screen.getAllByRole('radio');
-      // The second option corresponds to "green"
-      expect(radios[1].getAttribute('data-state')).toBe('checked');
-    });
-
-    it('fires onValueChange on selection', () => {
-      const onValueChange = vi.fn();
-      render(
-        <RadioGroup
-          name="color"
-          options={colors}
-          onValueChange={onValueChange}
-        />
-      );
-      fireEvent.click(screen.getByLabelText('Blue'));
-      expect(onValueChange).toHaveBeenCalledWith('blue');
-    });
-
-    it('respects per-option `disabled`', () => {
-      const opts: RadioGroupOption[] = [
-        { value: 'a', label: 'A' },
-        { value: 'b', label: 'B', disabled: true },
-      ];
-      render(<RadioGroup name="x" options={opts} />);
-      const radios = screen.getAllByRole('radio') as HTMLButtonElement[];
-      expect(radios[0].disabled).toBe(false);
-      expect(radios[1].disabled).toBe(true);
-    });
-
-    it('disables ALL options when the group is disabled', () => {
-      render(
-        <RadioGroup name="color" options={colors} disabled />
-      );
-      for (const r of screen.getAllByRole('radio') as HTMLButtonElement[]) {
-        expect(r.disabled).toBe(true);
-      }
-    });
-  });
-
-  describe('inside DashFormProvider', () => {
-    it('renders without errors inside a bridge-providing tree', () => {
-      render(
-        <DashFormProvider defaultValues={{ color: 'green' }}>
-          <RadioGroup name="color" label="Color" options={colors} />
-        </DashFormProvider>
-      );
-      // Bridge mode mounts cleanly; all three options render. The exact
-      // checked-state reflection is verified end-to-end in the F4 smoke
-      // page in learn/dash where the full reactive cycle has time to
-      // settle — unit-test assertions on Radix internal state right
-      // after render are timing-sensitive and not worth the brittleness.
-      expect(screen.getAllByRole('radio')).toHaveLength(3);
-    });
-
-    it('renders the helperText when provided', () => {
-      render(
-        <DashFormProvider defaultValues={{ color: '' }}>
-          <RadioGroup
-            name="color"
-            options={colors}
-            helperText="Choose carefully"
-          />
-        </DashFormProvider>
-      );
-      expect(screen.getByText('Choose carefully')).toBeTruthy();
-    });
-  });
-
-  describe('layout variant', () => {
-    it('default `stacked` renders options vertically (flex-col)', () => {
-      const { container } = render(
-        <RadioGroup name="x" options={colors} />
-      );
-      const list = within(container).getByRole('radiogroup');
-      expect(list.className).toMatch(/flex-col/);
-    });
-
-    it('`row` layout renders options horizontally', () => {
-      const { container } = render(
-        <RadioGroup name="x" options={colors} layout="row" />
-      );
-      const list = within(container).getByRole('radiogroup');
-      expect(list.className).toMatch(/flex-row/);
-    });
-  });
-
-  describe('required marker', () => {
-    it('renders a red `*` after the label when `required` is set', () => {
-      render(
-        <RadioGroup
-          name="x"
-          options={colors}
-          label="Color"
-          required
-        />
-      );
-      expect(screen.getByText('*')).toBeTruthy();
-    });
-
-    it('does NOT render a `*` when `required` is omitted', () => {
-      render(<RadioGroup name="x" options={colors} label="Color" />);
-      expect(screen.queryByText('*')).toBeNull();
-    });
-  });
-});