@dashforge/tw 1.1.0 → 1.2.0

package/src/components/ConfirmDialog/confirmDialog.variants.ts

@@ -1,76 +0,0 @@
-import { tv, type VariantProps } from 'tailwind-variants';
-
-/**
- * Tailwind-variants recipe for `<ConfirmDialog>`.
- *
- * Built on the native HTML `<dialog>` element + `showModal()`, which
- * gives us focus-trap, Escape handling, and `::backdrop` pseudo-element
- * for free. The styling here is for the dialog body — the backdrop is
- * styled via the `::backdrop` selector inside the dialog rule.
- *
- * Slots:
- *   - `backdrop`      — semi-opaque overlay (`::backdrop` pseudo)
- *   - `dialog`        — the modal box
- *   - `title`         — modal heading
- *   - `body`          — message text
- *   - `actions`       — bottom button row
- *   - `confirmButton` — primary action
- *   - `cancelButton`  — secondary action
- */
-export const confirmDialogVariants = tv({
-  slots: {
-    backdrop: 'backdrop:bg-black/40 backdrop:backdrop-blur-sm',
-    dialog: [
-      'rounded-lg bg-neutral-50 text-neutral-900 shadow-xl',
-      'border border-neutral-200',
-      'p-0 max-w-md w-[min(28rem,calc(100vw-2rem))]',
-      'open:flex open:flex-col',
-      // Native <dialog> defaults to centered; reinforce for older browsers.
-      'mx-auto my-auto',
-      'focus:outline-none',
-    ],
-    title:
-      'px-5 pt-5 pb-2 text-lg font-semibold text-neutral-900 leading-tight',
-    body: 'px-5 py-2 text-sm text-neutral-700 leading-relaxed',
-    actions:
-      'px-5 py-4 mt-2 flex justify-end gap-2 border-t border-neutral-200',
-    confirmButton: [
-      'inline-flex items-center justify-center px-4 h-9',
-      'rounded-md text-sm font-medium',
-      'outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
-      'transition-colors',
-    ],
-    cancelButton: [
-      'inline-flex items-center justify-center px-4 h-9',
-      'rounded-md text-sm font-medium',
-      'text-neutral-800 bg-neutral-100 hover:bg-neutral-200',
-      'outline-none focus-visible:ring-2 focus-visible:ring-primary-500/50',
-      'transition-colors',
-    ],
-  },
-  variants: {
-    severity: {
-      info: {
-        confirmButton:
-          'bg-primary-600 hover:bg-primary-700 text-white focus-visible:ring-primary-500',
-      },
-      warning: {
-        confirmButton:
-          'bg-warning-600 hover:bg-warning-700 text-white focus-visible:ring-warning-500',
-      },
-      danger: {
-        confirmButton:
-          'bg-danger-600 hover:bg-danger-700 text-white focus-visible:ring-danger-500',
-      },
-      success: {
-        confirmButton:
-          'bg-success-600 hover:bg-success-700 text-white focus-visible:ring-success-500',
-      },
-    },
-  },
-  defaultVariants: {
-    severity: 'info',
-  },
-});
-
-export type ConfirmDialogVariants = VariantProps<typeof confirmDialogVariants>;

package/src/components/Container/Container.test.tsx

