@dashforge/tw 1.1.0 → 1.2.0

package/src/components/Chip/chip.types.ts

@@ -1,128 +0,0 @@
-import type { ReactNode } from 'react';
-import type { ClassValue } from 'tailwind-variants';
-import type { Engine } from '@dashforge/ui-core';
-import type { AccessRequirement } from '@dashforge/rbac';
-import type { ChipVariants } from './chip.variants.js';
-
-/**
- * Props for `<Chip>` — status / filter / tag pill.
- *
- * Mirrors MUI Chip's API surface where it makes sense (label, icon,
- * avatar, clickable, onDelete) and extends with Dashforge-specific
- * affordances (`selected` for filter chips, `access` for RBAC).
- *
- * Variant axis (`soft | solid | outline`) is the **Dashforge chip
- * vocabulary** — distinct from Button's (`solid | outline | ghost |
- * link`) and Alert's (`standard | filled | outlined`). The asymmetry
- * is intentional and category-scoped: each component family uses the
- * vocabulary that maps to its design needs (see CHANGELOG +
- * MIGRATION.md for the design note).
- *
- * @see https://mui.com/material-ui/api/chip/
- */
-export interface ChipProps
-  extends Pick<
-    ChipVariants,
-    'color' | 'variant' | 'size' | 'selected' | 'disabled'
-  > {
-  /**
-   * The chip's textual content. Named `label` for MUI parity — most
-   * design systems (MUI, Radix Themes, Mantine, Tremor) use `label`
-   * as the canonical content prop on Chip / Badge / Pill primitives.
-   */
-  label: ReactNode;
-
-  /**
-   * Leading icon — typically a small SVG (16px). Consumer brings
-   * their iconography. Rendered inside the chip BEFORE the label.
-   * Falls back to `avatar` if not provided.
-   */
-  icon?: ReactNode;
-
-  /**
-   * Leading avatar — alternative to `icon`, typically a small
-   * circular image (Avatar component or `<img>`). When BOTH `icon`
-   * and `avatar` are set, `avatar` wins (matches MUI behaviour).
-   */
-  avatar?: ReactNode;
-
-  /**
-   * Makes the chip interactive — renders as `<button>` (instead of
-   * `<span>`), adds focus ring + hover state. Set automatically to
-   * `true` when `onClick` is provided.
-   */
-  clickable?: boolean;
-
-  /**
-   * Click handler. Implies `clickable=true`. Fires on chip-body
-   * click (NOT on the delete button — `onDelete` is the dedicated
-   * path for that).
-   */
-  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-
-  /**
-   * When set, renders a trailing × delete button. The handler fires
-   * on delete-button click and stops propagation so the chip's
-   * `onClick` doesn't also fire.
-   */
-  onDelete?: (event: React.MouseEvent<HTMLElement>) => void;
-
-  /**
-   * Custom delete icon. Defaults to an inline stroke-style × SVG.
-   * `currentColor` flows through, so the icon inherits the chip's
-   * text colour.
-   */
-  deleteIcon?: ReactNode;
-
-  /**
-   * `aria-label` for the delete button. Required for screen readers
-   * since the × glyph alone is not semantic.
-   * @default 'Remove'
-   */
-  deleteLabel?: string;
-
-  /**
-   * Reactive visibility predicate. Re-evaluated on every engine state
-   * change when the chip is mounted inside a `<DashForm>`; outside
-   * a form, evaluated as a plain predicate (the consumer captures
-   * any external state in the closure).
-   *
-   * When the predicate returns `false`, the component renders `null`
-   * — same contract as `<Alert>` / `<TextField>` / other bridge-aware
-   * components. Useful for status chips that should appear / disappear
-   * based on form values without forcing JSX guards on the consumer.
-   *
-   * @example
-   * ```tsx
-   * // Inside a DashForm — engine-reactive
-   * <Chip
-   *   label="Premium"
-   *   color="primary"
-   *   visibleWhen={(engine) => engine.getNode('plan')?.value === 'premium'}
-   * />
-   *
-   * // Outside a form — closure over external state
-   * <Chip
-   *   label={`${count} results`}
-   *   visibleWhen={() => count > 0}
-   * />
-   * ```
-   */
-  visibleWhen?: (engine: Engine) => boolean;
-
-  /**
-   * RBAC requirement. Same contract as `<Button>` / `<IconButton>` —
-   * `onUnauthorized: 'hide' | 'disable' | 'readonly'`.
-   * (`readonly` maps to `disabled` for chips, matching Button.)
-   */
-  access?: AccessRequirement;
-
-  /**
-   * Root-element class shortcut (string or clsx-compatible value).
-   * Last-wins via `tailwind-merge` inside `cn()`.
-   */
-  sx?: ClassValue;
-
-  /** Standard React `className` — appended to the root via `cn()`. */
-  className?: string;
-}