@@ -1,209 +0,0 @@
-// @vitest-environment jsdom
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/react';
-import { Container } from './Container.js';
-
-describe('<Container>', () => {
-  // ─── Default rendering ──────────────────────────────────────────────
-  describe('default rendering', () => {
-    it('renders a <div> by default', () => {
-      const { container } = render(<Container>x</Container>);
-      expect(container.firstElementChild?.tagName).toBe('DIV');
-    });
-
-    it('has mx-auto + w-full baseline', () => {
-      const { container } = render(<Container>x</Container>);
-      const cls = container.firstElementChild?.className ?? '';
-      expect(cls).toContain('mx-auto');
-      expect(cls).toContain('w-full');
-    });
-
-    it('default size is xl (max-w-screen-xl)', () => {
-      const { container } = render(<Container>x</Container>);
-      expect(container.firstElementChild?.className).toContain('max-w-screen-xl');
-    });
-
-    it('default px is true — responsive padding ramp', () => {
-      const { container } = render(<Container>x</Container>);
-      const cls = container.firstElementChild?.className ?? '';
-      expect(cls).toContain('px-4');
-      expect(cls).toContain('sm:px-6');
-      expect(cls).toContain('lg:px-8');
-    });
-
-    it('default centerContent is false — no flex column', () => {
-      const { container } = render(<Container>x</Container>);
-      const cls = container.firstElementChild?.className ?? '';
-      // baseline doesn't include flex
-      expect(cls.split(' ')).not.toContain('flex');
-    });
-  });
-
-  // ─── Size axis ──────────────────────────────────────────────────────
-  describe('size', () => {
-    it('size="sm"', () => {
-      const { container } = render(<Container size="sm">x</Container>);
-      expect(container.firstElementChild?.className).toContain('max-w-screen-sm');
-    });
-
-    it('size="lg"', () => {
-      const { container } = render(<Container size="lg">x</Container>);
-      expect(container.firstElementChild?.className).toContain('max-w-screen-lg');
-    });
-
-    it('size="2xl"', () => {
-      const { container } = render(<Container size="2xl">x</Container>);
-      expect(container.firstElementChild?.className).toContain('max-w-screen-2xl');
-    });
-
-    it('size="fluid" emits no max-w-* class', () => {
-      const { container } = render(<Container size="fluid">x</Container>);
-      const cls = container.firstElementChild?.className ?? '';
-      expect(cls).not.toContain('max-w-screen');
-      // still mx-auto + w-full baseline
-      expect(cls).toContain('mx-auto');
-    });
-  });
-
-  // ─── Padding axis ───────────────────────────────────────────────────
-  describe('padding', () => {
-    it('px={false} skips the responsive padding ramp', () => {
-      const { container } = render(<Container px={false}>x</Container>);
-      const cls = container.firstElementChild?.className ?? '';
-      expect(cls).not.toContain('px-4');
-      expect(cls).not.toContain('sm:px-6');
-    });
-  });
-
-  // ─── Center content ─────────────────────────────────────────────────
-  describe('centerContent', () => {
-    it('centerContent turns into flex column items-center', () => {
-      const { container } = render(<Container centerContent>x</Container>);
-      const cls = container.firstElementChild?.className ?? '';
-      expect(cls).toContain('flex');
-      expect(cls).toContain('flex-col');
-      expect(cls).toContain('items-center');
-    });
-  });
-
-  // ─── Override semantics ─────────────────────────────────────────────
-  describe('override', () => {
-    it('sx wins over default size via tailwind-merge', () => {
-      const { container } = render(
-        <Container sx="max-w-3xl">x</Container>,
-      );
-      const cls = container.firstElementChild?.className ?? '';
-      expect(cls).toContain('max-w-3xl');
-      // tailwind-merge collapses the conflicting max-w-screen-xl
-      expect(cls).not.toContain('max-w-screen-xl');
-    });
-
-    it('sx can add vertical padding (Container does not expose it)', () => {
-      const { container } = render(<Container sx="py-12">x</Container>);
-      expect(container.firstElementChild?.className).toContain('py-12');
-    });
-  });
-
-  // ─── Polymorphism ───────────────────────────────────────────────────
-  describe('polymorphism', () => {
-    it('as="main" renders <main> with Container chrome', () => {
-      const { container } = render(<Container as="main">x</Container>);
-      const el = container.firstElementChild;
-      expect(el?.tagName).toBe('MAIN');
-      expect(el?.className).toContain('mx-auto');
-    });
-
-    it('asChild paints onto the child element', () => {
-      const { container } = render(
-        <Container size="lg" asChild>
-          <article>x</article>
-        </Container>,
-      );
-      const el = container.firstElementChild;
-      expect(el?.tagName).toBe('ARTICLE');
-      expect(el?.className).toContain('max-w-screen-lg');
-    });
-
-    it('asChild wins over as when both are passed', () => {
-      const { container } = render(
-        <Container as="main" asChild>
-          <section>x</section>
-        </Container>,
-      );
-      expect(container.firstElementChild?.tagName).toBe('SECTION');
-    });
-  });
-
-  // ─── Pass-through ────────────────────────────────────────────────────
-  describe('pass-through', () => {
-    it('forwards data-* + aria-*', () => {
-      const { container } = render(
-        <Container data-testid="c" aria-label="page">x</Container>,
-      );
-      const el = container.firstElementChild;
-      expect(el?.getAttribute('data-testid')).toBe('c');
-      expect(el?.getAttribute('aria-label')).toBe('page');
-    });
-  });
-
-  // ─── F11-bis edge cases ─────────────────────────────────────────────
-  describe('axis coexistence', () => {
-    it('size + centerContent + px=true (all three combine)', () => {
-      const { container } = render(
-        <Container size="md" centerContent px>x</Container>,
-      );
-      const cls = container.firstElementChild?.className ?? '';
-      expect(cls).toContain('max-w-screen-md');
-      expect(cls).toContain('flex');
-      expect(cls).toContain('flex-col');
-      expect(cls).toContain('items-center');
-      expect(cls).toContain('px-4');
-    });
-
-    it('fluid + centerContent (full-bleed centered hero pattern)', () => {
-      const { container } = render(
-        <Container size="fluid" centerContent>x</Container>,
-      );
-      const cls = container.firstElementChild?.className ?? '';
-      expect(cls).not.toContain('max-w-screen');
-      expect(cls).toContain('flex-col');
-      expect(cls).toContain('items-center');
-    });
-
-    it('fluid + px=false (full-bleed edge-to-edge — hero image pattern)', () => {
-      const { container } = render(
-        <Container size="fluid" px={false}>x</Container>,
-      );
-      const cls = container.firstElementChild?.className ?? '';
-      expect(cls).not.toContain('max-w-screen');
-      expect(cls).not.toContain('px-4');
-      // still has mx-auto + w-full baseline
-      expect(cls).toContain('mx-auto');
-    });
-  });
-
-  describe('nested fluid-outer + capped-inner pattern', () => {
-    it('outer fluid colored band + inner capped content renders both', () => {
-      const { container } = render(
-        <Container size="fluid" px={false} sx="bg-primary-50 py-16">
-          <Container size="lg">
-            <p>inner</p>
-          </Container>
-        </Container>,
-      );
-      const outer = container.firstElementChild;
-      const inner = outer?.querySelector('div');
-      expect(outer?.className).toContain('bg-primary-50');
-      expect(outer?.className).not.toContain('max-w-screen');
-      expect(inner?.className).toContain('max-w-screen-lg');
-    });
-  });
-
-  describe('every size value', () => {
-    const SIZES = ['sm', 'md', 'lg', 'xl', '2xl'] as const;
-    it.each(SIZES)('size="%s" emits max-w-screen-%s', (s) => {
-      const { container } = render(<Container size={s}>x</Container>);
-      expect(container.firstElementChild?.className).toContain(`max-w-screen-${s}`);
-    });
-  });
-});

package/src/components/Container/Container.tsx

@@ -1,74 +0,0 @@
-import { forwardRef, type ElementType, type ReactElement } from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cn } from '../../utils/cn.js';
-import { containerVariants } from './container.variants.js';
-import type { ContainerProps } from './container.types.js';
-
-/**
- * `<Container>` — centered max-width wrapper for page-level layouts.
- *
- * The pattern is universal: every page-root `<div>` in a non-trivial
- * web app boils down to "mx-auto + max-w-X + responsive horizontal
- * padding". Container collapses that into a typed prop set so the
- * decision lives in ONE place per app section (the Container size),
- * not scattered as utility chains across every page file.
- *
- * Default size is `'xl'` (1280px) — comfortable for full app shells
- * with a left nav + main + optional right rail. Drop to `'lg'` (1024px)
- * for content-heavy docs/marketing, jump to `'2xl'` (1536px) for wide
- * dashboards.
- *
- * Composition pattern — Container at the page root, Stack/Grid inside:
- *
- *   <Container size="lg" as="main">
- *     <Stack gap={8}>
- *       <Typography variant="h1">Page title</Typography>
- *       <Grid container spacing={6}>
- *         <Grid xs={12} md={6}>...</Grid>
- *       </Grid>
- *     </Stack>
- *   </Container>
- *
- * Container handles the page chrome (centered, padded, capped width);
- * Stack/Grid handle the actual layout of children. Two concerns, two
- * primitives.
- *
- * Polymorphism rule (same as Typography/Box/Stack/Grid): when both
- * `as` and `asChild` are passed, `asChild` wins.
- */
-export const Container = forwardRef<HTMLElement, ContainerProps>(
-  function Container(props, ref) {
-    const {
-      size,
-      px,
-      centerContent,
-      as,
-      asChild = false,
-      sx,
-      children,
-      ...rest
-    } = props;
-
-    const classes = cn(
-      containerVariants({ size, px, centerContent }),
-      sx,
-    );
-
-    if (asChild) {
-      return (
-        <Slot ref={ref} className={classes} {...rest}>
-          {children as ReactElement}
-        </Slot>
-      );
-    }
-
-    const Tag = (as ?? 'div') as ElementType;
-    return (
-      <Tag ref={ref as never} className={classes} {...rest}>
-        {children}
-      </Tag>
-    );
-  },
-);
-
-Container.displayName = 'Container';