package/src/components/Chip/chip.variants.ts

@@ -1,173 +0,0 @@
-import { tv, type VariantProps } from 'tailwind-variants';
-
-/**
- * Tailwind-variants recipe for `<Chip>` — promoted from the internal
- * `Table/cells/RenderChip` (Sprint 4.4). The visual treatment is
- * preserved byte-identical: the same 3 × 7 compound matrix
- * (variant × color) emitted by RenderChip is now the single source
- * of truth, consumed by both the public `<Chip>` and (via thin
- * wrapper) the legacy `RenderChip` internal.
- *
- * Slots (only `root` slot used by the public Chip; sub-slots
- * surfaced via separate inline classes in `Chip.tsx`):
- *   - `root` — outer chip surface
- *
- * Variants axis (3 × 7, plus orthogonal `size`):
- *   - `color`: 7 intents (`neutral / primary / secondary / success /
- *     warning / danger / info`)
- *   - `variant`: `soft` (default) / `solid` / `outline`
- *   - `size`: `sm` (default) / `md`
- *
- * Token-driven: every Tailwind utility resolves through
- * `dashforgePreset()` → CSS variables. No hardcoded hex.
- *
- * `dark:` variants on color palettes (lines 49-77 of legacy
- * RenderChip, preserved here) are INTENTIONAL — color palettes do not
- * auto-invert via the CSS-var swap (only the `neutral` palette does),
- * so the `dark:` shift is a deliberate design choice (darker bg +
- * lighter text in dark mode for visual cohesion). `dark:` on the
- * `neutral` row is AVOIDED — that would double-invert.
- */
-export const chipVariants = tv({
-  base: [
-    'inline-flex items-center gap-1 rounded-full font-medium',
-    'whitespace-nowrap',
-    // Smooth transitions for clickable / selected state changes.
-    'transition-colors',
-    'motion-reduce:transition-none',
-  ],
-  variants: {
-    color: {
-      neutral: '',
-      primary: '',
-      secondary: '',
-      success: '',
-      warning: '',
-      danger: '',
-      info: '',
-    },
-    variant: {
-      soft: '',
-      solid: '',
-      outline: '',
-    },
-    size: {
-      sm: 'h-5 px-2 text-xs',
-      md: 'h-6 px-2.5 text-xs',
-    },
-    /**
-     * Clickable state — adds focus ring + hover transition. Applied
-     * when the chip renders as `<button>` (i.e. `onClick` or
-     * explicit `clickable` is set).
-     */
-    clickable: {
-      true: [
-        'cursor-pointer select-none',
-        'outline-none focus-visible:ring-2 focus-visible:ring-offset-1',
-      ],
-    },
-    /**
-     * Selected state — used on filter chips to indicate active
-     * selection. Visually shifts the chip to a heavier emphasis
-     * (one step up the elevation ladder of its current variant).
-     * Compound rules below apply the actual shift per (variant, color)
-     * cell.
-     */
-    selected: {
-      true: 'ring-2 ring-offset-1',
-    },
-    /** Disabled state for clickable chips. */
-    disabled: {
-      true: 'opacity-50 cursor-not-allowed pointer-events-none',
-    },
-  },
-  compoundVariants: [
-    // ─── soft × color ──────────────────────────────────────────────
-    // Subtle bg + readable text. Neutral row uses NO `dark:` (auto-
-    // inverts via the dashforgePreset CSS-var swap). Color rows KEEP
-    // `dark:` (color palettes don't auto-invert).
-    { variant: 'soft', color: 'neutral',   class: 'bg-neutral-100 text-neutral-700' },
-    { variant: 'soft', color: 'primary',   class: 'bg-primary-100 dark:bg-primary-950 text-primary-700 dark:text-primary-300' },
-    { variant: 'soft', color: 'secondary', class: 'bg-secondary-100 dark:bg-secondary-950 text-secondary-700 dark:text-secondary-300' },
-    { variant: 'soft', color: 'success',   class: 'bg-success-100 dark:bg-success-950 text-success-700 dark:text-success-300' },
-    { variant: 'soft', color: 'warning',   class: 'bg-warning-100 dark:bg-warning-950 text-warning-700 dark:text-warning-300' },
-    { variant: 'soft', color: 'danger',    class: 'bg-danger-100 dark:bg-danger-950 text-danger-700 dark:text-danger-300' },
-    { variant: 'soft', color: 'info',      class: 'bg-info-100 dark:bg-info-950 text-info-700 dark:text-info-300' },
-    // ─── solid × color ─────────────────────────────────────────────
-    // Full bg + contrasting text. Solid neutral uses neutral-700/50
-    // (both on neutral palette → auto-invert together).
-    // `text-white` is deliberately NOT used: white does not auto-invert,
-    // which would flip the contrast in dark mode for the neutral row.
-    { variant: 'solid', color: 'neutral',   class: 'bg-neutral-700 text-neutral-50' },
-    { variant: 'solid', color: 'primary',   class: 'bg-primary-500 text-white' },
-    { variant: 'solid', color: 'secondary', class: 'bg-secondary-500 text-white' },
-    { variant: 'solid', color: 'success',   class: 'bg-success-500 text-white' },
-    { variant: 'solid', color: 'warning',   class: 'bg-warning-500 text-white' },
-    { variant: 'solid', color: 'danger',    class: 'bg-danger-500 text-white' },
-    { variant: 'solid', color: 'info',      class: 'bg-info-500 text-white' },
-    // ─── outline × color ───────────────────────────────────────────
-    // Border + colored text. Outline neutral: both auto-invert via
-    // CSS-var swap. Color rows: `dark:text-*-300` for legibility in
-    // dark mode on a transparent background.
-    { variant: 'outline', color: 'neutral',   class: 'border border-neutral-300 text-neutral-700' },
-    { variant: 'outline', color: 'primary',   class: 'border border-primary-500 text-primary-700 dark:text-primary-300' },
-    { variant: 'outline', color: 'secondary', class: 'border border-secondary-500 text-secondary-700 dark:text-secondary-300' },
-    { variant: 'outline', color: 'success',   class: 'border border-success-500 text-success-700 dark:text-success-300' },
-    { variant: 'outline', color: 'warning',   class: 'border border-warning-500 text-warning-700 dark:text-warning-300' },
-    { variant: 'outline', color: 'danger',    class: 'border border-danger-500 text-danger-700 dark:text-danger-300' },
-    { variant: 'outline', color: 'info',      class: 'border border-info-500 text-info-700 dark:text-info-300' },
-    // ─── clickable × color hover (subtle bg shift) ─────────────────
-    // Hover state on clickable chips. Each (variant, color) hover
-    // emits a one-tier deeper bg tint, working across both modes via
-    // the same auto-invert logic as the base compound.
-    { clickable: true, variant: 'soft',  color: 'neutral',   class: 'hover:bg-neutral-200' },
-    { clickable: true, variant: 'soft',  color: 'primary',   class: 'hover:bg-primary-200 dark:hover:bg-primary-900' },
-    { clickable: true, variant: 'soft',  color: 'secondary', class: 'hover:bg-secondary-200 dark:hover:bg-secondary-900' },
-    { clickable: true, variant: 'soft',  color: 'success',   class: 'hover:bg-success-200 dark:hover:bg-success-900' },
-    { clickable: true, variant: 'soft',  color: 'warning',   class: 'hover:bg-warning-200 dark:hover:bg-warning-900' },
-    { clickable: true, variant: 'soft',  color: 'danger',    class: 'hover:bg-danger-200 dark:hover:bg-danger-900' },
-    { clickable: true, variant: 'soft',  color: 'info',      class: 'hover:bg-info-200 dark:hover:bg-info-900' },
-    // Solid hover → one tone darker
-    { clickable: true, variant: 'solid', color: 'neutral',   class: 'hover:bg-neutral-800' },
-    { clickable: true, variant: 'solid', color: 'primary',   class: 'hover:bg-primary-600' },
-    { clickable: true, variant: 'solid', color: 'secondary', class: 'hover:bg-secondary-600' },
-    { clickable: true, variant: 'solid', color: 'success',   class: 'hover:bg-success-600' },
-    { clickable: true, variant: 'solid', color: 'warning',   class: 'hover:bg-warning-600' },
-    { clickable: true, variant: 'solid', color: 'danger',    class: 'hover:bg-danger-600' },
-    { clickable: true, variant: 'solid', color: 'info',      class: 'hover:bg-info-600' },
-    // Outline hover → tinted bg appears (transparent → light tint)
-    { clickable: true, variant: 'outline', color: 'neutral',   class: 'hover:bg-neutral-100' },
-    { clickable: true, variant: 'outline', color: 'primary',   class: 'hover:bg-primary-50 dark:hover:bg-primary-950' },
-    { clickable: true, variant: 'outline', color: 'secondary', class: 'hover:bg-secondary-50 dark:hover:bg-secondary-950' },
-    { clickable: true, variant: 'outline', color: 'success',   class: 'hover:bg-success-50 dark:hover:bg-success-950' },
-    { clickable: true, variant: 'outline', color: 'warning',   class: 'hover:bg-warning-50 dark:hover:bg-warning-950' },
-    { clickable: true, variant: 'outline', color: 'danger',    class: 'hover:bg-danger-50 dark:hover:bg-danger-950' },
-    { clickable: true, variant: 'outline', color: 'info',      class: 'hover:bg-info-50 dark:hover:bg-info-950' },
-    // ─── selected × color (focus ring tone) ────────────────────────
-    // When selected, the ring color matches the chip's intent.
-    { selected: true, color: 'neutral',   class: 'ring-neutral-400' },
-    { selected: true, color: 'primary',   class: 'ring-primary-500' },
-    { selected: true, color: 'secondary', class: 'ring-secondary-500' },
-    { selected: true, color: 'success',   class: 'ring-success-500' },
-    { selected: true, color: 'warning',   class: 'ring-warning-500' },
-    { selected: true, color: 'danger',    class: 'ring-danger-500' },
-    { selected: true, color: 'info',      class: 'ring-info-500' },
-    // ─── clickable × color (focus ring tone) ───────────────────────
-    // Tab-focused ring tone matches the chip color (same intent as
-    // selected but only when keyboard-focused, via focus-visible).
-    { clickable: true, color: 'neutral',   class: 'focus-visible:ring-neutral-400' },
-    { clickable: true, color: 'primary',   class: 'focus-visible:ring-primary-500' },
-    { clickable: true, color: 'secondary', class: 'focus-visible:ring-secondary-500' },
-    { clickable: true, color: 'success',   class: 'focus-visible:ring-success-500' },
-    { clickable: true, color: 'warning',   class: 'focus-visible:ring-warning-500' },
-    { clickable: true, color: 'danger',    class: 'focus-visible:ring-danger-500' },
-    { clickable: true, color: 'info',      class: 'focus-visible:ring-info-500' },
-  ],
-  defaultVariants: {
-    color: 'neutral',
-    variant: 'soft',
-    size: 'sm',
-  },
-});
-
-export type ChipVariants = VariantProps<typeof chipVariants>;

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

@@ -1,172 +0,0 @@
-// @vitest-environment jsdom
-/**
- * Performance + re-render budget tests for `<ConfirmDialogProvider>`.
- *
- * Guardrails:
- *
- *  1. Provider mount is cheap — it lives near the top of the tree, so
- *     it must not chase any expensive setup paths.
- *
- *  2. `confirm()` reference is stable across provider re-renders so
- *     consumers can pass it through `useEffect` deps without thrashing.
- *
- *  3. Children do NOT re-render every time a confirm() opens/closes —
- *     state lives inside the provider, but a memoized context value
- *     plus React's bail-out on identical context means the children
- *     subtree stays put.
- *
- *  4. Dismissing the dialog with the queue drained does not allocate
- *     a new array (cheap idle path).
- */
-import * as React from 'react';
-import { describe, it, expect, afterEach, beforeAll } from 'vitest';
-import {
-  render,
-  screen,
-  fireEvent,
-  cleanup,
-  act,
-} from '@testing-library/react';
-import {
-  ConfirmDialogProvider,
-  useConfirm,
-} from './ConfirmDialog.js';
-
-void React;
-afterEach(() => cleanup());
-
-beforeAll(() => {
-  if (typeof HTMLDialogElement === 'undefined') return;
-  const proto = HTMLDialogElement.prototype as unknown as {
-    showModal?: () => void;
-    close?: (returnValue?: string) => void;
-  };
-  if (typeof proto.showModal !== 'function') {
-    proto.showModal = function (this: HTMLDialogElement) {
-      this.setAttribute('open', '');
-    };
-  }
-  if (typeof proto.close !== 'function') {
-    proto.close = function (this: HTMLDialogElement) {
-      this.removeAttribute('open');
-      this.dispatchEvent(new Event('close'));
-    };
-  }
-});
-
-describe('<ConfirmDialogProvider> performance', () => {
-  it('mounts under 200ms with empty children (cold-start safe budget)', () => {
-    const t0 = performance.now();
-    render(
-      <ConfirmDialogProvider>
-        <div />
-      </ConfirmDialogProvider>
-    );
-    const t1 = performance.now();
-    // Generous bound to accommodate cold-start variance under full
-    // workspace test run; warm path is in single-digit ms.
-    expect(t1 - t0).toBeLessThan(200);
-  });
-
-  it('opens + closes a dialog in under 30ms', async () => {
-    const Harness = () => {
-      const confirm = useConfirm();
-      return (
-        <button
-          data-testid="t"
-          onClick={async () => {
-            await confirm({ title: 'X' });
-          }}
-        >
-          go
-        </button>
-      );
-    };
-    render(
-      <ConfirmDialogProvider>
-        <Harness />
-      </ConfirmDialogProvider>
-    );
-    const t0 = performance.now();
-    await act(async () => {
-      fireEvent.click(screen.getByTestId('t'));
-    });
-    await act(async () => {
-      fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
-    });
-    const t1 = performance.now();
-    // Generous budget to absorb cold-start variance when run alongside
-    // the rest of the workspace test suite.
-    expect(t1 - t0).toBeLessThan(200);
-  });
-});
-
-describe('<ConfirmDialogProvider> re-render budget', () => {
-  it('does NOT re-render unrelated children when confirm() opens', async () => {
-    const sibCount = { count: 0 };
-    const Sibling = () => {
-      sibCount.count++;
-      return <div data-testid="sib" />;
-    };
-    const Trigger = () => {
-      const confirm = useConfirm();
-      return (
-        <button data-testid="t" onClick={() => void confirm({ title: 'X' })}>
-          go
-        </button>
-      );
-    };
-    render(
-      <ConfirmDialogProvider>
-        <Sibling />
-        <Trigger />
-      </ConfirmDialogProvider>
-    );
-    const baseline = sibCount.count;
-    await act(async () => {
-      fireEvent.click(screen.getByTestId('t'));
-    });
-    // The provider re-renders to inflate the dialog, which causes one
-    // children-pass re-render at the parent level — Sibling re-renders
-    // once. Budget: ≤ 1 extra.
-    expect(sibCount.count - baseline).toBeLessThanOrEqual(1);
-  });
-
-  it('confirm() reference is stable across provider re-renders', () => {
-    const refs: Array<unknown> = [];
-    const Capture = () => {
-      const confirm = useConfirm();
-      refs.push(confirm);
-      return null;
-    };
-    const Outer = ({ x }: { x: number }) => (
-      <ConfirmDialogProvider>
-        <div data-x={x} />
-        <Capture />
-      </ConfirmDialogProvider>
-    );
-    const { rerender } = render(<Outer x={1} />);
-    rerender(<Outer x={2} />);
-    rerender(<Outer x={3} />);
-    // Three renders → confirm reference must be identical each time.
-    expect(refs.length).toBeGreaterThanOrEqual(3);
-    expect(refs[0]).toBe(refs[1]);
-    expect(refs[1]).toBe(refs[2]);
-  });
-
-  it('renders at most 2 times on mount', () => {
-    let count = 0;
-    const Counted = (
-      props: React.ComponentProps<typeof ConfirmDialogProvider>
-    ) => {
-      count++;
-      return <ConfirmDialogProvider {...props} />;
-    };
-    render(
-      <Counted>
-        <div />
-      </Counted>
-    );
-    expect(count).toBeLessThanOrEqual(2);
-  });
-});