package/src/components/Container/container.types.ts

@@ -1,45 +0,0 @@
-import type { ElementType, HTMLAttributes } from 'react';
-import type { ContainerVariants } from './container.variants.js';
-
-/**
- * Props for `<Container>` — page-level centered max-width wrapper.
- *
- * Use at the page-root level (or section-root) to constrain content
- * width and apply the canonical responsive horizontal padding ramp.
- * Compose Stack/Grid INSIDE Container for the actual layout work.
- *
- * Native attribute overrides:
- *   • `className` omitted in favour of `sx` (utility string, merged
- *     via tailwind-merge — same convention as Box/Stack/Grid/Typography).
- */
-export interface ContainerProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'className'>,
-          Pick<ContainerVariants, 'size' | 'px' | 'centerContent'> {
-  /**
-   * Override the rendered HTML tag. Defaults to `'div'`. Use
-   * `as="main"` for the primary content region of a page,
-   * `as="section"` for a named section, `as="article"` for a
-   * self-contained article shell.
-   *
-   * Ignored when `asChild` is true.
-   */
-  as?: ElementType;
-
-  /**
-   * Render via Radix `Slot` — the Container styles paint onto the
-   * single React child instead of wrapping it. Useful for letting a
-   * router `<main>` element receive the Container chrome without
-   * adding an intermediate `<div>` in the tree.
-   *
-   * Mutually exclusive with `as` (when both are passed, `asChild` wins).
-   */
-  asChild?: boolean;
-
-  /**
-   * Utility classes appended to the variant chain. Resolved via
-   * `tailwind-merge` so the consumer's classes always win over the
-   * variant defaults — useful for one-off vertical padding (`sx="py-8"`),
-   * custom max-width (`sx="max-w-3xl"`), etc.
-   */
-  sx?: string;
-}

package/src/components/Container/container.variants.ts

@@ -1,81 +0,0 @@
-import { tv, type VariantProps } from 'tailwind-variants';
-
-/**
- * `containerVariants` — centered max-width wrapper for page layouts.
- *
- * Architectural role:
- *
- *   Every web app has the same pattern at the page-root level: a div
- *   that's `mx-auto`, capped at some `max-w-*`, with responsive
- *   horizontal padding. Without Container, every page rewrites:
- *
- *     <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
- *
- *   Container collapses that into one typed prop set, with size names
- *   that mirror Tailwind's breakpoint vocabulary so the muscle memory
- *   carries over (`size="lg"` ↔ `max-w-screen-lg`).
- *
- * Size axis — maps to Tailwind's `max-w-screen-*` aliases:
- *   • sm     → max-w-screen-sm     (640px)
- *   • md     → max-w-screen-md     (768px)
- *   • lg     → max-w-screen-lg     (1024px) — most common doc/content cap
- *   • xl     → max-w-screen-xl     (1280px) — default; comfortable for full apps
- *   • 2xl    → max-w-screen-2xl    (1536px) — wide dashboards
- *   • fluid  → no max-width at all (full bleed, padding still applies)
- *
- * Padding axis (`px`):
- *   • true (default) — responsive horizontal padding (px-4 sm:px-6 lg:px-8)
- *     The canonical Tailwind responsive padding ramp. Designed to keep
- *     edges from kissing the viewport on mobile and breathing more on
- *     larger screens.
- *   • false — no padding. Use when the consumer wants full bleed AND
- *     handles edge padding inside (e.g. a hero section with its own
- *     internal spacing scale).
- *
- * Center content axis (`centerContent`):
- *   • true  — turns the Container into a flex column with items-center
- *     so the page content stacks centered horizontally. Common for
- *     marketing pages, sign-in flows, "single artifact" layouts.
- *   • false (default) — children flow normally (block stacking).
- */
-export const containerVariants = tv({
-  base: 'mx-auto w-full',
-
-  variants: {
-    size: {
-      sm:    'max-w-screen-sm',
-      md:    'max-w-screen-md',
-      lg:    'max-w-screen-lg',
-      xl:    'max-w-screen-xl',
-      '2xl': 'max-w-screen-2xl',
-      fluid: '',
-    },
-
-    /*
-     * Responsive padding ramp. `false` skips it entirely so the
-     * consumer can supply custom padding via `sx` when needed.
-     */
-    px: {
-      true:  'px-4 sm:px-6 lg:px-8',
-      false: '',
-    },
-
-    /*
-     * Stacks children centered. Mutually compatible with all sizes —
-     * a fluid container with centerContent is the canonical "marketing
-     * hero" layout.
-     */
-    centerContent: {
-      true:  'flex flex-col items-center',
-      false: '',
-    },
-  },
-
-  defaultVariants: {
-    size: 'xl',
-    px: true,
-    centerContent: false,
-  },
-});
-
-export type ContainerVariants = VariantProps<typeof containerVariants>;

package/src/components/DataGrid/DataGrid.perf.test.tsx

@@ -1,114 +0,0 @@
-// @vitest-environment jsdom
-/**
- * Performance guardrails for `<DataGrid>` (virtualized).
- *
- * The whole point of DataGrid is O(window) rendering: mounting 10k or
- * 100k rows must cost roughly the same as mounting a few hundred,
- * because only the visible window (+ overscan + 2 spacer `<tr>`) is
- * ever in the DOM. These tests pin that invariant — a regression that
- * accidentally mounts the full dataset (e.g. a broken `renderedRows`
- * slice) blows the DOM-node-count assertion immediately.
- *
- * Budgets are deliberately generous — order-of-magnitude regressions,
- * not micro-jitter.
- */
-import * as React from 'react';
-import { describe, it, expect, afterEach, beforeAll } from 'vitest';
-import { render, cleanup } from '@testing-library/react';
-import { DataGrid } from './DataGrid.js';
-import type { TableColumn } from '../Table/table.types.js';
-
-void React;
-afterEach(() => cleanup());
-
-beforeAll(() => {
-  // jsdom ships neither ResizeObserver nor IntersectionObserver — the
-  // virtualizer + Radix popovers need them.
-  if (typeof globalThis.ResizeObserver === 'undefined') {
-    (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver =
-      class {
-        observe() {}
-        unobserve() {}
-        disconnect() {}
-      };
-  }
-});
-
-interface Row {
-  id: string;
-  name: string;
-  email: string;
-  age: number;
-}
-
-const COLS: TableColumn<Row>[] = [
-  { field: 'name', header: 'Name', sortable: true },
-  { field: 'email', header: 'Email' },
-  { field: 'age', header: 'Age', sortable: true },
-];
-
-function makeRows(n: number): Row[] {
-  return Array.from({ length: n }).map((_, i) => ({
-    id: `r${i}`,
-    name: `User ${i}`,
-    email: `user${i}@example.com`,
-    age: 20 + (i % 50),
-  }));
-}
-
-describe('<DataGrid> virtualization performance', () => {
-  it('mounts 10 000 rows under 500ms (render cost is O(window))', () => {
-    const rows = makeRows(10_000);
-    const t0 = performance.now();
-    render(
-      <DataGrid
-        rows={rows}
-        cols={COLS}
-        getRowId={(r) => r.id}
-        rowHeight={40}
-        height="400px"
-      />,
-    );
-    const t1 = performance.now();
-    expect(t1 - t0).toBeLessThan(500);
-  });
-
-  it('mounts only the visible window in the DOM, NOT the full dataset', () => {
-    const rows = makeRows(10_000);
-    const { container } = render(
-      <DataGrid
-        rows={rows}
-        cols={COLS}
-        getRowId={(r) => r.id}
-        rowHeight={40}
-        height="400px"
-      />,
-    );
-    // Virtualized: visible window + overscan + up to 2 spacer rows —
-    // a few dozen `<tr>`, far below the 10 000 total.
-    const trCount = container.querySelectorAll('tbody tr').length;
-    expect(trCount).toBeGreaterThan(0);
-    expect(trCount).toBeLessThan(100);
-  });
-
-  it('mounts 100 000 rows within the same generous budget (virtualized)', () => {
-    const rows = makeRows(100_000);
-    const t0 = performance.now();
-    const { container } = render(
-      <DataGrid
-        rows={rows}
-        cols={COLS}
-        getRowId={(r) => r.id}
-        rowHeight={40}
-        height="400px"
-      />,
-    );
-    const t1 = performance.now();
-    // 10× the rows — the RENDER stays windowed, so the cost must not
-    // scale with the dataset. Generous absolute bound (not a ratio,
-    // to stay non-flaky under CI jitter).
-    expect(t1 - t0).toBeLessThan(800);
-    // And the DOM still holds only the window.
-    expect(container.querySelectorAll('tbody tr').length).toBeLessThan(100);
-  });
-});